From ca81c265c1a8229df0964e975f44c1fa200086b9 Mon Sep 17 00:00:00 2001
From: Pete Harverson <pete@elastic.co>
Date: Wed, 23 Jun 2021 16:09:49 +0100
Subject: [PATCH] [ML] Converts management app jobs list pages to new layout

---
 .../public/application/access_denied/page.tsx |  63 ++++------
 .../components/access_denied_page.tsx         |  87 ++++++--------
 .../components/insufficient_license_page.tsx  | 111 ++++++++----------
 .../jobs_list_page/jobs_list_page.tsx         | 108 ++++++++---------
 4 files changed, 155 insertions(+), 214 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/access_denied/page.tsx b/x-pack/plugins/ml/public/application/access_denied/page.tsx
index fa535eb1bd53a..a38c22a4944fc 100644
--- a/x-pack/plugins/ml/public/application/access_denied/page.tsx
+++ b/x-pack/plugins/ml/public/application/access_denied/page.tsx
@@ -5,21 +5,11 @@
  * 2.0.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiCallOut,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+
+import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPageContent, EuiSpacer } from '@elastic/eui';
 import { NavigationMenu } from '../components/navigation_menu';
 import { HelpMenu } from '../components/help_menu';
 import { useMlKibana } from '../contexts/kibana';
@@ -30,44 +20,35 @@ export const Page = () => {
   } = useMlKibana();
   const helpLink = docLinks.links.ml.guide;
   return (
-    <Fragment>
+    <>
       <NavigationMenu tabId="access-denied" />
-      <EuiPage>
-        <EuiPageBody>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle>
-                <h1>
+      <EuiSpacer size="xxl" />
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+            <EuiEmptyPrompt
+              iconType="alert"
+              title={
+                <h2>
                   <FormattedMessage
                     id="xpack.ml.management.jobsList.accessDeniedTitle"
                     defaultMessage="Access denied"
                   />
-                </h1>
-              </EuiTitle>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
-          <EuiPageContentBody>
-            <EuiSpacer size="m" />
-            <EuiCallOut
-              title={i18n.translate('xpack.ml.accessDenied.label', {
-                defaultMessage: 'Insufficient permissions',
-              })}
-              color="danger"
-              iconType="cross"
-            >
-              <EuiText size="s">
+                </h2>
+              }
+              body={
                 <p>
                   <FormattedMessage
                     id="xpack.ml.accessDenied.description"
-                    defaultMessage="You don’t have permission to access the ML plugin"
+                    defaultMessage="You don’t have permission to access the Machine Learning plugin."
                   />
                 </p>
-              </EuiText>
-            </EuiCallOut>
-          </EuiPageContentBody>
-        </EuiPageBody>
-      </EuiPage>
+              }
+            />
+          </EuiPageContent>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       <HelpMenu docLink={helpLink} />
-    </Fragment>
+    </>
   );
 };
diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx b/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx
index 0d785f1918b0b..7feb1ef33cba7 100644
--- a/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx
+++ b/x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx
@@ -5,59 +5,46 @@
  * 2.0.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
 
-import {
-  EuiCallOut,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiEmptyPrompt, EuiPageContent, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 
 export const AccessDeniedPage = () => (
-  <Fragment>
-    <EuiPage data-test-subj="mlPageAccessDenied">
-      <EuiPageBody>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
-            <EuiTitle>
-              <h1>
-                <FormattedMessage
-                  id="xpack.ml.management.jobsList.insufficientLicenseTitle"
-                  defaultMessage="Machine Learning"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiPageContentBody>
-          <EuiSpacer size="m" />
-          <EuiCallOut
-            title={i18n.translate('xpack.ml.management.jobsList.noPermissionToAccessLabel', {
-              defaultMessage: 'Access denied',
-            })}
-            color="danger"
-            iconType="cross"
-          >
-            <EuiText size="s">
-              <p>
-                <FormattedMessage
-                  id="xpack.ml.management.jobsList.noGrantedPrivilegesDescription"
-                  defaultMessage="You don’t have permission to manage ML jobs"
-                />
-              </p>
-            </EuiText>
-          </EuiCallOut>
-        </EuiPageContentBody>
-      </EuiPageBody>
-    </EuiPage>
-  </Fragment>
+  <>
+    <EuiPageHeader
+      data-test-subj="mlPageAccessDenied"
+      pageTitle={
+        <FormattedMessage
+          id="xpack.ml.management.jobsList.noPermissionToAccessPageTitle"
+          defaultMessage="Machine Learning"
+        />
+      }
+      bottomBorder
+    />
+
+    <EuiSpacer size="l" />
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+      <EuiEmptyPrompt
+        iconType="alert"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.ml.management.jobsList.noPermissionToAccessLabel"
+              defaultMessage="Access denied"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.ml.management.jobsList.noGrantedPrivilegesDescription"
+              defaultMessage="You don’t have permission to manage Machine Learning jobs."
+            />
+          </p>
+        }
+      />
+    </EuiPageContent>
+  </>
 );
diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx b/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx
index 22951e950045b..8cfcaa30c27d6 100644
--- a/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx
+++ b/x-pack/plugins/ml/public/application/management/jobs_list/components/insufficient_license_page.tsx
@@ -5,78 +5,61 @@
  * 2.0.
  */
 
-import React, { FC, Fragment } from 'react';
+import React, { FC } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
 import { CoreStart } from 'kibana/public';
 
-import {
-  EuiCallOut,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-  EuiLink,
-} from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink, EuiPageContent, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 
 interface Props {
   basePath: CoreStart['http']['basePath'];
 }
 
 export const InsufficientLicensePage: FC<Props> = ({ basePath }) => (
-  <Fragment>
-    <EuiPage data-test-subj="mlPageInsufficientLicense">
-      <EuiPageBody>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
-            <EuiTitle>
-              <h1>
-                <FormattedMessage
-                  id="xpack.ml.management.jobsList.insufficientLicenseTitle"
-                  defaultMessage="Machine Learning"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiPageContentBody>
-          <EuiSpacer size="m" />
-          <EuiCallOut
-            title={i18n.translate('xpack.ml.management.jobsList.insufficientLicenseLabel', {
-              defaultMessage:
-                'Machine Learning is only available on a trial, platinum or enterprise license',
-            })}
-            color="danger"
-            iconType="cross"
-          >
-            <EuiText size="s">
-              <p>
-                <FormattedMessage
-                  id="xpack.ml.management.jobsList.insufficientLicenseDescription"
-                  defaultMessage="Please {link} to use Machine Learning features"
-                  values={{
-                    link: (
-                      <EuiLink
-                        href={`${basePath.get()}/app/management/stack/license_management/home`}
-                      >
-                        <FormattedMessage
-                          id="xpack.ml.management.jobsList.insufficientLicenseDescription.link"
-                          defaultMessage="upgrade your license or start a trial"
-                        />
-                      </EuiLink>
-                    ),
-                  }}
-                />
-              </p>
-            </EuiText>
-          </EuiCallOut>
-        </EuiPageContentBody>
-      </EuiPageBody>
-    </EuiPage>
-  </Fragment>
+  <>
+    <EuiPageHeader
+      data-test-subj="mlPageInsufficientLicense"
+      pageTitle={
+        <FormattedMessage
+          id="xpack.ml.management.jobsList.insufficientLicenseTitle"
+          defaultMessage="Machine Learning"
+        />
+      }
+      bottomBorder
+    />
+
+    <EuiSpacer size="l" />
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+      <EuiEmptyPrompt
+        iconType="alert"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.ml.management.jobsList.insufficientLicenseLabel"
+              defaultMessage="Insufficient license"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.ml.management.jobsList.insufficientLicenseDescription"
+              defaultMessage="Machine Learning is only available on a trial, platinum or enterprise license. Please {link} to use Machine Learning features"
+              values={{
+                link: (
+                  <EuiLink href={`${basePath.get()}/app/management/stack/license_management/home`}>
+                    <FormattedMessage
+                      id="xpack.ml.management.jobsList.insufficientLicenseDescription.link"
+                      defaultMessage="upgrade your license or start a trial"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        }
+      />
+    </EuiPageContent>
+  </>
 );
diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx b/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx
index ca62ef9aaf0af..0cbf4c1981986 100644
--- a/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx
+++ b/x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx
@@ -8,18 +8,15 @@
 import React, { useEffect, useState, Fragment, FC, useMemo, useCallback } from 'react';
 import { Router } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { CoreStart } from 'kibana/public';
 
 import {
   EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent,
   EuiPageContentBody,
+  EuiPageHeader,
   EuiSpacer,
   EuiTabbedContent,
-  EuiText,
-  EuiTitle,
   EuiTabbedContentTab,
 } from '@elastic/eui';
 
@@ -128,7 +125,7 @@ export const JobsListPage: FC<{
 }> = ({ coreStart, share, history, spacesApi }) => {
   const spacesEnabled = spacesApi !== undefined;
   const [initialized, setInitialized] = useState(false);
-  const [accessDenied, setAccessDenied] = useState(false);
+  const [accessDenied, setAccessDenied] = useState(true);
   const [isPlatinumOrTrialLicense, setIsPlatinumOrTrialLicense] = useState(true);
   const [showSyncFlyout, setShowSyncFlyout] = useState(false);
   const [isMlEnabledInSpace, setIsMlEnabledInSpace] = useState(false);
@@ -176,6 +173,19 @@ export const JobsListPage: FC<{
     defaultMessage: 'Analytics jobs docs',
   });
 
+  const docsLink = (
+    <EuiButtonEmpty
+      href={
+        currentTabId === 'anomaly_detection_jobs' ? anomalyDetectionJobsUrl : dataFrameAnalyticsUrl
+      }
+      target="_blank"
+      iconType="help"
+      data-test-subj="documentationLink"
+    >
+      {currentTabId === 'anomaly_detection_jobs' ? anomalyDetectionDocsLabel : analyticsDocsLabel}
+    </EuiButtonEmpty>
+  );
+
   function renderTabs() {
     return (
       <EuiTabbedContent
@@ -209,62 +219,42 @@ export const JobsListPage: FC<{
         >
           <ContextWrapper feature={PLUGIN_ID}>
             <Router history={history}>
-              <EuiPageContent
+              <EuiPageHeader
+                pageTitle={
+                  <FormattedMessage
+                    id="xpack.ml.management.jobsList.jobsListTitle"
+                    defaultMessage="Machine Learning Jobs"
+                  />
+                }
+                description={
+                  <FormattedMessage
+                    id="xpack.ml.management.jobsList.jobsListTagline"
+                    defaultMessage="View machine learning analytics and anomaly detection jobs."
+                  />
+                }
+                rightSideItems={[docsLink]}
+                bottomBorder
+              />
+
+              <EuiSpacer size="l" />
+
+              <EuiPageContentBody
                 id="kibanaManagementMLSection"
                 data-test-subj="mlPageStackManagementJobsList"
               >
-                <EuiTitle size="l">
-                  <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-                    <EuiFlexItem grow={false}>
-                      <h1>
-                        {i18n.translate('xpack.ml.management.jobsList.jobsListTitle', {
-                          defaultMessage: 'Machine Learning Jobs',
-                        })}
-                      </h1>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonEmpty
-                        target="_blank"
-                        iconType="help"
-                        iconSide="left"
-                        color="primary"
-                        href={
-                          currentTabId === 'anomaly_detection_jobs'
-                            ? anomalyDetectionJobsUrl
-                            : dataFrameAnalyticsUrl
-                        }
-                      >
-                        {currentTabId === 'anomaly_detection_jobs'
-                          ? anomalyDetectionDocsLabel
-                          : analyticsDocsLabel}
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiTitle>
-                <EuiSpacer size="s" />
-                <EuiTitle size="s">
-                  <EuiText color="subdued">
-                    {i18n.translate('xpack.ml.management.jobsList.jobsListTagline', {
-                      defaultMessage: 'View machine learning analytics and anomaly detection jobs.',
-                    })}
-                  </EuiText>
-                </EuiTitle>
-                <EuiSpacer size="l" />
-                <EuiPageContentBody>
-                  {spacesEnabled && (
-                    <>
-                      <EuiButtonEmpty onClick={() => setShowSyncFlyout(true)}>
-                        {i18n.translate('xpack.ml.management.jobsList.syncFlyoutButton', {
-                          defaultMessage: 'Synchronize saved objects',
-                        })}
-                      </EuiButtonEmpty>
-                      {showSyncFlyout && <JobSpacesSyncFlyout onClose={onCloseSyncFlyout} />}
-                      <EuiSpacer size="s" />
-                    </>
-                  )}
-                  {renderTabs()}
-                </EuiPageContentBody>
-              </EuiPageContent>
+                {spacesEnabled && (
+                  <>
+                    <EuiButtonEmpty onClick={() => setShowSyncFlyout(true)}>
+                      {i18n.translate('xpack.ml.management.jobsList.syncFlyoutButton', {
+                        defaultMessage: 'Synchronize saved objects',
+                      })}
+                    </EuiButtonEmpty>
+                    {showSyncFlyout && <JobSpacesSyncFlyout onClose={onCloseSyncFlyout} />}
+                    <EuiSpacer size="s" />
+                  </>
+                )}
+                {renderTabs()}
+              </EuiPageContentBody>
             </Router>
           </ContextWrapper>
         </KibanaContextProvider>