feat: big refactor of componentRefs again to move away from makeComponentRefs

Signed-off-by: benjdlambert <ben@blam.sh>

plugins/app/src/extensions/AppRoutes.tsx

@@ -18,10 +18,9 @@ import {
   createExtension,
   coreExtensionData,
   createExtensionInput,
-  coreComponentRefs,
-  useComponentRef,
 } from '@backstage/frontend-plugin-api';
 import { useRoutes } from 'react-router-dom';
+import { NotFoundErrorPage } from './components';
 
 export const AppRoutes = createExtension({
   name: 'routes',
@@ -36,10 +35,6 @@ export const AppRoutes = createExtension({
   output: [coreExtensionData.reactElement],
   factory({ inputs }) {
     const Routes = () => {
-      const NotFoundErrorPage = useComponentRef(
-        coreComponentRefs.notFoundErrorPage,
-      );
-
       const element = useRoutes([
         ...inputs.routes.map(route => ({
           path: `${route

plugins/app/src/extensions/ComponentsApi.tsx

@@ -15,7 +15,7 @@
  */
 
 import {
-  createComponentExtension,
+  AdaptableComponentBlueprint,
   createExtensionInput,
   ApiBlueprint,
   componentsApiRef,
@@ -30,7 +30,7 @@ export const ComponentsApi = ApiBlueprint.makeWithOverrides({
   name: 'components',
   inputs: {
     components: createExtensionInput(
-      [createComponentExtension.componentDataRef],
+      [AdaptableComponentBlueprint.dataRefs.component],
       { replaces: [{ id: 'app', input: 'components' }] },
     ),
   },
@@ -42,7 +42,7 @@ export const ComponentsApi = ApiBlueprint.makeWithOverrides({
         factory: () =>
           DefaultComponentsApi.fromComponents(
             inputs.components.map(i =>
-              i.get(createComponentExtension.componentDataRef),
+              i.get(AdaptableComponentBlueprint.dataRefs.component),
             ),
           ),
       }),

plugins/app/src/extensions/components.tsx

@@ -14,40 +14,14 @@
  * limitations under the License.
  */
 
-import Button from '@material-ui/core/Button';
+import { createAdaptableComponent } from '@backstage/frontend-plugin-api';
 
-import {
-  createComponentExtension,
-  coreComponentRefs,
-} from '@backstage/frontend-plugin-api';
-import { ErrorPanel } from '@backstage/core-components';
-// eslint-disable-next-line @backstage/no-relative-monorepo-imports
-import { components as defaultComponents } from '../../../../packages/app-defaults/src/defaults';
-
-export const DefaultProgressComponent = createComponentExtension({
-  ref: coreComponentRefs.progress,
-  loader: { sync: () => defaultComponents.Progress },
+export const NotFoundErrorPage = createAdaptableComponent({
+  id: 'core.components.notFoundErrorPage',
+  // todo: implementation
 });
 
-export const DefaultNotFoundErrorPageComponent = createComponentExtension({
-  ref: coreComponentRefs.notFoundErrorPage,
-  loader: { sync: () => defaultComponents.NotFoundErrorPage },
-});
-
-export const DefaultErrorBoundaryComponent = createComponentExtension({
-  ref: coreComponentRefs.errorBoundaryFallback,
-  loader: {
-    sync: () => props => {
-      const { plugin, error, resetError } = props;
-      const title = `Error in ${plugin?.id}`;
-
-      return (
-        <ErrorPanel title={title} error={error} defaultExpanded>
-          <Button variant="outlined" onClick={resetError}>
-            Retry
-          </Button>
-        </ErrorPanel>
-      );
-    },
-  },
+export const ErrorBoundary = createAdaptableComponent({
+  id: 'core.components.errorBoundaryFallback',
+  // todo: implementation
 });

plugins/app/src/extensions/index.ts

@@ -26,11 +26,8 @@ export { FeatureFlagsApi } from './FeatureFlagsApi';
 export { TranslationsApi } from './TranslationsApi';
 export { DefaultSignInPage } from './DefaultSignInPage';
 export { dialogDisplayAppRootElement } from './DialogDisplay';
-export {
-  DefaultProgressComponent,
-  DefaultErrorBoundaryComponent,
-  DefaultNotFoundErrorPageComponent,
-} from './components';
+// todo: move these
+export { ErrorBoundary, NotFoundErrorPage } from './components';
 export {
   oauthRequestDialogAppRootElement,
   alertDisplayAppRootElement,

plugins/app/src/index.ts

@@ -15,3 +15,5 @@
  */
 
 export { appPlugin as default } from './plugin';
+// todo: remove
+export * from './extensions/components';

plugins/app/src/plugin.ts

@@ -29,9 +29,6 @@ import {
   IconsApi,
   FeatureFlagsApi,
   TranslationsApi,
-  DefaultProgressComponent,
-  DefaultNotFoundErrorPageComponent,
-  DefaultErrorBoundaryComponent,
   oauthRequestDialogAppRootElement,
   alertDisplayAppRootElement,
   DefaultSignInPage,
@@ -58,9 +55,6 @@ export const appPlugin = createFrontendPlugin({
     IconsApi,
     FeatureFlagsApi,
     TranslationsApi,
-    DefaultProgressComponent,
-    DefaultNotFoundErrorPageComponent,
-    DefaultErrorBoundaryComponent,
     DefaultSignInPage,
     oauthRequestDialogAppRootElement,
     alertDisplayAppRootElement,