[Ingest] Update Create datasource UI to fit in one page

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/confirm_modal.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AgentConfig } from '../../../../types';
+
+export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
+  onConfirm: () => void;
+  onCancel: () => void;
+  agentCount: number;
+  agentConfig: AgentConfig;
+}> = ({ onConfirm, onCancel, agentCount, agentConfig }) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        maxWidth="566px"
+        title={
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.confirmModalTitle"
+            defaultMessage="Save and deploy changes"
+          />
+        }
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel"
+            defaultMessage="Cancel"
+          />
+        }
+        confirmButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.confirmModalConfirmButtonLabel"
+            defaultMessage="Save and deploy changes"
+          />
+        }
+        buttonColor="primary"
+      >
+        <EuiCallOut
+          iconType="iInCircle"
+          title={i18n.translate('xpack.ingestManager.createDatasource.confirmModalCalloutTitle', {
+            defaultMessage: 'This action will update {agentCount} agents',
+            values: {
+              agentCount,
+            },
+          })}
+        >
+          <FormattedMessage
+            id="xpack.ingestManager.createDatasource.confirmModalCalloutDescription"
+            defaultMessage="Fleet has detected that the selected agent configuration, {configName}, is already in use by
+            some of your agents. As a result of this action, Fleet will deploy updates to all agents
+            that use this configuration."
+            values={{
+              configName: <b>{agentConfig.name}</b>,
+            }}
+          />
+        </EuiCallOut>
+        <EuiSpacer size="l" />
+        <FormattedMessage
+          id="xpack.ingestManager.createDatasource.confirmModalDescription"
+          defaultMessage="This action can not be undone. Are you sure you wish to continue?"
+        />
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/index.ts

@@ -5,3 +5,4 @@
  */
 export { CreateDatasourcePageLayout } from './layout';
 export { DatasourceInputPanel } from './datasource_input_panel';
+export { ConfirmCreateDatasourceModal } from './confirm_modal';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx

@@ -19,35 +19,21 @@ import { WithHeaderLayout } from '../../../../layouts';
 import { AgentConfig, PackageInfo } from '../../../../types';
 import { PackageIcon } from '../../../../components/package_icon';
 import { CreateDatasourceFrom, CreateDatasourceStep } from '../types';
-import { CreateDatasourceStepsNavigation } from './navigation';
 
 export const CreateDatasourcePageLayout: React.FunctionComponent<{
   from: CreateDatasourceFrom;
   basePath: string;
   cancelUrl: string;
   maxStep: CreateDatasourceStep | '';
-  currentStep: CreateDatasourceStep;
   agentConfig?: AgentConfig;
   packageInfo?: PackageInfo;
-  restrictWidth?: number;
-}> = ({
-  from,
-  basePath,
-  cancelUrl,
-  maxStep,
-  currentStep,
-  agentConfig,
-  packageInfo,
-  restrictWidth,
-  children,
-}) => {
+}> = ({ from, basePath, cancelUrl, maxStep, agentConfig, packageInfo, children }) => {
   return (
     <WithHeaderLayout
-      restrictWidth={restrictWidth}
       leftColumn={
         <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
           <EuiFlexItem>
-            <EuiButtonEmpty size="s" iconType="cross" flush="left" href={cancelUrl}>
+            <EuiButtonEmpty size="s" iconType="arrowLeft" flush="left" href={cancelUrl}>
               <FormattedMessage
                 id="xpack.ingestManager.createDatasource.cancelLinkText"
                 defaultMessage="Cancel"
@@ -59,15 +45,15 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
               <h1>
                 <FormattedMessage
                   id="xpack.ingestManager.createDatasource.pageTitle"
-                  defaultMessage="Create data source"
+                  defaultMessage="New data source"
                 />
               </h1>
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiSpacer size="s" />
             <EuiFlexGroup direction={from === 'config' ? 'row' : 'rowReverse'} gutterSize="xl">
-              {agentConfig || from === 'config' ? (
+              {agentConfig && from === 'config' ? (
                 <EuiFlexItem grow={false}>
                   <EuiDescriptionList textStyle="reverse">
                     <EuiDescriptionListTitle>
@@ -82,7 +68,7 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
                   </EuiDescriptionList>
                 </EuiFlexItem>
               ) : null}
-              {packageInfo || from === 'package' ? (
+              {packageInfo && from === 'package' ? (
                 <EuiFlexItem grow={false}>
                   <EuiDescriptionList textStyle="reverse">
                     <EuiDescriptionListTitle>
@@ -113,16 +99,10 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
           </EuiFlexItem>
         </EuiFlexGroup>
       }
-      rightColumn={
-        <CreateDatasourceStepsNavigation
-          from={from}
-          basePath={basePath}
-          maxStep={maxStep}
-          currentStep={currentStep}
-        />
-      }
     >
-      {children}
+      <EuiFlexGroup style={{ maxWidth: 833 }}>
+        <EuiFlexItem>{children}</EuiFlexItem>
+      </EuiFlexGroup>
     </WithHeaderLayout>
   );
 };

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/constants.ts

@@ -9,10 +9,3 @@ export const WeightedCreateDatasourceSteps = [
   'configure',
   'review',
 ];
-
-export const CREATE_DATASOURCE_STEP_PATHS = {
-  selectConfig: '/select-config',
-  selectPackage: '/select-package',
-  configure: '/configure',
-  review: '/review',
-};