[Ingest Node Pipelines] Migrate to new page layout (elastic#101894)

* migrate pages to new layout * fix linter errors * update translation files * Nicer try-again cta * Fix lang and prettier * small CR changes * small linter fixes * fix test copy Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
sabarasaba · Jun 15, 2021 · 71c28da · 71c28da
1 parent 2cb387b
commit 71c28da
Show file tree

Hide file tree

Showing 9 changed files with 280 additions and 301 deletions.
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts
@@ -162,7 +162,7 @@ describe('<PipelinesList />', () => {
       const { exists, find } = testBed;
 
       expect(exists('pipelineLoadError')).toBe(true);
-      expect(find('pipelineLoadError').text()).toContain('Unable to load pipelines.');
+      expect(find('pipelineLoadError').text()).toContain('Unable to load pipelines');
     });
   });
 });
diff --git a/x-pack/plugins/ingest_pipelines/public/application/app.tsx b/x-pack/plugins/ingest_pipelines/public/application/app.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiPageContent } from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
 import React, { FunctionComponent } from 'react';
 import { Router, Switch, Route } from 'react-router-dom';
 
@@ -19,7 +19,6 @@ import {
   useAuthorizationContext,
   WithPrivileges,
   SectionLoading,
-  NotAuthorizedSection,
 } from '../shared_imports';
 
 import { PipelinesList, PipelinesCreate, PipelinesEdit, PipelinesClone } from './sections';
@@ -61,35 +60,42 @@ export const App: FunctionComponent = () => {
       {({ isLoading, hasPrivileges, privilegesMissing }) => {
         if (isLoading) {
           return (
-            <SectionLoading>
-              <FormattedMessage
-                id="xpack.ingestPipelines.app.checkingPrivilegesDescription"
-                defaultMessage="Checking privileges…"
-              />
-            </SectionLoading>
+            <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+              <SectionLoading>
+                <FormattedMessage
+                  id="xpack.ingestPipelines.app.checkingPrivilegesDescription"
+                  defaultMessage="Checking privileges…"
+                />
+              </SectionLoading>
+            </EuiPageContent>
           );
         }
 
         if (!hasPrivileges) {
           return (
-            <EuiPageContent>
-              <NotAuthorizedSection
+            <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+              <EuiEmptyPrompt
+                iconType="securityApp"
                 title={
-                  <FormattedMessage
-                    id="xpack.ingestPipelines.app.deniedPrivilegeTitle"
-                    defaultMessage="Cluster privileges required"
-                  />
+                  <h2>
+                    <FormattedMessage
+                      id="xpack.ingestPipelines.app.deniedPrivilegeTitle"
+                      defaultMessage="Cluster privileges required"
+                    />
+                  </h2>
                 }
-                message={
-                  <FormattedMessage
-                    id="xpack.ingestPipelines.app.deniedPrivilegeDescription"
-                    defaultMessage="To use Ingest Pipelines, you must have {privilegesCount,
-                    plural, one {this cluster privilege} other {these cluster privileges}}: {missingPrivileges}."
-                    values={{
-                      missingPrivileges: privilegesMissing.cluster!.join(', '),
-                      privilegesCount: privilegesMissing.cluster!.length,
-                    }}
-                  />
+                body={
+                  <p>
+                    <FormattedMessage
+                      id="xpack.ingestPipelines.app.deniedPrivilegeDescription"
+                      defaultMessage="To use Ingest Pipelines, you must have {privilegesCount,
+                      plural, one {this cluster privilege} other {these cluster privileges}}: {missingPrivileges}."
+                      values={{
+                        missingPrivileges: privilegesMissing.cluster!.join(', '),
+                        privilegesCount: privilegesMissing.cluster!.length,
+                      }}
+                    />
+                  </p>
                 }
               />
             </EuiPageContent>

diff --git a/.../plugins/ingest_pipelines/public/application/sections/pipelines_clone/pipelines_clone.tsx b/.../plugins/ingest_pipelines/public/application/sections/pipelines_clone/pipelines_clone.tsx
@@ -8,6 +8,7 @@
 import React, { FunctionComponent, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
+import { EuiPageContent } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { SectionLoading, useKibana, attemptToURIDecode } from '../../../shared_imports';
@@ -45,12 +46,14 @@ export const PipelinesClone: FunctionComponent<RouteComponentProps<ParamProps>>
 
   if (isLoading && isInitialRequest) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.ingestPipelines.clone.loadingPipelinesDescription"
-          defaultMessage="Loading pipeline…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.ingestPipelines.clone.loadingPipelinesDescription"
+            defaultMessage="Loading pipeline…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   } else {
     // We still show the create form even if we were not able to load the

diff --git a/...lugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx b/...lugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
@@ -8,15 +8,7 @@
 import React, { useState, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  EuiPageBody,
-  EuiPageContent,
-  EuiTitle,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonEmpty,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
 
 import { getListPath } from '../../services/navigation';
 import { Pipeline } from '../../../../common/types';
@@ -64,49 +56,43 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps & Prop
   }, [services]);
 
   return (
-    <EuiPageBody>
-      <EuiPageContent>
-        <EuiTitle size="l">
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="l" data-test-subj="pageTitle">
-                <h1>
-                  <FormattedMessage
-                    id="xpack.ingestPipelines.create.pageTitle"
-                    defaultMessage="Create pipeline"
-                  />
-                </h1>
-              </EuiTitle>
-            </EuiFlexItem>
-
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                size="s"
-                flush="right"
-                href={services.documentation.getPutPipelineApiUrl()}
-                target="_blank"
-                iconType="help"
-                data-test-subj="documentationLink"
-              >
-                <FormattedMessage
-                  id="xpack.ingestPipelines.create.docsButtonLabel"
-                  defaultMessage="Create pipeline docs"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiTitle>
-
-        <EuiSpacer size="l" />
-
-        <PipelineForm
-          defaultValue={sourcePipeline}
-          onSave={onSave}
-          onCancel={onCancel}
-          isSaving={isSaving}
-          saveError={saveError}
-        />
-      </EuiPageContent>
-    </EuiPageBody>
+    <>
+      <EuiPageHeader
+        bottomBorder
+        pageTitle={
+          <span data-test-subj="pageTitle">
+            <FormattedMessage
+              id="xpack.ingestPipelines.create.pageTitle"
+              defaultMessage="Create pipeline"
+            />
+          </span>
+        }
+        rightSideItems={[
+          <EuiButtonEmpty
+            size="s"
+            flush="right"
+            href={services.documentation.getPutPipelineApiUrl()}
+            target="_blank"
+            iconType="help"
+            data-test-subj="documentationLink"
+          >
+            <FormattedMessage
+              id="xpack.ingestPipelines.create.docsButtonLabel"
+              defaultMessage="Create pipeline docs"
+            />
+          </EuiButtonEmpty>,
+        ]}
+      />
+
+      <EuiSpacer size="l" />
+
+      <PipelineForm
+        defaultValue={sourcePipeline}
+        onSave={onSave}
+        onCancel={onCancel}
+        isSaving={isSaving}
+        saveError={saveError}
+      />
+    </>
   );
 };