user-settings: add new backend system support

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

plugins/user-settings/package.json

@@ -7,13 +7,13 @@
   "license": "Apache-2.0",
   "exports": {
     ".": "./src/index.ts",
-    "./alpha": "./src/alpha.ts",
+    "./alpha": "./src/alpha.tsx",
     "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
       "alpha": [
-        "src/alpha.ts"
+        "src/alpha.tsx"
       ],
       "package.json": [
         "package.json"
@@ -50,6 +50,7 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/errors": "workspace:^",
+    "@backstage/frontend-plugin-api": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@backstage/types": "workspace:^",

plugins/user-settings/src/alpha.tsx

@@ -1,3 +1,9 @@
+import { createRouteRef } from '@backstage/core-plugin-api';
+import {
+  createPageExtension,
+  createPlugin,
+} from '@backstage/frontend-plugin-api';
+
 /*
  * Copyright 2023 The Backstage Authors
  *
@@ -13,4 +19,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
+
 export * from './translation';
+
+export const userSettingsRouteRef = createRouteRef({
+  id: 'plugin.user-settings.page',
+});
+
+export const UserSettingsPage = createPageExtension({
+  id: 'plugin.user-settings.page',
+  defaultPath: '/settings',
+  routeRef: userSettingsRouteRef,
+  loader: () =>
+    import('./components/SettingsPage').then(m => <m.SettingsPage />),
+});
+
+export default createPlugin({
+  id: 'user-settings',
+  extensions: [UserSettingsPage],
+});

yarn.lock

@@ -9971,6 +9971,7 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@backstage/errors": "workspace:^"
+    "@backstage/frontend-plugin-api": "workspace:^"
     "@backstage/plugin-catalog": "workspace:^"
     "@backstage/plugin-catalog-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"