Merge pull request #1161 from spotify/sebastianq/component-navigation

Added Sub Tabs on Component Page and Catalog Page

packages/core/src/layout/HeaderTabs/index.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * 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(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 type Tab = {
+  id: string;
+  label: string;
+};
+export const HeaderTabs: React.FC<{ tabs: Tab[] }> = ({ tabs }) => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.tabsWrapper}>
+      <Tabs
+        indicatorColor="primary"
+        textColor="background"
+        variant="scrollable"
+        scrollButtons="auto"
+        aria-label="scrollable auto tabs example"
+        value={0}
+      >
+        {tabs.map((tab, index) => (
+          <Tab
+            label={tab.label}
+            key={tab.id}
+            value={index}
+            className={styles.defaultTab}
+            classes={{ selected: styles.selected }}
+          />
+        ))}
+      </Tabs>
+    </div>
+  );
+};

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';

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

@@ -25,6 +25,7 @@ import {
   Page,
   pageTheme,
   useApi,
+  HeaderTabs,
 } from '@backstage/core';
 import { useAsync } from 'react-use';
 import CatalogTable from '../CatalogTable/CatalogTable';
@@ -101,11 +102,33 @@ const CatalogPage: FC<{}> = () => {
         rowData && rowData.location ? rowData.location.type !== 'github' : true,
     }),
   ];
+
+  // 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 tabs={tabs} />
       <Content>
         <DismissableBanner
           variant="info"
@@ -123,6 +146,7 @@ const CatalogPage: FC<{}> = () => {
             </Typography>
           }
         />
+
         <ContentHeader title="Services">
           <Button
             component={RouterLink}

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

@@ -24,9 +24,11 @@ import {
   useApi,
   ErrorApi,
   errorApiRef,
+  HeaderTabs,
 } from '@backstage/core';
 import ComponentContextMenu from '../ComponentContextMenu/ComponentContextMenu';
 import ComponentRemovalDialog from '../ComponentRemovalDialog/ComponentRemovalDialog';
+
 import { SentryIssuesWidget } from '@backstage/plugin-sentry';
 import { Grid } from '@material-ui/core';
 import { catalogApiRef } from '../..';
@@ -65,7 +67,7 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
     if (error) {
       errorApi.post(new Error('Component not found!'));
       setTimeout(() => {
-        history.push('/catalog');
+        history.push('/');
       }, REDIRECT_DELAY);
     }
   }, [error, errorApi, history]);
@@ -79,15 +81,46 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
     setConfirmationDialogOpen(false);
     setRemovingPending(true);
     // await componentFactory.removeComponentByName(componentName);
+
     await catalogApi;
-    history.push('/catalog');
+    history.push('/');
   };
 
+  // TODO - Replace with proper tabs implementation
+  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 tabs={tabs} />
+
       {confirmationDialogOpen && component && (
         <ComponentRemovalDialog
           component={component}