Update to allow multiple ids to be edited

Signed-off-by: ibolton336 <[email protected]>

client/src/app/pages/external/jira/tracker-form.tsx

@@ -38,6 +38,7 @@ import {
 import { NotificationsContext } from "@app/components/NotificationsContext";
 import { DEFAULT_SELECT_MAX_HEIGHT } from "@app/Constants";
 import { QuestionCircleIcon } from "@patternfly/react-icons";
+import { UpdatableId } from "./useUpdatingTrackerIds";
 
 const supportedIdentityKindByIssueManagerKind: Record<
   IssueManagerKind,
@@ -58,16 +59,14 @@ interface FormValues {
 
 export interface TrackerFormProps {
   onClose: () => void;
-  setUpdatingTrackerId: React.Dispatch<
-    React.SetStateAction<number | null | string>
-  >;
+  addUpdatingTrackerId: (id: UpdatableId) => void;
   tracker?: Tracker;
 }
 
 export const TrackerForm: React.FC<TrackerFormProps> = ({
   tracker,
   onClose,
-  setUpdatingTrackerId,
+  addUpdatingTrackerId,
 }) => {
   const { t } = useTranslation();
 
@@ -86,7 +85,7 @@ export const TrackerForm: React.FC<TrackerFormProps> = ({
       variant: "success",
     });
 
-    setUpdatingTrackerId(_.data.id);
+    addUpdatingTrackerId(_.data.id);
   };
 
   const onUpdateTrackerSuccess = (
@@ -100,7 +99,7 @@ export const TrackerForm: React.FC<TrackerFormProps> = ({
       variant: "success",
     });
 
-    setUpdatingTrackerId(tracker.id);
+    addUpdatingTrackerId(tracker.id);
   };
 
   const onCreateUpdatetrackerError = (error: AxiosError) => {

client/src/app/pages/external/jira/trackers.tsx

@@ -45,7 +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";
+import useUpdatingTrackerIds from "./useUpdatingTrackerIds";
 
 export const JiraTrackers: React.FC = () => {
   const { t } = useTranslation();
@@ -149,10 +149,8 @@ export const JiraTrackers: React.FC = () => {
     },
   } = tableControls;
 
-  //Handle tracker update temporary loading state
-  const [updatingTrackerId, setUpdatingTrackerId] = useUpdatingTrackerId(10000);
-
-  //
+  const [updatingTrackerIds, addUpdatingTrackerId] =
+    useUpdatingTrackerIds(10000);
 
   return (
     <>
@@ -266,7 +264,7 @@ export const JiraTrackers: React.FC = () => {
                           width={10}
                           {...getTdProps({ columnKey: "connection" })}
                         >
-                          {updatingTrackerId === tracker.id ? (
+                          {updatingTrackerIds.includes(tracker.id) ? (
                             <Spinner size="sm" />
                           ) : (
                             <TrackerStatus
@@ -318,7 +316,7 @@ export const JiraTrackers: React.FC = () => {
       >
         <TrackerForm
           tracker={trackerToUpdate ? trackerToUpdate : undefined}
-          setUpdatingTrackerId={setUpdatingTrackerId}
+          addUpdatingTrackerId={addUpdatingTrackerId}
           onClose={() => setTrackerModalState(null)}
         />
       </Modal>

client/src/app/pages/external/jira/useUpdatingTrackerIds.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+export type UpdatableId = string | number | null;
+
+const useUpdatingTrackerIds = (delay: number = 5000) => {
+  const [updatingTrackerIds, setUpdatingTrackerIds] = useState<
+    Set<UpdatableId>
+  >(new Set());
+
+  useEffect(() => {
+    let timerId: number | null = null;
+
+    if (updatingTrackerIds.size > 0) {
+      timerId = window.setTimeout(() => {
+        setUpdatingTrackerIds(new Set());
+      }, delay);
+    }
+
+    return () => {
+      if (timerId !== null) {
+        window.clearTimeout(timerId);
+      }
+    };
+  }, [updatingTrackerIds, delay]);
+
+  const addUpdatingTrackerId = (id: UpdatableId) => {
+    setUpdatingTrackerIds((prevSet) => new Set(prevSet.add(id)));
+  };
+
+  return [Array.from(updatingTrackerIds), addUpdatingTrackerId] as const;
+};
+
+export default useUpdatingTrackerIds;