From fd34619be26eaa3cca42ed4d18fb0642404a85dd Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 11 Nov 2020 20:32:56 -0800 Subject: [PATCH 1/5] Add basic Loading component - for pages with shifting layouts or where skeletal loading doesn't make sense --- .../components/engine/engine_router.test.tsx | 6 ++++-- .../components/engine/engine_router.tsx | 6 +++++- .../app_search/components/loading/index.ts | 7 +++++++ .../components/loading/loading.scss | 12 ++++++++++++ .../components/loading/loading.test.tsx | 19 +++++++++++++++++++ .../app_search/components/loading/loading.tsx | 16 ++++++++++++++++ 6 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/index.ts create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.scss create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.test.tsx create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.tsx diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx index e38381cad32ba..a5812beae0ced 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx @@ -17,6 +17,8 @@ jest.mock('../../../shared/flash_messages', () => ({ })); import { setQueuedErrorMessage } from '../../../shared/flash_messages'; +import { Loading } from '../loading'; + import { EngineRouter } from './'; describe('EngineRouter', () => { @@ -59,10 +61,10 @@ describe('EngineRouter', () => { ); }); - it('does not render if async data is still loading', () => { + it('renders a loading component if async data is still loading', () => { setMockValues({ ...values, dataLoading: true }); const wrapper = shallow(); - expect(wrapper.isEmptyRender()).toBe(true); + expect(wrapper.find(Loading)).toHaveLength(1); }); it('renders a default engine overview', () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx index 3e6856771f7d9..606e9a0cadd21 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx @@ -45,6 +45,8 @@ import { // API_LOGS_TITLE, } from './constants'; +import { Loading } from '../loading'; + import { EngineLogic } from './'; export const EngineRouter: React.FC = () => { @@ -86,7 +88,9 @@ export const EngineRouter: React.FC = () => { return ; } - if (dataLoading) return null; + if (dataLoading) { + return ; + } return ( diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/index.ts new file mode 100644 index 0000000000000..745639955dcba --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { Loading } from './loading'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.scss new file mode 100644 index 0000000000000..84591962d4789 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.scss @@ -0,0 +1,12 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +.enterpriseSearchLoading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%); +} diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.test.tsx new file mode 100644 index 0000000000000..bfd30238c4357 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.test.tsx @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { EuiLoadingSpinner } from '@elastic/eui'; + +import { Loading } from './'; + +describe('Loading', () => { + it('renders', () => { + const wrapper = shallow(); + expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.tsx new file mode 100644 index 0000000000000..fc67e3ceb028a --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.tsx @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { EuiLoadingSpinner } from '@elastic/eui'; + +import './loading.scss'; + +export const Loading: React.FC = () => ( +
+ +
+); From 0a272fed9bca0bcf55a30e28b496085d154be6a1 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 12 Nov 2020 10:57:28 -0800 Subject: [PATCH 2/5] Move Loading to shared components --- .../app_search/components/engine/engine_router.test.tsx | 2 +- .../applications/app_search/components/engine/engine_router.tsx | 2 +- .../{app_search/components => shared}/loading/index.ts | 0 .../{app_search/components => shared}/loading/loading.scss | 0 .../{app_search/components => shared}/loading/loading.test.tsx | 0 .../{app_search/components => shared}/loading/loading.tsx | 0 6 files changed, 2 insertions(+), 2 deletions(-) rename x-pack/plugins/enterprise_search/public/applications/{app_search/components => shared}/loading/index.ts (100%) rename x-pack/plugins/enterprise_search/public/applications/{app_search/components => shared}/loading/loading.scss (100%) rename x-pack/plugins/enterprise_search/public/applications/{app_search/components => shared}/loading/loading.test.tsx (100%) rename x-pack/plugins/enterprise_search/public/applications/{app_search/components => shared}/loading/loading.tsx (100%) diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx index a5812beae0ced..8f067754c48a0 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx @@ -17,7 +17,7 @@ jest.mock('../../../shared/flash_messages', () => ({ })); import { setQueuedErrorMessage } from '../../../shared/flash_messages'; -import { Loading } from '../loading'; +import { Loading } from '../../../shared/loading'; import { EngineRouter } from './'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx index 606e9a0cadd21..69566e1386d53 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx @@ -45,7 +45,7 @@ import { // API_LOGS_TITLE, } from './constants'; -import { Loading } from '../loading'; +import { Loading } from '../../../shared/loading'; import { EngineLogic } from './'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/loading/index.ts similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/index.ts rename to x-pack/plugins/enterprise_search/public/applications/shared/loading/index.ts diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.scss b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.scss similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.scss rename to x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.scss diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.test.tsx rename to x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.tsx rename to x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx From 40c8ebd0584535c2cfc2cb8f2bb563ec7b78b99f Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 12 Nov 2020 10:57:44 -0800 Subject: [PATCH 3/5] Update WS to use new shared Loading component --- .../components/shared/loading/index.ts | 7 ------- .../components/shared/loading/loading.scss | 14 -------------- .../shared/loading/loading.test.tsx | 19 ------------------- .../components/shared/loading/loading.tsx | 17 ----------------- .../groups/components/group_overview.test.tsx | 2 +- .../groups/components/group_overview.tsx | 2 +- .../group_source_prioritization.test.tsx | 2 +- .../group_source_prioritization.tsx | 2 +- .../views/groups/groups.test.tsx | 2 +- .../workplace_search/views/groups/groups.tsx | 2 +- .../views/overview/overview.test.tsx | 2 +- .../views/overview/overview.tsx | 2 +- 12 files changed, 8 insertions(+), 65 deletions(-) delete mode 100644 x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/index.ts delete mode 100644 x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.scss delete mode 100644 x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.test.tsx delete mode 100644 x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.tsx diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/index.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/index.ts deleted file mode 100644 index 745639955dcba..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -export { Loading } from './loading'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.scss b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.scss deleted file mode 100644 index 008a8066f807b..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.scss +++ /dev/null @@ -1,14 +0,0 @@ -.loadingSpinnerWrapper { - width: 100%; - height: 90vh; - margin: auto; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.loadingSpinner { - width: $euiSizeXXL * 1.25; - height: $euiSizeXXL * 1.25; -} diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.test.tsx deleted file mode 100644 index 8b4a999824e35..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import { shallow } from 'enzyme'; -import { EuiLoadingSpinner } from '@elastic/eui'; - -import { Loading } from './'; - -describe('Loading', () => { - it('renders', () => { - const wrapper = shallow(); - - expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1); - }); -}); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.tsx deleted file mode 100644 index 399abedf55e87..0000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/loading/loading.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; - -import { EuiLoadingSpinner } from '@elastic/eui'; - -import './loading.scss'; - -export const Loading: React.FC = () => ( -
- -
-); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.test.tsx index acb2fcfbaaa32..74dee238ee826 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.test.tsx @@ -21,7 +21,7 @@ import { import { ContentSection } from '../../../components/shared/content_section'; import { ViewContentHeader } from '../../../components/shared/view_content_header'; import { SourcesTable } from '../../../components/shared/sources_table'; -import { Loading } from '../../../components/shared/loading'; +import { Loading } from '../../../../shared/loading'; import { EuiFieldText } from '@elastic/eui'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx index fd97f1c0a03ca..6f55c03746aa8 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx @@ -26,7 +26,7 @@ import { AppLogic } from '../../../app_logic'; import { TruncatedContent } from '../../../../shared/truncate'; import { ContentSection } from '../../../components/shared/content_section'; import { ViewContentHeader } from '../../../components/shared/view_content_header'; -import { Loading } from '../../../components/shared/loading'; +import { Loading } from '../../../../shared/loading'; import { SourcesTable } from '../../../components/shared/sources_table'; import { GroupUsersTable } from './group_users_table'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx index 81639327f4ba0..367f1862b2bb9 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx @@ -12,7 +12,7 @@ import { groups } from '../../../__mocks__/groups.mock'; import React from 'react'; import { shallow } from 'enzyme'; -import { Loading } from '../../../components/shared/loading'; +import { Loading } from '../../../../shared/loading'; import { GroupSourcePrioritization } from './group_source_prioritization'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx index 8c054ed9abc87..662c0dbc3bb1a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx @@ -26,7 +26,7 @@ import { EuiTableRowCell, } from '@elastic/eui'; -import { Loading } from '../../../components/shared/loading'; +import { Loading } from '../../../../shared/loading'; import { ViewContentHeader } from '../../../components/shared/view_content_header'; import { SourceIcon } from '../../../components/shared/source_icon'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.test.tsx index 98f40acb96469..cc50c4d0af5c4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.test.tsx @@ -16,7 +16,7 @@ import { shallow } from 'enzyme'; import { Groups } from './groups'; import { ViewContentHeader } from '../../components/shared/view_content_header'; -import { Loading } from '../../components/shared/loading'; +import { Loading } from '../../../shared/loading'; import { FlashMessages } from '../../../shared/flash_messages'; import { AddGroupModal } from './components/add_group_modal'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx index ae87ef735bb9f..4064391c09893 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx @@ -14,7 +14,7 @@ import { EuiButton as EuiLinkButton } from '../../../shared/react_router_helpers import { AppLogic } from '../../app_logic'; -import { Loading } from '../../components/shared/loading'; +import { Loading } from '../../../shared/loading'; import { ViewContentHeader } from '../../components/shared/view_content_header'; import { getGroupPath, USERS_PATH } from '../../routes'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx index c7bab66490f44..256f350d57233 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx @@ -11,7 +11,7 @@ import { mockActions, setMockValues } from './__mocks__'; import React from 'react'; import { shallow, mount } from 'enzyme'; -import { Loading } from '../../components/shared/loading'; +import { Loading } from '../../../shared/loading'; import { ViewContentHeader } from '../../components/shared/view_content_header'; import { OnboardingSteps } from './onboarding_steps'; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx index a712fbdd0dea6..60055c457c03d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx @@ -17,7 +17,7 @@ import { SendWorkplaceSearchTelemetry as SendTelemetry } from '../../../shared/t import { AppLogic } from '../../app_logic'; import { OverviewLogic } from './overview_logic'; -import { Loading } from '../../components/shared/loading'; +import { Loading } from '../../../shared/loading'; import { ProductButton } from '../../components/shared/product_button'; import { ViewContentHeader } from '../../components/shared/view_content_header'; From a25d7ddd28b68ed5d005909173dc81c4a71cdd3b Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 12 Nov 2020 11:17:22 -0800 Subject: [PATCH 4/5] Fix for non-Layout WS Overview page --- .../workplace_search/views/overview/overview.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx index 60055c457c03d..aafff53a7ddbc 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx @@ -56,7 +56,14 @@ export const Overview: React.FC = () => { initializeOverview(); }, [initializeOverview]); - if (dataLoading) return ; + // TODO: Remove div wrapper once the Overview page is using the full Layout + if (dataLoading) { + return ( +
+ +
+ ); + } const hideOnboarding = hasUsers && hasOrgSources && isOldAccount && orgName !== defaultOrgName; From dc6e900dd17bcdbffadfdf6387ff938bee5b717f Mon Sep 17 00:00:00 2001 From: Constance Date: Thu, 12 Nov 2020 15:19:15 -0800 Subject: [PATCH 5/5] Update x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx Co-authored-by: Scotty Bollinger --- .../app_search/components/engine/engine_router.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx index 69566e1386d53..9833305c438c1 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx @@ -88,9 +88,7 @@ export const EngineRouter: React.FC = () => { return ; } - if (dataLoading) { - return ; - } + if (dataLoading) return ; return (