Allow custom render labels for unified resources

kimlisa · kimlisa · commit deb85ce8e657 · 2025-12-05T16:30:56.000-08:00
diff --git a/web/packages/shared/components/UnifiedResources/CardsView/CardsView.tsx b/web/packages/shared/components/UnifiedResources/CardsView/CardsView.tsx
@@ -36,6 +36,7 @@ export function CardsView({
   isProcessing,
   pinningSupport,
   visibleInputFields,
+  resourceLabelConfig,
 }: ResourceViewProps) {
   return (
     <CardsContainer className="CardsContainer" gap={2}>
@@ -53,6 +54,7 @@ export function CardsView({
             onShowStatusInfo={onShowStatusInfo}
             showingStatusInfo={showingStatusInfo}
             visibleInputFields={visibleInputFields}
+            resourceLabelConfig={resourceLabelConfig}
           />
         )
       )}
diff --git a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.story.tsx b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.story.tsx
@@ -21,6 +21,9 @@ import { MemoryRouter } from 'react-router';
 import styled from 'styled-components';
 
 import { ButtonBorder } from 'design';
+import { Plus } from 'design/Icon';
+import { LabelKind } from 'design/Label';
+import { IconPlacement } from 'design/Label/types';
 import { gap, GapProps } from 'design/system';
 
 // eslint-disable-next-line no-restricted-imports -- FIXME
@@ -90,6 +93,9 @@ const additionalResources = [
 type StoryProps = {
   withCheckbox: boolean;
   withPin: boolean;
+  withLabelButtonIcon: boolean;
+  withLabelButtonIconPlacement: IconPlacement;
+  labelKind: LabelKind;
 };
 
 const meta: Meta<StoryProps> = {
@@ -101,11 +107,23 @@ const meta: Meta<StoryProps> = {
     withPin: {
       control: { type: 'boolean' },
     },
+    withLabelButtonIcon: {
+      control: { type: 'boolean' },
+    },
+    withLabelButtonIconPlacement: {
+      control: { type: 'select' },
+      options: ['left', 'right'],
+    },
+    labelKind: {
+      control: { type: 'select' },
+      options: ['secondary', 'outline-primary', 'outline-warning', ''],
+    },
   },
   // default
   args: {
     withCheckbox: true,
     withPin: true,
+    withLabelButtonIcon: false,
   },
 };
 export default meta;
@@ -163,6 +181,13 @@ export function Cards(props: StoryProps) {
                 checkbox: props.withCheckbox,
                 pin: props.withPin,
               }}
+              {...((props.withLabelButtonIcon || props.labelKind) && {
+                resourceLabelConfig: {
+                  Icon: props.withLabelButtonIcon ? Plus : undefined,
+                  iconPlacement: props.withLabelButtonIconPlacement,
+                  kind: props.labelKind,
+                },
+              })}
             />
           ))}
         </Grid>
diff --git a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
@@ -21,6 +21,7 @@ import styled, { css } from 'styled-components';
 
 import { Box, ButtonLink, Flex, Label, Text } from 'design';
 import { CheckboxInput } from 'design/Checkbox';
+import { LabelButtonWithIcon } from 'design/Label/LabelButtonWithIcon';
 import { ResourceIcon } from 'design/ResourceIcon';
 import { HoverTooltip } from 'design/Tooltip';
 
@@ -67,6 +68,7 @@ export function ResourceCard({
   showingStatusInfo,
   viewItem,
   visibleInputFields = { pin: true, checkbox: true },
+  resourceLabelConfig,
 }: Omit<ResourceItemProps, 'expandAllLabels'>) {
   const {
     name,
@@ -284,14 +286,26 @@ export function ResourceCard({
                 </MoreLabelsButton>
                 {labels.map((label, i) => {
                   const labelText = makeLabelTag(label);
+                  const sharedProps = {
+                    title: labelText,
+                    onClick: () => onLabelClick?.(label),
+                    kind: resourceLabelConfig?.kind || 'secondary',
+                    'data-is-label': '',
+                  };
+                  if (resourceLabelConfig?.Icon) {
+                    return (
+                      <StyledLabelButton
+                        key={i}
+                        {...sharedProps}
+                        Icon={resourceLabelConfig.Icon}
+                        placement={resourceLabelConfig.iconPlacement ?? 'right'}
+                      >
+                        {labelText}
+                      </StyledLabelButton>
+                    );
+                  }
                   return (
-                    <StyledLabel
-                      key={i}
-                      title={labelText}
-                      onClick={() => onLabelClick?.(label)}
-                      kind="secondary"
-                      data-is-label=""
-                    >
+                    <StyledLabel key={i} {...sharedProps}>
                       {labelText}
                     </StyledLabel>
                   );
@@ -475,7 +489,7 @@ const LabelsContainer = styled(Box)<{ showAll?: boolean }>`
   overflow: hidden;
 `;
 
-const StyledLabel = styled(Label)`
+const sharedLabelStyle = css`
   height: ${labelHeight}px;
   margin: 1px 0;
   overflow: hidden;
@@ -485,6 +499,14 @@ const StyledLabel = styled(Label)`
   line-height: ${labelHeight - labelVerticalMargin}px;
 `;
 
+const StyledLabel = styled(Label)`
+  ${sharedLabelStyle}
+`;
+
+const StyledLabelButton = styled(LabelButtonWithIcon)`
+  ${sharedLabelStyle}
+`;
+
 /**
  * The inner labels container always adapts to the size of labels.  Its height
  * is measured by the resize observer.
diff --git a/web/packages/shared/components/UnifiedResources/ListView/ListView.tsx b/web/packages/shared/components/UnifiedResources/ListView/ListView.tsx
@@ -35,6 +35,7 @@ export function ListView({
   isProcessing,
   expandAllLabels,
   visibleInputFields,
+  resourceLabelConfig,
 }: ResourceViewProps) {
   return (
     <Flex className="ListContainer">
@@ -53,6 +54,7 @@ export function ListView({
             onShowStatusInfo={onShowStatusInfo}
             showingStatusInfo={showingStatusInfo}
             visibleInputFields={visibleInputFields}
+            resourceLabelConfig={resourceLabelConfig}
           />
         )
       )}
diff --git a/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.story.tsx b/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.story.tsx
@@ -19,6 +19,9 @@
 import { Meta } from '@storybook/react-vite';
 
 import { ButtonBorder, Flex } from 'design';
+import { Plus } from 'design/Icon';
+import { LabelKind } from 'design/Label';
+import { IconPlacement } from 'design/Label/types';
 
 // eslint-disable-next-line no-restricted-imports -- FIXME
 import { apps } from 'teleport/Apps/fixtures';
@@ -83,6 +86,9 @@ const additionalResources = [
 type StoryProps = {
   withCheckbox: boolean;
   withPin: boolean;
+  withLabelButtonIcon: boolean;
+  withLabelButtonIconPlacement: IconPlacement;
+  labelKind: LabelKind;
 };
 
 const meta: Meta<StoryProps> = {
@@ -94,11 +100,23 @@ const meta: Meta<StoryProps> = {
     withPin: {
       control: { type: 'boolean' },
     },
+    withLabelButtonIcon: {
+      control: { type: 'boolean' },
+    },
+    withLabelButtonIconPlacement: {
+      control: { type: 'select' },
+      options: ['left', 'right'],
+    },
+    labelKind: {
+      control: { type: 'select' },
+      options: ['secondary', 'outline-primary', 'outline-warning', ''],
+    },
   },
   // default
   args: {
     withCheckbox: true,
     withPin: true,
+    withLabelButtonIcon: false,
   },
 };
 export default meta;
@@ -145,6 +163,13 @@ export function ListItems(props: StoryProps) {
             checkbox: props.withCheckbox,
             pin: props.withPin,
           }}
+          {...((props.withLabelButtonIcon || props.labelKind) && {
+            resourceLabelConfig: {
+              Icon: props.withLabelButtonIcon ? Plus : undefined,
+              iconPlacement: props.withLabelButtonIconPlacement,
+              kind: props.labelKind,
+            },
+          })}
         />
       ))}
     </Flex>
diff --git a/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx b/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx
@@ -22,6 +22,7 @@ import styled, { css } from 'styled-components';
 import { Box, ButtonIcon, Flex, Label, Text } from 'design';
 import { CheckboxInput } from 'design/Checkbox';
 import { Tags, Warning } from 'design/Icon';
+import { LabelButtonWithIcon } from 'design/Label/LabelButtonWithIcon';
 import { ResourceIcon } from 'design/ResourceIcon';
 import { HoverTooltip } from 'design/Tooltip';
 
@@ -51,6 +52,7 @@ export function ResourceListItem({
   showingStatusInfo,
   viewItem,
   visibleInputFields = { pin: true, checkbox: true },
+  resourceLabelConfig,
 }: ResourceItemProps) {
   const {
     name,
@@ -281,26 +283,32 @@ export function ResourceListItem({
           >
             {labels.map((label, i) => {
               const labelText = makeLabelTag(label);
-              // We can use the index i as the key since it will always be unique to this label.
+              const sharedProps = {
+                title: labelText,
+                onClick: () => onLabelClick?.(label),
+                kind: resourceLabelConfig?.kind || 'secondary',
+                mr: 2,
+              };
+
+              // We can use the index i as the key since
+              // it will always be unique to this label.
+
+              if (resourceLabelConfig?.Icon) {
+                return (
+                  <StyledLabelButton
+                    key={i}
+                    {...sharedProps}
+                    Icon={resourceLabelConfig.Icon}
+                    placement={resourceLabelConfig.iconPlacement ?? 'right'}
+                  >
+                    {labelText}
+                  </StyledLabelButton>
+                );
+              }
               return (
-                <Label
-                  key={i}
-                  title={labelText}
-                  onClick={() => onLabelClick?.(label)}
-                  kind="secondary"
-                  mr={2}
-                  css={`
-                    cursor: pointer;
-                    height: 20px;
-                    line-height: 19px;
-                    max-width: 100%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                  `}
-                >
+                <StyledLabel key={i} {...sharedProps}>
                   {labelText}
-                </Label>
+                </StyledLabel>
               );
             })}
           </Box>
@@ -361,6 +369,24 @@ const RowContainer = styled(Box)<{
   }
 `;
 
+const sharedLabelStyle = css`
+  cursor: pointer;
+  height: 20px;
+  line-height: 19px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledLabel = styled(Label)`
+  ${sharedLabelStyle}
+`;
+
+const StyledLabelButton = styled(LabelButtonWithIcon)`
+  ${sharedLabelStyle}
+`;
+
 const RowInnerContainer = styled(Flex)<BackgroundColorProps>`
   display: grid;
   column-gap: ${props => props.theme.space[3]}px;
diff --git a/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx b/web/packages/shared/components/UnifiedResources/UnifiedResources.tsx
@@ -69,6 +69,7 @@ import { mapResourceToViewItem } from './shared/viewItemsFactory';
 import {
   IncludedResourceMode,
   PinningSupport,
+  ResourceLabelConfig,
   SharedUnifiedResource,
   UnifiedResourceDefinition,
   UnifiedResourcesPinning,
@@ -225,6 +226,13 @@ export interface UnifiedResourcesProps {
    */
   onShowStatusInfo(resource: UnifiedResourceDefinition): void;
 
+  /**
+   * resourceLabelConfig provides a way to custom handle resource labels.
+   *
+   * Look up the type to see the default behaviors if fields are not
+   * provided.
+   */
+  resourceLabelConfig?: ResourceLabelConfig;
   /**
    * onLabelClick is a custom label click handler.
    *
@@ -271,6 +279,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
     visibleFilterPanelFields,
     visibleResourceItemFields,
     onLabelClick,
+    resourceLabelConfig,
     className,
     forceNoResources,
   } = props;
@@ -711,6 +720,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
                       availabilityFilter?.mode === 'requestable',
                   },
                 }),
+                resourceLabelConfig,
                 key: generateUnifiedResourceKey(resource),
                 onShowStatusInfo: () => onShowStatusInfo(resource),
                 showingStatusInfo:
diff --git a/web/packages/shared/components/UnifiedResources/types.ts b/web/packages/shared/components/UnifiedResources/types.ts
