From 034edc05f3adc95302f25fc165c639a873b8656f Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 9 Mar 2021 15:11:40 -0800
Subject: [PATCH 1/3] DataPanel: fix icons showing unaligned & w/ too much flex
 space

---
 .../components/data_panel/data_panel.tsx           | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

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 f6a474689b3af..6e8f0be7267ea 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
@@ -48,21 +48,21 @@ export const DataPanel: React.FC<Props> = ({
     <EuiPanel {...props} color={filled ? 'subdued' : 'plain'} className={classes} hasShadow={false}>
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
         <EuiFlexItem>
-          <EuiFlexGroup>
+          <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
             {iconType && (
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiIcon type={iconType} />
               </EuiFlexItem>
             )}
             <EuiFlexItem>
               <EuiTitle size="xs">{title}</EuiTitle>
-              {subtitle && (
-                <EuiText size="s" color="subdued">
-                  <p>{subtitle}</p>
-                </EuiText>
-              )}
             </EuiFlexItem>
           </EuiFlexGroup>
+          {subtitle && (
+            <EuiText size="s" color="subdued">
+              <p>{subtitle}</p>
+            </EuiText>
+          )}
         </EuiFlexItem>
         {action && <EuiFlexItem grow={false}>{action}</EuiFlexItem>}
       </EuiFlexGroup>

From 5d9ddfa567046c428e48ad30c5cf84f754687813 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 9 Mar 2021 15:15:50 -0800
Subject: [PATCH 2/3] LoadingOverlay: add new loading component w/ overlay

- should have an opacity'd overlay to hide content underneath
- specify z-index
---
 .../public/applications/shared/loading/index.ts       |  2 +-
 .../public/applications/shared/loading/loading.scss   | 11 +++++++++++
 .../applications/shared/loading/loading.test.tsx      | 11 ++++++++++-
 .../public/applications/shared/loading/loading.tsx    |  6 ++++++
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/loading/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/loading/index.ts
index 3840aa26cef5f..7d6867cfc0401 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/loading/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/loading/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { Loading } from './loading';
+export { Loading, LoadingOverlay } from './loading';
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.scss b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.scss
index 45fc89c7a181e..ff712be8ec3b6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.scss
@@ -6,8 +6,19 @@
  */
 
 .enterpriseSearchLoading {
+  z-index: $euiZLevel2;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%);
 }
+
+.enterpriseSearchLoadingOverlay {
+  z-index: $euiZLevel1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba($euiColorEmptyShade, .75);
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx
index eab5694a27968..4ed242c6ed677 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx
@@ -11,11 +11,20 @@ import { shallow } from 'enzyme';
 
 import { EuiLoadingSpinner } from '@elastic/eui';
 
-import { Loading } from './';
+import { Loading, LoadingOverlay } from './';
 
 describe('Loading', () => {
   it('renders', () => {
     const wrapper = shallow(<Loading />);
+    expect(wrapper.hasClass('enterpriseSearchLoading')).toBe(true);
     expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1);
   });
 });
+
+describe('LoadingOverlay', () => {
+  it('renders', () => {
+    const wrapper = shallow(<LoadingOverlay />);
+    expect(wrapper.hasClass('enterpriseSearchLoadingOverlay')).toBe(true);
+    expect(wrapper.find(Loading)).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx
index 27a4dfdec0c07..627d8386dc1c0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx
@@ -16,3 +16,9 @@ export const Loading: React.FC = () => (
     <EuiLoadingSpinner size="xl" />
   </div>
 );
+
+export const LoadingOverlay: React.FC = () => (
+  <div className="enterpriseSearchLoadingOverlay">
+    <Loading />
+  </div>
+);

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 3/3] 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 f05e029ec8f8b..50ff1ce74f850 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 e8f480bce9ee7..c111383816e36 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 6e8f0be7267ea..825311fa1652a 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>
   );
 };