From 448b120bc538b43874d13ce988a0438580d7ddeb Mon Sep 17 00:00:00 2001
From: Nick Santos <nick.santos@docker.com>
Date: Mon, 13 Mar 2023 13:27:43 -0400
Subject: [PATCH] web: styling and accessibility of new starred resources view
 (#6074)

Signed-off-by: Nick Santos <nick.santos@docker.com>
---
 web/src/OverviewResourcePane.tsx    |  3 ++
 web/src/SidebarResources.tsx        | 10 ++++--
 web/src/StarredResourceBar.test.tsx |  4 ++-
 web/src/StarredResourceBar.tsx      | 50 ++++++++++++++++++++---------
 4 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/web/src/OverviewResourcePane.tsx b/web/src/OverviewResourcePane.tsx
index 794ae6c270..e04872039a 100644
--- a/web/src/OverviewResourcePane.tsx
+++ b/web/src/OverviewResourcePane.tsx
@@ -52,12 +52,15 @@ export default function OverviewResourcePane(props: OverviewResourcePaneProps) {
   let name = nav.invalidResource || nav.selectedResource || ""
   let r: UIResource | undefined
   let all = name === "" || name === ResourceName.all
+  let starred = name === ResourceName.starred
   if (!all) {
     r = resources.find((r) => r.metadata?.name === name)
   }
   let selectedTab = ""
   if (all) {
     selectedTab = ResourceName.all
+  } else if (starred) {
+    selectedTab = ResourceName.starred
   } else if (r?.metadata?.name) {
     selectedTab = r.metadata.name
   }
diff --git a/web/src/SidebarResources.tsx b/web/src/SidebarResources.tsx
index 099ee14f40..93267f1689 100644
--- a/web/src/SidebarResources.tsx
+++ b/web/src/SidebarResources.tsx
@@ -41,7 +41,8 @@ import SidebarItemView, {
 import SidebarKeyboardShortcuts from "./SidebarKeyboardShortcuts"
 import { AnimDuration, Color, Font, FontSize, SizeUnit } from "./style-helpers"
 import { startBuild } from "./trigger"
-import { ResourceStatus, ResourceView } from "./types"
+import { ResourceName, ResourceStatus, ResourceView } from "./types"
+import { useStarredResources } from "./StarredResourcesContext"
 
 export type SidebarProps = {
   items: SidebarItem[]
@@ -203,7 +204,12 @@ function StarredResourcesLink(props: {
   pathBuilder: PathBuilder
   selected: string
 }) {
-  const isSelectedClass = props.selected === "" ? "isSelected" : ""
+  const starContext = useStarredResources()
+  if (!starContext.starredResources.length) {
+    return null
+  }
+  const isSelectedClass =
+    props.selected === ResourceName.starred ? "isSelected" : ""
   return (
     <BuiltinResourceLinkRoot
       className={isSelectedClass}
diff --git a/web/src/StarredResourceBar.test.tsx b/web/src/StarredResourceBar.test.tsx
index 7180b2eb97..51182bc19c 100644
--- a/web/src/StarredResourceBar.test.tsx
+++ b/web/src/StarredResourceBar.test.tsx
@@ -27,7 +27,9 @@ describe("StarredResourceBar", () => {
   })
 
   it("renders starred logs link", () => {
-    expect(screen.getByText("Logs")).toBeInTheDocument()
+    expect(
+      screen.getByRole("button", { name: "All Starred" })
+    ).toBeInTheDocument()
   })
 
   it("calls unstar", () => {
diff --git a/web/src/StarredResourceBar.tsx b/web/src/StarredResourceBar.tsx
index d99578a3d7..ad5dd7626e 100644
--- a/web/src/StarredResourceBar.tsx
+++ b/web/src/StarredResourceBar.tsx
@@ -25,7 +25,7 @@ import {
   SizeUnit,
 } from "./style-helpers"
 import TiltTooltip from "./Tooltip"
-import { ResourceStatus } from "./types"
+import { ResourceName, ResourceStatus } from "./types"
 
 export const StarredResourceLabel = styled.div`
   max-width: ${SizeUnit(4.5)};
@@ -156,6 +156,9 @@ const StarredResourceRoot = styled.div`
   ${ResourceButton} {
     padding-left: ${SizeUnit(0.25)};
   }
+  &.isStarredAggregate ${ResourceButton} {
+    padding-right: ${SizeUnit(0.25)};
+  }
 `
 const StarredResourceBarRoot = styled.section`
   padding-left: ${SizeUnit(0.5)};
@@ -229,26 +232,41 @@ export function StarredResource(props: {
   )
 }
 
-export default function StarredResourceBar(props: StarredResourceBarProps) {
+function StarredResourceAggregate(props: { isSelected: boolean }) {
   const pb = usePathBuilder()
+  const href = pb.encpath`/r/${ResourceName.starred}/overview`
   const history = useHistory()
+  let classes = [
+    ClassNameFromResourceStatus(ResourceStatus.Healthy),
+    "isStarredAggregate",
+  ]
+  if (props.isSelected) {
+    classes.push("isSelected")
+  }
+
+  return (
+    <TiltTooltip title={"View starred resource logs"}>
+      <StarredResourceRoot className={classes.join(" ")}>
+        <ResourceButton
+          onClick={() => {
+            history.push(href)
+          }}
+          analyticsName="ui.web.starredResourcesAggregatedLogs"
+        >
+          <StarredResourceLabel>All Starred</StarredResourceLabel>
+        </ResourceButton>
+      </StarredResourceRoot>
+    </TiltTooltip>
+  )
+}
+
+export default function StarredResourceBar(props: StarredResourceBarProps) {
   return (
     <StarredResourceBarRoot aria-label="Starred resources">
       {props.resources.length ? (
-        <TiltTooltip title={"View starred resource logs"}>
-          <StarredResourceRoot className={""}>
-            <StarButton
-              name="starredLogs"
-              onClick={() => {
-                history.push(pb.encpath`/r/(starred)/overview`)
-              }}
-              analyticsName="ui.web.starredResourcesAggregatedLogs"
-            >
-              <StarIcon style={{ marginRight: 10 }} />
-              Logs
-            </StarButton>
-          </StarredResourceRoot>
-        </TiltTooltip>
+        <StarredResourceAggregate
+          isSelected={ResourceName.starred === props.selectedResource}
+        />
       ) : null}
       {props.resources.map((r) => (
         <StarredResource