[Shared UX] No Data Views Component #125403

majagrubic · 2022-02-11T16:19:11Z

Summary

This PR adds a "No Data Views" component. Its intended usage is to be shown in cases where there is data in ES, but no data views. The initial design is taken from Empty Index Pattern Prompt and follows the same functionality. Some styles were replaced by emotion and index-pattern references were changed to data-view references.

The component is not used anywhere yet, but in the follow-up PR it can be consumed inside 'Data View Editor'.

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~- [ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
~~- [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list~~
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

majagrubic · 2022-02-12T06:32:16Z

src/plugins/shared_ux/public/components/no_data_views_page/assets/no_results_illustration.tsx

+    viewBox="0 0 226 166"
+  >
+    <path
+      className="dscNoResultsIllustration__decor"


these need to be changed so they don't reference Discover, but didn't want to do this yet in case we're not going to go with this particular svg in the end.

cchaos · 2022-02-14T15:34:29Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

+  defaultMessage: 'You have data in Elasticsearch, but no data views',
+});
+
+export const NoDataViewsComponent = (props: NoDataViewsComponentProps) => {


This is great @majagrubic!

We currently have a design/component for the No Data View style prompt here: https://github.com/elastic/kibana/blob/main/src/plugins/data_view_editor/public/components/empty_prompts/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx

Can you re-use that in some capacity instead? I don't know if it's better to copy/paste or just move the whole component and fix the references.

clintandrewhall

An awesome start, a lot to like here. I'll complete another review after you get a chance to address the comments from @cchaos . Great work!

clintandrewhall · 2022-02-14T17:38:54Z

src/plugins/shared_ux/public/components/empty_state/assets/no_results_illustration.scss

@@ -0,0 +1,18 @@
+.dscNoResultsIllustration__decor {


nit: let's add a comment as to why this SASS file is here, and refer to and document the exception here: #122594

clintandrewhall · 2022-02-14T17:39:25Z

src/plugins/shared_ux/public/components/empty_state/index.tsx

+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export * from './no_data_views';


nit: new line

...lugins/shared_ux/public/components/empty_state/no_data_views/no_data_view_component.test.tsx

clintandrewhall · 2022-02-14T17:42:20Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

+});
+
+export const NoDataViewsComponent = (props: NoDataViewsComponentProps) => {
+  const { onClick, canCreateNewDataView } = props;


nit: you can destructure above.

clintandrewhall · 2022-02-14T17:44:46Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

+      description={noDescriptionText}
+      css={componentCss}
+    >
+      <div className="noResults__illustration">


consider comment, refer to #122594

clintandrewhall · 2022-02-14T17:48:26Z

...plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.stories.tsx

+
+export const PureComponentCannotCreateDataViews = () => {
+  return <NoDataViewsComponent canCreateNewDataView={false} />;
+};


I would combine these examples and add a control. For an example, see: https://github.com/elastic/kibana/blob/main/src/plugins/shared_ux/public/components/exit_full_screen_button/exit_full_screen_button.stories.tsx#L27-L36

src/plugins/shared_ux/public/services/editors.ts

src/plugins/shared_ux/public/services/storybook/editors.ts

rshen91

This is awesome!! I love the clarity in the test files and thank you for introducing me to kbn/test-jest-helpers 🙌🏻 . I can always look over this again when the other changes people suggested are implemented. I'm so excited to be on your team - this PR looks so great!

src/plugins/shared_ux/public/components/empty_state/index.tsx

clintandrewhall · 2022-02-23T17:10:30Z

@elasticmachine merge upstream

cchaos · 2022-02-23T17:16:47Z

A minor nit, but can we change "Read documentation" to "Read the docs"? It's friendlier.

@gchaps Is this general advice we should be using everywhere? When do we rely on a friendly tone vs authoritative? Is there a lookup guide we can reference for these kinds of sayings?

clintandrewhall

We need to add some docs and other tweaks. I can open a PR to merge some of my changes, if that's helpful?

clintandrewhall · 2022-02-23T17:24:12Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx

+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface Props {
+  documentationUrl: string;


nit: since this is a DocumentationLink, restating it on the prop is a bit redundant. In addition, given that we're stating it's a link, I'd consider href.

Suggested change

documentationUrl: string;

href: string;

clintandrewhall · 2022-02-23T17:24:32Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx

+      </EuiTitle>
+      &emsp;
+      <dd className="eui-displayInline">
+        <EuiLink href={documentationUrl} target="_blank" external>


Suggested change

<EuiLink href={documentationUrl} target="_blank" external>

<EuiLink href={href} target="_blank" external>

src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx

clintandrewhall · 2022-02-23T17:25:33Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx

+
+export function DocumentationLink({ documentationUrl }: Props) {
+  return (
+    <dl>


🥳 Semantic markup is my favorite!

clintandrewhall · 2022-02-23T17:27:45Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/index.tsx

+export { NoDataViewsPage } from './no_data_views_page';
+
+// eslint-disable-next-line import/no-default-export
+export default NoDataViewsPage;


nit: I was recently convinced to change my approach to imports by other Kibana engineers, given the noise of disabling eslint.

This would be in src/plugins/shared_ux/public/components/index.ts

export const NoDataViewsPage = React.lazy(() => import('./no_data_views_page').then(({ NoDataViewsPage }) => ({ default: NoDataViewsPage, })) );

clintandrewhall · 2022-02-23T17:28:39Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

@@ -0,0 +1,89 @@
+/*


nit: the standard we've adopted here so far has been: no_data_views.component.tsx

clintandrewhall · 2022-02-23T17:32:44Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

+const Illustration = lazy(() => import('../assets/data_view_illustration'));
+
+interface Props {
+  canCreateNewDataView: boolean;


These all need documentation.

clintandrewhall · 2022-02-23T17:32:58Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

+  defaultMessage: 'Create Data View',
+});
+
+export const NoDataViewsComponent = ({


Please add documentation.

clintandrewhall · 2022-02-23T17:34:04Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

+  emptyPromptColor = 'plain',
+}: Props) => {
+  // Using raw value because it is content dependent
+  const maxWidth = '830px';


nit: consider a const outside the component.

const MAX_WIDTH = 830;

clintandrewhall · 2022-02-23T17:35:52Z

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx

+      data-test-subj="noDataViewsPrompt"
+      layout="horizontal"
+      css={css`
+        max-width: ${maxWidth} !important;


...and this would become:

Suggested change

max-width: ${maxWidth} !important;

max-width: ${MAX_WIDTH}px !important;

@cchaos what's our stance on !important...?

Sometimes it's necessary to override specificity. In Sass, we have a linter that by default doesn't allow them, but you can comment the linter to ignore by also adding a reason. So something like

Suggested change

max-width: ${maxWidth} !important;

max-width: ${MAX_WIDTH}px !important; // Necessary to override EuiEmptyPrompt to fit content

gchaps · 2022-02-23T18:54:12Z

@cchaos "docs" is a common shortcut for "documentation", which is another reason that I prefer it here. Also, a lot of the Management pages already use "docs" in the the links on their pages.

We definitely should have guidelines for voice and tone in the UI copy. I think we can use a friendlier tone in empty states, landing pages, and tour components. A more authoritative tone works in error messages, where users want to know what went wrong and how to fix it.

kibana-ci · 2022-02-24T13:56:01Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`sharedUX`	23	47	+24

Async chunks

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

id	before	after	diff
`sharedUX`	8.5KB	100.5KB	+92.0KB

Page load bundle

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

id	before	after	diff
`sharedUX`	3.8KB	4.7KB	+972.0B

Unknown metric groups

API count

id	before	after	diff
`sharedUX`	10	14	+4

async chunk count

id	before	after	diff
`sharedUX`	1	3	+2

History

💔 Build #26123 failed a33a45f
💚 Build #26011 succeeded d65399e
💚 Build #25969 succeeded a7a9cdf
💚 Build #25779 succeeded 8e387e0
💚 Build #25361 succeeded 5207958

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

kibanamachine · 2022-02-28T19:46:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125403 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-01T19:56:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125403 or prevent reminders by adding the backport:skip label.

* Adding illustration * Add components * Add fake data view editor * [Shared UX] Adding No data views component * updating failing button snapshot * Fix style name * Update test * Change folder structure * Refactoring service * Fixing comments * Minor fixes * Fix failing snapshot * Change the layout of the component * Polish * Fix missing export * Fix docLinks initialization * Fix failing test * Remove unnecessary div Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Use calc function Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Rename onClick prop * Updated to use EuiEmptyPrompt * Fixing tests * Applying Clint's comments * Add documentation * Update string * Feedback for PR elastic#125403 * Add missing comment * Fix import issue Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>

kibanamachine · 2022-03-02T20:06:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125403 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-03T20:16:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125403 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-04T20:26:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125403 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-07T20:36:21Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125403 or prevent reminders by adding the backport:skip label.

Maja Grubic added 5 commits February 11, 2022 12:44

Adding illustration

bbdffb9

Add components

e06f40e

Add fake data view editor

02d4032

[Shared UX] Adding No data views component

1ff16ca

updating failing button snapshot

d8f4c7c

majagrubic mentioned this pull request Feb 11, 2022

[Shared UX] No data views component #125008

Closed

8 tasks

majagrubic added Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) v8.2.0 release_note:enhancement labels Feb 12, 2022

majagrubic marked this pull request as ready for review February 12, 2022 06:27

majagrubic requested review from ryankeairns, cchaos, rshen91 and clintandrewhall February 12, 2022 06:27

majagrubic commented Feb 12, 2022

View reviewed changes

Maja Grubic added 8 commits February 12, 2022 07:35

Fix style name

303889f

Update test

c6ad59f

Merge branch 'main' into no-data-views-2

af35ad4

Change folder structure

a5dea26

Refactoring service

751f92c

Fixing comments

9f3e773

Minor fixes

bf2f3ea

Fix failing snapshot

c913991

cchaos suggested changes Feb 14, 2022

View reviewed changes

clintandrewhall reviewed Feb 14, 2022

View reviewed changes

rshen91 reviewed Feb 15, 2022

View reviewed changes

src/plugins/shared_ux/public/components/empty_state/index.tsx Outdated Show resolved Hide resolved

Maja Grubic added 4 commits February 15, 2022 21:28

Change the layout of the component

0cb11fa

Polish

33ed5e1

Fix missing export

a803ff1

Fix docLinks initialization

5f23123

Merge branch 'main' into no-data-views-2

a7a9cdf

clintandrewhall requested changes Feb 23, 2022

View reviewed changes

Maja Grubic and others added 3 commits February 23, 2022 20:03

Add documentation

5bf13ba

Update string

d65399e

Feedback for PR elastic#125403

ef066d2

clintandrewhall mentioned this pull request Feb 23, 2022

Feedback for PR #125403 majagrubic/kibana#7

Merged

Maja Grubic added 3 commits February 24, 2022 10:22

Taking Clint's changes

b6299e7

Add missing comment

a33a45f

Fix import issue

0fb05bd

majagrubic requested a review from clintandrewhall February 24, 2022 16:43

miukimiu mentioned this pull request Feb 24, 2022

[EuiEmptyPrompt docs] Add examples object to reuse data in guidelines and examples page elastic/eui#5660

Closed

10 tasks

clintandrewhall approved these changes Feb 24, 2022

View reviewed changes

majagrubic merged commit febb41c into elastic:main Feb 24, 2022

majagrubic deleted the no-data-views-2 branch February 24, 2022 19:40

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Feb 28, 2022

miukimiu mentioned this pull request Mar 2, 2022

[EuiEmptyPrompt Docs] Fix text inconsistencies elastic/eui#5678

Merged

3 tasks

clintandrewhall added the backport:skip This commit does not require backporting label Mar 7, 2022

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 7, 2022

KOTungseth added the Feature:Kibana Management Feature label for Data Views, Advanced Setting, Saved Object management pages label Apr 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Shared UX] No Data Views Component #125403

[Shared UX] No Data Views Component #125403

majagrubic commented Feb 11, 2022 •

edited by cchaos

Loading

majagrubic Feb 12, 2022

cchaos Feb 14, 2022

clintandrewhall left a comment

clintandrewhall Feb 14, 2022

clintandrewhall Feb 14, 2022

clintandrewhall Feb 14, 2022

clintandrewhall Feb 14, 2022

clintandrewhall Feb 14, 2022

rshen91 left a comment

clintandrewhall commented Feb 23, 2022

cchaos commented Feb 23, 2022

clintandrewhall left a comment

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

clintandrewhall Feb 23, 2022

cchaos Feb 23, 2022

gchaps commented Feb 23, 2022

kibana-ci commented Feb 24, 2022

API count

async chunk count

kibanamachine commented Feb 28, 2022

kibanamachine commented Mar 1, 2022

kibanamachine commented Mar 2, 2022

kibanamachine commented Mar 3, 2022

kibanamachine commented Mar 4, 2022

kibanamachine commented Mar 7, 2022

	<EuiLink href={documentationUrl} target="_blank" external>
	<EuiLink href={href} target="_blank" external>

	max-width: ${maxWidth} !important;
	max-width: ${MAX_WIDTH}px !important;

	max-width: ${maxWidth} !important;
	max-width: ${MAX_WIDTH}px !important; // Necessary to override EuiEmptyPrompt to fit content

[Shared UX] No Data Views Component #125403

[Shared UX] No Data Views Component #125403

Conversation

majagrubic commented Feb 11, 2022 • edited by cchaos Loading

Summary

Checklist

For maintainers

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clintandrewhall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rshen91 left a comment

Choose a reason for hiding this comment

clintandrewhall commented Feb 23, 2022

cchaos commented Feb 23, 2022

clintandrewhall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gchaps commented Feb 23, 2022

kibana-ci commented Feb 24, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

API count

async chunk count

History

kibanamachine commented Feb 28, 2022

kibanamachine commented Mar 1, 2022

kibanamachine commented Mar 2, 2022

kibanamachine commented Mar 3, 2022

kibanamachine commented Mar 4, 2022

kibanamachine commented Mar 7, 2022

majagrubic commented Feb 11, 2022 •

edited by cchaos

Loading