Resource label selection view under configuration wizard step

Signed-off-by: Gowtham Shanmugasundaram <[email protected]>

locales/en/plugin__odf-console.json

@@ -72,6 +72,11 @@
   "Select a recipe": "Select a recipe",
   "No recipe found": "No recipe found",
   "Required": "Required",
+  "Label expressions": "Label expressions",
+  "Protect all Kubernetes resources that match the selected resource label selector": "Protect all Kubernetes resources that match the selected resource label selector",
+  "PVC label selectors": "PVC label selectors",
+  "Protect all PVCs that match the selected resource label selector": "Protect all PVCs that match the selected resource label selector",
+  "Add PVC label selector": "Add PVC label selector",
   "Name": "Name",
   "{{count}} results found for {{clusterName}}_one": "{{count}} results found for {{clusterName}}",
   "{{count}} results found for {{clusterName}}_other": "{{count}} results found for {{clusterName}}",
@@ -1221,6 +1226,21 @@
   "Delete {{resourceLabel}}": "Delete {{resourceLabel}}",
   "Resource is being deleted.": "Resource is being deleted.",
   "You do not have permission to perform this action": "You do not have permission to perform this action",
+  "Expand to fix validation errors": "Expand to fix validation errors",
+  "unknown": "unknown",
+  "equals any of": "equals any of",
+  "equals": "equals",
+  "does not equal any of": "does not equal any of",
+  "does not equal": "does not equal",
+  "exists": "exists",
+  "does not exist": "does not exist",
+  "Expand to enter expression": "Expand to enter expression",
+  "Label": "Label",
+  "Select a label": "Select a label",
+  "Operator": "Operator",
+  "Values": "Values",
+  "Select the values": "Select the values",
+  "Add label expression": "Add label expression",
   "Delete {{kind}}?": "Delete {{kind}}?",
   "Are you sure you want to delete <2>{{resourceName}}</2> in namespace <6>{{namespace}}</6>?": "Are you sure you want to delete <2>{{resourceName}}</2> in namespace <6>{{namespace}}</6>?",
   "Are you sure you want to delete <2>{{resourceName}}</2>?": "Are you sure you want to delete <2>{{resourceName}}</2>?",

packages/mco/components/discovered-application-wizard/enroll-discovered-application.scss

@@ -4,7 +4,4 @@
     &__wizard--height {
         max-height: 74vh;
     }
-    &__dropdown--width {
-        width: 27rem;
-    }
 }

packages/mco/components/discovered-application-wizard/footer.tsx

@@ -3,6 +3,7 @@ import {
   EnrollDiscoveredApplicationStepNames,
   EnrollDiscoveredApplicationSteps,
 } from '@odf/mco/constants';
+import { isLabelOnlyOperator } from '@odf/shared/label-expression-selector';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import {
   WizardContextType,
@@ -25,11 +26,25 @@ import {
 const validateNamespaceStep = (state: EnrollDiscoveredApplicationState) =>
   !!state.namespace.clusterName && !!state.namespace.namespaces.length;
 
-const validateConfigurationStep = (state: EnrollDiscoveredApplicationState) =>
-  state.configuration.protectionMethod === ProtectionMethodType.RECIPE
-    ? !!state.configuration.recipe.recipeName &&
-      !!state.configuration.recipe.recipeNamespace
-    : false;
+const validateConfigurationStep = (state: EnrollDiscoveredApplicationState) => {
+  const { recipe, resourceLabels, protectionMethod } = state.configuration;
+  const { recipeName, recipeNamespace } = recipe;
+  const { k8sResourceLabelExpressions, pvcLabelExpressions } = resourceLabels;
+  const labelExpressions = [
+    ...k8sResourceLabelExpressions,
+    ...pvcLabelExpressions,
+  ];
+  const isLabelExpressionsFound =
+    k8sResourceLabelExpressions.length && pvcLabelExpressions.length;
+  return protectionMethod === ProtectionMethodType.RECIPE
+    ? !!recipeName && !!recipeNamespace
+    : isLabelExpressionsFound &&
+        labelExpressions.every((selector) =>
+          isLabelOnlyOperator(selector.operator)
+            ? !!selector.key
+            : !!selector.key && !!selector.values.length
+        );
+};
 
 const canJumpToNextStep = (
   state: EnrollDiscoveredApplicationState,

packages/mco/components/discovered-application-wizard/utils/reducer.ts

@@ -1,4 +1,7 @@
-import { K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  K8sResourceCommon,
+  MatchExpression,
+} from '@openshift-console/dynamic-plugin-sdk';
 import * as _ from 'lodash-es';
 
 export const NAME_NAMESPACE_SPLIT_CHAR = '/';
@@ -13,6 +16,8 @@ export enum EnrollDiscoveredApplicationStateType {
   SET_NAMESPACES = 'NAMESPACE/SET_NAMESPACES',
   SET_PROTECTION_METHOD = 'CONFIGURATION/SET_PROTECTION_METHOD',
   SET_RECIPE_NAME_NAMESPACE = 'CONFIGURATION/RECIPE/SET_RECIPE_NAME_NAMESPACE',
+  SET_K8S_RESOURCE_LABEL_EXPRESSIONS = 'CONFIGURATION/RESOURCE_LABEL/SET_K8S_RESOURCE_LABEL_EXPRESSIONS',
+  SET_PVC_LABEL_EXPRESSIONS = 'CONFIGURATION/RESOURCE_LABEL/SET_PVC_LABEL_EXPRESSIONS',
 }
 
 export type EnrollDiscoveredApplicationState = {
@@ -31,6 +36,10 @@ export type EnrollDiscoveredApplicationState = {
       // recipe CR namespace
       recipeNamespace: string;
     };
+    resourceLabels: {
+      k8sResourceLabelExpressions: MatchExpression[];
+      pvcLabelExpressions: MatchExpression[];
+    };
   };
 };
 
@@ -51,6 +60,10 @@ export const initialState: EnrollDiscoveredApplicationState = {
       recipeName: '',
       recipeNamespace: '',
     },
+    resourceLabels: {
+      k8sResourceLabelExpressions: [],
+      pvcLabelExpressions: [],
+    },
   },
 };
 
@@ -71,6 +84,14 @@ export type EnrollDiscoveredApplicationAction =
   | {
       type: EnrollDiscoveredApplicationStateType.SET_RECIPE_NAME_NAMESPACE;
       payload: string;
+    }
+  | {
+      type: EnrollDiscoveredApplicationStateType.SET_K8S_RESOURCE_LABEL_EXPRESSIONS;
+      payload: MatchExpression[];
+    }
+  | {
+      type: EnrollDiscoveredApplicationStateType.SET_PVC_LABEL_EXPRESSIONS;
+      payload: MatchExpression[];
     };
 
 export const reducer: EnrollReducer = (state, action) => {
@@ -125,6 +146,30 @@ export const reducer: EnrollReducer = (state, action) => {
         },
       };
     }
+    case EnrollDiscoveredApplicationStateType.SET_K8S_RESOURCE_LABEL_EXPRESSIONS: {
+      return {
+        ...state,
+        configuration: {
+          ...state.configuration,
+          resourceLabels: {
+            ...state.configuration.resourceLabels,
+            k8sResourceLabelExpressions: action.payload,
+          },
+        },
+      };
+    }
+    case EnrollDiscoveredApplicationStateType.SET_PVC_LABEL_EXPRESSIONS: {
+      return {
+        ...state,
+        configuration: {
+          ...state.configuration,
+          resourceLabels: {
+            ...state.configuration.resourceLabels,
+            pvcLabelExpressions: action.payload,
+          },
+        },
+      };
+    }
     default:
       throw new TypeError(`${action} is not a valid reducer action`);
   }

packages/mco/components/discovered-application-wizard/wizard-steps/configuration-step/configuration-step.scss

@@ -1,6 +1,6 @@
 @import '../../enroll-discovered-application.scss';
 
-.mco-configuration {
+.mco-configuration-step {
     &__radio {
         border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
         border-radius: 10px;

packages/mco/components/discovered-application-wizard/wizard-steps/configuration-step/configuration-step.tsx

@@ -19,6 +19,7 @@ import {
   ProtectionMethodType,
 } from '../../utils/reducer';
 import { RecipeSelection } from './recipe-selection';
+import { ResourceLabelSelection } from './resource-label-selection';
 import './configuration-step.scss';
 
 const RADIO_GROUP_NAME = 'k8s_object_protection_method';
@@ -31,7 +32,7 @@ export const Configuration: React.FC<ConfigurationProps> = ({
   const { t } = useCustomTranslation();
 
   const { namespaces, clusterName } = state.namespace;
-  const { protectionMethod, recipe } = state.configuration;
+  const { protectionMethod, recipe, resourceLabels } = state.configuration;
 
   const setProtectionMethod = (_unUsed, event) => {
     dispatch({
@@ -49,7 +50,7 @@ export const Configuration: React.FC<ConfigurationProps> = ({
           )}
         </Text>
         <Alert
-          className="odf-alert pf-v5-u-mb-xs pf-u-pl-md"
+          className="odf-alert pf-v5-u-mb-xs pf-v5-u-pl-md"
           title={t(
             'You have selected {{count}} namespaces, to view or change your selection go back to the previous step.',
             { count: namespaces.length }
@@ -60,7 +61,10 @@ export const Configuration: React.FC<ConfigurationProps> = ({
         />
         <FormGroup fieldId="protection-method-selection">
           <Grid hasGutter>
-            <GridItem span={6} className="mco-configuration__radio pf-u-p-lg">
+            <GridItem
+              span={6}
+              className="mco-configuration-step__radio pf-v5-u-p-lg"
+            >
               <Radio
                 id="recipe-based-protection"
                 name={RADIO_GROUP_NAME}
@@ -73,7 +77,10 @@ export const Configuration: React.FC<ConfigurationProps> = ({
                 checked={protectionMethod === ProtectionMethodType.RECIPE}
               />
             </GridItem>
-            <GridItem span={6} className="mco-configuration__radio pf-u-p-lg">
+            <GridItem
+              span={6}
+              className="mco-configuration-step__radio pf-v5-u-p-lg"
+            >
               <Radio
                 id="label-based-protection"
                 name={RADIO_GROUP_NAME}
@@ -102,6 +109,18 @@ export const Configuration: React.FC<ConfigurationProps> = ({
             dispatch={dispatch}
           />
         )}
+        {protectionMethod === ProtectionMethodType.RESOURCE_LABEL && (
+          <ResourceLabelSelection
+            k8sResourceLabelExpressions={
+              resourceLabels.k8sResourceLabelExpressions
+            }
+            pvcLabelExpressions={resourceLabels.pvcLabelExpressions}
+            clusterName={clusterName}
+            namespaces={namespaces}
+            isValidationEnabled={isValidationEnabled}
+            dispatch={dispatch}
+          />
+        )}
       </FormSection>
     </Form>
   );

packages/mco/components/discovered-application-wizard/wizard-steps/configuration-step/recipe-selection.tsx

@@ -102,7 +102,7 @@ export const RecipeSelection: React.FC<RecipeSelectionProps> = ({
             )}
           </Text>
           <SingleSelectDropdown
-            className="pf-v5-u-w-50 pf-u-mt-sm"
+            className="pf-v5-u-w-50 pf-v5-u-mt-sm"
             id="recipe-selection-dropdown"
             placeholderText={t('Select a recipe')}
             selectedKey={recipeNameNamespace}