From 3a4d5652fed37714d456dcac32dc36be0e49b0d4 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Mon, 16 May 2022 20:19:56 +0200 Subject: [PATCH 1/4] [SharedUX] Add loading indicator to NoDataPage --- .../kibana_no_data_page.stories.tsx | 23 ++++++++++++++++- .../empty_state/kibana_no_data_page.test.tsx | 25 +++++++++++++++++++ .../src/empty_state/kibana_no_data_page.tsx | 10 +++++++- 3 files changed, 56 insertions(+), 2 deletions(-) diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx index 6d0c240dd4c05..10c82b81e4799 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx @@ -39,8 +39,9 @@ type Params = Pick & DataServiceFactoryCon export const PureComponent = (params: Params) => { const { solution, logo, hasESData, hasUserDataView } = params; + const serviceParams = { hasESData, hasUserDataView, hasDataViews: false }; - const services = servicesFactory(serviceParams); + const services = servicesFactory({ ...serviceParams, hasESData, hasUserDataView }); return ( { ); }; +export const PureComponentLoadingState = () => { + const dataCheck = () => new Promise((resolve, reject) => {}); + const services = { + ...servicesFactory({ hasESData: false, hasUserDataView: false, hasDataViews: false }), + data: { + hasESData: dataCheck, + hasUserDataView: dataCheck, + hasDataView: dataCheck, + }, + }; + return ( + + + + ); +}; + PureComponent.argTypes = { solution: { control: 'text', diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx index 82fbd222b3640..227457ebe9926 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; +import { EuiLoadingSpinner } from '@elastic/eui'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { SharedUxServicesProvider, mockServicesFactory } from '@kbn/shared-ux-services'; @@ -68,4 +69,28 @@ describe('Kibana No Data Page', () => { expect(component.find(NoDataViews).length).toBe(1); expect(component.find(NoDataConfigPage).length).toBe(0); }); + + test('renders loading indicator', async () => { + const dataCheck = () => new Promise((resolve, reject) => {}); + const services = { + ...mockServicesFactory(), + data: { + hasESData: dataCheck, + hasUserDataView: dataCheck, + hasDataView: dataCheck, + }, + }; + const component = mountWithIntl( + + + + ); + + await act(() => new Promise(setImmediate)); + component.update(); + + expect(component.find(EuiLoadingSpinner).length).toBe(1); + expect(component.find(NoDataViews).length).toBe(0); + expect(component.find(NoDataConfigPage).length).toBe(0); + }); }); diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx index 2e54d0d9f6a67..c1cbf0d942c65 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx @@ -6,6 +6,7 @@ * Side Public License, v 1. */ import React, { useEffect, useState } from 'react'; +import { EuiLoadingSpinner } from '@elastic/eui'; import { useData } from '@kbn/shared-ux-services'; import { NoDataConfigPage, NoDataPageProps } from '../page_template'; import { NoDataViews } from './no_data_views'; @@ -17,6 +18,7 @@ export interface Props { export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) => { const { hasESData, hasUserDataView } = useData(); + const [hasFinishedLoading, setHasFinishedLoading] = useState(false); const [dataExists, setDataExists] = useState(false); const [hasUserDataViews, setHasUserDataViews] = useState(false); @@ -24,12 +26,18 @@ export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) => const checkData = async () => { setDataExists(await hasESData()); setHasUserDataViews(await hasUserDataView()); + setHasFinishedLoading(true); }; // TODO: add error handling // https://github.com/elastic/kibana/issues/130913 - checkData().catch(() => {}); + checkData().catch(() => { + setHasFinishedLoading(true); + }); }, [hasESData, hasUserDataView]); + if (!hasFinishedLoading) { + return ; + } if (!dataExists) { return ; } From 55528688a3c44d6a6766009687491e54206c0499 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 17 May 2022 10:22:58 +0200 Subject: [PATCH 2/4] Rename hasFinishedLoading > isLoading --- .../src/empty_state/kibana_no_data_page.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx index c1cbf0d942c65..b1f1b494238e0 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx @@ -18,7 +18,7 @@ export interface Props { export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) => { const { hasESData, hasUserDataView } = useData(); - const [hasFinishedLoading, setHasFinishedLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const [dataExists, setDataExists] = useState(false); const [hasUserDataViews, setHasUserDataViews] = useState(false); @@ -26,18 +26,19 @@ export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) => const checkData = async () => { setDataExists(await hasESData()); setHasUserDataViews(await hasUserDataView()); - setHasFinishedLoading(true); + setIsLoading(false); }; // TODO: add error handling // https://github.com/elastic/kibana/issues/130913 checkData().catch(() => { - setHasFinishedLoading(true); + setIsLoading(false); }); }, [hasESData, hasUserDataView]); - if (!hasFinishedLoading) { + if (isLoading) { return ; } + if (!dataExists) { return ; } From 6094265cfab7cb08ba4a60be28ca87e26a8a6f82 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 18 May 2022 09:08:22 +0200 Subject: [PATCH 3/4] Change EuiLoadingSpinner > EuiLoadingElastic --- .../src/empty_state/kibana_no_data_page.test.tsx | 4 ++-- .../src/empty_state/kibana_no_data_page.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx index 227457ebe9926..4f565e55ef52c 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import { EuiLoadingSpinner } from '@elastic/eui'; +import { EuiLoadingElastic } from '@elastic/eui'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { SharedUxServicesProvider, mockServicesFactory } from '@kbn/shared-ux-services'; @@ -89,7 +89,7 @@ describe('Kibana No Data Page', () => { await act(() => new Promise(setImmediate)); component.update(); - expect(component.find(EuiLoadingSpinner).length).toBe(1); + expect(component.find(EuiLoadingElastic).length).toBe(1); expect(component.find(NoDataViews).length).toBe(0); expect(component.find(NoDataConfigPage).length).toBe(0); }); diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx index b1f1b494238e0..00a4ecc85510e 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ import React, { useEffect, useState } from 'react'; -import { EuiLoadingSpinner } from '@elastic/eui'; +import { EuiLoadingElastic } from '@elastic/eui'; import { useData } from '@kbn/shared-ux-services'; import { NoDataConfigPage, NoDataPageProps } from '../page_template'; import { NoDataViews } from './no_data_views'; @@ -36,7 +36,7 @@ export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) => }, [hasESData, hasUserDataView]); if (isLoading) { - return ; + return ; } if (!dataExists) { From f988aab39546599666ad93e110b1dd1ff65388c5 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 18 May 2022 17:24:45 +0200 Subject: [PATCH 4/4] Update packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../src/empty_state/kibana_no_data_page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx index 00a4ecc85510e..89ba915c07cfd 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx @@ -36,7 +36,7 @@ export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) => }, [hasESData, hasUserDataView]); if (isLoading) { - return ; + return ; } if (!dataExists) {