revert(CreateComponentButton): use dedicated button in api page

Signed-off-by: Phil Kuang <pkuang@factset.com>

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

@@ -19,6 +19,7 @@ import {
   ContentHeader,
   SupportButton,
   TableColumn,
+  useRouteRef,
 } from '@backstage/core';
 import {
   EntityKindPicker,
@@ -30,14 +31,11 @@ import {
   UserListFilterKind,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import {
-  CatalogTable,
-  CreateComponentButton,
-  EntityRow,
-} from '@backstage/plugin-catalog';
-import { makeStyles } from '@material-ui/core';
-
+import { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog';
+import { Button, makeStyles } from '@material-ui/core';
 import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { createComponentRouteRef } from '../../routes';
 import { ApiExplorerLayout } from './ApiExplorerLayout';
 
 const useStyles = makeStyles(theme => ({
@@ -51,7 +49,7 @@ const useStyles = makeStyles(theme => ({
 
 export type ApiExplorerPageProps = {
   initiallySelectedFilter?: UserListFilterKind;
-  columns?: TableColumn<EntityRow>[];
+  columns?: TableColumn<CatalogTableRow>[];
 };
 
 export const ApiExplorerPage = ({
@@ -59,12 +57,22 @@ export const ApiExplorerPage = ({
   columns,
 }: ApiExplorerPageProps) => {
   const styles = useStyles();
+  const createComponentLink = useRouteRef(createComponentRouteRef);
 
   return (
     <ApiExplorerLayout>
       <Content>
         <ContentHeader title="">
-          <CreateComponentButton label="Register Existing API" />
+          {createComponentLink && (
+            <Button
+              variant="contained"
+              color="primary"
+              component={RouterLink}
+              to={createComponentLink()}
+            >
+              Register Existing API
+            </Button>
+          )}
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <div className={styles.contentWrapper}>

plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx

@@ -20,12 +20,7 @@ import { Button } from '@material-ui/core';
 import { useRouteRef } from '@backstage/core';
 import { createComponentRouteRef } from '../../routes';
 
-type CreateComponentButtonProps = {
-  label?: string;
-};
-export const CreateComponentButton = ({
-  label,
-}: CreateComponentButtonProps) => {
+export const CreateComponentButton = () => {
   const createComponentLink = useRouteRef(createComponentRouteRef);
 
   if (!createComponentLink) return null;
@@ -37,7 +32,7 @@ export const CreateComponentButton = ({
       color="primary"
       to={createComponentLink()}
     >
-      {label ?? 'Create Component'}
+      Create Component
     </Button>
   );
 };

plugins/catalog/src/index.ts

@@ -18,7 +18,7 @@ export * from './components/AboutCard';
 export { CatalogLayout } from './components/CatalogPage';
 export { CatalogResultListItem } from './components/CatalogResultListItem';
 export { CatalogTable } from './components/CatalogTable';
-export type { EntityRow } from './components/CatalogTable';
+export type { EntityRow as CatalogTableRow } from './components/CatalogTable';
 export { CreateComponentButton } from './components/CreateComponentButton';
 export { EntityLayout } from './components/EntityLayout';
 export * from './components/EntityOrphanWarning';