From 9e97d43ce0e41cdb57a730dd5abef5a4e6e690c3 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Tue, 13 Aug 2024 06:34:01 -0400
Subject: [PATCH] [RHOAIENG-10318] Add connection type field modal

---
 .../src/concepts/connectionTypes/types.ts     |  12 +-
 .../fields/ConnectionTypeDataFieldModal.tsx   | 277 ++++++++++++++++++
 .../pages/connectionTypes/fields/TextForm.tsx |  37 +++
 .../AddConnectionTypeFieldModal.spec.tsx      |  93 ++++++
 .../manage/ConnectionTypeFieldModal.tsx       |  12 +-
 .../ManageConnectionTypeFieldsTable.tsx       |   3 +-
 .../ManageConnectionTypeFieldsTableRow.tsx    |   2 +-
 7 files changed, 420 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/pages/connectionTypes/fields/ConnectionTypeDataFieldModal.tsx
 create mode 100644 frontend/src/pages/connectionTypes/fields/TextForm.tsx
 create mode 100644 frontend/src/pages/connectionTypes/fields/__tests__/AddConnectionTypeFieldModal.spec.tsx

diff --git a/frontend/src/concepts/connectionTypes/types.ts b/frontend/src/concepts/connectionTypes/types.ts
index b6cc883877..853cb48d8f 100644
--- a/frontend/src/concepts/connectionTypes/types.ts
+++ b/frontend/src/concepts/connectionTypes/types.ts
@@ -31,15 +31,17 @@ type Field<T extends ConnectionTypeFieldType | string> = {
   description?: string;
 };
 
+export type ConnectionTypeCommonProperties<V = string> = {
+  defaultValue?: V;
+  defaultReadOnly?: boolean;
+};
+
 // P default to an empty set of properties
 // eslint-disable-next-line @typescript-eslint/ban-types
-type DataField<T extends ConnectionTypeFieldType | string, V = string, P = {}> = Field<T> & {
+export type DataField<T extends ConnectionTypeFieldType | string, V = string, P = {}> = Field<T> & {
   envVar: string;
   required?: boolean;
-  properties: P & {
-    defaultValue?: V;
-    defaultReadOnly?: boolean;
-  };
+  properties: P & ConnectionTypeCommonProperties<V>;
 };
 
 export type SectionField = Field<ConnectionTypeFieldType.Section | 'section'>;
diff --git a/frontend/src/pages/connectionTypes/fields/ConnectionTypeDataFieldModal.tsx b/frontend/src/pages/connectionTypes/fields/ConnectionTypeDataFieldModal.tsx
new file mode 100644
index 0000000000..441dfb34bb
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/fields/ConnectionTypeDataFieldModal.tsx
@@ -0,0 +1,277 @@
+import * as React from 'react';
+import {
+  Checkbox,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  MenuToggle,
+  Modal,
+  Popover,
+  Select,
+  SelectList,
+  SelectOption,
+  TextArea,
+  TextInput,
+  ValidatedOptions,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
+import {
+  ConnectionTypeCommonProperties,
+  ConnectionTypeDataField,
+  ConnectionTypeFieldType,
+} from '~/concepts/connectionTypes/types';
+import { TextForm } from '~/pages/connectionTypes/fields/TextForm';
+import { isEnumMember } from '~/utilities/utils';
+import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
+
+const ENV_VAR_NAME_REGEX = new RegExp('^[-._a-zA-Z][-._a-zA-Z0-9]*$');
+
+const isConnectionTypeFieldType = (
+  fieldType: string | number | undefined,
+): fieldType is ConnectionTypeFieldType =>
+  isEnumMember(fieldType?.toString(), ConnectionTypeFieldType);
+
+interface ConnectionTypeFieldModalProps {
+  field?: ConnectionTypeDataField;
+  isOpen?: boolean;
+  onClose: () => void;
+  onSubmit: (field: ConnectionTypeDataField) => void;
+  isEdit?: boolean;
+}
+
+const fieldTypeLabels: { [key: string]: string } = {
+  [ConnectionTypeFieldType.Boolean]: 'Boolean',
+  [ConnectionTypeFieldType.Dropdown]: 'Short text',
+  [ConnectionTypeFieldType.File]: 'File',
+  [ConnectionTypeFieldType.Hidden]: 'Hidden',
+  [ConnectionTypeFieldType.Numeric]: 'Numeric',
+  [ConnectionTypeFieldType.ShortText]: 'Short text',
+  [ConnectionTypeFieldType.Text]: 'Text',
+  [ConnectionTypeFieldType.URI]: 'URI',
+};
+
+const validateForType = (value: string, fieldType: ConnectionTypeFieldType): ValidatedOptions => {
+  switch (fieldType) {
+    default:
+      return ValidatedOptions.default;
+  }
+};
+
+export const ConnectionTypeDataFieldModal: React.FC<ConnectionTypeFieldModalProps> = ({
+  field,
+  isOpen,
+  onClose,
+  onSubmit,
+  isEdit,
+}) => {
+  const [name, setName] = React.useState<string>(field?.name || '');
+  const [description, setDescription] = React.useState<string | undefined>(field?.description);
+  const [envVar, setEnvVar] = React.useState<string>(field?.envVar || '');
+  const [fieldType, setFieldType] = React.useState<ConnectionTypeFieldType>(
+    ConnectionTypeFieldType.ShortText,
+  );
+  const [required, setRequired] = React.useState<boolean | undefined>(field?.required);
+  const [isTypeSelectOpen, setIsTypeSelectOpen] = React.useState<boolean>(false);
+  const [textProperties, setTextProperties] = React.useState<ConnectionTypeCommonProperties>(
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
+    (field?.properties as any) || {},
+  );
+
+  const envVarValidation =
+    !envVar || ENV_VAR_NAME_REGEX.test(envVar) ? ValidatedOptions.default : ValidatedOptions.error;
+  const valid = React.useMemo(
+    () => !!name && !!envVar && envVarValidation === ValidatedOptions.default,
+    [envVar, envVarValidation, name],
+  );
+
+  const handleSubmit = () => {
+    switch (fieldType) {
+      case ConnectionTypeFieldType.Hidden:
+      case ConnectionTypeFieldType.File:
+      case ConnectionTypeFieldType.ShortText:
+      case ConnectionTypeFieldType.Text:
+      case ConnectionTypeFieldType.URI:
+        onSubmit({
+          name,
+          description,
+          envVar,
+          type: fieldType,
+          properties: {
+            defaultValue: textProperties.defaultValue,
+            defaultReadOnly: textProperties.defaultValue
+              ? textProperties.defaultReadOnly
+              : undefined,
+          },
+          required,
+        });
+    }
+    onClose();
+  };
+
+  const fieldTypeForm = React.useMemo(() => {
+    switch (fieldType) {
+      case ConnectionTypeFieldType.Hidden:
+      case ConnectionTypeFieldType.File:
+      case ConnectionTypeFieldType.ShortText:
+      case ConnectionTypeFieldType.Text:
+        return (
+          <TextForm
+            properties={textProperties}
+            onChange={(updatedProperties) => setTextProperties(updatedProperties)}
+            validate={(value) => validateForType(value, fieldType)}
+          />
+        );
+    }
+    return null;
+  }, [fieldType, textProperties]);
+
+  return (
+    <Modal
+      isOpen
+      variant="medium"
+      title={isEdit ? 'Edit field' : 'Add field'}
+      onClose={onClose}
+      footer={
+        <DashboardModalFooter
+          onCancel={onClose}
+          onSubmit={handleSubmit}
+          submitLabel={isEdit ? 'Edit' : 'Add'}
+          isSubmitDisabled={!valid}
+          alertTitle="Error"
+        />
+      }
+      data-testid="archive-model-version-modal"
+    >
+      <Form>
+        <FormGroup fieldId="name" label="Field name" isRequired>
+          <TextInput
+            id="name"
+            value={name}
+            onChange={(_ev, value) => setName(value)}
+            data-testid="field-name-input"
+          />
+        </FormGroup>
+        <FormGroup
+          fieldId="description"
+          label="Field description"
+          labelIcon={
+            <Popover
+              aria-label="field description help"
+              headerContent="Field description"
+              bodyContent="Use the field description to provide users in your organization with additional information about a field, or instructions for completing the field. Your input will appear in a popover, like this one."
+            >
+              <DashboardPopupIconButton
+                icon={<OutlinedQuestionCircleIcon />}
+                aria-label="More info for section heading"
+              />
+            </Popover>
+          }
+        >
+          <TextArea
+            id="description"
+            data-testid="field-description-input"
+            value={description}
+            onChange={(_ev, value) => setDescription(value)}
+          />
+        </FormGroup>
+        <FormGroup
+          fieldId="envVar"
+          label="Environment variable"
+          labelIcon={
+            <Popover
+              aria-label="environment variable help"
+              headerContent="Environment variable"
+              bodyContent="Environment variables grant you access to the value provided when attaching the connection to your workbench."
+            >
+              <DashboardPopupIconButton
+                icon={<OutlinedQuestionCircleIcon />}
+                aria-label="More info for section heading"
+              />
+            </Popover>
+          }
+          isRequired
+        >
+          <TextInput
+            id="envVar"
+            value={envVar}
+            onChange={(_ev, value) => setEnvVar(value)}
+            data-testid="field-env-var-input"
+            validated={envVarValidation}
+          />
+          {envVarValidation === ValidatedOptions.error ? (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                  {`Invalid variable name. The name must consist of alphabetic characters, digits, '_', '-', or '.', and must not start with a digit.`}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          ) : null}
+        </FormGroup>
+        <FormGroup
+          fieldId="fieldType"
+          label="Field type"
+          isRequired
+          data-testid="field-type-select"
+        >
+          <Select
+            id="fieldType"
+            isOpen={isTypeSelectOpen}
+            shouldFocusToggleOnSelect
+            selected={fieldType}
+            onSelect={(_e, selection) => {
+              if (isConnectionTypeFieldType(selection)) {
+                setFieldType(selection);
+                setIsTypeSelectOpen(false);
+              }
+            }}
+            onOpenChange={(open) => setIsTypeSelectOpen(open)}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                id="type-select"
+                isFullWidth
+                onClick={() => {
+                  setIsTypeSelectOpen((open) => !open);
+                }}
+                isExpanded={isOpen}
+              >
+                {fieldTypeLabels[fieldType]}
+              </MenuToggle>
+            )}
+          >
+            <SelectList>
+              <SelectOption
+                value={ConnectionTypeFieldType.ShortText}
+                data-testid="field-short-text-select"
+              >
+                {fieldTypeLabels[ConnectionTypeFieldType.ShortText]}
+              </SelectOption>
+              <SelectOption
+                value={ConnectionTypeFieldType.Hidden}
+                data-testid="field-hidden-select"
+              >
+                {fieldTypeLabels[ConnectionTypeFieldType.Hidden]}
+              </SelectOption>
+            </SelectList>
+          </Select>
+        </FormGroup>
+        {fieldTypeForm}
+        <FormGroup fieldId="isRequired">
+          <Checkbox
+            id="isRequired"
+            data-testid="field-required-checkbox"
+            label="Field is required"
+            isChecked={required || false}
+            onChange={(_ev, checked) => {
+              setRequired(checked);
+            }}
+          />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/fields/TextForm.tsx b/frontend/src/pages/connectionTypes/fields/TextForm.tsx
new file mode 100644
index 0000000000..778458ced7
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/fields/TextForm.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Checkbox, FormGroup, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { ConnectionTypeCommonProperties } from '~/concepts/connectionTypes/types';
+
+type TextFormProps = {
+  properties: ConnectionTypeCommonProperties;
+  onChange: (newProperties: ConnectionTypeCommonProperties) => void;
+  validate: (value: string) => ValidatedOptions;
+};
+
+export const TextForm: React.FC<TextFormProps> = ({ properties, onChange, validate }) => (
+  <>
+    <FormGroup fieldId="defaultValue" label="Default value">
+      <TextInput
+        id="defaultValue"
+        value={properties.defaultValue || ''}
+        onChange={(_ev, value) =>
+          onChange({ defaultValue: value, defaultReadOnly: properties.defaultReadOnly })
+        }
+        validated={
+          properties.defaultValue ? validate(properties.defaultValue) : ValidatedOptions.default
+        }
+        data-testid="field-default-value-input"
+      />
+      <Checkbox
+        id="defaultReadOnly"
+        label="Default value is read-only"
+        isDisabled={!properties.defaultValue}
+        isChecked={(properties.defaultValue && properties.defaultReadOnly) || false}
+        onChange={(_ev, checked) =>
+          onChange({ defaultValue: properties.defaultValue, defaultReadOnly: checked })
+        }
+        data-testid="field-default-value-readonly-checkbox"
+      />
+    </FormGroup>
+  </>
+);
diff --git a/frontend/src/pages/connectionTypes/fields/__tests__/AddConnectionTypeFieldModal.spec.tsx b/frontend/src/pages/connectionTypes/fields/__tests__/AddConnectionTypeFieldModal.spec.tsx
new file mode 100644
index 0000000000..5c90cc0ba4
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/fields/__tests__/AddConnectionTypeFieldModal.spec.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { ConnectionTypeDataFieldModal } from '~/pages/connectionTypes/fields/ConnectionTypeDataFieldModal';
+
+describe('ConnectionTypeDataFieldModal', () => {
+  it('should render the modal', () => {
+    const onClose = jest.fn();
+    const onSubmit = jest.fn();
+
+    render(<ConnectionTypeDataFieldModal onClose={onClose} onSubmit={onSubmit} />);
+
+    const addButton = screen.getByTestId('modal-submit-button');
+    expect(addButton).toBeDisabled();
+    screen.getByTestId('modal-cancel-button').click();
+    expect(onClose).toHaveBeenCalled();
+  });
+  it('should add a short text field', () => {
+    const onCancel = jest.fn();
+    const onSubmit = jest.fn();
+
+    render(<ConnectionTypeDataFieldModal onClose={onCancel} onSubmit={onSubmit} />);
+    const fieldNameInput = screen.getByTestId('field-name-input');
+    const fieldDescriptionInput = screen.getByTestId('field-description-input');
+    const fieldEnvVarInput = screen.getByTestId('field-env-var-input');
+    const fieldDefaultValueInput = screen.getByTestId('field-default-value-input');
+
+    act(() => {
+      fireEvent.change(fieldNameInput, { target: { value: 'new-field' } });
+      fireEvent.change(fieldDescriptionInput, { target: { value: 'test description' } });
+      fireEvent.change(fieldEnvVarInput, { target: { value: 'TEST_ENV_VAR' } });
+      fireEvent.change(fieldDefaultValueInput, { target: { value: 'default value' } });
+    });
+
+    screen.getByTestId('modal-submit-button').click();
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      description: 'test description',
+      envVar: 'TEST_ENV_VAR',
+      name: 'new-field',
+      properties: {
+        defaultReadOnly: undefined,
+        defaultValue: 'default value',
+      },
+      required: undefined,
+      type: 'short-text',
+    });
+  });
+  it('should add a hidden text field', () => {
+    const onClose = jest.fn();
+    const onSubmit = jest.fn();
+
+    render(<ConnectionTypeDataFieldModal onClose={onClose} onSubmit={onSubmit} />);
+    const fieldNameInput = screen.getByTestId('field-name-input');
+    const fieldDescriptionInput = screen.getByTestId('field-description-input');
+    const fieldEnvVarInput = screen.getByTestId('field-env-var-input');
+    const typeSelectGroup = screen.getByTestId('field-type-select');
+    const typeSelectToggle = within(typeSelectGroup).getByRole('button');
+
+    act(() => {
+      fireEvent.change(fieldNameInput, { target: { value: 'new-field' } });
+      fireEvent.change(fieldDescriptionInput, { target: { value: 'test description' } });
+      fireEvent.change(fieldEnvVarInput, { target: { value: 'TEST_ENV_VAR' } });
+      typeSelectToggle.click();
+    });
+
+    const hiddenSelect = within(screen.getByTestId('field-hidden-select')).getByRole('option');
+
+    act(() => {
+      hiddenSelect.click();
+    });
+
+    const fieldDefaultValueInput = screen.getByTestId('field-default-value-input');
+    act(() => {
+      fireEvent.change(fieldDefaultValueInput, { target: { value: 'default value' } });
+    });
+
+    screen.getByTestId('modal-submit-button').click();
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      description: 'test description',
+      envVar: 'TEST_ENV_VAR',
+      name: 'new-field',
+      properties: {
+        defaultReadOnly: undefined,
+        defaultValue: 'default value',
+      },
+      required: undefined,
+      type: 'hidden',
+    });
+  });
+});
diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx
index 72ef3b947a..5c3cb7b034 100644
--- a/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx
@@ -1,16 +1,13 @@
 import * as React from 'react';
-import {
-  ConnectionTypeField,
-  ConnectionTypeFieldType,
-  SectionField,
-} from '~/concepts/connectionTypes/types';
+import { ConnectionTypeField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
+import { ConnectionTypeDataFieldModal } from '~/pages/connectionTypes/fields/ConnectionTypeDataFieldModal';
 import ConnectionTypeSectionModal from './ConnectionTypeSectionModal';
 
 type Props = {
   field?: ConnectionTypeField;
   isOpen?: boolean;
   onClose: () => void;
-  onSubmit: (field: SectionField) => void;
+  onSubmit: (field: ConnectionTypeField) => void;
   isEdit?: boolean;
 };
 
@@ -18,8 +15,7 @@ const ConnectionTypeFieldModal: React.FC<Props> = (props) => {
   if (props.field?.type === ConnectionTypeFieldType.Section) {
     return <ConnectionTypeSectionModal {...props} field={props.field} />;
   }
-  // TODO open data field modal
-  return null;
+  return <ConnectionTypeDataFieldModal {...props} field={props.field} />;
 };
 
 export default ConnectionTypeFieldModal;
diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx
index 8347464e16..f77889d3e3 100644
--- a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx
@@ -96,8 +96,7 @@ const ManageConnectionTypeFieldsTable: React.FC<Props> = ({ fields, onFieldsChan
                   }}
                   onAddField={() => {
                     const nextSectionIndex = fields.findIndex(
-                      (f) => f.type === ConnectionTypeFieldType.Section,
-                      index + 1,
+                      (f, i) => i > index && f.type === ConnectionTypeFieldType.Section,
                     );
                     if (nextSectionIndex >= 0) {
                       setModalField({ index: nextSectionIndex });
diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
index ddcf53f1e1..7f4962bc5e 100644
--- a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
@@ -86,7 +86,7 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
       <Td dataLabel={columns[4]}>
         <Switch
           aria-label="toggle field required"
-          isChecked={row.required}
+          isChecked={row.required || false}
           data-testid="field-required"
           onChange={() => onChange({ ...row, required: !row.required })}
         />