fix status command to not flicker and to show pending message (#135583)

x-pack/plugins/security_solution/public/management/components/endpoint_responder/status_action.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { memo, useEffect, useMemo } from 'react';
-import { EuiCallOut, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import type { HttpFetchError } from '@kbn/core/public';
@@ -33,21 +33,25 @@ export const EndpointStatusActionResult = memo<
     },
     EndpointCommandDefinitionMeta
   >
->(({ command, status, setStatus, store, setStore }) => {
+>(({ command, status, setStatus, store, setStore, ResultComponent }) => {
   const endpointId = command.commandDefinition?.meta?.endpointId as string;
   const { endpointPendingActions, endpointDetails, detailsFetchError, apiCalled } = store;
   const isPending = status === 'pending';
+  const queryKey = useMemo(() => {
+    return uuidV4();
+  }, []);
 
   const {
+    data: fetchedEndpointDetails,
+    error: fetchedDetailsError,
     isFetching,
     isFetched,
-    refetch: fetchEndpointDetails,
-  } = useGetEndpointDetails(endpointId, { enabled: false });
+  } = useGetEndpointDetails(endpointId, { enabled: isPending, queryKey });
 
-  const { refetch: fetchEndpointPendingActionsSummary } = useGetEndpointPendingActionsSummary(
-    [endpointId],
-    { enabled: false }
-  );
+  const { data: fetchedPendingActionsSummary } = useGetEndpointPendingActionsSummary([endpointId], {
+    enabled: isPending,
+    queryKey,
+  });
 
   const pendingIsolationActions = useMemo<
     Pick<Required<EndpointHostIsolationStatusProps>, 'pendingIsolate' | 'pendingUnIsolate'>
@@ -67,70 +71,64 @@ export const EndpointStatusActionResult = memo<
   }, [endpointPendingActions?.data]);
 
   useEffect(() => {
-    if (!apiCalled) {
+    if (!isPending) {
       setStore((prevState) => {
         return {
           ...prevState,
           apiCalled: true,
         };
       });
-
-      // Using a unique `queryKey` here and below so that data is NOT updated
-      // from cache when future requests for this endpoint ID is done again.
-      fetchEndpointDetails({ queryKey: uuidV4() })
-        .then(({ data }) => {
-          setStore((prevState) => {
-            return {
-              ...prevState,
-              endpointDetails: data,
-            };
-          });
-        })
-        .catch((err) => {
-          setStore((prevState) => {
-            return {
-              ...prevState,
-              detailsFetchError: err,
-            };
-          });
-        });
-
-      fetchEndpointPendingActionsSummary({ queryKey: uuidV4() }).then(({ data }) => {
-        setStore((prevState) => {
-          return {
-            ...prevState,
-            endpointPendingActions: data,
-          };
-        });
-      });
     }
-  }, [apiCalled, fetchEndpointDetails, fetchEndpointPendingActionsSummary, setStore]);
+  }, [apiCalled, isPending, setStore]);
 
+  // update command store if endpoint details fetch api call completed
   useEffect(() => {
     if (isFetched && isPending) {
       setStatus(detailsFetchError ? 'error' : 'success');
+      setStore((prevState) => {
+        return {
+          ...prevState,
+          endpointDetails: fetchedEndpointDetails,
+          detailsFetchError: fetchedDetailsError ?? undefined,
+        };
+      });
     }
-  }, [detailsFetchError, isFetched, setStatus, isPending]);
+  }, [
+    detailsFetchError,
+    isFetched,
+    setStatus,
+    isPending,
+    setStore,
+    fetchedEndpointDetails,
+    fetchedDetailsError,
+  ]);
 
-  if (isFetching) {
-    return null;
+  // Update the store once we get back pending actions for this endpoint
+  useEffect(() => {
+    if (fetchedPendingActionsSummary) {
+      setStore((prevState) => {
+        return {
+          ...prevState,
+          endpointPendingActions: fetchedPendingActionsSummary,
+        };
+      });
     }
+  }, [fetchedPendingActionsSummary, setStore]);
 
   if (detailsFetchError) {
     return (
-      <EuiCallOut>
-        <EuiFieldText>
+      <ResultComponent showAs="failure">
         <FormattedError error={detailsFetchError} />
-        </EuiFieldText>
-      </EuiCallOut>
+      </ResultComponent>
     );
   }
 
-  if (!endpointDetails) {
-    return null;
+  if (isFetching || !endpointDetails) {
+    return <ResultComponent showAs="pending" />;
   }
 
   return (
+    <ResultComponent showTitle={false}>
       <EuiFlexGroup wrap={false} responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiText size="s">
@@ -184,6 +182,7 @@ export const EndpointStatusActionResult = memo<
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
+    </ResultComponent>
   );
 });
 EndpointStatusActionResult.displayName = 'EndpointStatusActionResult';