From 7d61dd57b22c1ec910362f373ccd012e97e37549 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 9 Mar 2021 15:16:10 -0800
Subject: [PATCH] DataPanel: add flag to display a LoadingOverlay

- update CSS to contain LoadingOverlay
- add isLoading prop
---
 .../components/data_panel/data_panel.scss          |  3 +++
 .../components/data_panel/data_panel.test.tsx      | 14 ++++++++++++++
 .../components/data_panel/data_panel.tsx           | 13 ++++++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.scss
index f05e029ec8f8..50ff1ce74f85 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.scss
@@ -1,4 +1,7 @@
 .dataPanel {
+  position: relative;
+  overflow: hidden;
+
   // TODO: This CSS can be removed once EUI supports tables in `subdued` panels
   &--filled {
     .euiTable {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx
index e8f480bce9ee..c111383816e3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx
@@ -11,6 +11,8 @@ import { shallow } from 'enzyme';
 
 import { EuiIcon, EuiButton } from '@elastic/eui';
 
+import { LoadingOverlay } from '../../../shared/loading';
+
 import { DataPanel } from './data_panel';
 
 describe('DataPanel', () => {
@@ -80,6 +82,18 @@ describe('DataPanel', () => {
       expect(wrapper.prop('className')).toEqual('dataPanel dataPanel--filled');
     });
 
+    it('renders a loading overlay based on isLoading flag', () => {
+      const wrapper = shallow(<DataPanel title={<h1>Test</h1>} />);
+
+      expect(wrapper.prop('aria-busy')).toBeFalsy();
+      expect(wrapper.find(LoadingOverlay)).toHaveLength(0);
+
+      wrapper.setProps({ isLoading: true });
+
+      expect(wrapper.prop('aria-busy')).toBeTruthy();
+      expect(wrapper.find(LoadingOverlay)).toHaveLength(1);
+    });
+
     it('passes class names', () => {
       const wrapper = shallow(<DataPanel title={<h1>Test</h1>} className="testing" />);
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
index 6e8f0be7267e..825311fa1652 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
@@ -19,6 +19,8 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { LoadingOverlay } from '../../../shared/loading';
+
 import './data_panel.scss';
 
 interface Props {
@@ -27,6 +29,7 @@ interface Props {
   iconType?: string;
   action?: React.ReactNode;
   filled?: boolean;
+  isLoading?: boolean;
   className?: string;
 }
 
@@ -36,6 +39,7 @@ export const DataPanel: React.FC<Props> = ({
   iconType,
   action,
   filled,
+  isLoading,
   className,
   children,
   ...props // e.g., data-test-subj
@@ -45,7 +49,13 @@ export const DataPanel: React.FC<Props> = ({
   });
 
   return (
-    <EuiPanel {...props} color={filled ? 'subdued' : 'plain'} className={classes} hasShadow={false}>
+    <EuiPanel
+      {...props}
+      color={filled ? 'subdued' : 'plain'}
+      className={classes}
+      hasShadow={false}
+      aria-busy={isLoading}
+    >
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
@@ -68,6 +78,7 @@ export const DataPanel: React.FC<Props> = ({
       </EuiFlexGroup>
       <EuiSpacer />
       {children}
+      {isLoading && <LoadingOverlay />}
     </EuiPanel>
   );
 };