From 0e38a1bbd85c34a1cc99efdad1b29823a6e4ab6c Mon Sep 17 00:00:00 2001
From: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Date: Thu, 4 May 2023 22:09:05 +0200
Subject: [PATCH] [FEATURE] Finding flyout loading state (#562)

* [FEATURE] Set loading state for finding fly-out until the data is ready #559

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* fix tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* fix tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

---------

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 cypress/support/typings.js                    | 22 ++++++++
 .../components/FindingDetailsFlyout.tsx       | 51 ++++++++++++++-----
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/cypress/support/typings.js b/cypress/support/typings.js
index 347c47c78..594be5a6a 100644
--- a/cypress/support/typings.js
+++ b/cypress/support/typings.js
@@ -37,3 +37,25 @@ Cypress.Commands.add(
     return cy.get(subject).wait(10).focus().realType(text);
   }
 );
+
+Cypress.Commands.add(
+  'pressEnterKey',
+  {
+    prevSubject: true,
+  },
+  (subject) => {
+    Cypress.log({
+      message: 'Enter key pressed',
+    });
+    Cypress.automation('remote:debugger:protocol', {
+      command: 'Input.dispatchKeyEvent',
+      params: {
+        type: 'char',
+        unmodifiedText: '\r',
+        text: '\r',
+      },
+    });
+
+    return subject;
+  }
+);
diff --git a/public/pages/Findings/components/FindingDetailsFlyout.tsx b/public/pages/Findings/components/FindingDetailsFlyout.tsx
index 1b4fd6035..e636c63a0 100644
--- a/public/pages/Findings/components/FindingDetailsFlyout.tsx
+++ b/public/pages/Findings/components/FindingDetailsFlyout.tsx
@@ -67,6 +67,8 @@ interface FindingDetailsFlyoutState {
   isCreateIndexPatternModalVisible: boolean;
   selectedTab: { id: string; content: React.ReactNode | null };
   correlatedFindings: CorrelationFinding[];
+  isDocumentLoading: boolean;
+  areCorrelationsLoading: boolean;
 }
 
 export default class FindingDetailsFlyout extends Component<
@@ -81,6 +83,8 @@ export default class FindingDetailsFlyout extends Component<
       isCreateIndexPatternModalVisible: false,
       selectedTab: { id: FindingFlyoutTabId.DETAILS, content: null },
       correlatedFindings: [],
+      isDocumentLoading: true,
+      areCorrelationsLoading: true,
     };
   }
 
@@ -106,15 +110,22 @@ export default class FindingDetailsFlyout extends Component<
           });
           this.setState({ correlatedFindings });
         }
+      })
+      .finally(() => {
+        this.setState({ areCorrelationsLoading: false });
       });
   };
 
   componentDidMount(): void {
-    this.getIndexPatternId().then((patternId) => {
-      if (patternId) {
-        this.setState({ indexPatternId: patternId });
-      }
-    });
+    this.getIndexPatternId()
+      .then((patternId) => {
+        if (patternId) {
+          this.setState({ indexPatternId: patternId });
+        }
+      })
+      .finally(() => {
+        this.setState({ isDocumentLoading: false });
+      });
 
     this.getCorrelations();
 
@@ -256,7 +267,7 @@ export default class FindingDetailsFlyout extends Component<
     return patternId;
   };
 
-  renderFindingDocuments() {
+  renderFindingDocuments(isDocumentLoading: boolean) {
     const {
       finding: { index, document_list, related_doc_ids },
     } = this.props;
@@ -276,6 +287,7 @@ export default class FindingDetailsFlyout extends Component<
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
+              isLoading={isDocumentLoading}
               data-test-subj={'finding-details-flyout-view-surrounding-documents'}
               onClick={() => {
                 if (indexPatternId) {
@@ -371,13 +383,17 @@ export default class FindingDetailsFlyout extends Component<
     }
   }
 
-  private getTabContent(tabId: FindingFlyoutTabId) {
+  private getTabContent(
+    tabId: FindingFlyoutTabId,
+    isDocumentLoading = false,
+    areCorrelationsLoading = false
+  ) {
     switch (tabId) {
       case FindingFlyoutTabId.CORRELATIONS:
-        return this.createCorrelationsTable();
+        return this.createCorrelationsTable(areCorrelationsLoading);
       case FindingFlyoutTabId.DETAILS:
       default:
-        return this.createFindingDetails();
+        return this.createFindingDetails(isDocumentLoading);
     }
   }
 
@@ -394,7 +410,7 @@ export default class FindingDetailsFlyout extends Component<
     });
   };
 
-  private createCorrelationsTable() {
+  private createCorrelationsTable(areCorrelationsLoading: boolean) {
     const columns: EuiBasicTableColumn<CorrelationFinding>[] = [
       {
         field: 'timestamp',
@@ -451,6 +467,7 @@ export default class FindingDetailsFlyout extends Component<
               pagination={true}
               search={true}
               sorting={true}
+              loading={areCorrelationsLoading}
             />
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -458,7 +475,7 @@ export default class FindingDetailsFlyout extends Component<
     );
   }
 
-  private createFindingDetails() {
+  private createFindingDetails(isDocumentLoading: boolean) {
     const {
       finding: { queries },
     } = this.props;
@@ -471,7 +488,7 @@ export default class FindingDetailsFlyout extends Component<
         <EuiSpacer size={'m'} />
         {this.renderRuleDetails(queries)}
         <EuiSpacer size="l" />
-        {this.renderFindingDocuments()}
+        {this.renderFindingDocuments(isDocumentLoading)}
       </>
     );
   }
@@ -488,6 +505,7 @@ export default class FindingDetailsFlyout extends Component<
         timestamp,
       },
     } = this.props;
+    const { isDocumentLoading, areCorrelationsLoading } = this.state;
     return (
       <EuiFlyout
         onClose={closeFlyout}
@@ -568,7 +586,14 @@ export default class FindingDetailsFlyout extends Component<
                   isSelected={tab.id === this.state.selectedTab.id}
                   onClick={() => {
                     this.setState({
-                      selectedTab: { id: tab.id, content: this.getTabContent(tab.id) },
+                      selectedTab: {
+                        id: tab.id,
+                        content: this.getTabContent(
+                          tab.id,
+                          isDocumentLoading,
+                          areCorrelationsLoading
+                        ),
+                      },
                     });
                   }}
                 >