Skip to content

feat: add visual indicator for resources pending deletion #4704

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

Open
kajal-jotwani wants to merge 1 commit into
base: main
Choose a base branch
from
+27 −2
Open

feat: add visual indicator for resources pending deletion #4704

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 27 additions & 2 deletions frontend/src/components/common/Resource/ResourceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
* limitations under the License.
*/

import { Icon } from '@iconify/react';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import { useTheme } from '@mui/material/styles';
Expand Down Expand Up @@ -51,6 +52,7 @@ import { useLocalStorageState } from '../../globalSearch/useLocalStorageState';
import { DateLabel } from '../Label';
import Link from '../Link';
import Table, { TableColumn } from '../Table';
import { LightTooltip } from '../Tooltip';
import DeleteButton from './DeleteButton';
import EditButton from './EditButton';
import ResourceTableMultiActions from './ResourceTableMultiActions';
Expand Down Expand Up @@ -443,8 +445,31 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
header: t('translation|Name'),
gridTemplate: 'auto',
accessorFn: (item: RowItem) => item.metadata.name,
Cell: ({ row }: { row: MRT_Row<RowItem> }) =>
row.original && <Link kubeObject={row.original} />,
Cell: ({ row }: { row: MRT_Row<RowItem> }) => {
if (!row.original) {
return null;
}

const isDeleting = !!row.original.metadata?.deletionTimestamp;

return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{isDeleting && (
<LightTooltip title={t('translation|Deleting')}>
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

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

t('translation|Deleting') appears to rely on a "Deleting" translation key, but frontend/src/i18n/locales/*/translation.json don’t define a plain "Deleting" entry (only longer strings like "Deleting item {{ itemName }}…"). This will likely show the raw key in non-English locales. Reuse an existing translated string (e.g., "Deleting item…" with itemName) or add a dedicated key (e.g., "Deleting"/"Pending deletion") to the locale files.

Suggested change
<LightTooltip title={t('translation|Deleting')}>
<LightTooltip
title={t('translation|Deleting item {{ itemName }}…', {
itemName: row.original.metadata?.name ?? '',
})}
>

Copilot uses AI. Check for mistakes.
<Box component="span" sx={{ display: 'flex', color: 'text.secondary' }}>
<Icon
icon="mdi:trash-can-outline"
width="1rem"
height="1rem"
color={theme.palette.error.main}
/>
Comment on lines +458 to +465
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

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

The columns are built inside a useMemo, but the memo dependency list doesn’t include theme (and the tooltip uses t(...)). This can cause the icon color / translated strings to stay stale when the user switches between light/dark theme or changes language. Include theme and the i18n dependency (e.g., t or i18n.language) in the useMemo deps so the column definitions recompute on those changes.

Copilot uses AI. Check for mistakes.
</Box>
</LightTooltip>
)}
<Link kubeObject={row.original} />
</Box>
);
},
};
case 'age':
return {
Expand Down
Loading