Skip to content

Commit 8efc387

Browse files
kibanamachinejen-huang
kibanamachine
and
jen-huang
authored
[8.x] [UII] Convert deployment mode selector to radio group (elastic#208859) (elastic#208994)
# Backport This will backport the following commits from `main` to `8.x`: - [[UII] Convert deployment mode selector to radio group (elastic#208859)](elastic#208859) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Jen Huang","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-30T16:58:00Z","message":"[UII] Convert deployment mode selector to radio group (elastic#208859)","sha":"010ef6b4c56f19aa40189d34f706317923b6eead","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","v9.0.0","backport:prev-minor"],"title":"[UII] Convert deployment mode selector to radio group","number":208859,"url":"https://github.com/elastic/kibana/pull/208859","mergeCommit":{"message":"[UII] Convert deployment mode selector to radio group (elastic#208859)","sha":"010ef6b4c56f19aa40189d34f706317923b6eead"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208859","number":208859,"mergeCommit":{"message":"[UII] Convert deployment mode selector to radio group (elastic#208859)","sha":"010ef6b4c56f19aa40189d34f706317923b6eead"}}]}] BACKPORT--> Co-authored-by: Jen Huang <[email protected]>
1 parent 5c65fcf commit 8efc387

File tree

11 files changed

+149
-163
lines changed

11 files changed

+149
-163
lines changed

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21620,14 +21620,9 @@
2162021620
"xpack.fleet.setupPage.missingRequirementsCalloutDescription": "Pour appliquer la gestion centralisée aux agents Elastic Agent, activez les fonctionnalités de sécurité suivantes dans Elasticsearch.",
2162121621
"xpack.fleet.setupPage.missingRequirementsCalloutTitle": "Exigences en matière de sécurité manquantes",
2162221622
"xpack.fleet.setupPage.missingRequirementsElasticsearchTitle": "Activez les paramètres suivants dans votre configuration Elasticsearch ({esConfigFile}) :",
21623-
"xpack.fleet.setupTechnology.agentbasedDrowpownDescription": "Configurer l'intégration avec un agent",
21624-
"xpack.fleet.setupTechnology.agentbasedDrowpownDisplay": "Basée sur un agent",
2162521623
"xpack.fleet.setupTechnology.agentbasedInputDisplay": "Basée sur un agent",
21626-
"xpack.fleet.setupTechnology.agentlessDrowpownDescription": "Configurer l'intégration sans agent",
21627-
"xpack.fleet.setupTechnology.agentlessDrowpownDisplay": "Sans agent",
2162821624
"xpack.fleet.setupTechnology.agentlessInputDisplay": "Sans agent",
2162921625
"xpack.fleet.setupTechnology.setupTechnologyLabel": "Technologie de configuration",
21630-
"xpack.fleet.setupTechnology.setupTechnologyPlaceholder": "Sélectionner la technologie de configuration",
2163121626
"xpack.fleet.standaloneAgentPage.errorCreatingAgentAPIKey": "Erreur lors de la création de la clé d’API de l'agent",
2163221627
"xpack.fleet.standaloneAgentPage.errorFetchingFullAgentPolicy": "Erreur lors de la récupération de l’intégralité des politiques d'agents",
2163321628
"xpack.fleet.tagOptions.deleteText": "Supprimer la balise",

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

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

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21560,14 +21560,9 @@
2156021560
"xpack.fleet.setupPage.missingRequirementsCalloutDescription": "要对 Elastic 代理使用集中管理，请启用下面的 Elasticsearch 安全功能。",
2156121561
"xpack.fleet.setupPage.missingRequirementsCalloutTitle": "缺失安全性要求",
2156221562
"xpack.fleet.setupPage.missingRequirementsElasticsearchTitle": "在您的 Elasticsearch 配置 ({esConfigFile}) 中，启用：",
21563-
"xpack.fleet.setupTechnology.agentbasedDrowpownDescription": "使用代理设置集成",
21564-
"xpack.fleet.setupTechnology.agentbasedDrowpownDisplay": "基于代理",
2156521563
"xpack.fleet.setupTechnology.agentbasedInputDisplay": "基于代理",
21566-
"xpack.fleet.setupTechnology.agentlessDrowpownDescription": "不使用代理设置集成",
21567-
"xpack.fleet.setupTechnology.agentlessDrowpownDisplay": "无代理",
2156821564
"xpack.fleet.setupTechnology.agentlessInputDisplay": "无代理",
2156921565
"xpack.fleet.setupTechnology.setupTechnologyLabel": "设置技术",
21570-
"xpack.fleet.setupTechnology.setupTechnologyPlaceholder": "选择设置技术",
2157121566
"xpack.fleet.standaloneAgentPage.errorCreatingAgentAPIKey": "创建代理 API 密钥时出错",
2157221567
"xpack.fleet.standaloneAgentPage.errorFetchingFullAgentPolicy": "提取完整代理策略时出错",
2157321568
"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‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -178,28 +178,28 @@ export const CreatePackagePolicySinglePageLayout: React.FunctionComponent<{
178178
return (
179179
<FormattedMessage
180180
id="xpack.fleet.editPackagePolicy.pageDescription"
181-
defaultMessage="Modify integration settings and deploy changes to the selected agent policy."
181+
defaultMessage="Modify integration settings and deploy changes to the selected agent policies."
182182
/>
183183
);
184184
} else if (isAdd) {
185185
return (
186186
<FormattedMessage
187187
id="xpack.fleet.createPackagePolicy.pageDescriptionfromPolicy"
188-
defaultMessage="Configure an integration for the selected agent policy."
188+
defaultMessage="Configure an integration for the selected agent policies."
189189
/>
190190
);
191191
} else if (isUpgrade) {
192192
return (
193193
<FormattedMessage
194194
id="xpack.fleet.upgradePackagePolicy.pageDescriptionFromUpgrade"
195-
defaultMessage="Upgrade this integration and deploy changes to the selected agent policy"
195+
defaultMessage="Upgrade this integration and deploy changes to the selected agent policies."
196196
/>
197197
);
198198
} else {
199199
return (
200200
<FormattedMessage
201201
id="xpack.fleet.createPackagePolicy.pageDescriptionfromPackage"
202-
defaultMessage="Follow these instructions to add this integration to an agent policy."
202+
defaultMessage="Follow these instructions to add this integration to agent policies."
203203
/>
204204
);
205205
}
@@ -225,10 +225,10 @@ export const CreatePackagePolicySinglePageLayout: React.FunctionComponent<{
225225
</EuiFlexItem>
226226
<EuiFlexItem>{pageTitle}</EuiFlexItem>
227227
<EuiFlexItem>
228-
<EuiSpacer size="s" />
229228
<EuiText color="subdued" size="s">
230229
{pageDescription}
231230
</EuiText>
231+
<EuiSpacer size="s" />
232232
</EuiFlexItem>
233233
</EuiFlexGroup>
234234
);

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

Lines changed: 86 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -8,121 +8,110 @@
88
import React from 'react';
99

1010
import { FormattedMessage } from '@kbn/i18n-react';
11-
import { EuiBetaBadge, EuiFormRow, EuiSpacer, EuiSuperSelect, EuiText } from '@elastic/eui';
11+
import {
12+
EuiBetaBadge,
13+
EuiText,
14+
EuiRadioGroup,
15+
EuiDescribedFormGroup,
16+
EuiSpacer,
17+
} from '@elastic/eui';
1218

1319
import { SetupTechnology } from '../../../../../types';
1420

1521
export const SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ = 'setup-technology-selector';
1622

1723
export const SetupTechnologySelector = ({
1824
disabled,
25+
allowedSetupTechnologies,
1926
setupTechnology,
2027
onSetupTechnologyChange,
2128
}: {
2229
disabled: boolean;
30+
allowedSetupTechnologies: SetupTechnology[];
2331
setupTechnology: SetupTechnology;
2432
onSetupTechnologyChange: (value: SetupTechnology) => void;
2533
}) => {
26-
const options = [
27-
{
28-
value: SetupTechnology.AGENTLESS,
29-
inputDisplay: (
30-
<>
31-
<FormattedMessage
32-
id="xpack.fleet.setupTechnology.agentlessInputDisplay"
33-
defaultMessage="Agentless"
34-
/>
35-
&nbsp;
36-
<EuiBetaBadge
37-
label="Beta"
38-
size="s"
39-
tooltipContent="This module is not yet GA. Please help us by reporting any bugs."
40-
/>
41-
</>
42-
),
43-
dropdownDisplay: (
44-
<>
45-
<strong>
46-
<FormattedMessage
47-
id="xpack.fleet.setupTechnology.agentlessDrowpownDisplay"
48-
defaultMessage="Agentless"
49-
/>
50-
</strong>
51-
&nbsp;
52-
<EuiBetaBadge
53-
label="Beta"
54-
size="s"
55-
tooltipContent="This module is not GA. Please help us by reporting any bugs."
56-
/>
57-
<EuiText size="s" color="subdued">
58-
<p>
59-
<FormattedMessage
60-
id="xpack.fleet.setupTechnology.agentlessDrowpownDescription"
61-
defaultMessage="Set up the integration without an agent"
62-
/>
63-
</p>
64-
</EuiText>
65-
</>
66-
),
67-
},
68-
{
69-
value: SetupTechnology.AGENT_BASED,
70-
inputDisplay: (
71-
<FormattedMessage
72-
id="xpack.fleet.setupTechnology.agentbasedInputDisplay"
73-
defaultMessage="Agent-based"
74-
/>
75-
),
76-
dropdownDisplay: (
77-
<>
78-
<strong>
79-
<FormattedMessage
80-
id="xpack.fleet.setupTechnology.agentbasedDrowpownDisplay"
81-
defaultMessage="Agent-based"
82-
/>
83-
</strong>
84-
<EuiText size="s" color="subdued">
85-
<p>
86-
<FormattedMessage
87-
id="xpack.fleet.setupTechnology.agentbasedDrowpownDescription"
88-
defaultMessage="Set up the integration with an agent"
89-
/>
90-
</p>
91-
</EuiText>
92-
</>
93-
),
94-
},
95-
];
96-
9734
return (
98-
<>
99-
<EuiSpacer size="l" />
100-
<EuiFormRow
101-
fullWidth
102-
label={
35+
<EuiDescribedFormGroup
36+
title={
37+
<h3>
10338
<FormattedMessage
10439
id="xpack.fleet.setupTechnology.setupTechnologyLabel"
105-
defaultMessage="Setup technology"
40+
defaultMessage="Deployment options"
10641
/>
107-
}
108-
>
109-
<EuiSuperSelect
110-
disabled={disabled}
111-
options={options}
112-
valueOfSelected={setupTechnology}
113-
placeholder={
114-
<FormattedMessage
115-
id="xpack.fleet.setupTechnology.setupTechnologyPlaceholder"
116-
defaultMessage="Select the setup technology"
117-
/>
118-
}
119-
onChange={onSetupTechnologyChange}
120-
itemLayoutAlign="top"
121-
hasDividers
122-
fullWidth
123-
data-test-subj={SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ}
42+
</h3>
43+
}
44+
description={
45+
<FormattedMessage
46+
id="xpack.fleet.setupTechnology.setupTechnologyDescription"
47+
defaultMessage="Select a deployment mode for this integration."
12448
/>
125-
</EuiFormRow>
126-
</>
49+
}
50+
>
51+
<EuiRadioGroup
52+
disabled={disabled}
53+
name="SetupTechnologySelector"
54+
data-test-subj={SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ}
55+
options={[
56+
{
57+
id: `SetupTechnologySelector_${SetupTechnology.AGENTLESS}`,
58+
value: SetupTechnology.AGENTLESS,
59+
disabled: !allowedSetupTechnologies.includes(SetupTechnology.AGENTLESS),
60+
label: (
61+
<>
62+
<strong>
63+
<FormattedMessage
64+
id="xpack.fleet.setupTechnology.agentlessInputDisplay"
65+
defaultMessage="Agentless"
66+
/>{' '}
67+
<EuiBetaBadge
68+
label="Beta"
69+
size="s"
70+
tooltipContent="This module is not yet GA. Please help us by reporting any bugs."
71+
alignment="middle"
72+
/>
73+
</strong>
74+
<EuiText size="s">
75+
<p>
76+
<FormattedMessage
77+
id="xpack.fleet.setupTechnology.agentlessInputDescription"
78+
defaultMessage="Set up the integration without an agent"
79+
/>
80+
</p>
81+
</EuiText>
82+
<EuiSpacer size="xs" />
83+
</>
84+
),
85+
},
86+
{
87+
id: `SetupTechnologySelector_${SetupTechnology.AGENT_BASED}`,
88+
value: SetupTechnology.AGENT_BASED,
89+
disabled: !allowedSetupTechnologies.includes(SetupTechnology.AGENT_BASED),
90+
label: (
91+
<>
92+
<strong>
93+
<FormattedMessage
94+
id="xpack.fleet.setupTechnology.agentbasedInputDisplay"
95+
defaultMessage="Agent-based"
96+
/>
97+
</strong>
98+
<EuiText size="s">
99+
<p>
100+
<FormattedMessage
101+
id="xpack.fleet.setupTechnology.agentbasedInputDescription"
102+
defaultMessage="Deploy an Elastic Agent into your cloud environment"
103+
/>
104+
</p>
105+
</EuiText>
106+
</>
107+
),
108+
},
109+
]}
110+
idSelected={`SetupTechnologySelector_${setupTechnology}`}
111+
onChange={(id, value) => {
112+
onSetupTechnologyChange(value as SetupTechnology);
113+
}}
114+
/>
115+
</EuiDescribedFormGroup>
127116
);
128117
};

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -291,16 +291,20 @@ export function useOnSubmit({
291291
}
292292
}, [packagePolicy, agentPolicies, updatePackagePolicy, canUseMultipleAgentPolicies]);
293293

294-
const { handleSetupTechnologyChange, selectedSetupTechnology, defaultSetupTechnology } =
295-
useSetupTechnology({
296-
newAgentPolicy,
297-
setNewAgentPolicy,
298-
updatePackagePolicy,
299-
setSelectedPolicyTab,
300-
packageInfo,
301-
packagePolicy,
302-
integrationToEnable,
303-
});
294+
const {
295+
handleSetupTechnologyChange,
296+
allowedSetupTechnologies,
297+
selectedSetupTechnology,
298+
defaultSetupTechnology,
299+
} = useSetupTechnology({
300+
newAgentPolicy,
301+
setNewAgentPolicy,
302+
updatePackagePolicy,
303+
setSelectedPolicyTab,
304+
packageInfo,
305+
packagePolicy,
306+
integrationToEnable,
307+
});
304308
const setupTechnologyRef = useRef<SetupTechnology | undefined>(selectedSetupTechnology);
305309
// sync the inputs with the agentless selector change
306310
useEffect(() => {
@@ -538,6 +542,7 @@ export function useOnSubmit({
538542
navigateAddAgent,
539543
navigateAddAgentHelp,
540544
handleSetupTechnologyChange,
545+
allowedSetupTechnologies,
541546
selectedSetupTechnology,
542547
defaultSetupTechnology,
543548
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‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,10 @@ describe('useSetupTechnology', () => {
290290
})
291291
);
292292

293+
expect(result.current.allowedSetupTechnologies).toStrictEqual([
294+
SetupTechnology.AGENTLESS,
295+
SetupTechnology.AGENT_BASED,
296+
]);
293297
expect(result.current.selectedSetupTechnology).toBe(SetupTechnology.AGENT_BASED);
294298
});
295299

@@ -419,6 +423,7 @@ describe('useSetupTechnology', () => {
419423
})
420424
);
421425

426+
expect(result.current.allowedSetupTechnologies).toStrictEqual([SetupTechnology.AGENTLESS]);
422427
expect(result.current.selectedSetupTechnology).toBe(SetupTechnology.AGENTLESS);
423428
});
424429

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* 2.0.
66
*/
77

8-
import { useCallback, useRef, useState, useEffect } from 'react';
8+
import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
99

1010
import { useConfig } from '../../../../../hooks';
1111
import { generateNewAgentPolicyWithDefaults } from '../../../../../../../../common/services/generate_new_agent_policy';
@@ -86,6 +86,11 @@ export function useSetupTechnology({
8686
const orginalAgentPolicyRef = useRef<NewAgentPolicy>({ ...newAgentPolicy });
8787
const [currentAgentPolicy, setCurrentAgentPolicy] = useState(newAgentPolicy);
8888

89+
const allowedSetupTechnologies = useMemo(() => {
90+
return isOnlyAgentlessIntegration(packageInfo, integrationToEnable)
91+
? [SetupTechnology.AGENTLESS]
92+
: [SetupTechnology.AGENTLESS, SetupTechnology.AGENT_BASED];
93+
}, [integrationToEnable, packageInfo]);
8994
const [selectedSetupTechnology, setSelectedSetupTechnology] = useState<SetupTechnology>(
9095
SetupTechnology.AGENT_BASED
9196
);
@@ -172,6 +177,7 @@ export function useSetupTechnology({
172177

173178
return {
174179
handleSetupTechnologyChange,
180+
allowedSetupTechnologies,
175181
selectedSetupTechnology,
176182
defaultSetupTechnology,
177183
};

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -761,7 +761,6 @@ describe('When on the package policy create page', () => {
761761
expect(renderResult.getByTestId(SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ)).toBeInTheDocument();
762762
});
763763

764-
fireEvent.click(renderResult.getByTestId(SETUP_TECHNOLOGY_SELECTOR_TEST_SUBJ));
765764
fireEvent.click(renderResult.getAllByText('Agentless')[0]);
766765

767766
await act(async () => {

0 commit comments

Comments
 (0)