feat(web): simplify header navigation (#1427)

* removes the tabbed navigation completely
* makes it possible to see the custom name of the repository


tabs (and really all not "main" nav) were not in use and the features
may not work the same way in the future, so rather than redesigning, the
whole tab bare was removed.

for the custom name, if it's `__default`, the the default `git-bug` text
is displayed; otherwise, the name of the repo.

2 files changed, 24 insertions, 56 deletions

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 2c9eac5b0..69b3fdfb2 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -1,13 +1,11 @@
 import AppBar from '@mui/material/AppBar';
-import Tab, { TabProps } from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
 import Toolbar from '@mui/material/Toolbar';
-import Tooltip from '@mui/material/Tooltip/Tooltip';
 import { alpha } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
-import { Link, useLocation } from 'react-router';
+import { Link } from 'react-router';
 
 import CurrentIdentity from '../Identity/CurrentIdentity';
+import CurrentRepository from '../Identity/CurrentRepository';
 import { LightSwitch } from '../Themer';
 
 const useStyles = makeStyles((theme) => ({
@@ -29,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
   },
   lightSwitch: {
-    marginRight: '20px',
+    marginRight: theme.spacing(2),
     color: alpha(theme.palette.primary.contrastText, 0.5),
   },
   logo: {
@@ -38,43 +36,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function a11yProps(index: any) {
-  return {
-    id: `nav-tab-${index}`,
-    'aria-controls': `nav-tabpanel-${index}`,
-  };
-}
-
-const DisabledTabWithTooltip = (props: TabProps) => {
-  /*The span elements around disabled tabs are needed, as the tooltip
-   * won't be triggered by disabled elements.
-   * See: https://material-ui.com/components/tooltips/#disabled-elements
-   * This must be done in a wrapper component, otherwise the TabS component
-   * cannot pass it styles down to the Tab component. Resulting in (console)
-   * warnings. This wrapper accepts the passed down TabProps and pass it around
-   * the span element to the Tab component.
-   */
-  const msg = `This feature doesn't exist yet. Come help us build it.`;
-  return (
-    <Tooltip title={msg}>
-      <span>
-        <Tab disabled {...props} />
-      </span>
-    </Tooltip>
-  );
-};
-
 function Header() {
   const classes = useStyles();
-  const location = useLocation();
-
-  // Prevents error of invalid tab selection in <Tabs>
-  // Will return a valid tab path or false if path is unknown.
-  function highlightTab() {
-    const validTabs = ['/', '/code', '/pulls', '/settings'];
-    const tab = validTabs.find((tabPath) => tabPath === location.pathname);
-    return tab === undefined ? false : tab;
-  }
 
   return (
     <>
@@ -82,28 +45,14 @@ function Header() {
         <Toolbar>
           <Link to="/" className={classes.appTitle}>
             <img src="/logo.svg" className={classes.logo} alt="git-bug logo" />
-            git-bug
+            <CurrentRepository default="git-bug" />
           </Link>
           <div className={classes.filler} />
           <LightSwitch className={classes.lightSwitch} />
           <CurrentIdentity />
         </Toolbar>
       </AppBar>
-      <div className={classes.offset} />
-      <Tabs centered value={highlightTab()} aria-label="nav tabs">
-        <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
-        <Tab label="Bugs" value="/" component={Link} to="/" {...a11yProps(2)} />
-        <DisabledTabWithTooltip
-          label="Pull Requests"
-          value="/pulls"
-          {...a11yProps(3)}
-        />
-        <DisabledTabWithTooltip
-          label="Settings"
-          value="/settings"
-          {...a11yProps(4)}
-        />
-      </Tabs>
+      <div className={classes.offset}></div>
     </>
   );
 }
diff --git a/webui/src/components/Identity/CurrentRepository.tsx b/webui/src/components/Identity/CurrentRepository.tsx
new file mode 100644
index 000000000..77aa6839b
--- /dev/null
+++ b/webui/src/components/Identity/CurrentRepository.tsx
@@ -0,0 +1,19 @@
+import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
+
+// same as in multi_repo_cache.go
+const defaultRepoName = '__default';
+
+const CurrentRepository = (props: { default: string }) => {
+  const { loading, error, data } = useCurrentIdentityQuery();
+
+  if (error || loading || !data?.repository?.name) return null;
+
+  let name = data.repository.name;
+  if (name === defaultRepoName) {
+    name = props.default;
+  }
+
+  return <>{name}</>;
+};
+
+export default CurrentRepository;