Use custom remove namespaces dialog

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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,9 +31,38 @@ enum columnId {
 interface Dependencies {
   namespaceStore: NamespaceStore;
   openAddNamespaceDialog: () => void;
+  openConfirmDialog: OpenConfirmDialog;
 }
 
-const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog }: Dependencies) => (
+const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog, openConfirmDialog }: Dependencies) => {
+  function onConfirm() {
+    namespaceStore.removeSelectedItems();
+  }
+
+  function openRemoveNamespaceDialog() {
+    const namespaces = namespaceStore.selectedItems;
+    const message = (
+      <div>
+        <>
+          Remove following namespaces?
+          {" "}
+          <div style={{ overflow: "auto", maxHeight: "200px" }}>
+            {namespaces.map(namespace => (
+              <li key={namespace.getId()}>{namespace.getName()}</li>
+            ))}
+          </div>
+        </>
+      </div>
+    );
+
+    openConfirmDialog({
+      ok: onConfirm,
+      labelOk: "Remove",
+      message,
+    });
+  }
+
+  return (
     <TabLayout>
       <KubeObjectListLayout
         isConfigurable
@@ -77,9 +108,7 @@ const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog }:
         addRemoveButtons={{
           addTooltip: "Add Namespace",
           onAdd: openAddNamespaceDialog,
-        onRemove: () => {
-          namespaceStore.selectedItems.forEach(namespace => namespaceStore.remove(namespace));
-        },
+          onRemove: openRemoveNamespaceDialog,
         }}
         renderItemMenu={namespace => (
           <NamespaceMenu
@@ -90,11 +119,13 @@ const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog }:
       <AddNamespaceDialog/>
     </TabLayout>
   );
+}
 
 
 export const NamespacesRoute = withInjectables<Dependencies>(NonInjectedNamespacesRoute, {
   getProps: (di) => ({
     namespaceStore: di.inject(namespaceStoreInjectable),
     openAddNamespaceDialog: di.inject(openAddNamepaceDialogInjectable),
+    openConfirmDialog: di.inject(openConfirmDialogInjectable),
   }),
 });