diff --git a/packages/manager/.changeset/pr-13236-upcoming-features-1767383949809.md b/packages/manager/.changeset/pr-13236-upcoming-features-1767383949809.md new file mode 100644 index 00000000000..18ffd4a5544 --- /dev/null +++ b/packages/manager/.changeset/pr-13236-upcoming-features-1767383949809.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Delete Database Connection Pool dialog ([#13236](https://github.com/linode/manager/pull/13236)) diff --git a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx index 9a4c36b1985..fc3f9e1337f 100644 --- a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx +++ b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx @@ -27,6 +27,7 @@ interface EntityInfo { | 'Alert' | 'Bucket' | 'Database' + | 'Database Connection Pool' | 'Domain' | 'Image' | 'Kubernetes' diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts index ac10c20c467..438422d0905 100644 --- a/packages/manager/src/factories/databases.ts +++ b/packages/manager/src/factories/databases.ts @@ -292,7 +292,7 @@ export const databaseConnectionPoolFactory = Factory.Sync.makeFactory({ database: 'defaultdb', mode: 'transaction', - label: Factory.each((i) => `pool/${i}`), + label: Factory.each((i) => `test-pool-${i}`), size: 10, username: null, }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolDeleteDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolDeleteDialog.tsx new file mode 100644 index 00000000000..29d3954f05e --- /dev/null +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolDeleteDialog.tsx @@ -0,0 +1,65 @@ +import { useDeleteDatabaseConnectionPoolMutation } from '@linode/queries'; +import { ActionsPanel, Notice } from '@linode/ui'; +import { useSnackbar } from 'notistack'; +import * as React from 'react'; + +import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; + +interface Props { + databaseId: number; + onClose: () => void; + open: boolean; + poolLabel: string; +} + +export const DatabaseConnectionPoolDeleteDialog = (props: Props) => { + const { onClose, open, databaseId, poolLabel } = props; + const { enqueueSnackbar } = useSnackbar(); + const { + error, + isPending, + reset, + mutateAsync: deleteConnectionPool, + } = useDeleteDatabaseConnectionPoolMutation(databaseId, poolLabel); + + const onDelete = () => { + deleteConnectionPool().then(() => { + enqueueSnackbar(`Connection Pool ${poolLabel} deleted successfully.`, { + variant: 'success', + }); + onClose(); + }); + }; + + const clearErrorAndClose = () => { + reset(); + onClose(); + }; + + const actions = ( + + ); + + return ( + clearErrorAndClose()} + open={open} + title={`Delete Connection Pool ${poolLabel}?`} + > + + Warning: Deletion will break the service URI for any + clients using this pool. + + + ); +}; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx new file mode 100644 index 00000000000..714b18bb197 --- /dev/null +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx @@ -0,0 +1,63 @@ +import { Hidden } from '@linode/ui'; +import { TableCell, TableRow } from 'akamai-cds-react-components/Table'; +import * as React from 'react'; + +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; +import { CONNECTION_POOL_LABEL_CELL_STYLES } from 'src/features/Databases/constants'; +import { StyledActionMenuWrapper } from 'src/features/Databases/shared.styles'; + +import type { ConnectionPool } from '@linode/api-v4'; +import type { Action } from 'src/components/ActionMenu/ActionMenu'; + +interface Props { + /** + * Function called when the delete button in the Action Menu is pressed. + */ + onDelete: (pool: ConnectionPool) => void; + /** + * Payment method type and data. + */ + pool: ConnectionPool; +} + +export const DatabaseConnectionPoolRow = (props: Props) => { + const { pool, onDelete } = props; + + const connectionPoolActions: Action[] = [ + { + onClick: () => null, + title: 'Edit', // TODO: UIE-9395 Implement edit functionality + }, + { + onClick: () => onDelete(pool), + title: 'Delete', + }, + ]; + + return ( + + + {pool.label} + + + + {`${pool.mode.charAt(0).toUpperCase()}${pool.mode.slice(1)}`} + + + + {pool.size} + + + + {pool.username === null ? 'Reuse inbound user' : pool.username} + + + + + + + ); +}; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx index 7ff53ab74ac..74a3c3c4270 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx @@ -19,21 +19,19 @@ import { } from 'akamai-cds-react-components/Table'; import React from 'react'; -import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { MIN_PAGE_SIZE, PAGE_SIZES, } from 'src/components/PaginationFooter/PaginationFooter.constants'; +import { CONNECTION_POOL_LABEL_CELL_STYLES } from 'src/features/Databases/constants'; import { usePaginationV2 } from 'src/hooks/usePaginationV2'; -import { - makeSettingsItemStyles, - StyledActionMenuWrapper, -} from '../../shared.styles'; +import { makeSettingsItemStyles } from '../../shared.styles'; import { ServiceURI } from '../ServiceURI'; +import { DatabaseConnectionPoolDeleteDialog } from './DatabaseConnectionPoolDeleteDialog'; +import { DatabaseConnectionPoolRow } from './DatabaseConnectionPoolRow'; import type { Database } from '@linode/api-v4'; -import type { Action } from 'src/components/ActionMenu/ActionMenu'; interface Props { database: Database; @@ -43,9 +41,9 @@ interface Props { export const DatabaseConnectionPools = ({ database }: Props) => { const { classes } = makeSettingsItemStyles(); const theme = useTheme(); - const poolLabelCellStyles = { - flex: '.5 1 20.5%', - }; + + const [deletePoolLabelSelection, setDeletePoolLabelSelection] = + React.useState(); const pagination = usePaginationV2({ currentRoute: '/databases/$engine/$databaseId/networking', @@ -62,17 +60,6 @@ export const DatabaseConnectionPools = ({ database }: Props) => { page_size: pagination.pageSize, }); - const connectionPoolActions: Action[] = [ - { - onClick: () => null, - title: 'Edit', // TODO: UIE-9395 Implement edit functionality - }, - { - onClick: () => null, // TODO: UIE-9430 Implement delete functionality - title: 'Delete', - }, - ]; - if (connectionPoolsLoading) { return ; } @@ -127,7 +114,7 @@ export const DatabaseConnectionPools = ({ database }: Props) => { } headerborder > - + Pool Label @@ -156,32 +143,11 @@ export const DatabaseConnectionPools = ({ database }: Props) => { ) : ( connectionPools?.data.map((pool) => ( - - - {pool.label} - - - - {`${pool.mode.charAt(0).toUpperCase()}${pool.mode.slice(1)}`} - - - - {pool.size} - - - - {pool.username === null - ? 'Reuse inbound user' - : pool.username} - - - - - - + setDeletePoolLabelSelection(pool.label)} + pool={pool} + /> )) )} @@ -207,6 +173,12 @@ export const DatabaseConnectionPools = ({ database }: Props) => { }} /> )} + setDeletePoolLabelSelection(null)} + open={Boolean(deletePoolLabelSelection)} + poolLabel={deletePoolLabelSelection ?? ''} + /> ); }; diff --git a/packages/manager/src/features/Databases/constants.ts b/packages/manager/src/features/Databases/constants.ts index a1c3d7e3e77..3e3845fc9b1 100644 --- a/packages/manager/src/features/Databases/constants.ts +++ b/packages/manager/src/features/Databases/constants.ts @@ -71,3 +71,7 @@ export const ADVANCED_CONFIG_LEARN_MORE_LINK = 'https://techdocs.akamai.com/cloud-computing/docs/advanced-configuration-parameters'; export const MANAGE_NETWORKING_LEARN_MORE_LINK = 'https://techdocs.akamai.com/cloud-computing/docs/aiven-manage-database#manage-networking'; + +export const CONNECTION_POOL_LABEL_CELL_STYLES = { + flex: '.5 1 20.5%', +};