Add provision to recipe parameters while enrolling applicaiton

https://issues.redhat.com/browse/DFBUGS-857

Signed-off-by: Timothy Asir Jeyasingh <[email protected]>

Author: TimothyAsirJeyasing

locales/en/plugin__odf-console.json

@@ -103,6 +103,10 @@
   "Select a recipe": "Select a recipe",
   "No recipe found": "No recipe found",
   "Required": "Required",
+  "Recipe parameters": "Recipe parameters",
+  "Set of rules and configurations that govern how data is selected, stored, and restored.": "Set of rules and configurations that govern how data is selected, stored, and restored.",
+  "Add parameter": "Add parameter",
+  "Value (optional)": "Value (optional)",
   "Label expressions": "Label expressions",
   "Protect all your Kubernetes objects matching the selected resource label value.": "Protect all your Kubernetes objects matching the selected resource label value.",
   "PVC label selectors": "PVC label selectors",
@@ -147,6 +151,8 @@
   "Type:": "Type:",
   "Recipe name:": "Recipe name:",
   "Recipe namespace:": "Recipe namespace:",
+  "Recipe Parameters:": "Recipe Parameters:",
+  "None": "None",
   "Label expressions:": "Label expressions:",
   "PVC label selectors:": "PVC label selectors:",
   "Replication": "Replication",
@@ -1304,7 +1310,6 @@
   "Use different criteria for tagging your bucket.": "Use different criteria for tagging your bucket.",
   "No tags are attached to this bucket.": "No tags are attached to this bucket.",
   "Add tag": "Add tag",
-  "Value (optional)": "Value (optional)",
   "Enter a valid rule name": "Enter a valid rule name",
   "A rule name is required.": "A rule name is required.",
   "A rule with this name already exists. Type a different name.": "A rule with this name already exists. Type a different name.",

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

@@ -31,10 +31,10 @@ export const getDRPCKindObj = (props: {
   k8sResourceReplicationInterval: string;
   recipeName?: string;
   recipeNamespace?: string;
+  recipeParameters?: Record<string, string[]>;
   k8sResourceLabelExpressions?: MatchExpression[];
   pvcLabelExpressions?: MatchExpression[];
   placementName: string;
-  recipeParameters?: Record<string, string[]>;
   labels?: ObjectMetadata['labels'];
 }): DRPlacementControlKind => ({
   apiVersion: getAPIVersionForModel(DRPlacementControlModel),
@@ -106,7 +106,7 @@ export const createPromise = (
   const { namespace, configuration, replication } = state;
   const { clusterName, namespaces, name } = namespace;
   const { protectionMethod, recipe, resourceLabels } = configuration;
-  const { recipeName, recipeNamespace } = recipe;
+  const { recipeName, recipeNamespace, recipeParameters } = recipe;
   const { k8sResourceLabelExpressions, pvcLabelExpressions } = resourceLabels;
   const { drPolicy, k8sResourceReplicationInterval } = replication;
   const namespaceList = namespaces.map(getName);
@@ -122,6 +122,14 @@ export const createPromise = (
     })
   );
 
+  const normalizedRecipeParameters: Record<string, string[]> =
+    Object.fromEntries(
+      Object.entries(recipeParameters || {}).map(([key, value]) => [
+        key,
+        [value],
+      ])
+    );
+
   promises.push(
     k8sCreate({
       model: DRPlacementControlModel,
@@ -132,6 +140,7 @@ export const createPromise = (
         protectionMethod,
         recipeName,
         recipeNamespace,
+        recipeParameters: normalizedRecipeParameters,
         k8sResourceLabelExpressions,
         pvcLabelExpressions,
         drPolicyName: getName(drPolicy),

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

@@ -16,6 +16,7 @@ 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_RECIPE_PARAMETERS = 'SET_RECIPE_PARAMETERS',
   SET_K8S_RESOURCE_LABEL_EXPRESSIONS = 'CONFIGURATION/RESOURCE_LABEL/SET_K8S_RESOURCE_LABEL_EXPRESSIONS',
   SET_PVC_LABEL_EXPRESSIONS = 'CONFIGURATION/RESOURCE_LABEL/SET_PVC_LABEL_EXPRESSIONS',
   SET_POLICY = 'REPLICATION/SET_POLICY',
@@ -40,6 +41,7 @@ export type EnrollDiscoveredApplicationState = {
       recipeName: string;
       // recipe CR namespace
       recipeNamespace: string;
+      recipeParameters: Record<string, string>;
     };
     resourceLabels: {
       k8sResourceLabelExpressions: MatchExpression[];
@@ -70,6 +72,7 @@ export const initialState: EnrollDiscoveredApplicationState = {
     recipe: {
       recipeName: '',
       recipeNamespace: '',
+      recipeParameters: {},
     },
     resourceLabels: {
       k8sResourceLabelExpressions: [],
@@ -112,6 +115,10 @@ export type EnrollDiscoveredApplicationAction =
       type: EnrollDiscoveredApplicationStateType.SET_POLICY;
       payload: DRPolicyKind;
     }
+  | {
+      type: EnrollDiscoveredApplicationStateType.SET_RECIPE_PARAMETERS;
+      payload: Record<string, string>;
+    }
   | {
       type: EnrollDiscoveredApplicationStateType.SET_K8S_RESOURCE_REPLICATION_INTERVAL;
       payload: string;
@@ -159,6 +166,18 @@ export const reducer: EnrollReducer = (state, action) => {
         },
       };
     }
+    case EnrollDiscoveredApplicationStateType.SET_RECIPE_PARAMETERS: {
+      return {
+        ...state,
+        configuration: {
+          ...state.configuration,
+          recipe: {
+            ...state.configuration.recipe,
+            recipeParameters: action.payload,
+          },
+        },
+      };
+    }
     case EnrollDiscoveredApplicationStateType.SET_RECIPE_NAME_NAMESPACE: {
       const [recipeName, recipeNamespace] = action.payload.split(
         NAME_NAMESPACE_SPLIT_CHAR
@@ -168,6 +187,7 @@ export const reducer: EnrollReducer = (state, action) => {
         configuration: {
           ...state.configuration,
           recipe: {
+            ...state.configuration.recipe,
             recipeName,
             recipeNamespace,
           },

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

@@ -7,6 +7,7 @@ import { StatusBox } from '@odf/shared/generic/status-box';
 import { getName } from '@odf/shared/selectors';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { getValidatedProp } from '@odf/shared/utils';
+import { LazyNameValueEditor } from '@odf/shared/utils/NameValueEditor';
 import { K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk';
 import { SelectOption } from '@patternfly/react-core/deprecated';
 import {
@@ -15,6 +16,7 @@ import {
   FormHelperText,
   HelperText,
   HelperTextItem,
+  Tooltip,
 } from '@patternfly/react-core';
 import {
   EnrollDiscoveredApplicationAction,
@@ -51,6 +53,9 @@ export const RecipeSelection: React.FC<RecipeSelectionProps> = ({
   dispatch,
 }) => {
   const { t } = useCustomTranslation();
+  const [recipeParams, setRecipeParams] = React.useState<[string, string][]>([
+    ['', ''],
+  ]);
 
   const searchQuery = React.useMemo(
     () => queryRecipesFromCluster(clusterName, namespaces.map(getName)),
@@ -81,6 +86,20 @@ export const RecipeSelection: React.FC<RecipeSelectionProps> = ({
       payload: nameNamespace,
     });
 
+  const updateRecipeParams = ({
+    nameValuePairs,
+  }: {
+    nameValuePairs: [string, string][];
+  }) => {
+    // Filter valid key-value pairs and update global state
+    setRecipeParams(nameValuePairs);
+    const validPairs = nameValuePairs.filter(([key]) => key.trim());
+    dispatch({
+      type: EnrollDiscoveredApplicationStateType.SET_RECIPE_PARAMETERS,
+      payload: Object.fromEntries(validPairs.map(([k, v]) => [k.trim(), v])),
+    });
+  };
+
   return (
     <>
       {/* todo(bipuladh): Add form validation again */}
@@ -117,6 +136,32 @@ export const RecipeSelection: React.FC<RecipeSelectionProps> = ({
       ) : (
         <StatusBox loaded={searchLoaded} loadError={searchError} />
       )}
+
+      {/* Key-Value Pair Input Fields */}
+      {recipeNameNamespace && (
+        <FormGroup
+          label={t('Recipe parameters')}
+          fieldId="recipe-parameters"
+          labelIcon={
+            <Tooltip
+              content={t(
+                'Set of rules and configurations that govern how data is selected, stored, and restored.'
+              )}
+            >
+              <span className="--pf-v5-global--icon--FontSize--sm"></span>
+            </Tooltip>
+          }
+        >
+          <LazyNameValueEditor
+            nameValuePairs={recipeParams}
+            updateParentData={updateRecipeParams}
+            addString={t('Add parameter')}
+            valueString={t('Value (optional)')}
+            nameMaxLength={128}
+            valueMaxLength={256}
+          />
+        </FormGroup>
+      )}
     </>
   );
 };

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

@@ -62,6 +62,13 @@ export const Review: React.FC<ReviewProps> = ({ state }) => {
             <ReviewAndCreationItem label={t('Recipe namespace:')}>
               {recipeNamespace}
             </ReviewAndCreationItem>
+            <ReviewAndCreationItem label={t('Recipe Parameters:')}>
+              {Object.keys(recipe.recipeParameters).length
+                ? Object.entries(recipe.recipeParameters)
+                    .map(([key, value]) => `${key}: ${value}`)
+                    .join(', ')
+                : t('None')}
+            </ReviewAndCreationItem>
           </>
         )}
         {protectionMethod === ProtectionMethodType.RESOURCE_LABEL && (