feat(integration test): add edit param modals in details

src/components/IntegrationTest/EditParamsModal.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { k8sPatchResource } from '@openshift/dynamic-plugin-sdk-utils';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonType,
+  ButtonVariant,
+  Form,
+  ModalVariant,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { Formik, FormikValues } from 'formik';
+import { IntegrationTestScenarioModel } from '../../models';
+import { IntegrationTestScenarioKind, Param } from '../../types/coreBuildService';
+import { ComponentProps, createModalLauncher } from '../modal/createModalLauncher';
+import FormikParamsField from './FormikParamsField';
+
+type EditParamsModalProps = ComponentProps & {
+  intTest: IntegrationTestScenarioKind;
+};
+
+export const EditParamsModal: React.FC<EditParamsModalProps> = ({ intTest, onClose }) => {
+  const [error, setError] = React.useState<string>();
+
+  const getFormParamValues = (params: Param[]) => {
+    if (!params || !Array.isArray(params) || params?.length === 0) {
+      return [];
+    }
+    const formParams = [];
+    params.forEach((param) => {
+      if (param.value) {
+        formParams.push({ name: param.name, values: [param.value] });
+      } else {
+        formParams.push(param);
+      }
+    });
+    return formParams;
+  };
+
+  const updateIntegrationTest = async (values: FormikValues) => {
+    try {
+      await k8sPatchResource({
+        model: IntegrationTestScenarioModel,
+        queryOptions: {
+          name: intTest.metadata.name,
+          ns: intTest.metadata.namespace,
+        },
+        patches: [{ op: 'replace', path: '/spec/params', value: values.params }],
+      });
+      onClose(null, { submitClicked: true });
+    } catch (e) {
+      setError(e.message || e.toString());
+    }
+  };
+
+  const onReset = () => {
+    onClose(null, { submitClicked: false });
+  };
+
+  const initialParams = getFormParamValues(intTest?.spec?.params);
+
+  return (
+    <Formik
+      onSubmit={updateIntegrationTest}
+      initialValues={{ params: initialParams, confirm: false }}
+      onReset={onReset}
+    >
+      {({ handleSubmit, handleReset, isSubmitting, values }) => {
+        const isChanged = values.params !== initialParams;
+        const showConfirmation = isChanged && values.strategy === 'Automatic';
+        const isValid = isChanged && (showConfirmation ? values.confirm : true);
+
+        return (
+          <Form data-test="edit-params-modal">
+            <Stack hasGutter>
+              <StackItem>
+                <FormikParamsField fieldName="params" initExpanded />
+              </StackItem>
+              <StackItem>
+                {error && (
+                  <Alert isInline variant={AlertVariant.danger} title="An error occurred">
+                    {error}
+                  </Alert>
+                )}
+                <Button
+                  type={ButtonType.submit}
+                  isLoading={isSubmitting}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                  }}
+                  isDisabled={!isValid || isSubmitting}
+                  data-testid="update-resource"
+                >
+                  Save
+                </Button>
+                <Button variant={ButtonVariant.link} onClick={handleReset}>
+                  Cancel
+                </Button>
+              </StackItem>
+            </Stack>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export const createEditParamsModal = createModalLauncher(EditParamsModal, {
+  'data-testid': `edit-its-params`,
+  variant: ModalVariant.medium,
+  title: `Edit parameters`,
+});

src/components/IntegrationTest/FormikParamsField.tsx

@@ -182,7 +182,7 @@ const IntegrationTestParams: React.FC<IntegrationTestParamsProps> = ({
                                                     <InputField
                                                       key={`value${i}${j}`}
                                                       name={`${fieldName}[${i}].values[${j}]`}
-                                                      data-test={`param-${i}-value=${j}`}
+                                                      data-test={`param-${i}-value-${j}`}
                                                     />
                                                     <Button
                                                       className="pf-v5-u-ml-md"

src/components/IntegrationTest/IntegrationTestsListView/__data__/mock-integration-tests.ts

@@ -199,3 +199,118 @@ export const MockIntegrationTestsWithGit: IntegrationTestScenarioKind[] = [
     },
   },
 ];
+
+export const MockIntegrationTestsWithParams: IntegrationTestScenarioKind[] = [
+  {
+    apiVersion: 'appstudio.redhat.com/v1beta1',
+    kind: 'IntegrationTestScenario',
+    metadata: {
+      creationTimestamp: '2023-04-26T11:16:32Z',
+      generation: 1,
+      managedFields: [],
+      name: 'example-git',
+      namespace: 'default',
+      resourceVersion: '1031539',
+      uid: '19b590b6-c583-4651-8342-a60d98a1bcb1',
+    },
+    spec: {
+      params: [
+        { name: 'colors', values: ['red', 'green'] },
+        { name: 'fruits', values: ['apple', 'mango', 'banana'] },
+        { name: 'animal', value: 'tiger' },
+      ],
+      application: 'example-app',
+      resolverRef: {
+        params: [
+          {
+            name: 'url',
+            value: 'https://github.com/redhat-appstudio/integration-examples.git',
+          },
+          {
+            name: 'revision',
+            value: 'main',
+          },
+          {
+            name: 'pathInRepo',
+            value: 'pipelines/integration_pipeline_pass.yaml',
+          },
+        ],
+        resolver: ResolverType.GIT,
+      },
+    },
+    status: {
+      conditions: [
+        {
+          lastTransitionTime: '2023-04-26T11:16:32Z',
+          message: 'Failed to get application for scenario.',
+          reason: 'Invalid',
+          status: 'False',
+          type: 'IntegrationTestScenarioValid',
+        },
+      ],
+    },
+  },
+  {
+    apiVersion: 'appstudio.redhat.com/v1alpha1',
+    kind: 'IntegrationTestScenario',
+    metadata: {
+      annotations: {
+        'app.kubernetes.io/display-name': 'Test 2',
+      },
+      name: 'test-app-test-2',
+      namespace: 'test-namespace',
+      uid: 'ed722704-74bc-4152-b27b-bee29cc7bfd3',
+    },
+    spec: {
+      params: [
+        { name: 'colors', values: ['red', 'green', 'orange'] },
+        { name: 'animal', value: 'tiger' },
+      ],
+      application: 'test-app',
+      resolverRef: {
+        resolver: ResolverType.GIT,
+        params: [
+          { name: 'url', value: 'test-url2' },
+          { name: 'revision', value: 'main2' },
+          { name: 'pathInRepo', value: 'test-path2' },
+        ],
+      },
+      contexts: [
+        {
+          description: 'Application testing 2',
+          name: 'application',
+        },
+      ],
+    },
+  },
+  {
+    apiVersion: 'appstudio.redhat.com/v1alpha1',
+    kind: 'IntegrationTestScenario',
+    metadata: {
+      annotations: {
+        'app.kubernetes.io/display-name': 'Test 2',
+      },
+      name: 'test-app-test-3',
+      namespace: 'test-namespace',
+      uid: 'ed722704-74bc-4152-b27b-bee29cc7bfd3',
+    },
+    spec: {
+      params: [{ name: 'colors', values: ['red', 'green', 'orange'] }],
+      application: 'test-app',
+      resolverRef: {
+        resolver: ResolverType.GIT,
+        params: [
+          { name: 'url', value: 'test-url2' },
+          { name: 'revision', value: 'main2' },
+          { name: 'pathInRepo', value: 'test-path2' },
+        ],
+      },
+      contexts: [
+        {
+          description: 'Application testing 2',
+          name: 'application',
+        },
+      ],
+    },
+  },
+];