web: keyboard shortcuts for navigating the overview table (#5576)

* web: keyboard shortcuts for navigating the overview table * response to comments * more response to comments
tilt-dev · Mar 22, 2022 · e7d690a · e7d690a
1 parent f8939b2
commit e7d690a
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 62 deletions.
diff --git a/web/src/GlobalNav.tsx b/web/src/GlobalNav.tsx
@@ -280,7 +280,6 @@ export function GlobalNav(props: GlobalNavProps) {
         open={helpDialogOpen}
         anchorEl={helpDialogAnchor}
         onClose={() => toggleHelpDialog(AnalyticsAction.Close)}
-        isOverview={true}
       />
       <UpdateDialog
         open={updateDialogOpen}

diff --git a/web/src/HelpDialog.stories.tsx b/web/src/HelpDialog.stories.tsx
@@ -18,18 +18,5 @@ export default {
 }
 
 export const DialogOverview = () => (
-  <HelpDialog
-    open={true}
-    onClose={onRequestClose}
-    anchorEl={document.body}
-    isOverview={true}
-  />
-)
-export const DialogLegacy = () => (
-  <HelpDialog
-    open={true}
-    onClose={onRequestClose}
-    anchorEl={document.body}
-    isOverview={false}
-  />
+  <HelpDialog open={true} onClose={onRequestClose} anchorEl={document.body} />
 )
diff --git a/web/src/HelpDialog.test.tsx b/web/src/HelpDialog.test.tsx
@@ -1,7 +1,7 @@
 import { mount } from "enzyme"
 import React from "react"
 import { MemoryRouter } from "react-router-dom"
-import { DialogLegacy, DialogOverview } from "./HelpDialog.stories"
+import { DialogOverview } from "./HelpDialog.stories"
 
 it("renders overview dialog", () => {
   mount(
@@ -10,11 +10,3 @@ it("renders overview dialog", () => {
     </MemoryRouter>
   )
 })
-
-it("renders legacy dialog", () => {
-  mount(
-    <MemoryRouter initialEntries={["/"]}>
-      <DialogLegacy />
-    </MemoryRouter>
-  )
-})
diff --git a/web/src/HelpDialog.tsx b/web/src/HelpDialog.tsx
@@ -10,7 +10,6 @@ type props = {
   open: boolean
   onClose: () => void
   anchorEl: Element | null
-  isOverview: boolean
 }
 
 let ShortcutRow = styled.div`
@@ -126,16 +125,9 @@ export default function HelpDialog(props: props) {
         <ShortcutBox>Shift</ShortcutBox> + <ShortcutBox>1</ShortcutBox>,{" "}
         <ShortcutBox>2</ShortcutBox> …
       </Shortcut>
-      {props.isOverview ? null : (
-        <React.Fragment>
-          <Shortcut label="View Logs">
-            <ShortcutBox>1</ShortcutBox>
-          </Shortcut>
-          <Shortcut label="View Alerts">
-            <ShortcutBox>2</ShortcutBox>
-          </Shortcut>
-        </React.Fragment>
-      )}
+      <Shortcut label="Select Resource Row">
+        <ShortcutBox>x</ShortcutBox>
+      </Shortcut>
       <Shortcut label="Clear Logs">{cmdOrCtrlShortcut("Backspace")}</Shortcut>
       <Shortcut label="Make Snapshot">
         <ShortcutBox>s</ShortcutBox>

diff --git a/web/src/OverviewTable.tsx b/web/src/OverviewTable.tsx
@@ -3,7 +3,15 @@ import {
   AccordionDetails,
   AccordionSummary,
 } from "@material-ui/core"
-import React, { ChangeEvent, MouseEvent, useMemo, useState } from "react"
+import React, {
+  ChangeEvent,
+  MouseEvent,
+  MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import {
   HeaderGroup,
   Row,
@@ -40,6 +48,7 @@ import {
   rowIsDisabled,
   RowValues,
 } from "./OverviewTableColumns"
+import { OverviewTableKeyboardShortcuts } from "./OverviewTableKeyboardShortcuts"
 import {
   AccordionDetailsStyleResetMixin,
   AccordionStyleResetMixin,
@@ -63,6 +72,7 @@ import { Color, Font, FontSize, SizeUnit } from "./style-helpers"
 import { isZeroTime, timeDiff } from "./time"
 import {
   ResourceName,
+  ResourceStatus,
   TargetType,
   TriggerMode,
   UIButton,
@@ -82,10 +92,12 @@ type TableWrapperProps = {
 type TableGroupProps = {
   label: string
   setGlobalSortBy: (id: string) => void
+  focused: string
 } & TableOptions<RowValues>
 
 type TableProps = {
   setGlobalSortBy?: (id: string) => void
+  focused: string
 } & TableOptions<RowValues>
 
 type ResourceTableHeadRowProps = {
@@ -142,7 +154,7 @@ const ResourceTable = styled.table`
   }
 
   td:first-child {
-    padding-left: ${SizeUnit(0.75)};
+    padding-left: 24px;
   }
 
   td:last-child {
@@ -163,8 +175,16 @@ export const ResourceTableRow = styled.tr`
   color: ${Color.gray60};
   padding-top: 6px;
   padding-bottom: 6px;
+  padding-left: 4px;
 
-  &.isDisabled {
+  &.isFocused,
+  &:focus {
+    border-left: 4px solid ${Color.blue};
+    outline: none;
+
+    td:first-child {
+      padding-left: 22px;
+    }
   }
 
   &.isSelected {
@@ -454,6 +474,22 @@ function sortByDisableStatus(resources: UIResource[] = []) {
   return sorted
 }
 
+function onlyEnabledRows(rows: RowValues[]): RowValues[] {
+  return rows.filter(
+    (row) => row.statusLine.runtimeStatus !== ResourceStatus.Disabled
+  )
+}
+function onlyDisabledRows(rows: RowValues[]): RowValues[] {
+  return rows.filter(
+    (row) => row.statusLine.runtimeStatus === ResourceStatus.Disabled
+  )
+}
+function enabledRowsFirst(rows: RowValues[]): RowValues[] {
+  let result = onlyEnabledRows(rows)
+  result.push(...onlyDisabledRows(rows))
+  return result
+}
+
 export function labeledResourcesToTableCells(
   resources: UIResource[] | undefined,
   buttons: UIButton[] | undefined,
@@ -592,6 +628,42 @@ function ShowMoreResourcesRow({
   )
 }
 
+function TableRow(props: { row: Row<RowValues>; focused: string }) {
+  let { row, focused } = props
+  const { isSelected } = useResourceSelection()
+  let isFocused = row.original.name == focused
+  let rowClasses =
+    (rowIsDisabled(row) ? "isDisabled " : "") +
+    (isSelected(row.original.name) ? "isSelected " : "") +
+    (isFocused ? "isFocused " : "")
+  let ref: MutableRefObject<HTMLTableRowElement | null> = useRef(null)
+
+  useEffect(() => {
+    if (isFocused && ref.current) {
+      ref.current.focus()
+    }
+  }, [isFocused, ref])
+
+  return (
+    <ResourceTableRow
+      tabIndex={-1}
+      ref={ref}
+      {...row.getRowProps({
+        className: rowClasses,
+      })}
+    >
+      {row.cells.map((cell) => (
+        <ResourceTableData
+          {...cell.getCellProps()}
+          className={cell.column.isSorted ? "isSorted" : ""}
+        >
+          {cell.render("Cell")}
+        </ResourceTableData>
+      ))}
+    </ResourceTableRow>
+  )
+}
+
 export function Table(props: TableProps) {
   if (props.data.length === 0) {
     return null
@@ -619,7 +691,6 @@ export function Table(props: TableProps) {
   )
 
   const showMoreOnClick = () => setPageSize(pageSize * RESOURCE_LIST_MULTIPLIER)
-  const { isSelected } = useResourceSelection()
 
   // TODO (lizz): Consider adding `aria-sort` markup to table headings
   return (
@@ -636,25 +707,12 @@ export function Table(props: TableProps) {
       <tbody {...getTableBodyProps()}>
         {page.map((row: Row<RowValues>) => {
           prepareRow(row)
-
-          let rowClasses =
-            (rowIsDisabled(row) ? "isDisabled " : "") +
-            (isSelected(row.original.name) ? "isSelected " : "")
           return (
-            <ResourceTableRow
-              {...row.getRowProps({
-                className: rowClasses,
-              })}
-            >
-              {row.cells.map((cell) => (
-                <ResourceTableData
-                  {...cell.getCellProps()}
-                  className={cell.column.isSorted ? "isSorted" : ""}
-                >
-                  {cell.render("Cell")}
-                </ResourceTableData>
-              ))}
-            </ResourceTableRow>
+            <TableRow
+              key={row.original.name}
+              row={row}
+              focused={props.focused}
+            />
           )
         })}
         <ShowMoreResourcesRow
@@ -710,6 +768,18 @@ export function TableGroupedByLabels({
     () => labeledResourcesToTableCells(resources, buttons, logAlertIndex),
     [resources, buttons]
   )
+
+  const totalOrder = useMemo(() => {
+    let totalOrder = []
+    data.labels.forEach((label) =>
+      totalOrder.push(...enabledRowsFirst(data.labelsToResources[label]))
+    )
+    totalOrder.push(...enabledRowsFirst(data.unlabeled))
+    totalOrder.push(...enabledRowsFirst(data.tiltfile))
+    return totalOrder
+  }, [data])
+  let [focused, setFocused] = useState("")
+
   const columns = getTableColumns(features)
 
   // Global table settings are currently used to sort multiple
@@ -738,6 +808,7 @@ export function TableGroupedByLabels({
           columns={columns}
           useControlledState={useControlledState}
           setGlobalSortBy={setGlobalSortBy}
+          focused={focused}
         />
       ))}
       <TableGroup
@@ -746,13 +817,20 @@ export function TableGroupedByLabels({
         columns={columns}
         useControlledState={useControlledState}
         setGlobalSortBy={setGlobalSortBy}
+        focused={focused}
       />
       <TableGroup
         label={TILTFILE_LABEL}
         data={data.tiltfile}
         columns={columns}
         useControlledState={useControlledState}
         setGlobalSortBy={setGlobalSortBy}
+        focused={focused}
+      />
+      <OverviewTableKeyboardShortcuts
+        focused={focused}
+        setFocused={setFocused}
+        rows={totalOrder}
       />
     </>
   )
@@ -768,13 +846,21 @@ export function TableWithoutGroups({ resources, buttons }: TableWrapperProps) {
   }, [resources, buttons])
   const columns = getTableColumns(features)
 
+  let totalOrder = useMemo(() => enabledRowsFirst(data), [data])
+  let [focused, setFocused] = useState("")
+
   if (resources?.length === 0) {
     return null
   }
 
   return (
     <TableWithoutGroupsRoot>
-      <Table columns={columns} data={data} />
+      <Table columns={columns} data={data} focused={focused} />
+      <OverviewTableKeyboardShortcuts
+        focused={focused}
+        setFocused={setFocused}
+        rows={totalOrder}
+      />
     </TableWithoutGroupsRoot>
   )
 }