components: Ensure deleting a blueprint also deletes any associated i…

…mages

Fixes #1694.

This adds a deletion of any associated images when a blueprint is deleted.

Copy for the modal was also updated to inform the user that the images will be deleted together with the blueprint.

src/components/Modal/DeleteBlueprint.js

@@ -1,14 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useIntl, FormattedMessage } from "react-intl";
 
 import { Modal, ModalVariant, Button } from "@patternfly/react-core";
 import { deleteBlueprint } from "../../slices/blueprintsSlice";
+import { selectAllImages } from "../../slices/imagesSlice";
 
 export const DeleteBlueprint = (props) => {
   const dispatch = useDispatch();
   const intl = useIntl();
+  const images = useSelector((state) => selectAllImages(state));
 
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
@@ -17,7 +19,11 @@ export const DeleteBlueprint = (props) => {
   };
 
   const handleSubmit = () => {
-    dispatch(deleteBlueprint(props.blueprint.name));
+    const args = {
+      blueprintName: props.blueprint.name,
+      images: images,
+    };
+    dispatch(deleteBlueprint(args));
     setIsModalOpen(false);
   };
 
@@ -43,7 +49,10 @@ export const DeleteBlueprint = (props) => {
           </Button>,
         ]}
       >
-        <p>Are you sure you want to delete the blueprint</p>
+        <p>
+          Are you sure you want to delete the blueprint and all associated
+          images?
+        </p>
         <p>This action cannot be undone.</p>
       </Modal>
     </>

src/slices/blueprintsSlice.js

@@ -5,6 +5,7 @@ import {
   createSelector,
 } from "@reduxjs/toolkit";
 import * as api from "../api";
+import { deleteImage } from "./imagesSlice";
 
 export const blueprintsAdapter = createEntityAdapter({
   // the id for each blueprint is the blueprint name
@@ -63,8 +64,14 @@ export const depsolveBlueprint = createAsyncThunk(
 
 export const deleteBlueprint = createAsyncThunk(
   "blueprints/delete",
-  async (blueprintName) => {
+  async (args, { dispatch }) => {
+    const { blueprintName, images } = args;
     await api.deleteBlueprint(blueprintName);
+    images.forEach(async (image) => {
+      if (image.blueprint === blueprintName) {
+        dispatch(deleteImage(image.id));
+      }
+    });
     return blueprintName;
   }
 );