feat: Hide entities with hidden flag on Workspace create (#581)

Signed-off-by: Charles Thao <cthao@redhat.com>

workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageList.tsx

@@ -100,28 +100,30 @@ export const WorkspaceFormImageList: React.FunctionComponent<WorkspaceFormImageL
         )}
         {filteredWorkspaceImages.length > 0 && (
           <Gallery hasGutter aria-label="Selectable card container">
-            {filteredWorkspaceImages.map((image) => (
+            {filteredWorkspaceImages
-              <Card
+              .filter((image) => !image.hidden)
-                isCompact
+              .map((image) => (
-                isSelectable
+                <Card
-                key={image.id}
+                  isCompact
-                id={image.id.replace(/ /g, '-')}
+                  isSelectable
-                isSelected={image.id === selectedImage?.id}
+                  key={image.id}
-              >
+                  id={image.id.replace(/ /g, '-')}
-                <CardHeader
+                  isSelected={image.id === selectedImage?.id}
-                  selectableActions={{
-                    selectableActionId: `selectable-actions-item-${image.id.replace(/ /g, '-')}`,
-                    selectableActionAriaLabelledby: image.displayName.replace(/ /g, '-'),
-                    name: image.displayName,
-                    variant: 'single',
-                    onChange,
-                  }}
                 >
-                  <CardTitle>{image.displayName}</CardTitle>
+                  <CardHeader
-                  <CardBody>{image.id}</CardBody>
+                    selectableActions={{
-                </CardHeader>
+                      selectableActionId: `selectable-actions-item-${image.id.replace(/ /g, '-')}`,
-              </Card>
+                      selectableActionAriaLabelledby: image.displayName.replace(/ /g, '-'),
-            ))}
+                      name: image.displayName,
+                      variant: 'single',
+                      onChange,
+                    }}
+                  >
+                    <CardTitle>{image.displayName}</CardTitle>
+                    <CardBody>{image.id}</CardBody>
+                  </CardHeader>
+                </Card>
+              ))}
           </Gallery>
         )}
       </PageSection>

workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindList.tsx

@@ -95,43 +95,49 @@ export const WorkspaceFormKindList: React.FunctionComponent<WorkspaceFormKindLis
         )}
         {filteredWorkspaceKinds.length > 0 && (
           <Gallery hasGutter aria-label="Selectable card container">
-            {filteredWorkspaceKinds.map((kind) => (
+            {filteredWorkspaceKinds
-              <Card
+              .filter((kind) => !kind.hidden)
-                isCompact
+              .map((kind) => (
-                isSelectable
+                <Card
-                key={kind.name}
+                  isCompact
-                id={kind.name.replace(/ /g, '-')}
+                  isSelectable
-                isSelected={kind.name === selectedKind?.name}
+                  key={kind.name}
-              >
+                  id={kind.name.replace(/ /g, '-')}
-                <CardHeader
+                  isSelected={kind.name === selectedKind?.name}
-                  selectableActions={{
-                    selectableActionId: `selectable-actions-item-${kind.name.replace(/ /g, '-')}`,
-                    selectableActionAriaLabelledby: kind.name.replace(/ /g, '-'),
-                    name: kind.name,
-                    variant: 'single',
-                    onChange,
-                  }}
                 >
-                  <WithValidImage
+                  <CardHeader
-                    imageSrc={kind.logo.url}
+                    selectableActions={{
-                    skeletonWidth="60px"
+                      selectableActionId: `selectable-actions-item-${kind.name.replace(/ /g, '-')}`,
-                    fallback={
+                      selectableActionAriaLabelledby: kind.name.replace(/ /g, '-'),
-                      <ImageFallback
+                      name: kind.name,
-                        imageSrc={kind.logo.url}
+                      variant: 'single',
-                        extended
+                      onChange,
-                        message="Cannot load logo image"
+                    }}
-                      />
-                    }
                   >
-                    {(validSrc) => (
+                    <WithValidImage
-                      <img src={validSrc} alt={`${kind.name} logo`} style={{ maxWidth: '60px' }} />
+                      imageSrc={kind.logo.url}
-                    )}
+                      skeletonWidth="60px"
-                  </WithValidImage>
+                      fallback={
-                </CardHeader>
+                        <ImageFallback
-                <CardTitle>{kind.displayName}</CardTitle>
+                          imageSrc={kind.logo.url}
-                <CardBody>{kind.description}</CardBody>
+                          extended
-              </Card>
+                          message="Cannot load logo image"
-            ))}
+                        />
+                      }
+                    >
+                      {(validSrc) => (
+                        <img
+                          src={validSrc}
+                          alt={`${kind.name} logo`}
+                          style={{ maxWidth: '60px' }}
+                        />
+                      )}
+                    </WithValidImage>
+                  </CardHeader>
+                  <CardTitle>{kind.displayName}</CardTitle>
+                  <CardBody>{kind.description}</CardBody>
+                </Card>
+              ))}
           </Gallery>
         )}
       </PageSection>

workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList.tsx

@@ -96,28 +96,30 @@ export const WorkspaceFormPodConfigList: React.FunctionComponent<
         )}
         {filteredWorkspacePodConfigs.length > 0 && (
           <Gallery hasGutter aria-label="Selectable card container">
-            {filteredWorkspacePodConfigs.map((podConfig) => (
+            {filteredWorkspacePodConfigs
-              <Card
+              .filter((podConfig) => !podConfig.hidden)
-                isCompact
+              .map((podConfig) => (
-                isSelectable
+                <Card
-                key={podConfig.id}
+                  isCompact
-                id={podConfig.id.replace(/ /g, '-')}
+                  isSelectable
-                isSelected={podConfig.id === selectedPodConfig?.id}
+                  key={podConfig.id}
-              >
+                  id={podConfig.id.replace(/ /g, '-')}
-                <CardHeader
+                  isSelected={podConfig.id === selectedPodConfig?.id}
-                  selectableActions={{
-                    selectableActionId: `selectable-actions-item-${podConfig.id.replace(/ /g, '-')}`,
-                    selectableActionAriaLabelledby: podConfig.displayName.replace(/ /g, '-'),
-                    name: podConfig.displayName,
-                    variant: 'single',
-                    onChange,
-                  }}
                 >
-                  <CardTitle>{podConfig.displayName}</CardTitle>
+                  <CardHeader
-                  <CardBody>{podConfig.id}</CardBody>
+                    selectableActions={{
-                </CardHeader>
+                      selectableActionId: `selectable-actions-item-${podConfig.id.replace(/ /g, '-')}`,
-              </Card>
+                      selectableActionAriaLabelledby: podConfig.displayName.replace(/ /g, '-'),
-            ))}
+                      name: podConfig.displayName,
+                      variant: 'single',
+                      onChange,
+                    }}
+                  >
+                    <CardTitle>{podConfig.displayName}</CardTitle>
+                    <CardBody>{podConfig.id}</CardBody>
+                  </CardHeader>
+                </Card>
+              ))}
           </Gallery>
         )}
       </PageSection>

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

@@ -217,7 +217,7 @@ export const buildMockWorkspaceKind = (
               { key: 'pythonVersion', value: '3.11' },
               { key: 'jupyterlabVersion', value: '1.8.0' },
             ],
-            hidden: true,
+            hidden: false,
             clusterMetrics: {
               workspacesCount: 0,
             },
@@ -257,7 +257,7 @@ export const buildMockWorkspaceKind = (
               { key: 'pythonVersion', value: '3.12' },
               { key: 'jupyterlabVersion', value: '2.0.0' },
             ],
-            hidden: true,
+            hidden: false,
             redirect: {
               to: 'jupyterlab_scipy_210',
               message: {
@@ -318,7 +318,7 @@ export const buildMockWorkspaceKind = (
             id: 'large_cpu',
             displayName: 'Large CPU',
             description: 'Pod with 1 CPU, 1 Gb RAM',
-            hidden: false,
+            hidden: true,
             labels: [
               { key: 'cpu', value: '1000m' },
               { key: 'memory', value: '1Gi' },