feat(frontend): allow deletion of BaseImage used in completed campaign

Dam-99 · Dam-99 · commit b0fa1e7caa3e · 2026-02-13T15:52:18.000+01:00
Update the frontend to allow the deletion of a BaseImage even if in use by a Update Campaign, if that campaign is already completed. The user will be informed that the BaseImage is in use before attempting deletion that the operation will fail. Closes #598 Signed-off-by: Damiano Mason <damiano.mason@secomind.com>
diff --git a/frontend/src/forms/UpdateCampaignForm.tsx b/frontend/src/forms/UpdateCampaignForm.tsx
@@ -156,7 +156,6 @@ const UpdateCampaign = ({ campaignRef }: UpdateCampaignProps) => {
   }
 
   const { baseImage } = campaignMechanism;
-  const { baseImageCollection } = baseImage;
 
   return (
     <Row>
@@ -181,39 +180,61 @@ const UpdateCampaign = ({ campaignRef }: UpdateCampaignProps) => {
         >
           <CampaignOutcome campaignRef={campaign} />
         </FormRow>
-        <FormRow
-          label={
-            <FormattedMessage
-              id="forms.UpdateCampaignForm.baseImageCollectionLabel"
-              defaultMessage="Base Image Collection"
-            />
-          }
-        >
-          <Link
-            route={Route.baseImageCollectionsEdit}
-            params={{ baseImageCollectionId: baseImageCollection.id }}
-          >
-            {baseImageCollection.name}
-          </Link>
-        </FormRow>
-        <FormRow
-          label={
-            <FormattedMessage
-              id="forms.UpdateCampaignForm.baseImageLabel"
-              defaultMessage="Base Image"
-            />
-          }
-        >
-          <Link
-            route={Route.baseImagesEdit}
-            params={{
-              baseImageCollectionId: baseImageCollection.id,
-              baseImageId: baseImage.id,
-            }}
+        {baseImage ? (
+          <>
+            <FormRow
+              label={
+                <FormattedMessage
+                  id="forms.UpdateCampaignForm.baseImageCollectionLabel"
+                  defaultMessage="Base Image Collection"
+                />
+              }
+            >
+              <Link
+                route={Route.baseImageCollectionsEdit}
+                params={{
+                  baseImageCollectionId: baseImage.baseImageCollection.id,
+                }}
+              >
+                {baseImage.baseImageCollection.name}
+              </Link>
+            </FormRow>
+            <FormRow
+              label={
+                <FormattedMessage
+                  id="forms.UpdateCampaignForm.baseImageLabel"
+                  defaultMessage="Base Image"
+                />
+              }
+            >
+              <Link
+                route={Route.baseImagesEdit}
+                params={{
+                  baseImageCollectionId: baseImage.baseImageCollection.id,
+                  baseImageId: baseImage.id,
+                }}
+              >
+                {baseImage.name}
+              </Link>
+            </FormRow>
+          </>
+        ) : (
+          <FormRow
+            label={
+              <FormattedMessage
+                id="forms.UpdateCampaignForm.baseImageLabel"
+                defaultMessage="Base Image"
+              />
+            }
           >
-            {baseImage.name}
-          </Link>
-        </FormRow>
+            <div className="d-flex align-content-center fst-italic text-muted">
+              <FormattedMessage
+                id="forms.UpdateCampaignForm.baseImageDeleted"
+                defaultMessage="The Base Image has been deleted"
+              />
+            </div>
+          </FormRow>
+        )}
         <FormRow
           label={
             <FormattedMessage
diff --git a/frontend/src/i18n/langs/en.json b/frontend/src/i18n/langs/en.json
@@ -2125,6 +2125,9 @@
   "forms.UpdateCampaignForm.baseImageCollectionLabel": {
     "defaultMessage": "Base Image Collection"
   },
+  "forms.UpdateCampaignForm.baseImageDeleted": {
+    "defaultMessage": "The Base Image has been deleted"
+  },
   "forms.UpdateCampaignForm.baseImageLabel": {
     "defaultMessage": "Base Image"
   },
diff --git a/frontend/src/pages/BaseImage.tsx b/frontend/src/pages/BaseImage.tsx
@@ -1,24 +1,22 @@
-/*
- * This file is part of Edgehog.
- *
- * Copyright 2023-2025 SECO Mind Srl
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { Suspense, useCallback, useEffect, useState } from "react";
+// This file is part of Edgehog.
+//
+// Copyright 2023 - 2026 SECO Mind Srl
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { ErrorBoundary } from "react-error-boundary";
@@ -36,6 +34,7 @@ import type {
 } from "@/api/__generated__/BaseImage_getBaseImage_Query.graphql";
 import type { BaseImage_updateBaseImage_Mutation } from "@/api/__generated__/BaseImage_updateBaseImage_Mutation.graphql";
 import type { BaseImage_deleteBaseImage_Mutation } from "@/api/__generated__/BaseImage_deleteBaseImage_Mutation.graphql";
+import type { BaseImage_getRelatedUpdateCampaigns_Query } from "@/api/__generated__/BaseImage_getRelatedUpdateCampaigns_Query.graphql";
 import Alert from "@/components/Alert";
 import Center from "@/components/Center";
 import DeleteModal from "@/components/DeleteModal";
@@ -84,16 +83,45 @@ const DELETE_BASE_IMAGE_MUTATION = graphql`
       result {
         id
       }
+      errors {
+        message
+      }
+    }
+  }
+`;
+
+const RELATED_UPDATE_CAMPAIGNS_QUERY = graphql`
+  query BaseImage_getRelatedUpdateCampaigns_Query {
+    updateCampaigns {
+      edges {
+        node {
+          name
+          status
+          campaignMechanism {
+            __typename
+            ... on FirmwareUpgrade {
+              baseImage {
+                id
+              }
+            }
+          }
+        }
+      }
     }
   }
 `;
 
 type BaseImageContentProps = {
   baseImage: NonNullable<BaseImage_getBaseImage_Query$data["baseImage"]>;
   queryRef: BaseImage_getBaseImage_Query$data;
+  getRelatedUpdateCampaignsQuery: PreloadedQuery<BaseImage_getRelatedUpdateCampaigns_Query>;
 };
 
-const BaseImageContent = ({ baseImage, queryRef }: BaseImageContentProps) => {
+const BaseImageContent = ({
+  baseImage,
+  queryRef,
+  getRelatedUpdateCampaignsQuery,
+}: BaseImageContentProps) => {
   const baseImageId = baseImage.id;
   const baseImageCollectionId = baseImage.baseImageCollection.id;
   const navigate = useNavigate();
@@ -108,10 +136,28 @@ const BaseImageContent = ({ baseImage, queryRef }: BaseImageContentProps) => {
   const [deleteBaseImage, isDeletingBaseImage] =
     useMutation<BaseImage_deleteBaseImage_Mutation>(DELETE_BASE_IMAGE_MUTATION);
 
+  // TODO: filter per base image in backend
+  const relatedUpdateCampaignsData = usePreloadedQuery(
+    RELATED_UPDATE_CAMPAIGNS_QUERY,
+    getRelatedUpdateCampaignsQuery,
+  );
+  const runningUpdateCampaigns = useMemo(
+    () =>
+      relatedUpdateCampaignsData?.updateCampaigns?.edges
+        ?.map(({ node }) => node)
+        .filter(
+          (campaign) =>
+            campaign.status !== "FINISHED" &&
+            campaign.campaignMechanism.__typename === "FirmwareUpgrade" &&
+            campaign.campaignMechanism.baseImage?.id === baseImageId,
+        ),
+    [relatedUpdateCampaignsData, baseImageId],
+  );
+
   const handleDeleteBaseImage = useCallback(() => {
     deleteBaseImage({
       variables: { baseImageId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           return navigate({
             route: Route.baseImageCollectionsEdit,
@@ -121,7 +167,15 @@ const BaseImageContent = ({ baseImage, queryRef }: BaseImageContentProps) => {
 
         const errorFeedback = errors
           .map(({ fields, message }) =>
-            fields.length ? `${fields.join(" ")} ${message}` : message,
+            message.includes("in use by at least one running campaign") &&
+            runningUpdateCampaigns
+              ? `${message}:\n` +
+                runningUpdateCampaigns
+                  .map((campaign) => campaign.name)
+                  .join("\n")
+              : fields.length
+                ? `${fields.join(" ")} ${message}`
+                : message,
           )
           .join(". \n");
         setErrorFeedback(errorFeedback);
@@ -149,7 +203,13 @@ const BaseImageContent = ({ baseImage, queryRef }: BaseImageContentProps) => {
           ?.invalidateRecord();
       },
     });
-  }, [deleteBaseImage, baseImageId, baseImageCollectionId, navigate]);
+  }, [
+    deleteBaseImage,
+    baseImageId,
+    baseImageCollectionId,
+    navigate,
+    runningUpdateCampaigns,
+  ]);
 
   const [updateBaseImage, isUpdatingBaseImage] =
     useMutation<BaseImage_updateBaseImage_Mutation>(UPDATE_BASE_IMAGE_MUTATION);
@@ -158,7 +218,7 @@ const BaseImageContent = ({ baseImage, queryRef }: BaseImageContentProps) => {
     (baseImageChanges: BaseImageChanges) => {
       updateBaseImage({
         variables: { baseImageId, input: baseImageChanges },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             const errorFeedback = errors
               .map(({ fields, message }) =>
@@ -242,9 +302,13 @@ const BaseImageContent = ({ baseImage, queryRef }: BaseImageContentProps) => {
 
 type BaseImageWrapperProps = {
   getBaseImageQuery: PreloadedQuery<BaseImage_getBaseImage_Query>;
+  getRelatedUpdateCampaignsQuery: PreloadedQuery<BaseImage_getRelatedUpdateCampaigns_Query>;
 };
 
-const BaseImageWrapper = ({ getBaseImageQuery }: BaseImageWrapperProps) => {
+const BaseImageWrapper = ({
+  getBaseImageQuery,
+  getRelatedUpdateCampaignsQuery,
+}: BaseImageWrapperProps) => {
   const { baseImageCollectionId = "" } = useParams();
 
   const queryData = usePreloadedQuery(GET_BASE_IMAGE_QUERY, getBaseImageQuery);
@@ -273,7 +337,11 @@ const BaseImageWrapper = ({ getBaseImageQuery }: BaseImageWrapperProps) => {
   }
 
   return (
-    <BaseImageContent baseImage={queryData.baseImage} queryRef={queryData} />
+    <BaseImageContent
+      baseImage={queryData.baseImage}
+      queryRef={queryData}
+      getRelatedUpdateCampaignsQuery={getRelatedUpdateCampaignsQuery}
+    />
   );
 };
 
@@ -289,6 +357,17 @@ const BaseImagePage = () => {
 
   useEffect(fetchBaseImage, [fetchBaseImage]);
 
+  const [getRelatedUpdateCampaignsQuery, getRelatedUpdateCampaigns] =
+    useQueryLoader<BaseImage_getRelatedUpdateCampaigns_Query>(
+      RELATED_UPDATE_CAMPAIGNS_QUERY,
+    );
+
+  const fetchRelatedUpdateCampaigns = useCallback(() => {
+    getRelatedUpdateCampaigns({}, { fetchPolicy: "network-only" });
+  }, [getRelatedUpdateCampaigns]);
+
+  useEffect(fetchRelatedUpdateCampaigns, [fetchRelatedUpdateCampaigns]);
+
   return (
     <Suspense
       fallback={
@@ -305,8 +384,11 @@ const BaseImagePage = () => {
         )}
         onReset={fetchBaseImage}
       >
-        {getBaseImageQuery && (
-          <BaseImageWrapper getBaseImageQuery={getBaseImageQuery} />
+        {getBaseImageQuery && getRelatedUpdateCampaignsQuery && (
+          <BaseImageWrapper
+            getBaseImageQuery={getBaseImageQuery}
+            getRelatedUpdateCampaignsQuery={getRelatedUpdateCampaignsQuery}
+          />
         )}
       </ErrorBoundary>
     </Suspense>
