Create delete connection type

frontend/src/__tests__/cypress/cypress/support/commands/odh.ts

@@ -568,6 +568,22 @@ declare global {
           },
           response: OdhResponse<{ notebook: NotebookKind; isRunning: boolean }>,
         ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/artifacts/:artifactId',
+          options: {
+            query: { view: string };
+            path: { namespace: string; serviceName: string; artifactId: number };
+          },
+          response: OdhResponse<ArtifactStorage>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/artifacts/:artifactId',
+          options: {
+            query: { view: string };
+            path: { namespace: string; serviceName: string; artifactId: number };
+          },
+          response: OdhResponse<ArtifactStorage>,
+        ) => Cypress.Chainable<null>) &
         ((
           type: 'GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/artifacts/:artifactId',
           options: {
@@ -592,7 +608,23 @@ declare global {
           options: {
             path: { name: string };
           },
-          response: ConnectionTypeConfigMap,
+          response: OdhResponse<number>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/connection-types',
+          response: ConnectionTypeConfigMap[],
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'DELETE /api/connection-types/:name',
+          options: { path: { name: string } },
+          response: OdhResponse<SuccessErrorResponse>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'PATCH /api/connection-types/:name',
+          options: {
+            path: { name: string };
+          },
+          response: { success: boolean; error: string },
         ) => Cypress.Chainable<null>);
     }
   }

frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/connectionTypes.cy.ts

@@ -6,6 +6,7 @@ import {
 import { connectionTypesPage } from '~/__tests__/cypress/cypress/pages/connectionTypes';
 import { mockDashboardConfig } from '~/__mocks__';
 import { mockConnectionTypeConfigMap } from '~/__mocks__/mockConnectionType';
+import { deleteModal } from '~/__tests__/cypress/cypress/pages/components/DeleteModal';
 
 it('Connection types should not be available for non product admins', () => {
   asProjectAdminUser();
@@ -76,4 +77,32 @@ describe('Connection types', () => {
     row2.shouldShowPreInstalledLabel();
     row2.shouldBeDisabled();
   });
+
+  it('should delete connection type', () => {
+    connectionTypesPage.visit();
+    cy.interceptOdh(
+      'DELETE /api/connection-types/:name',
+      {
+        path: { name: 'test-2' },
+      },
+      { success: true },
+    ).as('delete');
+    cy.interceptOdh('GET /api/connection-types', [
+      mockConnectionTypeConfigMap({}),
+      mockConnectionTypeConfigMap({
+        name: 'no-display-name',
+        displayName: '',
+        description: 'description 2',
+        username: 'Pre-installed',
+        enabled: false,
+      }),
+    ]);
+
+    connectionTypesPage.shouldHaveConnectionTypes();
+    connectionTypesPage.getConnectionTypeRow('Test display name').findKebabAction('Delete').click();
+    deleteModal.findSubmitButton().should('be.disabled');
+    deleteModal.findInput().fill('Test display name');
+    deleteModal.findSubmitButton().should('be.enabled').click();
+    cy.wait('@delete');
+  });
 });

frontend/src/pages/connectionTypes/ConnectionTypesTable.tsx

@@ -6,6 +6,7 @@ import ConnectionTypesTableRow from '~/pages/connectionTypes/ConnectionTypesTabl
 import ConnectionTypesTableToolbar from '~/pages/connectionTypes/ConnectionTypesTableToolbar';
 import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
 import { Table } from '~/components/table';
+import DeleteConnectionTypeModal from '~/pages/connectionTypes/DeleteConnectionTypeModal';
 import {
   getCreatorFromK8sResource,
   getDescriptionFromK8sResource,
@@ -21,6 +22,10 @@ const ConnectionTypesTable: React.FC<Props> = ({ connectionTypes, onUpdate }) =>
   const [filterData, setFilterData] = React.useState<FilterDataType>(initialFilterData);
   const onClearFilters = React.useCallback(() => setFilterData(initialFilterData), [setFilterData]);
 
+  const [deleteConnectionType, setDeleteConnectionType] = React.useState<
+    ConnectionTypeConfigMapObj | undefined
+  >();
+
   const filteredConnectionTypes = React.useMemo(
     () =>
       connectionTypes.filter((connectionType) => {
@@ -48,29 +53,42 @@ const ConnectionTypesTable: React.FC<Props> = ({ connectionTypes, onUpdate }) =>
   };
 
   return (
-    <Table
-      variant="compact"
-      data={filteredConnectionTypes}
-      columns={connectionTypeColumns}
-      defaultSortColumn={0}
-      data-testid="connection-types-table"
-      rowRenderer={(connectionType) => (
-        <ConnectionTypesTableRow
-          key={connectionType.metadata.name}
-          obj={connectionType}
-          onUpdate={onUpdate}
-        />
-      )}
-      toolbarContent={
-        <ConnectionTypesTableToolbar
-          filterData={filterData}
-          setFilterData={setFilterData}
-          onClearFilters={onClearFilters}
-        />
-      }
-      disableItemCount
-      emptyTableView={<DashboardEmptyTableView onClearFilters={resetFilters} />}
-    />
+    <>
+      <Table
+        variant="compact"
+        data={filteredConnectionTypes}
+        columns={connectionTypeColumns}
+        defaultSortColumn={0}
+        data-testid="connection-types-table"
+        rowRenderer={(connectionType) => (
+          <ConnectionTypesTableRow
+            key={connectionType.metadata.name}
+            obj={connectionType}
+            onUpdate={onUpdate}
+            handleDelete={(connection) => setDeleteConnectionType(connection)}
+          />
+        )}
+        toolbarContent={
+          <ConnectionTypesTableToolbar
+            filterData={filterData}
+            setFilterData={setFilterData}
+            onClearFilters={onClearFilters}
+          />
+        }
+        disableItemCount
+        emptyTableView={<DashboardEmptyTableView onClearFilters={resetFilters} />}
+        id="connectionTypes-list-table"
+      />
+      <DeleteConnectionTypeModal
+        connectionType={deleteConnectionType}
+        onClose={(deleted) => {
+          if (deleted) {
+            onUpdate();
+          }
+          setDeleteConnectionType(undefined);
+        }}
+      />
+    </>
   );
 };
 

frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx

@@ -17,9 +17,14 @@ import {
 type ConnectionTypesTableRowProps = {
   obj: ConnectionTypeConfigMapObj;
   onUpdate: () => void;
+  handleDelete: (cr: ConnectionTypeConfigMapObj) => void;
 };
 
-const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({ obj, onUpdate }) => {
+const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({
+  obj,
+  onUpdate,
+  handleDelete,
+}) => {
   const navigate = useNavigate();
   const notification = useNotification();
   const [isUpdating, setIsUpdating] = React.useState(false);
@@ -106,7 +111,7 @@ const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({ obj,
             },
             {
               title: 'Delete',
-              isAriaDisabled: true,
+              onClick: () => handleDelete(obj),
             },
           ]}
         />

frontend/src/pages/connectionTypes/DeleteConnectionTypeModal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
+import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import DeleteModal from '~/pages/projects/components/DeleteModal';
+import { deleteConnectionType } from '~/services/connectionTypesService';
+
+type DeleteConnectionTypeModalProps = {
+  connectionType?: ConnectionTypeConfigMapObj;
+  onClose: (deleted: boolean) => void;
+};
+
+const DeleteConnectionTypeModal: React.FC<DeleteConnectionTypeModalProps> = ({
+  connectionType,
+  onClose,
+}) => {
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+
+  const onBeforeClose = (deleted: boolean) => {
+    onClose(deleted);
+    setIsDeleting(false);
+    setError(undefined);
+  };
+
+  const deleteName = connectionType
+    ? getDisplayNameFromK8sResource(connectionType)
+    : 'this connection type';
+
+  return (
+    <DeleteModal
+      title="Delete connection type?"
+      isOpen={!!connectionType}
+      onClose={() => onBeforeClose(false)}
+      submitButtonLabel="Delete"
+      onDelete={() => {
+        if (connectionType) {
+          setIsDeleting(true);
+          deleteConnectionType(connectionType.metadata.name)
+            .then(() => {
+              onBeforeClose(true);
+            })
+            .catch((e) => {
+              setError(e);
+              setIsDeleting(false);
+            });
+        }
+      }}
+      deleting={isDeleting}
+      error={error}
+      deleteName={deleteName}
+    >
+      The <b>{deleteName}</b> connection type will be deleted. Existing connections of this type
+      will not be affected.
+    </DeleteModal>
+  );
+};
+
+export default DeleteConnectionTypeModal;