From b264de74e232c18df84d2c02b7d250f76bb67b56 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Mon, 27 Mar 2023 13:36:05 -0700 Subject: [PATCH] Create OuiLoadingDashboards component (#597) (#620) (cherry picked from commit 4e917379f0e0f03a3c360f6668e0b1735648a773) Signed-off-by: Sergey Myssak Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: Andrey Myssak Co-authored-by: Ashwin P Chandran Co-authored-by: Josh Romero --- .../src/views/loading/loading_dashboards.tsx | 20 ++ src-docs/src/views/loading/loading_example.js | 24 +++ src-docs/src/views/loading/playground.js | 23 ++ src/components/index.js | 1 + .../loading_dashboards.test.tsx.snap | 196 ++++++++++++++++++ src/components/loading/_index.scss | 1 + .../loading/_loading_dashboards.scss | 25 +++ src/components/loading/index.ts | 4 + .../loading/loading_dashboards.test.tsx | 30 +++ src/components/loading/loading_dashboards.tsx | 62 ++++++ 10 files changed, 386 insertions(+) create mode 100644 src-docs/src/views/loading/loading_dashboards.tsx create mode 100644 src/components/loading/__snapshots__/loading_dashboards.test.tsx.snap create mode 100644 src/components/loading/_loading_dashboards.scss create mode 100644 src/components/loading/loading_dashboards.test.tsx create mode 100644 src/components/loading/loading_dashboards.tsx diff --git a/src-docs/src/views/loading/loading_dashboards.tsx b/src-docs/src/views/loading/loading_dashboards.tsx new file mode 100644 index 0000000000..32abe6f874 --- /dev/null +++ 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 () => ( +
+ +   + +   + +   + +
+); diff --git a/src-docs/src/views/loading/loading_example.js b/src-docs/src/views/loading/loading_example.js index 1ef8bf4878..6920414bb0 100644 --- 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 = { ), sections: [ + { + title: 'Dashboards', + source: [ + { + type: GuideSectionTypes.JS, + code: loadingDashboardsSource, + }, + ], + text: ( +

+ The OuiLoadingDashboards loader is great for full + page or Dashboards product loading screens. +

+ ), + props: { OuiLoadingDashboards }, + demo: , + snippet: '', + playground: loadingDashboardsConfig, + }, { title: 'Chart', source: [ diff --git a/src-docs/src/views/loading/playground.js b/src-docs/src/views/loading/playground.js index b1482f57b8..3baaf960cb 100644 --- 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 index 620c926d4b..ff50592530 100644 --- 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 new file mode 100644 index 0000000000..b313e654a7 --- /dev/null +++ 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`] = ` + + + + + + + + + + +`; + +exports[`OuiLoadingDashboards size l is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`OuiLoadingDashboards size m is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`OuiLoadingDashboards size xl is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`OuiLoadingDashboards size xxl is rendered 1`] = ` + + + + + + + + + + +`; diff --git a/src/components/loading/_index.scss b/src/components/loading/_index.scss index ebb3589441..f6eec8323d 100644 --- 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 new file mode 100644 index 0000000000..24e598b86a --- /dev/null +++ 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 index 51b2ed5e65..34b0cdb3e3 100644 --- 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 new file mode 100644 index 0000000000..c8ccc3076e --- /dev/null +++ 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(); + + expect(component).toMatchSnapshot(); + }); + + describe('size', () => { + SIZES.forEach((size) => { + test(`${size} is rendered`, () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); +}); diff --git a/src/components/loading/loading_dashboards.tsx b/src/components/loading/loading_dashboards.tsx new file mode 100644 index 0000000000..a389089791 --- /dev/null +++ b/src/components/loading/loading_dashboards.tsx @@ -0,0 +1,62 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { HTMLAttributes, FunctionComponent } from 'react'; +import classNames from 'classnames'; +import { CommonProps, keysOf } from '../common'; + +const sizeToClassNameMap = { + m: 'ouiLoadingDashboards--medium', + l: 'ouiLoadingDashboards--large', + xl: 'ouiLoadingDashboards--xLarge', + xxl: 'ouiLoadingDashboards--xxLarge', +}; + +export const SIZES = keysOf(sizeToClassNameMap); + +export interface OuiLoadingDashboardsProps { + size?: keyof typeof sizeToClassNameMap; +} + +export const OuiLoadingDashboards: FunctionComponent< + CommonProps & HTMLAttributes & OuiLoadingDashboardsProps +> = ({ size = 'm', className, ...rest }) => { + const classes = classNames( + 'ouiLoadingDashboards', + sizeToClassNameMap[size], + className + ); + + return ( + + + + + + + + + + + ); +};