fix error when action details trays are expanded and paging is used

fixes elastic/security-team/issues/6603
elastic · May 16, 2023 · 1853938 · 1853938
1 parent 6bc337c
commit 1853938
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git a/...lic/management/components/endpoint_response_actions_list/components/actions_log_table.tsx b/...lic/management/components/endpoint_response_actions_list/components/actions_log_table.tsx
@@ -290,8 +290,6 @@ export const ActionsLogTable = memo<ActionsLogTableProps>(
     showHostNames,
     totalItemCount,
   }) => {
-    const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<ExpandedRowMapType>({});
-
     const getTestId = useTestIdGenerator(dataTestSubj);
     const { pagination: paginationFromUrlParams } = useUrlPagination();
     const { withOutputs: withOutputsFromUrl } = useActionHistoryUrlParams();
@@ -309,22 +307,53 @@ export const ActionsLogTable = memo<ActionsLogTableProps>(
         : [];
     }, [isFlyout, queryParams.withOutputs, withOutputsFromUrl]);
 
+    const actionIdsWithOpenTrays: string[] = useMemo(
+      () => getActionIdsWithDetails(),
+      [getActionIdsWithDetails]
+    );
+
+    const redoOpenTrays = useCallback(() => {
+      if (actionIdsWithOpenTrays.length && items.length) {
+        const openDetails = actionIdsWithOpenTrays.reduce<ExpandedRowMapType>(
+          (idToRowMap, actionId) => {
+            idToRowMap[actionId] = (
+              <ActionsLogExpandedTray
+                action={items.filter((item) => item.id === actionId)[0]}
+                data-test-subj={dataTestSubj}
+              />
+            );
+            return idToRowMap;
+          },
+          {}
+        );
+        setItemIdToExpandedRowMap(openDetails);
+      }
+    }, [actionIdsWithOpenTrays, dataTestSubj, items]);
+
+    const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<ExpandedRowMapType>(
+      actionIdsWithOpenTrays.length && items.length
+        ? actionIdsWithOpenTrays.reduce<ExpandedRowMapType>(
+            (initialActionIdsToRowMap, actionId) => {
+              const actionItem = items.filter((item) => item.id === actionId)[0];
+              // if (!actionItem) return initialActionIdsToRowMap;
+              initialActionIdsToRowMap[actionId] = (
+                <ActionsLogExpandedTray action={actionItem} data-test-subj={dataTestSubj} />
+              );
+              return initialActionIdsToRowMap;
+            },
+            {}
+          )
+        : {}
+    );
+
+    const allActionIdsOnPage = useMemo(() => items.map((item) => item.id), [items]);
+
+    // open trays that were open using URL params/ query params
     useEffect(() => {
-      const actionIdsWithDetails = getActionIdsWithDetails();
-      const openDetails = actionIdsWithDetails.reduce<ExpandedRowMapType>(
-        (idToRowMap, actionId) => {
-          idToRowMap[actionId] = (
-            <ActionsLogExpandedTray
-              action={items.filter((item) => item.id === actionId)[0]}
-              data-test-subj={dataTestSubj}
-            />
-          );
-          return idToRowMap;
-        },
-        {}
-      );
-      setItemIdToExpandedRowMap(openDetails);
-    }, [dataTestSubj, getActionIdsWithDetails, items, queryParams.withOutputs, withOutputsFromUrl]);
+      if (actionIdsWithOpenTrays.every((actionId) => allActionIdsOnPage.includes(actionId))) {
+        redoOpenTrays();
+      }
+    }, [dataTestSubj, allActionIdsOnPage, actionIdsWithOpenTrays, items, redoOpenTrays]);
 
     const toggleDetails = useCallback(
       (action: ActionListApiResponse['data'][number]) => {

diff --git a/...ecurity_solution/public/management/hooks/response_actions/use_get_endpoint_action_list.ts b/...ecurity_solution/public/management/hooks/response_actions/use_get_endpoint_action_list.ts
@@ -40,6 +40,7 @@ export const useGetEndpointActionList = (
   return useQuery<ActionListApiResponse, IHttpFetchError<ErrorType>>({
     queryKey: ['get-action-list', query],
     ...options,
+    keepPreviousData: true,
     queryFn: async () => {
       return http.get<ActionListApiResponse>(path, {
         query: {