feat(Catalog/tabs): added some sample tabs for now

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -25,6 +25,7 @@ import {
   Page,
   pageTheme,
   useApi,
+  HeaderTabs,
 } from '@backstage/core';
 import { useAsync, useMountedState } from 'react-use';
 import CatalogTable from '../CatalogTable/CatalogTable';
@@ -32,15 +33,7 @@ import {
   CatalogFilter,
   CatalogFilterItem,
 } from '../CatalogFilter/CatalogFilter';
-import {
-  Button,
-  makeStyles,
-  Typography,
-  Link,
-  AppBar,
-  Tabs,
-  Tab,
-} from '@material-ui/core';
+import { Button, makeStyles, Typography, Link } from '@material-ui/core';
 import { filterGroups, defaultFilter } from '../../data/filters';
 import { Link as RouterLink } from 'react-router-dom';
 import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
@@ -59,7 +52,6 @@ const useStyles = makeStyles(theme => ({
 import { catalogApiRef } from '../..';
 import { envelopeToComponent } from '../../data/utils';
 import { Component } from '../../data/component';
-import { HeaderTabs } from '@backstage/core/src/layout/HeaderTabs';
 
 const CatalogPage: FC<{}> = () => {
   const catalogApi = useApi(catalogApiRef);
@@ -117,12 +109,32 @@ const CatalogPage: FC<{}> = () => {
     return l.find(location => location.id === entityLocationId);
   };
 
+  // TODO: replace me with the proper tabs implemntation
+  const tabs = [
+    {
+      id: 'services',
+      label: 'Services',
+    },
+    {
+      id: 'websites',
+      label: 'Websites',
+    },
+    {
+      id: 'libs',
+      label: 'Libraries',
+    },
+    {
+      id: 'documentation',
+      label: 'Documentation',
+    },
+  ];
+
   return (
     <Page theme={pageTheme.home}>
       <Header title="Service Catalog" subtitle="Keep track of your software">
         <HomepageTimer />
       </Header>
-      <HeaderTabs />
+      <HeaderTabs tabs={tabs} />
       <Content>
         <DismissableBanner
           variant="info"

plugins/catalog/src/components/ComponentPage/ComponentPage.tsx

@@ -24,10 +24,11 @@ import {
   useApi,
   ErrorApi,
   errorApiRef,
+  HeaderTabs,
 } from '@backstage/core';
 import ComponentContextMenu from '../ComponentContextMenu/ComponentContextMenu';
 import ComponentRemovalDialog from '../ComponentRemovalDialog/ComponentRemovalDialog';
-import { HeaderTabs } from '@backstage/core/src/layout/HeaderTabs';
+
 import { SentryIssuesWidget } from '@backstage/plugin-sentry';
 import { Grid } from '@material-ui/core';
 import { catalogApiRef } from '../..';
@@ -63,7 +64,7 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
     if (catalogRequest.error) {
       errorApi.post(new Error('Component not found!'));
       setTimeout(() => {
-        history.push('/catalog');
+        history.push('/');
       }, REDIRECT_DELAY);
     }
   }, [catalogRequest.error, errorApi, history]);
@@ -77,17 +78,44 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
     setConfirmationDialogOpen(false);
     setRemovingPending(true);
     // await componentFactory.removeComponentByName(componentName);
-    history.push('/catalog');
+    history.push('/');
   };
 
   const component = envelopeToComponent(catalogRequest.value! ?? {});
 
+  // TODO: replace me with the proper tabs implemntation
+  const tabs = [
+    {
+      id: 'overview',
+      label: 'Overview',
+    },
+    {
+      id: 'ci',
+      label: 'CI/CD',
+    },
+    {
+      id: 'tests',
+      label: 'Tests',
+    },
+    {
+      id: 'api',
+      label: 'API',
+    },
+    {
+      id: 'monitoring',
+      label: 'Monitoring',
+    },
+    {
+      id: 'quality',
+      label: 'Quality',
+    },
+  ];
   return (
     <Page theme={pageTheme.home}>
       <Header title={component.name || 'Catalog'}>
         <ComponentContextMenu onUnregisterComponent={showRemovalDialog} />
       </Header>
-      <HeaderTabs />
+      <HeaderTabs tabs={tabs} />
       {confirmationDialogOpen && catalogRequest.value && (
         <ComponentRemovalDialog
           component={component}