Use an optional external route ref to link to the create component page from the api explorer

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

@@ -14,16 +14,24 @@
  * limitations under the License.
  */
 
-import { Content, ContentHeader, SupportButton, useApi } from '@backstage/core';
+import {
+  Content,
+  ContentHeader,
+  SupportButton,
+  useApi,
+  useRouteRef,
+} from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button } from '@material-ui/core';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { useAsync } from 'react-use';
+import { createComponentRouteRef } from '../../routes';
 import { ApiExplorerTable } from '../ApiExplorerTable';
 import { ApiExplorerLayout } from './ApiExplorerLayout';
 
 export const ApiExplorerPage = () => {
+  const createComponentLink = useRouteRef(createComponentRouteRef);
   const catalogApi = useApi(catalogApiRef);
   const { loading, error, value: catalogResponse } = useAsync(() => {
     return catalogApi.getEntities({ filter: { kind: 'API' } });
@@ -33,14 +41,16 @@ export const ApiExplorerPage = () => {
     <ApiExplorerLayout>
       <Content>
         <ContentHeader title="">
-          <Button
-            variant="contained"
-            color="primary"
-            component={RouterLink}
-            to="/catalog-import"
-          >
-            Register Existing API
-          </Button>
+          {createComponentLink && (
+            <Button
+              variant="contained"
+              color="primary"
+              component={RouterLink}
+              to={createComponentLink()}
+            >
+              Register Existing API
+            </Button>
+          )}
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <ApiExplorerTable

plugins/api-docs/src/plugin.ts

@@ -17,14 +17,14 @@
 import { ApiEntity } from '@backstage/catalog-model';
 import {
   createApiFactory,
+  createComponentExtension,
   createPlugin,
   createRoutableExtension,
-  createComponentExtension,
 } from '@backstage/core';
-import { ApiExplorerPage as Page } from './components/ApiExplorerPage/ApiExplorerPage';
 import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
-import { rootRoute } from './routes';
+import { ApiExplorerPage as Page } from './components/ApiExplorerPage/ApiExplorerPage';
 import { apiDocsConfigRef } from './config';
+import { createComponentRouteRef, rootRoute } from './routes';
 
 export const apiDocsPlugin = createPlugin({
   id: 'api-docs',
@@ -45,6 +45,9 @@ export const apiDocsPlugin = createPlugin({
       },
     }),
   ],
+  externalRoutes: {
+    createComponent: createComponentRouteRef,
+  },
   register({ router }) {
     router.addRoute(rootRoute, Page);
   },

plugins/api-docs/src/routes.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createRouteRef } from '@backstage/core';
+import { createExternalRouteRef, createRouteRef } from '@backstage/core';
 
 const NoIcon = () => null;
 
@@ -23,3 +23,8 @@ export const rootRoute = createRouteRef({
   path: '/api-docs',
   title: 'APIs',
 });
+
+export const createComponentRouteRef = createExternalRouteRef({
+  id: 'create-component',
+  optional: true,
+});