[Rollups] Migrate to new page layout

docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md

@@ -116,6 +116,7 @@ readonly links: {
         readonly addData: string;
         readonly kibana: string;
         readonly upgradeAssistant: string;
+        readonly rollupJobs: string;
         readonly elasticsearch: Record<string, string>;
         readonly siem: {
             readonly guide: string;

src/core/public/doc_links/doc_links_service.ts

@@ -137,6 +137,7 @@ export class DocLinksService {
         addData: `${KIBANA_DOCS}connect-to-elasticsearch.html`,
         kibana: `${KIBANA_DOCS}index.html`,
         upgradeAssistant: `${KIBANA_DOCS}upgrade-assistant.html`,
+        rollupJobs: `${KIBANA_DOCS}data-rollups.html`,
         elasticsearch: {
           docsBase: `${ELASTICSEARCH_DOCS}`,
           asyncSearch: `${ELASTICSEARCH_DOCS}async-search-intro.html`,
@@ -532,6 +533,7 @@ export interface DocLinksStart {
     readonly addData: string;
     readonly kibana: string;
     readonly upgradeAssistant: string;
+    readonly rollupJobs: string;
     readonly elasticsearch: Record<string, string>;
     readonly siem: {
       readonly guide: string;

src/core/public/public.api.md

@@ -595,6 +595,7 @@ export interface DocLinksStart {
         readonly addData: string;
         readonly kibana: string;
         readonly upgradeAssistant: string;
+        readonly rollupJobs: string;
         readonly elasticsearch: Record<string, string>;
         readonly siem: {
             readonly guide: string;

x-pack/plugins/rollup/public/crud_app/_crud_app.scss

@@ -4,11 +4,3 @@
 .rollupJobWizardStepActions {
   align-items: flex-end; /* 1 */
 }
-
-/**
- * 1. Ensure panel fills width of parent when search input yields no matching rollup jobs.
- */
-.rollupJobsListPanel {
-  // sass-lint:disable-block no-important
-  flex-grow: 1 !important; /* 1 */
-}

x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { cloneDeep, debounce, first, mapValues } from 'lodash';
 
@@ -18,11 +18,10 @@ import {
   EuiCallOut,
   EuiLoadingKibana,
   EuiOverlayMask,
-  EuiPageContent,
-  EuiPageContentHeader,
+  EuiPageContentBody,
+  EuiPageHeader,
   EuiSpacer,
   EuiStepsHorizontal,
-  EuiTitle,
 } from '@elastic/eui';
 
 import {
@@ -522,44 +521,46 @@ export class JobCreateUi extends Component {
       }
 
       saveErrorFeedback = (
-        <Fragment>
+        <>
+          <EuiSpacer />
+
           <EuiCallOut title={message} icon="cross" color="danger">
             {errorBody}
           </EuiCallOut>
 
           <EuiSpacer />
-        </Fragment>
+        </>
       );
     }
 
     return (
-      <Fragment>
-        <EuiPageContent>
-          <EuiPageContentHeader>
-            <EuiTitle size="l">
-              <h1>
-                <FormattedMessage
-                  id="xpack.rollupJobs.createTitle"
-                  defaultMessage="Create rollup job"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiPageContentHeader>
-
-          {saveErrorFeedback}
-
-          <EuiStepsHorizontal steps={this.getSteps()} />
+      <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+        <EuiPageHeader
+          bottomBorder
+          pageTitle={
+            <FormattedMessage
+              id="xpack.rollupJobs.createTitle"
+              defaultMessage="Create rollup job"
+            />
+          }
+        />
 
-          <EuiSpacer />
+        <EuiSpacer size="l" />
+
+        <EuiStepsHorizontal steps={this.getSteps()} />
+
+        {saveErrorFeedback}
+
+        <EuiSpacer />
+
+        {this.renderCurrentStep()}
 
-          {this.renderCurrentStep()}
+        <EuiSpacer size="l" />
 
-          <EuiSpacer size="l" />
+        {this.renderNavigation()}
 
-          {this.renderNavigation()}
-        </EuiPageContent>
         {savingFeedback}
-      </Fragment>
+      </EuiPageContentBody>
     );
   }
 

x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.js

@@ -195,7 +195,7 @@ export class DetailPanel extends Component {
                 <EuiTextColor color="subdued">
                   <FormattedMessage
                     id="xpack.rollupJobs.detailPanel.loadingLabel"
-                    defaultMessage="Loading rollup job..."
+                    defaultMessage="Loading rollup job…"
                   />
                 </EuiTextColor>
               </EuiText>

x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.test.js

@@ -70,7 +70,7 @@ describe('<DetailPanel />', () => {
       ({ component, find, exists } = initTestBed({ isLoading: true }));
       const loading = find('rollupJobDetailLoading');
       expect(loading.length).toBeTruthy();
-      expect(loading.text()).toEqual('Loading rollup job...');
+      expect(loading.text()).toEqual('Loading rollup job…');
 
       // Make sure the title and the tabs are visible
       expect(exists('detailPanelTabSelected')).toBeTruthy();