user-settings: port to new composability API

plugins/user-settings/dev/index.tsx

@@ -13,7 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+import React from 'react';
+import { createDevApp } from '@backstage/dev-utils';
+import { userSettingsPlugin, UserSettingsPage } from '../src/plugin';
+
+createDevApp()
+  .registerPlugin(userSettingsPlugin)
+  .addPage({
+    title: 'Settings',
+    element: <UserSettingsPage />,
+  })
+  .render();

plugins/user-settings/src/index.ts

@@ -13,5 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { plugin } from './plugin';
+
+export {
+  userSettingsPlugin,
+  userSettingsPlugin as plugin,
+  UserSettingsPage,
+} from './plugin';
 export * from './components/';

plugins/user-settings/src/plugin.ts

@@ -13,13 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createPlugin, createRouteRef } from '@backstage/core';
+
+import {
+  createPlugin,
+  createRoutableExtension,
+  createRouteRef,
+} from '@backstage/core';
 
 export const settingsRouteRef = createRouteRef({
-  path: '/settings',
   title: 'Settings',
 });
 
-export const plugin = createPlugin({
+export const userSettingsPlugin = createPlugin({
   id: 'user-settings',
+  routes: {
+    settingsPage: settingsRouteRef,
+  },
 });
+
+export const UserSettingsPage = userSettingsPlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/SettingsPage').then(m => m.SettingsPage),
+    mountPoint: settingsRouteRef,
+  }),
+);