Route 'Register Existing API' on API page to /catalog-import

The 'Register Existing API' button on /api-docs was routing to /create but APIs can't be created. Changing to route to /catalog-import where an API can be registered instead.

Signed-off-by: Kamil Zainal <gh@akza.dev>

packages/app/src/App.tsx

@@ -117,7 +117,7 @@ const app = createApp({
       catalogEntity: catalogPlugin.routes.catalogEntity,
     });
     bind(apiDocsPlugin.externalRoutes, {
-      createComponent: scaffolderPlugin.routes.root,
+      registerComponent: catalogImportPlugin.routes.importPage,
     });
     bind(explorePlugin.externalRoutes, {
       catalogEntity: catalogPlugin.routes.catalogEntity,

plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx

@@ -42,7 +42,7 @@ import {
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
-import { createComponentRouteRef } from '../../routes';
+import { registerComponentRouteRef } from '../../routes';
 
 const defaultColumns: TableColumn<CatalogTableRow>[] = [
   CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),
@@ -77,7 +77,7 @@ export const DefaultApiExplorerPage = ({
   const generatedSubtitle = `${
     configApi.getOptionalString('organization.name') ?? 'Backstage'
   } API Explorer`;
-  const createComponentLink = useRouteRef(createComponentRouteRef);
+  const registerComponentLink = useRouteRef(registerComponentRouteRef);
 
   return (
     <PageWithHeader
@@ -90,7 +90,7 @@ export const DefaultApiExplorerPage = ({
         <ContentHeader title="">
           <CreateButton
             title="Register Existing API"
-            to={createComponentLink?.()}
+            to={registerComponentLink?.()}
           />
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>

plugins/api-docs/src/plugin.ts

@@ -17,7 +17,7 @@
 import { ApiEntity } from '@backstage/catalog-model';
 import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
 import { apiDocsConfigRef } from './config';
-import { createComponentRouteRef, rootRoute } from './routes';
+import { registerComponentRouteRef, rootRoute } from './routes';
 import {
   createApiFactory,
   createComponentExtension,
@@ -45,7 +45,7 @@ export const apiDocsPlugin = createPlugin({
     }),
   ],
   externalRoutes: {
-    createComponent: createComponentRouteRef,
+    registerComponent: registerComponentRouteRef,
   },
 });
 

plugins/api-docs/src/routes.ts

@@ -23,7 +23,7 @@ export const rootRoute = createRouteRef({
   id: 'api-docs',
 });
 
-export const createComponentRouteRef = createExternalRouteRef({
-  id: 'create-component',
+export const registerComponentRouteRef = createExternalRouteRef({
+  id: 'register-component',
   optional: true,
 });