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

cnasikas · Feb 25, 2021 · df7df80 · df7df80
1 parent f22db71
commit df7df80
Show file tree

Hide file tree

Showing 24 changed files with 692 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]);