[Security Solution][Case] Improve hooks (elastic#89580)

# Conflicts: # x-pack/plugins/security_solution/public/cases/containers/use_bulk_update_case.tsx
cnasikas · Feb 25, 2021 · 5add3ce · 5add3ce
1 parent 20beb97
commit 5add3ce
Show file tree

Hide file tree

Showing 24 changed files with 696 additions and 608 deletions.
diff --git a/...ecurity_solution/public/cases/components/connectors/jira/use_get_fields_by_issue_type.tsx b/...ecurity_solution/public/cases/components/connectors/jira/use_get_fields_by_issue_type.tsx
@@ -35,27 +35,28 @@ export const useGetFieldsByIssueType = ({
 }: Props): UseGetFieldsByIssueType => {
   const [isLoading, setIsLoading] = useState(true);
   const [fields, setFields] = useState<Fields>({});
+  const didCancel = useRef(false);
   const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
-    let didCancel = false;
     const fetchData = async () => {
       if (!connector || !issueType) {
         setIsLoading(false);
         return;
       }
 
-      abortCtrl.current = new AbortController();
-      setIsLoading(true);
       try {
+        abortCtrl.current = new AbortController();
+        setIsLoading(true);
+
         const res = await getFieldsByIssueType({
           http,
           signal: abortCtrl.current.signal,
           connectorId: connector.id,
           id: issueType,
         });
 
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
           setFields(res.data ?? {});
           if (res.status && res.status === 'error') {
@@ -66,22 +67,24 @@ export const useGetFieldsByIssueType = ({
           }
         }
       } catch (error) {
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
-          toastNotifications.addDanger({
-            title: i18n.FIELDS_API_ERROR,
-            text: error.message,
-          });
+          if (error.name !== 'AbortError') {
+            toastNotifications.addDanger({
+              title: i18n.FIELDS_API_ERROR,
+              text: error.message,
+            });
+          }
         }
       }
     };
 
+    didCancel.current = false;
     abortCtrl.current.abort();
     fetchData();
 
     return () => {
-      didCancel = true;
-      setIsLoading(false);
+      didCancel.current = true;
       abortCtrl.current.abort();
     };
   }, [http, connector, issueType, toastNotifications]);

diff --git a/...plugins/security_solution/public/cases/components/connectors/jira/use_get_issue_types.tsx b/...plugins/security_solution/public/cases/components/connectors/jira/use_get_issue_types.tsx
@@ -35,27 +35,27 @@ export const useGetIssueTypes = ({
 }: Props): UseGetIssueTypes => {
   const [isLoading, setIsLoading] = useState(true);
   const [issueTypes, setIssueTypes] = useState<IssueTypes>([]);
+  const didCancel = useRef(false);
   const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
-    let didCancel = false;
     const fetchData = async () => {
       if (!connector) {
         setIsLoading(false);
         return;
       }
 
-      abortCtrl.current = new AbortController();
-      setIsLoading(true);
-
       try {
+        abortCtrl.current = new AbortController();
+        setIsLoading(true);
+
         const res = await getIssueTypes({
           http,
           signal: abortCtrl.current.signal,
           connectorId: connector.id,
         });
 
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
           const asOptions = (res.data ?? []).map((type) => ({
             text: type.name ?? '',
@@ -71,25 +71,29 @@ export const useGetIssueTypes = ({
           }
         }
       } catch (error) {
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
-          toastNotifications.addDanger({
-            title: i18n.ISSUE_TYPES_API_ERROR,
-            text: error.message,
-          });
+          if (error.name !== 'AbortError') {
+            toastNotifications.addDanger({
+              title: i18n.ISSUE_TYPES_API_ERROR,
+              text: error.message,
+            });
+          }
         }
       }
     };
 
+    didCancel.current = false;
     abortCtrl.current.abort();
     fetchData();
 
     return () => {
-      didCancel = true;
-      setIsLoading(false);
+      didCancel.current = true;
       abortCtrl.current.abort();
     };
-  }, [http, connector, toastNotifications, handleIssueType]);
+    // handleIssueType unmounts the component at init causing the request to be aborted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [http, connector, toastNotifications]);
 
   return {
     issueTypes,

diff --git a/x-pack/plugins/security_solution/public/cases/components/connectors/jira/use_get_issues.tsx b/x-pack/plugins/security_solution/public/cases/components/connectors/jira/use_get_issues.tsx
@@ -36,28 +36,28 @@ export const useGetIssues = ({
 }: Props): UseGetIssues => {
   const [isLoading, setIsLoading] = useState(false);
   const [issues, setIssues] = useState<Issues>([]);
+  const didCancel = useRef(false);
   const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
-    let didCancel = false;
     const fetchData = debounce(500, async () => {
       if (!actionConnector || isEmpty(query)) {
         setIsLoading(false);
         return;
       }
 
-      abortCtrl.current = new AbortController();
-      setIsLoading(true);
-
       try {
+        abortCtrl.current = new AbortController();
+        setIsLoading(true);
+
         const res = await getIssues({
           http,
           signal: abortCtrl.current.signal,
           connectorId: actionConnector.id,
           title: query ?? '',
         });
 
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
           setIssues(res.data ?? []);
           if (res.status && res.status === 'error') {
@@ -68,22 +68,24 @@ export const useGetIssues = ({
           }
         }
       } catch (error) {
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
-          toastNotifications.addDanger({
-            title: i18n.ISSUES_API_ERROR,
-            text: error.message,
-          });
+          if (error.name !== 'AbortError') {
+            toastNotifications.addDanger({
+              title: i18n.ISSUES_API_ERROR,
+              text: error.message,
+            });
+          }
         }
       }
     });
 
+    didCancel.current = false;
     abortCtrl.current.abort();
     fetchData();
 
     return () => {
-      didCancel = true;
-      setIsLoading(false);
+      didCancel.current = true;
       abortCtrl.current.abort();
     };
   }, [http, actionConnector, toastNotifications, query]);

diff --git a/...lugins/security_solution/public/cases/components/connectors/jira/use_get_single_issue.tsx b/...lugins/security_solution/public/cases/components/connectors/jira/use_get_single_issue.tsx
@@ -35,10 +35,10 @@ export const useGetSingleIssue = ({
 }: Props): UseGetSingleIssue => {
   const [isLoading, setIsLoading] = useState(false);
   const [issue, setIssue] = useState<Issue | null>(null);
+  const didCancel = useRef(false);
   const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
-    let didCancel = false;
     const fetchData = async () => {
       if (!actionConnector || !id) {
         setIsLoading(false);
@@ -55,7 +55,7 @@ export const useGetSingleIssue = ({
           id,
         });
 
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
           setIssue(res.data ?? null);
           if (res.status && res.status === 'error') {
@@ -66,22 +66,24 @@ export const useGetSingleIssue = ({
           }
         }
       } catch (error) {
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
-          toastNotifications.addDanger({
-            title: i18n.GET_ISSUE_API_ERROR(id),
-            text: error.message,
-          });
+          if (error.name !== 'AbortError') {
+            toastNotifications.addDanger({
+              title: i18n.GET_ISSUE_API_ERROR(id),
+              text: error.message,
+            });
+          }
         }
       }
     };
 
+    didCancel.current = false;
     abortCtrl.current.abort();
     fetchData();
 
     return () => {
-      didCancel = true;
-      setIsLoading(false);
+      didCancel.current = true;
       abortCtrl.current.abort();
     };
   }, [http, actionConnector, id, toastNotifications]);

diff --git a/...security_solution/public/cases/components/connectors/resilient/use_get_incident_types.tsx b/...security_solution/public/cases/components/connectors/resilient/use_get_incident_types.tsx
@@ -34,27 +34,27 @@ export const useGetIncidentTypes = ({
 }: Props): UseGetIncidentTypes => {
   const [isLoading, setIsLoading] = useState(true);
   const [incidentTypes, setIncidentTypes] = useState<IncidentTypes>([]);
+  const didCancel = useRef(false);
   const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
-    let didCancel = false;
     const fetchData = async () => {
       if (!connector) {
         setIsLoading(false);
         return;
       }
 
-      abortCtrl.current = new AbortController();
-      setIsLoading(true);
-
       try {
+        abortCtrl.current = new AbortController();
+        setIsLoading(true);
+
         const res = await getIncidentTypes({
           http,
           signal: abortCtrl.current.signal,
           connectorId: connector.id,
         });
 
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
           setIncidentTypes(res.data ?? []);
           if (res.status && res.status === 'error') {
@@ -65,22 +65,24 @@ export const useGetIncidentTypes = ({
           }
         }
       } catch (error) {
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
-          toastNotifications.addDanger({
-            title: i18n.INCIDENT_TYPES_API_ERROR,
-            text: error.message,
-          });
+          if (error.name !== 'AbortError') {
+            toastNotifications.addDanger({
+              title: i18n.INCIDENT_TYPES_API_ERROR,
+              text: error.message,
+            });
+          }
         }
       }
     };
 
+    didCancel.current = false;
     abortCtrl.current.abort();
     fetchData();
 
     return () => {
-      didCancel = true;
-      setIsLoading(false);
+      didCancel.current = true;
       abortCtrl.current.abort();
     };
   }, [http, connector, toastNotifications]);

diff --git a/...ugins/security_solution/public/cases/components/connectors/resilient/use_get_severity.tsx b/...ugins/security_solution/public/cases/components/connectors/resilient/use_get_severity.tsx
@@ -7,9 +7,9 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { HttpSetup, ToastsApi } from 'kibana/public';
+import { ActionConnector } from '../../../containers/types';
 import { getSeverity } from './api';
 import * as i18n from './translations';
-import { ActionConnector } from '../../../containers/types';
 
 type Severity = Array<{ id: number; name: string }>;
 
@@ -31,26 +31,26 @@ export const useGetSeverity = ({ http, toastNotifications, connector }: Props):
   const [isLoading, setIsLoading] = useState(true);
   const [severity, setSeverity] = useState<Severity>([]);
   const abortCtrl = useRef(new AbortController());
+  const didCancel = useRef(false);
 
   useEffect(() => {
-    let didCancel = false;
     const fetchData = async () => {
       if (!connector) {
         setIsLoading(false);
         return;
       }
 
-      abortCtrl.current = new AbortController();
-      setIsLoading(true);
-
       try {
+        abortCtrl.current = new AbortController();
+        setIsLoading(true);
+
         const res = await getSeverity({
           http,
           signal: abortCtrl.current.signal,
           connectorId: connector.id,
         });
 
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
           setSeverity(res.data ?? []);
 
@@ -62,22 +62,24 @@ export const useGetSeverity = ({ http, toastNotifications, connector }: Props):
           }
         }
       } catch (error) {
-        if (!didCancel) {
+        if (!didCancel.current) {
           setIsLoading(false);
-          toastNotifications.addDanger({
-            title: i18n.SEVERITY_API_ERROR,
-            text: error.message,
-          });
+          if (error.name !== 'AbortError') {
+            toastNotifications.addDanger({
+              title: i18n.SEVERITY_API_ERROR,
+              text: error.message,
+            });
+          }
         }
       }
     };
 
+    didCancel.current = false;
     abortCtrl.current.abort();
     fetchData();
 
     return () => {
-      didCancel = true;
-      setIsLoading(false);
+      didCancel.current = true;
       abortCtrl.current.abort();
     };
   }, [http, connector, toastNotifications]);