Improve deletion confirmation modal

cockpit-project · Oct 13, 2023 · 3ffa582 · 3ffa582
1 parent 008ac87
commit 3ffa582
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/src/ImageDeleteModal.jsx b/src/ImageDeleteModal.jsx
@@ -39,13 +39,6 @@ export const ImageDeleteModal = ({ imageWillDelete, onAddNotification }) => {
         }));
     };
 
-    const pickAll = () => {
-        setTags(prevState => Object.keys(prevState).reduce((acc, item, i) => {
-            acc[item] = true;
-            return acc;
-        }, {}));
-    };
-
     const handleRemoveImage = (tags, all) => {
         const handleForceRemoveImage = () => {
             Dialogs.close();
@@ -81,11 +74,20 @@ export const ImageDeleteModal = ({ imageWillDelete, onAddNotification }) => {
         }
     };
 
+    const imageName = repoTags?.[0].split(":")[0].split("/").at(-1) ?? "";
+
+    let isAllSelected = null;
+    if (checkedTags.length === repoTags.length)
+        isAllSelected = true;
+    else if (checkedTags.length === 0)
+        isAllSelected = false;
+
     return (
         <Modal isOpen
                  position="top" variant="medium"
+                 titleIconVariant="warning"
                  onClose={Dialogs.close}
-                 title={cockpit.format(_("Delete $0"), repoTags ? repoTags[0] : "")}
+                 title={cockpit.format(_("Delete $0 image?"), imageName)}
                  footer={<>
                      <Button id="btn-img-delete" variant="danger" isDisabled={checkedTags.length === 0}
                              onClick={() => handleRemoveImage(checkedTags, checkedTags.length === repoTags.length)}>
@@ -97,19 +99,20 @@ export const ImageDeleteModal = ({ imageWillDelete, onAddNotification }) => {
             <Stack hasGutter>
                 { repoTags.length > 1 && <StackItem>{_("Multiple tags exist for this image. Select the tagged images to delete.")}</StackItem> }
                 <StackItem isFilled>
-                    { repoTags.map(x => {
-                        return (
-                            <Checkbox isChecked={checkedTags.indexOf(x) > -1}
-                                        id={"delete-" + x}
-                                        aria-label={x}
-                                        key={x}
-                                        label={x}
-                                        onChange={(_event, checked) => onValueChanged(x, checked)} />
-                        );
-                    })}
+                    <Checkbox isChecked={isAllSelected} id='delete-all' label={_("All")} aria-label='All'
+                        onChange={(_event, checked) => repoTags.forEach(item => onValueChanged(item, checked))}
+                        body={
+                            repoTags.map(x => (
+                                <Checkbox isChecked={checkedTags.indexOf(x) > -1}
+                                            id={"delete-" + x}
+                                            aria-label={x}
+                                            key={x}
+                                            label={x}
+                                            onChange={(_event, checked) => onValueChanged(x, checked)} />
+                            ))
+                        } />
                 </StackItem>
             </Stack>
-            { repoTags.length > 2 && <Button isDisabled={repoTags.length === checkedTags.length} variant="link" onClick={pickAll}>{_("select all")}</Button> }
         </Modal>
     );
 };
diff --git a/test/check-application b/test/check-application
@@ -786,7 +786,7 @@ class TestApplication(testlib.MachineCase):
 
         b.click(busybox_sel + " .pf-v5-c-dropdown__toggle")
         b.click(busybox_sel + " button.btn-delete")
-        b.click("button:contains('select all')")
+        b.click("#delete-all")
         self.assertTrue(b.get_checked(f".pf-v5-c-check__input[aria-label='{IMG_BUSYBOX_LATEST}']"))
         self.assertTrue(b.get_checked(f".pf-v5-c-check__input[aria-label='{IMG_BUSYBOX}:2']"))
         self.assertTrue(b.get_checked(f".pf-v5-c-check__input[aria-label='{IMG_BUSYBOX}:4']"))