From 7a00cb9127357f96cce1084086b34e5bb9349bab Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Mon, 21 Oct 2019 03:49:09 -0700
Subject: [PATCH] [ML] Transforms: Fix page layout (#48628) (#48729)

Fixes the overall page layout of the transform plugin to be in line with the rest of the Kibana Elasticsearch management section.
---
 .../transform/public/app/constants/index.ts   |  1 +
 .../plugins/transform/public/app/index.scss   |  1 +
 .../step_define/step_define_form.tsx          |  2 +-
 .../components/wizard/_index.scss             |  1 +
 .../components/wizard/_wizard.scss            |  5 ++
 .../components/wizard/wizard.tsx              |  2 +-
 .../create_transform_section.tsx              | 41 ++++++---
 .../create_transform_button.test.tsx.snap     |  3 +-
 .../create_transform_button.tsx               |  3 +-
 .../refresh_transform_list_button.tsx         | 10 ++-
 .../transform_list/transform_list.tsx         | 20 +++++
 .../transform_management_section.tsx          | 84 ++++++++++---------
 .../documentation/documentation_links.ts      | 10 +--
 .../legacy/plugins/transform/public/plugin.ts |  2 +-
 14 files changed, 116 insertions(+), 69 deletions(-)
 create mode 100644 x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_index.scss
 create mode 100644 x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_wizard.scss

diff --git a/x-pack/legacy/plugins/transform/public/app/constants/index.ts b/x-pack/legacy/plugins/transform/public/app/constants/index.ts
index 4988ea660b418..85ffc222f59a2 100644
--- a/x-pack/legacy/plugins/transform/public/app/constants/index.ts
+++ b/x-pack/legacy/plugins/transform/public/app/constants/index.ts
@@ -14,6 +14,7 @@ export enum SECTION_SLUG {
 export enum TRANSFORM_DOC_PATHS {
   default = 'docs.html',
   plugins = 'plugins.html',
+  transforms = 'transforms.html',
 }
 
 // UI Metric constants
diff --git a/x-pack/legacy/plugins/transform/public/app/index.scss b/x-pack/legacy/plugins/transform/public/app/index.scss
index 28459d06b5cb1..836929174875e 100644
--- a/x-pack/legacy/plugins/transform/public/app/index.scss
+++ b/x-pack/legacy/plugins/transform/public/app/index.scss
@@ -12,6 +12,7 @@
 
 @import 'sections/create_transform/components/aggregation_list/index';
 @import 'sections/create_transform/components/group_by_list/index';
+@import 'sections/create_transform/components/wizard/index';
 @import 'sections/transform_management/components/create_transform_button/index';
 @import 'sections/transform_management/components/stats_bar/index';
 @import 'sections/transform_management/components/transform_list/index';
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx
index 2e7cf9911555e..49017ac9e3c02 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx
+++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx
@@ -827,7 +827,7 @@ export const StepDefineForm: SFC<Props> = React.memo(({ overrides = {}, onChange
 
       <EuiFlexItem>
         <SourceIndexPreview cellClick={addToSearch} query={pivotQuery} />
-        <EuiSpacer size="l" />
+        <EuiSpacer size="m" />
         <PivotPreview aggs={aggList} groupBy={groupByList} query={pivotQuery} />
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_index.scss b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_index.scss
new file mode 100644
index 0000000000000..957f378640ea6
--- /dev/null
+++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_index.scss
@@ -0,0 +1 @@
+@import './wizard';
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_wizard.scss b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_wizard.scss
new file mode 100644
index 0000000000000..5a3b03f56a141
--- /dev/null
+++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_wizard.scss
@@ -0,0 +1,5 @@
+.transform__steps {
+  .euiStep__content {
+    padding-right: 0px;
+  }
+}
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx
index 0ed40f2d6166b..490fd150e1bc1 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx
+++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx
@@ -173,5 +173,5 @@ export const Wizard: SFC = React.memo(() => {
     },
   ];
 
-  return <EuiSteps steps={stepsConfig} />;
+  return <EuiSteps className="transform__steps" steps={stepsConfig} />;
 });
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx
index 8e33b2ebac89a..2214d1f5adfff 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx
+++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx
@@ -12,17 +12,19 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiBetaBadge,
-  EuiPage,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPageContent,
   EuiPageBody,
   EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 
 import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants';
 import { breadcrumbService, docTitleService, BREADCRUMB_SECTION } from '../../services/navigation';
+import { documentationLinksService } from '../../services/documentation';
 import { PrivilegesWrapper } from '../../lib/authorization';
 import { KibanaProvider } from '../../lib/kibana';
 
@@ -39,11 +41,11 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {
   return (
     <PrivilegesWrapper privileges={APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES}>
       <KibanaProvider savedObjectId={match.params.savedObjectId}>
-        <EuiPage>
-          <EuiPageBody>
-            <EuiPageContentHeader>
-              <EuiPageContentHeaderSection>
-                <EuiTitle>
+        <EuiPageBody data-test-subj="transformPageCreateTransform">
+          <EuiPageContent>
+            <EuiTitle size="l">
+              <EuiFlexGroup alignItems="center">
+                <EuiFlexItem grow={true}>
                   <h1>
                     <FormattedMessage
                       id="xpack.transform.transformsWizard.createTransformTitle"
@@ -62,15 +64,28 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {
                       )}
                     />
                   </h1>
-                </EuiTitle>
-              </EuiPageContentHeaderSection>
-            </EuiPageContentHeader>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    href={documentationLinksService.getTransformsDocUrl()}
+                    target="_blank"
+                    iconType="help"
+                    data-test-subj="documentationLink"
+                  >
+                    <FormattedMessage
+                      id="xpack.transform.transformsWizard.transformDocsLinkText"
+                      defaultMessage="Transform docs"
+                    />
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiTitle>
             <EuiPageContentBody>
               <EuiSpacer size="l" />
               <Wizard />
             </EuiPageContentBody>
-          </EuiPageBody>
-        </EuiPage>
+          </EuiPageContent>
+        </EuiPageBody>
       </KibanaProvider>
     </PrivilegesWrapper>
   );
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/__snapshots__/create_transform_button.test.tsx.snap b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/__snapshots__/create_transform_button.test.tsx.snap
index 94841ad026f80..d85f9379159d0 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/__snapshots__/create_transform_button.test.tsx.snap
+++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/__snapshots__/create_transform_button.test.tsx.snap
@@ -12,10 +12,9 @@ exports[`Transform: Transform List <CreateTransformButton /> Minimal initializat
     fill={true}
     iconType="plusInCircle"
     onClick={[MockFunction]}
-    size="s"
   >
     <FormattedMessage
-      defaultMessage="Create transform"
+      defaultMessage="Create a transform"
       id="xpack.transform.transformList.createTransformButton"
       values={Object {}}
     />
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.tsx
index c06be15f259d0..25024d9c5cc08 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.tsx
+++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.tsx
@@ -33,12 +33,11 @@ export const CreateTransformButton: FC<CreateTransformButtonProps> = ({ onClick
       fill
       onClick={onClick}
       iconType="plusInCircle"
-      size="s"
       data-test-subj="transformButtonCreate"
     >
       <FormattedMessage
         id="xpack.transform.transformList.createTransformButton"
-        defaultMessage="Create transform"
+        defaultMessage="Create a transform"
       />
     </EuiButton>
   );
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/refresh_transform_list_button/refresh_transform_list_button.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/refresh_transform_list_button/refresh_transform_list_button.tsx
index e8ebc42ecc180..f8a1f84937326 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/refresh_transform_list_button/refresh_transform_list_button.tsx
+++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/refresh_transform_list_button/refresh_transform_list_button.tsx
@@ -6,7 +6,7 @@
 
 import React, { FC } from 'react';
 
-import { EuiButtonEmpty } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 interface RefreshTransformListButton {
@@ -17,14 +17,16 @@ export const RefreshTransformListButton: FC<RefreshTransformListButton> = ({
   onClick,
   isLoading,
 }) => (
-  <EuiButtonEmpty
+  <EuiButton
+    color="secondary"
+    iconType="refresh"
     data-test-subj="transformRefreshTransformListButton"
     onClick={onClick}
     isLoading={isLoading}
   >
     <FormattedMessage
       id="xpack.transform.transformList.refreshButtonLabel"
-      defaultMessage="Refresh"
+      defaultMessage="Reload"
     />
-  </EuiButtonEmpty>
+  </EuiButton>
 );
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx
index 1037fdebbed6a..a7e4e49440089 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx
+++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx
@@ -14,6 +14,8 @@ import {
   EuiButtonIcon,
   EuiCallOut,
   EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiPopover,
   EuiTitle,
 } from '@elastic/eui';
@@ -21,6 +23,7 @@ import {
 import { OnTableChangeArg, SortDirection, SORT_DIRECTION } from '../../../../../shared_imports';
 
 import {
+  useRefreshTransformList,
   TransformId,
   TransformListRow,
   TRANSFORM_MODE,
@@ -28,6 +31,9 @@ import {
   TRANSFORM_STATE,
 } from '../../../../common';
 import { AuthorizationContext } from '../../../../lib/authorization';
+
+import { CreateTransformButton } from '../create_transform_button';
+import { RefreshTransformListButton } from '../refresh_transform_list_button';
 import { getTaskStateBadge } from './columns';
 import { DeleteAction } from './action_delete';
 import { StartAction } from './action_start';
@@ -78,6 +84,8 @@ export const TransformList: FC<Props> = ({
   transformsLoading,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const { refresh } = useRefreshTransformList({ isLoading: setIsLoading });
+
   const [filterActive, setFilterActive] = useState(false);
 
   const [filteredTransforms, setFilteredTransforms] = useState<TransformListRow[]>([]);
@@ -300,8 +308,20 @@ export const TransformList: FC<Props> = ({
     ];
   };
 
+  const renderToolsRight = () => (
+    <EuiFlexGroup gutterSize="m" justifyContent="spaceAround">
+      <EuiFlexItem>
+        <RefreshTransformListButton onClick={refresh} isLoading={isLoading} />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <CreateTransformButton onClick={onCreateTransform} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
   const search = {
     toolsLeft: transformSelection.length > 0 ? renderToolsLeft() : undefined,
+    toolsRight: renderToolsRight(),
     onChange: onQueryChange,
     box: {
       incremental: true,
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx
index 2c17446df830b..2e0e930990e6e 100644
--- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx
+++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx
@@ -11,17 +11,16 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiBetaBadge,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
   EuiOverlayMask,
-  EuiPage,
   EuiPageBody,
+  EuiPageContent,
   EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiPanel,
   EuiSpacer,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 
@@ -31,22 +30,19 @@ import { useGetTransforms } from '../../hooks';
 import { RedirectToCreateTransform } from '../../common/navigation';
 import { PrivilegesWrapper } from '../../lib/authorization';
 import { breadcrumbService, docTitleService, BREADCRUMB_SECTION } from '../../services/navigation';
+import { documentationLinksService } from '../../services/documentation';
 
 import { useRefreshInterval } from './components/transform_list/use_refresh_interval';
-import { CreateTransformButton } from './components/create_transform_button';
-import { RefreshTransformListButton } from './components/refresh_transform_list_button';
 import { SearchSelection } from './components/search_selection';
 import { TransformList } from './components/transform_list';
 import { TransformStatsBar } from './components/transform_list/transforms_stats_bar';
 
 export const TransformManagement: FC = () => {
-  const [isLoading, setIsLoading] = useState(false);
   const [transformsLoading, setTransformsLoading] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [blockRefresh, setBlockRefresh] = useState(false);
   const [transforms, setTransforms] = useState<TransformListRow[]>([]);
   const [errorMessage, setErrorMessage] = useState<any>(undefined);
-  const { refresh } = useRefreshTransformList({ isLoading: setIsLoading });
 
   const getTransforms = useGetTransforms(
     setTransforms,
@@ -78,12 +74,12 @@ export const TransformManagement: FC = () => {
 
   return (
     <Fragment>
-      <EuiPage data-test-subj="transformPageTransform">
-        <EuiPageBody>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle>
-                <h1>
+      <EuiPageBody data-test-subj="transformPageTransformList">
+        <EuiPageContent>
+          <EuiTitle size="l">
+            <EuiFlexGroup alignItems="center">
+              <EuiFlexItem grow={true}>
+                <h1 data-test-subj="transformAppTitle">
                   <FormattedMessage
                     id="xpack.transform.transformList.transformTitle"
                     defaultMessage="Transforms"
@@ -101,37 +97,45 @@ export const TransformManagement: FC = () => {
                     )}
                   />
                 </h1>
-              </EuiTitle>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup alignItems="center">
-                {/* grow={false} fixes IE11 issue with nested flex */}
-                <EuiFlexItem grow={false}>
-                  <RefreshTransformListButton onClick={refresh} isLoading={isLoading} />
-                </EuiFlexItem>
-                {/* grow={false} fixes IE11 issue with nested flex */}
-                <EuiFlexItem grow={false}>
-                  <CreateTransformButton onClick={onOpenModal} />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  href={documentationLinksService.getTransformsDocUrl()}
+                  target="_blank"
+                  iconType="help"
+                  data-test-subj="documentationLink"
+                >
+                  <FormattedMessage
+                    id="xpack.transform.transformList.transformDocsLinkText"
+                    defaultMessage="Transform docs"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiTitle size="s">
+            <EuiText color="subdued">
+              <FormattedMessage
+                id="xpack.transform.transformList.transformDescription"
+                defaultMessage="Use transforms to pivot existing Elasticsearch indices into summarized or entity-centric indices."
+              />
+            </EuiText>
+          </EuiTitle>
           <EuiPageContentBody>
             <EuiSpacer size="l" />
             <TransformStatsBar transformsList={transforms} />
             <EuiSpacer size="s" />
-            <EuiPanel>
-              <TransformList
-                errorMessage={errorMessage}
-                isInitialized={isInitialized}
-                onCreateTransform={onOpenModal}
-                transforms={transforms}
-                transformsLoading={transformsLoading}
-              />
-            </EuiPanel>
+            <TransformList
+              errorMessage={errorMessage}
+              isInitialized={isInitialized}
+              onCreateTransform={onOpenModal}
+              transforms={transforms}
+              transformsLoading={transformsLoading}
+            />
           </EuiPageContentBody>
-        </EuiPageBody>
-      </EuiPage>
+        </EuiPageContent>
+      </EuiPageBody>
       {isSearchSelectionVisible && (
         <EuiOverlayMask>
           <EuiModal onClose={onCloseModal} className="transformCreateTransformSearchDialog">
diff --git a/x-pack/legacy/plugins/transform/public/app/services/documentation/documentation_links.ts b/x-pack/legacy/plugins/transform/public/app/services/documentation/documentation_links.ts
index ea44d64600d7c..05eb15f2046a1 100644
--- a/x-pack/legacy/plugins/transform/public/app/services/documentation/documentation_links.ts
+++ b/x-pack/legacy/plugins/transform/public/app/services/documentation/documentation_links.ts
@@ -6,14 +6,14 @@
 import { TRANSFORM_DOC_PATHS } from '../../constants';
 
 class DocumentationLinksService {
-  private esPluginDocBasePath: string = '';
+  private esDocBasePath: string = '';
 
-  public init(esPluginDocBasePath: string): void {
-    this.esPluginDocBasePath = esPluginDocBasePath;
+  public init(esDocBasePath: string): void {
+    this.esDocBasePath = esDocBasePath;
   }
 
-  public getTransformPluginDocUrl() {
-    return `${this.esPluginDocBasePath}${TRANSFORM_DOC_PATHS.plugins}`;
+  public getTransformsDocUrl() {
+    return `${this.esDocBasePath}${TRANSFORM_DOC_PATHS.transforms}`;
   }
 }
 
diff --git a/x-pack/legacy/plugins/transform/public/plugin.ts b/x-pack/legacy/plugins/transform/public/plugin.ts
index 7dfb9daead574..e7cc83d16b3b9 100644
--- a/x-pack/legacy/plugins/transform/public/plugin.ts
+++ b/x-pack/legacy/plugins/transform/public/plugin.ts
@@ -54,7 +54,7 @@ export class Plugin {
     textService.init();
     breadcrumbService.init(chrome, management.constants.BREADCRUMB);
     uiMetricService.init(uiMetric.createUiStatsReporter);
-    documentationLinksService.init(documentation.esPluginDocBasePath);
+    documentationLinksService.init(documentation.esDocBasePath);
     docTitleService.init(docTitle.change);
 
     const unmountReactApp = (): void => {