[Fleet] Adjust add integration flow (elastic#101714)

* Initial commit, very WIP

- added link to the integrations UI instead of add integration
  in fleet
- added a new piece of route state that gets passed to integration
  from fleet when browsing integrations for a policy
- when the integration is being added the page will send the user
  back to the policy overview instead of back to integrations UI

* remove unnecessary agent policy clear function

* added # to path so that navigation is correctly handled

* added logic to read the forward agent policy id

* remove inline select integration package from fleet add integration

* updated toast notification

* using query parameter to pass policy id back to create policy package page

* removed policyId from route path

* fix type issue

* updated the select agent field layout per the designs

* simpified item rendering in combobox and fixed combobox z-index issue

* added comment

* fix types and i18n

* updated icon and removed unused i18n

* refactor to using styled components for cusomt z-index styling

* attempt to fix integration test

* added scroll functionality for dealing with fixed footers that might be obstructing content

* fix scroll direction!

* attempting another scroll algorithm

Co-authored-by: Kibana Machine <[email protected]>

test/functional/services/lib/web_element_wrapper/scroll_into_view_if_necessary.js

@@ -27,7 +27,7 @@
  * SOFTWARE.
  */
 
-export function scrollIntoViewIfNecessary(target, fixedHeaderHeight) {
+export function scrollIntoViewIfNecessary(target, fixedHeaderHeight, fixedFooterHeight) {
   var rootScroller = document.scrollingElement || document.documentElement;
   if (!rootScroller) {
     throw new Error('Unable to find document.scrollingElement or document.documentElement');
@@ -63,4 +63,11 @@ export function scrollIntoViewIfNecessary(target, fixedHeaderHeight) {
   if (additionalScrollNecessary > 0) {
     rootScroller.scrollTop = rootScroller.scrollTop - additionalScrollNecessary;
   }
+
+  if (fixedFooterHeight) {
+    var bottomOfVisibility = viewportHeight - fixedFooterHeight;
+    if (bottomOfVisibility < boundingRect.bottom) {
+      rootScroller.scrollTop = rootScroller.scrollTop + fixedFooterHeight;
+    }
+  }
 }

test/functional/services/lib/web_element_wrapper/web_element_wrapper.ts

@@ -692,11 +692,22 @@ export class WebElementWrapper {
    * @nonstandard
    * @return {Promise<void>}
    */
-  public async scrollIntoViewIfNecessary(topOffset?: number): Promise<void> {
+  public async scrollIntoViewIfNecessary(
+    topOffsetOrOptions?: number | { topOffset?: number; bottomOffset?: number }
+  ): Promise<void> {
+    let topOffset: undefined | number;
+    let bottomOffset: undefined | number;
+    if (typeof topOffsetOrOptions === 'number') {
+      topOffset = topOffsetOrOptions;
+    } else {
+      topOffset = topOffsetOrOptions?.topOffset;
+      bottomOffset = topOffsetOrOptions?.bottomOffset;
+    }
     await this.driver.executeScript(
       scrollIntoViewIfNecessary,
       this._webElement,
-      topOffset || this.fixedHeaderHeight
+      topOffset || this.fixedHeaderHeight,
+      bottomOffset
     );
   }
 

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx

@@ -7,7 +7,7 @@
 
 import type { ReactEventHandler } from 'react';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useRouteMatch, useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -49,7 +49,6 @@ import { CreatePackagePolicyPageLayout } from './components';
 import type { CreatePackagePolicyFrom, PackagePolicyFormState } from './types';
 import type { PackagePolicyValidationResults } from './services';
 import { validatePackagePolicy, validationHasErrors } from './services';
-import { StepSelectPackage } from './step_select_package';
 import { StepSelectAgentPolicy } from './step_select_agent_policy';
 import { StepConfigurePackagePolicy } from './step_configure_package';
 import { StepDefinePackagePolicy } from './step_define_package_policy';
@@ -60,9 +59,15 @@ const StepsWithLessPadding = styled(EuiSteps)`
   }
 `;
 
+const CustomEuiBottomBar = styled(EuiBottomBar)`
+  // Set a relatively _low_ z-index value here to account for EuiComboBox popover that might appear under the bottom bar
+  z-index: 50;
+`;
+
 interface AddToPolicyParams {
   pkgkey: string;
   integration?: string;
+  policyId?: string;
 }
 
 interface AddFromPolicyParams {
@@ -81,10 +86,14 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
   const routeState = useIntraAppState<CreatePackagePolicyRouteState>();
   const from: CreatePackagePolicyFrom = 'policyId' in params ? 'policy' : 'package';
 
+  const { search } = useLocation();
+  const queryParams = useMemo(() => new URLSearchParams(search), [search]);
+  const policyId = useMemo(() => queryParams.get('policyId') ?? undefined, [queryParams]);
+
   // Agent policy and package info states
-  const [agentPolicy, setAgentPolicy] = useState<AgentPolicy>();
+  const [agentPolicy, setAgentPolicy] = useState<AgentPolicy | undefined>();
   const [packageInfo, setPackageInfo] = useState<PackageInfo>();
-  const [isLoadingSecondStep, setIsLoadingSecondStep] = useState<boolean>(false);
+  const [isLoadingAgentPolicyStep, setIsLoadingAgentPolicyStep] = useState<boolean>(false);
 
   // Retrieve agent count
   const agentPolicyId = agentPolicy?.id;
@@ -286,6 +295,13 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
                   agentPolicyName: agentPolicy.name,
                 },
               })
+            : (params as AddToPolicyParams)?.policyId && agentPolicy && agentCount === 0
+            ? i18n.translate('xpack.fleet.createPackagePolicy.addAgentNextNotification', {
+                defaultMessage: `The policy has been updated. Add an agent to the '{agentPolicyName}' policy to deploy this policy.`,
+                values: {
+                  agentPolicyName: agentPolicy.name,
+                },
+              })
             : undefined,
         'data-test-subj': 'packagePolicyCreateSuccessToast',
       });
@@ -337,32 +353,20 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
       <StepSelectAgentPolicy
         pkgkey={(params as AddToPolicyParams).pkgkey}
         updatePackageInfo={updatePackageInfo}
+        defaultAgentPolicyId={policyId}
         agentPolicy={agentPolicy}
         updateAgentPolicy={updateAgentPolicy}
-        setIsLoadingSecondStep={setIsLoadingSecondStep}
+        setIsLoadingSecondStep={setIsLoadingAgentPolicyStep}
       />
     ),
-    [params, updatePackageInfo, agentPolicy, updateAgentPolicy]
+    [params, updatePackageInfo, agentPolicy, updateAgentPolicy, policyId]
   );
 
   const ExtensionView = useUIExtension(packagePolicy.package?.name ?? '', 'package-policy-create');
 
-  const stepSelectPackage = useMemo(
-    () => (
-      <StepSelectPackage
-        agentPolicyId={(params as AddFromPolicyParams).policyId}
-        updateAgentPolicy={updateAgentPolicy}
-        packageInfo={packageInfo}
-        updatePackageInfo={updatePackageInfo}
-        setIsLoadingSecondStep={setIsLoadingSecondStep}
-      />
-    ),
-    [params, updateAgentPolicy, packageInfo, updatePackageInfo]
-  );
-
   const stepConfigurePackagePolicy = useMemo(
     () =>
-      isLoadingSecondStep ? (
+      isLoadingAgentPolicyStep ? (
         <Loading />
       ) : agentPolicy && packageInfo ? (
         <>
@@ -399,7 +403,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
         <div />
       ),
     [
-      isLoadingSecondStep,
+      isLoadingAgentPolicyStep,
       agentPolicy,
       packageInfo,
       packagePolicy,
@@ -413,27 +417,20 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
   );
 
   const steps: EuiStepProps[] = [
-    from === 'package'
-      ? {
-          title: i18n.translate('xpack.fleet.createPackagePolicy.stepSelectAgentPolicyTitle', {
-            defaultMessage: 'Select an agent policy',
-          }),
-          children: stepSelectAgentPolicy,
-        }
-      : {
-          title: i18n.translate('xpack.fleet.createPackagePolicy.stepSelectPackageTitle', {
-            defaultMessage: 'Select an integration',
-          }),
-          children: stepSelectPackage,
-        },
     {
       title: i18n.translate('xpack.fleet.createPackagePolicy.stepConfigurePackagePolicyTitle', {
         defaultMessage: 'Configure integration',
       }),
-      status: !packageInfo || !agentPolicy || isLoadingSecondStep ? 'disabled' : undefined,
+      status: !packageInfo || !agentPolicy || isLoadingAgentPolicyStep ? 'disabled' : undefined,
       'data-test-subj': 'dataCollectionSetupStep',
       children: stepConfigurePackagePolicy,
     },
+    {
+      title: i18n.translate('xpack.fleet.createPackagePolicy.stepSelectAgentPolicyTitle', {
+        defaultMessage: 'Apply to agent policy',
+      }),
+      children: stepSelectAgentPolicy,
+    },
   ];
 
   return (
@@ -459,10 +456,10 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
           )}
       <StepsWithLessPadding steps={steps} />
       <EuiSpacer size="l" />
-      <EuiBottomBar>
+      <CustomEuiBottomBar data-test-subj="integrationsBottomBar">
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem grow={false}>
-            {!isLoadingSecondStep && agentPolicy && packageInfo && formState === 'INVALID' ? (
+            {!isLoadingAgentPolicyStep && agentPolicy && packageInfo && formState === 'INVALID' ? (
               <FormattedMessage
                 id="xpack.fleet.createPackagePolicy.errorOnSaveText"
                 defaultMessage="Your integration policy has errors. Please fix them before saving."
@@ -504,7 +501,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiBottomBar>
+      </CustomEuiBottomBar>
     </CreatePackagePolicyPageLayout>
   );
 };