[Fleet] Remove confirm enrollment & confirm incoming data steps for s…

…tandalone first integration flow (#134474) * 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 <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Jun 20, 2022 · e3aa999 · e3aa999
1 parent 41d3f8b
commit e3aa999
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 30 deletions.
diff --git a/...tions/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx b/...tions/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/..._package_policy_page/multi_page_layout/components/confirming_incoming_data_standalone.tsx b/..._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/...t/sections/agent_policy/create_package_policy_page/multi_page_layout/components/index.tsx b/...t/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/...olicy/create_package_policy_page/multi_page_layout/components/page_steps/confirm_data.tsx b/...olicy/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/...y_page/multi_page_layout/components/page_steps/install_agent/install_agent_standalone.tsx b/...y_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,20 +30,17 @@ import {
 } from '../../../../../../../../../hooks';
 import {
   InstallStandaloneAgentStep,
-  AgentEnrollmentConfirmationStep,
   ConfigureStandaloneAgentStep,
 } from '../../../../../../../../../components/agent_enrollment_flyout/steps';
 import { StandaloneInstructions } from '../../../../../../../../../components/enrollment_instructions';
 
 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,31 +111,20 @@ export const InstallElasticAgentStandalonePageStep: React.FC<InstallAgentPagePro
       fullCopyButton: true,
       onCopy: () => setCommandCopied(true),
     }),
-    AgentEnrollmentConfirmationStep({
-      selectedPolicyId: agentPolicy?.id,
-      troubleshootLink: link,
-      agentCount: enrolledAgentIds.length,
-      showLoading: true,
-    }),
   ];
 
   return (
     <>
       <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/...fleet/public/components/agent_enrollment_flyout/steps/configure_standalone_agent_step.tsx b/...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>