[Shared UX] Add `<NotFound />` prompt #145598

afgomez · 2022-11-17T17:07:56Z

Summary

Creates a shared <NotFound /> prompt to be used when any given consumer needs to show a 404 error.

afgomez · 2022-11-17T17:14:28Z

packages/shared-ux/prompt/errors/src/not_found.tsx

+    loadImage();
+  }, [colorMode]);
+
+  const icon = errorImage ? <EuiImage src={errorImage} alt="" /> : null;


The alt attribute is empty on purpose since the image is decoration, not content.

kellyemurphy · 2022-11-17T21:27:15Z

Hi @afgomez we did this 404 work in the Cloud repo, so you should be able to copy that text.

afgomez · 2022-11-18T09:47:02Z

Thanks @kellyemurphy! I copied it from the EUI guidelines page. It would make sense to update the text there as well to prevent future confusion.

I'll open a ticket later in their repo.

majagrubic

Where is this design coming from? Has anyone from design approved this?

packages/shared-ux/prompt/errors/src/not_found.tsx

.github/CODEOWNERS

afgomez · 2022-11-22T10:27:19Z

Hi @majagrubic!

Where is this design coming from?

This comes from EUI. It has been implemented in cloud and I have a use case for it in kibana.

Has anyone from design approved this?

I assume so since there are already implementations (unless kibana and cloud follow different design guidelines).

majagrubic

I am ok with shipping this once the codeowners file is updated. I will leave it without explicit approval in case @clintandrewhall still has something to add.

packages/shared-ux/prompt/errors/src/not_found.stories.tsx

.github/CODEOWNERS

smith · 2022-11-22T18:10:58Z

@majagrubic

Where is this design coming from? Has anyone from design approved this?

After initially speaking with the Shared UX team I spoke with @ryankeairns in our internal #platform-design channel on 2022-09-08 and he confirmed that we should follow the same design as we're using on cloud.

clintandrewhall

This is an awesome contribution, thank you!

A few requests:

consider shared-ux/prompt/not_found as the path.
consider NotFoundPrompt as the component name.

packages/shared-ux/prompt/errors/index.ts

packages/shared-ux/prompt/errors/src/not_found.stories.tsx

packages/shared-ux/prompt/errors/src/not_found.tsx

…uild_manifest'

afgomez · 2022-11-29T13:14:21Z

@clintandrewhall I have addressed all feedback. I have also renamed the plugin name to reflect the new folder name.

Let me know if something else is needed

kibana-ci · 2022-11-30T15:47:43Z

💛 Build succeeded, but was flaky

Failed CI Steps

FTR Configs #42

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/shared-ux-prompt-not-found`	-	1	+1

Unknown metric groups

API count

id	before	after	diff
`@kbn/shared-ux-prompt-not-found`	-	2	+2

ESLint disabled in files

id	before	after	diff
`osquery`	1	2	+1

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	19	21	+2
`fleet`	59	65	+6
`osquery`	109	115	+6
`securitySolution`	442	448	+6
total			+20

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	20	22	+2
`fleet`	68	74	+6
`osquery`	110	117	+7
`securitySolution`	519	525	+6
total			+21

History

💚 Build #91330 succeeded 965a5be
💚 Build #90898 succeeded 9600ec9
💚 Build #90205 succeeded bc9947d
💔 Build #90198 failed 78b2c78
💚 Build #89936 succeeded 8d393b6
💚 Build #89645 succeeded a2b32f9

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

clintandrewhall

Great work. Thanks for your efforts (and patience) on this.

kibanamachine · 2022-12-01T14:49:00Z

💔 All backports failed

Status	Branch	Result
❌	8.6	Backport failed because of merge conflicts You might need to backport the following PRs to 8.6: - [Fleet] Fix agent status computation to support agent v2 uppercase (#146757)

Manual backport

To create the backport manually run:

node scripts/backport --pr 145598

Questions ?

Please refer to the Backport tool documentation

## Summary Closes #144366. This PR needs to wait for #145598 to use a shared `<NotFound />` component instead of creating its own. ### How to test - Visit a monitor page with a bogus ID, like `http://<kibana-base-path>/app/synthetics/monitor/i-dont-exist` Before: <img width="1276" alt="Screenshot 2022-11-17 at 15 07 51" src="https://user-images.githubusercontent.com/57448/202469421-3d065d43-740d-4878-9a64-504c711ddcf9.png"> After: <img width="1279" alt="Screenshot 2022-11-17 at 15 06 38" src="https://user-images.githubusercontent.com/57448/202469433-6a6d22e3-8b1a-48f1-9934-f5094b89bac1.png"> Co-authored-by: kibanamachine <[email protected]>

Add <NotFound /> shared error

f02618c

afgomez added release_note:skip Skip the PR/issue when compiling release notes v8.6.0 labels Nov 17, 2022

afgomez requested a review from a team November 17, 2022 17:09

afgomez commented Nov 17, 2022

View reviewed changes

[CI] Auto-commit changed files from 'node scripts/generate codeowners'

4ea6bbe

This was referenced Nov 17, 2022

[Observability] Observability app pages seem to all show a blank (seemingly broken) white screen for a non-existent route #113139

Closed

[Synthetics UI] Render a 404 error if a monitor doesn't exist #145569

Merged

Alejandro Fernández Gómez added 6 commits November 18, 2022 11:00

Reuse copy from the cloud page

9db8d1d

Fix translation keys' namespace

0ef39aa

Fix types

c0d472d

Add small inline documentation

837aea9

Add tests

2da3d9a

Merge branch 'main' into error-prompts

a2b32f9

majagrubic reviewed Nov 21, 2022

View reviewed changes

packages/shared-ux/prompt/errors/src/not_found.tsx Outdated Show resolved Hide resolved

packages/shared-ux/prompt/errors/src/not_found.tsx Outdated Show resolved Hide resolved

.github/CODEOWNERS Outdated Show resolved Hide resolved

Alejandro Fernández Gómez added 2 commits November 22, 2022 11:19

Simplify image loading logic

1733a9e

Correct ownership of the package

e4a9309

Alejandro Fernández Gómez added 2 commits November 22, 2022 11:31

Merge branch 'main' into error-prompts

79177dd

Add storybook

8d393b6

afgomez requested a review from majagrubic November 22, 2022 11:12

boriskirov mentioned this pull request Nov 22, 2022

Empty prompt and content updates elastic/eui#6425

Merged

11 tasks

majagrubic reviewed Nov 22, 2022

View reviewed changes

packages/shared-ux/prompt/errors/src/not_found.stories.tsx Outdated Show resolved Hide resolved

.github/CODEOWNERS Outdated Show resolved Hide resolved

Alejandro Fernández Gómez and others added 4 commits November 23, 2022 10:01

fixup! Correct ownership of the package

78b2c78

[CI] Auto-commit changed files from 'node scripts/generate codeowners'

4f980f9

Tweak storybook

1bfba15

Fix package ownership this time for real

bc9947d

afgomez requested a review from clintandrewhall November 23, 2022 12:41

Merge branch 'main' into error-prompts

9600ec9

clintandrewhall reviewed Nov 28, 2022

View reviewed changes

Alejandro Fernández Gómez and others added 10 commits November 29, 2022 10:41

s/NotFound/NotFoundPrompt/g

360d032

Align function declaration

1d14b3f

s/errorImage/imageSrc/g

8d690d3

Move code to a different folder

fa9c570

[CI] Auto-commit changed files from 'node scripts/generate packages_b…

9e2fc76

…uild_manifest'

[CI] Auto-commit changed files from 'node scripts/generate codeowners'

9ccdf4f

Rename the storybook sidebar

3d44929

Cache default actions

7ab80a8

Use named exports

c1cb43d

Merge branch 'main' into error-prompts

965a5be

afgomez requested a review from clintandrewhall November 29, 2022 13:13

afgomez enabled auto-merge (squash) November 29, 2022 13:14

Merge branch 'main' into error-prompts

a6e0bf7

clintandrewhall approved these changes Dec 1, 2022

View reviewed changes

afgomez merged commit df41bfa into elastic:main Dec 1, 2022

kibanamachine added the v8.7.0 label Dec 1, 2022

afgomez removed the v8.6.0 label Dec 1, 2022

kibanamachine added the backport:skip This commit does not require backporting label Dec 1, 2022

This was referenced Dec 1, 2022

[APM] Add 404 page #136214

Closed

Logs and Metrics UI 404 pages #136335

Closed

cauemarcondes mentioned this pull request Jan 26, 2023

[Shared UX] rethink the "go back" button in the Not Found component #149622

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Shared UX] Add `<NotFound />` prompt #145598

[Shared UX] Add `<NotFound />` prompt #145598

afgomez commented Nov 17, 2022 •

edited by kibanamachine

Loading

afgomez Nov 17, 2022

kellyemurphy commented Nov 17, 2022

afgomez commented Nov 18, 2022

majagrubic left a comment

afgomez commented Nov 22, 2022

majagrubic left a comment

smith commented Nov 22, 2022

clintandrewhall left a comment

afgomez commented Nov 29, 2022

kibana-ci commented Nov 30, 2022

API count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

clintandrewhall left a comment

kibanamachine commented Dec 1, 2022

[Shared UX] Add <NotFound /> prompt #145598

[Shared UX] Add <NotFound /> prompt #145598

Conversation

afgomez commented Nov 17, 2022 • edited by kibanamachine Loading

Summary

afgomez Nov 17, 2022

Choose a reason for hiding this comment

kellyemurphy commented Nov 17, 2022

afgomez commented Nov 18, 2022

majagrubic left a comment

Choose a reason for hiding this comment

afgomez commented Nov 22, 2022

majagrubic left a comment

Choose a reason for hiding this comment

smith commented Nov 22, 2022

clintandrewhall left a comment

Choose a reason for hiding this comment

afgomez commented Nov 29, 2022

kibana-ci commented Nov 30, 2022

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Public APIs missing comments

API count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

History

clintandrewhall left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 1, 2022

💔 All backports failed

Manual backport

Questions ?

[Shared UX] Add `<NotFound />` prompt #145598

[Shared UX] Add `<NotFound />` prompt #145598

afgomez commented Nov 17, 2022 •

edited by kibanamachine

Loading