web: add Table View and Detail View icons with All Resources log link

web/src/GlobalNav.tsx

@@ -43,10 +43,7 @@ export const MenuButtonMixin = `
   justify-content: center;
   align-items: center;
   transition: color ${AnimDuration.default} ease;
-  padding-top: ${SizeUnit(0.5)};
-  padding-left: ${SizeUnit(0.5)};
-  padding-right: ${SizeUnit(0.5)};
-  padding-bottom: ${SizeUnit(0.5)};
+  padding: ${SizeUnit(0.5)};
   font-size: ${FontSize.smallest};
   color: ${Color.blue};
   height: 100%;
@@ -209,7 +206,11 @@ export function GlobalNav(props: GlobalNavProps) {
   let accountMenuContent = <AccountMenuContent {...props} />
   let snapshotButton = props.snapshot.enabled ? (
     <MenuButtonLabeled label="Snapshot">
-      <MenuButton onClick={props.snapshot.openModal}>
+      <MenuButton
+        onClick={props.snapshot.openModal}
+        role="menuitem"
+        aria-label="Snapshot"
+      >
         <SnapshotIcon width="24" height="24" />
       </MenuButton>
     </MenuButtonLabeled>
@@ -218,13 +219,16 @@ export function GlobalNav(props: GlobalNavProps) {
   const versionButtonLabel = props.showUpdate ? "Get Update" : "Version"
 
   return (
-    <GlobalNavRoot>
+    <GlobalNavRoot role="menu" aria-label="Tilt session menu">
       <MenuButtonLabeled label={versionButtonLabel}>
         <MenuButton
           ref={updateButton}
           onClick={() => toggleUpdateDialog(AnalyticsAction.Click)}
           data-open={updateDialogOpen}
+          aria-expanded={updateDialogOpen}
           aria-label={versionButtonLabel}
+          aria-haspopup="true"
+          role="menuitem"
         >
           <div>v{props.runningBuild?.version || "?"}</div>
 
@@ -241,7 +245,10 @@ export function GlobalNav(props: GlobalNavProps) {
           ref={shortcutButton}
           onClick={() => toggleHelpDialog(AnalyticsAction.Click)}
           data-open={helpDialogOpen}
+          aria-expanded={helpDialogOpen}
           aria-label="Help"
+          aria-haspopup="true"
+          role="menuitem"
         >
           <HelpIcon width="24" height="24" />
         </MenuButton>
@@ -251,7 +258,10 @@ export function GlobalNav(props: GlobalNavProps) {
           ref={accountButton}
           onClick={() => toggleAccountMenu(AnalyticsAction.Click)}
           data-open={accountMenuOpen}
+          aria-expanded={accountMenuOpen}
           aria-label="Account"
+          aria-haspopup="true"
+          role="menuitem"
         >
           <AccountIcon width="24" height="24" />
         </MenuButton>

web/src/HeaderBar.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { MemoryRouter } from "react-router"
+import { AnalyticsType } from "./analytics"
 import HeaderBar from "./HeaderBar"
 import { nResourceView, tenResourceView, twoResourceView } from "./testdata"
 import { UpdateStatus } from "./types"
@@ -17,25 +18,31 @@ export default {
   ],
 }
 
-export const TwoResources = () => <HeaderBar view={twoResourceView()} />
+export const TwoResources = () => (
+  <HeaderBar view={twoResourceView()} currentPage={AnalyticsType.Detail} />
+)
 
-export const TenResources = () => <HeaderBar view={tenResourceView()} />
+export const TenResources = () => (
+  <HeaderBar view={tenResourceView()} currentPage={AnalyticsType.Detail} />
+)
 
 export const TenResourcesErrorsAndWarnings = () => {
   let view = tenResourceView() as any
   view.uiResources[0].status.updateStatus = UpdateStatus.Error
   view.uiResources[1].status.buildHistory[0].warnings = ["warning time"]
   view.uiResources[5].status.updateStatus = UpdateStatus.Error
-  return <HeaderBar view={view} />
+  return <HeaderBar view={view} currentPage={AnalyticsType.Grid} />
 }
 
-export const OneHundredResources = () => <HeaderBar view={nResourceView(100)} />
+export const OneHundredResources = () => (
+  <HeaderBar view={nResourceView(100)} currentPage={AnalyticsType.Grid} />
+)
 
 export const UpgradeAvailable = () => {
   let view = twoResourceView()
   let status = view.uiSession!.status
   status!.suggestedTiltVersion = "0.18.1"
   status!.runningTiltBuild = { version: "0.18.0", dev: false }
   status!.versionSettings = { checkUpdates: true }
-  return <HeaderBar view={view} />
+  return <HeaderBar view={view} currentPage={AnalyticsType.Detail} />
 }

web/src/HeaderBar.tsx

@@ -1,7 +1,10 @@
 import React from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
+import { AnalyticsType } from "./analytics"
+import { ReactComponent as DetailViewSvg } from "./assets/svg/detail-view-icon.svg"
 import { ReactComponent as LogoWordmarkSvg } from "./assets/svg/logo-wordmark.svg"
+import { ReactComponent as TableViewSvg } from "./assets/svg/table-view-icon.svg"
 import { CustomNav } from "./CustomNav"
 import { GlobalNav } from "./GlobalNav"
 import { usePathBuilder } from "./PathBuilder"
@@ -13,7 +16,7 @@ import { useSnapshotAction } from "./snapshot"
 import { AnimDuration, Color, Font, FontSize, SizeUnit } from "./style-helpers"
 import { showUpdate } from "./UpdateDialog"
 
-const HeaderBarRoot = styled.header`
+const HeaderBarRoot = styled.nav`
   display: flex;
   align-items: center;
   padding-left: ${SizeUnit(1)};
@@ -41,25 +44,73 @@ const Logo = styled(LogoWordmarkSvg)`
 
 const HeaderDivider = styled.div`
   border-left: 1px solid ${Color.grayLighter};
-  height: ${SizeUnit(1)};
+  height: ${SizeUnit(0.7)};
   margin: ${SizeUnit(0.5)};
 `
 
-const AllResourcesLink = styled(Link)`
-  font-family: ${Font.monospace};
+const ViewLinkText = styled.span`
+  bottom: 0;
   color: ${Color.gray7};
-  font-size: ${FontSize.small};
-  text-decoration: none;
+  font-family: ${Font.monospace};
+  font-size: ${FontSize.smallest};
+  opacity: 0;
+  position: absolute;
+  transition: opacity ${AnimDuration.default} ease;
+  white-space: nowrap;
+  width: 100%;
+`
+
+const viewLinkIconMixin = `
+  display: flex;
+  transition: fill ${AnimDuration.default} ease;
+  height: 100%;
+  padding: ${SizeUnit(0.65)} 0;
+  fill: ${Color.grayLight};
+
+  &.isCurrent {
+    fill: ${Color.gray7};
+  }
+`
+
+const TableViewIcon = styled(TableViewSvg)`
+  ${viewLinkIconMixin}
+  /* "Hack" to right-align text */
+  padding-left: ${SizeUnit(0.5)};
+`
+
+const DetailViewIcon = styled(DetailViewSvg)`
+  ${viewLinkIconMixin}
+`
+
+const ViewLink = styled(Link)`
+  position: relative;
+
+  &:is(:hover, :focus, :active) {
+    ${ViewLinkText} {
+      opacity: 1;
+    }
+
+    ${TableViewIcon}, ${DetailViewIcon} {
+      fill: ${Color.blue};
+    }
+  }
+`
+
+const ViewLinkSection = styled.div`
+  align-items: center;
+  display: flex;
+  margin-left: ${SizeUnit(1)};
+  margin-right: ${SizeUnit(1)};
 `
 
 type HeaderBarProps = {
   view: Proto.webviewView
+  currentPage?: AnalyticsType.Detail | AnalyticsType.Grid
 }
 
-export default function HeaderBar(props: HeaderBarProps) {
+export default function HeaderBar({ view, currentPage }: HeaderBarProps) {
   let isSnapshot = usePathBuilder().isSnapshot()
   let snapshot = useSnapshotAction()
-  let view = props.view
   let session = view?.uiSession?.status
   let runningBuild = session?.runningTiltBuild
   let suggestedVersion = session?.suggestedTiltVersion
@@ -79,21 +130,42 @@ export default function HeaderBar(props: HeaderBarProps) {
 
   const pb = usePathBuilder()
 
+  const tableViewLinkClass =
+    currentPage === AnalyticsType.Grid ? "isCurrent" : ""
+  const detailViewLinkClass =
+    currentPage === AnalyticsType.Detail ? "isCurrent" : ""
+
+  // TODO (lizz): Consider refactoring nav to use more semantic pattern of ul + li
   return (
-    <HeaderBarRoot>
-      <Link to="/overview">
+    <HeaderBarRoot aria-label="Dashboard menu">
+      <Link to="/overview" aria-label="Tilt home">
         <Logo width="57px" />
       </Link>
-      <HeaderDivider />
-      <AllResourcesLink to={pb.encpath`/r/(all)/overview`}>
-        All Resources
-      </AllResourcesLink>
+      <ViewLinkSection>
+        <ViewLink
+          to="/overview"
+          aria-label="Table view"
+          aria-current={currentPage === AnalyticsType.Grid}
+        >
+          <TableViewIcon className={tableViewLinkClass} role="presentation" />
+          <ViewLinkText>Table</ViewLinkText>
+        </ViewLink>
+        <HeaderDivider role="presentation" />
+        <ViewLink
+          to={pb.encpath`/r/(all)/overview`}
+          aria-label="Detail view"
+          aria-current={currentPage === AnalyticsType.Detail}
+        >
+          <DetailViewIcon className={detailViewLinkClass} role="presentation" />
+          <ViewLinkText>Detail</ViewLinkText>
+        </ViewLink>
+      </ViewLinkSection>
       <AllResourceStatusSummary
         displayText="Resources"
         labelText="Status summary for all resources"
         resources={resources}
       />
-      <CustomNav view={props.view} />
+      <CustomNav view={view} />
       <GlobalNav {...globalNavProps} />
     </HeaderBarRoot>
   )

web/src/OverviewResourcePane.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"
 import SplitPane from "react-split-pane"
 import styled from "styled-components"
 import { Alert, combinedAlerts } from "./alerts"
+import { AnalyticsType } from "./analytics"
 import { ApiButtonType, buttonsForComponent } from "./ApiButton"
 import HeaderBar from "./HeaderBar"
 import { LogUpdateAction, LogUpdateEvent, useLogStore } from "./LogStore"
@@ -92,7 +93,7 @@ export default function OverviewResourcePane(props: OverviewResourcePaneProps) {
 
   return (
     <OverviewResourcePaneRoot>
-      <HeaderBar view={props.view} />
+      <HeaderBar view={props.view} currentPage={AnalyticsType.Detail} />
       <StarredResourceBar
         {...starredResourcePropsFromView(props.view, selectedTab)}
       />

web/src/OverviewResourceSidebar.stories.tsx

@@ -125,10 +125,12 @@ export function TestsWithErrors() {
 
   let view = { uiResources: all, tiltfileKey: "test" }
   return (
-    <LogStoreProvider value={logStore}>
-      <ResourceListOptionsProvider>
-        <OverviewResourceSidebar name={""} view={view} />
-      </ResourceListOptionsProvider>
-    </LogStoreProvider>
+    <MemoryRouter>
+      <LogStoreProvider value={logStore}>
+        <ResourceListOptionsProvider>
+          <OverviewResourceSidebar name={""} view={view} />
+        </ResourceListOptionsProvider>
+      </LogStoreProvider>
+    </MemoryRouter>
   )
 }

web/src/OverviewTablePane.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import styled from "styled-components"
+import { AnalyticsType } from "./analytics"
 import HeaderBar from "./HeaderBar"
 import OverviewTable from "./OverviewTable"
 import StarredResourceBar, {
@@ -22,7 +23,7 @@ let OverviewTablePaneStyle = styled.div`
 export default function OverviewTablePane(props: OverviewTablePaneProps) {
   return (
     <OverviewTablePaneStyle>
-      <HeaderBar view={props.view} />
+      <HeaderBar view={props.view} currentPage={AnalyticsType.Grid} />
       <StarredResourceBar {...starredResourcePropsFromView(props.view, "")} />
       <OverviewTable view={props.view} />
     </OverviewTablePaneStyle>