From 5098f3125773bd84891f727312aad431e017419e Mon Sep 17 00:00:00 2001
From: Garrett Spong <spong@users.noreply.github.com>
Date: Tue, 21 Jul 2020 19:21:40 -0600
Subject: [PATCH] [Security Solution] Fixes exception modal not loading content
 (#72770)

## Summary

When using the `useFetchIndexPatterns` hook multiple times within a component (e.g. add_exception_modal & edit_exception_modal), the `apolloClient` will perform `queryDeduplication` and prevent the first query from executing. A deep compare is not performed on `indices`, so another field must be passed to circumvent this.


For all the lovely details, see https://github.com/apollographql/react-apollo/issues/2202

Note: As of yesterday, [support has been added](https://github.com/apollographql/apollo-client/pull/6526) for configuring `queryDeduplicating` via `context`. This is available in `apollo-client` `2.6`, so when upgrading (currently on `2.3.8`) we can swap out this workaround to leverage this functionality.

Note II: This [link](https://www.apollographql.com/docs/link/links/dedup/#context) may also be an option after upgrading to a supported version.
---
 .../exceptions/add_exception_modal/index.tsx           |  7 +++++--
 .../exceptions/edit_exception_modal/index.tsx          |  7 +++++--
 .../detection_engine/rules/fetch_index_patterns.tsx    | 10 +++++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx
index e630645ef8c4e..6e77cd7082d56 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.tsx
@@ -114,9 +114,12 @@ export const AddExceptionModal = memo(function AddExceptionModal({
   const { loading: isSignalIndexLoading, signalIndexName } = useSignalIndex();
   const [
     { isLoading: isSignalIndexPatternLoading, indexPatterns: signalIndexPatterns },
-  ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : []);
+  ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : [], 'signals');
 
-  const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(ruleIndices);
+  const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(
+    ruleIndices,
+    'rules'
+  );
 
   const onError = useCallback(
     (error: Error) => {
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx
index d07a8b5f0d2f6..2d12cfbec160a 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.tsx
@@ -97,9 +97,12 @@ export const EditExceptionModal = memo(function EditExceptionModal({
   const { loading: isSignalIndexLoading, signalIndexName } = useSignalIndex();
   const [
     { isLoading: isSignalIndexPatternLoading, indexPatterns: signalIndexPatterns },
-  ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : []);
+  ] = useFetchIndexPatterns(signalIndexName !== null ? [signalIndexName] : [], 'signals');
 
-  const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(ruleIndices);
+  const [{ isLoading: isIndexPatternLoading, indexPatterns }] = useFetchIndexPatterns(
+    ruleIndices,
+    'rules'
+  );
 
   const onError = useCallback(
     (error) => {
diff --git a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx
index 6257a9980e00c..c0997a5e62908 100644
--- a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx
+++ b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx
@@ -38,7 +38,14 @@ const DEFAULT_BROWSER_FIELDS = {};
 const DEFAULT_INDEX_PATTERNS = { fields: [], title: '' };
 const DEFAULT_DOC_VALUE_FIELDS: DocValueFields[] = [];
 
-export const useFetchIndexPatterns = (defaultIndices: string[] = []): Return => {
+// Fun fact: When using this hook multiple times within a component (e.g. add_exception_modal & edit_exception_modal),
+// the apolloClient will perform queryDeduplication and prevent the first query from executing. A deep compare is not
+// performed on `indices`, so another field must be passed to circumvent this.
+// For details, see https://github.com/apollographql/react-apollo/issues/2202
+export const useFetchIndexPatterns = (
+  defaultIndices: string[] = [],
+  queryDeduplication?: string
+): Return => {
   const apolloClient = useApolloClient();
   const [indices, setIndices] = useState<string[]>(defaultIndices);
 
@@ -74,6 +81,7 @@ export const useFetchIndexPatterns = (defaultIndices: string[] = []): Return =>
             variables: {
               sourceId: 'default',
               defaultIndex: indices,
+              ...(queryDeduplication != null ? { queryDeduplication } : {}),
             },
             context: {
               fetchOptions: {