Skip to content

Commit

Permalink
add delete connection type
Browse files Browse the repository at this point in the history
  • Loading branch information
ashley-o0o committed Aug 14, 2024
1 parent 58cbe32 commit 6288382
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 28 deletions.
14 changes: 14 additions & 0 deletions frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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');
});
});
69 changes: 43 additions & 26 deletions frontend/src/pages/connectionTypes/ConnectionTypesTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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();
Expand Down Expand Up @@ -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);
}}
/>
</>
);
};

Expand Down
19 changes: 17 additions & 2 deletions frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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>();
Expand Down Expand Up @@ -112,6 +117,16 @@ const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({ obj,
) : null}
</Flex>
</Td>
<Td isActionCell>
<ActionsColumn
items={[
{
title: 'Delete',
onClick: () => handleDelete(obj),
},
]}
/>
</Td>
</Tr>
);
};
Expand Down
58 changes: 58 additions & 0 deletions frontend/src/pages/connectionTypes/DeleteConnectionTypeModal.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 6288382

Please sign in to comment.