Skip to content

upcoming: [UIE-9430] - Delete Database Connection Pool dialog #13236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hana-akamai merged 8 commits into from
Jan 6, 2026
Merged

upcoming: [UIE-9430] - Delete Database Connection Pool dialog #13236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6280f12
wip delete database connection pool dialog
hana-akamai Dec 31, 2025
6eebdde
Added changeset: Delete Database Connection Pool dialog
hana-akamai Jan 2, 2026
084d5b3
update delete label
hana-akamai Jan 2, 2026
4c9e2dd
Merge branch 'develop' into UIE-9430-delete-database-connection-pool
hana-akamai Jan 2, 2026
7efafb7
clean up and fix delete
hana-akamai Jan 2, 2026
d334491
address feedback
hana-akamai Jan 5, 2026
dbc90fc
update mock data label
hana-akamai Jan 5, 2026
f4e52e7
copy updates
hana-akamai Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-13236-upcoming-features-1767383949809.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

Delete Database Connection Pool dialog ([#13236](https://github.com/linode/manager/pull/13236))
1 change: 1 addition & 0 deletions packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ interface EntityInfo {
| 'Alert'
| 'Bucket'
| 'Database'
| 'Database Connection Pool'
| 'Domain'
| 'Image'
| 'Kubernetes'
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/factories/databases.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ export const databaseConnectionPoolFactory =
Factory.Sync.makeFactory<ConnectionPool>({
database: 'defaultdb',
mode: 'transaction',
label: Factory.each((i) => `pool/${i}`),
label: Factory.each((i) => `test-pool-${i}`),
size: 10,
username: null,
});
Expand Down
65 changes: 65 additions & 0 deletions ...atures/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolDeleteDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = (
<ActionsPanel
primaryButtonProps={{
label: 'Delete Connection Pool',
loading: isPending,
onClick: onDelete,
}}
secondaryButtonProps={{ label: 'Cancel', onClick: clearErrorAndClose }}
style={{ padding: 0 }}
/>
);

return (
<ConfirmationDialog
actions={actions}
error={error}
onClose={() => clearErrorAndClose()}
open={open}
title={`Delete Connection Pool ${poolLabel}?`}
>
<Notice variant="warning">
<strong>Warning:</strong> Deletion will break the service URI for any
clients using this pool.
</Notice>
</ConfirmationDialog>
);
};
Copy link
Contributor

@smans-akamai smans-akamai Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some additional requirements for the delete dialog shown in the wireframes that are missing.

  1. The title doesn't follow the format shown in the wireframes from tech writing. It should be:
    {action} the {label} {object}?
    So in this case, it would be Delete the {poolLabel} connection pool?

  2. In the wireframes, they have a warning notification banner that explains the impact of deleting a connection pool. That should also be added.

Copy link
Contributor

@smans-akamai smans-akamai Jan 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the discussion with tech writing on the dialog title format in the wireframes, there are likely other dialogs in DBaaS that will need to be updated, such as database delete. We should make make a follow up ticket to address the title format for those other dialogs for consistency.

Copy link
Contributor Author

@hana-akamai hana-akamai Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a comment in the figma, I added the to this dialog for now but I think the title reads cleaner without the the

Copy link
Contributor

@smans-akamai smans-akamai Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After further discussion, the title format will be discussed with tech writing.

63 changes: 63 additions & 0 deletions ...er/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Check warning on line 29 in packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx

View workflow job for this annotation

GitHub Actions / ESLint Review (manager) 

[eslint] reported by reviewdog 🐶
Complete the task associated to this "TODO" comment.

Raw Output:
{"ruleId":"sonarjs/todo-tag","severity":1,"message":"Complete the task associated to this \"TODO\" comment.","line":29,"column":25,"nodeType":null,"messageId":"completeTODO","endLine":29,"endColumn":29}
},
{
onClick: () => onDelete(pool),
title: 'Delete',
},
];

return (
<TableRow hoverable zebra>
<TableCell style={CONNECTION_POOL_LABEL_CELL_STYLES}>
{pool.label}
</TableCell>
<Hidden smDown>
<TableCell>
{`${pool.mode.charAt(0).toUpperCase()}${pool.mode.slice(1)}`}
</TableCell>
</Hidden>
<Hidden smDown>
<TableCell>{pool.size}</TableCell>
</Hidden>
<Hidden smDown>
<TableCell>
{pool.username === null ? 'Reuse inbound user' : pool.username}
</TableCell>
</Hidden>
<StyledActionMenuWrapper>
<ActionMenu
actionsList={connectionPoolActions}
ariaLabel={`Action menu for connection pool ${pool.label}`}
/>
</StyledActionMenuWrapper>
</TableRow>
);
};
66 changes: 19 additions & 47 deletions ...ager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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<null | string>();

const pagination = usePaginationV2({
currentRoute: '/databases/$engine/$databaseId/networking',
Expand All @@ -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 <CircleProgress />;
}
Expand Down Expand Up @@ -127,7 +114,7 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
}
headerborder
>
<TableHeaderCell style={poolLabelCellStyles}>
<TableHeaderCell style={CONNECTION_POOL_LABEL_CELL_STYLES}>
Pool Label
</TableHeaderCell>
<Hidden smDown>
Expand Down Expand Up @@ -156,32 +143,11 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
</TableRow>
) : (
connectionPools?.data.map((pool) => (
<TableRow key={`connection-pool-row-${pool.label}`} zebra>
<TableCell style={poolLabelCellStyles}>
{pool.label}
</TableCell>
<Hidden smDown>
<TableCell>
{`${pool.mode.charAt(0).toUpperCase()}${pool.mode.slice(1)}`}
</TableCell>
</Hidden>
<Hidden smDown>
<TableCell>{pool.size}</TableCell>
</Hidden>
<Hidden smDown>
<TableCell>
{pool.username === null
? 'Reuse inbound user'
: pool.username}
</TableCell>
</Hidden>
<StyledActionMenuWrapper>
<ActionMenu
actionsList={connectionPoolActions}
ariaLabel={`Action menu for connection pool ${pool.label}`}
/>
</StyledActionMenuWrapper>
</TableRow>
<DatabaseConnectionPoolRow
key={pool.label}
onDelete={() => setDeletePoolLabelSelection(pool.label)}
pool={pool}
/>
))
)}
</TableBody>
Expand All @@ -207,6 +173,12 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
}}
/>
)}
<DatabaseConnectionPoolDeleteDialog
databaseId={database.id}
onClose={() => setDeletePoolLabelSelection(null)}
open={Boolean(deletePoolLabelSelection)}
poolLabel={deletePoolLabelSelection ?? ''}
/>
</>
);
};
4 changes: 4 additions & 0 deletions packages/manager/src/features/Databases/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
};