Merge branch 'CE-3152-reset-host-field-dialog' into 'develop'

CE-3152: Reset host field, Fix bad loading behaviour, implement RTK Hooks

See merge request !543

src/components/IOC/IOCDeployDialog/IOCDeployDialog.js → src/components/IOC/IOCDeployDialog/IOCDeployDialog.tsx

-import { useCallback, useContext, useEffect, useState, useMemo } from "react";
+import { useCallback, useEffect, useState, useMemo } from "react";
 import {
   Button,
   TextField,
@@ -8,12 +8,43 @@ import {
   Alert,
   Stack
 } from "@mui/material";
-import { apiContext } from "../../../api/DeployApi";
+import { Dialog, GitRefAutocomplete } from "@ess-ics/ce-ui-common";
 import {
-  useAPIMethod,
-  Dialog,
-  GitRefAutocomplete
-} from "@ess-ics/ce-ui-common";
+  GitReference,
+  HostInfoWithId,
+  useLazyListHostsQuery,
+  useLazyListTagsAndCommitIdsQuery
+} from "../../../store/deployApi";
+import { getErrorMessage } from "../../common/Helper";
+import { FormElements } from "../../../types/common";
+
+interface DeployIocFormDefaults {
+  name: string;
+  description: string;
+  git: string;
+  gitProjectId: number;
+  reference?: string;
+  short_reference?: string;
+  netBoxHost?: {
+    fqdn: string;
+    hostId: string;
+  };
+}
+
+interface IOCDeployDialogProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  iocId: string;
+  submitCallback: (arg0: object, arg1: object) => void;
+  hasActiveDeployment: boolean;
+  deployIocFormDefaults: DeployIocFormDefaults;
+  error: string;
+  resetError: () => void;
+  buttonDisabled: boolean;
+  setButtonDisabled: (buttonDisabled: boolean) => void;
+}
+
+type SearchMethodConstants = "EQUALS" | "CONTAINS";
 
 export function IOCDeployDialog({
   open,
@@ -21,44 +52,36 @@ export function IOCDeployDialog({
   iocId,
   submitCallback,
   hasActiveDeployment,
-  deployIocFormDefaults = {},
+  deployIocFormDefaults,
   error,
   resetError,
   buttonDisabled,
   setButtonDisabled
-}) {
-  const client = useContext(apiContext);
-
-  const {
-    value: hosts,
-    wrapper: getHosts,
-    loading: loadingHosts
-  } = useAPIMethod({
-    fcn: client.apis.Hosts.listHosts,
-    call: false
-  });
-
-  const {
-    value: tagOrCommitId,
-    wrapper: callGetTagOrCommitId,
-    loading: loadingTagsAndCommitIds,
-    error: tagOrCommitIdError
-  } = useAPIMethod({
-    fcn: client.apis.Git.listTagsAndCommitIds,
-    call: false,
-    init: []
-  });
-
-  const getTagOrCommitId = useCallback(
-    (gitProjectId, reference, includeAllReference, searchMethod) => {
-      callGetTagOrCommitId({
-        project_id: gitProjectId,
-        reference: reference,
-        include_all_reference: includeAllReference,
-        search_method: searchMethod
+}: IOCDeployDialogProps) {
+  const [getHosts, { data: hosts, isFetching: loadingHosts }] =
+    useLazyListHostsQuery();
+  const [
+    callgetTagOrCommitIds,
+    {
+      data: tagOrCommitIds = [],
+      isFetching: loadingTagsAndCommitIds,
+      error: tagOrCommitIdsError
+    }
+  ] = useLazyListTagsAndCommitIdsQuery();
+
+  const getTagOrCommitIds = useCallback(
+    (
+      gitProjectId: number,
+      reference: string,
+      searchMethod: SearchMethodConstants
+    ) => {
+      callgetTagOrCommitIds({
+        projectId: gitProjectId,
+        reference,
+        searchMethod
       });
     },
-    [callGetTagOrCommitId]
+    [callgetTagOrCommitIds]
   );
 
   const initHost = useMemo(
@@ -71,29 +94,32 @@ export function IOCDeployDialog({
 
   const [host, setHost] = useState(initHost);
   const [query, setQuery] = useState("");
-  const [gitRepo, setGitRepo] = useState(deployIocFormDefaults.git || "");
-  const [revision, setRevision] = useState(deployIocFormDefaults);
+  const [gitRepo, setGitRepo] = useState(deployIocFormDefaults.git);
+  const [revision, setRevision] = useState(deployIocFormDefaults.reference);
   const gitProjectId = deployIocFormDefaults.gitProjectId;
+  const hasHostData = host?.hostId || host?.fqdn;
 
   const handleClose = () => {
     setOpen(false);
+    setHost(initHost);
     resetError();
   };
 
   useEffect(() => {
-    if (query && query.length > 2) {
+    if (!hasHostData && query && query.length > 2) {
       getHosts({ text: `${query}` });
     }
   }, [query, getHosts]);
 
   useEffect(() => {
-    getTagOrCommitId(gitProjectId, "", false, "CONTAINS");
-  }, [gitProjectId, getTagOrCommitId]);
+    getTagOrCommitIds(gitProjectId, "", "CONTAINS");
+  }, [gitProjectId, getTagOrCommitIds]);
 
-  const onSubmit = (event) => {
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setButtonDisabled(true);
-    const { git: gitText } = event.currentTarget.elements;
+    const { git: gitText } = event.currentTarget
+      .elements as FormElements<"git">;
     const git = gitText.value;
 
     submitCallback(
@@ -103,7 +129,7 @@ export function IOCDeployDialog({
       {
         requestBody: {
           sourceUrl: git,
-          sourceVersion: revision.reference,
+          sourceVersion: revision,
           hostId: host.hostId,
           type: "DEPLOY"
         }
@@ -146,24 +172,26 @@ export function IOCDeployDialog({
           <GitRefAutocomplete
             id="version"
             label="Revision"
-            options={tagOrCommitId}
+            options={tagOrCommitIds}
             loading={loadingTagsAndCommitIds}
             disabled={!gitRepo || gitRepo.trim() === ""}
             autocompleteProps={{
               autoSelect: false,
-              defaultValue: tagOrCommitId.find(
+              defaultValue: tagOrCommitIds.find(
                 (tagOrCommit) =>
                   tagOrCommit.reference === deployIocFormDefaults.reference
               )
             }}
-            onGitQueryValueSelect={(_, value) => {
-              setRevision(value);
+            onGitQueryValueSelect={(
+              _: React.SyntheticEvent<Element, Event>,
+              value: GitReference
+            ) => {
+              setRevision(value?.reference);
               resetError();
             }}
             textFieldProps={{
-              helperText: tagOrCommitIdError
-                ? `Error: ${tagOrCommitId?.message}`
-                : ""
+              helperText:
+                tagOrCommitIdsError && getErrorMessage(tagOrCommitIdsError)
             }}
           />
 
@@ -199,11 +227,11 @@ export function IOCDeployDialog({
                 }}
               />
             )}
-            onChange={(_event, value) => {
-              setHost(value);
+            onChange={(_, value: HostInfoWithId | null) => {
+              setHost({ fqdn: value?.fqdn, hostId: value?.hostId });
               resetError();
             }}
-            onInputChange={(_event, value) => setQuery(value)}
+            onInputChange={(_, value) => setQuery(value)}
             disabled={hasActiveDeployment}
             autoSelect
             filterOptions={(options) => options}

src/types/common.ts

@@ -44,3 +44,6 @@ export interface ApiResult<T> {
   error?: ApiError;
   data?: T;
 }
+
+export type FormElements<U extends string> = HTMLFormControlsCollection &
+  Record<U, HTMLInputElement>;