From babe0dd83c3a962d81e7ff7697990b9d1e3fa24e Mon Sep 17 00:00:00 2001
From: Kyle Pollich <kyle.pollich@elastic.co>
Date: Mon, 16 May 2022 14:34:13 -0400
Subject: [PATCH] Swap Fleet Server tabs to EuiButtonGroup

---
 .../fleet_server_instructions/index.tsx       | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx
index 6c48b499b9553..3c44d067e9ebd 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx
@@ -7,14 +7,13 @@
 
 import React, { useState } from 'react';
 import {
+  EuiButtonGroup,
   EuiFlexGroup,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiLink,
   EuiSpacer,
-  EuiTab,
-  EuiTabs,
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
@@ -41,14 +40,16 @@ const useFleetServerTabs = () => {
 
   const quickStartTab = {
     id: 'quickStart',
-    name: 'Quick Start',
+    label: 'Quick Start',
     content: <QuickStartTab />,
+    'data-test-subj': 'fleetServerFlyoutTab-quickStart',
   };
 
   const advancedTab = {
     id: 'advanced',
-    name: 'Advanced',
+    label: 'Advanced',
     content: <AdvancedTab />,
+    'data-test-subj': 'fleetServerFlyoutTab-advancedStart',
   };
 
   const currentTabContent =
@@ -60,7 +61,7 @@ const useFleetServerTabs = () => {
 const Header: React.FunctionComponent<{
   isFlyout?: boolean;
   currentTab: string;
-  tabs: Array<{ id: string; name: string; content: React.ReactNode }>;
+  tabs: Array<{ id: string; label: string; content: React.ReactNode }>;
   onTabClick: (id: string) => void;
 }> = ({ isFlyout = false, currentTab: currentTabId, tabs, onTabClick }) => {
   const { docLinks } = useStartServices();
@@ -99,21 +100,18 @@ const Header: React.FunctionComponent<{
         />
       </EuiText>
 
-      <EuiSpacer size="m" />
-
-      <EuiTabs style={{ marginBottom: isFlyout ? '-25px' : '' }}>
-        {tabs.map((tab) => (
-          <EuiTab
-            key={`fleetServerFlyoutTab-${tab.id}`}
-            data-test-subj={`fleetServerFlyoutTab-${tab.id}`}
-            id={tab.id}
-            isSelected={tab.id === currentTabId}
-            onClick={() => onTabClick(tab.id)}
-          >
-            {tab.name}
-          </EuiTab>
-        ))}
-      </EuiTabs>
+      <EuiSpacer size="xl" />
+
+      <EuiButtonGroup
+        legend="Fleet Server instructions"
+        isFullWidth
+        options={tabs}
+        idSelected={currentTabId}
+        onChange={(id) => onTabClick(id)}
+        css={`
+          max-width: 500px;
+        `}
+      />
     </>
   );
 };