[8.0] Add loader for kibana overview while checking for user data view (#118881) (#119221)

* Add loader for kibana overview while checking for user data view (#118881)

* add loader on overview page

* use KibanaThemeProvider for kibanaOverview

* change add data label to integrations

* adapt tests

* update snapshots, remove i18n keys

* review comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* remove theme provider usage

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/kibana_overview/public/components/overview/overview.test.mocks.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 React from 'react';
+
+export const hasUserDataViewMock = jest.fn();
+
+jest.doMock('../../../../../../src/plugins/kibana_react/public', () => ({
+  useKibana: jest.fn().mockReturnValue({
+    services: {
+      http: { basePath: { prepend: jest.fn((path: string) => (path ? path : 'path')) } },
+      data: {
+        indexPatterns: {
+          hasUserDataView: hasUserDataViewMock,
+        },
+      },
+      share: { url: { locators: { get: () => ({ useUrl: () => '' }) } } },
+      uiSettings: { get: jest.fn() },
+      docLinks: {
+        links: {
+          kibana: 'kibana_docs_url',
+        },
+      },
+    },
+  }),
+  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
+  overviewPageActions: jest.fn().mockReturnValue([]),
+  OverviewPageFooter: jest.fn().mockReturnValue(React.createElement(React.Fragment)),
+  KibanaPageTemplate: jest.fn().mockReturnValue(React.createElement(React.Fragment)),
+  KibanaPageTemplateSolutionNavAvatar: jest
+    .fn()
+    .mockReturnValue(React.createElement(React.Fragment)),
+}));
+
+jest.doMock('../../lib/ui_metric', () => ({
+  trackUiMetric: jest.fn(),
+}));

src/plugins/kibana_overview/public/components/overview/overview.test.tsx

@@ -6,39 +6,16 @@
  * Side Public License, v 1.
  */
 
+import { hasUserDataViewMock } from './overview.test.mocks';
+import { setTimeout as setTimeoutP } from 'timers/promises';
 import moment from 'moment';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { ReactWrapper } from 'enzyme';
 import { Overview } from './overview';
-import { shallowWithIntl } from '@kbn/test/jest';
+import { mountWithIntl } from '@kbn/test/jest';
 import { FeatureCatalogueCategory } from 'src/plugins/home/public';
 
-jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
-  useKibana: jest.fn().mockReturnValue({
-    services: {
-      http: { basePath: { prepend: jest.fn((path: string) => (path ? path : 'path')) } },
-      data: { indexPatterns: {} },
-      share: { url: { locators: { get: () => ({ useUrl: () => '' }) } } },
-      uiSettings: { get: jest.fn() },
-      docLinks: {
-        links: {
-          kibana: 'kibana_docs_url',
-        },
-      },
-    },
-  }),
-  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
-  overviewPageActions: jest.fn().mockReturnValue([]),
-  OverviewPageFooter: jest.fn().mockReturnValue(<></>),
-  KibanaPageTemplate: jest.fn().mockReturnValue(<></>),
-  KibanaPageTemplateSolutionNavAvatar: jest.fn().mockReturnValue(<></>),
-}));
-
-jest.mock('../../lib/ui_metric', () => ({
-  trackUiMetric: jest.fn(),
-}));
-
-afterAll(() => jest.clearAllMocks());
-
 const mockNewsFetchResult = {
   error: null,
   feedItems: [
@@ -148,27 +125,86 @@ const mockFeatures = [
   },
 ];
 
+const flushPromises = async () => await setTimeoutP(10);
+
+const updateComponent = async (component: ReactWrapper) => {
+  await act(async () => {
+    await flushPromises();
+    component.update();
+  });
+};
+
 describe('Overview', () => {
-  test('render', () => {
-    const component = shallowWithIntl(
+  beforeEach(() => {
+    hasUserDataViewMock.mockClear();
+    hasUserDataViewMock.mockResolvedValue(true);
+  });
+
+  afterAll(() => jest.clearAllMocks());
+
+  test('render', async () => {
+    const component = mountWithIntl(
       <Overview
         newsFetchResult={mockNewsFetchResult}
         solutions={mockSolutions}
         features={mockFeatures}
       />
     );
+
+    await updateComponent(component);
+
     expect(component).toMatchSnapshot();
   });
-  test('without solutions', () => {
-    const component = shallowWithIntl(
+
+  test('without solutions', async () => {
+    const component = mountWithIntl(
       <Overview newsFetchResult={mockNewsFetchResult} solutions={[]} features={mockFeatures} />
     );
+
+    await updateComponent(component);
+
     expect(component).toMatchSnapshot();
   });
-  test('without features', () => {
-    const component = shallowWithIntl(
+
+  test('without features', async () => {
+    const component = mountWithIntl(
       <Overview newsFetchResult={mockNewsFetchResult} solutions={mockSolutions} features={[]} />
     );
+
+    await updateComponent(component);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('when there is no user data view', async () => {
+    hasUserDataViewMock.mockResolvedValue(false);
+
+    const component = mountWithIntl(
+      <Overview
+        newsFetchResult={mockNewsFetchResult}
+        solutions={mockSolutions}
+        features={mockFeatures}
+      />
+    );
+
+    await updateComponent(component);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('during loading', async () => {
+    hasUserDataViewMock.mockImplementation(() => new Promise(() => {}));
+
+    const component = mountWithIntl(
+      <Overview
+        newsFetchResult={mockNewsFetchResult}
+        solutions={mockSolutions}
+        features={mockFeatures}
+      />
+    );
+
+    await updateComponent(component);
+
     expect(component).toMatchSnapshot();
   });
 });

src/plugins/kibana_overview/public/components/overview/overview.tsx

@@ -16,6 +16,7 @@ import {
   EuiScreenReaderOnly,
   EuiSpacer,
   EuiTitle,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { CoreStart } from 'kibana/public';
@@ -53,6 +54,7 @@ interface Props {
 
 export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) => {
   const [isNewKibanaInstance, setNewKibanaInstance] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const {
     services: { http, docLinks, data, share, uiSettings, application },
   } = useKibana<CoreStart & AppPluginStartDependencies>();
@@ -112,6 +114,7 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
       const hasUserIndexPattern = await indexPatternService.hasUserDataView().catch(() => true);
 
       setNewKibanaInstance(!hasUserIndexPattern);
+      setIsLoading(false);
     };
 
     fetchIsNewKibanaInstance();
@@ -145,6 +148,16 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
   const mainApps = ['dashboard', 'discover'];
   const remainingApps = kibanaApps.map(({ id }) => id).filter((id) => !mainApps.includes(id));
 
+  if (isLoading) {
+    return (
+      <EuiFlexGroup justifyContent="center" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="xl" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
   return (
     <KibanaPageTemplate
       pageHeader={{

src/plugins/kibana_react/public/overview_page/overview_page_actions/__snapshots__/overview_page_actions.test.tsx.snap

@@ -21,7 +21,7 @@ Array [
       href=""
       iconType="plusInCircle"
     >
-      Add data
+      Add integrations
     </EuiButtonEmpty>
   </mockConstructor>,
 ]
@@ -50,7 +50,7 @@ Array [
       href=""
       iconType="plusInCircle"
     >
-      Add data
+      Add integrations
     </EuiButtonEmpty>
   </mockConstructor>,
 ]

src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.tsx

@@ -43,8 +43,8 @@ export const overviewPageActions = ({
         href={addDataHref}
         iconType="plusInCircle"
       >
-        {i18n.translate('kibana-react.kbnOverviewPageHeader.addDataButtonLabel', {
-          defaultMessage: 'Add data',
+        {i18n.translate('kibana-react.kbnOverviewPageHeader.addIntegrationsButtonLabel', {
+          defaultMessage: 'Add integrations',
         })}
       </EuiButtonEmpty>
     </RedirectAppLinks>

x-pack/plugins/translations/translations/ja-JP.json

@@ -3482,7 +3482,6 @@
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonAriaLabel": "全画面モードを終了",
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonText": "全画面を終了",
     "kibana-react.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを終了します。",
-    "kibana-react.kbnOverviewPageHeader.addDataButtonLabel": "データの追加",
     "kibana-react.kbnOverviewPageHeader.devToolsButtonLabel": "開発ツール",
     "kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel": "管理",
     "kibana-react.kibanaCodeEditor.ariaLabel": "コードエディター",

x-pack/plugins/translations/translations/zh-CN.json

@@ -3507,7 +3507,6 @@
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonAriaLabel": "退出全屏模式",
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonText": "退出全屏",
     "kibana-react.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下，按 ESC 键可退出。",
-    "kibana-react.kbnOverviewPageHeader.addDataButtonLabel": "添加数据",
     "kibana-react.kbnOverviewPageHeader.devToolsButtonLabel": "开发工具",
     "kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel": "管理",
     "kibana-react.kibanaCodeEditor.ariaLabel": "代码编辑器",