wip: update device image by using base image from collection

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

Author: Dam-99

frontend/src/components/BaseImageSelect.tsx

@@ -74,6 +74,7 @@ const BASE_IMAGE_SELECT_OPTIONS_FRAGMENT = graphql`
           id
           name
           version
+          url
         }
       }
     }

frontend/src/components/DeviceTabs/SoftwareUpdateTab.tsx

@@ -18,7 +18,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState, useRef } from "react";
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+  Suspense,
+  useMemo,
+} from "react";
 import type { Subscription } from "relay-runtime";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
@@ -27,17 +34,24 @@ import {
   fetchQuery,
   useRelayEnvironment,
   usePaginationFragment,
+  usePreloadedQuery,
+  PreloadedQuery,
+  UseMutationConfig,
 } from "react-relay/hooks";
 
 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 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 { Device_getBaseImageCollections_Query } from "@/api/__generated__/Device_getBaseImageCollections_Query.graphql";
+import { GET_BASE_IMAGE_COLL_QUERY } from "@/pages/Device";
+import { SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation, SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation$data } from "@/api/__generated__/SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation.graphql";
+import { SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation, SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation$data } from "@/api/__generated__/SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation.graphql";
 
 const DEVICE_OTA_OPERATIONS_FRAGMENT = graphql`
   fragment SoftwareUpdateTab_otaOperations on Device
@@ -73,11 +87,11 @@ const GET_DEVICE_OTA_OPERATIONS_QUERY = graphql`
   }
 `;
 
-const DEVICE_CREATE_MANUAL_OTA_OPERATION_MUTATION = graphql`
-  mutation SoftwareUpdateTab_createManualOtaOperation_Mutation(
-    $input: CreateManualOtaOperationInput!
+const DEVICE_CREATE_MANUAL_OTA_OPERATION_NO_EXISTING_IMAGE_MUTATION = graphql`
+  mutation SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation(
+    $input: CreateManualOtaOperationNoExistingBaseImageInput!
   ) {
-    createManualOtaOperation(input: $input) {
+    createManualOtaOperationNoExistingBaseImage(input: $input) {
       result {
         id
         baseImageUrl
@@ -90,12 +104,47 @@ const DEVICE_CREATE_MANUAL_OTA_OPERATION_MUTATION = graphql`
   }
 `;
 
+const DEVICE_CREATE_MANUAL_OTA_OPERATION_EXISTING_IMAGE_MUTATION = graphql`
+  mutation SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation(
+    $input: CreateManualOtaOperationExistingBaseImageInput!
+  ) {
+    createManualOtaOperationExistingBaseImage(input: $input) {
+      result {
+        id
+        baseImageUrl
+        createdAt
+        status
+        statusCode
+        updatedAt
+      }
+    }
+  }
+`;
+
+export type GetBaseImageCollsQueryType = PreloadedQuery<
+  Device_getBaseImageCollections_Query,
+  Record<string, unknown>
+>;
+
+type OTAOperationFunctionIncompleteVariables = {
+  input: {
+    deviceId: string;
+    baseImageFile?: File;
+    baseImageUrl?: string;
+  }
+};
+
+type OTAOperationFunctionVariables = UseMutationConfig<SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation>["variables"] & UseMutationConfig<SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation>["variables"]
+type NoExistingImageMutationName = "createManualOtaOperationNoExistingBaseImage" | "createManualOtaOperationExistingBaseImage"
+
 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);
@@ -109,10 +158,34 @@ const DeviceSoftwareUpdateTab = ({
 
   const deviceId = data.id;
 
-  const [createOtaOperation, isCreatingOtaOperation] =
-    useMutation<SoftwareUpdateTab_createManualOtaOperation_Mutation>(
-      DEVICE_CREATE_MANUAL_OTA_OPERATION_MUTATION,
+  const [createOtaOperationNoExistingImage, isCreatingOtaOperationNoExistingImage] =
+    useMutation<SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation>(
+      DEVICE_CREATE_MANUAL_OTA_OPERATION_NO_EXISTING_IMAGE_MUTATION,
     );
+  const [createOtaOperationExistingImage, isCreatingOtaOperationExistingImage] =
+   useMutation<SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation>(
+      DEVICE_CREATE_MANUAL_OTA_OPERATION_EXISTING_IMAGE_MUTATION,
+    );
+   const pickOTAOperationFunction = useCallback((...input: Array<File|string> ) => {
+      const variables: OTAOperationFunctionIncompleteVariables = {
+        input: {
+          deviceId,
+        },
+      }
+      if (input.length === 1) {
+        const [baseImage] = input;
+        if (baseImage instanceof File) {
+          variables.input.baseImageFile = baseImage
+          return {func: createOtaOperationNoExistingImage, vars: variables as UseMutationConfig<SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation>["variables"]}
+        }
+        else if (typeof baseImage === "string") {
+          variables.input.baseImageUrl = baseImage
+          return {func: createOtaOperationExistingImage, vars: variables as UseMutationConfig<SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation>["variables"]}
+        }
+      }
+    }, [createOtaOperationNoExistingImage, createOtaOperationExistingImage])
+
+  const isCreatingOtaOperation = useMemo(() => isCreatingOtaOperationNoExistingImage || isCreatingOtaOperationExistingImage, [isCreatingOtaOperationNoExistingImage, isCreatingOtaOperationExistingImage])
 
   const otaOperations = (
     data.otaOperations?.edges?.map(({ node }) => node) || []
@@ -186,14 +259,11 @@ const DeviceSoftwareUpdateTab = ({
     return null;
   }
 
-  const launchManualOTAUpdate = (file: File) => {
+  const launchManualOTAUpdate = (...input: Array<File|string>) => {
+    const {func: createOtaOperation, vars: variables} = pickOTAOperationFunction(...input)
+      console.log("vars after picking:", variables);
     createOtaOperation({
-      variables: {
-        input: {
-          deviceId,
-          baseImageFile: file,
-        },
-      },
+      variables: variables as OTAOperationFunctionVariables,
       onCompleted(data, errors) {
         if (errors) {
           const errorFeedback = errors
@@ -213,7 +283,15 @@ const DeviceSoftwareUpdateTab = ({
         );
       },
       updater(store, data) {
-        const otaOperationId = data?.createManualOtaOperation?.result?.id;
+        if (data) {
+        let mutData: SoftwareUpdateTab_createManualOtaOperationNoExistingBaseImage_Mutation$data["createManualOtaOperationNoExistingBaseImage"] | SoftwareUpdateTab_createManualOtaOperationExistingBaseImage_Mutation$data["createManualOtaOperationExistingBaseImage"] | undefined;
+        if("createManualOtaOperationNoExistingBaseImage" in data) {
+          mutData = data.createManualOtaOperationNoExistingBaseImage
+        }
+        else if (data && "createManualOtaOperationExistingBaseImage" in data) {
+          mutData = data.createManualOtaOperationExistingBaseImage
+        }
+        const otaOperationId = mutData?.result?.id;
         if (otaOperationId) {
           const otaOperation = store.get(otaOperationId);
           const storedDevice = store.get(deviceId);
@@ -225,10 +303,16 @@ const DeviceSoftwareUpdateTab = ({
             );
           }
         }
+        }
       },
     });
   };
 
+  const baseImageCollections = usePreloadedQuery(
+    GET_BASE_IMAGE_COLL_QUERY,
+    getBaseImageCollsQuery,
+  );
+
   return (
     <Tab
       eventKey="device-software-update-tab"
@@ -252,11 +336,14 @@ const DeviceSoftwareUpdateTab = ({
         >
           {errorFeedback}
         </Alert>
-        <BaseImageForm
-          className="mt-3"
-          onSubmit={launchManualOTAUpdate}
-          isLoading={isCreatingOtaOperation}
-        />
+        <Suspense fallback={<Spinner />}>
+          <BaseImageForm
+            className="mt-3"
+            onManualOTAImageSubmit={launchManualOTAUpdate}
+            isLoading={isCreatingOtaOperation}
+            baseImageCollectionsData={baseImageCollections}
+          />
+        </Suspense>
         {currentOperation && (
           <div className="mt-3">
             <FormattedMessage
@@ -290,4 +377,18 @@ const DeviceSoftwareUpdateTab = ({
   );
 };
 
+export const DisabledDeviceSoftwareTab = ({}) => {
+  const intl = useIntl();
+  return (
+    <Tab
+      className="disabled"
+      eventKey="device-software-update-tab"
+      title={intl.formatMessage({
+        id: "components.DeviceTabs.SoftwareUpdateTab",
+        defaultMessage: "Software Updates",
+      })}
+    />
+  );
+};
+
 export default DeviceSoftwareUpdateTab;