Add delete modal for project connections

frontend/src/__tests__/cypress/cypress/pages/connections.ts

@@ -0,0 +1,15 @@
+import { TableRow } from './components/table';
+
+class ConnectionsPage {
+  findTable() {
+    return cy.findByTestId('connection-table');
+  }
+
+  getConnectionRow(name: string) {
+    return new TableRow(() =>
+      this.findTable().findAllByTestId(`table-row-title`).contains(name).parents('tr'),
+    );
+  }
+}
+
+export const connectionsPage = new ConnectionsPage();

frontend/src/__tests__/cypress/cypress/tests/mocked/projects/connections.cy.ts

@@ -1,4 +1,5 @@
 import {
+  mock200Status,
   mockDashboardConfig,
   mockK8sResourceList,
   mockProjectK8sResource,
@@ -7,6 +8,8 @@ import {
 import { mockConnectionTypeConfigMap } from '~/__mocks__/mockConnectionType';
 import { projectDetails } from '~/__tests__/cypress/cypress/pages/projects';
 import { ProjectModel, SecretModel } from '~/__tests__/cypress/cypress/utils/models';
+import { connectionsPage } from '~/__tests__/cypress/cypress/pages/connections';
+import { deleteModal } from '~/__tests__/cypress/cypress/pages/components/DeleteModal';
 
 const initIntercepts = (isEmpty = false) => {
   cy.interceptK8sList(
@@ -51,9 +54,31 @@ describe('Connections', () => {
     initIntercepts();
     projectDetails.visitSection('test-project', 'connections');
     projectDetails.shouldBeEmptyState('Connections', 'connections', false);
-    cy.findByTestId('connection-table').findByText('test1').should('exist');
-    cy.findByTestId('connection-table').findByText('s3').should('exist');
-    cy.findByTestId('connection-table').findByText('test2').should('exist');
-    cy.findByTestId('connection-table').findByText('postgres').should('exist');
+    connectionsPage.findTable().findByText('test1').should('exist');
+    connectionsPage.findTable().findByText('s3').should('exist');
+    connectionsPage.findTable().findByText('test2').should('exist');
+    connectionsPage.findTable().findByText('postgres').should('exist');
+  });
+
+  it('Delete a connection', () => {
+    initIntercepts();
+    cy.interceptK8s(
+      'DELETE',
+      {
+        model: SecretModel,
+        ns: 'test-project',
+        name: 'test1',
+      },
+      mock200Status({}),
+    ).as('deleteConnection');
+
+    projectDetails.visitSection('test-project', 'connections');
+
+    connectionsPage.getConnectionRow('test1').findKebabAction('Delete').click();
+    deleteModal.findSubmitButton().should('be.disabled');
+    deleteModal.findInput().fill('test1');
+    deleteModal.findSubmitButton().should('be.enabled').click();
+
+    cy.wait('@deleteConnection');
   });
 });

frontend/src/pages/projects/ProjectDetailsContext.tsx

@@ -102,6 +102,7 @@ const ProjectDetailsContextProvider: React.FC = () => {
   const notebookRefresh = notebooks.refresh;
   const pvcRefresh = pvcs.refresh;
   const dataConnectionRefresh = dataConnections.refresh;
+  const connectionRefresh = connections.refresh;
   const servingRuntimeRefresh = servingRuntimes.refresh;
   const servingRuntimeTemplateOrderRefresh = servingRuntimeTemplateOrder.refresh;
   const servingRuntimeTemplateDisablementRefresh = servingRuntimeTemplateDisablement.refresh;
@@ -112,6 +113,7 @@ const ProjectDetailsContextProvider: React.FC = () => {
     setTimeout(notebookRefresh, 2000);
     pvcRefresh();
     dataConnectionRefresh();
+    connectionRefresh();
     servingRuntimeRefresh();
     inferenceServiceRefresh();
     projectSharingRefresh();
@@ -122,6 +124,7 @@ const ProjectDetailsContextProvider: React.FC = () => {
     notebookRefresh,
     pvcRefresh,
     dataConnectionRefresh,
+    connectionRefresh,
     servingRuntimeRefresh,
     servingRuntimeTemplateOrderRefresh,
     servingRuntimeTemplateDisablementRefresh,

frontend/src/pages/projects/screens/detail/connections/ConnectionsDeleteModal.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { K8sStatus } from '@openshift/dynamic-plugin-sdk-utils';
+import { Connection } from '~/concepts/connectionTypes/types';
+import DeleteModal from '~/pages/projects/components/DeleteModal';
+
+type Props = {
+  deleteConnection: Connection;
+  onClose: () => void;
+  onDelete: () => Promise<K8sStatus>;
+  refresh: () => void;
+};
+
+export const ConnectionsDeleteModal: React.FC<Props> = ({
+  deleteConnection,
+  onClose,
+  refresh,
+  onDelete,
+}) => {
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<Error>();
+
+  return (
+    <DeleteModal
+      title="Delete connection?"
+      isOpen
+      onClose={onClose}
+      submitButtonLabel="Delete"
+      onDelete={() => {
+        setIsDeleting(true);
+        setError(undefined);
+
+        onDelete()
+          .then(() => {
+            onClose();
+            refresh();
+          })
+          .catch((e) => {
+            setError(e);
+            setIsDeleting(false);
+          });
+      }}
+      deleting={isDeleting}
+      error={error}
+      deleteName={deleteConnection.metadata.annotations['openshift.io/display-name'] ?? ''}
+    >
+      <>
+        The <b>{deleteConnection.metadata.annotations['openshift.io/display-name']}</b> connection
+        will be deleted, and its dependent resources will stop working.{' '}
+      </>
+    </DeleteModal>
+  );
+};

frontend/src/pages/projects/screens/detail/connections/ConnectionsList.tsx

@@ -17,6 +17,7 @@ const ConnectionsDescription =
 const ConnectionsList: React.FC = () => {
   const {
     connections: { data: connections, loaded, error },
+    refreshAllProjectData: refresh,
   } = React.useContext(ProjectDetailsContext);
   const [connectionTypes, connectionTypesLoaded, connectionTypesError] = useWatchConnectionTypes();
 
@@ -60,7 +61,11 @@ const ConnectionsList: React.FC = () => {
         />
       }
     >
-      <ConnectionsTable connections={connections} connectionTypes={connectionTypes} />
+      <ConnectionsTable
+        connections={connections}
+        connectionTypes={connectionTypes}
+        refreshConnections={refresh}
+      />
     </DetailsSection>
   );
 };

frontend/src/pages/projects/screens/detail/connections/ConnectionsTable.tsx

@@ -1,29 +1,54 @@
 import * as React from 'react';
 import { Connection, ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
+import { deleteSecret } from '~/api';
 import { Table } from '~/components/table';
 import ConnectionsTableRow from './ConnectionsTableRow';
 import { columns } from './connectionsTableColumns';
+import { ConnectionsDeleteModal } from './ConnectionsDeleteModal';
 
 type ConnectionsTableProps = {
   connections: Connection[];
   connectionTypes?: ConnectionTypeConfigMapObj[];
+  refreshConnections: () => void;
 };
 
-const ConnectionsTable: React.FC<ConnectionsTableProps> = ({ connections, connectionTypes }) => (
-  <Table
-    data={connections}
-    data-testid="connection-table"
-    columns={columns}
-    rowRenderer={(connection) => (
-      <ConnectionsTableRow
-        key={connection.metadata.name}
-        obj={connection}
-        connectionTypes={connectionTypes}
-        onEditConnection={() => undefined}
-        onDeleteConnection={() => undefined}
+const ConnectionsTable: React.FC<ConnectionsTableProps> = ({
+  connections,
+  connectionTypes,
+  refreshConnections,
+}) => {
+  const [deleteConnection, setDeleteConnection] = React.useState<Connection>();
+
+  return (
+    <>
+      <Table
+        data={connections}
+        data-testid="connection-table"
+        columns={columns}
+        rowRenderer={(connection) => (
+          <ConnectionsTableRow
+            key={connection.metadata.name}
+            obj={connection}
+            connectionTypes={connectionTypes}
+            onEditConnection={() => undefined}
+            onDeleteConnection={() => setDeleteConnection(connection)}
+          />
+        )}
+        isStriped
       />
-    )}
-    isStriped
-  />
-);
+      {deleteConnection && (
+        <ConnectionsDeleteModal
+          deleteConnection={deleteConnection}
+          onClose={() => {
+            setDeleteConnection(undefined);
+          }}
+          onDelete={() =>
+            deleteSecret(deleteConnection.metadata.namespace, deleteConnection.metadata.name)
+          }
+          refresh={refreshConnections}
+        />
+      )}
+    </>
+  );
+};
 export default ConnectionsTable;

frontend/src/pages/projects/screens/detail/connections/__tests__/ConnectionsTable.spec.tsx

@@ -9,6 +9,7 @@ describe('ConnectionsTable', () => {
     render(
       <ConnectionsTable
         connections={[mockConnection({ displayName: 'connection1', description: 'desc1' })]}
+        refreshConnections={() => undefined}
       />,
     );
 
@@ -25,6 +26,7 @@ describe('ConnectionsTable', () => {
         connectionTypes={[
           mockConnectionTypeConfigMapObj({ name: 's3', displayName: 'S3 Buckets' }),
         ]}
+        refreshConnections={() => undefined}
       />,
     );