web: show 'alerts on top' toggle even when there are no tests (#4182)

tilt-dev · Feb 9, 2021 · f0795ec · f0795ec
1 parent 861a007
commit f0795ec
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 44 deletions.
diff --git a/web/src/OverviewSidebarOptions.test.tsx b/web/src/OverviewSidebarOptions.test.tsx
@@ -8,6 +8,7 @@ import {
 } from "./OverviewResourceSidebar.stories"
 import {
   AlertsOnTopToggle,
+  FilterOptionList,
   OverviewSidebarOptions,
 } from "./OverviewSidebarOptions"
 import PathBuilder from "./PathBuilder"
@@ -116,7 +117,7 @@ describe("overview sidebar options", () => {
     assertSidebarItemsAndOptions(root, ["(Tiltfile)"], false, false, false)
   })
 
-  it("doesn't show SidebarOptionSetter if no tests present", () => {
+  it("doesn't show filter options if no tests present", () => {
     let items = [tiltfileResource(), oneResource()].map(
       (r) => new SidebarItem(r)
     )
@@ -137,8 +138,8 @@ describe("overview sidebar options", () => {
     let sidebar = root.find(SidebarResources)
     expect(sidebar).toHaveLength(1)
 
-    let optSetter = sidebar.find(OverviewSidebarOptions)
-    expect(optSetter).toHaveLength(0)
+    let filters = sidebar.find(FilterOptionList)
+    expect(filters).toHaveLength(0)
   })
 
   it("still displays pinned tests when tests hidden", () => {

diff --git a/web/src/OverviewSidebarOptions.tsx b/web/src/OverviewSidebarOptions.tsx
@@ -24,9 +24,13 @@ const OverviewSidebarOptionsRoot = styled.div`
   padding-left: ${SizeUnit(0.5)};
   padding-right: ${SizeUnit(0.5)};
   color: ${Color.offWhite};
+
+  &.is-filtersHidden {
+    justify-content: flex-end;
+  }
 `
 
-const FilterOptionList = styled.ul`
+export const FilterOptionList = styled.ul`
   ${mixinResetListStyle}
   display: flex;
   user-select: none; // Prevent unsightly highlighting on the label
@@ -53,6 +57,7 @@ export const AlertsOnTopToggle = styled.button`
 `
 
 type OverviewSidebarOptionsProps = {
+  showFilters: boolean
   options: SidebarOptions
   setOptions: Dispatch<SetStateAction<SidebarOptions>>
 }
@@ -81,50 +86,55 @@ function setShowResources(
   })
 }
 
+function filterOptions(props: OverviewSidebarOptionsProps) {
+  const classes = useStyles()
+  return (
+    <FilterOptionList>
+      <FormControlLabel
+        control={
+          <Checkbox
+            className={classes.root}
+            color={"default"}
+            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+            checkedIcon={<CheckBoxIcon fontSize="small" />}
+            checked={props.options.showResources}
+            onClick={(e) =>
+              setShowResources(props, !props.options.showResources)
+            }
+            name="resources"
+            id="resources"
+          />
+        }
+        label="Resources"
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            className={classes.root}
+            color={"default"}
+            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+            checkedIcon={<CheckBoxIcon fontSize="small" />}
+            checked={props.options.showTests}
+            onClick={(e) => setShowTests(props, !props.options.showTests)}
+            name="tests"
+            id="tests"
+          />
+        }
+        label="Tests"
+      />
+    </FilterOptionList>
+  )
+}
+
 export function OverviewSidebarOptions(
   props: OverviewSidebarOptionsProps
 ): JSX.Element {
-  const classes = useStyles()
-
   return (
     <OverviewSidebarOptionsRoot
       style={{ marginTop: SizeUnit(0.75), marginBottom: SizeUnit(-0.5) }}
+      className={!props.showFilters ? "is-filtersHidden" : ""}
     >
-      <FilterOptionList>
-        <FormControlLabel
-          control={
-            <Checkbox
-              className={classes.root}
-              color={"default"}
-              icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
-              checkedIcon={<CheckBoxIcon fontSize="small" />}
-              checked={props.options.showResources}
-              onClick={(e) =>
-                setShowResources(props, !props.options.showResources)
-              }
-              name="resources"
-              id="resources"
-            />
-          }
-          label="Resources"
-        />
-        <FormControlLabel
-          control={
-            <Checkbox
-              className={classes.root}
-              color={"default"}
-              icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
-              checkedIcon={<CheckBoxIcon fontSize="small" />}
-              checked={props.options.showTests}
-              onClick={(e) => setShowTests(props, !props.options.showTests)}
-              name="tests"
-              id="tests"
-            />
-          }
-          label="Tests"
-        />
-      </FilterOptionList>
-
+      {props.showFilters ? filterOptions(props) : null}
       <AlertsOnTopToggle
         className={props.options.alertsOnTop ? "is-enabled" : ""}
         onClick={(e) => setAlertsOnTop(props, !props.options.alertsOnTop)}

diff --git a/web/src/SidebarResources.tsx b/web/src/SidebarResources.tsx
@@ -156,9 +156,11 @@ export class SidebarResources extends React.Component<SidebarProps> {
             />
           </SidebarListSection>
           <PinnedItems {...this.props} />
-          {testsPresent && (
-            <OverviewSidebarOptions options={options} setOptions={setOptions} /> // TODO: if this vanishes because no tests present, reset it to show everything
-          )}
+          <OverviewSidebarOptions
+            showFilters={testsPresent}
+            options={options}
+            setOptions={setOptions}
+          />
           <SidebarListSection name="resources">{listItems}</SidebarListSection>
         </SidebarList>
         <SidebarKeyboardShortcuts

diff --git a/web/src/__snapshots__/Sidebar.test.tsx.snap b/web/src/__snapshots__/Sidebar.test.tsx.snap
@@ -41,6 +41,22 @@ exports[`sidebar abbreviates durations under a minute 1`] = `
         </li>
       </ul>
     </div>
+    <div
+      className="sc-bdfBwQ bJwFId is-filtersHidden"
+      style={
+        Object {
+          "marginBottom": "-16px",
+          "marginTop": "24px",
+        }
+      }
+    >
+      <button
+        className="sc-dlfnbm hYhRhc"
+        onClick={[Function]}
+      >
+        Alerts on Top
+      </button>
+    </div>
     <div>
       <div
         className="sc-hHftDr keXJQh"
@@ -861,6 +877,22 @@ exports[`sidebar renders empty resource list without crashing 1`] = `
         </li>
       </ul>
     </div>
+    <div
+      className="sc-bdfBwQ bJwFId is-filtersHidden"
+      style={
+        Object {
+          "marginBottom": "-16px",
+          "marginTop": "24px",
+        }
+      }
+    >
+      <button
+        className="sc-dlfnbm hYhRhc"
+        onClick={[Function]}
+      >
+        Alerts on Top
+      </button>
+    </div>
     <div>
       <div
         className="sc-hHftDr keXJQh"
@@ -917,6 +949,22 @@ exports[`sidebar renders list of resources 1`] = `
         </li>
       </ul>
     </div>
+    <div
+      className="sc-bdfBwQ bJwFId is-filtersHidden"
+      style={
+        Object {
+          "marginBottom": "-16px",
+          "marginTop": "24px",
+        }
+      }
+    >
+      <button
+        className="sc-dlfnbm hYhRhc"
+        onClick={[Function]}
+      >
+        Alerts on Top
+      </button>
+    </div>
     <div>
       <div
         className="sc-hHftDr keXJQh"
@@ -1196,6 +1244,22 @@ exports[`sidebar renders resources that haven't been built yet 1`] = `
         </li>
       </ul>
     </div>
+    <div
+      className="sc-bdfBwQ bJwFId is-filtersHidden"
+      style={
+        Object {
+          "marginBottom": "-16px",
+          "marginTop": "24px",
+        }
+      }
+    >
+      <button
+        className="sc-dlfnbm hYhRhc"
+        onClick={[Function]}
+      >
+        Alerts on Top
+      </button>
+    </div>
     <div>
       <div
         className="sc-hHftDr keXJQh"