add delete connection type

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

@@ -51,6 +51,7 @@ import type {
 } from '~/concepts/pipelines/kfTypes';
 import type { GrpcResponse } from '~/__mocks__/mlmd/utils';
 import type { BuildMockPipelinveVersionsType } from '~/__mocks__';
+import type { ArtifactStorage } from '~/concepts/pipelines/types';
 
 type SuccessErrorResponse = {
   success: boolean;
@@ -567,6 +568,14 @@ 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/storage/:namespace',
           options: {
@@ -587,6 +596,11 @@ declare global {
           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: {

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();
@@ -103,4 +104,32 @@ describe('Connection types', () => {
     row2.findEnableSwitch().click();
     row2.findEnableStatus().should('have.text', 'Enabling...');
   });
+
+  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,11 +6,12 @@ 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';
 
-interface ConnectionTypesTableProps {
+type ConnectionTypesTableProps = {
   connectionTypes: ConnectionTypeConfigMapObj[];
   onUpdate: () => void;
-}
+};
 
 const ConnectionTypesTable: React.FC<ConnectionTypesTableProps> = ({
   connectionTypes,
@@ -19,6 +20,10 @@ const ConnectionTypesTable: React.FC<ConnectionTypesTableProps> = ({
   const [filterData, setFilterData] = React.useState<FilterDataType>(initialFilterData);
   const onClearFilters = React.useCallback(() => setFilterData(initialFilterData), [setFilterData]);
 
+  const [deleteConnectionType, setDeleteConnectionType] = React.useState<
+    ConnectionTypeConfigMapObj | undefined
+  >();
+
   const filteredConnectionTypes = connectionTypes.filter((connectionType) => {
     const keywordFilter = filterData.Keyword?.toLowerCase();
     const createFilter = filterData['Created by']?.toLowerCase();
@@ -51,30 +56,42 @@ const ConnectionTypesTable: React.FC<ConnectionTypesTableProps> = ({
   };
 
   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} />}
-      id="connectionTypes-list-table"
-    />
+    <>
+      <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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Td, Tr } from '@patternfly/react-table';
+import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
 import {
   Flex,
   Icon,
@@ -19,9 +19,14 @@ import { updateConnectionTypeEnabled } from '~/services/connectionTypesService';
 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 [statusMessage, setStatusMessage] = React.useState<string | undefined>();
   const [errorMessage, setErrorMessage] = React.useState<string | undefined>();
   const pendingEnabledState = React.useRef<'true' | 'false' | undefined>();
@@ -112,6 +117,16 @@ const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({ obj,
           ) : null}
         </Flex>
       </Td>
+      <Td isActionCell>
+        <ActionsColumn
+          items={[
+            {
+              title: 'Delete',
+              onClick: () => handleDelete(obj),
+            },
+          ]}
+        />
+      </Td>
     </Tr>
   );
 };

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;