web: proposal - add a small show more button in each section with mor…

…e than 20 items (#5483) * web: proposal - add a small show more button in each section with more than 20 items * response to comments
tilt-dev · Feb 14, 2022 · 4b00780 · 4b00780
1 parent eaa5648
commit 4b00780
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 4 deletions.
diff --git a/web/src/SidebarResources.tsx b/web/src/SidebarResources.tsx
@@ -3,10 +3,11 @@ import {
   AccordionDetails,
   AccordionSummary,
 } from "@material-ui/core"
-import React, { ChangeEvent, useMemo } from "react"
+import React, { ChangeEvent, useCallback, useMemo, useState } from "react"
 import styled from "styled-components"
-import { AnalyticsType } from "./analytics"
+import { AnalyticsType, emptyTags } from "./analytics"
 import { FeaturesContext, Flag, useFeatures } from "./feature"
+import { InstrumentedButton } from "./instrumentedComponents"
 import {
   GroupByLabelView,
   orderLabels,
@@ -33,7 +34,15 @@ import SidebarItemView, {
   SidebarItemRoot,
 } from "./SidebarItemView"
 import SidebarKeyboardShortcuts from "./SidebarKeyboardShortcuts"
-import { Color, Font, FontSize, SizeUnit } from "./style-helpers"
+import SrOnly from "./SrOnly"
+import {
+  AnimDuration,
+  Color,
+  Font,
+  FontSize,
+  mixinResetButtonStyle,
+  SizeUnit,
+} from "./style-helpers"
 import { triggerUpdate } from "./trigger"
 import { ResourceStatus, ResourceView } from "./types"
 
@@ -177,6 +186,7 @@ export function SidebarListSection(props: SidebarSectionProps): JSX.Element {
       {sectionName}
       <SidebarListSectionItemsRoot>
         <SidebarListSectionItems {...props} items={enabledItems} />
+
         {displayDisabledResources && (
           <SidebarDisabledSectionList>
             <SidebarDisabledSectionTitle>Disabled</SidebarDisabledSectionTitle>
@@ -190,10 +200,67 @@ export function SidebarListSection(props: SidebarSectionProps): JSX.Element {
   )
 }
 
+const defaultMaxItems = 20
+
+const ShowMoreRow = styled.li`
+  margin: ${SizeUnit(0.5)} ${SizeUnit(0.5)} 0 ${SizeUnit(0.5)};
+  color: ${Color.gray7};
+  font-size: ${FontSize.small};
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  font-family: ${Font.sansSerif};
+`
+
+const ShowMoreButton = styled(InstrumentedButton)`
+  ${mixinResetButtonStyle};
+  font-size: ${FontSize.small};
+  color: ${Color.gray6};
+  transition: color ${AnimDuration.default} ease;
+  cursor: pointer;
+  padding: 0 0.5em;
+
+  &:hover {
+    color: ${Color.blue};
+  }
+`
+
 function SidebarListSectionItems(props: SidebarSectionProps) {
+  let [maxItems, setMaxItems] = useState(defaultMaxItems)
+  let displayItems = props.items
+  let remaining = 0
+  let moreItems = Math.max(displayItems.length - maxItems, 0)
+  if (moreItems) {
+    remaining = displayItems.length - maxItems
+    displayItems = displayItems.slice(0, maxItems)
+  }
+
+  let showMore = useCallback(() => {
+    setMaxItems(maxItems * 2)
+  }, [maxItems, setMaxItems])
+
+  let showMoreItemsButton = null
+  if (moreItems > 0) {
+    let text = ` (${remaining})`
+    showMoreItemsButton = (
+      <ShowMoreRow>
+        <ShowMoreButton
+          onClick={showMore}
+          analyticsName="ui.web.sidebarShowMore"
+          analyticsTags={emptyTags}
+        >
+          …Show More <SrOnly>Resources</SrOnly>
+        </ShowMoreButton>
+        <span>
+          {text} <SrOnly>hidden</SrOnly>
+        </span>
+      </ShowMoreRow>
+    )
+  }
+
   return (
     <>
-      {props.items.map((item) => (
+      {displayItems.map((item) => (
         <SidebarItemView
           key={"sidebarItem-" + item.name}
           groupView={props.groupView}
@@ -203,6 +270,7 @@ function SidebarListSectionItems(props: SidebarSectionProps) {
           resourceView={props.resourceView}
         />
       ))}
+      {showMoreItemsButton}
     </>
   )
 }

diff --git a/web/src/analytics.ts b/web/src/analytics.ts
@@ -7,6 +7,8 @@ import {
   TermState,
 } from "./logfilters"
 
+export const emptyTags = Object.freeze({})
+
 export type Tags = {
   [key: string]: string | undefined
   action?: AnalyticsAction | Action