[Fleet] added modal to manage auto upgrade agents (elastic#206955)

Related to elastic/ingest-dev#4721

Added Agent policy action `Manage auto-upgrade agents` to edit
`required_versions` config of agent policy on the UI.
Also added it to the Agent policy details header to open the modal.

To test:
- enable FF in `kibana.dev.yml`
  - `xpack.fleet.enableExperimental: ['enableAutomaticAgentUpgrades']`
- navigate to an Agent policy, click Actions and click `Manage
auto-upgrade agents`

<img width="1197" alt="image"
src="https://github.com/user-attachments/assets/de1afa92-c155-4072-8ed6-7e8263480199"
/>

Added validation on the UI (same as in the API) to prevent duplicate
versions, more than 100 percentages, empty percentage.
Added a callout to show how many agents are impacted by the update.

<img width="1044" alt="image"
src="https://github.com/user-attachments/assets/c889da73-ac8f-4c74-9bc5-113cb5b902c8"
/>

<img width="825" alt="image"
src="https://github.com/user-attachments/assets/cd9d797d-4343-44e8-bf29-b8683d5f83d4"
/>

Added `Auto-upgrade agents` with a `Manage` link to Agent policy details
header

<img width="1029" alt="image"
src="https://github.com/user-attachments/assets/733a21e6-4c78-4e83-b2cf-00a757921410"
/>

Moved the percentage helptext to a tooltip:

<img width="794" alt="image"
src="https://github.com/user-attachments/assets/3e133a50-e2aa-4de3-a49d-f312648fdc21"
/>

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

Author: juliaElastic

x-pack/platform/plugins/shared/fleet/common/services/agent_utils.ts

@@ -4,6 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import semverValid from 'semver/functions/valid';
+
+import type { AgentTargetVersion } from '../types';
 
 export function removeSOAttributes(kuery: string): string {
   return kuery.replace(/attributes\./g, '').replace(/fleet-agents\./g, '');
@@ -20,3 +23,25 @@ export function getSortConfig(
     : [];
   return [{ [sortField]: { order: sortOrder } }, ...secondarySort];
 }
+
+export function checkTargetVersionsValidity(
+  requiredVersions: AgentTargetVersion[]
+): string | undefined {
+  const versions = requiredVersions.map((v) => v.version);
+  const uniqueVersions = new Set(versions);
+  if (versions.length !== uniqueVersions.size) {
+    return `duplicate versions not allowed`;
+  }
+  if (requiredVersions.some((item) => !item.percentage)) {
+    return `percentage is required`;
+  }
+  for (const version of versions) {
+    if (!semverValid(version)) {
+      return `invalid semver version ${version}`;
+    }
+  }
+  const sumOfPercentages = requiredVersions.reduce((acc, v) => acc + v.percentage, 0);
+  if (sumOfPercentages > 100) {
+    return `sum of percentages cannot exceed 100`;
+  }
+}

x-pack/platform/plugins/shared/fleet/common/services/index.ts

@@ -92,4 +92,4 @@ export {
   isAgentVersionLessThanFleetServer,
 } from './check_fleet_server_versions';
 
-export { removeSOAttributes, getSortConfig } from './agent_utils';
+export { removeSOAttributes, getSortConfig, checkTargetVersionsValidity } from './agent_utils';

x-pack/platform/plugins/shared/fleet/cypress/e2e/agent_policy.cy.ts

@@ -7,6 +7,7 @@
 import { setupFleetServer } from '../tasks/fleet_server';
 import { AGENT_FLYOUT, AGENT_POLICY_DETAILS_PAGE } from '../screens/fleet';
 import { login } from '../tasks/login';
+import { visit } from '../tasks/common';
 
 describe('Edit agent policy', () => {
   beforeEach(() => {
@@ -37,7 +38,7 @@ describe('Edit agent policy', () => {
   });
 
   it('should edit agent policy', () => {
-    cy.visit('/app/fleet/policies/policy-1/settings');
+    visit('/app/fleet/policies/policy-1/settings');
     cy.get('[placeholder="Optional description"').clear().type('desc');
 
     cy.intercept('/api/fleet/agent_policies/policy-1', {
@@ -135,7 +136,7 @@ describe('Edit agent policy', () => {
       },
     });
 
-    cy.visit('/app/fleet/policies/policy-1');
+    visit('/app/fleet/policies/policy-1');
 
     cy.getBySel(AGENT_POLICY_DETAILS_PAGE.ADD_AGENT_LINK).click();
     cy.getBySel(AGENT_FLYOUT.KUBERNETES_PLATFORM_TYPE).click();

x-pack/platform/plugins/shared/fleet/cypress/tasks/common.ts

@@ -80,6 +80,10 @@ const disableNewFeaturesTours = (window: Window) => {
   });
 };
 
+const disableFleetTours = (window: Window) => {
+  window.localStorage.setItem('fleet.autoUpgradeAgentsTour', JSON.stringify({ active: false }));
+};
+
 export const waitForPageToBeLoaded = () => {
   cy.get(LOADING_INDICATOR_HIDDEN).should('exist');
   cy.get(LOADING_INDICATOR).should('not.exist');
@@ -115,6 +119,7 @@ export const visit = (url: string, options: Partial<Cypress.VisitOptions> = {},
       options.onBeforeLoad?.(win);
 
       disableNewFeaturesTours(win);
+      disableFleetTours(win);
     },
     onLoad: (win) => {
       options.onLoad?.(win);

x-pack/platform/plugins/shared/fleet/cypress/tasks/navigation.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { visit } from './common';
+
 export const INTEGRATIONS = 'app/integrations#/';
 export const FLEET = 'app/fleet/';
 export const LOGIN_API_ENDPOINT = '/internal/security/login';
@@ -16,5 +18,5 @@ export const hostDetailsUrl = (hostName: string) =>
   `/app/security/hosts/${hostName}/authentications`;
 
 export const navigateTo = (page: string) => {
-  cy.visit(page);
+  visit(page);
 };

x-pack/platform/plugins/shared/fleet/public/applications/fleet/layouts/default/default.tsx

@@ -15,6 +15,7 @@ import { useLink, useConfig, useAuthz, useStartServices } from '../../hooks';
 import { WithHeaderLayout } from '../../../../layouts';
 
 import { ExperimentalFeaturesService } from '../../services';
+import { AutoUpgradeAgentsTour } from '../../sections/agent_policy/components/auto_upgrade_agents_tour';
 
 import { DefaultPageTitle } from './default_page_title';
 
@@ -60,6 +61,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({
       isSelected: section === 'agent_policies',
       href: getHref('policies_list'),
       'data-test-subj': 'fleet-agent-policies-tab',
+      id: 'fleet-agent-policies-tab',
     },
     {
       name: (
@@ -145,6 +147,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({
       <WithHeaderLayout leftColumn={<DefaultPageTitle />} rightColumn={rightColumn} tabs={tabs}>
         {children}
       </WithHeaderLayout>
+      <AutoUpgradeAgentsTour anchor="#fleet-agent-policies-tab" />
     </>
   );
 };

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx

@@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
 
 import type { AgentPolicy } from '../../../types';
-import { useAuthz } from '../../../hooks';
+import { useAgentPolicyRefresh, useAuthz } from '../../../hooks';
 import {
   AgentEnrollmentFlyout,
   ContextMenuActions,
@@ -22,6 +22,8 @@ import { policyHasFleetServer, ExperimentalFeaturesService } from '../../../serv
 
 import { AgentUpgradeAgentModal } from '../../agents/components';
 
+import { ManageAutoUpgradeAgentsModal } from '../../agents/components/manage_auto_upgrade_agents_modal';
+
 import { AgentPolicyYamlFlyout } from './agent_policy_yaml_flyout';
 import { AgentPolicyCopyProvider } from './agent_policy_copy_provider';
 import { AgentPolicyDeleteProvider } from './agent_policy_delete_provider';
@@ -49,6 +51,9 @@ export const AgentPolicyActionMenu = memo<{
     const [isUninstallCommandFlyoutOpen, setIsUninstallCommandFlyoutOpen] =
       useState<boolean>(false);
     const [isUpgradeAgentsModalOpen, setIsUpgradeAgentsModalOpen] = useState<boolean>(false);
+    const [isManageAutoUpgradeAgentsModalOpen, setIsManageAutoUpgradeAgentsModalOpen] =
+      useState<boolean>(false);
+    const refreshAgentPolicy = useAgentPolicyRefresh();
 
     const { agentTamperProtectionEnabled } = ExperimentalFeaturesService.get();
 
@@ -100,6 +105,23 @@ export const AgentPolicyActionMenu = memo<{
             </EuiContextMenuItem>
           );
 
+          const manageAutoUpgradeAgentsItem = (
+            <EuiContextMenuItem
+              icon="gear"
+              disabled={!authz.fleet.allAgentPolicies}
+              onClick={() => {
+                setIsContextMenuOpen(false);
+                setIsManageAutoUpgradeAgentsModalOpen(!isManageAutoUpgradeAgentsModalOpen);
+              }}
+              key="manageAutoUpgradeAgents"
+            >
+              <FormattedMessage
+                id="xpack.fleet.agentPolicyActionMenu.manageAutoUpgradeAgentsText"
+                defaultMessage="Manage auto-upgrade agents"
+              />
+            </EuiContextMenuItem>
+          );
+
           const deletePolicyItem = (
             <AgentPolicyDeleteProvider
               hasFleetServer={policyHasFleetServer(agentPolicy as AgentPolicy)}
@@ -189,6 +211,7 @@ export const AgentPolicyActionMenu = memo<{
               )}
             </EuiContextMenuItem>,
             viewPolicyItem,
+            manageAutoUpgradeAgentsItem,
             copyPolicyItem,
             deletePolicyItem,
           ];
@@ -278,6 +301,20 @@ export const AgentPolicyActionMenu = memo<{
                   />
                 </EuiPortal>
               )}
+              {isManageAutoUpgradeAgentsModalOpen && (
+                <EuiPortal>
+                  <ManageAutoUpgradeAgentsModal
+                    agentPolicy={agentPolicy}
+                    agentCount={agentPolicy.agents || 0}
+                    onClose={(refreshPolicy: boolean) => {
+                      setIsManageAutoUpgradeAgentsModalOpen(false);
+                      if (refreshPolicy) {
+                        refreshAgentPolicy();
+                      }
+                    }}
+                  />
+                </EuiPortal>
+              )}
               {isUninstallCommandFlyoutOpen && (
                 <UninstallCommandFlyout
                   target="agent"

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/components/auto_upgrade_agents_tour.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { EuiText, EuiTourStep } from '@elastic/eui';
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import type { TOUR_STORAGE_CONFIG } from '../../../constants';
+import { TOUR_STORAGE_KEYS } from '../../../constants';
+import { useStartServices } from '../../../hooks';
+
+export const AutoUpgradeAgentsTour: React.FC<{ anchor: string }> = ({ anchor }) => {
+  const { storage, uiSettings } = useStartServices();
+
+  const [tourState, setTourState] = useState({ isOpen: true });
+
+  const isTourHidden =
+    uiSettings.get('hideAnnouncements', false) ||
+    (
+      storage.get(TOUR_STORAGE_KEYS.AUTO_UPGRADE_AGENTS) as
+        | TOUR_STORAGE_CONFIG['AUTO_UPGRADE_AGENTS']
+        | undefined
+    )?.active === false;
+
+  const setTourAsHidden = () => {
+    storage.set(TOUR_STORAGE_KEYS.AUTO_UPGRADE_AGENTS, {
+      active: false,
+    } as TOUR_STORAGE_CONFIG['AUTO_UPGRADE_AGENTS']);
+  };
+
+  const onFinish = () => {
+    setTourState({ isOpen: false });
+    setTourAsHidden();
+  };
+
+  return (
+    <>
+      <EuiTourStep
+        content={
+          <EuiText>
+            <FormattedMessage
+              id="xpack.fleet.autoUpgradeAgentsTour.tourContent"
+              defaultMessage="Select your policy and configure target agent versions for automatic upgrades."
+            />
+          </EuiText>
+        }
+        isStepOpen={!isTourHidden && tourState.isOpen}
+        onFinish={onFinish}
+        minWidth={360}
+        maxWidth={360}
+        step={1}
+        stepsTotal={1}
+        title={
+          <FormattedMessage
+            id="xpack.fleet.autoUpgradeAgentsTour.tourTitle"
+            defaultMessage="Auto-upgrade agents"
+          />
+        }
+        anchorPosition="downLeft"
+        anchor={anchor}
+      />
+    </>
+  );
+};