Create OuiLoadingDashboards component (#597)

Signed-off-by: Sergey Myssak <[email protected]> Co-authored-by: Andrey Myssak <[email protected]> Co-authored-by: Ashwin P Chandran <[email protected]>
opensearch-project · Mar 22, 2023 · 4e91737 · 4e91737
1 parent af9324a
commit 4e91737
Show file tree

Hide file tree

Showing 10 changed files with 386 additions and 0 deletions.
diff --git a/src-docs/src/views/loading/loading_dashboards.tsx b/src-docs/src/views/loading/loading_dashboards.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+import { OuiLoadingDashboards } from '../../../../src/components/loading';
+
+export default () => (
+  <div>
+    <OuiLoadingDashboards />
+    &emsp;
+    <OuiLoadingDashboards size="l" />
+    &emsp;
+    <OuiLoadingDashboards size="xl" />
+    &emsp;
+    <OuiLoadingDashboards size="xxl" />
+  </div>
+);
diff --git a/src-docs/src/views/loading/loading_example.js b/src-docs/src/views/loading/loading_example.js
@@ -17,16 +17,21 @@ import { GuideSectionTypes } from '../../components';
 import {
   OuiCode,
   OuiText,
+  OuiLoadingDashboards,
   OuiLoadingSpinner,
   OuiLoadingChart,
   OuiLoadingContent,
 } from '../../../../src/components';
 import {
+  loadingDashboardsConfig,
   loadingChartConfig,
   loadingSpinnerConfig,
   loadingContentConfig,
 } from './playground';
 
+import LoadingDashboards from './loading_dashboards';
+const loadingDashboardsSource = require('!!raw-loader!./loading_dashboards');
+
 import LoadingChart from './loading_chart';
 const loadingChartSource = require('!!raw-loader!./loading_chart');
 
@@ -50,6 +55,25 @@ export const LoadingExample = {
     </OuiText>
   ),
   sections: [
+    {
+      title: 'Dashboards',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: loadingDashboardsSource,
+        },
+      ],
+      text: (
+        <p>
+          The <strong>OuiLoadingDashboards</strong> loader is great for full
+          page or Dashboards product loading screens.
+        </p>
+      ),
+      props: { OuiLoadingDashboards },
+      demo: <LoadingDashboards />,
+      snippet: '<OuiLoadingDashboards size="m" />',
+      playground: loadingDashboardsConfig,
+    },
     {
       title: 'Chart',
       source: [

diff --git a/src-docs/src/views/loading/playground.js b/src-docs/src/views/loading/playground.js
@@ -14,6 +14,7 @@ import {
   iconValidator,
 } from '../../services/playground';
 import {
+  OuiLoadingDashboards,
   OuiLoadingElastic,
   OuiLoadingChart,
   OuiLoadingLogo,
@@ -22,6 +23,28 @@ import {
 } from '../../../../src/components/';
 import { PropTypes } from 'react-view';
 
+export const loadingDashboardsConfig = () => {
+  const docgenInfo = Array.isArray(OuiLoadingDashboards.__docgenInfo)
+    ? OuiLoadingDashboards.__docgenInfo[0]
+    : OuiLoadingDashboards.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  return {
+    config: {
+      componentName: 'OuiLoadingDashboards',
+      props: propsToUse,
+      scope: {
+        OuiLoadingDashboards,
+      },
+      imports: {
+        '@opensearch-project/oui': {
+          named: ['OuiLoadingDashboards'],
+        },
+      },
+    },
+  };
+};
+
 export const loadingElasticConfig = () => {
   const docgenInfo = Array.isArray(OuiLoadingElastic.__docgenInfo)
     ? OuiLoadingElastic.__docgenInfo[0]

diff --git a/src/components/index.js b/src/components/index.js
@@ -212,6 +212,7 @@ export { useInnerText, OuiInnerText, useRenderToText } from './inner_text';
 export { OuiI18n, OuiI18nNumber, useOuiI18n } from './i18n';
 
 export {
+  OuiLoadingDashboards,
   OuiLoadingKibana,
   OuiLoadingElastic,
   OuiLoadingChart,

diff --git a/src/components/loading/__snapshots__/loading_dashboards.test.tsx.snap b/src/components/loading/__snapshots__/loading_dashboards.test.tsx.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OuiLoadingDashboards is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="ouiLoadingDashboards ouiLoadingDashboards--medium testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <svg
+    fill="none"
+    viewBox="0 0 90 90"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
+        fill="#005EB8"
+      />
+      <animateTransform
+        attributeName="transform"
+        dur="1.5s"
+        from="0 40 40"
+        keyTimes="0; .3; .7; 1"
+        repeatCount="indefinite"
+        to="359.9 40 40"
+        type="rotate"
+        values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
+      />
+    </g>
+    <path
+      d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
+      fill="#003B5C"
+    />
+    <path
+      d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
+      fill="#005EB8"
+    />
+  </svg>
+</span>
+`;
+
+exports[`OuiLoadingDashboards size l is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="ouiLoadingDashboards ouiLoadingDashboards--large testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <svg
+    fill="none"
+    viewBox="0 0 90 90"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
+        fill="#005EB8"
+      />
+      <animateTransform
+        attributeName="transform"
+        dur="1.5s"
+        from="0 40 40"
+        keyTimes="0; .3; .7; 1"
+        repeatCount="indefinite"
+        to="359.9 40 40"
+        type="rotate"
+        values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
+      />
+    </g>
+    <path
+      d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
+      fill="#003B5C"
+    />
+    <path
+      d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
+      fill="#005EB8"
+    />
+  </svg>
+</span>
+`;
+
+exports[`OuiLoadingDashboards size m is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="ouiLoadingDashboards ouiLoadingDashboards--medium testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <svg
+    fill="none"
+    viewBox="0 0 90 90"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
+        fill="#005EB8"
+      />
+      <animateTransform
+        attributeName="transform"
+        dur="1.5s"
+        from="0 40 40"
+        keyTimes="0; .3; .7; 1"
+        repeatCount="indefinite"
+        to="359.9 40 40"
+        type="rotate"
+        values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
+      />
+    </g>
+    <path
+      d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
+      fill="#003B5C"
+    />
+    <path
+      d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
+      fill="#005EB8"
+    />
+  </svg>
+</span>
+`;
+
+exports[`OuiLoadingDashboards size xl is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="ouiLoadingDashboards ouiLoadingDashboards--xLarge testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <svg
+    fill="none"
+    viewBox="0 0 90 90"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
+        fill="#005EB8"
+      />
+      <animateTransform
+        attributeName="transform"
+        dur="1.5s"
+        from="0 40 40"
+        keyTimes="0; .3; .7; 1"
+        repeatCount="indefinite"
+        to="359.9 40 40"
+        type="rotate"
+        values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
+      />
+    </g>
+    <path
+      d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
+      fill="#003B5C"
+    />
+    <path
+      d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
+      fill="#005EB8"
+    />
+  </svg>
+</span>
+`;
+
+exports[`OuiLoadingDashboards size xxl is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="ouiLoadingDashboards ouiLoadingDashboards--xxLarge testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <svg
+    fill="none"
+    viewBox="0 0 90 90"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
+        fill="#005EB8"
+      />
+      <animateTransform
+        attributeName="transform"
+        dur="1.5s"
+        from="0 40 40"
+        keyTimes="0; .3; .7; 1"
+        repeatCount="indefinite"
+        to="359.9 40 40"
+        type="rotate"
+        values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
+      />
+    </g>
+    <path
+      d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
+      fill="#003B5C"
+    />
+    <path
+      d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
+      fill="#005EB8"
+    />
+  </svg>
+</span>
+`;
diff --git a/src/components/loading/_index.scss b/src/components/loading/_index.scss
@@ -10,6 +10,7 @@
  */
 
 @import 'variables';
+@import 'loading_dashboards';
 @import 'loading_kibana';
 @import 'loading_elastic';
 @import 'loading_chart';

diff --git a/src/components/loading/_loading_dashboards.scss b/src/components/loading/_loading_dashboards.scss
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.ouiLoadingDashboards {
+  position: relative;
+  display: inline-block;
+}
+
+.ouiLoadingDashboards--medium {
+  width: $ouiSize;
+}
+
+.ouiLoadingDashboards--large {
+  width: $ouiSizeL;
+}
+
+.ouiLoadingDashboards--xLarge {
+  width: $ouiSizeXL;
+}
+
+.ouiLoadingDashboards--xxLarge {
+  width: $ouiSizeXXL;
+}
diff --git a/src/components/loading/index.ts b/src/components/loading/index.ts
@@ -28,6 +28,10 @@
  * under the License.
  */
 
+export {
+  OuiLoadingDashboards,
+  OuiLoadingDashboardsProps,
+} from './loading_dashboards';
 export { OuiLoadingKibana, OuiLoadingKibanaProps } from './loading_kibana';
 export { OuiLoadingElastic, OuiLoadingElasticProps } from './loading_elastic';
 export { OuiLoadingChart, OuiLoadingChartProps } from './loading_chart';

diff --git a/src/components/loading/loading_dashboards.test.tsx b/src/components/loading/loading_dashboards.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { OuiLoadingDashboards, SIZES } from './loading_dashboards';
+
+describe('OuiLoadingDashboards', () => {
+  test('is rendered', () => {
+    const component = render(<OuiLoadingDashboards {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('size', () => {
+    SIZES.forEach((size) => {
+      test(`${size} is rendered`, () => {
+        const component = render(
+          <OuiLoadingDashboards {...requiredProps} size={size} />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+});