🐛 Shows client side loading state to allow backend time to connect to…

… instance Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Sep 27, 2023 · e4c2be5 · e4c2be5
1 parent 9cf7840
commit e4c2be5
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 22 deletions.
diff --git a/client/src/app/pages/external/jira/tracker-form.tsx b/client/src/app/pages/external/jira/tracker-form.tsx
@@ -57,49 +57,70 @@ interface FormValues {
 }
 
 export interface TrackerFormProps {
-  tracker?: Tracker;
   onClose: () => void;
+  setUpdatingTrackerId: React.Dispatch<
+    React.SetStateAction<number | null | string>
+  >;
+  tracker?: Tracker;
 }
 
 export const TrackerForm: React.FC<TrackerFormProps> = ({
   tracker,
   onClose,
+  setUpdatingTrackerId,
 }) => {
   const { t } = useTranslation();
 
   const [axiosError, setAxiosError] = useState<AxiosError>();
-  const [isLoading, setIsLoading] = useState(false);
 
   const { trackers: trackers } = useFetchTrackers();
   const { identities } = useFetchIdentities();
 
   const { pushNotification } = React.useContext(NotificationsContext);
 
-  const onCreateTrackerSuccess = (_: AxiosResponse<Tracker>) =>
+  const onCreateTrackerSuccess = (_: AxiosResponse<Tracker>) => {
     pushNotification({
       title: t("toastr.success.save", {
         type: t("terms.instance"),
       }),
       variant: "success",
     });
 
-  const onCreateUpdatetrackerError = (error: AxiosError) => {
-    setAxiosError(error);
-  };
+    setUpdatingTrackerId(_.data.id);
 
-  const { mutate: createTracker } = useCreateTrackerMutation(
-    onCreateTrackerSuccess,
-    onCreateUpdatetrackerError
-  );
+    setTimeout(() => {
+      setUpdatingTrackerId(null);
+    }, 5000);
+  };
 
-  const onUpdateTrackerSuccess = (_: AxiosResponse<Tracker>) =>
+  const onUpdateTrackerSuccess = (
+    _: AxiosResponse<Tracker>,
+    tracker: Tracker
+  ) => {
     pushNotification({
       title: t("toastr.success.save", {
         type: t("terms.instance"),
       }),
       variant: "success",
     });
 
+    setUpdatingTrackerId(tracker.id);
+
+    setTimeout(() => {
+      setUpdatingTrackerId(null);
+    }, 5000);
+  };
+
+  const onCreateUpdatetrackerError = (error: AxiosError) => {
+    setAxiosError(error);
+    setUpdatingTrackerId(null);
+  };
+
+  const { mutate: createTracker } = useCreateTrackerMutation(
+    onCreateTrackerSuccess,
+    onCreateUpdatetrackerError
+  );
+
   const { mutate: updateTracker } = useUpdateTrackerMutation(
     onUpdateTrackerSuccess,
     onCreateUpdatetrackerError
@@ -311,9 +332,7 @@ export const TrackerForm: React.FC<TrackerFormProps> = ({
           aria-label="submit"
           id="submit"
           variant={ButtonVariant.primary}
-          isDisabled={
-            !isValid || isSubmitting || isValidating || isLoading || !isDirty
-          }
+          isDisabled={!isValid || isSubmitting || isValidating || !isDirty}
         >
           {!tracker ? "Create" : "Save"}
         </Button>

diff --git a/client/src/app/pages/external/jira/trackers.tsx b/client/src/app/pages/external/jira/trackers.tsx
@@ -8,6 +8,7 @@ import {
   Modal,
   PageSection,
   PageSectionVariants,
+  Spinner,
   Text,
   TextContent,
   Title,
@@ -44,6 +45,7 @@ import { ConditionalRender } from "@app/components/ConditionalRender";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { ConfirmDialog } from "@app/components/ConfirmDialog";
 import { AppTableActionButtons } from "@app/components/AppTableActionButtons";
+import useUpdatingTrackerId from "./useUpdatingTrackerId";
 
 export const JiraTrackers: React.FC = () => {
   const { t } = useTranslation();
@@ -147,6 +149,11 @@ export const JiraTrackers: React.FC = () => {
     },
   } = tableControls;
 
+  //Handle tracker update temporary loading state
+  const [updatingTrackerId, setUpdatingTrackerId] = useUpdatingTrackerId(10000);
+
+  //
+
   return (
     <>
       <PageSection variant={PageSectionVariants.light}>
@@ -259,11 +266,15 @@ export const JiraTrackers: React.FC = () => {
                           width={10}
                           {...getTdProps({ columnKey: "connection" })}
                         >
-                          <TrackerStatus
-                            name={tracker.name}
-                            connected={tracker.connected}
-                            message={tracker.message}
-                          />
+                          {updatingTrackerId === tracker.id ? (
+                            <Spinner size="sm" />
+                          ) : (
+                            <TrackerStatus
+                              name={tracker.name}
+                              connected={tracker.connected}
+                              message={tracker.message}
+                            />
+                          )}
                         </Td>
                         <Td width={20}>
                           <AppTableActionButtons
@@ -307,6 +318,7 @@ export const JiraTrackers: React.FC = () => {
       >
         <TrackerForm
           tracker={trackerToUpdate ? trackerToUpdate : undefined}
+          setUpdatingTrackerId={setUpdatingTrackerId}
           onClose={() => setTrackerModalState(null)}
         />
       </Modal>

diff --git a/client/src/app/pages/external/jira/useUpdatingTrackerId.ts b/client/src/app/pages/external/jira/useUpdatingTrackerId.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+type UpdatableId = string | number | null;
+
+const useUpdatingTrackerId = (delay: number = 5000) => {
+  const [updatingTrackerId, setUpdatingTrackerId] = useState<UpdatableId>(null);
+
+  useEffect(() => {
+    let timerId: number | null = null;
+
+    if (updatingTrackerId !== null) {
+      timerId = window.setTimeout(() => {
+        setUpdatingTrackerId(null);
+      }, delay);
+    }
+
+    return () => {
+      if (timerId !== null) {
+        window.clearTimeout(timerId);
+      }
+    };
+  }, [updatingTrackerId, delay]);
+
+  return [updatingTrackerId, setUpdatingTrackerId] as const;
+};
+
+export default useUpdatingTrackerId;
diff --git a/client/src/app/queries/trackers.ts b/client/src/app/queries/trackers.ts
@@ -49,14 +49,14 @@ export const useCreateTrackerMutation = (
 };
 
 export const useUpdateTrackerMutation = (
-  onSuccess: (res: any) => void,
+  onSuccess: (res: any, tracker: Tracker) => void,
   onError: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: updateTracker,
-    onSuccess: (res) => {
-      onSuccess(res);
+    onSuccess: (res, tracker) => {
+      onSuccess(res, tracker);
       queryClient.invalidateQueries([TrackersQueryKey]);
     },
     onError: onError,