[Fleet] Replace Select with GroupButtons to show available platforms (#114818)

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/components/fleet_server_on_prem_instructions.tsx

@@ -22,6 +22,7 @@ import {
   EuiFieldText,
   EuiForm,
   EuiFormErrorText,
+  EuiButtonGroup,
 } from '@elastic/eui';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 import styled from 'styled-components';
@@ -193,19 +194,11 @@ export const FleetServerCommandStep = ({
           />
         </EuiText>
         <EuiSpacer size="l" />
-        <EuiSelect
-          prepend={
-            <EuiText>
-              <FormattedMessage
-                id="xpack.fleet.fleetServerSetup.platformSelectLabel"
-                defaultMessage="Platform"
-              />
-            </EuiText>
-          }
+        <EuiButtonGroup
           options={PLATFORM_OPTIONS}
-          value={platform}
-          onChange={(e) => setPlatform(e.target.value as PLATFORM_TYPE)}
-          aria-label={i18n.translate('xpack.fleet.fleetServerSetup.platformSelectAriaLabel', {
+          idSelected={platform}
+          onChange={(id) => setPlatform(id as PLATFORM_TYPE)}
+          legend={i18n.translate('xpack.fleet.fleetServerSetup.platformSelectAriaLabel', {
             defaultMessage: 'Platform',
           })}
         />

x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { EuiText, EuiSpacer, EuiLink, EuiCodeBlock, EuiSelect } from '@elastic/eui';
+import { EuiText, EuiSpacer, EuiLink, EuiCodeBlock, EuiButtonGroup } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
@@ -51,19 +51,11 @@ export const ManualInstructions: React.FunctionComponent<Props> = ({
         />
       </EuiText>
       <EuiSpacer size="l" />
-      <EuiSelect
-        prepend={
-          <EuiText>
-            <FormattedMessage
-              id="xpack.fleet.enrollmentInstructions.platformSelectLabel"
-              defaultMessage="Platform"
-            />
-          </EuiText>
-        }
+      <EuiButtonGroup
         options={PLATFORM_OPTIONS}
-        value={platform}
-        onChange={(e) => setPlatform(e.target.value as PLATFORM_TYPE)}
-        aria-label={i18n.translate('xpack.fleet.enrollmentInstructions.platformSelectAriaLabel', {
+        idSelected={platform}
+        onChange={(id) => setPlatform(id as PLATFORM_TYPE)}
+        legend={i18n.translate('xpack.fleet.enrollmentInstructions.platformSelectAriaLabel', {
           defaultMessage: 'Platform',
         })}
       />

x-pack/plugins/fleet/public/hooks/use_platform.tsx

@@ -6,12 +6,36 @@
  */
 
 import { useState } from 'react';
+import { i18n } from '@kbn/i18n';
 
 export type PLATFORM_TYPE = 'linux-mac' | 'windows' | 'rpm-deb';
-export const PLATFORM_OPTIONS: Array<{ text: string; value: PLATFORM_TYPE }> = [
-  { text: 'Linux / macOS', value: 'linux-mac' },
-  { text: 'Windows', value: 'windows' },
-  { text: 'RPM / DEB', value: 'rpm-deb' },
+
+export const PLATFORM_OPTIONS: Array<{
+  label: string;
+  id: PLATFORM_TYPE;
+  'data-test-subj'?: string;
+}> = [
+  {
+    id: 'linux-mac',
+    label: i18n.translate('xpack.fleet.enrollmentInstructions.platformButtons.linux', {
+      defaultMessage: 'Linux / macOS',
+    }),
+    'data-test-subj': 'platformTypeLinux',
+  },
+  {
+    id: 'windows',
+    label: i18n.translate('xpack.fleet.enrollmentInstructions.platformButtons.windows', {
+      defaultMessage: 'Windows',
+    }),
+    'data-test-subj': 'platformTypeWindows',
+  },
+  {
+    id: 'rpm-deb',
+    label: i18n.translate('xpack.fleet.enrollmentInstructions.platformButtons.rpm', {
+      defaultMessage: 'RPM / DEB',
+    }),
+    'data-test-subj': 'platformTypeRpm',
+  },
 ];
 
 export function usePlatform() {

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

@@ -10959,7 +10959,6 @@
     "xpack.fleet.enrollmentInstructions.moreInstructionsLink": "Elastic エージェントドキュメント",
     "xpack.fleet.enrollmentInstructions.moreInstructionsText": "RPM/DEB デプロイの手順については、{link}を参照してください。",
     "xpack.fleet.enrollmentInstructions.platformSelectAriaLabel": "プラットフォーム",
-    "xpack.fleet.enrollmentInstructions.platformSelectLabel": "プラットフォーム",
     "xpack.fleet.enrollmentInstructions.troubleshootingLink": "トラブルシューティングガイド",
     "xpack.fleet.enrollmentInstructions.troubleshootingText": "接続の問題が発生している場合は、{link}を参照してください。",
     "xpack.fleet.enrollmentStepAgentPolicy.enrollmentTokenSelectLabel": "登録トークン",
@@ -11056,7 +11055,6 @@
     "xpack.fleet.fleetServerSetup.generateServiceTokenDescription": "サービストークンは、Elasticsearchに書き込むためのFleetサーバーアクセス権を付与します。",
     "xpack.fleet.fleetServerSetup.installAgentDescription": "エージェントディレクトリから、適切なクイックスタートコマンドをコピーして実行し、生成されたトークンと自己署名証明書を使用して、ElasticエージェントをFleetサーバーとして起動します。本番デプロイで独自の証明書を使用する手順については、{userGuideLink}を参照してください。すべてのコマンドには管理者権限が必要です。",
     "xpack.fleet.fleetServerSetup.platformSelectAriaLabel": "プラットフォーム",
-    "xpack.fleet.fleetServerSetup.platformSelectLabel": "プラットフォーム",
     "xpack.fleet.fleetServerSetup.productionText": "本番運用",
     "xpack.fleet.fleetServerSetup.quickStartText": "クイックスタート",
     "xpack.fleet.fleetServerSetup.saveServiceTokenDescription": "サービストークン情報を保存します。これは1回だけ表示されます。",

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

@@ -11074,7 +11074,6 @@
     "xpack.fleet.enrollmentInstructions.moreInstructionsLink": "Elastic 代理文档",
     "xpack.fleet.enrollmentInstructions.moreInstructionsText": "有关 RPM/DEB 部署说明，请参见 {link}。",
     "xpack.fleet.enrollmentInstructions.platformSelectAriaLabel": "平台",
-    "xpack.fleet.enrollmentInstructions.platformSelectLabel": "平台",
     "xpack.fleet.enrollmentInstructions.troubleshootingLink": "故障排除指南",
     "xpack.fleet.enrollmentInstructions.troubleshootingText": "如果有连接问题，请参阅我们的{link}。",
     "xpack.fleet.enrollmentStepAgentPolicy.enrollmentTokenSelectLabel": "注册令牌",
@@ -11171,7 +11170,6 @@
     "xpack.fleet.fleetServerSetup.generateServiceTokenDescription": "服务令牌授予 Fleet 服务器向 Elasticsearch 写入的权限。",
     "xpack.fleet.fleetServerSetup.installAgentDescription": "从代理目录中，复制并运行适当的快速启动命令，以使用生成的令牌和自签名证书将 Elastic 代理启动为 Fleet 服务器。有关如何将自己的证书用于生产部署，请参阅 {userGuideLink}。所有命令都需要管理员权限。",
     "xpack.fleet.fleetServerSetup.platformSelectAriaLabel": "平台",
-    "xpack.fleet.fleetServerSetup.platformSelectLabel": "平台",
     "xpack.fleet.fleetServerSetup.productionText": "生产",
     "xpack.fleet.fleetServerSetup.quickStartText": "快速启动",
     "xpack.fleet.fleetServerSetup.saveServiceTokenDescription": "保存服务令牌信息。其仅显示一次。",