From cf22edfcf58199285d076e07155e8d4578194127 Mon Sep 17 00:00:00 2001
From: Christian Vogt <cvogt@redhat.com>
Date: Fri, 16 Aug 2024 19:32:06 -0400
Subject: [PATCH] model to manage field creation (#3100)

---
 .../userManagement/userManagement.cy.ts       |   2 +-
 .../fields/BooleanFormField.tsx               |  58 +++----
 .../fields/ConnectionTypeDataFormField.tsx    |  68 +++-----
 .../fields/ConnectionTypeFormFields.tsx       |  17 +-
 .../fields/DataFormFieldGroup.tsx             |  51 +++---
 .../fields/DefaultValueTextRenderer.tsx       |  24 +++
 .../fields/DropdownFormField.tsx              | 145 +++++++++---------
 .../connectionTypes/fields/FileFormField.tsx  |  70 ++++-----
 .../fields/HiddenFormField.tsx                |  31 ++--
 .../fields/NumericFormField.tsx               |  31 ++--
 .../fields/SectionFormField.tsx               |   9 +-
 .../fields/ShortTextFormField.tsx             |  31 ++--
 .../connectionTypes/fields/TextFormField.tsx  |  23 ++-
 .../connectionTypes/fields/UriFormField.tsx   |  81 ++++++++--
 .../__tests__/BooleanFormField.spec.tsx       |   8 +-
 .../ConnectionTypeDataFormField.spec.tsx      |  23 ++-
 .../__tests__/DataFormFieldGroup.spec.tsx     |  82 ----------
 .../DefaultValueTextRenderer.spec.tsx         |  49 ++++++
 .../__tests__/DropdownFormField.spec.tsx      |  44 +++++-
 .../fields/__tests__/FileFormField.spec.tsx   |  14 +-
 .../fields/__tests__/HiddenFormField.spec.tsx |  20 ++-
 .../__tests__/NumericFormField.spec.tsx       |   8 +-
 .../__tests__/ShortTextFormField.spec.tsx     |  14 +-
 .../fields/__tests__/TextFormField.spec.tsx   |  14 +-
 .../fields/__tests__/UriFormField.spec.tsx    |  14 +-
 .../connectionTypes/fields/types.d.ts         |  11 ++
 .../ConnectionTypeDataFieldModal.tsx          | 131 +++++++---------
 .../manage/ConnectionTypeFieldModal.tsx       |   2 +-
 .../manage/ConnectionTypeSectionModal.tsx     |   6 +-
 .../manage/DataFieldPropertiesForm.tsx        |  59 +++++++
 .../ConnectionTypeDataFieldModal.spec.tsx}    |  50 ++----
 .../BooleanAdvancedPropertiesForm.tsx         |  32 ++++
 .../DataFieldAdvancedPropertiesForm.tsx       |  36 +++++
 .../manage/advanced/types.d.ts                |   6 +
 34 files changed, 727 insertions(+), 537 deletions(-)
 create mode 100644 frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx
 delete mode 100644 frontend/src/concepts/connectionTypes/fields/__tests__/DataFormFieldGroup.spec.tsx
 create mode 100644 frontend/src/concepts/connectionTypes/fields/__tests__/DefaultValueTextRenderer.spec.tsx
 create mode 100644 frontend/src/concepts/connectionTypes/fields/types.d.ts
 rename frontend/src/pages/connectionTypes/{fields => manage}/ConnectionTypeDataFieldModal.tsx (70%)
 create mode 100644 frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx
 rename frontend/src/pages/connectionTypes/{fields/__tests__/AddConnectionTypeFieldModal.spec.tsx => manage/__tests__/ConnectionTypeDataFieldModal.spec.tsx} (56%)
 create mode 100644 frontend/src/pages/connectionTypes/manage/advanced/BooleanAdvancedPropertiesForm.tsx
 create mode 100644 frontend/src/pages/connectionTypes/manage/advanced/DataFieldAdvancedPropertiesForm.tsx
 create mode 100644 frontend/src/pages/connectionTypes/manage/advanced/types.d.ts

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts
index 9283c0c224..7e6274f6fc 100644
--- a/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts
+++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts
@@ -44,7 +44,7 @@ describe('User Management', () => {
     userGroupSection.findChipItem('system:authenticated').should('exist');
     userGroupSection.clearMultiChipItem();
     userGroupSection.findErrorText().should('exist');
-    userGroupSection.selectMultiGroup('odh-admins', false);
+    userGroupSection.selectMultiGroup('odh-admins');
     userGroupSection.findChipItem(/^odh-admins$/).should('exist');
     userGroupSection.findMultiGroupSelectButton().click();
     userManagement.findSubmitButton().should('be.enabled');
diff --git a/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx b/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
index 2f60d3f762..28875c0ace 100644
--- a/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
@@ -1,36 +1,36 @@
 import * as React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 import { BooleanField } from '~/concepts/connectionTypes/types';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
 
-type Props = {
-  field: BooleanField;
-  isPreview?: boolean;
-  value?: boolean;
-  onChange?: (value: boolean) => void;
+const BooleanFormField: React.FC<FieldProps<BooleanField>> = ({
+  id,
+  field,
+  mode,
+  onChange,
+  value,
+  'data-testid': dataTestId,
+}) => {
+  const isPreview = mode === 'preview';
+  return (
+    <Checkbox
+      aria-readonly={isPreview}
+      id={id}
+      name={id}
+      data-testid={dataTestId}
+      label={field.properties.label}
+      aria-label={field.properties.label || field.name}
+      isDisabled={field.properties.defaultReadOnly}
+      isChecked={
+        isPreview || field.properties.defaultReadOnly ? !!field.properties.defaultValue : !!value
+      }
+      onChange={
+        isPreview || field.properties.defaultReadOnly || !onChange
+          ? () => undefined
+          : (_e, v) => onChange(v)
+      }
+    />
+  );
 };
 
-const BooleanFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
-  <DataFormFieldGroup field={field} isPreview={!!isPreview} renderDefaultValue={false}>
-    {(id) => (
-      <Checkbox
-        aria-readonly={isPreview}
-        id={id}
-        name={id}
-        label={field.properties.label}
-        aria-label={field.properties.label || field.name}
-        isDisabled={field.properties.defaultReadOnly}
-        isChecked={
-          isPreview || field.properties.defaultReadOnly ? !!field.properties.defaultValue : !!value
-        }
-        onChange={
-          isPreview || field.properties.defaultReadOnly || !onChange
-            ? () => undefined
-            : (_e, v) => onChange(v)
-        }
-      />
-    )}
-  </DataFormFieldGroup>
-);
-
 export default BooleanFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeDataFormField.tsx b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeDataFormField.tsx
index 7a13c20830..fec74a5a3f 100644
--- a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeDataFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeDataFormField.tsx
@@ -8,54 +8,30 @@ import TextFormField from '~/concepts/connectionTypes/fields/TextFormField';
 import ShortTextFormField from '~/concepts/connectionTypes/fields/ShortTextFormField';
 import UriFormField from '~/concepts/connectionTypes/fields/UriFormField';
 import { ConnectionTypeDataField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
-
-type Props<T extends ConnectionTypeDataField> = {
-  field: T;
-  isPreview?: boolean;
-  onChange?: (field: T, value: unknown) => void;
-  value?: T['properties']['defaultValue'];
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+
+const components = {
+  [ConnectionTypeFieldType.ShortText]: ShortTextFormField,
+  [ConnectionTypeFieldType.Text]: TextFormField,
+  [ConnectionTypeFieldType.URI]: UriFormField,
+  [ConnectionTypeFieldType.Hidden]: HiddenFormField,
+  [ConnectionTypeFieldType.File]: FileFormField,
+  [ConnectionTypeFieldType.Boolean]: BooleanFormField,
+  [ConnectionTypeFieldType.Numeric]: NumericFormField,
+  [ConnectionTypeFieldType.Dropdown]: DropdownFormField,
 };
 
-const ConnectionTypeDataFormField = <T extends ConnectionTypeDataField>({
-  field,
-  isPreview,
-  onChange,
-  value,
-}: Props<T>): React.ReactNode => {
-  const commonProps = {
-    isPreview,
-    onChange: onChange ? (v: unknown) => onChange(field, v) : undefined,
-    // even though the value is the type of the field default value, typescript cannot determine this here
-    // or when applied to the element itself within the switch statement
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
-    value: value as any,
-  };
-  switch (field.type) {
-    case ConnectionTypeFieldType.ShortText:
-      return <ShortTextFormField {...commonProps} field={field} />;
-
-    case ConnectionTypeFieldType.Text:
-      return <TextFormField {...commonProps} field={field} />;
-
-    case ConnectionTypeFieldType.URI:
-      return <UriFormField {...commonProps} field={field} />;
-
-    case ConnectionTypeFieldType.Hidden:
-      return <HiddenFormField {...commonProps} field={field} />;
-
-    case ConnectionTypeFieldType.File:
-      return <FileFormField {...commonProps} field={field} />;
-
-    case ConnectionTypeFieldType.Boolean:
-      return <BooleanFormField {...commonProps} field={field} />;
-
-    case ConnectionTypeFieldType.Numeric:
-      return <NumericFormField {...commonProps} field={field} />;
-
-    case ConnectionTypeFieldType.Dropdown:
-      return <DropdownFormField {...commonProps} field={field} />;
-  }
-  return null;
+const ConnectionTypeDataFormField = <T extends ConnectionTypeDataField>(
+  props: FieldProps<T>,
+): React.ReactNode => {
+  const Component = components[props.field.type];
+  return (
+    <Component
+      // delegate all props to the component
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
+      {...(props as any)}
+    />
+  );
 };
 
 export default ConnectionTypeDataFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
index a4397a7b39..a05ba90d06 100644
--- a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
@@ -1,6 +1,7 @@
 import { FormSection } from '@patternfly/react-core';
 import * as React from 'react';
 import ConnectionTypeDataFormField from '~/concepts/connectionTypes/fields/ConnectionTypeDataFormField';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
 import SectionFormField from '~/concepts/connectionTypes/fields/SectionFormField';
 import {
   ConnectionTypeDataField,
@@ -35,12 +36,16 @@ const ConnectionTypeFormFields: React.FC<Props> = ({ fields, isPreview, onChange
 
   const renderDataFields = (dataFields: ConnectionTypeDataField[]) =>
     dataFields.map((field, i) => (
-      <ConnectionTypeDataFormField
-        key={i}
-        field={field}
-        isPreview={isPreview}
-        onChange={onChange}
-      />
+      <DataFormFieldGroup key={i} field={field}>
+        {(id) => (
+          <ConnectionTypeDataFormField
+            id={id}
+            field={field}
+            mode={isPreview ? 'preview' : 'instance'}
+            onChange={onChange ? (v) => onChange(field, v) : undefined}
+          />
+        )}
+      </DataFormFieldGroup>
     ));
 
   return (
diff --git a/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
index 2fe67db210..7ab2dd984e 100644
--- a/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
@@ -1,41 +1,26 @@
 import * as React from 'react';
-import { FormGroup } from '@patternfly/react-core';
+import { FormGroup, GenerateId } from '@patternfly/react-core';
 import { ConnectionTypeDataField } from '~/concepts/connectionTypes/types';
-import FormGroupText from '~/components/FormGroupText';
-import UnspecifiedValue from '~/concepts/connectionTypes/fields/UnspecifiedValue';
-import { defaultValueToString } from '~/concepts/connectionTypes/utils';
 
-type Props<T extends ConnectionTypeDataField> = {
-  field: T;
-  isPreview: boolean;
+type Props = {
+  field: ConnectionTypeDataField;
   children: (id: string) => React.ReactNode;
-  renderDefaultValue?: boolean;
 };
 
-const DataFormFieldGroup = <T extends ConnectionTypeDataField>({
-  field,
-  isPreview,
-  children,
-  renderDefaultValue = true,
-}: Props<T>): React.ReactNode => {
-  const id = `${field.type}-${field.envVar}`;
-  return (
-    <FormGroup
-      label={field.name}
-      fieldId={id}
-      data-testid={`field ${field.type} ${field.envVar}`}
-      // do not mark read only fields as required
-      isRequired={field.required && !field.properties.defaultReadOnly}
-    >
-      {field.properties.defaultReadOnly && renderDefaultValue ? (
-        <FormGroupText id={id}>
-          {defaultValueToString(field) ?? (isPreview ? <UnspecifiedValue /> : '-')}
-        </FormGroupText>
-      ) : (
-        children(id)
-      )}
-    </FormGroup>
-  );
-};
+const DataFormFieldGroup: React.FC<Props> = ({ field, children }): React.ReactNode => (
+  <GenerateId>
+    {(id) => (
+      <FormGroup
+        label={field.name}
+        fieldId={id}
+        data-testid={`field ${field.type} ${field.envVar}`}
+        // do not mark read only fields as required
+        isRequired={field.required && !field.properties.defaultReadOnly}
+      >
+        {children(id)}
+      </FormGroup>
+    )}
+  </GenerateId>
+);
 
 export default DataFormFieldGroup;
diff --git a/frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx b/frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx
new file mode 100644
index 0000000000..7ffdc17d25
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import FormGroupText from '~/components/FormGroupText';
+import { FieldMode } from '~/concepts/connectionTypes/fields/types';
+import UnspecifiedValue from '~/concepts/connectionTypes/fields/UnspecifiedValue';
+import { ConnectionTypeDataField } from '~/concepts/connectionTypes/types';
+import { defaultValueToString } from '~/concepts/connectionTypes/utils';
+
+type Props = {
+  id: string;
+  field: ConnectionTypeDataField;
+  mode?: FieldMode;
+  children: React.ReactNode;
+};
+
+const DefaultValueTextRenderer: React.FC<Props> = ({ id, field, mode, children }) =>
+  mode !== 'default' && field.properties.defaultReadOnly ? (
+    <FormGroupText id={id}>
+      {defaultValueToString(field) ?? (mode === 'preview' ? <UnspecifiedValue /> : '-')}
+    </FormGroupText>
+  ) : (
+    children
+  );
+
+export default DefaultValueTextRenderer;
diff --git a/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx b/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
index 5a6032d23c..c9e1de730f 100644
--- a/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
@@ -1,87 +1,88 @@
 import * as React from 'react';
 import { Badge, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
 import { DropdownField } from '~/concepts/connectionTypes/types';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
 
-type Props = {
-  field: DropdownField;
-  isPreview?: boolean;
-  onChange?: (value: string[]) => void;
-  value?: string[];
-};
-
-const DropdownFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => {
+const DropdownFormField: React.FC<FieldProps<DropdownField>> = ({
+  id,
+  field,
+  mode,
+  onChange,
+  value,
+  'data-testid': dataTestId,
+}) => {
+  const isPreview = mode === 'preview';
   const [isOpen, setIsOpen] = React.useState(false);
   const isMulti = field.properties.variant === 'multi';
   const selected = isPreview ? field.properties.defaultValue : value;
   return (
-    <DataFormFieldGroup field={field} isPreview={!!isPreview}>
-      {(id) => (
-        <Select
-          isOpen={isOpen}
-          shouldFocusToggleOnSelect
-          selected={selected}
-          onSelect={
-            isPreview || !onChange
-              ? undefined
-              : (_e, v) => {
-                  if (isMulti) {
-                    if (selected?.includes(String(v))) {
-                      onChange(selected.filter((s) => s !== v));
-                    } else {
-                      onChange([...(selected || []), String(v)]);
-                    }
+    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
+      <Select
+        isOpen={isOpen}
+        shouldFocusToggleOnSelect
+        selected={selected}
+        onSelect={
+          isPreview || !onChange
+            ? undefined
+            : (_e, v) => {
+                if (isMulti) {
+                  if (selected?.includes(String(v))) {
+                    onChange(selected.filter((s) => s !== v));
                   } else {
-                    onChange([String(v)]);
-                    setIsOpen(false);
+                    onChange([...(selected || []), String(v)]);
                   }
+                } else {
+                  onChange([String(v)]);
+                  setIsOpen(false);
                 }
-          }
-          onOpenChange={(open) => setIsOpen(open)}
-          toggle={(toggleRef) => (
-            <MenuToggle
-              ref={toggleRef}
-              id={id}
-              isFullWidth
-              onClick={() => {
-                setIsOpen((open) => !open);
-              }}
-              isExpanded={isOpen}
+              }
+        }
+        onOpenChange={(open) => setIsOpen(open)}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            id={id}
+            data-testid={dataTestId}
+            isFullWidth
+            onClick={() => {
+              setIsOpen((open) => !open);
+            }}
+            isExpanded={isOpen}
+          >
+            {isMulti ? (
+              <>
+                Count{' '}
+                <Badge>
+                  {(isPreview ? field.properties.defaultValue?.length : value?.length) ?? 0}{' '}
+                  selected
+                </Badge>
+              </>
+            ) : (
+              (isPreview
+                ? field.properties.items?.find(
+                    (i) => i.value === field.properties.defaultValue?.[0],
+                  )?.label
+                : field.properties.items?.find((i) => value?.includes(i.value))?.label) ||
+              'Select a value'
+            )}
+          </MenuToggle>
+        )}
+      >
+        <SelectList>
+          {field.properties.items?.map((i) => (
+            <SelectOption
+              value={i.value}
+              key={i.value}
+              hasCheckbox={isMulti}
+              selected={selected?.includes(i.value)}
             >
-              {isMulti ? (
-                <>
-                  Count{' '}
-                  <Badge>
-                    {(isPreview ? field.properties.defaultValue?.length : value?.length) ?? 0}{' '}
-                    selected
-                  </Badge>
-                </>
-              ) : (
-                (isPreview
-                  ? field.properties.items?.find(
-                      (i) => i.value === field.properties.defaultValue?.[0],
-                    )?.label
-                  : field.properties.items?.find((i) => value?.includes(i.value))?.label) ||
-                'Select a value'
-              )}
-            </MenuToggle>
-          )}
-        >
-          <SelectList>
-            {field.properties.items?.map((i) => (
-              <SelectOption
-                value={i.value}
-                key={i.value}
-                hasCheckbox={isMulti}
-                selected={selected?.includes(i.value)}
-              >
-                {i.label}
-              </SelectOption>
-            ))}
-          </SelectList>
-        </Select>
-      )}
-    </DataFormFieldGroup>
+              {i.label}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </Select>
+    </DefaultValueTextRenderer>
   );
 };
 
diff --git a/frontend/src/concepts/connectionTypes/fields/FileFormField.tsx b/frontend/src/concepts/connectionTypes/fields/FileFormField.tsx
index 2ffb22052b..340a876aea 100644
--- a/frontend/src/concepts/connectionTypes/fields/FileFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/FileFormField.tsx
@@ -1,48 +1,44 @@
 import * as React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import { FileField } from '~/concepts/connectionTypes/types';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
 
-type Props = {
-  field: FileField;
-  isPreview?: boolean;
-  value?: string;
-  onChange?: (value: string) => void;
-};
-
-const FileFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => {
+const FileFormField: React.FC<FieldProps<FileField>> = ({
+  id,
+  field,
+  mode,
+  onChange,
+  value,
+  'data-testid': dataTestId,
+}) => {
+  const isPreview = mode === 'preview';
   const [isLoading, setIsLoading] = React.useState(false);
   const [filename, setFilename] = React.useState('');
   const readOnly = isPreview || field.properties.defaultReadOnly;
   return (
-    <DataFormFieldGroup field={field} isPreview={!!isPreview} renderDefaultValue={false}>
-      {(id) => (
-        <FileUpload
-          id={id}
-          name={id}
-          type="text"
-          isLoading={isLoading}
-          value={
-            isPreview || field.properties.defaultReadOnly ? field.properties.defaultValue : value
-          }
-          filename={filename}
-          allowEditingUploadedText
-          isReadOnly={readOnly}
-          isDisabled={readOnly}
-          filenamePlaceholder={readOnly ? '' : 'Drag and drop a file or upload one'}
-          browseButtonText="Upload"
-          clearButtonText="Clear"
-          onDataChange={isPreview || !onChange ? undefined : (e, content) => onChange(content)}
-          onFileInputChange={(_e, file) => setFilename(file.name)}
-          onReadStarted={() => {
-            setIsLoading(true);
-          }}
-          onReadFinished={() => {
-            setIsLoading(false);
-          }}
-        />
-      )}
-    </DataFormFieldGroup>
+    <FileUpload
+      id={id}
+      name={id}
+      data-testid={dataTestId}
+      type="text"
+      isLoading={isLoading}
+      value={isPreview || field.properties.defaultReadOnly ? field.properties.defaultValue : value}
+      filename={filename}
+      allowEditingUploadedText
+      isReadOnly={readOnly}
+      isDisabled={readOnly}
+      filenamePlaceholder={readOnly ? '' : 'Drag and drop a file or upload one'}
+      browseButtonText="Upload"
+      clearButtonText="Clear"
+      onDataChange={isPreview || !onChange ? undefined : (e, content) => onChange(content)}
+      onFileInputChange={(_e, file) => setFilename(file.name)}
+      onReadStarted={() => {
+        setIsLoading(true);
+      }}
+      onReadFinished={() => {
+        setIsLoading(false);
+      }}
+    />
   );
 };
 
diff --git a/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx b/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
index 169c51fbfc..8e1ea1ce87 100644
--- a/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
@@ -1,31 +1,34 @@
 import * as React from 'react';
 import { HiddenField } from '~/concepts/connectionTypes/types';
 import PasswordInput from '~/components/PasswordInput';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
 
-type Props = {
-  field: HiddenField;
-  isPreview?: boolean;
-  value?: string;
-  onChange?: (value: string) => void;
-};
-
-const HiddenFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
-  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
-    {(id) => (
+const HiddenFormField: React.FC<FieldProps<HiddenField>> = ({
+  id,
+  field,
+  mode,
+  onChange,
+  value,
+  'data-testid': dataTestId,
+}) => {
+  const isPreview = mode === 'preview';
+  return (
+    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
       <PasswordInput
         aria-readonly={isPreview}
         autoComplete="off"
         isRequired={field.required}
         id={id}
         name={id}
+        data-testid={dataTestId}
         ariaLabelHide="Hide value"
         ariaLabelShow="Show value"
         value={(isPreview ? field.properties.defaultValue : value) ?? ''}
         onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
       />
-    )}
-  </DataFormFieldGroup>
-);
+    </DefaultValueTextRenderer>
+  );
+};
 
 export default HiddenFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/NumericFormField.tsx b/frontend/src/concepts/connectionTypes/fields/NumericFormField.tsx
index 54a1975b40..cc981ac188 100644
--- a/frontend/src/concepts/connectionTypes/fields/NumericFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/NumericFormField.tsx
@@ -1,23 +1,26 @@
 import * as React from 'react';
 import { NumericField } from '~/concepts/connectionTypes/types';
 import NumberInputWrapper from '~/components/NumberInputWrapper';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
 
-type Props = {
-  field: NumericField;
-  isPreview?: boolean;
-  value?: number;
-  onChange?: (value: number) => void;
-};
-
-const NumericFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
-  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
-    {(id) => (
+const NumericFormField: React.FC<FieldProps<NumericField>> = ({
+  id,
+  field,
+  mode,
+  onChange,
+  value,
+  'data-testid': dataTestId,
+}) => {
+  const isPreview = mode === 'preview';
+  return (
+    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
       <NumberInputWrapper
         inputProps={{
           'aria-readonly': isPreview,
           id,
           name: id,
+          'data-testid': dataTestId,
           placeholder: `${field.properties.defaultValue ?? ''}`,
         }}
         inputName={id}
@@ -25,8 +28,8 @@ const NumericFormField: React.FC<Props> = ({ field, isPreview, onChange, value }
         // NumberInput shows a disabled input if no onChange provided
         onChange={isPreview || !onChange ? () => undefined : onChange}
       />
-    )}
-  </DataFormFieldGroup>
-);
+    </DefaultValueTextRenderer>
+  );
+};
 
 export default NumericFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/SectionFormField.tsx b/frontend/src/concepts/connectionTypes/fields/SectionFormField.tsx
index 5f8cac18b6..0dfdafe447 100644
--- a/frontend/src/concepts/connectionTypes/fields/SectionFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/SectionFormField.tsx
@@ -5,10 +5,15 @@ import FormSection from '~/components/pf-overrides/FormSection';
 type Props = {
   field: SectionField;
   children?: React.ReactNode;
+  'data-testid'?: string;
 };
 
-const SectionFormField: React.FC<Props> = ({ field: { name, description }, children }) => (
-  <FormSection title={name} description={description}>
+const SectionFormField: React.FC<Props> = ({
+  field: { name, description },
+  children,
+  'data-testid': dataTestId,
+}) => (
+  <FormSection title={name} description={description} data-testud={dataTestId}>
     {children}
   </FormSection>
 );
diff --git a/frontend/src/concepts/connectionTypes/fields/ShortTextFormField.tsx b/frontend/src/concepts/connectionTypes/fields/ShortTextFormField.tsx
index 99a03f5c2d..d8a86d5214 100644
--- a/frontend/src/concepts/connectionTypes/fields/ShortTextFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/ShortTextFormField.tsx
@@ -1,29 +1,32 @@
 import * as React from 'react';
 import { TextInput } from '@patternfly/react-core';
 import { ShortTextField } from '~/concepts/connectionTypes/types';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
 
-type Props = {
-  field: ShortTextField;
-  isPreview?: boolean;
-  value?: string;
-  onChange?: (value: string) => void;
-};
-
-const ShortTextFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
-  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
-    {(id) => (
+const ShortTextFormField: React.FC<FieldProps<ShortTextField>> = ({
+  id,
+  field,
+  mode,
+  onChange,
+  value,
+  'data-testid': dataTestId,
+}) => {
+  const isPreview = mode === 'preview';
+  return (
+    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
       <TextInput
         aria-readonly={isPreview}
         autoComplete="off"
         isRequired={field.required}
         id={id}
         name={id}
+        data-testid={dataTestId}
         value={(isPreview ? field.properties.defaultValue : value) ?? ''}
         onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
       />
-    )}
-  </DataFormFieldGroup>
-);
+    </DefaultValueTextRenderer>
+  );
+};
 
 export default ShortTextFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx b/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
index ac101ea88b..d2d21921fe 100644
--- a/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
@@ -1,18 +1,13 @@
 import * as React from 'react';
 import { TextArea } from '@patternfly/react-core';
 import { TextField } from '~/concepts/connectionTypes/types';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
 
-type Props = {
-  field: TextField;
-  isPreview?: boolean;
-  value?: string;
-  onChange?: (value: string) => void;
-};
-
-const TextFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
-  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
-    {(id) => (
+const TextFormField: React.FC<FieldProps<TextField>> = ({ id, field, mode, onChange, value }) => {
+  const isPreview = mode === 'preview';
+  return (
+    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
       <TextArea
         aria-readonly={isPreview}
         autoComplete="off"
@@ -23,8 +18,8 @@ const TextFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) =
         value={(isPreview ? field.properties.defaultValue : value) ?? ''}
         onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
       />
-    )}
-  </DataFormFieldGroup>
-);
+    </DefaultValueTextRenderer>
+  );
+};
 
 export default TextFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx b/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx
index 679db4fea8..6d2f3cbd6b 100644
--- a/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx
@@ -1,29 +1,82 @@
 import * as React from 'react';
-import { TextInput } from '@patternfly/react-core';
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  ValidatedOptions,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { UriField } from '~/concepts/connectionTypes/types';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { FieldProps } from '~/concepts/connectionTypes/fields/types';
+import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
 
-type Props = {
-  field: UriField;
-  isPreview?: boolean;
-  value?: string;
-  onChange?: (value: string) => void;
+const URI_REGEX = new RegExp(
+  '(?:(?:https?|ftp|file)://|www.|ftp.)(?:([-A-Z0-9+&@#/%=~_|$?!:,.]*)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:([-A-Z0-9+&@#/%=~_|$?!:,.]*)|[A-Z0-9+&@#/%=~_|$])',
+);
+
+const validateUrl = (url?: string) => {
+  try {
+    return !url || URI_REGEX.test(url);
+  } catch (e) {
+    return false;
+  }
 };
 
-const UriFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
-  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
-    {(id) => (
+const UriFormField: React.FC<FieldProps<UriField>> = ({
+  id,
+  field,
+  mode,
+  onChange,
+  value,
+  onValidate,
+  'data-testid': dataTestId,
+}) => {
+  const isPreview = mode === 'preview';
+  const [isValid, setIsValid] = React.useState(() => validateUrl(value));
+
+  React.useEffect(() => {
+    onValidate?.(isValid);
+    // do not run when callback changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isValid]);
+
+  return (
+    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
       <TextInput
         aria-readonly={isPreview}
         autoComplete="off"
         isRequired={field.required}
         id={id}
         name={id}
+        data-testid={dataTestId}
         value={(isPreview ? field.properties.defaultValue : value) ?? ''}
-        onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
+        onChange={
+          isPreview || !onChange
+            ? undefined
+            : (_e, v) => {
+                onChange(v);
+                if (!isValid) {
+                  setIsValid(validateUrl(value));
+                }
+              }
+        }
+        validated={isValid ? ValidatedOptions.default : ValidatedOptions.error}
+        onBlur={() => {
+          setIsValid(validateUrl(value));
+        }}
       />
-    )}
-  </DataFormFieldGroup>
-);
+      {!isValid && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem icon={<ExclamationCircleIcon />} variant={ValidatedOptions.error}>
+              Invalid URL
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </DefaultValueTextRenderer>
+  );
+};
 
 export default UriFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/BooleanFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/BooleanFormField.spec.tsx
index f2f394d8d0..11cd799ba3 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/BooleanFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/BooleanFormField.spec.tsx
@@ -18,7 +18,7 @@ describe('BooleanFormField', () => {
       },
     };
 
-    render(<BooleanFormField field={field} value onChange={onChange} />);
+    render(<BooleanFormField id="test" field={field} value onChange={onChange} />);
     const checkbox = screen.getByRole('checkbox');
     expect(checkbox).toBeChecked();
     expect(checkbox).not.toBeDisabled();
@@ -42,7 +42,9 @@ describe('BooleanFormField', () => {
       },
     };
 
-    render(<BooleanFormField field={field} value={false} onChange={onChange} isPreview />);
+    render(
+      <BooleanFormField id="test" field={field} value={false} onChange={onChange} mode="preview" />,
+    );
     const checkbox = screen.getByRole('checkbox');
     expect(checkbox).toBeChecked();
     expect(checkbox).not.toBeDisabled();
@@ -67,7 +69,7 @@ describe('BooleanFormField', () => {
       },
     };
 
-    render(<BooleanFormField field={field} value={false} onChange={onChange} />);
+    render(<BooleanFormField id="test" field={field} value={false} onChange={onChange} />);
     const checkbox = screen.getByRole('checkbox');
     expect(checkbox).toBeChecked();
     expect(checkbox).toBeDisabled();
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeDataFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeDataFormField.spec.tsx
index 4b5c20979b..9919206c8d 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeDataFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeDataFormField.spec.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import { ConnectionTypeDataField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
+import {
+  ConnectionTypeDataField,
+  connectionTypeDataFields,
+  ConnectionTypeFieldType,
+} from '~/concepts/connectionTypes/types';
 import ConnectionTypeDataFormField from '~/concepts/connectionTypes/fields/ConnectionTypeDataFormField';
 
 describe('ConnectionTypeDataFormField', () => {
-  it('should render field', () => {
+  it('should render field for each connection type', () => {
     const test = (type: ConnectionTypeFieldType) => {
       const field = {
         type,
@@ -14,18 +18,9 @@ describe('ConnectionTypeDataFormField', () => {
         properties: {},
       } as ConnectionTypeDataField;
       expect(
-        render(<ConnectionTypeDataFormField field={field} />).queryByTestId(
-          `field ${type} test-envVar`,
-        ),
-      ).toBeInTheDocument();
+        render(<ConnectionTypeDataFormField id="test" field={field} />).container.firstChild,
+      ).not.toBeNull();
     };
-    test(ConnectionTypeFieldType.Boolean);
-    test(ConnectionTypeFieldType.ShortText);
-    test(ConnectionTypeFieldType.Text);
-    test(ConnectionTypeFieldType.URI);
-    test(ConnectionTypeFieldType.Hidden);
-    test(ConnectionTypeFieldType.File);
-    test(ConnectionTypeFieldType.Numeric);
-    test(ConnectionTypeFieldType.Dropdown);
+    connectionTypeDataFields.forEach((t) => test(t));
   });
 });
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/DataFormFieldGroup.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/DataFormFieldGroup.spec.tsx
deleted file mode 100644
index 7ee461309b..0000000000
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/DataFormFieldGroup.spec.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
-import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
-import { TextField } from '~/concepts/connectionTypes/types';
-
-describe('DataFormFieldGroup', () => {
-  it('should conditionally render children', () => {
-    const children = jest.fn();
-    const field: TextField = {
-      type: 'text',
-      name: 'test-name',
-      envVar: 'test-envVar',
-      properties: {},
-    };
-    render(
-      <DataFormFieldGroup field={field} isPreview={false}>
-        {children}
-      </DataFormFieldGroup>,
-    );
-    expect(children).toHaveBeenCalledWith('text-test-envVar');
-
-    children.mockReset();
-    field.properties.defaultReadOnly = true;
-    render(
-      <DataFormFieldGroup field={field} isPreview={false} renderDefaultValue={false}>
-        {children}
-      </DataFormFieldGroup>,
-    );
-    expect(children).toHaveBeenCalledWith('text-test-envVar');
-
-    children.mockReset();
-    render(
-      <DataFormFieldGroup field={field} isPreview={false} renderDefaultValue>
-        {children}
-      </DataFormFieldGroup>,
-    );
-    expect(children).not.toHaveBeenCalled();
-
-    children.mockReset();
-    render(
-      <DataFormFieldGroup field={field} isPreview={false} renderDefaultValue={false}>
-        {children}
-      </DataFormFieldGroup>,
-    );
-    expect(children).toHaveBeenCalledWith('text-test-envVar');
-  });
-
-  it('should render default text', () => {
-    const children = jest.fn();
-    const field: TextField = {
-      type: 'text',
-      name: 'test-name',
-      envVar: 'test-envVar',
-      properties: {
-        defaultValue: 'Test value',
-        defaultReadOnly: true,
-      },
-    };
-    let result = render(
-      <DataFormFieldGroup field={field} isPreview={false}>
-        {children}
-      </DataFormFieldGroup>,
-    );
-    expect(result.container).toHaveTextContent('Test value');
-
-    field.properties.defaultValue = '';
-    result = render(
-      <DataFormFieldGroup field={field} isPreview={false}>
-        {children}
-      </DataFormFieldGroup>,
-    );
-    expect(result.container).not.toHaveTextContent('Unspecified');
-
-    result = render(
-      <DataFormFieldGroup field={field} isPreview>
-        {children}
-      </DataFormFieldGroup>,
-    );
-    expect(result.container).not.toHaveTextContent('Unspecified');
-  });
-});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/DefaultValueTextRenderer.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/DefaultValueTextRenderer.spec.tsx
new file mode 100644
index 0000000000..069da91f7b
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/DefaultValueTextRenderer.spec.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
+import { TextField } from '~/concepts/connectionTypes/types';
+
+describe('DefaultValueTextRenderer', () => {
+  it('should render default text', () => {
+    const field: TextField = {
+      type: 'text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'Test value',
+        defaultReadOnly: true,
+      },
+    };
+    let result = render(
+      <DefaultValueTextRenderer id="test" field={field}>
+        children
+      </DefaultValueTextRenderer>,
+    );
+    expect(result.container).toHaveTextContent('Test value');
+
+    field.properties.defaultValue = undefined;
+    result = render(
+      <DefaultValueTextRenderer id="test" field={field} mode="default">
+        children
+      </DefaultValueTextRenderer>,
+    );
+    expect(result.container).not.toHaveTextContent('Unspecified');
+    expect(result.container).toHaveTextContent('children');
+
+    result = render(
+      <DefaultValueTextRenderer id="test" field={field} mode="instance">
+        children
+      </DefaultValueTextRenderer>,
+    );
+    expect(result.container).not.toHaveTextContent('Unspecified');
+    expect(result.container).toHaveTextContent('-');
+
+    result = render(
+      <DefaultValueTextRenderer id="test" field={field} mode="preview">
+        children
+      </DefaultValueTextRenderer>,
+    );
+    expect(result.container).toHaveTextContent('Unspecified');
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
index 875b59e9fc..ad9bb4fdfd 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
@@ -24,7 +24,7 @@ describe('DropdownFormField', () => {
         },
       };
 
-      render(<DropdownFormField field={field} value={['2']} onChange={onChange} />);
+      render(<DropdownFormField id="test" field={field} value={['2']} onChange={onChange} />);
       const input = screen.getByRole('button');
       expect(input).toHaveTextContent('Two');
       expect(input).not.toBeDisabled();
@@ -57,7 +57,15 @@ describe('DropdownFormField', () => {
         },
       };
 
-      render(<DropdownFormField field={field} value={['2']} onChange={onChange} isPreview />);
+      render(
+        <DropdownFormField
+          id="test"
+          field={field}
+          value={['2']}
+          onChange={onChange}
+          mode="preview"
+        />,
+      );
       const input = screen.getByRole('button');
       expect(input).toHaveTextContent('Three');
       expect(input).not.toBeDisabled();
@@ -96,7 +104,15 @@ describe('DropdownFormField', () => {
         },
       };
 
-      render(<DropdownFormField field={field} value={['2']} onChange={onChange} isPreview />);
+      render(
+        <DropdownFormField
+          id="test"
+          field={field}
+          value={['2']}
+          onChange={onChange}
+          mode="preview"
+        />,
+      );
       expect(screen.queryByRole('button')).not.toBeInTheDocument();
       expect(screen.queryByText('Three')).toBeInTheDocument();
     });
@@ -120,7 +136,7 @@ describe('DropdownFormField', () => {
         },
       };
 
-      render(<DropdownFormField field={field} value={['1', '2']} onChange={onChange} />);
+      render(<DropdownFormField id="test" field={field} value={['1', '2']} onChange={onChange} />);
       const input = screen.getByRole('button');
       expect(input).toHaveTextContent('Count 2 selected');
       expect(input).not.toBeDisabled();
@@ -165,7 +181,15 @@ describe('DropdownFormField', () => {
         },
       };
 
-      render(<DropdownFormField field={field} value={['1', '2']} onChange={onChange} isPreview />);
+      render(
+        <DropdownFormField
+          id="test"
+          field={field}
+          value={['1', '2']}
+          onChange={onChange}
+          mode="preview"
+        />,
+      );
       const input = screen.getByRole('button');
       expect(input).toHaveTextContent('Count 1 selected');
       expect(input).not.toBeDisabled();
@@ -203,7 +227,15 @@ describe('DropdownFormField', () => {
         },
       };
 
-      render(<DropdownFormField field={field} value={['1', '2']} onChange={onChange} isPreview />);
+      render(
+        <DropdownFormField
+          id="test"
+          field={field}
+          value={['1', '2']}
+          onChange={onChange}
+          mode="preview"
+        />,
+      );
       expect(screen.queryByRole('button')).not.toBeInTheDocument();
       expect(screen.queryByText('Two, Three')).toBeInTheDocument();
     });
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx
index 2985248468..a01b6d19a4 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx
@@ -17,7 +17,7 @@ describe('FileFormField', () => {
       },
     };
 
-    render(<FileFormField field={field} value="supplied-value" onChange={onChange} />);
+    render(<FileFormField id="test" field={field} value="supplied-value" onChange={onChange} />);
     const [, contentInput] = screen.getAllByRole('textbox');
     expect(contentInput).toHaveValue('supplied-value');
     expect(contentInput).not.toBeDisabled();
@@ -42,7 +42,15 @@ describe('FileFormField', () => {
       },
     };
 
-    render(<FileFormField field={field} value="supplied-value" onChange={onChange} isPreview />);
+    render(
+      <FileFormField
+        id="test"
+        field={field}
+        value="supplied-value"
+        onChange={onChange}
+        mode="preview"
+      />,
+    );
     const [, contentInput] = screen.getAllByRole('textbox');
     expect(contentInput).toHaveValue('default-value');
     expect(contentInput).toBeDisabled();
@@ -67,7 +75,7 @@ describe('FileFormField', () => {
       },
     };
 
-    render(<FileFormField field={field} value="supplied-value" onChange={onChange} />);
+    render(<FileFormField id="test" field={field} value="supplied-value" onChange={onChange} />);
     const [, contentInput] = screen.getAllByRole('textbox');
     expect(contentInput).toHaveValue('default-value');
     expect(contentInput).toBeDisabled();
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
index 94a3f7b824..103ae2392b 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
@@ -17,8 +17,10 @@ describe('HiddenFormField', () => {
       },
     };
 
-    render(<HiddenFormField field={field} value="supplied-value" onChange={onChange} />);
-    const input = screen.getByLabelText('test-name');
+    const result = render(
+      <HiddenFormField id="test" field={field} value="supplied-value" onChange={onChange} />,
+    );
+    const input = result.container.getElementsByTagName('input')[0];
     expect(input.getAttribute('type')).toBe('password');
     expect(input).toHaveValue('supplied-value');
     expect(input).not.toBeDisabled();
@@ -40,8 +42,16 @@ describe('HiddenFormField', () => {
       },
     };
 
-    render(<HiddenFormField field={field} value="supplied-value" onChange={onChange} isPreview />);
-    const input = screen.getByLabelText('test-name');
+    const result = render(
+      <HiddenFormField
+        id="test"
+        field={field}
+        value="supplied-value"
+        onChange={onChange}
+        mode="preview"
+      />,
+    );
+    const input = result.container.getElementsByTagName('input')[0];
     expect(input.getAttribute('type')).toBe('password');
     expect(input).toHaveValue('default-value');
     expect(input).not.toBeDisabled();
@@ -64,7 +74,7 @@ describe('HiddenFormField', () => {
       },
     };
 
-    render(<HiddenFormField field={field} value="supplied-value" />);
+    render(<HiddenFormField id="test" field={field} value="supplied-value" />);
     expect(screen.queryByRole('test-name')).not.toBeInTheDocument();
     expect(screen.queryByText('••••••••••')).toBeInTheDocument();
   });
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/NumericFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/NumericFormField.spec.tsx
index bdd6055ee5..6b94285317 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/NumericFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/NumericFormField.spec.tsx
@@ -17,7 +17,7 @@ describe('NumericFormField', () => {
       },
     };
 
-    render(<NumericFormField field={field} value={3} onChange={onChange} />);
+    render(<NumericFormField id="test" field={field} value={3} onChange={onChange} />);
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveValue(3);
     expect(input).not.toBeDisabled();
@@ -39,7 +39,9 @@ describe('NumericFormField', () => {
       },
     };
 
-    render(<NumericFormField field={field} value={3} onChange={onChange} isPreview />);
+    render(
+      <NumericFormField id="test" field={field} value={3} onChange={onChange} mode="preview" />,
+    );
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveValue(2);
     expect(input).not.toBeDisabled();
@@ -62,7 +64,7 @@ describe('NumericFormField', () => {
       },
     };
 
-    render(<NumericFormField field={field} value={3} />);
+    render(<NumericFormField id="test" field={field} value={3} />);
     expect(screen.queryByRole('spinbutton')).not.toBeInTheDocument();
     expect(screen.queryByText(2)).toBeInTheDocument();
   });
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/ShortTextFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/ShortTextFormField.spec.tsx
index f330dda80e..f9aa469a1f 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/ShortTextFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/ShortTextFormField.spec.tsx
@@ -17,7 +17,9 @@ describe('ShortTextFormField', () => {
       },
     };
 
-    render(<ShortTextFormField field={field} value="supplied-value" onChange={onChange} />);
+    render(
+      <ShortTextFormField id="test" field={field} value="supplied-value" onChange={onChange} />,
+    );
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue('supplied-value');
     expect(input).not.toBeDisabled();
@@ -40,7 +42,13 @@ describe('ShortTextFormField', () => {
     };
 
     render(
-      <ShortTextFormField field={field} value="supplied-value" onChange={onChange} isPreview />,
+      <ShortTextFormField
+        id="test"
+        field={field}
+        value="supplied-value"
+        onChange={onChange}
+        mode="preview"
+      />,
     );
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue('default-value');
@@ -64,7 +72,7 @@ describe('ShortTextFormField', () => {
       },
     };
 
-    render(<ShortTextFormField field={field} value="supplied-value" />);
+    render(<ShortTextFormField id="test" field={field} value="supplied-value" />);
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
     expect(screen.queryByText('default-value')).toBeInTheDocument();
   });
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/TextFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/TextFormField.spec.tsx
index 1ca02ccb2f..709decedc6 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/TextFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/TextFormField.spec.tsx
@@ -17,7 +17,7 @@ describe('TextFormField', () => {
       },
     };
 
-    render(<TextFormField field={field} value="supplied-value" onChange={onChange} />);
+    render(<TextFormField id="test" field={field} value="supplied-value" onChange={onChange} />);
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue('supplied-value');
     expect(input).not.toBeDisabled();
@@ -39,7 +39,15 @@ describe('TextFormField', () => {
       },
     };
 
-    render(<TextFormField field={field} value="supplied-value" onChange={onChange} isPreview />);
+    render(
+      <TextFormField
+        id="test"
+        field={field}
+        value="supplied-value"
+        onChange={onChange}
+        mode="preview"
+      />,
+    );
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue('default-value');
     expect(input).not.toBeDisabled();
@@ -62,7 +70,7 @@ describe('TextFormField', () => {
       },
     };
 
-    render(<TextFormField field={field} value="supplied-value" />);
+    render(<TextFormField id="test" field={field} value="supplied-value" />);
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
     expect(screen.queryByText('default-value')).toBeInTheDocument();
   });
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx
index 5a9376ca4d..222f781e23 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx
@@ -17,7 +17,7 @@ describe('UriFormField', () => {
       },
     };
 
-    render(<UriFormField field={field} value="http://bar.com" onChange={onChange} />);
+    render(<UriFormField id="test" field={field} value="http://bar.com" onChange={onChange} />);
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue('http://bar.com');
     expect(input).not.toBeDisabled();
@@ -39,7 +39,15 @@ describe('UriFormField', () => {
       },
     };
 
-    render(<UriFormField field={field} value="http://bar.com" onChange={onChange} isPreview />);
+    render(
+      <UriFormField
+        id="test"
+        field={field}
+        value="http://bar.com"
+        onChange={onChange}
+        mode="preview"
+      />,
+    );
     const input = screen.getByRole('textbox');
     expect(input).toHaveValue('http://foo.com');
     expect(input).not.toBeDisabled();
@@ -62,7 +70,7 @@ describe('UriFormField', () => {
       },
     };
 
-    render(<UriFormField field={field} value="http://bar.com" />);
+    render(<UriFormField id="test" field={field} value="http://bar.com" />);
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
     expect(screen.queryByText('http://foo.com')).toBeInTheDocument();
   });
diff --git a/frontend/src/concepts/connectionTypes/fields/types.d.ts b/frontend/src/concepts/connectionTypes/fields/types.d.ts
new file mode 100644
index 0000000000..b419ae09ce
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/types.d.ts
@@ -0,0 +1,11 @@
+export type FieldMode = 'preview' | 'default' | 'instance';
+
+export type FieldProps<T extends ConnectionTypeDataField> = {
+  id: string;
+  field: T;
+  'data-testid'?: string;
+  mode?: FieldMode;
+  onChange?: (value: T['properties']['defaultValue']) => void;
+  value?: T['properties']['defaultValue'];
+  onValidate?: (isValid: boolean) => void;
+};
diff --git a/frontend/src/pages/connectionTypes/fields/ConnectionTypeDataFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
similarity index 70%
rename from frontend/src/pages/connectionTypes/fields/ConnectionTypeDataFieldModal.tsx
rename to frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
index 441dfb34bb..6e1102a811 100644
--- a/frontend/src/pages/connectionTypes/fields/ConnectionTypeDataFieldModal.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
@@ -19,13 +19,13 @@ import {
 import { ExclamationCircleIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
 import {
-  ConnectionTypeCommonProperties,
   ConnectionTypeDataField,
+  connectionTypeDataFields,
   ConnectionTypeFieldType,
 } from '~/concepts/connectionTypes/types';
-import { TextForm } from '~/pages/connectionTypes/fields/TextForm';
 import { isEnumMember } from '~/utilities/utils';
 import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
+import DataFieldPropertiesForm from '~/pages/connectionTypes/manage/DataFieldPropertiesForm';
 
 const ENV_VAR_NAME_REGEX = new RegExp('^[-._a-zA-Z][-._a-zA-Z0-9]*$');
 
@@ -34,17 +34,17 @@ const isConnectionTypeFieldType = (
 ): fieldType is ConnectionTypeFieldType =>
   isEnumMember(fieldType?.toString(), ConnectionTypeFieldType);
 
-interface ConnectionTypeFieldModalProps {
+type Props = {
   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.Dropdown]: 'Dropdown',
   [ConnectionTypeFieldType.File]: 'File',
   [ConnectionTypeFieldType.Hidden]: 'Hidden',
   [ConnectionTypeFieldType.Numeric]: 'Numeric',
@@ -53,14 +53,7 @@ const fieldTypeLabels: { [key: string]: string } = {
   [ConnectionTypeFieldType.URI]: 'URI',
 };
 
-const validateForType = (value: string, fieldType: ConnectionTypeFieldType): ValidatedOptions => {
-  switch (fieldType) {
-    default:
-      return ValidatedOptions.default;
-  }
-};
-
-export const ConnectionTypeDataFieldModal: React.FC<ConnectionTypeFieldModalProps> = ({
+export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
   field,
   isOpen,
   onClose,
@@ -70,64 +63,49 @@ export const ConnectionTypeDataFieldModal: React.FC<ConnectionTypeFieldModalProp
   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 [fieldType, setFieldType] = React.useState<ConnectionTypeFieldType | undefined>(
+    field?.type
+      ? // Cast from specific type to generic type
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
+        (field.type as ConnectionTypeFieldType)
+      : undefined,
   );
   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 [properties, setProperties] = React.useState<unknown>(field?.properties || {});
+  const [isPropertiesValid, setPropertiesValid] = React.useState(true);
 
   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 isValid =
+    !!fieldType &&
+    isPropertiesValid &&
+    !!name &&
+    !!envVar &&
+    envVarValidation === ValidatedOptions.default;
+
+  const newField = fieldType
+    ? // Cast from specific type to generic type
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
+      ({
+        type: fieldType,
+        name,
+        description,
+        envVar,
+        required,
+        properties,
+      } as ConnectionTypeDataField)
+    : undefined;
 
   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,
-        });
+    if (isValid) {
+      if (newField) {
+        onSubmit(newField);
+      }
+      onClose();
     }
-    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
@@ -139,7 +117,7 @@ export const ConnectionTypeDataFieldModal: React.FC<ConnectionTypeFieldModalProp
           onCancel={onClose}
           onSubmit={handleSubmit}
           submitLabel={isEdit ? 'Edit' : 'Add'}
-          isSubmitDisabled={!valid}
+          isSubmitDisabled={!isValid}
           alertTitle="Error"
         />
       }
@@ -224,6 +202,7 @@ export const ConnectionTypeDataFieldModal: React.FC<ConnectionTypeFieldModalProp
             selected={fieldType}
             onSelect={(_e, selection) => {
               if (isConnectionTypeFieldType(selection)) {
+                setProperties({});
                 setFieldType(selection);
                 setIsTypeSelectOpen(false);
               }
@@ -239,27 +218,29 @@ export const ConnectionTypeDataFieldModal: React.FC<ConnectionTypeFieldModalProp
                 }}
                 isExpanded={isOpen}
               >
-                {fieldTypeLabels[fieldType]}
+                {fieldType ? 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>
+              {connectionTypeDataFields
+                .map((value) => ({ label: fieldTypeLabels[value], value }))
+                .toSorted((a, b) => a.label.localeCompare(b.label))
+                .map(({ value, label }) => (
+                  <SelectOption key={value} value={value} data-testid={`field-${value}-select`}>
+                    {label}
+                  </SelectOption>
+                ))}
             </SelectList>
           </Select>
         </FormGroup>
-        {fieldTypeForm}
+        {newField ? (
+          <DataFieldPropertiesForm
+            field={newField}
+            onChange={setProperties}
+            onValidate={setPropertiesValid}
+          />
+        ) : undefined}
         <FormGroup fieldId="isRequired">
           <Checkbox
             id="isRequired"
diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx
index 5c3cb7b034..afdfd629cd 100644
--- a/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ConnectionTypeFieldModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConnectionTypeField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
-import { ConnectionTypeDataFieldModal } from '~/pages/connectionTypes/fields/ConnectionTypeDataFieldModal';
+import { ConnectionTypeDataFieldModal } from '~/pages/connectionTypes/manage/ConnectionTypeDataFieldModal';
 import ConnectionTypeSectionModal from './ConnectionTypeSectionModal';
 
 type Props = {
diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeSectionModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeSectionModal.tsx
index 16bed155b0..2406793a7f 100644
--- a/frontend/src/pages/connectionTypes/manage/ConnectionTypeSectionModal.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ConnectionTypeSectionModal.tsx
@@ -36,8 +36,10 @@ const ConnectionTypeSectionModal: React.FC<Props> = ({
           submitLabel={isEdit ? 'Edit' : 'Add'}
           onCancel={onClose}
           onSubmit={() => {
-            onSubmit({ type: 'section', name, description });
-            onClose();
+            if (isValid) {
+              onSubmit({ type: 'section', name, description });
+              onClose();
+            }
           }}
           isSubmitDisabled={!isValid}
           alertTitle=""
diff --git a/frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx b/frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx
new file mode 100644
index 0000000000..f00bc90df4
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Checkbox, FormGroup } from '@patternfly/react-core';
+import { ConnectionTypeDataField } from '~/concepts/connectionTypes/types';
+import ConnectionTypeDataFormField from '~/concepts/connectionTypes/fields/ConnectionTypeDataFormField';
+import DataFieldAdvancedPropertiesForm from '~/pages/connectionTypes/manage/advanced/DataFieldAdvancedPropertiesForm';
+
+type Props<T extends ConnectionTypeDataField> = {
+  field: T;
+  onChange: (properties: T['properties']) => void;
+  onValidate: (isValid: boolean) => void;
+};
+
+const DataFieldPropertiesForm = <T extends ConnectionTypeDataField>({
+  field,
+  onChange,
+  onValidate,
+}: Props<T>): React.ReactNode => {
+  const [isDefaultValueValid, setDefaultValueValid] = React.useState(true);
+  const [isAdvancedValid, setAdvancedValid] = React.useState(true);
+
+  const isValid = isDefaultValueValid && isAdvancedValid;
+  React.useEffect(() => {
+    onValidate(isValid);
+    // do not run when callback changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isValid]);
+
+  return (
+    <>
+      <DataFieldAdvancedPropertiesForm
+        field={field}
+        onChange={onChange}
+        onValidate={setAdvancedValid}
+        properties={field.properties}
+      />
+      <FormGroup fieldId="defaultValue" label="Default value">
+        <ConnectionTypeDataFormField
+          id="defaultValue"
+          field={field}
+          mode="default"
+          onChange={(defaultValue) => onChange({ ...field.properties, defaultValue })}
+          onValidate={setDefaultValueValid}
+          value={field.properties.defaultValue}
+          data-testid="field-default-value"
+        />
+        <Checkbox
+          id="defaultReadOnly"
+          label="Default value is read-only"
+          isDisabled={field.properties.defaultValue === '' || field.properties.defaultValue == null}
+          isChecked={(field.properties.defaultValue && field.properties.defaultReadOnly) || false}
+          onChange={(_ev, checked) => onChange({ ...field.properties, defaultReadOnly: checked })}
+          data-testid="field-default-value-readonly-checkbox"
+        />
+      </FormGroup>
+    </>
+  );
+};
+
+export default DataFieldPropertiesForm;
diff --git a/frontend/src/pages/connectionTypes/fields/__tests__/AddConnectionTypeFieldModal.spec.tsx b/frontend/src/pages/connectionTypes/manage/__tests__/ConnectionTypeDataFieldModal.spec.tsx
similarity index 56%
rename from frontend/src/pages/connectionTypes/fields/__tests__/AddConnectionTypeFieldModal.spec.tsx
rename to frontend/src/pages/connectionTypes/manage/__tests__/ConnectionTypeDataFieldModal.spec.tsx
index 5c90cc0ba4..7e0bdaea9f 100644
--- a/frontend/src/pages/connectionTypes/fields/__tests__/AddConnectionTypeFieldModal.spec.tsx
+++ b/frontend/src/pages/connectionTypes/manage/__tests__/ConnectionTypeDataFieldModal.spec.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { ConnectionTypeDataFieldModal } from '~/pages/connectionTypes/fields/ConnectionTypeDataFieldModal';
+import { ConnectionTypeDataFieldModal } from '~/pages/connectionTypes/manage/ConnectionTypeDataFieldModal';
 
 describe('ConnectionTypeDataFieldModal', () => {
   it('should render the modal', () => {
@@ -16,7 +16,8 @@ describe('ConnectionTypeDataFieldModal', () => {
     screen.getByTestId('modal-cancel-button').click();
     expect(onClose).toHaveBeenCalled();
   });
-  it('should add a short text field', () => {
+
+  it('should add a short text field', async () => {
     const onCancel = jest.fn();
     const onSubmit = jest.fn();
 
@@ -24,37 +25,6 @@ describe('ConnectionTypeDataFieldModal', () => {
     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');
 
@@ -65,13 +35,17 @@ describe('ConnectionTypeDataFieldModal', () => {
       typeSelectToggle.click();
     });
 
-    const hiddenSelect = within(screen.getByTestId('field-hidden-select')).getByRole('option');
+    const shortTextSelect = within(screen.getByTestId('field-short-text-select')).getByRole(
+      'option',
+    );
 
     act(() => {
-      hiddenSelect.click();
+      shortTextSelect.click();
     });
 
-    const fieldDefaultValueInput = screen.getByTestId('field-default-value-input');
+    await waitFor(() => expect(typeSelectToggle).toHaveAttribute('aria-expanded', 'false'));
+
+    const fieldDefaultValueInput = screen.getByTestId('field-default-value');
     act(() => {
       fireEvent.change(fieldDefaultValueInput, { target: { value: 'default value' } });
     });
@@ -87,7 +61,7 @@ describe('ConnectionTypeDataFieldModal', () => {
         defaultValue: 'default value',
       },
       required: undefined,
-      type: 'hidden',
+      type: 'short-text',
     });
   });
 });
diff --git a/frontend/src/pages/connectionTypes/manage/advanced/BooleanAdvancedPropertiesForm.tsx b/frontend/src/pages/connectionTypes/manage/advanced/BooleanAdvancedPropertiesForm.tsx
new file mode 100644
index 0000000000..fe2040be89
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/manage/advanced/BooleanAdvancedPropertiesForm.tsx
@@ -0,0 +1,32 @@
+import { FormGroup, TextInput } from '@patternfly/react-core';
+import * as React from 'react';
+import { BooleanField } from '~/concepts/connectionTypes/types';
+import { AdvancedFieldProps } from '~/pages/connectionTypes/manage/advanced/types';
+
+const BooleanAdvancedPropertiesForm: React.FC<AdvancedFieldProps<BooleanField>> = ({
+  properties,
+  onChange,
+  onValidate,
+}) => {
+  React.useEffect(() => {
+    onValidate(!!properties.label);
+    // do not run when callback changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties.label]);
+
+  return (
+    <FormGroup label="Checkbox label" isRequired fieldId="checkbox-label">
+      <TextInput
+        autoComplete="off"
+        isRequired
+        id="checkbox-label"
+        name="checkbox-label"
+        data-testid="checkbox-label"
+        value={properties.label ?? ''}
+        onChange={(e, value) => onChange({ ...properties, label: value })}
+      />
+    </FormGroup>
+  );
+};
+
+export default BooleanAdvancedPropertiesForm;
diff --git a/frontend/src/pages/connectionTypes/manage/advanced/DataFieldAdvancedPropertiesForm.tsx b/frontend/src/pages/connectionTypes/manage/advanced/DataFieldAdvancedPropertiesForm.tsx
new file mode 100644
index 0000000000..ef1b318ddb
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/manage/advanced/DataFieldAdvancedPropertiesForm.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ConnectionTypeDataField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
+import BooleanAdvancedPropertiesForm from '~/pages/connectionTypes/manage/advanced/BooleanAdvancedPropertiesForm';
+import { AdvancedFieldProps } from '~/pages/connectionTypes/manage/advanced/types';
+
+const CustomFieldPropertiesForm = <T extends ConnectionTypeDataField>(
+  props: AdvancedFieldProps<T>,
+): React.ReactNode => {
+  const Component = (() => {
+    // TODO define advanced forms
+    switch (props.field.type) {
+      case ConnectionTypeFieldType.File:
+        return () => null;
+
+      case ConnectionTypeFieldType.Boolean:
+        return BooleanAdvancedPropertiesForm;
+
+      case ConnectionTypeFieldType.Numeric:
+        return () => null;
+
+      case ConnectionTypeFieldType.Dropdown:
+        return () => null;
+    }
+    return undefined;
+  })();
+
+  return Component ? (
+    <Component
+      // delegate all props to the component
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
+      {...(props as any)}
+    />
+  ) : undefined;
+};
+
+export default CustomFieldPropertiesForm;
diff --git a/frontend/src/pages/connectionTypes/manage/advanced/types.d.ts b/frontend/src/pages/connectionTypes/manage/advanced/types.d.ts
new file mode 100644
index 0000000000..0dca88b37f
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/manage/advanced/types.d.ts
@@ -0,0 +1,6 @@
+export type AdvancedFieldProps<T extends ConnectionTypeDataField> = {
+  field: T;
+  onChange: (value: T['properties']) => void;
+  onValidate: (isValid: boolean) => void;
+  properties: T['properties'];
+};