Bring CSP's deployment selector in line with generic one

elastic · Jan 29, 2025 · 8466b9e · 8466b9e
1 parent 73fc062
commit 8466b9e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 34 deletions.
diff --git a/...cy/create_package_policy_page/single_page_layout/components/setup_technology_selector.tsx b/...cy/create_package_policy_page/single_page_layout/components/setup_technology_selector.tsx
@@ -21,9 +21,11 @@ import { SetupTechnology } from '../../../../../types';
 export const SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ = 'setup-technology-selector';
 
 export const SetupTechnologySelector = ({
+  disabled,
   setupTechnology,
   onSetupTechnologyChange,
 }: {
+  disabled: boolean;
   setupTechnology: SetupTechnology;
   onSetupTechnologyChange: (value: SetupTechnology) => void;
 }) => {
@@ -45,6 +47,7 @@ export const SetupTechnologySelector = ({
       }
     >
       <EuiRadioGroup
+        disabled={disabled}
         name="SetupTechnologySelector"
         data-test-subj={SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ}
         options={[

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
@@ -403,6 +403,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
           {/* TODO move SetupTechnologySelector out of extensionView */}
           {!extensionView && isAgentlessIntegration(packageInfo) && (
             <SetupTechnologySelector
+              disabled={false}
               setupTechnology={selectedSetupTechnology}
               onSetupTechnologyChange={(value) => {
                 handleSetupTechnologyChange(value);

diff --git a/...ublic/components/fleet_extensions/setup_technology_selector/setup_technology_selector.tsx b/...ublic/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}