diff --git a/packages/core/src/renderer/components/+namespaces/route.tsx b/packages/core/src/renderer/components/+namespaces/route.tsx index bc22e837d0..a34655972d 100644 --- a/packages/core/src/renderer/components/+namespaces/route.tsx +++ b/packages/core/src/renderer/components/+namespaces/route.tsx @@ -18,6 +18,8 @@ import { KubeObjectAge } from "../kube-object/age"; import openAddNamepaceDialogInjectable from "./add-dialog/open.injectable"; import { SubnamespaceBadge } from "./subnamespace-badge"; import { NamespaceMenu } from "./namespace-menu"; +import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable"; +import openConfirmDialogInjectable from "../confirm-dialog/open.injectable"; enum columnId { name = "name", @@ -29,72 +31,101 @@ enum columnId { interface Dependencies { namespaceStore: NamespaceStore; openAddNamespaceDialog: () => void; + openConfirmDialog: OpenConfirmDialog; } -const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog }: Dependencies) => ( - - namespace.getName(), - [columnId.labels]: namespace => namespace.getLabels(), - [columnId.age]: namespace => -namespace.getCreationTimestamp(), - [columnId.status]: namespace => namespace.getStatus(), - }} - searchFilters={[ - namespace => namespace.getSearchFields(), - namespace => namespace.getStatus(), - ]} - renderHeaderTitle="Namespaces" - renderTableHeader={[ - { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, - { className: "warning", showWithColumn: columnId.name }, - { title: "Labels", className: "labels scrollable", sortBy: columnId.labels, id: columnId.labels }, - { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, - { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status }, - ]} - renderTableContents={namespace => [ +const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog, openConfirmDialog }: Dependencies) => { + function onConfirm() { + namespaceStore.removeSelectedItems(); + } + + function openRemoveNamespaceDialog() { + const namespaces = namespaceStore.selectedItems; + const message = ( +
<> - {namespace.getName()} - {namespace.isSubnamespace() && ( - - )} - , - , - namespace.getLabels().map(label => ( - + {namespaces.map(namespace => ( +
  • {namespace.getName()}
  • + ))} +
    + + + ); + + openConfirmDialog({ + ok: onConfirm, + labelOk: "Remove", + message, + }); + } + + return ( + + namespace.getName(), + [columnId.labels]: namespace => namespace.getLabels(), + [columnId.age]: namespace => -namespace.getCreationTimestamp(), + [columnId.status]: namespace => namespace.getStatus(), + }} + searchFilters={[ + namespace => namespace.getSearchFields(), + namespace => namespace.getStatus(), + ]} + renderHeaderTitle="Namespaces" + renderTableHeader={[ + { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, + { className: "warning", showWithColumn: columnId.name }, + { title: "Labels", className: "labels scrollable", sortBy: columnId.labels, id: columnId.labels }, + { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, + { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status }, + ]} + renderTableContents={namespace => [ + <> + {namespace.getName()} + {namespace.isSubnamespace() && ( + + )} + , + , + namespace.getLabels().map(label => ( + + )), + , + { title: namespace.getStatus(), className: namespace.getStatus().toLowerCase() }, + ]} + addRemoveButtons={{ + addTooltip: "Add Namespace", + onAdd: openAddNamespaceDialog, + onRemove: openRemoveNamespaceDialog, + }} + renderItemMenu={namespace => ( + - )), - , - { title: namespace.getStatus(), className: namespace.getStatus().toLowerCase() }, - ]} - addRemoveButtons={{ - addTooltip: "Add Namespace", - onAdd: openAddNamespaceDialog, - onRemove: () => { - namespaceStore.selectedItems.forEach(namespace => namespaceStore.remove(namespace)); - }, - }} - renderItemMenu={namespace => ( - - )} - /> - - -); + )} + /> + +
    + ); +} export const NamespacesRoute = withInjectables(NonInjectedNamespacesRoute, { getProps: (di) => ({ namespaceStore: di.inject(namespaceStoreInjectable), openAddNamespaceDialog: di.inject(openAddNamepaceDialogInjectable), + openConfirmDialog: di.inject(openConfirmDialogInjectable), }), });