[UII] Convert deployment mode selector to radio group (#208859)

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -19291,14 +19291,9 @@
     "xpack.fleet.setupPage.missingRequirementsCalloutDescription": "Pour appliquer la gestion centralisée aux agents Elastic Agent, activez les fonctionnalités de sécurité suivantes dans Elasticsearch.",
     "xpack.fleet.setupPage.missingRequirementsCalloutTitle": "Exigences en matière de sécurité manquantes",
     "xpack.fleet.setupPage.missingRequirementsElasticsearchTitle": "Activez les paramètres suivants dans votre configuration Elasticsearch ({esConfigFile}) :",
-    "xpack.fleet.setupTechnology.agentbasedDrowpownDescription": "Configurer l'intégration avec un agent",
-    "xpack.fleet.setupTechnology.agentbasedDrowpownDisplay": "Basée sur un agent",
     "xpack.fleet.setupTechnology.agentbasedInputDisplay": "Basée sur un agent",
-    "xpack.fleet.setupTechnology.agentlessDrowpownDescription": "Configurer l'intégration sans agent",
-    "xpack.fleet.setupTechnology.agentlessDrowpownDisplay": "Sans agent",
     "xpack.fleet.setupTechnology.agentlessInputDisplay": "Sans agent",
     "xpack.fleet.setupTechnology.setupTechnologyLabel": "Technologie de configuration",
-    "xpack.fleet.setupTechnology.setupTechnologyPlaceholder": "Sélectionner la technologie de configuration",
     "xpack.fleet.standaloneAgentPage.errorCreatingAgentAPIKey": "Erreur lors de la création de la clé d’API de l'agent",
     "xpack.fleet.standaloneAgentPage.errorFetchingFullAgentPolicy": "Erreur lors de la récupération de l’intégralité des politiques d'agents",
     "xpack.fleet.tagOptions.deleteText": "Supprimer la balise",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -19151,14 +19151,9 @@
     "xpack.fleet.setupPage.missingRequirementsCalloutDescription": "Elasticエージェントの集中管理を使用するには、次のElasticsearchのセキュリティ機能を有効にする必要があります。",
     "xpack.fleet.setupPage.missingRequirementsCalloutTitle": "不足しているセキュリティ要件",
     "xpack.fleet.setupPage.missingRequirementsElasticsearchTitle": "Elasticsearch構成（{esConfigFile}）で、次の項目を有効にします。",
-    "xpack.fleet.setupTechnology.agentbasedDrowpownDescription": "エージェントで統合を設定",
-    "xpack.fleet.setupTechnology.agentbasedDrowpownDisplay": "エージェントベース",
     "xpack.fleet.setupTechnology.agentbasedInputDisplay": "エージェントベース",
-    "xpack.fleet.setupTechnology.agentlessDrowpownDescription": "エージェントなしで統合を設定",
-    "xpack.fleet.setupTechnology.agentlessDrowpownDisplay": "エージェントレス",
     "xpack.fleet.setupTechnology.agentlessInputDisplay": "エージェントレス",
     "xpack.fleet.setupTechnology.setupTechnologyLabel": "セットアップ技術",
-    "xpack.fleet.setupTechnology.setupTechnologyPlaceholder": "セットアップ技術を選択",
     "xpack.fleet.standaloneAgentPage.errorCreatingAgentAPIKey": "エージェントAPIキーの作成エラー",
     "xpack.fleet.standaloneAgentPage.errorFetchingFullAgentPolicy": "完全なエージェントポリシーの取得エラー",
     "xpack.fleet.tagOptions.deleteText": "タグを削除",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -18846,14 +18846,9 @@
     "xpack.fleet.setupPage.missingRequirementsCalloutDescription": "要对 Elastic 代理使用集中管理，请启用下面的 Elasticsearch 安全功能。",
     "xpack.fleet.setupPage.missingRequirementsCalloutTitle": "缺失安全性要求",
     "xpack.fleet.setupPage.missingRequirementsElasticsearchTitle": "在您的 Elasticsearch 配置 ({esConfigFile}) 中，启用：",
-    "xpack.fleet.setupTechnology.agentbasedDrowpownDescription": "使用代理设置集成",
-    "xpack.fleet.setupTechnology.agentbasedDrowpownDisplay": "基于代理",
     "xpack.fleet.setupTechnology.agentbasedInputDisplay": "基于代理",
-    "xpack.fleet.setupTechnology.agentlessDrowpownDescription": "不使用代理设置集成",
-    "xpack.fleet.setupTechnology.agentlessDrowpownDisplay": "无代理",
     "xpack.fleet.setupTechnology.agentlessInputDisplay": "无代理",
     "xpack.fleet.setupTechnology.setupTechnologyLabel": "设置技术",
-    "xpack.fleet.setupTechnology.setupTechnologyPlaceholder": "选择设置技术",
     "xpack.fleet.standaloneAgentPage.errorCreatingAgentAPIKey": "创建代理 API 密钥时出错",
     "xpack.fleet.standaloneAgentPage.errorFetchingFullAgentPolicy": "提取完整代理策略时出错",
     "xpack.fleet.tagOptions.deleteText": "删除标签",

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx

@@ -178,28 +178,28 @@ export const CreatePackagePolicySinglePageLayout: React.FunctionComponent<{
         return (
           <FormattedMessage
             id="xpack.fleet.editPackagePolicy.pageDescription"
-            defaultMessage="Modify integration settings and deploy changes to the selected agent policy."
+            defaultMessage="Modify integration settings and deploy changes to the selected agent policies."
           />
         );
       } else if (isAdd) {
         return (
           <FormattedMessage
             id="xpack.fleet.createPackagePolicy.pageDescriptionfromPolicy"
-            defaultMessage="Configure an integration for the selected agent policy."
+            defaultMessage="Configure an integration for the selected agent policies."
           />
         );
       } else if (isUpgrade) {
         return (
           <FormattedMessage
             id="xpack.fleet.upgradePackagePolicy.pageDescriptionFromUpgrade"
-            defaultMessage="Upgrade this integration and deploy changes to the selected agent policy"
+            defaultMessage="Upgrade this integration and deploy changes to the selected agent policies."
           />
         );
       } else {
         return (
           <FormattedMessage
             id="xpack.fleet.createPackagePolicy.pageDescriptionfromPackage"
-            defaultMessage="Follow these instructions to add this integration to an agent policy."
+            defaultMessage="Follow these instructions to add this integration to agent policies."
           />
         );
       }
@@ -225,10 +225,10 @@ export const CreatePackagePolicySinglePageLayout: React.FunctionComponent<{
         </EuiFlexItem>
         <EuiFlexItem>{pageTitle}</EuiFlexItem>
         <EuiFlexItem>
-          <EuiSpacer size="s" />
           <EuiText color="subdued" size="s">
             {pageDescription}
           </EuiText>
+          <EuiSpacer size="s" />
         </EuiFlexItem>
       </EuiFlexGroup>
     );

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/setup_technology_selector.tsx

@@ -8,7 +8,13 @@
 import React from 'react';
 
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiBetaBadge, EuiFormRow, EuiSpacer, EuiSuperSelect, EuiText } from '@elastic/eui';
+import {
+  EuiBetaBadge,
+  EuiText,
+  EuiRadioGroup,
+  EuiDescribedFormGroup,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import { SetupTechnology } from '../../../../../types';
 
@@ -16,113 +22,96 @@ export const SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ = 'setup-technology-selector';
 
 export const SetupTechnologySelector = ({
   disabled,
+  allowedSetupTechnologies,
   setupTechnology,
   onSetupTechnologyChange,
 }: {
   disabled: boolean;
+  allowedSetupTechnologies: SetupTechnology[];
   setupTechnology: SetupTechnology;
   onSetupTechnologyChange: (value: SetupTechnology) => void;
 }) => {
-  const options = [
-    {
-      value: SetupTechnology.AGENTLESS,
-      inputDisplay: (
-        <>
-          <FormattedMessage
-            id="xpack.fleet.setupTechnology.agentlessInputDisplay"
-            defaultMessage="Agentless"
-          />
-          &nbsp;
-          <EuiBetaBadge
-            label="Beta"
-            size="s"
-            tooltipContent="This module is not yet GA. Please help us by reporting any bugs."
-          />
-        </>
-      ),
-      dropdownDisplay: (
-        <>
-          <strong>
-            <FormattedMessage
-              id="xpack.fleet.setupTechnology.agentlessDrowpownDisplay"
-              defaultMessage="Agentless"
-            />
-          </strong>
-          &nbsp;
-          <EuiBetaBadge
-            label="Beta"
-            size="s"
-            tooltipContent="This module is not GA. Please help us by reporting any bugs."
-          />
-          <EuiText size="s" color="subdued">
-            <p>
-              <FormattedMessage
-                id="xpack.fleet.setupTechnology.agentlessDrowpownDescription"
-                defaultMessage="Set up the integration without an agent"
-              />
-            </p>
-          </EuiText>
-        </>
-      ),
-    },
-    {
-      value: SetupTechnology.AGENT_BASED,
-      inputDisplay: (
-        <FormattedMessage
-          id="xpack.fleet.setupTechnology.agentbasedInputDisplay"
-          defaultMessage="Agent-based"
-        />
-      ),
-      dropdownDisplay: (
-        <>
-          <strong>
-            <FormattedMessage
-              id="xpack.fleet.setupTechnology.agentbasedDrowpownDisplay"
-              defaultMessage="Agent-based"
-            />
-          </strong>
-          <EuiText size="s" color="subdued">
-            <p>
-              <FormattedMessage
-                id="xpack.fleet.setupTechnology.agentbasedDrowpownDescription"
-                defaultMessage="Set up the integration with an agent"
-              />
-            </p>
-          </EuiText>
-        </>
-      ),
-    },
-  ];
-
   return (
-    <>
-      <EuiSpacer size="l" />
-      <EuiFormRow
-        fullWidth
-        label={
+    <EuiDescribedFormGroup
+      title={
+        <h3>
           <FormattedMessage
             id="xpack.fleet.setupTechnology.setupTechnologyLabel"
-            defaultMessage="Setup technology"
+            defaultMessage="Deployment options"
           />
-        }
-      >
-        <EuiSuperSelect
-          disabled={disabled}
-          options={options}
-          valueOfSelected={setupTechnology}
-          placeholder={
-            <FormattedMessage
-              id="xpack.fleet.setupTechnology.setupTechnologyPlaceholder"
-              defaultMessage="Select the setup technology"
-            />
-          }
-          onChange={onSetupTechnologyChange}
-          itemLayoutAlign="top"
-          hasDividers
-          fullWidth
-          data-test-subj={SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ}
+        </h3>
+      }
+      description={
+        <FormattedMessage
+          id="xpack.fleet.setupTechnology.setupTechnologyDescription"
+          defaultMessage="Select a deployment mode for this integration."
         />
-      </EuiFormRow>
-    </>
+      }
+    >
+      <EuiRadioGroup
+        disabled={disabled}
+        name="SetupTechnologySelector"
+        data-test-subj={SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ}
+        options={[
+          {
+            id: `SetupTechnologySelector_${SetupTechnology.AGENTLESS}`,
+            value: SetupTechnology.AGENTLESS,
+            disabled: !allowedSetupTechnologies.includes(SetupTechnology.AGENTLESS),
+            label: (
+              <>
+                <strong>
+                  <FormattedMessage
+                    id="xpack.fleet.setupTechnology.agentlessInputDisplay"
+                    defaultMessage="Agentless"
+                  />{' '}
+                  <EuiBetaBadge
+                    label="Beta"
+                    size="s"
+                    tooltipContent="This module is not yet GA. Please help us by reporting any bugs."
+                    alignment="middle"
+                  />
+                </strong>
+                <EuiText size="s">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.fleet.setupTechnology.agentlessInputDescription"
+                      defaultMessage="Set up the integration without an agent"
+                    />
+                  </p>
+                </EuiText>
+                <EuiSpacer size="xs" />
+              </>
+            ),
+          },
+          {
+            id: `SetupTechnologySelector_${SetupTechnology.AGENT_BASED}`,
+            value: SetupTechnology.AGENT_BASED,
+            disabled: !allowedSetupTechnologies.includes(SetupTechnology.AGENT_BASED),
+            label: (
+              <>
+                <strong>
+                  <FormattedMessage
+                    id="xpack.fleet.setupTechnology.agentbasedInputDisplay"
+                    defaultMessage="Agent-based"
+                  />
+                </strong>
+                <EuiText size="s">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.fleet.setupTechnology.agentbasedInputDescription"
+                      defaultMessage="Deploy an Elastic Agent into your cloud environment"
+                    />
+                  </p>
+                </EuiText>
+              </>
+            ),
+          },
+        ]}
+        idSelected={`SetupTechnologySelector_${setupTechnology}`}
+        onChange={(id, value) => {
+          onSetupTechnologyChange(value as SetupTechnology);
+        }}
+      />
+    </EuiDescribedFormGroup>
   );
 };

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.tsx

@@ -291,16 +291,20 @@ export function useOnSubmit({
     }
   }, [packagePolicy, agentPolicies, updatePackagePolicy, canUseMultipleAgentPolicies]);
 
-  const { handleSetupTechnologyChange, selectedSetupTechnology, defaultSetupTechnology } =
-    useSetupTechnology({
-      newAgentPolicy,
-      setNewAgentPolicy,
-      updatePackagePolicy,
-      setSelectedPolicyTab,
-      packageInfo,
-      packagePolicy,
-      integrationToEnable,
-    });
+  const {
+    handleSetupTechnologyChange,
+    allowedSetupTechnologies,
+    selectedSetupTechnology,
+    defaultSetupTechnology,
+  } = useSetupTechnology({
+    newAgentPolicy,
+    setNewAgentPolicy,
+    updatePackagePolicy,
+    setSelectedPolicyTab,
+    packageInfo,
+    packagePolicy,
+    integrationToEnable,
+  });
   const setupTechnologyRef = useRef<SetupTechnology | undefined>(selectedSetupTechnology);
   // sync the inputs with the agentless selector change
   useEffect(() => {
@@ -538,6 +542,7 @@ export function useOnSubmit({
     navigateAddAgent,
     navigateAddAgentHelp,
     handleSetupTechnologyChange,
+    allowedSetupTechnologies,
     selectedSetupTechnology,
     defaultSetupTechnology,
     isAgentlessSelected,

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/setup_technology.test.ts

@@ -290,6 +290,10 @@ describe('useSetupTechnology', () => {
         })
       );
 
+      expect(result.current.allowedSetupTechnologies).toStrictEqual([
+        SetupTechnology.AGENTLESS,
+        SetupTechnology.AGENT_BASED,
+      ]);
       expect(result.current.selectedSetupTechnology).toBe(SetupTechnology.AGENT_BASED);
     });
 
@@ -419,6 +423,7 @@ describe('useSetupTechnology', () => {
         })
       );
 
+      expect(result.current.allowedSetupTechnologies).toStrictEqual([SetupTechnology.AGENTLESS]);
       expect(result.current.selectedSetupTechnology).toBe(SetupTechnology.AGENTLESS);
     });
 

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/setup_technology.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useCallback, useRef, useState, useEffect } from 'react';
+import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
 
 import { useConfig } from '../../../../../hooks';
 import { generateNewAgentPolicyWithDefaults } from '../../../../../../../../common/services/generate_new_agent_policy';
@@ -86,6 +86,11 @@ export function useSetupTechnology({
   const orginalAgentPolicyRef = useRef<NewAgentPolicy>({ ...newAgentPolicy });
   const [currentAgentPolicy, setCurrentAgentPolicy] = useState(newAgentPolicy);
 
+  const allowedSetupTechnologies = useMemo(() => {
+    return isOnlyAgentlessIntegration(packageInfo, integrationToEnable)
+      ? [SetupTechnology.AGENTLESS]
+      : [SetupTechnology.AGENTLESS, SetupTechnology.AGENT_BASED];
+  }, [integrationToEnable, packageInfo]);
   const [selectedSetupTechnology, setSelectedSetupTechnology] = useState<SetupTechnology>(
     SetupTechnology.AGENT_BASED
   );
@@ -172,6 +177,7 @@ export function useSetupTechnology({
 
   return {
     handleSetupTechnologyChange,
+    allowedSetupTechnologies,
     selectedSetupTechnology,
     defaultSetupTechnology,
   };

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx

@@ -759,7 +759,6 @@ describe('When on the package policy create page', () => {
           expect(renderResult.getByTestId(SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ)).toBeInTheDocument();
         });
 
-        fireEvent.click(renderResult.getByTestId(SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ));
         fireEvent.click(renderResult.getAllByText('Agentless')[0]);
 
         await act(async () => {

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

@@ -178,6 +178,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
     hasAgentPolicyError,
     isInitialized,
     handleSetupTechnologyChange,
+    allowedSetupTechnologies,
     selectedSetupTechnology,
     defaultSetupTechnology,
     isAgentlessSelected,
@@ -404,6 +405,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
           {!extensionView && isAgentlessIntegration(packageInfo) && (
             <SetupTechnologySelector
               disabled={false}
+              allowedSetupTechnologies={allowedSetupTechnologies}
               setupTechnology={selectedSetupTechnology}
               onSetupTechnologyChange={(value) => {
                 handleSetupTechnologyChange(value);
@@ -456,6 +458,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
       isAgentlessSelected,
       handleExtensionViewOnChange,
       handleSetupTechnologyChange,
+      allowedSetupTechnologies,
     ]
   );
 

x-pack/solutions/security/plugins/cloud_security_posture/public/components/fleet_extensions/setup_technology_selector/setup_technology_selector.tsx

@@ -13,11 +13,10 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiSpacer,
   useGeneratedHtmlId,
-  EuiFlexItem,
-  EuiFlexGroup,
   EuiRadioGroup,
   EuiTitle,
   EuiRadioGroupOption,
+  EuiText,
 } from '@elastic/eui';
 import { SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ } from '../../test_subjects';
 
@@ -43,50 +42,45 @@ export const SetupTechnologySelector = ({
       id: radioGroupItemId1,
       value: SetupTechnology.AGENTLESS,
       label: (
-        <EuiFlexGroup gutterSize="xs" direction="column" aria-label={'Deployment Modes Selection'}>
-          <EuiFlexItem grow={false}>
-            <p>
-              <strong>
-                <FormattedMessage
-                  id="xpack.csp.fleetIntegration.setupTechnology.agentlessRadioLabel"
-                  defaultMessage="Agentless"
-                />
-              </strong>
-            </p>
-          </EuiFlexItem>
-          <EuiFlexItem>
+        <>
+          <strong>
+            <FormattedMessage
+              id="xpack.csp.fleetIntegration.setupTechnology.agentlessRadioLabel"
+              defaultMessage="Agentless"
+            />
+          </strong>
+          <EuiText size="s">
             <p>
               <FormattedMessage
                 id="xpack.csp.fleetIntegration.setupTechnology.agentBasedRadioDescription"
                 defaultMessage="Setup integration without an agent"
               />
             </p>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+          </EuiText>
+          <EuiSpacer size="xs" />
+        </>
       ),
     },
     {
       id: radioGroupItemId2,
       value: SetupTechnology.AGENT_BASED,
       label: (
-        <EuiFlexGroup gutterSize="xs" direction="column" aria-label={'Agent-based'}>
-          <EuiFlexItem grow={false}>
-            <p>
-              <strong>
-                <FormattedMessage
-                  id="xpack.csp.fleetIntegration.setupTechnology.agentBasedRadioLabel"
-                  defaultMessage="Agent-based"
-                />
-              </strong>
-            </p>
-          </EuiFlexItem>
-          <EuiFlexItem>
+        <>
+          <strong>
             <FormattedMessage
-              id="xpack.csp.fleetIntegration.setupTechnology.agentBasedRadioDescription"
-              defaultMessage="Deploy Elastic Agent into your Cloud Account"
+              id="xpack.csp.fleetIntegration.setupTechnology.agentBasedRadioLabel"
+              defaultMessage="Agent-based"
             />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+          </strong>
+          <EuiText size="s">
+            <p>
+              <FormattedMessage
+                id="xpack.csp.fleetIntegration.setupTechnology.agentBasedRadioDescription"
+                defaultMessage="Deploy an Elastic Agent into your cloud environment"
+              />
+            </p>
+          </EuiText>
+        </>
       ),
     },
   ];
@@ -109,11 +103,11 @@ export const SetupTechnologySelector = ({
         <h2>
           <FormattedMessage
             id="xpack.csp.setupTechnologySelector.deploymentOptionsTitle"
-            defaultMessage="Deployment Options"
+            defaultMessage="Deployment options"
           />
         </h2>
       </EuiTitle>
-      <EuiSpacer size="l" />
+      <EuiSpacer size="s" />
       <EuiRadioGroup
         disabled={disabled}
         data-test-subj={SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ}