From 93223f0ae1987e972c5fdf3e48c66a8e6d6e6636 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 +-
 .../dashboard/DashboardModalFooter.tsx        |   8 +-
 .../AddConnectionTypeFieldModal.tsx           | 261 ++++++++++++++++++
 .../connectionTypeFields/TextForm.tsx         |  37 +++
 .../AddConnectionTypeFieldModal.spec.tsx      |  93 +++++++
 .../CreateConnectionTypeFieldsTable.tsx       |  48 +++-
 .../create/CreateConnectionTypePage.tsx       |  22 +-
 7 files changed, 458 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/pages/connectionTypes/connectionTypeFields/AddConnectionTypeFieldModal.tsx
 create mode 100644 frontend/src/pages/connectionTypes/connectionTypeFields/TextForm.tsx
 create mode 100644 frontend/src/pages/connectionTypes/connectionTypeFields/__tests__/AddConnectionTypeFieldModal.spec.tsx

diff --git a/frontend/src/concepts/connectionTypes/types.ts b/frontend/src/concepts/connectionTypes/types.ts
index 4552db052e..28082af273 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/concepts/dashboard/DashboardModalFooter.tsx b/frontend/src/concepts/dashboard/DashboardModalFooter.tsx
index f11b2f1265..4b8d994471 100644
--- a/frontend/src/concepts/dashboard/DashboardModalFooter.tsx
+++ b/frontend/src/concepts/dashboard/DashboardModalFooter.tsx
@@ -56,7 +56,13 @@ const DashboardModalFooter: React.FC<DashboardModalFooterProps> = ({
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button key="cancel" variant="link" isDisabled={isCancelDisabled} onClick={onCancel}>
+          <Button
+            key="cancel"
+            variant="link"
+            isDisabled={isCancelDisabled}
+            onClick={onCancel}
+            data-testid="modal-cancel-button"
+          >
             Cancel
           </Button>
         </ActionListItem>
diff --git a/frontend/src/pages/connectionTypes/connectionTypeFields/AddConnectionTypeFieldModal.tsx b/frontend/src/pages/connectionTypes/connectionTypeFields/AddConnectionTypeFieldModal.tsx
new file mode 100644
index 0000000000..76c058695a
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/connectionTypeFields/AddConnectionTypeFieldModal.tsx
@@ -0,0 +1,261 @@
+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 { HelpIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
+import {
+  ConnectionTypeCommonProperties,
+  ConnectionTypeDataField,
+  ConnectionTypeFieldType,
+} from '~/concepts/connectionTypes/types';
+import { TextForm } from '~/pages/connectionTypes/connectionTypeFields/TextForm';
+import { isEnumMember } from '~/utilities/utils';
+
+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 AddConnectionTypeFieldModalProps {
+  onCancel: () => void;
+  onSubmit: (newField: ConnectionTypeDataField) => void;
+  // existingFields?: ConnectionTypeField[];
+}
+
+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 AddConnectionTypeFieldModal: React.FC<AddConnectionTypeFieldModalProps> = ({
+  onCancel,
+  onSubmit,
+}) => {
+  const [name, setName] = React.useState<string>('');
+  const [description, setDescription] = React.useState<string>();
+  const [envVar, setEnvVar] = React.useState<string>('');
+  const [fieldType, setFieldType] = React.useState<ConnectionTypeFieldType>(
+    ConnectionTypeFieldType.ShortText,
+  );
+  const [required, setRequired] = React.useState<boolean>();
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [textProperties, setTextProperties] = React.useState<ConnectionTypeCommonProperties>({});
+
+  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 onAdd = () => {
+    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,
+        });
+    }
+  };
+
+  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="Add field"
+      onClose={onCancel}
+      footer={
+        <DashboardModalFooter
+          onCancel={onCancel}
+          onSubmit={onAdd}
+          submitLabel="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."
+            >
+              <HelpIcon style={{ color: 'var(--pf-v5-global--icon--Color--light)' }} />
+            </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."
+            >
+              <HelpIcon style={{ color: 'var(--pf-v5-global--icon--Color--light)' }} />
+            </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={isOpen}
+            shouldFocusToggleOnSelect
+            selected={fieldType}
+            onSelect={(_e, selection) => {
+              if (isConnectionTypeFieldType(selection)) {
+                setFieldType(selection);
+                setIsOpen(false);
+              }
+            }}
+            onOpenChange={(open) => setIsOpen(open)}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                id="type-select"
+                isFullWidth
+                onClick={() => {
+                  setIsOpen((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/connectionTypeFields/TextForm.tsx b/frontend/src/pages/connectionTypes/connectionTypeFields/TextForm.tsx
new file mode 100644
index 0000000000..778458ced7
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/connectionTypeFields/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/connectionTypeFields/__tests__/AddConnectionTypeFieldModal.spec.tsx b/frontend/src/pages/connectionTypes/connectionTypeFields/__tests__/AddConnectionTypeFieldModal.spec.tsx
new file mode 100644
index 0000000000..a458d4aa64
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/connectionTypeFields/__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 { AddConnectionTypeFieldModal } from '~/pages/connectionTypes/connectionTypeFields/AddConnectionTypeFieldModal';
+
+describe('AddConnectionTypeFieldModal', () => {
+  it('should render the modal', () => {
+    const onCancel = jest.fn();
+    const onSubmit = jest.fn();
+
+    render(<AddConnectionTypeFieldModal onCancel={onCancel} onSubmit={onSubmit} />);
+
+    const addButton = screen.getByTestId('modal-submit-button');
+    expect(addButton).toBeDisabled();
+    screen.getByTestId('modal-cancel-button').click();
+    expect(onCancel).toHaveBeenCalled();
+  });
+  it('should add a short text field', () => {
+    const onCancel = jest.fn();
+    const onSubmit = jest.fn();
+
+    render(<AddConnectionTypeFieldModal onCancel={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 onCancel = jest.fn();
+    const onSubmit = jest.fn();
+
+    render(<AddConnectionTypeFieldModal onCancel={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 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/create/CreateConnectionTypeFieldsTable.tsx b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTable.tsx
index f611a329e5..10564b02ea 100644
--- a/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTable.tsx
+++ b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTable.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import {
   Bullseye,
+  Button,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
+  EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
@@ -12,7 +15,7 @@ import { Table, Thead, Tbody, Tr, Th } from '@patternfly/react-table';
 import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
 import { CreateConnectionTypeFieldsTableRow } from './CreateConnectionTypeFieldsTableRow';
 
-const EmptyFieldsTable: React.FC = () => (
+const EmptyFieldsTable: React.FC<{ onAddField: () => void }> = ({ onAddField }) => (
   <Bullseye>
     <EmptyState variant={EmptyStateVariant.sm}>
       <EmptyStateHeader icon={<EmptyStateIcon icon={PlusCircleIcon} />} titleText="No fields" />
@@ -20,16 +23,26 @@ const EmptyFieldsTable: React.FC = () => (
         Add fields to prompt users to input information, and optionally assign default values to
         those fields. Connection name and description fields are included by default.
       </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="secondary">Add section heading</Button>
+          <Button variant="secondary" onClick={onAddField}>
+            Add field
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   </Bullseye>
 );
 
 type CreateConnectionTypeFieldsTableProps = {
   fields: ConnectionTypeField[];
+  onAddField: () => void;
 };
 
 export const CreateConnectionTypeFieldsTable: React.FC<CreateConnectionTypeFieldsTableProps> = ({
   fields,
+  onAddField,
 }) => {
   const columns = [
     'Section heading/field name',
@@ -43,22 +56,27 @@ export const CreateConnectionTypeFieldsTable: React.FC<CreateConnectionTypeField
   return (
     <>
       {fields.length > 0 ? (
-        <Table data-testid="connection-type-fields-table">
-          <Thead>
-            <Tr>
-              {columns.map((column, columnIndex) => (
-                <Th key={columnIndex}>{column}</Th>
+        <>
+          <Table data-testid="connection-type-fields-table">
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => (
+                  <Th key={columnIndex}>{column}</Th>
+                ))}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {fields.map((row, index) => (
+                <CreateConnectionTypeFieldsTableRow key={index} row={row} columns={columns} />
               ))}
-            </Tr>
-          </Thead>
-          <Tbody>
-            {fields.map((row, index) => (
-              <CreateConnectionTypeFieldsTableRow key={index} row={row} columns={columns} />
-            ))}
-          </Tbody>
-        </Table>
+            </Tbody>
+          </Table>
+          <Button className="pf-v5-u-mt-md" variant="secondary" onClick={onAddField}>
+            Add field
+          </Button>
+        </>
       ) : (
-        <EmptyFieldsTable />
+        <EmptyFieldsTable onAddField={onAddField} />
       )}
     </>
   );
diff --git a/frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx
index fded907cd9..2a88378014 100644
--- a/frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx
+++ b/frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx
@@ -21,6 +21,7 @@ import {
 import { translateDisplayNameForK8s } from '~/concepts/k8s/utils';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { NameDescType } from '~/pages/projects/types';
+import { AddConnectionTypeFieldModal } from '~/pages/connectionTypes/connectionTypeFields/AddConnectionTypeFieldModal';
 import { CreateConnectionTypeFooter } from './CreateConnectionTypeFooter';
 import { CreateConnectionTypeFieldsTable } from './CreateConnectionTypeFieldsTable';
 import { CreateConnectionTypeBreadcrumbs } from './CreateConnectionTypeBreadcrumbs';
@@ -32,6 +33,7 @@ type CreateConnectionTypePageProps = {
 export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> = ({ prefill }) => {
   const navigate = useNavigate();
   const { username } = useUser();
+  const [showAdd, setShowAdd] = React.useState<boolean>(false);
 
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
 
@@ -49,7 +51,8 @@ export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> =
     description: prefillDescription,
   });
   const [connectionEnabled, setConnectionEnabled] = React.useState<boolean>(prefillEnabled);
-  const [connectionFields] = React.useState<ConnectionTypeField[]>(prefillFields);
+  const [connectionFields, setConnectionFields] =
+    React.useState<ConnectionTypeField[]>(prefillFields);
 
   const previewConnectionTypeObj = React.useMemo(
     () =>
@@ -72,6 +75,9 @@ export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> =
     return Boolean(trimmedName);
   }, [connectionNameDesc.name]);
 
+  const onAddField = (newField: ConnectionTypeField) =>
+    setConnectionFields((prev) => [...prev, newField]);
+
   const onSave = async () => {
     if (isValid) {
       setIsCreateLoading(true);
@@ -143,7 +149,10 @@ export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> =
               Add fields to prompt users to input information, and optionally assign default values
               to those fields.
               <FormGroup>
-                <CreateConnectionTypeFieldsTable fields={connectionFields} />
+                <CreateConnectionTypeFieldsTable
+                  fields={connectionFields}
+                  onAddField={() => setShowAdd(true)}
+                />
               </FormGroup>
             </FormSection>
           </Form>
@@ -156,6 +165,15 @@ export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> =
             errorMessage={createError}
           />
         </PageSection>
+        {showAdd ? (
+          <AddConnectionTypeFieldModal
+            onCancel={() => setShowAdd(false)}
+            onSubmit={(newField) => {
+              onAddField(newField);
+              setShowAdd(false);
+            }}
+          />
+        ) : null}
       </ApplicationsPage>
     </ConnectionTypePreviewDrawer>
   );