feat(frontend): manual OTA with base image from collection

Introduce UI in a Device page's Software Updates tab that allows to
start a manual OTA update by selecting a base image already uploaded to
a base image collection.

Signed-off-by: Damiano Mason <damiano.mason@secomind.com>

Author: Dam-99

frontend/src/components/BaseImageSelect.tsx

@@ -1,7 +1,7 @@
 /*
  * This file is part of Edgehog.
  *
- * Copyright 2023-2025 SECO Mind Srl
+ * 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.
@@ -74,15 +74,18 @@ const BASE_IMAGE_SELECT_OPTIONS_FRAGMENT = graphql`
           id
           name
           version
+          url
         }
       }
     }
   }
 `;
 
-export type BaseImageRecord = NonNullable<
+type BaseImageNode = NonNullable<
   NonNullable<BaseImageSelect_BaseImagesFragment$data["baseImages"]>["edges"]
 >[number]["node"];
+type OmitUrl = Omit<BaseImageNode, "url">;
+export type BaseImageRecord = OmitUrl & { readonly url?: string };
 
 type BaseImageSelectProps = {
   updateCampaignBaseImageOptionsRef: BaseImageSelect_BaseImagesFragment$key | null;
@@ -147,7 +150,7 @@ const BaseImageSelect = ({
     return (
       paginationData?.baseImages?.edges
         ?.map((edge) => edge?.node)
-        .filter((node): node is BaseImageRecord => node != null) ?? []
+        .filter((node): node is BaseImageNode => node != null) ?? []
     );
   }, [paginationData]);
 

frontend/src/components/DeviceTabs/SoftwareUpdateTab.tsx

@@ -1,7 +1,7 @@
 /*
  * This file is part of Edgehog.
  *
- * Copyright 2025 SECO Mind Srl
+ * Copyright 2025-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.
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, Suspense } from "react";
 import type { Subscription } from "relay-runtime";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
@@ -27,17 +27,23 @@ import {
   fetchQuery,
   useRelayEnvironment,
   usePaginationFragment,
+  usePreloadedQuery,
+  PreloadedQuery,
 } from "react-relay/hooks";
+import { Form, Stack } from "react-bootstrap";
 
+import type { Device_getBaseImageCollections_Query } from "@/api/__generated__/Device_getBaseImageCollections_Query.graphql";
+import { SoftwareUpdateTab_createManualOtaOperation_Mutation } from "@/api/__generated__/SoftwareUpdateTab_createManualOtaOperation_Mutation.graphql";
 import type { SoftwareUpdateTab_PaginationQuery } from "@/api/__generated__/SoftwareUpdateTab_PaginationQuery.graphql";
 import type { SoftwareUpdateTab_otaOperations$key } from "@/api/__generated__/SoftwareUpdateTab_otaOperations.graphql";
-import type { SoftwareUpdateTab_createManualOtaOperation_Mutation } from "@/api/__generated__/SoftwareUpdateTab_createManualOtaOperation_Mutation.graphql";
 
 import Alert from "@/components/Alert";
 import OperationTable from "@/components/OperationTable";
 import Spinner from "@/components/Spinner";
 import { Tab } from "@/components/Tabs";
-import BaseImageForm from "@/forms/BaseImageForm";
+import ManualOtaFromCollectionForm from "@/forms/ManualOtaFromCollectionForm";
+import ManualOtaFromFileForm from "@/forms/ManualOtaFromFileForm";
+import { GET_BASE_IMAGE_COLL_QUERY } from "@/pages/Device";
 
 const DEVICE_OTA_OPERATIONS_FRAGMENT = graphql`
   fragment SoftwareUpdateTab_otaOperations on Device
@@ -90,18 +96,38 @@ const DEVICE_CREATE_MANUAL_OTA_OPERATION_MUTATION = graphql`
   }
 `;
 
+export type GetBaseImageCollsQueryType = PreloadedQuery<
+  Device_getBaseImageCollections_Query,
+  Record<string, unknown>
+>;
+
+type OtaOperationInput = {
+  imageFile?: File;
+  imageUrl?: string;
+};
+
 type DeviceSoftwareUpdateTabProps = {
   deviceRef: SoftwareUpdateTab_otaOperations$key;
+  getBaseImageCollsQuery: GetBaseImageCollsQueryType;
 };
 
 const DeviceSoftwareUpdateTab = ({
   deviceRef,
+  getBaseImageCollsQuery,
 }: DeviceSoftwareUpdateTabProps) => {
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [errorFeedback, setErrorFeedback] = useState<React.ReactNode>(null);
   const intl = useIntl();
   const relayEnvironment = useRelayEnvironment();
 
+  const [updateMode, setUpdateMode] = useState<"collection" | "file">(
+    "collection",
+  );
+  const modeOnChange =
+    (mode: "collection" | "file") =>
+    (_event: React.ChangeEvent<HTMLInputElement>) =>
+      setUpdateMode(mode);
+
   const { data } = usePaginationFragment<
     SoftwareUpdateTab_PaginationQuery,
     SoftwareUpdateTab_otaOperations$key
@@ -182,19 +208,28 @@ const DeviceSoftwareUpdateTab = ({
     deviceId,
   ]);
 
+  const baseImageCollections = usePreloadedQuery(
+    GET_BASE_IMAGE_COLL_QUERY,
+    getBaseImageCollsQuery,
+  );
+
   if (!data.capabilities.includes("SOFTWARE_UPDATES")) {
     return null;
   }
 
-  const launchManualOTAUpdate = (file: File) => {
+  const launchManualOTAUpdate = ({
+    imageFile,
+    imageUrl,
+  }: OtaOperationInput) => {
     createOtaOperation({
       variables: {
         input: {
           deviceId,
-          baseImageFile: file,
+          baseImageFile: imageFile,
+          baseImageUrl: imageUrl,
         },
       },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (errors) {
           const errorFeedback = errors
             .map(({ fields, message }) =>
@@ -252,11 +287,44 @@ const DeviceSoftwareUpdateTab = ({
         >
           {errorFeedback}
         </Alert>
-        <BaseImageForm
-          className="mt-3"
-          onSubmit={launchManualOTAUpdate}
-          isLoading={isCreatingOtaOperation}
-        />
+        <Suspense fallback={<Spinner />}>
+          <Stack direction="vertical" className="mt-3">
+            <Form.Group key="updateMode">
+              <Form.Check
+                name="updateMode"
+                inline
+                type="radio"
+                label="Collection"
+                id="Collection"
+                onChange={modeOnChange("collection")}
+                checked={updateMode === "collection"}
+              />
+              <Form.Check
+                name="updateMode"
+                inline
+                type="radio"
+                label="File"
+                id="File"
+                onChange={modeOnChange("file")}
+                checked={updateMode === "file"}
+              />
+            </Form.Group>
+            {updateMode === "collection" ? (
+              <ManualOtaFromCollectionForm
+                baseImageCollectionsData={baseImageCollections}
+                className="mt-3 w-75"
+                isLoading={isCreatingOtaOperation}
+                onManualOTAImageSubmit={launchManualOTAUpdate}
+              />
+            ) : (
+              <ManualOtaFromFileForm
+                className="mt-3 w-75"
+                isLoading={isCreatingOtaOperation}
+                onManualOTAImageSubmit={launchManualOTAUpdate}
+              />
+            )}
+          </Stack>
+        </Suspense>
         {currentOperation && (
           <div className="mt-3">
             <FormattedMessage