move error into a useEffect (#132491)

elastic · May 20, 2022 · 63e67ab · 63e67ab
1 parent 8c19c36
commit 63e67ab
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/x-pack/plugins/observability/public/pages/rule_details/components/actions.tsx b/x-pack/plugins/observability/public/pages/rule_details/components/actions.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   EuiText,
   EuiSpacer,
@@ -38,6 +38,11 @@ export function Actions({ ruleActions }: ActionsProps) {
     notifications: { toasts },
   } = useKibana().services;
   const { isLoadingActions, allActions, errorActions } = useFetchRuleActions({ http });
+  useEffect(() => {
+    if (errorActions) {
+      toasts.addDanger({ title: errorActions });
+    }
+  }, [errorActions, toasts]);
   if (ruleActions && ruleActions.length <= 0)
     return (
       <EuiFlexItem>
@@ -65,7 +70,6 @@ export function Actions({ ruleActions }: ActionsProps) {
           <EuiSpacer size="s" />
         </>
       ))}
-      {errorActions && toasts.addDanger({ title: errorActions })}
     </EuiFlexGroup>
   );
 }