From 72a7c73e9f9a5f7f8bc42194a4dbfde1176d2485 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Fri, 5 Jun 2020 17:40:24 +0200
Subject: [PATCH] feat(Catalog/tabs): added some sample tabs for now

---
 packages/core/src/layout/HeaderTabs/index.tsx | 47 ++++++++++++++-----
 packages/core/src/layout/index.ts             |  1 +
 .../components/CatalogPage/CatalogPage.tsx    | 34 +++++++++-----
 .../ComponentPage/ComponentPage.tsx           | 36 ++++++++++++--
 4 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/packages/core/src/layout/HeaderTabs/index.tsx b/packages/core/src/layout/HeaderTabs/index.tsx
index cdef267f95..33518a4b4f 100644
--- a/packages/core/src/layout/HeaderTabs/index.tsx
+++ b/packages/core/src/layout/HeaderTabs/index.tsx
@@ -13,35 +13,56 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+// TODO(blam): Remove this implementation when the Tabs are ready
+// This is just a temporary solution to implementing tabs for now
+
 import React from 'react';
 
 import { makeStyles, Tabs, Tab } from '@material-ui/core';
 
-const useStyles = makeStyles({
-  wrapper: {
+const useStyles = makeStyles(theme => ({
+  tabsWrapper: {
     gridArea: 'pageSubheader',
   },
-});
+  defaultTab: {
+    padding: theme.spacing(3, 3),
+    ...theme.typography.caption,
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    color: theme.palette.text.secondary,
+  },
+  selected: {
+    color: theme.palette.text.primary,
+  },
+}));
 
-export const HeaderTabs: React.FC<{}> = () => {
+export type Tab = {
+  id: string;
+  label: string;
+};
+export const HeaderTabs: React.FC<{ tabs: Tab[] }> = ({ tabs }) => {
   const styles = useStyles();
+
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.tabsWrapper}>
       <Tabs
         indicatorColor="primary"
-        textColor="primary"
+        textColor="background"
         variant="scrollable"
         scrollButtons="auto"
         aria-label="scrollable auto tabs example"
         value={0}
       >
-        <Tab label="Item One" />
-        <Tab label="Item Two" />
-        <Tab label="Item Three" />
-        <Tab label="Item Four" />
-        <Tab label="Item Five" />
-        <Tab label="Item Six" />
-        <Tab label="Item Seven" />
+        {tabs.map((tab, index) => (
+          <Tab
+            label={tab.label}
+            key={tab.id}
+            value={index}
+            className={styles.defaultTab}
+            classes={{ selected: styles.selected }}
+          />
+        ))}
       </Tabs>
     </div>
   );
diff --git a/packages/core/src/layout/index.ts b/packages/core/src/layout/index.ts
index e8341e1124..9e1298f3d6 100644
--- a/packages/core/src/layout/index.ts
+++ b/packages/core/src/layout/index.ts
@@ -24,3 +24,4 @@ export * from './InfoCard';
 export * from './Page';
 export * from './Sidebar';
 export * from './TabbedCard';
+export * from './HeaderTabs';
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index ef19e728e5..51de55fbd3 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/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"
diff --git a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
index 074a2f4682..9423f328e2 100644
--- a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
+++ b/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}