[Fleet] Update landing page for add fleet server (#144179)

* [Fleet] Update landing page for add fleet server * Fix cypress tests * Fix test and add max-width to text Co-authored-by: Kibana Machine <[email protected]>
elastic · Nov 3, 2022 · 992a69c · 992a69c
1 parent 2594349
commit 992a69c
Show file tree

Hide file tree

Showing 11 changed files with 162 additions and 29 deletions.
diff --git a/x-pack/plugins/fleet/cypress/e2e/a11y/home_page.cy.ts b/x-pack/plugins/fleet/cypress/e2e/a11y/home_page.cy.ts
@@ -25,16 +25,20 @@ import {
   SETTINGS_TAB,
   SETTINGS_FLEET_SERVER_HOST_HEADING,
   FLEET_SERVER_SETUP,
+  LANDING_PAGE_ADD_FLEET_SERVER_BUTTON,
 } from '../../screens/fleet';
 import { AGENT_POLICY_NAME_LINK } from '../../screens/integrations';
 import { cleanupAgentPolicies, unenrollAgent } from '../../tasks/cleanup';
 describe('Home page', () => {
   before(() => {
     navigateTo(FLEET);
-    cy.getBySel(AGENT_FLYOUT.QUICK_START_TAB_BUTTON, { timeout: 15000 }).should('be.visible');
+    cy.getBySel(LANDING_PAGE_ADD_FLEET_SERVER_BUTTON).click();
   });
 
   describe('Agents', () => {
+    before(() => {
+      cy.getBySel(AGENT_FLYOUT.QUICK_START_TAB_BUTTON, { timeout: 15000 }).should('be.visible');
+    });
     const fleetServerHost = 'https://localhost:8220';
 
     describe('Quick Start', () => {
@@ -46,7 +50,9 @@ describe('Home page', () => {
         cy.get('[placeholder="Specify host URL"', { timeout: 15000 }).should('be.visible');
         cy.get('[placeholder="Specify host URL"').type(fleetServerHost);
         cy.getBySel(GENERATE_FLEET_SERVER_POLICY_BUTTON).click();
-        cy.getBySel(PLATFORM_TYPE_LINUX_BUTTON, { timeout: 15000 }).should('be.visible');
+        cy.getBySel(PLATFORM_TYPE_LINUX_BUTTON, { timeout: 15000 })
+          .scrollIntoView()
+          .should('be.visible');
         checkA11y({ skipFailures: false });
       });
     });
@@ -67,14 +73,17 @@ describe('Home page', () => {
       it('Generate service token', () => {
         cy.getBySel(ADVANCED_FLEET_SERVER_ADD_HOST_BUTTON, { timeout: 15000 }).should('be.visible');
         cy.getBySel(ADVANCED_FLEET_SERVER_GENERATE_SERVICE_TOKEN_BUTTON).click();
-        cy.getBySel(PLATFORM_TYPE_LINUX_BUTTON, { timeout: 15000 }).should('be.visible');
+        cy.getBySel(PLATFORM_TYPE_LINUX_BUTTON, { timeout: 15000 })
+          .scrollIntoView()
+          .should('be.visible');
         checkA11y({ skipFailures: false });
       });
     });
   });
 
   describe('Agent Policies', () => {
     before(() => {
+      navigateTo(FLEET);
       cy.getBySel(AGENT_POLICIES_TAB).click();
       cy.getBySel(AGENT_POLICIES_CREATE_AGENT_POLICY_FLYOUT.CREATE_BUTTON, {
         timeout: 15000,
@@ -104,6 +113,7 @@ describe('Home page', () => {
 
   describe('Enrollment Tokens', () => {
     before(() => {
+      navigateTo(FLEET);
       cy.getBySel(ENROLLMENT_TOKENS_TAB).click();
     });
     it('Enrollment Tokens Table', () => {

diff --git a/x-pack/plugins/fleet/cypress/e2e/fleet_settings.cy.ts b/x-pack/plugins/fleet/cypress/e2e/fleet_settings.cy.ts
@@ -11,6 +11,8 @@ import {
   SETTINGS_OUTPUTS,
   SETTINGS_FLEET_SERVER_HOSTS,
   FLEET_SERVER_HOST_FLYOUT,
+  FLEET_SERVER_SETUP,
+  GENERATE_FLEET_SERVER_POLICY_BUTTON,
 } from '../screens/fleet';
 
 describe('Edit settings', () => {
@@ -45,19 +47,39 @@ describe('Edit settings', () => {
   });
 
   it('should allow to update Fleet server hosts', () => {
+    cy.getBySel(SETTINGS_FLEET_SERVER_HOSTS.EDIT_BUTTON).click();
+
+    cy.getBySel(FLEET_SERVER_HOST_FLYOUT.NAME_INPUT).clear().type('Edited Host');
+
+    cy.get('[placeholder="Specify host URL"').clear().type('https://localhost:8221');
+
+    cy.intercept('PUT', '/api/fleet/fleet_server_hosts/fleet-default-settings', {
+      name: 'Edited Host',
+      host_urls: ['https://localhost:8221'],
+      is_default: false,
+    }).as('updateFleetServerHosts');
+
+    cy.getBySel(SETTINGS_SAVE_BTN).click();
+    cy.getBySel(CONFIRM_MODAL.CONFIRM_BUTTON).click();
+
+    cy.wait('@updateFleetServerHosts').then((interception) => {
+      expect(interception.request.body.host_urls[0]).to.equal('https://localhost:8221');
+    });
+  });
+
+  it('should allow to create new Fleet server hosts', () => {
     cy.getBySel(SETTINGS_FLEET_SERVER_HOSTS.ADD_BUTTON).click();
-    cy.getBySel(FLEET_SERVER_HOST_FLYOUT.NAME_INPUT).type('Host edited');
-    cy.getBySel(FLEET_SERVER_HOST_FLYOUT.DEFAULT_SWITCH).click();
+    cy.getBySel(FLEET_SERVER_SETUP.NAME_INPUT).type('New Host');
+    cy.getBySel(FLEET_SERVER_SETUP.DEFAULT_SWITCH).click();
     cy.get('[placeholder="Specify host URL"').type('https://localhost:8221');
 
     cy.intercept('POST', '/api/fleet/fleet_server_hosts', {
-      name: 'Host edited',
+      name: 'New Host',
       host_urls: ['https://localhost:8221'],
       is_default: true,
     }).as('updateFleetServerHosts');
 
-    cy.getBySel(SETTINGS_SAVE_BTN).click();
-    cy.getBySel(CONFIRM_MODAL.CONFIRM_BUTTON).click();
+    cy.getBySel(GENERATE_FLEET_SERVER_POLICY_BUTTON).click();
 
     cy.wait('@updateFleetServerHosts').then((interception) => {
       expect(interception.request.body.host_urls[0]).to.equal('https://localhost:8221');

diff --git a/x-pack/plugins/fleet/cypress/e2e/fleet_startup.cy.ts b/x-pack/plugins/fleet/cypress/e2e/fleet_startup.cy.ts
@@ -14,6 +14,7 @@ import {
   ADVANCED_FLEET_SERVER_ADD_HOST_BUTTON,
   ADVANCED_FLEET_SERVER_GENERATE_SERVICE_TOKEN_BUTTON,
   FLEET_SERVER_SETUP,
+  LANDING_PAGE_ADD_FLEET_SERVER_BUTTON,
 } from '../screens/fleet';
 import { cleanupAgentPolicies, unenrollAgent } from '../tasks/cleanup';
 import { verifyPolicy, verifyAgentPackage, navigateToTab } from '../tasks/fleet';
@@ -80,18 +81,23 @@ describe('Fleet startup', () => {
     });
 
     it('should create Fleet Server policy', () => {
+      cy.getBySel(LANDING_PAGE_ADD_FLEET_SERVER_BUTTON).click();
+
       cy.getBySel(AGENT_FLYOUT.ADVANCED_TAB_BUTTON).click();
-      cy.getBySel(CREATE_FLEET_SERVER_POLICY_BTN).click();
+      cy.getBySel(CREATE_FLEET_SERVER_POLICY_BTN, { timeout: 180000 }).click();
 
       // Wait until the success callout is shown before navigating away
       cy.getBySel(AGENT_POLICY_CREATE_STATUS_CALLOUT)
         .should('exist')
         .and('have.class', 'euiCallOut--success');
+      cy.getBySel(AGENT_FLYOUT.CLOSE_BUTTON).click();
 
       // verify policy is created and has fleet server and system package
       verifyPolicy('Fleet Server policy 1', ['Fleet Server', 'System']);
 
+      // Reopen Flyout
       navigateToTab(AGENTS_TAB);
+      cy.getBySel(LANDING_PAGE_ADD_FLEET_SERVER_BUTTON).click();
       cy.getBySel(AGENT_FLYOUT.ADVANCED_TAB_BUTTON).click();
 
       // verify create button changed to dropdown

diff --git a/x-pack/plugins/fleet/cypress/screens/fleet.ts b/x-pack/plugins/fleet/cypress/screens/fleet.ts
@@ -7,6 +7,7 @@
 
 export const ADD_AGENT_BUTTON = 'addAgentButton';
 export const ADD_AGENT_BUTTON_TOP = 'addAgentBtnTop';
+export const LANDING_PAGE_ADD_FLEET_SERVER_BUTTON = 'fleetServerLanding.addFleetServerButton';
 
 export const AGENTS_TAB = 'fleet-agents-tab';
 export const AGENT_POLICIES_TAB = 'fleet-agent-policies-tab';
@@ -102,6 +103,7 @@ export const SETTINGS_OUTPUTS = {
 
 export const SETTINGS_FLEET_SERVER_HOSTS = {
   ADD_BUTTON: 'settings.fleetServerHosts.addFleetServerHostBtn',
+  EDIT_BUTTON: 'fleetServerHostsTable.edit.btn',
 };
 
 export const AGENT_POLICY_FORM = {
@@ -126,4 +128,5 @@ export const FLEET_SERVER_HOST_FLYOUT = {
 export const FLEET_SERVER_SETUP = {
   NAME_INPUT: 'fleetServerSetup.nameInput',
   HOST_INPUT: 'fleetServerSetup.multiRowInput',
+  DEFAULT_SWITCH: 'fleetServerHostsFlyout.isDefaultSwitch',
 };
diff --git a/...ic/applications/fleet/components/fleet_server_instructions/hooks/use_fleet_server_host.ts b/...ic/applications/fleet/components/fleet_server_instructions/hooks/use_fleet_server_host.ts
@@ -13,6 +13,7 @@ import {
   useGetFleetServerHosts,
   useComboInput,
   useInput,
+  useSwitchInput,
 } from '../../../hooks';
 import type { FleetServerHost } from '../../../types';
 
@@ -31,6 +32,7 @@ export interface FleetServerHostForm {
   inputs: {
     hostUrlsInput: ReturnType<typeof useComboInput>;
     nameInput: ReturnType<typeof useInput>;
+    isDefaultInput: ReturnType<typeof useSwitchInput>;
   };
 }
 
@@ -41,6 +43,11 @@ export const useFleetServerHost = (): FleetServerHostForm => {
   const isPreconfigured = fleetServerHost?.is_preconfigured ?? false;
   const nameInput = useInput(fleetServerHost?.name ?? '', validateName, isPreconfigured);
 
+  const isDefaultInput = useSwitchInput(
+    fleetServerHost?.is_default ?? false,
+    isPreconfigured || fleetServerHost?.is_default
+  );
+
   const hostUrlsInput = useComboInput(
     'hostUrls',
     fleetServerHost?.host_urls || [],
@@ -105,6 +112,7 @@ export const useFleetServerHost = (): FleetServerHostForm => {
     inputs: {
       hostUrlsInput,
       nameInput,
+      isDefaultInput,
     },
   };
 };
diff --git a/...lic/applications/fleet/components/fleet_server_instructions/hooks/use_quick_start_form.ts b/...lic/applications/fleet/components/fleet_server_instructions/hooks/use_quick_start_form.ts
@@ -8,7 +8,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import type { useComboInput, useInput } from '../../../hooks';
+import type { useComboInput, useInput, useSwitchInput } from '../../../hooks';
 import { sendCreateAgentPolicy, sendGetOneAgentPolicy, useStartServices } from '../../../hooks';
 
 import type { NewAgentPolicy } from '../../../types';
@@ -42,6 +42,7 @@ export interface QuickStartCreateForm {
   inputs: {
     hostUrlsInput: ReturnType<typeof useComboInput>;
     nameInput: ReturnType<typeof useInput>;
+    isDefaultInput: ReturnType<typeof useSwitchInput>;
   };
 }
 
@@ -84,7 +85,7 @@ export const useQuickStartCreateForm = (): QuickStartCreateForm => {
         const newFleetServerHost = {
           name: inputs.nameInput.value,
           host_urls: inputs.hostUrlsInput.value,
-          is_default: true,
+          is_default: inputs.isDefaultInput.value,
           id: 'fleet-server-host',
           is_preconfigured: false,
         };
@@ -125,6 +126,7 @@ export const useQuickStartCreateForm = (): QuickStartCreateForm => {
     validate,
     inputs.nameInput.value,
     inputs.hostUrlsInput.value,
+    inputs.isDefaultInput.value,
     setFleetServerHost,
     saveFleetServerHost,
     generateServiceToken,

diff --git a/...ck/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx b/...ck/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import {
   EuiButtonGroup,
   EuiFlexGroup,
@@ -16,12 +16,15 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiToolTip,
+  EuiFlexItem,
+  EuiButton,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import styled from 'styled-components';
 
-import { useStartServices } from '../../hooks';
+import { useStartServices, useFlyoutContext } from '../../hooks';
 
 import { QuickStartTab } from './quick_start_tab';
 import { AdvancedTab } from './advanced_tab';
@@ -134,17 +137,78 @@ export const FleetServerFlyout: React.FunctionComponent<Props> = ({ onClose }) =
   );
 };
 
-// Renders instructions directly
-export const FleetServerInstructions: React.FunctionComponent = () => {
-  const { tabs, currentTab, setCurrentTab, currentTabContent } = useFleetServerTabs();
+export const AddFleetServerLanding: React.FunctionComponent = () => {
+  const { docLinks } = useStartServices();
+  const flyoutContext = useFlyoutContext();
+
+  const onClickAddFleetServer = useCallback(() => {
+    flyoutContext.openFleetServerFlyout();
+  }, [flyoutContext]);
 
   return (
     <ContentWrapper gutterSize="none" justifyContent="center" direction="column">
-      <Header tabs={tabs} currentTab={currentTab} onTabClick={(id) => setCurrentTab(id)} />
-
-      <EuiSpacer size="m" />
-
-      {currentTabContent}
+      <EuiFlexGroup alignItems="center" direction="column">
+        <EuiFlexItem>
+          <EuiTitle size="m">
+            <h2 data-test-subj="addFleetServerHeader">
+              <FormattedMessage
+                id="xpack.fleet.fleetServerLanding.title"
+                defaultMessage="Add a Fleet Server"
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiText
+            css={`
+              max-width: 500px;
+              text-align: center;
+            `}
+          >
+            <FormattedMessage
+              id="xpack.fleet.fleetServerLanding.instructions"
+              defaultMessage="A Fleet Server is required before you can enroll agents with Fleet. Follow the instructions below to set up a Fleet Server. For more information, see the {userGuideLink}"
+              values={{
+                userGuideLink: (
+                  <EuiLink
+                    href={docLinks.links.fleet.fleetServerAddFleetServer}
+                    external
+                    target="_blank"
+                  >
+                    <FormattedMessage
+                      id="xpack.fleet.fleetServerSetup.setupGuideLink"
+                      defaultMessage="Fleet and Elastic Agent Guide"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+        <EuiSpacer size="s" />
+        <EuiFlexItem>
+          <EuiToolTip
+            content={
+              <FormattedMessage
+                id="xpack.fleet.fleetServerLanding.addFleetServerButton.tooltip"
+                defaultMessage="Fleet Server is a component of the Elastic Stack used to centrally manage Elastic Agents"
+              />
+            }
+          >
+            <EuiButton
+              onClick={onClickAddFleetServer}
+              fill
+              data-test-subj="fleetServerLanding.addFleetServerButton"
+            >
+              <FormattedMessage
+                id="xpack.fleet.fleetServerLanding.addFleetServerButton"
+                defaultMessage="Add Fleet Server"
+              />
+            </EuiButton>
+          </EuiToolTip>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </ContentWrapper>
   );
 };
diff --git a/...t/public/applications/fleet/components/fleet_server_instructions/instructions.stories.tsx b/...t/public/applications/fleet/components/fleet_server_instructions/instructions.stories.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 
-import { FleetServerInstructions as FleetServerInstructionsComponent } from '.';
+import { AddFleetServerLanding } from '.';
 
 export const FleetServerInstructions = () => {
-  return <FleetServerInstructionsComponent />;
+  return <AddFleetServerLanding />;
 };
 
 FleetServerInstructions.args = {

diff --git a/...leet/public/applications/fleet/components/fleet_server_instructions/steps/get_started.tsx b/...leet/public/applications/fleet/components/fleet_server_instructions/steps/get_started.tsx
@@ -19,6 +19,7 @@ import {
   EuiText,
   EuiFormRow,
   EuiFieldText,
+  EuiSwitch,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -133,6 +134,19 @@ const GettingStartedStepContent: React.FunctionComponent<QuickStartCreateForm> =
             {status === 'error' && <EuiFormErrorText>{error}</EuiFormErrorText>}
           </>
         </EuiFormRow>
+        <EuiFormRow fullWidth {...inputs.isDefaultInput.formRowProps}>
+          <EuiSwitch
+            data-test-subj="fleetServerHostsFlyout.isDefaultSwitch"
+            {...inputs.isDefaultInput.props}
+            disabled={false}
+            label={
+              <FormattedMessage
+                id="xpack.fleet.settings.fleetServerHostsFlyout.defaultOutputSwitchLabel"
+                defaultMessage="Make this Fleet server the default one."
+              />
+            }
+          />
+        </EuiFormRow>
 
         <EuiSpacer size="m" />