From 2cc2056a40cc26941fddf03eff674ba9c2a6d976 Mon Sep 17 00:00:00 2001
From: criamico <mariacristina.amico@elastic.co>
Date: Fri, 28 Oct 2022 18:03:35 +0200
Subject: [PATCH] [Fleet] Update landing page for add fleet server

---
 .../hooks/use_fleet_server_host.ts            |  8 ++
 .../hooks/use_quick_start_form.ts             |  6 +-
 .../fleet_server_instructions/index.tsx       | 75 ++++++++++++++++---
 .../steps/get_started.tsx                     | 14 ++++
 .../fleet_server_requirement_page.tsx         |  4 +-
 .../fleet_server_hosts_section.tsx            | 12 ++-
 6 files changed, 101 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_fleet_server_host.ts b/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_fleet_server_host.ts
index 23f8942454b17..34df4465358e4 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_fleet_server_host.ts
+++ b/x-pack/plugins/fleet/public/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/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_quick_start_form.ts b/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_quick_start_form.ts
index f3167b977d312..ed893e5d06d65 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_quick_start_form.ts
+++ b/x-pack/plugins/fleet/public/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/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 bb0c2607cfe1a..136e414930bbd 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
@@ -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,69 @@ 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.fleetServerFlyout.title"
+                defaultMessage="Add a Fleet Server"
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiText>
+            <FormattedMessage
+              id="xpack.fleet.fleetServerFlyout.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.agentList.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="addFleetServerButton">
+              <FormattedMessage
+                id="xpack.fleet.agentList.addFleetServerButton"
+                defaultMessage="Add Fleet Server"
+              />
+            </EuiButton>
+          </EuiToolTip>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </ContentWrapper>
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/get_started.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/get_started.tsx
index 07a34be899796..3224874ea0b95 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/get_started.tsx
+++ b/x-pack/plugins/fleet/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" />
 
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx
index b4818a6908adf..fe089a6669c27 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx
@@ -15,7 +15,7 @@ import { FleetServerMissingPrivileges } from '../components/fleet_server_callout
 
 import { Loading } from '../components';
 
-import { FleetServerInstructions } from '../../../components';
+import { AddFleetServerLanding } from '../../../components';
 
 import { CloudInstructions, EnrollmentRecommendation } from './components';
 
@@ -78,7 +78,7 @@ export const FleetServerRequirementPage: React.FunctionComponent<
           ) : showEnrollmentRecommendation ? (
             <EnrollmentRecommendation showStandaloneTab={showStandaloneTab} />
           ) : (
-            <FleetServerInstructions />
+            <AddFleetServerLanding />
           )}
         </FlexItemWithMinWidth>
       </ContentWrapper>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/settings_page/fleet_server_hosts_section.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/settings_page/fleet_server_hosts_section.tsx
index 1114efb814a21..806df98d517b3 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/settings_page/fleet_server_hosts_section.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/settings_page/fleet_server_hosts_section.tsx
@@ -5,13 +5,13 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { EuiTitle, EuiLink, EuiText, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import type { FleetServerHost } from '../../../../types';
-import { useLink, useStartServices } from '../../../../hooks';
+import { useFlyoutContext, useStartServices } from '../../../../hooks';
 import { FleetServerHostsTable } from '../fleet_server_hosts_table';
 
 export interface FleetServerHostsSectionProps {
@@ -24,7 +24,11 @@ export const FleetServerHostsSection: React.FunctionComponent<FleetServerHostsSe
   deleteFleetServerHost,
 }) => {
   const { docLinks } = useStartServices();
-  const { getHref } = useLink();
+  const flyoutContext = useFlyoutContext();
+
+  const onClickAddFleetServer = useCallback(() => {
+    flyoutContext.openFleetServerFlyout();
+  }, [flyoutContext]);
 
   return (
     <>
@@ -61,7 +65,7 @@ export const FleetServerHostsSection: React.FunctionComponent<FleetServerHostsSe
       <EuiSpacer size="s" />
       <EuiButtonEmpty
         iconType="plusInCircle"
-        href={getHref('settings_create_fleet_server_hosts')}
+        onClick={onClickAddFleetServer}
         data-test-subj="settings.fleetServerHosts.addFleetServerHostBtn"
       >
         <FormattedMessage