DataPanel: add flag to display a LoadingOverlay

- update CSS to contain LoadingOverlay - add isLoading prop
elastic · Mar 10, 2021 · 7d61dd5 · 7d61dd5
1 parent 5d9ddfa
commit 7d61dd5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/...ns/enterprise_search/public/applications/app_search/components/data_panel/data_panel.scss b/...ns/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/...nterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx b/...nterprise_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/...ins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx b/...ins/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>
   );
 };