chore(ws): extract filter by labels component on workspace creation (#243)

Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com>

workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx

@@ -12,10 +12,10 @@ import {
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CheckIcon } from '@patternfly/react-icons';
-import { WorkspaceCreationImageSelection } from '~/app/pages/Workspaces/Creation/WorkspaceCreationImageSelection';
-import { WorkspaceCreationKindSelection } from '~/app/pages/Workspaces/Creation/WorkspaceCreationKindSelection';
+import { WorkspaceCreationImageSelection } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection';
+import { WorkspaceCreationKindSelection } from '~/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection';
 import { WorkspaceCreationPropertiesSelection } from '~/app/pages/Workspaces/Creation/WorkspaceCreationPropertiesSelection';
-import { WorkspaceCreationPodConfigSelection } from '~/app/pages/Workspaces/Creation/WorkspaceCreationPodConfigSelection';
+import { WorkspaceCreationPodConfigSelection } from '~/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigSelection';
 import { WorkspaceImage, WorkspaceKind } from '~/shared/types';
 
 enum WorkspaceCreationSteps {

workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { Content, Divider, Split, SplitItem } from '@patternfly/react-core';
 import { useMemo, useState } from 'react';
 import { WorkspaceImage } from '~/shared/types';
-import { WorkspaceCreationImageDetails } from '~/app/pages/Workspaces/Creation/WorkspaceCreationImageDetails';
-import { WorkspaceCreationImageList } from '~/app/pages/Workspaces/Creation/WorkspaceCreationImageList';
-import { WorkspaceCreationImageFilter } from '~/app/pages/Workspaces/Creation/WorkspaceCreationImageFilter';
+import { WorkspaceCreationImageDetails } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails';
+import { WorkspaceCreationImageList } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageList';
+import { FilterByLabels } from '~/app/pages/Workspaces/Creation/labelFilter/FilterByLabels';
 
 interface WorkspaceCreationImageSelectionProps {
   images: WorkspaceImage[];
@@ -19,8 +19,8 @@ const WorkspaceCreationImageSelection: React.FunctionComponent<
 
   const imageFilterContent = useMemo(
     () => (
-      <WorkspaceCreationImageFilter
-        images={images}
+      <FilterByLabels
+        labelledObjects={images.map((image) => image.labels)}
         selectedLabels={selectedLabels}
         onSelect={setSelectedLabels}
       />

workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { Content, Divider, Split, SplitItem } from '@patternfly/react-core';
 import { useMemo } from 'react';
 import { WorkspaceKind } from '~/shared/types';
-import { WorkspaceCreationKindDetails } from '~/app/pages/Workspaces/Creation/WorkspaceCreationKindDetails';
-import { WorkspaceCreationKindList } from '~/app/pages/Workspaces/Creation/WorkspaceCreationKindList';
+import { WorkspaceCreationKindDetails } from '~/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindDetails';
+import { WorkspaceCreationKindList } from '~/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindList';
 
 interface WorkspaceCreationKindSelectionProps {
   selectedKind: WorkspaceKind | undefined;

workspaces/frontend/src/app/pages/Workspaces/Creation/labelFilter/FilterByLabels.tsx

@@ -4,23 +4,24 @@ import {
   FilterSidePanelCategory,
   FilterSidePanelCategoryItem,
 } from '@patternfly/react-catalog-view-extension';
-import { WorkspaceImage } from '~/shared/types';
 import '@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css';
 
-type WorkspaceCreationImageFilterProps = {
-  images: WorkspaceImage[];
+type FilterByLabelsProps = {
+  labelledObjects: object[];
   selectedLabels: Map<string, Set<string>>;
   onSelect: (labels: Map<string, Set<string>>) => void;
 };
 
-export const WorkspaceCreationImageFilter: React.FunctionComponent<
-  WorkspaceCreationImageFilterProps
-> = ({ images, selectedLabels, onSelect }) => {
+export const FilterByLabels: React.FunctionComponent<FilterByLabelsProps> = ({
+  labelledObjects,
+  selectedLabels,
+  onSelect,
+}) => {
   const filterMap = useMemo(() => {
     const labelsMap = new Map<string, Set<string>>();
-    images.forEach((image) => {
-      Object.keys(image.labels).forEach((labelKey) => {
-        const labelValue = image.labels[labelKey];
+    labelledObjects.forEach((labelledObject) => {
+      Object.keys(labelledObject).forEach((labelKey) => {
+        const labelValue = labelledObject[labelKey];
         if (!labelsMap.has(labelKey)) {
           labelsMap.set(labelKey, new Set<string>());
         }
@@ -28,7 +29,7 @@ export const WorkspaceCreationImageFilter: React.FunctionComponent<
       });
     });
     return labelsMap;
-  }, [images]);
+  }, [labelledObjects]);
 
   const isChecked = useCallback(
     (label, labelValue) => selectedLabels.get(label)?.has(labelValue),

workspaces/frontend/src/shared/types.ts

@@ -9,9 +9,7 @@ export interface WorkspaceLogo {
 export interface WorkspaceImage {
   id: string;
   displayName: string;
-  labels: {
-    pythonVersion: string;
-  };
+  labels: unknown;
   hidden: boolean;
   redirect?: {
     to: string;
@@ -26,10 +24,7 @@ export interface WorkspacePodConfig {
   id: string;
   displayName: string;
   description: string;
-  labels: {
-    cpu: string;
-    memory: string;
-  };
+  labels: unknown;
   redirect?: {
     to: string;
     message: {