Implement LabelGroupWithTooltip component to display extra workspaces

Signed-off-by: Charles Thao <[email protected]>

Author: thaorell

workspaces/frontend/src/app/components/LabelGroupWithTooltip.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Label, LabelProps } from '@patternfly/react-core/dist/esm/components/Label';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
+import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
+
+export interface LabelGroupWithTooltipProps {
+  labels: string[];
+  limit: number;
+  isCompact?: boolean;
+  variant?: LabelProps['variant'];
+  icon?: React.ReactNode;
+  status?: LabelProps['status'];
+  color?: LabelProps['color'];
+}
+
+export const LabelGroupWithTooltip: React.FC<LabelGroupWithTooltipProps> = ({
+  labels,
+  limit,
+  isCompact = false,
+  variant = 'filled',
+  icon,
+  status,
+  color,
+}) => {
+  if (labels.length === 0) {
+    return null;
+  }
+
+  const visibleLabels = labels.slice(0, limit);
+  const remainingLabels = labels.slice(limit);
+  const hasMore = remainingLabels.length > 0;
+
+  return (
+    <Flex gap={{ default: 'gapXs' }}>
+      {visibleLabels.map((label, index) => (
+        <FlexItem key={`${label}-${index}`}>
+          <Label isCompact={isCompact} variant={variant} icon={icon} status={status} color={color}>
+            {label}
+          </Label>
+        </FlexItem>
+      ))}
+      {hasMore && (
+        <FlexItem>
+          <Tooltip content={`${remainingLabels.join(', ')}`}>
+            <Label isCompact={isCompact} variant={variant} color={color}>
+              +{remainingLabels.length} more
+            </Label>
+          </Tooltip>
+        </FlexItem>
+      )}
+    </Flex>
+  );
+};

workspaces/frontend/src/app/pages/Workspaces/Form/properties/secrets/SecretsAttachModal.tsx

@@ -17,11 +17,12 @@ import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
 import { Label, LabelGroup } from '@patternfly/react-core/dist/esm/components/Label';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Truncate } from '@patternfly/react-core/dist/esm/components/Truncate';
+import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
 import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack';
 import { SecretsSecretListItem } from '~/generated/data-contracts';
 import { isValidDefaultMode } from '~/app/pages/Workspaces/Form/helpers';
 import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';
+import { LabelGroupWithTooltip } from '~/app/components/LabelGroupWithTooltip';
 
 export interface SecretsAttachModalProps {
   isOpen: boolean;
@@ -112,41 +113,47 @@ export const SecretsAttachModal: React.FC<SecretsAttachModalProps> = ({
                   <LabelGroup>
                     <Label isCompact>Type: {secret.type}</Label>
                     {secret.immutable && <Label isCompact>Immutable</Label>}
+                    {!secret.canMount && <Label isCompact>Unmountable</Label>}
                   </LabelGroup>
                 </StackItem>
                 {secret.mounts && (
-                  <StackItem style={{ paddingLeft: '1.25ch' }}>
-                    Mounted to:&ensp;
-                    <Truncate
-                      content={secret.mounts.map((mount) => mount.name).join(', ')}
-                      position="end"
-                      maxCharsDisplayed={100}
-                    />
+                  <StackItem style={{ marginLeft: '1.25ch', marginTop: '0.25rem' }}>
+                    <Flex gap={{ default: 'gapXs' }}>
+                      <FlexItem>Mounted to:</FlexItem>
+                      <FlexItem>
+                        <LabelGroupWithTooltip
+                          labels={secret.mounts.map((mount) => mount.name)}
+                          limit={5}
+                          variant="outline"
+                          icon={<WrenchIcon color="teal" />}
+                          isCompact
+                          color="teal"
+                        />
+                      </FlexItem>
+                    </Flex>
                   </StackItem>
                 )}
               </Stack>
             </FlexItem>
             <FlexItem>
-              {secret.canMount && (
-                <Tooltip
-                  aria="none"
-                  aria-live="polite"
-                  content={
-                    <Stack>
-                      <StackItem>
-                        {`Created at: ${new Date(secret.audit.createdAt).toLocaleString()} by 
+              <Tooltip
+                aria="none"
+                aria-live="polite"
+                content={
+                  <Stack>
+                    <StackItem>
+                      {`Created at: ${new Date(secret.audit.createdAt).toLocaleString()} by 
                         ${secret.audit.createdBy}`}
-                      </StackItem>
-                      <StackItem>
-                        {`Updated at: ${new Date(secret.audit.updatedAt).toLocaleString()} by 
+                    </StackItem>
+                    <StackItem>
+                      {`Updated at: ${new Date(secret.audit.updatedAt).toLocaleString()} by 
                         ${secret.audit.updatedBy}`}
-                      </StackItem>
-                    </Stack>
-                  }
-                >
-                  <InfoCircleIcon />
-                </Tooltip>
-              )}
+                    </StackItem>
+                  </Stack>
+                }
+              >
+                <InfoCircleIcon />
+              </Tooltip>
             </FlexItem>
           </Flex>
         ),

workspaces/frontend/src/shared/mock/mockNotebookServiceData.ts

@@ -169,6 +169,18 @@ const buildMockSecretList = (startIndex: number, count: number) => {
   return secrets;
 };
 
+const buildMockSecretMountList = (startIndex: number, count: number) => {
+  const mounts = [];
+  for (let i = startIndex; i <= startIndex + count; i++) {
+    mounts.push({
+      name: `workspace-${i}`,
+      group: `group-${i}`,
+      kind: `kind-${i}`,
+    });
+  }
+  return mounts;
+};
+
 export const mockAllWorkspaces = [
   mockWorkspace1,
   mockWorkspace2,
@@ -197,32 +209,16 @@ export const mockSecretsList = [
   buildMockSecret({
     name: 'secret-1',
     immutable: true,
-    mounts: [
-      {
-        name: 'workspace-1',
-        group: 'group-1',
-        kind: 'kind-1',
-      },
-    ],
+    mounts: buildMockSecretMountList(1, 5),
   }),
   buildMockSecret({
     name: 'secret-2',
     canMount: false,
+    mounts: buildMockSecretMountList(1, 2),
   }),
   buildMockSecret({
     name: 'secret-3',
-    mounts: [
-      {
-        name: 'workspace-1',
-        group: 'group-1',
-        kind: 'kind-1',
-      },
-      {
-        name: 'workspace-2, workspace-3, workspace-4, workspace-5, workspace-6, workspace-7, workspace-8, workspace-9, workspace-10',
-        group: 'group-2',
-        kind: 'kind-2',
-      },
-    ],
+    mounts: buildMockSecretMountList(1, 20),
   }),
   ...buildMockSecretList(4, 20),
 ];