From babe0dd83c3a962d81e7ff7697990b9d1e3fa24e Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Mon, 16 May 2022 14:34:13 -0400 Subject: [PATCH 1/3] 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: , + 'data-test-subj': 'fleetServerFlyoutTab-quickStart', }; const advancedTab = { id: 'advanced', - name: 'Advanced', + label: 'Advanced', content: , + '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<{ /> - - - - {tabs.map((tab) => ( - onTabClick(tab.id)} - > - {tab.name} - - ))} - + + + onTabClick(id)} + css={` + max-width: 500px; + `} + /> ); }; From a4b6e6af571856270f8ee3add7b77ed81d679887 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Mon, 16 May 2022 19:35:59 -0400 Subject: [PATCH 2/3] Fix storyshots --- .../fleet/components/fleet_server_instructions/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 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 3c44d067e9ebd..2f1414fc63724 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 @@ -108,9 +108,7 @@ const Header: React.FunctionComponent<{ options={tabs} idSelected={currentTabId} onChange={(id) => onTabClick(id)} - css={` - max-width: 500px; - `} + style={{ maxWidth: '500px' }} /> ); From c576746b99aaa7b553a4b58b48937f81417bea29 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Tue, 17 May 2022 09:28:34 -0400 Subject: [PATCH 3/3] Fix cypress tests --- .../fleet/cypress/integration/fleet_startup.spec.ts | 10 +++++++++- .../components/fleet_server_instructions/index.tsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/fleet/cypress/integration/fleet_startup.spec.ts b/x-pack/plugins/fleet/cypress/integration/fleet_startup.spec.ts index c269d1fe2ba2d..7d7f0d1c5119c 100644 --- a/x-pack/plugins/fleet/cypress/integration/fleet_startup.spec.ts +++ b/x-pack/plugins/fleet/cypress/integration/fleet_startup.spec.ts @@ -80,6 +80,11 @@ describe('Fleet startup', () => { cy.getBySel('fleetServerFlyoutTab-advanced').click(); cy.getBySel('createFleetServerPolicyBtn').click(); + // Wait until the success callout is shown before navigating away + cy.getBySel('agentPolicyCreateStatusCallOut') + .should('exist') + .and('have.class', 'euiCallOut--success'); + // verify policy is created and has fleet server and system package verifyPolicy('Fleet Server policy 1', ['Fleet Server', 'System']); @@ -90,7 +95,10 @@ describe('Fleet startup', () => { cy.getBySel('agentPolicyDropdown'); // verify fleet server enroll command contains created policy id - cy.getBySel('fleetServerHostInput').type('https://localhost:8220'); + cy.getBySel('fleetServerHostInput') + .getBySel('comboBoxSearchInput') + .type('https://localhost:8220'); + cy.getBySel('fleetServerAddHostBtn').click(); cy.getBySel('fleetServerGenerateServiceTokenBtn').click(); cy.get('.euiCodeBlock__code').contains('--fleet-server-policy=fleet-server-policy'); 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 2f1414fc63724..b57dac2ab23f5 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 @@ -49,7 +49,7 @@ const useFleetServerTabs = () => { id: 'advanced', label: 'Advanced', content: , - 'data-test-subj': 'fleetServerFlyoutTab-advancedStart', + 'data-test-subj': 'fleetServerFlyoutTab-advanced', }; const currentTabContent =