From 5a16fdea61f1e9c77d44bc4caff7fafdd815329b Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Thu, 9 Apr 2020 17:13:38 -0400
Subject: [PATCH] Fix after review part 2

---
 .../ingest_manager/components/header.tsx      |  23 ++-
 .../components/layout.tsx                     | 146 ++++++++++--------
 2 files changed, 95 insertions(+), 74 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx
index d37f34a3ea52c..1aab6d901a992 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx
@@ -7,6 +7,7 @@ import React, { memo } from 'react';
 import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiTabs, EuiTab, EuiSpacer } from '@elastic/eui';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
+import { EuiFlexItemProps } from '@elastic/eui/src/components/flex/flex_item';
 
 const Container = styled.div`
   border-bottom: ${props => props.theme.eui.euiBorderThin};
@@ -33,25 +34,33 @@ export interface HeaderProps {
   restrictHeaderWidth?: number;
   leftColumn?: JSX.Element;
   rightColumn?: JSX.Element;
+  rightColumnGrow?: EuiFlexItemProps['grow'];
   tabs?: EuiTabProps[];
 }
 
-const HeaderColumns: React.FC<Omit<HeaderProps, 'tabs'>> = memo(({ leftColumn, rightColumn }) => (
-  <EuiFlexGroup alignItems="center">
-    {leftColumn ? <EuiFlexItem>{leftColumn}</EuiFlexItem> : null}
-    {rightColumn ? <EuiFlexItem>{rightColumn}</EuiFlexItem> : null}
-  </EuiFlexGroup>
-));
+const HeaderColumns: React.FC<Omit<HeaderProps, 'tabs'>> = memo(
+  ({ leftColumn, rightColumn, rightColumnGrow }) => (
+    <EuiFlexGroup alignItems="center">
+      {leftColumn ? <EuiFlexItem>{leftColumn}</EuiFlexItem> : null}
+      {rightColumn ? <EuiFlexItem grow={rightColumnGrow}>{rightColumn}</EuiFlexItem> : null}
+    </EuiFlexGroup>
+  )
+);
 
 export const Header: React.FC<HeaderProps> = ({
   leftColumn,
   rightColumn,
+  rightColumnGrow,
   tabs,
   restrictHeaderWidth,
 }) => (
   <Container>
     <Wrapper maxWidth={restrictHeaderWidth}>
-      <HeaderColumns leftColumn={leftColumn} rightColumn={rightColumn} />
+      <HeaderColumns
+        leftColumn={leftColumn}
+        rightColumn={rightColumn}
+        rightColumnGrow={rightColumnGrow}
+      />
       <EuiFlexGroup>
         {tabs ? (
           <EuiFlexItem>
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
index e5ac1df2a4a6e..2c23d3bf9f358 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
@@ -28,79 +28,91 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
   agentConfig?: AgentConfig;
   packageInfo?: PackageInfo;
 }> = ({ from, basePath, cancelUrl, maxStep, agentConfig, packageInfo, children }) => {
-  return (
-    <WithHeaderLayout
-      restrictHeaderWidth={833}
-      restrictWidth={833}
-      leftColumn={
-        <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
-          <EuiFlexItem>
-            <EuiButtonEmpty size="s" iconType="arrowLeft" flush="left" href={cancelUrl}>
+  const leftColumn = (
+    <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
+      <EuiFlexItem>
+        <EuiButtonEmpty size="s" iconType="arrowLeft" flush="left" href={cancelUrl}>
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.cancelLinkText"
+            defaultMessage="Cancel"
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText>
+          <h1>
+            <FormattedMessage
+              id="xpack.ingestManager.createDatasource.pageTitle"
+              defaultMessage="Add data source"
+            />
+          </h1>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiSpacer size="s" />
+        <EuiText color="subdued" size="s">
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.pageDescription"
+            defaultMessage="Follow the instructions below to add a data source to the selected agent configuration."
+          />
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+  const rightColumn = (
+    <EuiFlexGroup justifyContent="flexEnd" direction={'row'} gutterSize="xl">
+      <EuiFlexItem grow={false}>
+        <EuiSpacer size="s" />
+        {agentConfig && from === 'config' ? (
+          <EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
+            <EuiDescriptionListTitle>
+              <FormattedMessage
+                id="xpack.ingestManager.createDatasource.agentConfigurationNameLabel"
+                defaultMessage="Configuration"
+              />
+            </EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              {agentConfig?.name || '-'}
+            </EuiDescriptionListDescription>
+          </EuiDescriptionList>
+        ) : null}
+        {packageInfo && from === 'package' ? (
+          <EuiDescriptionList style={{ textAlign: 'right' }} textStyle="reverse">
+            <EuiDescriptionListTitle>
               <FormattedMessage
-                id="xpack.ingestManager.createDatasource.cancelLinkText"
-                defaultMessage="Cancel"
+                id="xpack.ingestManager.createDatasource.packageNameLabel"
+                defaultMessage="Integration"
               />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText>
-              <h1>
-                <FormattedMessage
-                  id="xpack.ingestManager.createDatasource.pageTitle"
-                  defaultMessage="Add data source"
-                />
-              </h1>
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup direction={from === 'config' ? 'row' : 'rowReverse'} gutterSize="xl">
-              {agentConfig && from === 'config' ? (
+            </EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              <EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="s">
                 <EuiFlexItem grow={false}>
-                  <EuiDescriptionList textStyle="reverse">
-                    <EuiDescriptionListTitle>
-                      <FormattedMessage
-                        id="xpack.ingestManager.createDatasource.agentConfigurationNameLabel"
-                        defaultMessage="Configuration"
-                      />
-                    </EuiDescriptionListTitle>
-                    <EuiDescriptionListDescription>
-                      {agentConfig?.name || '-'}
-                    </EuiDescriptionListDescription>
-                  </EuiDescriptionList>
+                  <PackageIcon
+                    packageName={packageInfo?.name || ''}
+                    version={packageInfo?.version || ''}
+                    icons={packageInfo?.icons}
+                    size="m"
+                  />
                 </EuiFlexItem>
-              ) : null}
-              {packageInfo && from === 'package' ? (
                 <EuiFlexItem grow={false}>
-                  <EuiDescriptionList textStyle="reverse">
-                    <EuiDescriptionListTitle>
-                      <FormattedMessage
-                        id="xpack.ingestManager.createDatasource.packageNameLabel"
-                        defaultMessage="Integration"
-                      />
-                    </EuiDescriptionListTitle>
-                    <EuiDescriptionListDescription>
-                      <EuiFlexGroup alignItems="center" gutterSize="s">
-                        <EuiFlexItem grow={false}>
-                          <PackageIcon
-                            packageName={packageInfo?.name || ''}
-                            version={packageInfo?.version || ''}
-                            icons={packageInfo?.icons}
-                            size="m"
-                          />
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          {packageInfo?.title || packageInfo?.name || '-'}
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </EuiDescriptionListDescription>
-                  </EuiDescriptionList>
+                  {packageInfo?.title || packageInfo?.name || '-'}
                 </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      }
+              </EuiFlexGroup>
+            </EuiDescriptionListDescription>
+          </EuiDescriptionList>
+        ) : null}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const maxWidth = 770;
+  return (
+    <WithHeaderLayout
+      restrictHeaderWidth={maxWidth}
+      restrictWidth={maxWidth}
+      leftColumn={leftColumn}
+      rightColumn={rightColumn}
+      rightColumnGrow={false}
     >
       {children}
     </WithHeaderLayout>