Add Pin/Unpin animations

package.json

@@ -111,6 +111,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.25.1",
+    "@formkit/auto-animate": "^0.8.2",
     "@tanstack/react-table": "^8.7.8",
     "allotment": "^1.19.0",
     "axios": "^1.7.4",

src/components/Errors/GlobalErrorsList/index.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { dispatcher } from "../../../dispatcher";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getFeatureFlagValue } from "../../../featureFlags";
 import {
   DataFetcherConfiguration,
   useFetchData
 } from "../../../hooks/useFetchData";
 import { useMount } from "../../../hooks/useMount";
+import { usePrevious } from "../../../hooks/usePrevious";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import {
   GLOBAL_ERROR_SORTING_CRITERION,
@@ -36,10 +37,25 @@ import {
   SetGlobalErrorsDataPayload
 } from "./types";
 
+const PIN_UNPIN_ANIMATION_DURATION = 250;
+
 export const GlobalErrorsList = () => {
   const { goTo } = useHistory();
   const [isSortingMenuOpen, setIsSortingMenuOpen] = useState(false);
   const listContainerRef = useRef<HTMLDivElement | null>(null);
+  const [parent, toggleAnimations] = useAutoAnimate({
+    duration: PIN_UNPIN_ANIMATION_DURATION
+  });
+  const [latestPinChangedId, setLatestPinChangedId] = useState<string>();
+
+  // useAutoAnimate requires to memoize callback
+  const getListContainerRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      listContainerRef.current = el;
+      parent(el);
+    },
+    [parent, listContainerRef]
+  );
 
   const { environment, backendInfo } = useConfigSelector();
 
@@ -53,6 +69,8 @@ export const GlobalErrorsList = () => {
     globalErrorsSelectedFilters: selectedFilters
   } = useErrorsSelector();
 
+  const previousList = usePrevious(list);
+
   const {
     setGlobalErrorsData,
     setGlobalErrorsSearch,
@@ -135,19 +153,9 @@ export const GlobalErrorsList = () => {
     SetGlobalErrorsDataPayload
   >(dataFetcherConfiguration, payload);
 
-  // Refresh data after pin/unpin actions
-  useEffect(() => {
-    dispatcher.addActionListener(actions.SET_PIN_ERROR_RESULT, getData);
-    dispatcher.addActionListener(actions.SET_UNPIN_ERROR_RESULT, getData);
-
-    return () => {
-      dispatcher.removeActionListener(actions.SET_PIN_ERROR_RESULT, getData);
-      dispatcher.removeActionListener(actions.SET_UNPIN_ERROR_RESULT, getData);
-    };
-  }, [getData]);
-
-  // Cleanup errors store slice on unmount
   useMount(() => {
+    toggleAnimations(false);
+
     return () => {
       resetGlobalErrors();
     };
@@ -160,6 +168,28 @@ export const GlobalErrorsList = () => {
     }
   }, [data, setGlobalErrorsData]);
 
+  // Disable animations after pin/unpin actions
+  useEffect(() => {
+    if (!previousList || !list || !latestPinChangedId) {
+      return;
+    }
+
+    if (previousList !== list) {
+      const isLatestChangedIdInList = list.some(
+        (x) => x.id === latestPinChangedId
+      );
+
+      if (isLatestChangedIdInList) {
+        setTimeout(() => {
+          toggleAnimations(false);
+        }, PIN_UNPIN_ANIMATION_DURATION);
+      } else {
+        toggleAnimations(false);
+      }
+      setLatestPinChangedId(undefined);
+    }
+  }, [previousList, list, latestPinChangedId, toggleAnimations]);
+
   // Reset page on filters change
   useEffect(() => {
     setGlobalErrorsPage(0);
@@ -226,6 +256,15 @@ export const GlobalErrorsList = () => {
     resetGlobalErrorsSelectedFilters();
   };
 
+  const handlePinStatusToggle = () => {
+    toggleAnimations(true);
+  };
+
+  const handlePinStatusChange = (errorId: string) => {
+    setLatestPinChangedId(errorId);
+    getData();
+  };
+
   const areAnyFiltersApplied =
     search ||
     [
@@ -267,12 +306,14 @@ export const GlobalErrorsList = () => {
           </s.ToolbarContainer>
           {list.length > 0 ? (
             <>
-              <s.ListContainer ref={listContainerRef}>
+              <s.ListContainer ref={getListContainerRef}>
                 {list.map((x) => (
                   <NewErrorCard
                     key={x.id}
                     data={x}
                     onSourceLinkClick={handleErrorSourceLinkClick}
+                    onPinStatusChange={handlePinStatusChange}
+                    onPinStatusToggle={handlePinStatusToggle}
                   />
                 ))}
               </s.ListContainer>

src/components/Errors/GlobalErrorsList/types.ts

@@ -48,3 +48,11 @@ export interface SetGlobalErrorsDataPayload {
   totalCount: number;
   list: GlobalErrorData[];
 }
+
+export interface SetPinUnpinErrorResultPayload {
+  id: string;
+  status: "success" | "failure";
+  error?: {
+    message: string;
+  };
+}

src/components/Errors/GlobalErrorsList/usePinning.ts

@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useState } from "react";
+import { dispatcher } from "../../../dispatcher";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { actions } from "../actions";
+import { PinUnpinErrorPayload } from "../NewErrorCard/types";
+import { SetPinUnpinErrorResultPayload } from "./types";
+
+export const usePinning = (errorId: string) => {
+  const { environment } = useConfigSelector();
+  const [data, setData] = useState<{
+    action: string;
+    payload: SetPinUnpinErrorResultPayload;
+  } | null>(null);
+  const [isOperationInProgress, setIsOperationInProgress] = useState(false);
+
+  useEffect(() => {
+    const handlePinErrorResult = (payload: unknown) => {
+      handleResult(actions.PIN_ERROR, payload);
+    };
+
+    const handleUnpinErrorResult = (payload: unknown) => {
+      handleResult(actions.UNPIN_ERROR, payload);
+    };
+
+    const handleResult = (action: string, data: unknown) => {
+      const payload = data as SetPinUnpinErrorResultPayload;
+      if (errorId === payload.id) {
+        setData({ action, payload });
+        setIsOperationInProgress(false);
+      }
+    };
+
+    dispatcher.addActionListener(
+      actions.SET_PIN_ERROR_RESULT,
+      handlePinErrorResult
+    );
+    dispatcher.addActionListener(
+      actions.SET_UNPIN_ERROR_RESULT,
+      handleUnpinErrorResult
+    );
+
+    return () => {
+      dispatcher.removeActionListener(
+        actions.SET_PIN_ERROR_RESULT,
+        handlePinErrorResult
+      );
+      dispatcher.removeActionListener(
+        actions.SET_UNPIN_ERROR_RESULT,
+        handleUnpinErrorResult
+      );
+    };
+  }, [errorId]);
+
+  const sendAction = useCallback(
+    (action: string) => {
+      if (!environment) {
+        return;
+      }
+
+      window.sendMessageToDigma<PinUnpinErrorPayload>({
+        action,
+        payload: {
+          id: errorId,
+          environment: environment?.id
+        }
+      });
+      setIsOperationInProgress(true);
+    },
+    [errorId, environment]
+  );
+
+  const pin = useCallback(() => {
+    sendAction(actions.PIN_ERROR);
+  }, [sendAction]);
+
+  const unpin = useCallback(() => {
+    sendAction(actions.UNPIN_ERROR);
+  }, [sendAction]);
+
+  return {
+    pin,
+    unpin,
+    data,
+    isInProgress: isOperationInProgress
+  };
+};

src/components/Errors/NewErrorCard/NewErrorCard.stories.tsx

@@ -35,3 +35,12 @@ export const Critical: Story = {
     }
   }
 };
+
+export const Pinned: Story = {
+  args: {
+    data: {
+      ...mockedGlobalErrorData,
+      pinnedAt: "2024-10-06T12:57:46.864939Z"
+    }
+  }
+};