From 12b1bb9b3da18495398fadcfa3ad741a6fc50a7e Mon Sep 17 00:00:00 2001
From: Emily Samoylov <93456589+emilys314@users.noreply.github.com>
Date: Tue, 13 Aug 2024 16:00:28 -0400
Subject: [PATCH] Duplicate connection page UI (#3059)

* Add duplicate connection type page

* Add connection type preview to page

* Remove table column headings when empty

* Reduce vertical padding and hide preview button when open

* Update useConnectionType to use useFetchState hook instead

* Fix file and folder path names

* Update table

* Updates to page and table

* Updates

* Add error state to footer if create fails

* Add username to creation and util type changes
---
 .../cypress/cypress/pages/connectionTypes.ts  |  73 ++++++++
 .../cypress/cypress/support/commands/odh.ts   |  19 ++
 .../createConnectionType.cy.ts                |  84 +++++++++
 frontend/src/app/AppRoutes.tsx                |   2 +
 .../connectionTypes/__tests__/utils.spec.ts   |  26 ++-
 .../createConnectionTypeUtils.ts              |  42 +++++
 .../connectionTypes/useConnectionType.ts      |  22 +++
 .../src/concepts/connectionTypes/utils.ts     |  11 ++
 .../src/concepts/k8s/NameDescriptionField.tsx |  12 +-
 .../connectionTypes/ConnectionTypeRoutes.tsx  |  18 ++
 .../CreateConnectionTypeBreadcrumbs.tsx       |   9 +
 .../CreateConnectionTypeFieldsTable.tsx       |  65 +++++++
 .../CreateConnectionTypeFieldsTableRow.tsx    |  61 +++++++
 .../create/CreateConnectionTypeFooter.tsx     |  52 ++++++
 .../create/CreateConnectionTypePage.tsx       | 162 ++++++++++++++++++
 .../create/DuplicateConnectionTypePage.tsx    |  28 +++
 .../create/EditConnectionTypePage.tsx         |   4 +
 17 files changed, 686 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts
 create mode 100644 frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts
 create mode 100644 frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts
 create mode 100644 frontend/src/concepts/connectionTypes/useConnectionType.ts
 create mode 100644 frontend/src/pages/connectionTypes/ConnectionTypeRoutes.tsx
 create mode 100644 frontend/src/pages/connectionTypes/create/CreateConnectionTypeBreadcrumbs.tsx
 create mode 100644 frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTable.tsx
 create mode 100644 frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTableRow.tsx
 create mode 100644 frontend/src/pages/connectionTypes/create/CreateConnectionTypeFooter.tsx
 create mode 100644 frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx
 create mode 100644 frontend/src/pages/connectionTypes/create/DuplicateConnectionTypePage.tsx
 create mode 100644 frontend/src/pages/connectionTypes/create/EditConnectionTypePage.tsx

diff --git a/frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts b/frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts
new file mode 100644
index 0000000000..6d7ccb96b5
--- /dev/null
+++ b/frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts
@@ -0,0 +1,73 @@
+import { TableRow } from './components/table';
+
+class CreateConnectionTypeTableRow extends TableRow {
+  findSectionHeading() {
+    return this.find().findByTestId('section-heading');
+  }
+
+  findName() {
+    return this.find().findByTestId('field-name');
+  }
+
+  findType() {
+    return this.find().findByTestId('field-type');
+  }
+
+  findDefault() {
+    return this.find().findByTestId('field-default');
+  }
+
+  findEnvVar() {
+    return this.find().findByTestId('field-env');
+  }
+
+  findRequired() {
+    return this.find().findByTestId('field-required');
+  }
+}
+
+class CreateConnectionTypePage {
+  visitCreatePage() {
+    cy.visitWithLogin('/connectionTypes/create');
+    cy.findAllByText('Create connection type').should('exist');
+  }
+
+  visitDuplicatePage(name = 'existing') {
+    cy.visitWithLogin(`/connectionTypes/duplicate/${name}`);
+    cy.findAllByText('Create connection type').should('exist');
+  }
+
+  findConnectionTypeName() {
+    return cy.findByTestId('connection-type-name');
+  }
+
+  findConnectionTypeDesc() {
+    return cy.findByTestId('connection-type-description');
+  }
+
+  findConnectionTypeEnableCheckbox() {
+    return cy.findByTestId('connection-type-enable');
+  }
+
+  findConnectionTypePreviewToggle() {
+    return cy.findByTestId('preview-drawer-toggle-button');
+  }
+
+  findFieldsTable() {
+    return cy.findByTestId('connection-type-fields-table');
+  }
+
+  findAllFieldsTableRows() {
+    return this.findFieldsTable().findAllByTestId('row');
+  }
+
+  getFieldsTableRow(index: number) {
+    return new CreateConnectionTypeTableRow(() => this.findAllFieldsTableRows().eq(index));
+  }
+
+  findSubmitButton() {
+    return cy.findByTestId('submit-button');
+  }
+}
+
+export const createConnectionTypePage = new CreateConnectionTypePage();
diff --git a/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts b/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
index d742cba552..cf3fc8d65d 100644
--- a/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
+++ b/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
@@ -51,6 +51,7 @@ import type {
 import type { GrpcResponse } from '~/__mocks__/mlmd/utils';
 import type { BuildMockPipelinveVersionsType } from '~/__mocks__';
 import type { ArtifactStorage } from '~/concepts/pipelines/types';
+import type { ConnectionTypeConfigMap } from '~/concepts/connectionTypes/types';
 
 type SuccessErrorResponse = {
   success: boolean;
@@ -590,6 +591,24 @@ declare global {
             path: { namespace: string };
           },
           response: OdhResponse<number>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/connection-types',
+          response: ConnectionTypeConfigMap[],
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'PATCH /api/connection-types/:name',
+          options: {
+            path: { name: string };
+          },
+          response: { success: boolean; error: string },
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/connection-types/:name',
+          options: {
+            path: { name: string };
+          },
+          response: ConnectionTypeConfigMap,
         ) => Cypress.Chainable<null>);
     }
   }
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts
new file mode 100644
index 0000000000..82b532f2a1
--- /dev/null
+++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts
@@ -0,0 +1,84 @@
+import {
+  mockConnectionTypeConfigMap,
+  mockConnectionTypeConfigMapObj,
+} from '~/__mocks__/mockConnectionType';
+import { createConnectionTypePage } from '~/__tests__/cypress/cypress/pages/connectionTypes';
+import { asClusterAdminUser } from '~/__tests__/cypress/cypress/utils/mockUsers';
+
+describe('create', () => {
+  it('Display base page', () => {
+    asClusterAdminUser();
+    createConnectionTypePage.visitCreatePage();
+
+    createConnectionTypePage.findConnectionTypeName().should('exist');
+    createConnectionTypePage.findConnectionTypeDesc().should('exist');
+    createConnectionTypePage.findConnectionTypeEnableCheckbox().should('exist');
+    createConnectionTypePage.findConnectionTypePreviewToggle().should('exist');
+  });
+
+  it('Allows create button with valid name', () => {
+    asClusterAdminUser();
+    createConnectionTypePage.visitCreatePage();
+
+    createConnectionTypePage.findConnectionTypeName().should('have.value', '');
+    createConnectionTypePage.findSubmitButton().should('be.disabled');
+
+    createConnectionTypePage.findConnectionTypeName().type('hello');
+    createConnectionTypePage.findSubmitButton().should('be.enabled');
+  });
+});
+
+describe('duplicate', () => {
+  const existing = mockConnectionTypeConfigMapObj({ name: 'existing' });
+
+  beforeEach(() => {
+    asClusterAdminUser();
+    cy.interceptOdh(
+      'GET /api/connection-types/:name',
+      { path: { name: 'existing' } },
+      mockConnectionTypeConfigMap({ name: 'existing' }),
+    );
+  });
+
+  it('Prefill details from existing connection', () => {
+    createConnectionTypePage.visitDuplicatePage('existing');
+
+    createConnectionTypePage
+      .findConnectionTypeName()
+      .should(
+        'have.value',
+        `Duplicate of ${existing.metadata.annotations['openshift.io/display-name']}`,
+      );
+    createConnectionTypePage
+      .findConnectionTypeDesc()
+      .should('have.value', existing.metadata.annotations['openshift.io/description']);
+    createConnectionTypePage.findConnectionTypeEnableCheckbox().should('be.checked');
+  });
+
+  it('Prefill fields table from existing connection', () => {
+    createConnectionTypePage.visitDuplicatePage('existing');
+
+    createConnectionTypePage
+      .findAllFieldsTableRows()
+      .should('have.length', existing.data?.fields?.length);
+
+    // Row 0 - Section
+    const row0 = createConnectionTypePage.getFieldsTableRow(0);
+    row0.findName().should('contain.text', 'Short text');
+    row0.findSectionHeading().should('exist');
+
+    // Row 1 - Short text field
+    const row1 = createConnectionTypePage.getFieldsTableRow(1);
+    row1.findName().should('contain.text', 'Short text 1');
+    row1.findType().should('have.text', 'Short text');
+    row1.findDefault().should('have.text', '-');
+    row1.findRequired().not('be.checked');
+
+    // Row 2 - Short text field
+    const row2 = createConnectionTypePage.getFieldsTableRow(2);
+    row2.findName().should('contain.text', 'Short text 2');
+    row2.findType().should('have.text', 'Short text');
+    row2.findDefault().should('have.text', 'This is the default value');
+    row2.findRequired().should('be.checked');
+  });
+});
diff --git a/frontend/src/app/AppRoutes.tsx b/frontend/src/app/AppRoutes.tsx
index cc6ee4516d..bd227c0b21 100644
--- a/frontend/src/app/AppRoutes.tsx
+++ b/frontend/src/app/AppRoutes.tsx
@@ -14,6 +14,7 @@ import { useCheckJupyterEnabled } from '~/utilities/notebookControllerUtils';
 import { SupportedArea } from '~/concepts/areas';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
 import ModelRegistrySettingsRoutes from '~/pages/modelRegistrySettings/ModelRegistrySettingsRoutes';
+import ConnectionTypeRoutes from '~/pages/connectionTypes/ConnectionTypeRoutes';
 
 const HomePage = React.lazy(() => import('../pages/home/Home'));
 
@@ -125,6 +126,7 @@ const AppRoutes: React.FC = () => {
             <Route path="/servingRuntimes/*" element={<CustomServingRuntimeRoutes />} />
             <Route path="/modelRegistrySettings/*" element={<ModelRegistrySettingsRoutes />} />
             <Route path="/groupSettings" element={<GroupSettingsPage />} />
+            <Route path="/connectionTypes/*" element={<ConnectionTypeRoutes />} />
           </>
         )}
 
diff --git a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
index 3cabf41ca8..cf93a5b726 100644
--- a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
+++ b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
@@ -1,7 +1,8 @@
 import { mockConnectionTypeConfigMapObj } from '~/__mocks__/mockConnectionType';
-import { DropdownField, HiddenField, TextField } from '~/concepts/connectionTypes/types';
+import { DropdownField, HiddenField, TextField, UriField } from '~/concepts/connectionTypes/types';
 import {
   defaultValueToString,
+  fieldTypeToString,
   toConnectionTypeConfigMap,
   toConnectionTypeConfigMapObj,
 } from '~/concepts/connectionTypes/utils';
@@ -201,3 +202,26 @@ describe('defaultValueToString', () => {
     ).toBe('Two, Three');
   });
 });
+
+describe('fieldTypeToString', () => {
+  it('should return default value as string', () => {
+    expect(
+      fieldTypeToString({
+        type: 'text',
+        name: 'test',
+        envVar: 'test',
+        properties: {},
+      } satisfies TextField),
+    ).toBe('Text');
+    expect(
+      fieldTypeToString({
+        type: 'uri',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          defaultValue: '',
+        },
+      } satisfies UriField),
+    ).toBe('URI');
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts b/frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts
new file mode 100644
index 0000000000..bcfd4314d3
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts
@@ -0,0 +1,42 @@
+import { ConnectionTypeConfigMapObj, ConnectionTypeField } from '~/concepts/connectionTypes/types';
+
+export const extractConnectionTypeFromMap = (
+  configMap?: ConnectionTypeConfigMapObj,
+): {
+  k8sName: string;
+  name: string;
+  description: string;
+  enabled: boolean;
+  fields: ConnectionTypeField[];
+} => ({
+  k8sName: configMap?.metadata.name ?? '',
+  name: configMap?.metadata.annotations['openshift.io/display-name'] ?? '',
+  description: configMap?.metadata.annotations['openshift.io/description'] ?? '',
+  enabled: configMap?.metadata.annotations['opendatahub.io/enabled'] === 'true',
+  fields: configMap?.data?.fields ?? [],
+});
+
+export const createConnectionTypeObj = (
+  k8sName: string,
+  displayName: string,
+  description: string,
+  enabled: boolean,
+  username: string,
+  fields: ConnectionTypeField[],
+): ConnectionTypeConfigMapObj => ({
+  kind: 'ConfigMap',
+  apiVersion: 'v1',
+  metadata: {
+    name: k8sName,
+    annotations: {
+      'openshift.io/display-name': displayName,
+      'openshift.io/description': description,
+      'opendatahub.io/enabled': enabled ? 'true' : 'false',
+      'opendatahub.io/username': username,
+    },
+    labels: { 'opendatahub.io/dashboard': 'true', 'opendatahub.io/connection-type': 'true' },
+  },
+  data: {
+    fields,
+  },
+});
diff --git a/frontend/src/concepts/connectionTypes/useConnectionType.ts b/frontend/src/concepts/connectionTypes/useConnectionType.ts
new file mode 100644
index 0000000000..00636e9339
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/useConnectionType.ts
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
+import { fetchConnectionType } from '~/services/connectionTypesService';
+import useFetchState, {
+  FetchState,
+  FetchStateCallbackPromise,
+  NotReadyError,
+} from '~/utilities/useFetchState';
+
+export const useConnectionType = (
+  name?: string,
+): FetchState<ConnectionTypeConfigMapObj | undefined> => {
+  const fetchData = React.useCallback<FetchStateCallbackPromise<ConnectionTypeConfigMapObj>>(() => {
+    if (!name) {
+      return Promise.reject(new NotReadyError('No connection type name'));
+    }
+
+    return fetchConnectionType(name);
+  }, [name]);
+
+  return useFetchState(fetchData, undefined);
+};
diff --git a/frontend/src/concepts/connectionTypes/utils.ts b/frontend/src/concepts/connectionTypes/utils.ts
index 6ed8b7b535..473fc7cac8 100644
--- a/frontend/src/concepts/connectionTypes/utils.ts
+++ b/frontend/src/concepts/connectionTypes/utils.ts
@@ -46,3 +46,14 @@ export const defaultValueToString = <T extends ConnectionTypeDataField>(
   }
   return defaultValue == null ? defaultValue : `${defaultValue}`;
 };
+
+export const fieldTypeToString = <T extends ConnectionTypeDataField>(field: T): string => {
+  if (field.type === ConnectionTypeFieldType.URI) {
+    return field.type.toUpperCase();
+  }
+
+  const withSpaces = field.type.replace(/-/g, ' ');
+  const withCapitalized = withSpaces[0].toUpperCase() + withSpaces.slice(1);
+
+  return withCapitalized;
+};
diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
index e8affd3f58..53d07703e5 100644
--- a/frontend/src/concepts/k8s/NameDescriptionField.tsx
+++ b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -16,10 +16,13 @@ import { isValidK8sName, translateDisplayNameForK8s } from '~/concepts/k8s/utils
 
 type NameDescriptionFieldProps = {
   nameFieldId: string;
+  nameFieldLabel?: string;
   descriptionFieldId: string;
+  descriptionFieldLabel?: string;
   data: NameDescType;
   setData?: (data: NameDescType) => void;
   autoFocusName?: boolean;
+  K8sLabelName?: string;
   showK8sName?: boolean;
   disableK8sName?: boolean;
   maxLength?: number;
@@ -29,10 +32,13 @@ type NameDescriptionFieldProps = {
 
 const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   nameFieldId,
+  nameFieldLabel = 'Name',
   descriptionFieldId,
+  descriptionFieldLabel = 'Description',
   data,
   setData,
   autoFocusName,
+  K8sLabelName = 'Resource name',
   showK8sName,
   disableK8sName,
   maxLength,
@@ -58,7 +64,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   return (
     <Stack hasGutter>
       <StackItem>
-        <FormGroup label="Name" isRequired fieldId={nameFieldId}>
+        <FormGroup label={nameFieldLabel} isRequired fieldId={nameFieldId}>
           <TextInput
             aria-readonly={!setData}
             isRequired
@@ -90,7 +96,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
       {showK8sName && (
         <StackItem>
           <FormGroup
-            label="Resource name"
+            label={K8sLabelName}
             labelIcon={
               <Tooltip
                 position="right"
@@ -145,7 +151,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
         </StackItem>
       )}
       <StackItem>
-        <FormGroup label="Description" fieldId={descriptionFieldId}>
+        <FormGroup label={descriptionFieldLabel} fieldId={descriptionFieldId}>
           <TextArea
             aria-readonly={!setData}
             resizeOrientation="vertical"
diff --git a/frontend/src/pages/connectionTypes/ConnectionTypeRoutes.tsx b/frontend/src/pages/connectionTypes/ConnectionTypeRoutes.tsx
new file mode 100644
index 0000000000..259b832759
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/ConnectionTypeRoutes.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Navigate, Routes, Route } from 'react-router-dom';
+import { CreateConnectionTypePage } from './create/CreateConnectionTypePage';
+import { DuplicateConnectionTypePage } from './create/DuplicateConnectionTypePage';
+import { EditConnectionTypePage } from './create/EditConnectionTypePage';
+
+const ConnectionTypeRoutes: React.FC = () => (
+  <Routes>
+    <Route path="/">
+      <Route path="create" element={<CreateConnectionTypePage />} />
+      <Route path="duplicate/:name" element={<DuplicateConnectionTypePage />} />
+      <Route path="edit/:name" element={<EditConnectionTypePage />} />
+      <Route path="*" element={<Navigate to="." />} />
+    </Route>
+  </Routes>
+);
+
+export default ConnectionTypeRoutes;
diff --git a/frontend/src/pages/connectionTypes/create/CreateConnectionTypeBreadcrumbs.tsx b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeBreadcrumbs.tsx
new file mode 100644
index 0000000000..d62b02dbdf
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeBreadcrumbs.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+
+export const CreateConnectionTypeBreadcrumbs: React.FunctionComponent = () => (
+  <Breadcrumb ouiaId="BasicBreadcrumb">
+    <BreadcrumbItem to="/connectionTypes">Connection types</BreadcrumbItem>
+    <BreadcrumbItem isActive>Create connection type</BreadcrumbItem>
+  </Breadcrumb>
+);
diff --git a/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTable.tsx b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTable.tsx
new file mode 100644
index 0000000000..f611a329e5
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTable.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { Table, Thead, Tbody, Tr, Th } from '@patternfly/react-table';
+import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
+import { CreateConnectionTypeFieldsTableRow } from './CreateConnectionTypeFieldsTableRow';
+
+const EmptyFieldsTable: React.FC = () => (
+  <Bullseye>
+    <EmptyState variant={EmptyStateVariant.sm}>
+      <EmptyStateHeader icon={<EmptyStateIcon icon={PlusCircleIcon} />} titleText="No fields" />
+      <EmptyStateBody>
+        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>
+    </EmptyState>
+  </Bullseye>
+);
+
+type CreateConnectionTypeFieldsTableProps = {
+  fields: ConnectionTypeField[];
+};
+
+export const CreateConnectionTypeFieldsTable: React.FC<CreateConnectionTypeFieldsTableProps> = ({
+  fields,
+}) => {
+  const columns = [
+    'Section heading/field name',
+    'Type',
+    'Default value',
+    'Environment variable',
+    'Required',
+  ];
+
+  // TODO: drag and drop rows
+  return (
+    <>
+      {fields.length > 0 ? (
+        <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} />
+            ))}
+          </Tbody>
+        </Table>
+      ) : (
+        <EmptyFieldsTable />
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTableRow.tsx b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTableRow.tsx
new file mode 100644
index 0000000000..f958210f46
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFieldsTableRow.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Td, Tr } from '@patternfly/react-table';
+import { Label, Switch, Text, TextContent, Truncate } from '@patternfly/react-core';
+import { ConnectionTypeField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
+import { defaultValueToString, fieldTypeToString } from '~/concepts/connectionTypes/utils';
+
+type CreateConnectionTypeFieldsTableRowProps = {
+  row: ConnectionTypeField;
+  columns: string[];
+};
+
+export const CreateConnectionTypeFieldsTableRow: React.FC<
+  CreateConnectionTypeFieldsTableRowProps
+> = ({ row, columns }) => {
+  if (row.type === ConnectionTypeFieldType.Section) {
+    return (
+      <Tr id={row.name} isStriped data-testid="row">
+        <Td dataLabel={columns[0]} colSpan={5} data-testid="field-name">
+          {row.name}{' '}
+          <Label color="blue" data-testid="section-heading">
+            Section heading
+          </Label>
+          <TextContent>
+            <Text className="pf-v5-u-color-200">{row.description}</Text>
+          </TextContent>
+        </Td>
+      </Tr>
+    );
+  }
+
+  // TODO: support row.required toggle
+  return (
+    <Tr id={row.name} data-testid="row">
+      <Td dataLabel={columns[0]} data-testid="field-name">
+        {row.name}
+        <TextContent>
+          <Text className="pf-v5-u-color-200">
+            <Truncate content={row.description ?? ''} />
+          </Text>
+        </TextContent>
+      </Td>
+      <Td dataLabel={columns[1]} data-testid="field-type">
+        {fieldTypeToString(row)}
+      </Td>
+      <Td dataLabel={columns[2]} data-testid="field-default">
+        {defaultValueToString(row) || '-'}
+      </Td>
+      <Td dataLabel={columns[3]} data-testid="field-env">
+        {row.envVar || '-'}
+      </Td>
+      <Td dataLabel={columns[4]}>
+        <Switch
+          aria-label="switch"
+          isChecked={row.required}
+          isDisabled
+          data-testid="field-required"
+        />
+      </Td>
+    </Tr>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFooter.tsx b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFooter.tsx
new file mode 100644
index 0000000000..275e056b3b
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/create/CreateConnectionTypeFooter.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+  ActionList,
+  ActionListItem,
+  Alert,
+  Button,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+type CreateConnectionTypeFooterProps = {
+  onSave: () => void;
+  onCancel: () => void;
+  createDisable: boolean;
+  errorMessage?: string;
+};
+
+export const CreateConnectionTypeFooter: React.FC<CreateConnectionTypeFooterProps> = ({
+  onSave,
+  onCancel,
+  createDisable,
+  errorMessage,
+}) => (
+  <Stack hasGutter>
+    {errorMessage && (
+      <StackItem>
+        <Alert isInline variant="danger" title="Error creating connection type">
+          {errorMessage}
+        </Alert>
+      </StackItem>
+    )}
+    <StackItem>
+      <ActionList>
+        <ActionListItem>
+          <Button
+            isDisabled={createDisable}
+            variant="primary"
+            data-testid="submit-button"
+            onClick={onSave}
+          >
+            Create
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="link" onClick={onCancel}>
+            Cancel
+          </Button>
+        </ActionListItem>
+      </ActionList>
+    </StackItem>
+  </Stack>
+);
diff --git a/frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx
new file mode 100644
index 0000000000..fded907cd9
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/create/CreateConnectionTypePage.tsx
@@ -0,0 +1,162 @@
+import * as React from 'react';
+import {
+  Button,
+  Checkbox,
+  Form,
+  FormGroup,
+  FormSection,
+  PageSection,
+} from '@patternfly/react-core';
+import { useNavigate } from 'react-router';
+import { OpenDrawerRightIcon } from '@patternfly/react-icons';
+import { createConnectionType } from '~/services/connectionTypesService';
+import { useUser } from '~/redux/selectors';
+import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
+import { ConnectionTypeConfigMapObj, ConnectionTypeField } from '~/concepts/connectionTypes/types';
+import ConnectionTypePreviewDrawer from '~/concepts/connectionTypes/ConnectionTypePreviewDrawer';
+import {
+  createConnectionTypeObj,
+  extractConnectionTypeFromMap,
+} from '~/concepts/connectionTypes/createConnectionTypeUtils';
+import { translateDisplayNameForK8s } from '~/concepts/k8s/utils';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import { NameDescType } from '~/pages/projects/types';
+import { CreateConnectionTypeFooter } from './CreateConnectionTypeFooter';
+import { CreateConnectionTypeFieldsTable } from './CreateConnectionTypeFieldsTable';
+import { CreateConnectionTypeBreadcrumbs } from './CreateConnectionTypeBreadcrumbs';
+
+type CreateConnectionTypePageProps = {
+  prefill?: ConnectionTypeConfigMapObj;
+};
+
+export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> = ({ prefill }) => {
+  const navigate = useNavigate();
+  const { username } = useUser();
+
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+
+  const {
+    k8sName: prefillK8sName,
+    name: prefillName,
+    description: prefillDescription,
+    enabled: prefillEnabled,
+    fields: prefillFields,
+  } = extractConnectionTypeFromMap(prefill);
+
+  const [connectionNameDesc, setConnectionNameDesc] = React.useState<NameDescType>({
+    k8sName: prefillK8sName,
+    name: prefillName,
+    description: prefillDescription,
+  });
+  const [connectionEnabled, setConnectionEnabled] = React.useState<boolean>(prefillEnabled);
+  const [connectionFields] = React.useState<ConnectionTypeField[]>(prefillFields);
+
+  const previewConnectionTypeObj = React.useMemo(
+    () =>
+      createConnectionTypeObj(
+        translateDisplayNameForK8s(connectionNameDesc.name),
+        connectionNameDesc.name,
+        connectionNameDesc.description,
+        connectionEnabled,
+        username,
+        connectionFields,
+      ),
+    [connectionNameDesc, connectionEnabled, connectionFields, username],
+  );
+
+  const [isCreateLoading, setIsCreateLoading] = React.useState(false);
+  const [createError, setCreateError] = React.useState<string>();
+
+  const isValid = React.useMemo(() => {
+    const trimmedName = connectionNameDesc.name.trim();
+    return Boolean(trimmedName);
+  }, [connectionNameDesc.name]);
+
+  const onSave = async () => {
+    if (isValid) {
+      setIsCreateLoading(true);
+      setCreateError(undefined);
+      const response = await createConnectionType(previewConnectionTypeObj);
+      if (response.error) {
+        setCreateError(response.error);
+      } else {
+        navigate('/connectionTypes');
+      }
+      setIsCreateLoading(false);
+    }
+  };
+
+  const onCancel = () => {
+    navigate('/connectionTypes');
+  };
+
+  return (
+    <ConnectionTypePreviewDrawer
+      isExpanded={isDrawerExpanded}
+      onClose={() => setIsDrawerExpanded(false)}
+      obj={previewConnectionTypeObj}
+    >
+      <ApplicationsPage
+        title="Create connection type"
+        loaded
+        empty={false}
+        errorMessage="Unable load to connection types"
+        breadcrumb={<CreateConnectionTypeBreadcrumbs />}
+        headerAction={
+          isDrawerExpanded ? undefined : (
+            <Button
+              variant="secondary"
+              icon={<OpenDrawerRightIcon />}
+              aria-expanded={isDrawerExpanded}
+              onClick={() => setIsDrawerExpanded(!isDrawerExpanded)}
+              data-testid="preview-drawer-toggle-button"
+            >
+              Preview
+            </Button>
+          )
+        }
+      >
+        <PageSection isFilled variant="light" className="pf-v5-u-pt-0">
+          <Form>
+            <FormSection title="Type details" style={{ maxWidth: 625 }}>
+              <NameDescriptionField
+                nameFieldId="connection-type-name"
+                nameFieldLabel="Connection type name"
+                descriptionFieldId="connection-type-description"
+                descriptionFieldLabel="Connection type description"
+                data={connectionNameDesc}
+                setData={setConnectionNameDesc}
+                autoFocusName
+              />
+              <FormGroup label="Enable">
+                <Checkbox
+                  label="Enable users in your organization to use this connection type when adding connections."
+                  id="connection-type-enable"
+                  name="connection-type-enable"
+                  data-testid="connection-type-enable"
+                  isChecked={connectionEnabled}
+                  onChange={(_e, value) => setConnectionEnabled(value)}
+                />
+              </FormGroup>
+            </FormSection>
+            <FormSection title="Fields" className="pf-v5-u-mt-0">
+              Add fields to prompt users to input information, and optionally assign default values
+              to those fields.
+              <FormGroup>
+                <CreateConnectionTypeFieldsTable fields={connectionFields} />
+              </FormGroup>
+            </FormSection>
+          </Form>
+        </PageSection>
+        <PageSection stickyOnBreakpoint={{ default: 'bottom' }} variant="light">
+          <CreateConnectionTypeFooter
+            onSave={onSave}
+            onCancel={onCancel}
+            createDisable={!isValid || isCreateLoading}
+            errorMessage={createError}
+          />
+        </PageSection>
+      </ApplicationsPage>
+    </ConnectionTypePreviewDrawer>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/create/DuplicateConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/create/DuplicateConnectionTypePage.tsx
new file mode 100644
index 0000000000..a26500bf40
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/create/DuplicateConnectionTypePage.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useParams } from 'react-router';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import { useConnectionType } from '~/concepts/connectionTypes/useConnectionType';
+import { CreateConnectionTypePage } from './CreateConnectionTypePage';
+
+export const DuplicateConnectionTypePage: React.FC = () => {
+  const { name } = useParams();
+  const [existingConnectionType, isLoaded, error] = useConnectionType(name);
+
+  if (existingConnectionType) {
+    const duplicate = {
+      ...existingConnectionType,
+      metadata: {
+        ...existingConnectionType.metadata,
+        name: '',
+        annotations: {
+          ...existingConnectionType.metadata.annotations,
+          'openshift.io/display-name': `Duplicate of ${existingConnectionType.metadata.annotations['openshift.io/display-name']}`,
+          'opendatahub.io/username': '',
+        },
+      },
+    };
+
+    return <CreateConnectionTypePage prefill={duplicate} />;
+  }
+  return <ApplicationsPage loaded={isLoaded} loadError={error} empty />;
+};
diff --git a/frontend/src/pages/connectionTypes/create/EditConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/create/EditConnectionTypePage.tsx
new file mode 100644
index 0000000000..ba27369fd0
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/create/EditConnectionTypePage.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { CreateConnectionTypePage } from './CreateConnectionTypePage';
+
+export const EditConnectionTypePage: React.FC = () => <CreateConnectionTypePage />;