frontend-plugin-api: move out several coreExtensionData refs

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/frontend-app-api/src/extensions/Core.tsx

@@ -16,8 +16,11 @@
 
 import {
   coreExtensionData,
+  createApiExtension,
+  createComponentExtension,
   createExtension,
   createExtensionInput,
+  createThemeExtension,
   createTranslationExtension,
 } from '@backstage/frontend-plugin-api';
 
@@ -26,13 +29,13 @@ export const Core = createExtension({
   attachTo: { id: 'root', input: 'default' }, // ignored
   inputs: {
     apis: createExtensionInput({
-      api: coreExtensionData.apiFactory,
+      api: createApiExtension.factoryDataRef,
     }),
     themes: createExtensionInput({
-      theme: coreExtensionData.theme,
+      theme: createThemeExtension.themeDataRef,
     }),
     components: createExtensionInput({
-      component: coreExtensionData.component,
+      component: createComponentExtension.componentDataRef,
     }),
     translations: createExtensionInput({
       translation: createTranslationExtension.translationDataRef,

packages/frontend-app-api/src/extensions/CoreNav.tsx

@@ -19,9 +19,9 @@ import {
   createExtension,
   coreExtensionData,
   createExtensionInput,
-  LogoElements,
-  NavTarget,
   useRouteRef,
+  createNavItemExtension,
+  createNavLogoExtension,
 } from '@backstage/frontend-plugin-api';
 import { makeStyles } from '@material-ui/core';
 import {
@@ -52,7 +52,9 @@ const useSidebarLogoStyles = makeStyles({
   },
 });
 
-const SidebarLogo = (props: LogoElements) => {
+const SidebarLogo = (
+  props: (typeof createNavLogoExtension.logoElementsDataRef)['T'],
+) => {
   const classes = useSidebarLogoStyles();
   const { isOpen } = useSidebarOpenState();
 
@@ -67,7 +69,9 @@ const SidebarLogo = (props: LogoElements) => {
   );
 };
 
-const SidebarNavItem = (props: NavTarget) => {
+const SidebarNavItem = (
+  props: (typeof createNavItemExtension.targetDataRef)['T'],
+) => {
   const { icon: Icon, title, routeRef } = props;
   const to = useRouteRef(routeRef)();
   // TODO: Support opening modal, for example, the search one
@@ -80,11 +84,11 @@ export const CoreNav = createExtension({
   attachTo: { id: 'core/layout', input: 'nav' },
   inputs: {
     items: createExtensionInput({
-      target: coreExtensionData.navTarget,
+      target: createNavItemExtension.targetDataRef,
     }),
     logos: createExtensionInput(
       {
-        elements: coreExtensionData.logoElements,
+        elements: createNavLogoExtension.logoElementsDataRef,
       },
       {
         singleton: true,

packages/frontend-app-api/src/extensions/CoreRouter.tsx

@@ -19,6 +19,7 @@ import {
   coreExtensionData,
   createExtension,
   createExtensionInput,
+  createSignInPageExtension,
 } from '@backstage/frontend-plugin-api';
 import {
   ConfigApi,
@@ -31,8 +32,6 @@ import { InternalAppContext } from '../wiring/InternalAppContext';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { AppIdentityProxy } from '../../../core-app-api/src/apis/implementations/IdentityApi/AppIdentityProxy';
 import { BrowserRouter } from 'react-router-dom';
-// eslint-disable-next-line @backstage/no-relative-monorepo-imports
-import { signInPageComponentDataRef } from '../../../frontend-plugin-api/src/extensions/createSignInPageExtension';
 import { RouteTracker } from '../routing/RouteTracker';
 
 export const CoreRouter = createExtension({
@@ -42,7 +41,7 @@ export const CoreRouter = createExtension({
   inputs: {
     signInPage: createExtensionInput(
       {
-        component: signInPageComponentDataRef,
+        component: createSignInPageExtension.componentDataRef,
       },
       { singleton: true, optional: true },
     ),

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

@@ -201,13 +201,13 @@ describe('createApp', () => {
           </core/router>
         ]
         components [
-          <component:core.components.progress out=[core.component] />
-          <component:core.components.errorBoundaryFallback out=[core.component] />
-          <component:core.components.notFoundErrorPage out=[core.component] />
+          <component:core.components.progress out=[core.component.component] />
+          <component:core.components.errorBoundaryFallback out=[core.component.component] />
+          <component:core.components.notFoundErrorPage out=[core.component.component] />
         ]
         themes [
-          <theme:app/light out=[core.theme] />
-          <theme:app/dark out=[core.theme] />
+          <theme:app/light out=[core.theme.theme] />
+          <theme:app/dark out=[core.theme.theme] />
         ]
       </core>"
     `);

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

@@ -23,6 +23,10 @@ import {
   ComponentRef,
   componentsApiRef,
   coreExtensionData,
+  createApiExtension,
+  createComponentExtension,
+  createNavItemExtension,
+  createThemeExtension,
   createTranslationExtension,
   ExtensionDataRef,
   ExtensionOverrides,
@@ -194,7 +198,7 @@ export function createExtensionTree(options: {
 
       return this.getExtensionAttachments('core/nav', 'items')
         .map((node, index) => {
-          const target = node.getData(coreExtensionData.navTarget);
+          const target = node.getData(createNavItemExtension.targetDataRef);
           if (!target) {
             return null;
           }
@@ -365,13 +369,13 @@ function createApiHolder(
   const pluginApis =
     tree.root.edges.attachments
       .get('apis')
-      ?.map(e => e.instance?.getData(coreExtensionData.apiFactory))
+      ?.map(e => e.instance?.getData(createApiExtension.factoryDataRef))
       .filter((x): x is AnyApiFactory => !!x) ?? [];
 
   const themeExtensions =
     tree.root.edges.attachments
       .get('themes')
-      ?.map(e => e.instance?.getData(coreExtensionData.theme))
+      ?.map(e => e.instance?.getData(createThemeExtension.themeDataRef))
       .filter((x): x is AppTheme => !!x) ?? [];
 
   const translationResources =
@@ -412,7 +416,7 @@ function createApiHolder(
   const componentsExtensions =
     tree.root.edges.attachments
       .get('components')
-      ?.map(e => e.instance?.getData(coreExtensionData.component))
+      ?.map(e => e.instance?.getData(createComponentExtension.componentDataRef))
       .filter(x => !!x) ?? [];
 
   const componentsMap = componentsExtensions.reduce(