From 8b8d4941c821b8cfeaad945771c30dbf4a0cbaa9 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 25 Aug 2021 11:02:13 +0200 Subject: [PATCH] Index pattern loading hook --- .../apps/context/context_app_route.tsx | 17 ++++------- .../application/apps/doc/single_doc_route.tsx | 15 ++++------ .../apps/main/discover_main_route.tsx | 14 ++++----- .../loading_indicator.test.tsx.snap | 30 +++++++++++++++++++ .../common/loading_indicator.test.tsx | 17 +++++++++++ .../components/common/loading_indicator.tsx | 19 ++++++++++++ .../helpers/use_index_pattern.test.tsx | 19 ++++++++++++ .../application/helpers/use_index_pattern.tsx | 22 ++++++++++++++ 8 files changed, 122 insertions(+), 31 deletions(-) create mode 100644 src/plugins/discover/public/application/components/common/__snapshots__/loading_indicator.test.tsx.snap create mode 100644 src/plugins/discover/public/application/components/common/loading_indicator.test.tsx create mode 100644 src/plugins/discover/public/application/components/common/loading_indicator.tsx create mode 100644 src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx create mode 100644 src/plugins/discover/public/application/helpers/use_index_pattern.tsx diff --git a/src/plugins/discover/public/application/apps/context/context_app_route.tsx b/src/plugins/discover/public/application/apps/context/context_app_route.tsx index 751a749ff527f..7ced3955c70e7 100644 --- a/src/plugins/discover/public/application/apps/context/context_app_route.tsx +++ b/src/plugins/discover/public/application/apps/context/context_app_route.tsx @@ -5,13 +5,14 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; -import { IndexPattern } from '../../../../../data/common'; import { DiscoverServices } from '../../../build_services'; import { ContextApp } from '../../components/context_app/context_app'; import { getRootBreadcrumbs } from '../../helpers/breadcrumbs'; +import { LoadingIndicator } from '../../components/common/loading_indicator'; +import { useIndexPattern } from '../../helpers/use_index_pattern'; export interface ContextAppProps { /** @@ -30,7 +31,6 @@ export function ContextAppRoute(props: ContextAppProps) { const { chrome } = services; const { indexPatternId, id } = useParams(); - const [indexPattern, setIndexPattern] = useState(undefined); useEffect(() => { chrome.setBreadcrumbs([ @@ -43,17 +43,10 @@ export function ContextAppRoute(props: ContextAppProps) { ]); }, [chrome]); - useEffect(() => { - async function getIndexPattern() { - const ip = await services.indexPatterns.get(indexPatternId); - setIndexPattern(ip); - } - - getIndexPattern(); - }, [indexPatternId, services.indexPatterns]); + const indexPattern = useIndexPattern(services.indexPatterns, indexPatternId); if (!indexPattern) { - return null; + return ; } return ; diff --git a/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx b/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx index 4f3d20d592e46..9088464980c26 100644 --- a/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx +++ b/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx @@ -5,12 +5,13 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { useLocation, useParams } from 'react-router-dom'; -import { IndexPattern } from '../../../../../data/common'; import { DiscoverServices } from '../../../build_services'; import { getRootBreadcrumbs } from '../../helpers/breadcrumbs'; import { Doc } from '../../components/doc/doc'; +import { LoadingIndicator } from '../../components/common/loading_indicator'; +import { useIndexPattern } from '../../helpers/use_index_pattern'; export interface SingleDocRouteProps { /** @@ -33,7 +34,6 @@ export function SingleDocRoute(props: SingleDocRouteProps) { const { chrome, timefilter, indexPatterns } = services; const { indexPatternId, index } = useParams(); - const [indexPattern, setIndexPattern] = useState(undefined); const query = useQuery(); const docId = query.get('id') || ''; @@ -52,15 +52,10 @@ export function SingleDocRoute(props: SingleDocRouteProps) { timefilter.disableTimeRangeSelector(); }); - async function getIndexPattern() { - const ip = await services.indexPatterns.get(indexPatternId); - setIndexPattern(ip); - } - - getIndexPattern(); + const indexPattern = useIndexPattern(services.indexPatterns, indexPatternId); if (!indexPattern) { - return null; + return ; } return ( diff --git a/src/plugins/discover/public/application/apps/main/discover_main_route.tsx b/src/plugins/discover/public/application/apps/main/discover_main_route.tsx index 1ab74d84a2508..d7b49d0231049 100644 --- a/src/plugins/discover/public/application/apps/main/discover_main_route.tsx +++ b/src/plugins/discover/public/application/apps/main/discover_main_route.tsx @@ -10,7 +10,6 @@ import { History } from 'history'; import { useParams } from 'react-router-dom'; import type { SavedObject as SavedObjectDeprecated } from 'src/plugins/saved_objects/public'; import { IndexPatternAttributes, SavedObject } from 'src/plugins/data/common'; -import { EuiFlexGroup, EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui'; import { DiscoverServices } from '../../../build_services'; import { SavedSearch } from '../../../saved_searches'; import { getState } from './services/discover_state'; @@ -19,6 +18,7 @@ import { DiscoverMainApp } from './discover_main_app'; import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../../helpers/breadcrumbs'; import { redirectWhenMissing } from '../../../../../kibana_utils/public'; import { getUrlTracker } from '../../../kibana_services'; +import { LoadingIndicator } from '../../components/common/loading_indicator'; const DiscoverMainAppMemoized = memo(DiscoverMainApp); @@ -125,18 +125,14 @@ export function DiscoverMainRoute({ services, history }: DiscoverMainProps) { useEffect(() => { chrome.setBreadcrumbs( - savedSearch && savedSearch.title ? getSavedSearchBreadcrumbs(savedSearch.title) : getRootBreadcrumbs() + savedSearch && savedSearch.title + ? getSavedSearchBreadcrumbs(savedSearch.title) + : getRootBreadcrumbs() ); }, [chrome, savedSearch]); if (!indexPattern || !savedSearch) { - return ( - - - - - - ); + return ; } return ( diff --git a/src/plugins/discover/public/application/components/common/__snapshots__/loading_indicator.test.tsx.snap b/src/plugins/discover/public/application/components/common/__snapshots__/loading_indicator.test.tsx.snap new file mode 100644 index 0000000000000..21f8a2b2c3632 --- /dev/null +++ b/src/plugins/discover/public/application/components/common/__snapshots__/loading_indicator.test.tsx.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Loading indicator renders correctly 1`] = ` + + +
+ +
+ + + +
+
+
+
+
+`; diff --git a/src/plugins/discover/public/application/components/common/loading_indicator.test.tsx b/src/plugins/discover/public/application/components/common/loading_indicator.test.tsx new file mode 100644 index 0000000000000..1615333471d87 --- /dev/null +++ b/src/plugins/discover/public/application/components/common/loading_indicator.test.tsx @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ +import { LoadingIndicator } from './loading_indicator'; +import React from 'react'; +import { mount } from 'enzyme'; + +describe('Loading indicator', () => { + it('renders correctly', () => { + const component = mount(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/discover/public/application/components/common/loading_indicator.tsx b/src/plugins/discover/public/application/components/common/loading_indicator.tsx new file mode 100644 index 0000000000000..5261e374dfaf3 --- /dev/null +++ b/src/plugins/discover/public/application/components/common/loading_indicator.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 + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ +import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; +import React from 'react'; + +export const LoadingIndicator = () => { + return ( + + + + + + ); +}; diff --git a/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx b/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx new file mode 100644 index 0000000000000..85282afb6fc37 --- /dev/null +++ b/src/plugins/discover/public/application/helpers/use_index_pattern.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 + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ +import { useIndexPattern } from './use_index_pattern'; +import { indexPatternMock } from '../../__mocks__/index_pattern'; +import { indexPatternsMock } from '../../__mocks__/index_patterns'; +import { renderHook, act } from '@testing-library/react-hooks'; + +describe('Use Index Pattern', () => { + test('returning a valid index pattern', async () => { + const { result } = renderHook(() => useIndexPattern(indexPatternsMock, 'the-index-pattern-id')); + await act(() => Promise.resolve()); + expect(result.current).toBe(indexPatternMock); + }); +}); diff --git a/src/plugins/discover/public/application/helpers/use_index_pattern.tsx b/src/plugins/discover/public/application/helpers/use_index_pattern.tsx new file mode 100644 index 0000000000000..f53d131920c5c --- /dev/null +++ b/src/plugins/discover/public/application/helpers/use_index_pattern.tsx @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ +import { useEffect, useState } from 'react'; +import { IndexPattern, IndexPatternsContract } from '../../../../data/common'; + +export const useIndexPattern = (indexPatterns: IndexPatternsContract, indexPatternId: string) => { + const [indexPattern, setIndexPattern] = useState(undefined); + + useEffect(() => { + async function loadIndexPattern() { + const ip = await indexPatterns.get(indexPatternId); + setIndexPattern(ip); + } + loadIndexPattern(); + }); + return indexPattern; +};