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

pgayvallet · 2021-11-17T14:38:16Z

Summary

Fix #116411
Part of #118866

Add a loader while awaiting indexPatternService.hasUserDataView to avoid a blink effect between the data/noData version of the page
Use the KibanaThemeProvider for the kibanaOverview application (will be removed from 8.0 and 7.16 backports)
Change the label of the 'add data' button to 'Add integrations'
Add and adapt unit tests

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios

pgayvallet · 2021-11-17T14:39:52Z

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

+        {i18n.translate('kibana-react.kbnOverviewPageHeader.addIntegrationsButtonLabel', {
+          defaultMessage: 'Add integrations',


This component is only used by kibana_overview, but overview_page_footer, in the same parent folder, is also used by other apps, so in doubt, I kept this component in kibana_react.

I hoped we can move it to overview, but looks like I missed that overview_page_footer is used in other apps :( #114990

pgayvallet · 2021-11-17T14:41:38Z

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

+  afterAll(() => jest.clearAllMocks());
+
+  test('render', async () => {
+    const component = mountWithIntl(


I had to switch from shallow to mount because enzyme does not support useEffect with shallow rendering, so all snapshots were in the loading state this PR adds. The snapshots are ugly, but correct.

pgayvallet · 2021-11-17T14:41:53Z

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

+const updateComponent = async (component: ReactWrapper) => {
+  await act(async () => {
+    await flushPromises();
+    component.update();


Need to use that for the indexPatternService.hasUserDataView promise to resolve.

elasticmachine · 2021-11-18T10:39:11Z

Pinging @elastic/kibana-core (Team:Core)

mshustov · 2021-11-19T07:47:32Z

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

+  }),
+  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
+  overviewPageActions: jest.fn().mockReturnValue([]),
+  OverviewPageFooter: jest.fn().mockReturnValue(<></>),


optional: IMO React.createElement(React.Fragment..) is more explicit in this case (and allows removing *.tsx extension)

mshustov · 2021-11-19T07:49:59Z

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

@@ -148,27 +124,94 @@ const mockFeatures = [
  },
 ];

+const flushPromises = async () => {
+  await new Promise<void>(async (resolve, reject) => {


optional

import { setTimeout: setTimeoutP } from 'timers/promises'; const flushPromises = async () => await setTimeoutP(10);

…view-blink

pgayvallet · 2021-11-19T13:39:19Z

@elasticmachine merge upstream

…view-blink

…nto kbn-116411-fix-overview-blink

kibana-ci · 2021-11-19T16:56:53Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`kibanaOverview`	10.1KB	10.3KB	+256.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`kibanaReact`	58.3KB	58.4KB	+16.0B

History

💔 Build #7967 failed 7ad6234
💚 Build #7925 succeeded 5d3abb8
💚 Build #7576 succeeded dd455bf
💔 Build #7384 failed bb0d56a

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…stic#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>

#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>

…ew (#118881) (#119222) * 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>

…stic#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>

…8881) * 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>

…stic#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>

pgayvallet added 4 commits November 17, 2021 15:08

add loader on overview page

7ef5289

use KibanaThemeProvider for kibanaOverview

86ce04c

change add data label to integrations

0d67f5c

adapt tests

bb0d56a

pgayvallet added Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.16.0 v8.1.0 labels Nov 17, 2021

pgayvallet commented Nov 17, 2021

View reviewed changes

pgayvallet mentioned this pull request Nov 17, 2021

[meta] Adapt all existing applications to use the new KibanaThemeProvider #118866

Closed

update snapshots, remove i18n keys

dd455bf

pgayvallet marked this pull request as ready for review November 18, 2021 10:39

pgayvallet requested review from a team as code owners November 18, 2021 10:39

Dosant approved these changes Nov 18, 2021

View reviewed changes

mshustov reviewed Nov 19, 2021

View reviewed changes

mshustov approved these changes Nov 19, 2021

View reviewed changes

pgayvallet added 2 commits November 19, 2021 11:28

Merge remote-tracking branch 'upstream/main' into kbn-116411-fix-over…

56998ed

…view-blink

review comments

5d3abb8

kibanamachine and others added 3 commits November 19, 2021 08:39

Merge branch 'main' into kbn-116411-fix-overview-blink

7ad6234

Merge remote-tracking branch 'upstream/main' into kbn-116411-fix-over…

13439a0

…view-blink

Merge remote-tracking branch 'origin/kbn-116411-fix-overview-blink' i…

efa84a2

…nto kbn-116411-fix-overview-blink

pgayvallet merged commit e00de95 into elastic:main Nov 19, 2021

pgayvallet mentioned this pull request Nov 19, 2021

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

Merged

pgayvallet mentioned this pull request Nov 19, 2021

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pgayvallet commented Nov 17, 2021 •

edited

Loading

pgayvallet Nov 17, 2021

Dosant Nov 18, 2021

pgayvallet Nov 17, 2021

pgayvallet Nov 17, 2021

elasticmachine commented Nov 18, 2021

mshustov Nov 19, 2021

mshustov Nov 19, 2021

pgayvallet commented Nov 19, 2021

kibana-ci commented Nov 19, 2021

		{i18n.translate('kibana-react.kbnOverviewPageHeader.addIntegrationsButtonLabel', {
		defaultMessage: 'Add integrations',

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

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

Conversation

pgayvallet commented Nov 17, 2021 • edited Loading

Summary

Checklist

pgayvallet Nov 17, 2021

Choose a reason for hiding this comment

Dosant Nov 18, 2021

Choose a reason for hiding this comment

pgayvallet Nov 17, 2021

Choose a reason for hiding this comment

pgayvallet Nov 17, 2021

Choose a reason for hiding this comment

elasticmachine commented Nov 18, 2021

mshustov Nov 19, 2021

Choose a reason for hiding this comment

mshustov Nov 19, 2021

Choose a reason for hiding this comment

pgayvallet commented Nov 19, 2021

kibana-ci commented Nov 19, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

pgayvallet commented Nov 17, 2021 •

edited

Loading