add expand all labels button

gravitational · Dec 7, 2023 · 1961d5c · 1961d5c
1 parent 356782b
commit 1961d5c
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 4 deletions.
diff --git a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
@@ -61,7 +61,7 @@ export function ResourceCard({
   pinResource,
   selectResource,
   selected,
-}: Omit<ResourceItemProps, 'listViewProps'>) {
+}: Omit<ResourceItemProps, 'listViewProps' | 'expandAllLabels'>) {
   const { primaryDesc, secondaryDesc } = cardViewProps;
 
   const [showMoreLabelsButton, setShowMoreLabelsButton] = useState(false);

diff --git a/web/packages/shared/components/UnifiedResources/FilterPanel.tsx b/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
@@ -29,6 +29,8 @@ import {
   ChevronDown,
   SquaresFour,
   Rows,
+  ArrowsIn,
+  ArrowsOut,
 } from 'design/Icon';
 
 import { ViewMode } from 'shared/services/unifiedResourcePreferences';
@@ -60,6 +62,8 @@ interface FilterPanelProps {
   BulkActions?: React.ReactElement;
   currentViewMode: ViewMode;
   onSelectViewMode: (viewMode: ViewMode) => void;
+  expandAllLabels: boolean;
+  setExpandAllLabels: (showAllLabels: boolean) => void;
 }
 
 export function FilterPanel({
@@ -71,6 +75,8 @@ export function FilterPanel({
   BulkActions,
   currentViewMode,
   onSelectViewMode,
+  expandAllLabels,
+  setExpandAllLabels,
 }: FilterPanelProps) {
   const { sort, kinds } = params;
 
@@ -114,7 +120,31 @@ export function FilterPanel({
         />
       </Flex>
       <Flex gap={2} alignItems="center">
-        <Box mr={4}>{BulkActions}</Box>
+        <Box mr={1}>{BulkActions}</Box>
+        {currentViewMode === ViewMode.VIEW_MODE_LIST && (
+          <ButtonBorder
+            size="small"
+            css={`
+              border: none;
+              color: ${props => props.theme.colors.text.slightlyMuted};
+              text-transform: none;
+              padding-left: ${props => props.theme.space[2]}px;
+              padding-right: ${props => props.theme.space[2]}px;
+              height: 22px;
+              width: 128px;
+            `}
+            onClick={() => setExpandAllLabels(!expandAllLabels)}
+          >
+            <Flex alignItems="center" width="100%">
+              {expandAllLabels ? (
+                <ArrowsIn size="small" mr={1} />
+              ) : (
+                <ArrowsOut size="small" mr={1} />
+              )}
+              {expandAllLabels ? 'Collapse ' : 'Expand '} All Labels
+            </Flex>
+          </ButtonBorder>
+        )}
         <ViewModeSwitch
           currentViewMode={currentViewMode}
           onSelectViewMode={onSelectViewMode}

diff --git a/web/packages/shared/components/UnifiedResources/ListView/ListView.tsx b/web/packages/shared/components/UnifiedResources/ListView/ListView.tsx
@@ -37,6 +37,7 @@ export function ListView({
   onPinResource,
   pinningSupport,
   isProcessing,
+  expandAllLabels,
 }: ResourceViewProps) {
   return (
     <Flex className="ListContainer">
@@ -55,6 +56,7 @@ export function ListView({
           selected={selectedResources.includes(key)}
           selectResource={() => onSelectResource(key)}
           pinResource={() => onPinResource(key)}
+          expandAllLabels={expandAllLabels}
         />
       ))}
       {isProcessing && (

diff --git a/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.story.tsx b/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.story.tsx
@@ -128,6 +128,7 @@ export const ListItems: Story = {
             listViewProps={res.listViewProps}
             labels={res.labels}
             ActionButton={res.ActionButton}
+            expandAllLabels={false}
           />
         ))}
       </Flex>

diff --git a/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx b/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { Box, ButtonIcon, Flex, Label, Text } from 'design';
@@ -45,12 +45,18 @@ export function ResourceListItem({
   pinResource,
   selectResource,
   selected,
+  expandAllLabels,
 }: Omit<ResourceItemProps, 'cardViewProps'>) {
   const { description, resourceType, addr } = listViewProps;
 
-  const [showLabels, setShowLabels] = useState(false);
+  const [showLabels, setShowLabels] = useState(expandAllLabels);
   const [hovered, setHovered] = useState(false);
 
+  // Update whether this item's labels are shown if the `showAllLabels` preference is updated.
+  useEffect(() => {
+    setShowLabels(expandAllLabels);
+  }, [expandAllLabels]);
+
   const showLabelsButton = labels.length > 0 && (hovered || showLabels);
 
   // Determines which column the resource type text should end at.

diff --git a/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx b/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx
@@ -38,6 +38,7 @@ import {
   DefaultTab,
   ViewMode,
   UnifiedResourcePreferences,
+  LabelsViewMode,
 } from 'shared/services/unifiedResourcePreferences';
 import { HoverTooltip } from 'shared/components/ToolTip';
 import {
@@ -294,6 +295,13 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
     });
   };
 
+  const setLabelsViewMode = (labelsViewMode: LabelsViewMode) => {
+    updateUnifiedResourcesPreferences({
+      ...unifiedResourcePreferences,
+      labelsViewMode,
+    });
+  };
+
   const getSelectedResources = () => {
     return resources
       .filter(({ resource }) =>
@@ -328,6 +336,10 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
     ];
   };
 
+  const expandAllLabels =
+    unifiedResourcePreferences.labelsViewMode ===
+    LabelsViewMode.LABELS_VIEW_MODE_EXPANDED;
+
   const ViewComponent =
     unifiedResourcePreferences.viewMode === ViewMode.VIEW_MODE_LIST
       ? ListView
@@ -383,6 +395,14 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
         selected={allSelected}
         currentViewMode={unifiedResourcePreferences.viewMode}
         onSelectViewMode={selectViewMode}
+        expandAllLabels={expandAllLabels}
+        setExpandAllLabels={expandAllLabels => {
+          setLabelsViewMode(
+            expandAllLabels
+              ? LabelsViewMode.LABELS_VIEW_MODE_EXPANDED
+              : LabelsViewMode.LABELS_VIEW_MODE_COLLAPSED
+          );
+        }}
         BulkActions={
           <>
             {selectedResources.length > 0 && (
@@ -464,6 +484,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
             item: mapResourceToViewItem(unifiedResource),
             key: generateUnifiedResourceKey(unifiedResource.resource),
           }))}
+          expandAllLabels={expandAllLabels}
         />
       )}
       <div ref={setTrigger} />

diff --git a/web/packages/shared/components/UnifiedResources/types.ts b/web/packages/shared/components/UnifiedResources/types.ts
@@ -147,6 +147,7 @@ export type ResourceItemProps = {
   selected: boolean;
   pinned: boolean;
   pinningSupport: PinningSupport;
+  expandAllLabels: boolean;
 };
 
 // Props that are needed for the Card view.
@@ -187,4 +188,5 @@ export type ResourceViewProps = {
   pinningSupport: PinningSupport;
   isProcessing: boolean;
   mappedResources: { item: UnifiedResourceViewItem; key: string }[];
+  expandAllLabels: boolean;
 };