From b7e3a4435ea5fe69a6c2c1554309e9e936b02921 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 20 Jun 2022 07:49:12 -0400
Subject: [PATCH] [Fleet] Remove confirm enrollment & confirm incoming data
 steps for standalone first integration flow  (#134474) (#134733)

* remove data and agent confirmation steps from standalone flow

* bonus: downloading policy should set step as complete

* Bring confirm incoming data step for standalone agent

Co-authored-by: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit e3aa999f216e687d12f5f567ceebaf0c9018a3de)

Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>
---
 .../components/bottom_bar.tsx                 | 34 +++++++++++++
 .../confirming_incoming_data_standalone.tsx   | 50 +++++++++++++++++++
 .../multi_page_layout/components/index.tsx    |  1 +
 .../components/page_steps/confirm_data.tsx    | 29 +++++++----
 .../install_agent_standalone.tsx              | 26 +++-------
 .../steps/configure_standalone_agent_step.tsx | 10 +++-
 6 files changed, 120 insertions(+), 30 deletions(-)
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/confirming_incoming_data_standalone.tsx

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx
index 87a7d8b687980e..228a89fa4e4954 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx
@@ -84,6 +84,40 @@ export const CreatePackagePolicyBottomBar: React.FC<{
   );
 };
 
+export const AgentStandaloneBottomBar: React.FC<{
+  cancelClickHandler: React.ReactEventHandler;
+  cancelUrl?: string;
+  onNext: () => void;
+  noAnimation?: boolean;
+}> = ({ onNext, cancelClickHandler, cancelUrl, noAnimation = false }) => {
+  const Bar = noAnimation ? NoAnimationCenteredRoundedBottomBar : CenteredRoundedBottomBar;
+  return (
+    <Bar>
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false}>
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiButtonEmpty color="ghost" size="s" href={cancelUrl} onClick={cancelClickHandler}>
+              <FormattedMessage
+                id="xpack.fleet.agentStandaloneBottomBar.backButton"
+                defaultMessage="Go back"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton color="primary" fill size="m" onClick={onNext}>
+            <FormattedMessage
+              id="xpack.fleet.agentStandaloneBottomBar.viewIncomingDataBtn"
+              defaultMessage="View incoming data"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </Bar>
+  );
+};
+
 export const CreatePackagePolicyFinalBottomBar: React.FC<{
   pkgkey: string;
 }> = ({ pkgkey }) => {
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/confirming_incoming_data_standalone.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/confirming_incoming_data_standalone.tsx
new file mode 100644
index 00000000000000..5ad7be6fce71ac
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/confirming_incoming_data_standalone.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCallOut, EuiText, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface Props {
+  troubleshootLink: string;
+}
+
+export const ConfirmIncomingDataStandalone: React.FunctionComponent<Props> = ({
+  troubleshootLink,
+}) => {
+  return (
+    <>
+      <EuiText>
+        <EuiCallOut
+          size="m"
+          color="primary"
+          title={
+            <FormattedMessage
+              id="xpack.fleet.confirmIncomingDataStandalone.title"
+              defaultMessage="Data preview is not available for standalone agents. "
+            />
+          }
+        >
+          <FormattedMessage
+            id="xpack.fleet.confirmIncomingDataStandalone.description"
+            defaultMessage="You can check for agent data in the integration asset tab. If you're having trouble seeing data, check out the {link}."
+            values={{
+              link: (
+                <EuiLink target="_blank" external href={troubleshootLink}>
+                  <FormattedMessage
+                    id="xpack.fleet.confirmIncomingDataStandalone.troubleshootingLink"
+                    defaultMessage="troubleshooting guide"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiCallOut>
+      </EuiText>
+    </>
+  );
+};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/index.tsx
index 5ef1c7d9d4182d..dd13accda1a37a 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/index.tsx
@@ -12,3 +12,4 @@ export * from './horizontal_page_steps';
 export * from './page_steps';
 export * from './standalone_mode_warning_callout';
 export * from './confirm_incoming_data_with_preview';
+export * from './confirming_incoming_data_standalone';
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/confirm_data.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/confirm_data.tsx
index ce40b87e4e5126..e9231758c1fe33 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/confirm_data.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/confirm_data.tsx
@@ -12,17 +12,35 @@ import { useStartServices } from '../../../../../../hooks';
 
 import {
   ConfirmIncomingDataWithPreview,
+  ConfirmIncomingDataStandalone,
   CreatePackagePolicyFinalBottomBar,
   NotObscuredByBottomBar,
 } from '..';
 
 export const ConfirmDataPageStep: React.FC<MultiPageStepLayoutProps> = (props) => {
-  const { enrolledAgentIds, packageInfo } = props;
+  const { enrolledAgentIds, packageInfo, isManaged } = props;
   const core = useStartServices();
 
   const [agentDataConfirmed, setAgentDataConfirmed] = useState(false);
   const { docLinks } = core;
   const troubleshootLink = docLinks.links.fleet.troubleshooting;
+
+  const bottomBar = (
+    <>
+      <NotObscuredByBottomBar />
+      <CreatePackagePolicyFinalBottomBar pkgkey={`${packageInfo.name}-${packageInfo.version}`} />
+    </>
+  );
+
+  if (!isManaged) {
+    return (
+      <>
+        <ConfirmIncomingDataStandalone troubleshootLink={troubleshootLink} />
+        {bottomBar}
+      </>
+    );
+  }
+
   return (
     <>
       <ConfirmIncomingDataWithPreview
@@ -33,14 +51,7 @@ export const ConfirmDataPageStep: React.FC<MultiPageStepLayoutProps> = (props) =
         troubleshootLink={troubleshootLink}
       />
 
-      {!!agentDataConfirmed && (
-        <>
-          <NotObscuredByBottomBar />
-          <CreatePackagePolicyFinalBottomBar
-            pkgkey={`${packageInfo.name}-${packageInfo.version}`}
-          />
-        </>
-      )}
+      {!!agentDataConfirmed && bottomBar}
     </>
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/install_agent/install_agent_standalone.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/install_agent/install_agent_standalone.tsx
index 2f2fd066652321..3f84a95239beb2 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/install_agent/install_agent_standalone.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/install_agent/install_agent_standalone.tsx
@@ -13,7 +13,7 @@ import { safeDump } from 'js-yaml';
 import type { FullAgentPolicy } from '../../../../../../../../../../common/types/models/agent_policy';
 
 import {
-  CreatePackagePolicyBottomBar,
+  AgentStandaloneBottomBar,
   StandaloneModeWarningCallout,
   NotObscuredByBottomBar,
 } from '../..';
@@ -30,7 +30,6 @@ import {
 } from '../../../../../../../../../hooks';
 import {
   InstallStandaloneAgentStep,
-  AgentEnrollmentConfirmationStep,
   ConfigureStandaloneAgentStep,
 } from '../../../../../../../../../components/agent_enrollment_flyout/steps';
 import { StandaloneInstructions } from '../../../../../../../../../components/enrollment_instructions';
@@ -38,12 +37,10 @@ import { StandaloneInstructions } from '../../../../../../../../../components/en
 import type { InstallAgentPageProps } from './types';
 
 export const InstallElasticAgentStandalonePageStep: React.FC<InstallAgentPageProps> = (props) => {
-  const { onBack, onNext, setIsManaged, agentPolicy, enrolledAgentIds } = props;
+  const { setIsManaged, agentPolicy, cancelUrl, onNext, cancelClickHandler } = props;
   const core = useStartServices();
   const kibanaVersion = useKibanaVersion();
-  const { docLinks } = core;
   const [yaml, setYaml] = useState<any | undefined>('');
-  const link = docLinks.links.fleet.troubleshooting;
   const [commandCopied, setCommandCopied] = useState(false);
   const [policyCopied, setPolicyCopied] = useState(false);
   const [fullAgentPolicy, setFullAgentPolicy] = useState<FullAgentPolicy | undefined>();
@@ -114,12 +111,6 @@ export const InstallElasticAgentStandalonePageStep: React.FC<InstallAgentPagePro
       fullCopyButton: true,
       onCopy: () => setCommandCopied(true),
     }),
-    AgentEnrollmentConfirmationStep({
-      selectedPolicyId: agentPolicy?.id,
-      troubleshootLink: link,
-      agentCount: enrolledAgentIds.length,
-      showLoading: true,
-    }),
   ];
 
   return (
@@ -127,18 +118,13 @@ export const InstallElasticAgentStandalonePageStep: React.FC<InstallAgentPagePro
       <StandaloneModeWarningCallout setIsManaged={setIsManaged} />
       <EuiSpacer size="xl" />
       <EuiSteps steps={steps} />
-      {!!enrolledAgentIds.length && (
+      {commandCopied && (
         <>
           <NotObscuredByBottomBar />
-          <CreatePackagePolicyBottomBar
-            cancelClickHandler={onBack}
+          <AgentStandaloneBottomBar
+            cancelUrl={cancelUrl}
             onNext={onNext}
-            actionMessage={
-              <FormattedMessage
-                id="xpack.fleet.createFirstPackagePolicy.confirmIncomingDataButton"
-                defaultMessage="Confirm incoming data"
-              />
-            }
+            cancelClickHandler={cancelClickHandler}
           />
         </>
       )}
diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps/configure_standalone_agent_step.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps/configure_standalone_agent_step.tsx
index decee6601329aa..35df59b3bdf19d 100644
--- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps/configure_standalone_agent_step.tsx
+++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps/configure_standalone_agent_step.tsx
@@ -103,7 +103,15 @@ export const ConfigureStandaloneAgentStep = ({
                 </EuiCopy>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton iconType="download" href={downloadLink} isDisabled={!downloadLink}>
+                {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+                <EuiButton
+                  iconType="download"
+                  href={downloadLink}
+                  onClick={() => {
+                    if (onCopy) onCopy();
+                  }}
+                  isDisabled={!downloadLink}
+                >
                   <>{downloadMsg}</>
                 </EuiButton>
               </EuiFlexItem>