From 24bf256bb0aec71a8ed0af041e65b3255416a1d3 Mon Sep 17 00:00:00 2001
From: Christos Nasikas <christos.nasikas@elastic.co>
Date: Wed, 3 Feb 2021 15:01:26 +0200
Subject: [PATCH] [Security Solution][Case] Show error banner after loading
 connectors (#90134)

---
 .../cases/components/case_view/index.test.tsx | 36 ++++++++++++++++++-
 .../cases/components/case_view/index.tsx      |  2 +-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx
index c64cb2087252..737143c7a3ef 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx
@@ -144,7 +144,7 @@ describe('CaseView ', () => {
     jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
     useGetCaseUserActionsMock.mockImplementation(() => defaultUseGetCaseUserActions);
     usePostPushToServiceMock.mockImplementation(() => ({ isLoading: false, postPushToService }));
-    useConnectorsMock.mockImplementation(() => ({ connectors: connectorsMock, isLoading: false }));
+    useConnectorsMock.mockImplementation(() => ({ connectors: connectorsMock, loading: false }));
     useQueryAlertsMock.mockImplementation(() => ({
       loading: false,
       data: { hits: { hits: alertsHit } },
@@ -705,4 +705,38 @@ describe('CaseView ', () => {
       expect(updateObject.updateValue).toEqual({ syncAlerts: false });
     });
   });
+
+  describe('Callouts', () => {
+    it('it shows the danger callout when a connector has been deleted', async () => {
+      useConnectorsMock.mockImplementation(() => ({ connectors: [], loading: false }));
+      const wrapper = mount(
+        <TestProviders>
+          <Router history={mockHistory}>
+            <CaseComponent {...caseProps} />
+          </Router>
+        </TestProviders>
+      );
+
+      await waitFor(() => {
+        wrapper.update();
+        expect(wrapper.find('.euiCallOut--danger').first().exists()).toBeTruthy();
+      });
+    });
+
+    it('it does NOT shows the danger callout when connectors are loading', async () => {
+      useConnectorsMock.mockImplementation(() => ({ connectors: [], loading: true }));
+      const wrapper = mount(
+        <TestProviders>
+          <Router history={mockHistory}>
+            <CaseComponent {...caseProps} />
+          </Router>
+        </TestProviders>
+      );
+
+      await waitFor(() => {
+        wrapper.update();
+        expect(wrapper.find('.euiCallOut--danger').first().exists()).toBeFalsy();
+      });
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
index 8d5201e68371..58858fd71481 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
@@ -295,7 +295,7 @@ export const CaseComponent = React.memo<CaseProps>(
       connectors,
       updateCase: handleUpdateCase,
       userCanCrud,
-      isValidConnector,
+      isValidConnector: isLoadingConnectors ? true : isValidConnector,
       alerts,
     });