[Watcher] Migrate all usages of EuiPage*_Deprecated #163128

gitstart · 2023-08-03T22:54:27Z

What does this PR do?

Migrate all usages of EuiPage*_Deprecated in Watcher

Issue References

[Watcher] Migrate all usages of EuiPage*_Deprecated #163070

Video/Screenshot Demo

This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.

Co-authored-by: LuisChiej <[email protected]> Co-authored-by: gitstart_bot <[email protected]>

kibanamachine · 2023-08-03T22:54:29Z

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

alisonelizabeth · 2023-08-07T19:25:39Z

Hi @gitstart! Thank you for your contribution ❤️

Can you please provide screenshots of the changes you have made? This will help us greatly with the review and confirm the changes have been tested.

Also - a quick note: While the “How” section in #161413 provides a quick conversion map, unfortunately, this does not work for all cases. Please refer to the EUI guidelines on how to approach the migration and examples. You can also take a look at this PR as a reference implementation: #163134.

Please let us know if you have any questions. Thanks!

yuliacech

Thanks a lot for the help, @gitstart! Please feel free to re-request a code review from the team platform-deployment-management after merge conflicts and feedback in the comment have been addressed.

elasticmachine · 2023-08-17T16:19:06Z

Pinging @elastic/platform-deployment-management (Team:Deployment Management)

Co-authored-by: LuisChiej <[email protected]> Co-authored-by: gitstart_bot <[email protected]>

yuliacech · 2023-08-22T11:11:25Z

x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx

 import { FormattedMessage } from '@kbn/i18n-react';

 export function PageErrorForbidden() {
  return (
-    <EuiEmptyPrompt
+    <EuiPageTemplate.EmptyPrompt


Verified ✅

yuliacech · 2023-08-22T11:13:27Z

x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx

 import { FormattedMessage } from '@kbn/i18n-react';

 export function PageErrorNotExist({ id }: { id?: string }) {
  return (
-    <EuiEmptyPrompt
+    <EuiPageTemplate.EmptyPrompt


Verified ✅

yuliacech · 2023-08-22T11:14:32Z

x-pack/plugins/watcher/public/application/license_prompt.tsx

-        actions={[promptAction]}
-      />
-    </EuiPageContent>
+    <EuiPageTemplate.EmptyPrompt


Verified ✅

yuliacech · 2023-08-22T11:16:27Z

...r/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit.tsx

@@ -94,7 +90,7 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
  );

  return (
-    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+    <EuiPageSection restrictWidth style={{ width: '100%' }}>


Verified ✅

yuliacech · 2023-08-22T11:18:03Z

...pplication/sections/watch_edit_page/components/threshold_watch_edit/threshold_watch_edit.tsx

@@ -236,7 +236,7 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
  };

  return (
-    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+    <EuiPageSection restrictWidth style={{ width: '100%' }}>


Verified ✅

yuliacech · 2023-08-22T11:29:59Z

x-pack/plugins/watcher/public/application/sections/watch_edit_page/watch_edit_page.tsx

-        <PageError errorCode={errorCode} id={id} />
-      </EuiPageContent>
-    );
+    return <PageError errorCode={errorCode} id={id} />;


Verified ✅

yuliacech · 2023-08-22T11:35:28Z

x-pack/plugins/watcher/public/application/sections/watch_edit_page/watch_edit_page.tsx

@@ -154,14 +150,14 @@ export const WatchEditPage = ({

  if (!watch) {
    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageTemplate.EmptyPrompt>


Added EuiPageTemplate.EmptyPrompt otherwise the loading prompt doesn't have the color.

yuliacech · 2023-08-22T11:37:40Z

x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx

@@ -178,24 +177,20 @@ export const WatchListPage = () => {

  if (isWatchesLoading) {
    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageTemplate.EmptyPrompt>


Added EuiPageTemplate.EmptyPrompt otherwise the loading section doesn't have the color.

yuliacech · 2023-08-22T11:38:27Z

x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx

-        <PageError errorCode={errorCode} />
-      </EuiPageContent>
-    );
+    return <PageError errorCode={errorCode} />;


Verified ✅

yuliacech · 2023-08-22T11:39:12Z

x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx

-          data-test-subj="emptyPrompt"
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt


Verified ✅

yuliacech · 2023-08-22T11:41:45Z

x-pack/plugins/watcher/public/application/sections/watch_status_page/watch_status_page.tsx

@@ -77,23 +77,19 @@ export const WatchStatusPage = ({

  if (isWatchDetailLoading) {
    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageTemplate.EmptyPrompt>


Added EuiPageTemplate.EmptyPrompt otherwise the loading prompt doesn't have the color.

yuliacech · 2023-08-22T11:42:18Z

x-pack/plugins/watcher/public/application/sections/watch_status_page/watch_status_page.tsx

-        <PageError errorCode={errorCode} id={id} />
-      </EuiPageContent>
-    );
+    return <PageError errorCode={errorCode} id={id} />;


Verified ✅

yuliacech · 2023-08-22T11:43:26Z

...lication/sections/watch_edit_page/components/monitoring_watch_edit/monitoring_watch_edit.tsx

-        ]}
-      />
-    </EuiPageContent>
+    <EuiPageTemplate.EmptyPrompt


didn't verify this visually since I'm not sure, monitoring watches are still in use. The code changes LGTM

yuliacech · 2023-08-22T11:43:46Z

buildkite test this

yuliacech

Thanks a lot for the help, @gitstart!
Verified visually and added some fixes, the rest of the changes LGTM 👍

yuliacech · 2023-08-22T12:23:40Z

buildkite test this

yuliacech · 2023-08-22T12:32:14Z

@elasticmachine run elasticsearch-ci/docs

kibana-ci · 2023-08-22T13:16:33Z

💚 Build Succeeded

Buildkite Build
Commit: c298f66

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
`securitySolution`	15.7MB	15.7MB	+6.4KB
`securitySolutionServerless`	249.0KB	255.3KB	+6.2KB
`watcher`	163.9KB	163.1KB	-801.0B
total			+11.9KB

Page load bundle

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

id	before	after	diff
`securitySolutionServerless`	37.9KB	37.9KB	+2.0B

History

💔 Build #152314 failed 8bfe096

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

[Watcher] Migrate all usages of EuiPage*_Deprecated

7733535

Co-authored-by: LuisChiej <[email protected]> Co-authored-by: gitstart_bot <[email protected]>

gitstart changed the title ~~ELS-160 - [Watcher] Migrate all usages of EuiPage*_Deprecated~~ [Watcher] Migrate all usages of EuiPage*_Deprecated Aug 3, 2023

gitstart marked this pull request as ready for review August 3, 2023 22:55

gitstart requested a review from a team as a code owner August 3, 2023 22:55

kibanamachine added the 💝community label Aug 3, 2023

yuliacech reviewed Aug 17, 2023

View reviewed changes

yuliacech added Feature:Watcher Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more release_note:skip Skip the PR/issue when compiling release notes labels Aug 17, 2023

[Watcher] Migrate all usages of EuiPage*_Deprecated

15a9c50

Co-authored-by: LuisChiej <[email protected]> Co-authored-by: gitstart_bot <[email protected]>

gitstart requested a review from yuliacech August 22, 2023 08:12

yuliacech reviewed Aug 22, 2023

View reviewed changes

[Watcher] Fix loading section

171a567

yuliacech reviewed Aug 22, 2023

View reviewed changes

[Watcher] Fix loading section

99fe00c

yuliacech reviewed Aug 22, 2023

View reviewed changes

[Watcher] Fix loading section

8bfe096

yuliacech reviewed Aug 22, 2023

View reviewed changes

yuliacech approved these changes Aug 22, 2023

View reviewed changes

[Watcher] Update jest snapshots

c298f66

yuliacech enabled auto-merge (squash) August 22, 2023 12:33

yuliacech merged commit 34733be into elastic:main Aug 22, 2023

kibanamachine added v8.11.0 backport:skip This commit does not require backporting labels Aug 22, 2023

alisonelizabeth mentioned this pull request Aug 22, 2023

[Watcher] Migrate all usages of EuiPage*_Deprecated #163070

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Watcher] Migrate all usages of EuiPage*_Deprecated #163128

[Watcher] Migrate all usages of EuiPage*_Deprecated #163128

gitstart commented Aug 3, 2023

kibanamachine commented Aug 3, 2023

alisonelizabeth commented Aug 7, 2023

yuliacech left a comment

elasticmachine commented Aug 17, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech Aug 22, 2023

yuliacech commented Aug 22, 2023

yuliacech left a comment

yuliacech commented Aug 22, 2023

yuliacech commented Aug 22, 2023

kibana-ci commented Aug 22, 2023

[Watcher] Migrate all usages of EuiPage*_Deprecated #163128

[Watcher] Migrate all usages of EuiPage*_Deprecated #163128

Conversation

gitstart commented Aug 3, 2023

What does this PR do?

Issue References

Video/Screenshot Demo

kibanamachine commented Aug 3, 2023

alisonelizabeth commented Aug 7, 2023

yuliacech left a comment

Choose a reason for hiding this comment

elasticmachine commented Aug 17, 2023

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuliacech commented Aug 22, 2023

yuliacech left a comment

Choose a reason for hiding this comment

yuliacech commented Aug 22, 2023

yuliacech commented Aug 22, 2023

kibana-ci commented Aug 22, 2023

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History