From 12115104c84d23e3d0ff39b39adff9d7edcda0e6 Mon Sep 17 00:00:00 2001
From: Ashley McEntee <123661468+ashley-o0o@users.noreply.github.com>
Date: Thu, 15 Aug 2024 10:30:00 -0400
Subject: [PATCH] Create delete connection type

---
 .../cypress/cypress/support/commands/odh.ts   | 18 +++++-
 .../connectionTypes/connectionTypes.cy.ts     | 29 +++++++++
 .../connectionTypes/ConnectionTypesTable.tsx  | 64 ++++++++++++-------
 .../ConnectionTypesTableRow.tsx               |  9 ++-
 .../DeleteConnectionTypeModal.tsx             | 49 ++++++++++++++
 5 files changed, 144 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/pages/connectionTypes/DeleteConnectionTypeModal.tsx

diff --git a/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts b/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
index 6677993ff7..f3bf316a76 100644
--- a/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
+++ b/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
@@ -592,7 +592,23 @@ declare global {
           options: {
             path: { name: string };
           },
-          response: ConnectionTypeConfigMap,
+          response: OdhResponse<ConnectionTypeConfigMap>,
+        ) => 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: SuccessErrorResponse,
         ) => Cypress.Chainable<null>);
     }
   }
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/connectionTypes.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/connectionTypes.cy.ts
index 1d27bcec0c..ca65bb8111 100644
--- a/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/connectionTypes.cy.ts
+++ b/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');
+  });
 });
diff --git a/frontend/src/pages/connectionTypes/ConnectionTypesTable.tsx b/frontend/src/pages/connectionTypes/ConnectionTypesTable.tsx
index 0a7dc01506..df39c19c04 100644
--- a/frontend/src/pages/connectionTypes/ConnectionTypesTable.tsx
+++ b/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,44 @@ 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}
+    <>
+      <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"
+      />
+      {deleteConnectionType ? (
+        <DeleteConnectionTypeModal
+          connectionType={deleteConnectionType}
+          onClose={(deleted) => {
+            if (deleted) {
+              onUpdate();
+            }
+            setDeleteConnectionType(undefined);
+          }}
         />
-      }
-      disableItemCount
-      emptyTableView={<DashboardEmptyTableView onClearFilters={resetFilters} />}
-    />
+      ) : null}
+    </>
   );
 };
 
diff --git a/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx b/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx
index eece4e9186..8003a72c5d 100644
--- a/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx
+++ b/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),
             },
           ]}
         />
diff --git a/frontend/src/pages/connectionTypes/DeleteConnectionTypeModal.tsx b/frontend/src/pages/connectionTypes/DeleteConnectionTypeModal.tsx
new file mode 100644
index 0000000000..c20626d2d0
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/DeleteConnectionTypeModal.tsx
@@ -0,0 +1,49 @@
+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 = getDisplayNameFromK8sResource(connectionType);
+
+  return (
+    <DeleteModal
+      title="Delete connection type?"
+      isOpen={!!connectionType}
+      onClose={() => onBeforeClose(false)}
+      submitButtonLabel="Delete"
+      onDelete={() => {
+        setIsDeleting(true);
+        deleteConnectionType(connectionType.metadata.name).then(() => {
+          onBeforeClose(true);
+        });
+      }}
+      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;