elastic · angorayc · Nov 12, 2024 · Nov 14, 2024 · Nov 21, 2024 · Nov 22, 2024
diff --git a/.../applications/fleet/sections/agent_policy/create_package_policy_page/hooks/navigation.tsx b/.../applications/fleet/sections/agent_policy/create_package_policy_page/hooks/navigation.tsx
@@ -28,11 +28,15 @@ interface UseCancelParams {
 }
 
 export const useCancelAddPackagePolicy = (params: UseCancelParams) => {
-  const { from, pkgkey, agentPolicyId } = params;
+  const { from, pkgkey: pkgkeyParam, agentPolicyId } = params;
   const {
     application: { navigateToApp },
   } = useStartServices();
   const routeState = useIntraAppState<CreatePackagePolicyRouteState>();
+  const pkgkey = useMemo(
+    () => pkgkeyParam || routeState?.pkgkey,
+    [pkgkeyParam, routeState?.pkgkey]
+  );
   const { getHref } = useLink();
 
   const cancelClickHandler = useCallback(

diff --git a/...leet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx b/...leet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx
@@ -15,11 +15,28 @@ import type { AddToPolicyParams, EditPackagePolicyFrom } from './types';
 import { CreatePackagePolicySinglePage } from './single_page_layout';
 import { CreatePackagePolicyMultiPage } from './multi_page_layout';
 
-export const CreatePackagePolicyPage: React.FC<{}> = () => {
+export const CreatePackagePolicyPage: React.FC<{
+  useMultiPageLayoutProp?: boolean;
+  originFrom?: EditPackagePolicyFrom;
+  propPolicyId?: string;
+  integrationName?: string;
+  setIntegrationStep?: (step: number) => void;
+  onCanceled?: () => void;
+}> = ({
+  useMultiPageLayoutProp,
+  originFrom,
+  propPolicyId,
+  integrationName,
+  setIntegrationStep,
+  onCanceled,
+}) => {
   const { search } = useLocation();
   const { params } = useRouteMatch<AddToPolicyParams>();
   const queryParams = useMemo(() => new URLSearchParams(search), [search]);
-  const useMultiPageLayout = useMemo(() => queryParams.has('useMultiPageLayout'), [queryParams]);
+  const useMultiPageLayout = useMemo(
+    () => useMultiPageLayoutProp ?? queryParams.has('useMultiPageLayout'),
+    [queryParams, useMultiPageLayoutProp]
+  );
   const queryParamsPolicyId = useMemo(
     () => queryParams.get('policyId') ?? undefined,
     [queryParams]
@@ -47,12 +64,16 @@ export const CreatePackagePolicyPage: React.FC<{}> = () => {
    * creation possible if a user has not chosen one from the packages UI.
    */
   const from: EditPackagePolicyFrom =
-    'policyId' in params || queryParamsPolicyId ? 'policy' : 'package';
+    originFrom ?? ('policyId' in params || queryParamsPolicyId ? 'policy' : 'package');
 
   const pageParams = {
     from,
     queryParamsPolicyId,
+    propPolicyId,
+    integrationName,
     prerelease,
+    setIntegrationStep,
+    onCanceled,
   };
 
   if (useMultiPageLayout) {

diff --git a/...olicy/create_package_policy_page/multi_page_layout/components/multi_page_steps_layout.tsx b/...olicy/create_package_policy_page/multi_page_layout/components/multi_page_steps_layout.tsx
@@ -64,7 +64,6 @@ export const MultiPageStepsLayout: React.FunctionComponent<MultiPageStepLayoutPr
       restrictWidth={maxWidth}
     >
       <StepComponent {...props} />
-
       {packageInfo && (
         <IntegrationBreadcrumb
           pkgTitle={integrationInfo?.title || packageInfo.title}

diff --git a/...licy_page/multi_page_layout/components/page_steps/install_agent/install_agent_managed.tsx b/...licy_page/multi_page_layout/components/page_steps/install_agent/install_agent_managed.tsx
@@ -103,6 +103,9 @@ export const InstallElasticAgentManagedPageStep: React.FC<InstallAgentPageProps>
       agentCount: enrolledAgentIds.length,
       showLoading: true,
       poll: commandCopied,
+      onClickViewAgents: () => {
+        onNext(); // Fixme: Wording does not match what it does.
+      },
     })
   );
 

diff --git a/...cy/create_package_policy_page/multi_page_layout/hooks/use_get_agent_policy_or_default.tsx b/...cy/create_package_policy_page/multi_page_layout/hooks/use_get_agent_policy_or_default.tsx
@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
+import { v4 as uuidv4 } from 'uuid';
 
 import { generateNewAgentPolicyWithDefaults } from '../../../../../../../../common/services/generate_new_agent_policy';
 

diff --git a/...ations/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/index.tsx b/...ations/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/index.tsx
@@ -18,6 +18,12 @@ import {
 
 import type { AddToPolicyParams, CreatePackagePolicyParams } from '../types';
 
+import { useIntegrationsStateContext } from '../../../../../integrations/hooks';
+
+import { CreatePackagePolicySinglePage } from '../single_page_layout';
+
+import type { AgentPolicy } from '../../../../types';
+
 import { useGetAgentPolicyOrDefault } from './hooks';
 
 import {
@@ -42,6 +48,13 @@ const addIntegrationStep = {
   component: AddIntegrationPageStep,
 };
 
+const addIntegrationSingleLayoutStep = {
+  title: i18n.translate('xpack.fleet.createFirstPackagePolicy.addIntegrationStepTitle', {
+    defaultMessage: 'Add the integration',
+  }),
+  component: CreatePackagePolicySinglePage,
+};
+
 const confirmDataStep = {
   title: i18n.translate('xpack.fleet.createFirstPackagePolicy.confirmDataStepTitle', {
     defaultMessage: 'Confirm incoming data',
@@ -53,23 +66,35 @@ const fleetManagedSteps = [installAgentStep, addIntegrationStep, confirmDataStep
 
 const standaloneSteps = [addIntegrationStep, installAgentStep, confirmDataStep];
 
+const onboardingSteps = [addIntegrationSingleLayoutStep, installAgentStep, confirmDataStep];
+
 export const CreatePackagePolicyMultiPage: CreatePackagePolicyParams = ({
   queryParamsPolicyId,
   prerelease,
+  from,
+  integrationName,
+  setIntegrationStep,
+  onCanceled,
 }) => {
   const { params } = useRouteMatch<AddToPolicyParams>();
-  const { pkgkey, policyId, integration } = params;
+  // fixme
+  const { pkgkey: pkgkeyParam, policyId, integration: integrationParam } = params;
+  const { pkgkey: pkgKeyContext } = useIntegrationsStateContext();
+  const pkgkey = pkgkeyParam || pkgKeyContext;
   const { pkgName, pkgVersion } = splitPkgKey(pkgkey);
-  const [onSplash, setOnSplash] = useState(true);
+  const [onSplash, setOnSplash] = useState(from !== 'onboarding-integration');
   const [currentStep, setCurrentStep] = useState(0);
   const [isManaged, setIsManaged] = useState(true);
   const { getHref } = useLink();
   const [enrolledAgentIds, setEnrolledAgentIds] = useState<string[]>([]);
+  const [selectedAgentPolicies, setSelectedAgentPolicies] = useState<AgentPolicy[]>();
   const toggleIsManaged = (newIsManaged: boolean) => {
     setIsManaged(newIsManaged);
     setCurrentStep(0);
   };
-  const agentPolicyId = policyId || queryParamsPolicyId;
+
+  const integration = integrationName || integrationParam;
+  const agentPolicyId = selectedAgentPolicies?.[0]?.id || policyId || queryParamsPolicyId;
   const {
     data: packageInfoData,
     error: packageInfoError,
@@ -119,13 +144,23 @@ export const CreatePackagePolicyMultiPage: CreatePackagePolicyParams = ({
     );
   }
 
-  const steps = isManaged ? fleetManagedSteps : standaloneSteps;
-  const stepsNext = () => {
+  const steps =
+    from === 'onboarding-integration'
+      ? onboardingSteps
+      : isManaged
+      ? fleetManagedSteps
+      : standaloneSteps;
+
+  const stepsNext = (props?: { selectedAgentPolicies: AgentPolicy[] }) => {
     if (currentStep === steps.length - 1) {
       return;
     }
 
     setCurrentStep(currentStep + 1);
+    setIntegrationStep(currentStep + 1);
+    if (props?.selectedAgentPolicies) {
+      setSelectedAgentPolicies(props?.selectedAgentPolicies);
+    }
   };
 
   const stepsBack = () => {
@@ -154,6 +189,7 @@ export const CreatePackagePolicyMultiPage: CreatePackagePolicyParams = ({
       setIsManaged={toggleIsManaged}
       setEnrolledAgentIds={setEnrolledAgentIds}
       enrolledAgentIds={enrolledAgentIds}
+      onCanceled={onCanceled}
     />
   );
 };
diff --git a/...tions/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx b/...tions/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx
@@ -76,6 +76,8 @@ import { generateNewAgentPolicyWithDefaults } from '../../../../../../../common/
 
 import { packageHasAtLeastOneSecret } from '../utils';
 
+import { useIntegrationsStateContext } from '../../../../../integrations/hooks';
+
 import { CreatePackagePolicySinglePageLayout, PostInstallAddAgentModal } from './components';
 import { useDevToolsRequest, useOnSubmit, useSetupTechnology } from './hooks';
 import { PostInstallCloudFormationModal } from './components/cloud_security_posture/post_install_cloud_formation_modal';
@@ -105,12 +107,17 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
   from,
   queryParamsPolicyId,
   prerelease,
+  onNext,
+  onCanceled,
 }) => {
   const {
     agents: { enabled: isFleetEnabled },
   } = useConfig();
   const hasFleetAddAgentsPrivileges = useAuthz().fleet.addAgents;
   const { params } = useRouteMatch<AddToPolicyParams>();
+  const { pkgkey: pkgKeyContext } = useIntegrationsStateContext();
+  const pkgkey = params.pkgkey || pkgKeyContext;
+
   const fleetStatus = useFleetStatus();
   const { docLinks } = useStartServices();
   const spaceSettings = useSpaceSettingsContext();
@@ -130,7 +137,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
     queryParamsPolicyId ? SelectedPolicyTab.EXISTING : SelectedPolicyTab.NEW
   );
 
-  const { pkgName, pkgVersion } = splitPkgKey(params.pkgkey);
+  const { pkgName, pkgVersion } = splitPkgKey(pkgkey);
   // Fetch package info
   const {
     data: packageInfoData,
@@ -187,6 +194,24 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
     hasFleetAddAgentsPrivileges,
   });
 
+  const handleNavigateAddAgent = useCallback(() => {
+    if (onNext) {
+      onNext({ selectedAgentPolicies: agentPolicies });
+    } else {
+      if (savedPackagePolicy) {
+        navigateAddAgent(savedPackagePolicy);
+      }
+    }
+  }, [onNext, agentPolicies, savedPackagePolicy, navigateAddAgent]);
+
+  const handleCancellation = useCallback(() => {
+    if (onCanceled) {
+      onCanceled();
+    } else {
+      navigateAddAgentHelp(savedPackagePolicy);
+    }
+  }, [onCanceled, savedPackagePolicy, navigateAddAgentHelp]);
+
   const setPolicyValidation = useCallback(
     (selectedTab: SelectedPolicyTab, updatedAgentPolicy: NewAgentPolicy) => {
       if (selectedTab === SelectedPolicyTab.NEW) {
@@ -230,7 +255,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
 
   const { cancelClickHandler, cancelUrl } = useCancelAddPackagePolicy({
     from,
-    pkgkey: params.pkgkey,
+    pkgkey,
     agentPolicyId: agentPolicyIds[0],
   });
   useEffect(() => {
@@ -504,7 +529,10 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
                 agentCount={agentCount}
                 agentPolicies={agentPolicies}
                 onConfirm={onSubmit}
-                onCancel={() => setFormState('VALID')}
+                onCancel={() => {
+                  setFormState('VALID');
+                  onCanceled?.();
+                }}
               />
             )}
             {formState === 'SUBMITTED_NO_AGENTS' &&
@@ -513,8 +541,8 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
               savedPackagePolicy && (
                 <PostInstallAddAgentModal
                   packageInfo={packageInfo}
-                  onConfirm={() => navigateAddAgent(savedPackagePolicy)}
-                  onCancel={() => navigateAddAgentHelp(savedPackagePolicy)}
+                  onConfirm={handleNavigateAddAgent}
+                  onCancel={handleCancellation}
                 />
               )}
             {formState === 'SUBMITTED_AZURE_ARM_TEMPLATE' &&
@@ -523,8 +551,8 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
                 <PostInstallAzureArmTemplateModal
                   agentPolicy={agentPolicies[0]}
                   packagePolicy={savedPackagePolicy}
-                  onConfirm={() => navigateAddAgent(savedPackagePolicy)}
-                  onCancel={() => navigateAddAgentHelp(savedPackagePolicy)}
+                  onConfirm={handleNavigateAddAgent}
+                  onCancel={handleCancellation}
                 />
               )}
             {formState === 'SUBMITTED_CLOUD_FORMATION' &&
@@ -533,8 +561,8 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
                 <PostInstallCloudFormationModal
                   agentPolicy={agentPolicies[0]}
                   packagePolicy={savedPackagePolicy}
-                  onConfirm={() => navigateAddAgent(savedPackagePolicy)}
-                  onCancel={() => navigateAddAgentHelp(savedPackagePolicy)}
+                  onConfirm={handleNavigateAddAgent}
+                  onCancel={handleCancellation}
                 />
               )}
             {formState === 'SUBMITTED_GOOGLE_CLOUD_SHELL' &&
@@ -543,8 +571,8 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
                 <PostInstallGoogleCloudShellModal
                   agentPolicy={agentPolicies[0]}
                   packagePolicy={savedPackagePolicy}
-                  onConfirm={() => navigateAddAgent(savedPackagePolicy)}
-                  onCancel={() => navigateAddAgentHelp(savedPackagePolicy)}
+                  onConfirm={handleNavigateAddAgent}
+                  onCancel={handleCancellation}
                 />
               )}
             {packageInfo && (
@@ -603,7 +631,12 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
             <StepsWithLessPadding steps={steps} />
             <EuiSpacer size="xl" />
             <EuiSpacer size="xl" />
-            <CustomEuiBottomBar data-test-subj="integrationsBottomBar">
+            {/* Only show render button bar in portal when enableRouts is false*/}
+            <CustomEuiBottomBar
+              data-test-subj="integrationsBottomBar"
+              usePortal={false}
+              position="sticky"
+            >
               <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
                 <EuiFlexItem grow={false}>
                   {packageInfo && (formState === 'INVALID' || hasAgentPolicyError) ? (

diff --git a/...fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/types.ts b/...fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/types.ts
@@ -13,7 +13,8 @@ export type EditPackagePolicyFrom =
   | 'edit'
   | 'upgrade-from-fleet-policy-list'
   | 'upgrade-from-integrations-policy-list'
-  | 'upgrade-from-extension';
+  | 'upgrade-from-extension'
+  | 'onboarding-integration';
 
 export type PackagePolicyFormState =
   | 'VALID'
@@ -35,5 +36,8 @@ export interface AddToPolicyParams {
 export type CreatePackagePolicyParams = React.FunctionComponent<{
   from: EditPackagePolicyFrom;
   queryParamsPolicyId?: string;
+  propPolicyId?: string;
+  integrationName?: string;
   prerelease: boolean;
+  onNext?: () => void;
 }>;
diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
@@ -38,7 +38,11 @@ import { INTEGRATIONS_ROUTING_PATHS, pagePathGetters } from './constants';
 import type { UIExtensionsStorage } from './types';
 
 import { EPMApp } from './sections/epm';
-import { PackageInstallProvider, UIExtensionsContext, FlyoutContextProvider } from './hooks';
+import {
+  PackageInstallProvider,
+  UIExtensionsContextProvider,
+  FlyoutContextProvider,
+} from './hooks';
 import { IntegrationsHeader } from './components/header';
 import { AgentEnrollmentFlyout } from './components';
 import { ReadOnlyContextProvider } from './hooks/use_read_only_context';
@@ -103,7 +107,7 @@ export const IntegrationsAppContext: React.FC<{
                 <EuiThemeProvider darkMode={isDarkMode}>
                   <QueryClientProvider client={queryClient}>
                     <ReactQueryDevtools initialIsOpen={false} />
-                    <UIExtensionsContext.Provider value={extensions}>
+                    <UIExtensionsContextProvider values={extensions}>
                       <FleetStatusProvider defaultFleetStatus={fleetStatus}>
                         <SpaceSettingsContextProvider>
                           <startServices.customIntegrations.ContextProvider>
@@ -126,7 +130,7 @@ export const IntegrationsAppContext: React.FC<{
                           </startServices.customIntegrations.ContextProvider>
                         </SpaceSettingsContextProvider>
                       </FleetStatusProvider>
-                    </UIExtensionsContext.Provider>
+                    </UIExtensionsContextProvider>
                   </QueryClientProvider>
                 </EuiThemeProvider>
               </KibanaVersionContext.Provider>