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

## What does this PR do? * Migrate all usages of EuiPage*_Deprecated in Watcher ## Issue References * #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]> Co-authored-by: Yulia Cech <[email protected]>
elastic · Aug 22, 2023 · 34733be · 34733be
1 parent dd8239f
commit 34733be
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 155 deletions.
diff --git a/x-pack/plugins/watcher/__jest__/__snapshots__/license_prompt.test.tsx.snap b/x-pack/plugins/watcher/__jest__/__snapshots__/license_prompt.test.tsx.snap
diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx
@@ -7,13 +7,14 @@
 
 import React from 'react';
 
-import { EuiEmptyPrompt } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 export function PageErrorForbidden() {
   return (
-    <EuiEmptyPrompt
+    <EuiPageTemplate.EmptyPrompt
       iconType="warning"
+      color="danger"
       title={
         <h1>
           <FormattedMessage

diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx
@@ -7,13 +7,14 @@
 
 import React from 'react';
 
-import { EuiEmptyPrompt } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 export function PageErrorNotExist({ id }: { id?: string }) {
   return (
-    <EuiEmptyPrompt
+    <EuiPageTemplate.EmptyPrompt
       iconType="warning"
+      color="danger"
       title={
         <h1>
           <FormattedMessage

diff --git a/x-pack/plugins/watcher/public/application/license_prompt.tsx b/x-pack/plugins/watcher/public/application/license_prompt.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiEmptyPrompt, EuiLink, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
+import { EuiLink, EuiPageTemplate } from '@elastic/eui';
 import { LicenseManagementLocator } from '@kbn/license-management-plugin/public/locator';
 
 export const LicensePrompt = ({
@@ -41,20 +41,19 @@ export const LicensePrompt = ({
     </>
   );
   return (
-    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
-      <EuiEmptyPrompt
-        iconType="warning"
-        title={
-          <h1>
-            <FormattedMessage
-              id="xpack.watcher.app.licenseErrorTitle"
-              defaultMessage="License error"
-            />
-          </h1>
-        }
-        body={promptBody}
-        actions={[promptAction]}
-      />
-    </EuiPageContent>
+    <EuiPageTemplate.EmptyPrompt
+      iconType="warning"
+      color="danger"
+      title={
+        <h1>
+          <FormattedMessage
+            id="xpack.watcher.app.licenseErrorTitle"
+            defaultMessage="License error"
+          />
+        </h1>
+      }
+      body={promptBody}
+      actions={[promptAction]}
+    />
   );
 };
diff --git a/...ublic/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit.tsx b/...ublic/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit.tsx
@@ -7,11 +7,7 @@
 
 import React, { useContext, useState } from 'react';
 
-import {
-  EuiPageHeader,
-  EuiSpacer,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer, EuiPageSection } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ExecuteDetails } from '../../../../models/execute_details';
 import { getActionType } from '../../../../../../common/lib/get_action_type';
@@ -94,7 +90,7 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   );
 
   return (
-    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+    <EuiPageSection restrictWidth style={{ width: '100%' }}>
       <EuiPageHeader
         pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
         bottomBorder
@@ -128,6 +124,6 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
       )}
 
       {selectedTab === WATCH_EDIT_TAB && <JsonWatchEditForm />}
-    </EuiPageContentBody>
+    </EuiPageSection>
   );
 };
diff --git a/...ation/sections/watch_edit_page/components/monitoring_watch_edit/monitoring_watch_edit.tsx b/...ation/sections/watch_edit_page/components/monitoring_watch_edit/monitoring_watch_edit.tsx
@@ -7,7 +7,7 @@
 
 import React, { useContext } from 'react';
 
-import { EuiPageContent_Deprecated as EuiPageContent, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+import { EuiLink, EuiPageTemplate } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { WatchContext } from '../../watch_context';
@@ -28,20 +28,18 @@ export const MonitoringWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   );
 
   return (
-    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-      <EuiEmptyPrompt
-        iconType=""
-        title={<h1>{pageTitle}</h1>}
-        body={<p>{systemWatchMessage}</p>}
-        actions={[
-          <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
-            <FormattedMessage
-              id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
-              defaultMessage="View watch status"
-            />
-          </EuiLink>,
-        ]}
-      />
-    </EuiPageContent>
+    <EuiPageTemplate.EmptyPrompt
+      iconType=""
+      title={<h1>{pageTitle}</h1>}
+      body={<p>{systemWatchMessage}</p>}
+      actions={[
+        <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
+            defaultMessage="View watch status"
+          />
+        </EuiLink>,
+      ]}
+    />
   );
 };
diff --git a/...ication/sections/watch_edit_page/components/threshold_watch_edit/threshold_watch_edit.tsx b/...ication/sections/watch_edit_page/components/threshold_watch_edit/threshold_watch_edit.tsx
@@ -25,7 +25,7 @@ import {
   EuiText,
   EuiTitle,
   EuiPageHeader,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -236,7 +236,7 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   };
 
   return (
-    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+    <EuiPageSection restrictWidth style={{ width: '100%' }}>
       <EuiPageHeader
         pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
         description={watch.titleDescription}
@@ -953,6 +953,6 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
           close={() => setIsRequestVisible(false)}
         />
       ) : null}
-    </EuiPageContentBody>
+    </EuiPageSection>
   );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/watch_edit_page.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/watch_edit_page.tsx
@@ -8,10 +8,10 @@
 import React, { useEffect, useReducer } from 'react';
 import { isEqual } from 'lodash';
 
-import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
+import { EuiPageTemplate } from '@elastic/eui';
 import { WATCH_TYPES } from '../../../../common/constants';
 import { BaseWatch } from '../../../../common/types/watch_types';
 import { getPageErrorCode, PageError, SectionLoading } from '../../components';
@@ -133,11 +133,7 @@ export const WatchEditPage = ({
 
   const errorCode = getPageErrorCode(loadError);
   if (errorCode) {
-    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
-        <PageError errorCode={errorCode} id={id} />
-      </EuiPageContent>
-    );
+    return <PageError errorCode={errorCode} id={id} />;
   } else if (loadError) {
     return (
       <GenericPageError
@@ -154,14 +150,14 @@ export const WatchEditPage = ({
 
   if (!watch) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageTemplate.EmptyPrompt>
         <SectionLoading>
           <FormattedMessage
             id="xpack.watcher.sections.watchEdit.loadingWatchDescription"
             defaultMessage="Loading watch…"
           />
         </SectionLoading>
-      </EuiPageContent>
+      </EuiPageTemplate.EmptyPrompt>
     );
   }