add a skeleton for route test pages

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>

packages/app-next/src/App.tsx

@@ -17,6 +17,7 @@
 import { graphiqlPlugin as legacyGraphiqlPlugin } from '@backstage/plugin-graphiql';
 import { createApp as createLegacyApp } from '@backstage/app-defaults';
 import { createApp } from '@backstage/frontend-app-api';
+import { pagesPlugin } from './examples/pagesPlugin';
 import { graphiqlPlugin } from './examples/graphiqlPlugin';
 
 /*
@@ -49,7 +50,7 @@ TODO:
 /* app.tsx */
 
 const app = createApp({
-  plugins: [graphiqlPlugin],
+  plugins: [graphiqlPlugin, pagesPlugin],
   // bindRoutes({ bind }) {
   //   bind(catalogPlugin.externalRoutes, {
   //     createComponent: scaffolderPlugin.routes.root,

packages/app-next/src/examples/pagesPlugin.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Link } from '@backstage/core-components';
+import {
+  createPageExtension,
+  createPlugin,
+} from '@backstage/frontend-plugin-api';
+
+const IndexPage = createPageExtension({
+  id: 'index',
+  defaultPath: '/',
+  component: async () => {
+    const Component = () => {
+      // const page1 = useRouteRef();
+      return (
+        <div>
+          op
+          <div>
+            <Link to="/page1">Page 1</Link>
+          </div>
+          <div>
+            <Link to="/graphiql">GraphiQL</Link>
+          </div>
+        </div>
+      );
+    };
+    return <Component />;
+  },
+});
+
+const Page1 = createPageExtension({
+  id: 'page1',
+  defaultPath: '/page1',
+  component: async () => {
+    const Component = () => (
+      <div>
+        <h1>This is page 1</h1>
+      </div>
+    );
+    return <Component />;
+  },
+});
+
+export const pagesPlugin = createPlugin({
+  id: 'pages',
+  extensions: [IndexPage, Page1],
+});

packages/frontend-app-api/src/createApp.tsx

@@ -92,12 +92,16 @@ export function createApp(options: { plugins: BackstagePlugin[] }): {
       ]),
     );
 
-    return createExtensionInstance({
+    const newInstance = createExtensionInstance({
       extension: instanceParams.extension,
       source: instanceParams.source,
       config: instanceParams.config,
       attachments,
     });
+
+    instances.set(instanceParams.extension.id, newInstance);
+
+    return newInstance;
   }
 
   const rootConfigs = attachmentMap.get('root')?.get('default') ?? [];