Update to allow multiple ids to be edited

Signed-off-by: ibolton336 <ibolton@redhat.com>

client/src/app/pages/external/jira/components/tracker-status.tsx

@@ -1,5 +1,5 @@
+import "./tracker-status.css";
 import React, { useState } from "react";
-
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { useTranslation } from "react-i18next";
 import {
@@ -10,26 +10,33 @@ import {
   Popover,
   Text,
   TextContent,
+  Spinner,
 } from "@patternfly/react-core";
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
-
 import { IconedStatus } from "@app/components/IconedStatus";
-import "./tracker-status.css";
 
 interface ITrackerStatusProps {
   name: string;
   connected: boolean;
   message: string;
+  isTrackerUpdating?: boolean;
 }
-const TrackerStatus = ({ name, connected, message }: ITrackerStatusProps) => {
+const TrackerStatus = ({
+  name,
+  connected,
+  message,
+  isTrackerUpdating,
+}: ITrackerStatusProps) => {
   const { t } = useTranslation();
 
   const [isExpanded, setIsExpanded] = useState(false);
   const needsExpanding = message.length > 300;
   const messageFirst = message.slice(0, 300);
   const messageRest = message.slice(300);
 
-  return (
+  return isTrackerUpdating ? (
+    <Spinner size="sm" />
+  ) : (
     <>
       <IconedStatus
         preset={connected ? "Ok" : "Error"}
@@ -42,7 +49,9 @@ const TrackerStatus = ({ name, connected, message }: ITrackerStatusProps) => {
               aria-label="More information about no connection"
               alertSeverityVariant="danger"
               headerIcon={<ExclamationCircleIcon />}
-              headerContent={t("composed.error", { what: t("terms.instance") })}
+              headerContent={t("composed.error", {
+                what: t("terms.instance"),
+              })}
               hasAutoWidth
               onHidden={() => setIsExpanded(false)}
               bodyContent={

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

@@ -58,16 +58,14 @@ interface FormValues {
 
 export interface TrackerFormProps {
   onClose: () => void;
-  setUpdatingTrackerId: React.Dispatch<
-    React.SetStateAction<number | null | string>
-  >;
+  addUpdatingTrackerId: (id: number) => void;
   tracker?: Tracker;
 }
 
 export const TrackerForm: React.FC<TrackerFormProps> = ({
   tracker,
   onClose,
-  setUpdatingTrackerId,
+  addUpdatingTrackerId,
 }) => {
   const { t } = useTranslation();
 
@@ -86,7 +84,7 @@ export const TrackerForm: React.FC<TrackerFormProps> = ({
       variant: "success",
     });
 
-    setUpdatingTrackerId(_.data.id);
+    addUpdatingTrackerId(_.data.id);
   };
 
   const onUpdateTrackerSuccess = (
@@ -100,7 +98,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

@@ -8,7 +8,6 @@ import {
   Modal,
   PageSection,
   PageSectionVariants,
-  Spinner,
   Text,
   TextContent,
   Title,
@@ -45,7 +44,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 +148,7 @@ export const JiraTrackers: React.FC = () => {
     },
   } = tableControls;
 
-  //Handle tracker update temporary loading state
-  const [updatingTrackerId, setUpdatingTrackerId] = useUpdatingTrackerId(10000);
-
-  //
+  const [updatingTrackerIds, addUpdatingTrackerId] = useUpdatingTrackerIds();
 
   return (
     <>
@@ -266,15 +262,14 @@ export const JiraTrackers: React.FC = () => {
                           width={10}
                           {...getTdProps({ columnKey: "connection" })}
                         >
-                          {updatingTrackerId === tracker.id ? (
-                            <Spinner size="sm" />
-                          ) : (
-                            <TrackerStatus
-                              name={tracker.name}
-                              connected={tracker.connected}
-                              message={tracker.message}
-                            />
-                          )}
+                          <TrackerStatus
+                            name={tracker.name}
+                            connected={tracker.connected}
+                            message={tracker.message}
+                            isTrackerUpdating={updatingTrackerIds.has(
+                              tracker.id
+                            )}
+                          />
                         </Td>
                         <Td width={20}>
                           <AppTableActionButtons
@@ -318,7 +313,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,42 @@
+import { useState } from "react";
+import dayjs from "dayjs";
+
+export type UpdatableId = {
+  id: number;
+  expirationTime: dayjs.ConfigType;
+};
+
+const useUpdatingTrackerIds = () => {
+  const [updatingTrackerIds, setUpdatingTrackerIds] = useState<
+    Map<number, dayjs.Dayjs>
+  >(new Map());
+
+  const addUpdatingTrackerId = (id: number) => {
+    const now = dayjs();
+    const existingExpiry = updatingTrackerIds.get(id);
+
+    if (!existingExpiry || existingExpiry.isBefore(now)) {
+      const expiryDate = dayjs().add(8, "seconds");
+
+      setUpdatingTrackerIds((prevMap) => {
+        const updatedMap = new Map(prevMap);
+        updatedMap.set(id, expiryDate);
+        return updatedMap;
+      });
+
+      const timeRemaining = expiryDate.diff(now);
+
+      setTimeout(() => {
+        setUpdatingTrackerIds((prevMap) => {
+          const updatedMap = new Map(prevMap);
+          updatedMap.delete(id);
+          return updatedMap;
+        });
+      }, timeRemaining);
+    }
+  };
+
+  return [updatingTrackerIds, addUpdatingTrackerId] as const;
+};
+
+export default useUpdatingTrackerIds;