[Fleet] Better onboarding experience for Fleet Server on premise (ela…

…stic#103550)

x-pack/plugins/fleet/public/applications/fleet/layouts/default/default.tsx

@@ -17,15 +17,21 @@ import { DefaultPageTitle } from './default_page_title';
 interface Props {
   section?: Section;
   children?: React.ReactNode;
+  rightColumn?: JSX.Element;
 }
 
-export const DefaultLayout: React.FunctionComponent<Props> = ({ section, children }) => {
+export const DefaultLayout: React.FunctionComponent<Props> = ({
+  section,
+  children,
+  rightColumn,
+}) => {
   const { getHref } = useLink();
   const { agents } = useConfig();
 
   return (
     <WithHeaderLayout
       leftColumn={<DefaultPageTitle />}
+      rightColumn={rightColumn}
       tabs={[
         {
           name: (

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

@@ -0,0 +1,116 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect } from 'react';
+import {
+  EuiButton,
+  EuiPanel,
+  EuiLink,
+  EuiEmptyPrompt,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiText,
+  EuiLoadingSpinner,
+  EuiSpacer,
+} from '@elastic/eui';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { useFleetStatus, useStartServices } from '../../../../hooks';
+
+const REFRESH_INTERVAL = 10000;
+
+export const CloudInstructions: React.FC<{ deploymentUrl: string }> = ({ deploymentUrl }) => {
+  const { docLinks } = useStartServices();
+
+  const { refresh } = useFleetStatus();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      refresh();
+    }, REFRESH_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [refresh]);
+
+  return (
+    <>
+      <EuiPanel
+        paddingSize="none"
+        grow={false}
+        hasShadow={false}
+        hasBorder={true}
+        className="eui-textCenter"
+      >
+        <EuiEmptyPrompt
+          title={
+            <h2>
+              <FormattedMessage
+                id="xpack.fleet.fleetServerSetup.cloudSetupTitle"
+                defaultMessage="Enable APM & Fleet"
+              />
+            </h2>
+          }
+          body={
+            <FormattedMessage
+              id="xpack.fleet.fleetServerSetup.cloudSetupText"
+              defaultMessage="A Fleet Server is required before you can enroll agents with Fleet. You can add one to your deployment by enabling APM & Fleet. For more information see the {link}"
+              values={{
+                link: (
+                  <EuiLink
+                    href={docLinks.links.fleet.fleetServerAddFleetServer}
+                    target="_blank"
+                    external
+                  >
+                    <FormattedMessage
+                      id="xpack.fleet.settings.userGuideLink"
+                      defaultMessage="Fleet User Guide"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          }
+          actions={
+            <>
+              <EuiButton
+                iconSide="right"
+                iconType="popout"
+                fill
+                isLoading={false}
+                type="submit"
+                href={`${deploymentUrl}/edit`}
+                target="_blank"
+              >
+                <FormattedMessage
+                  id="xpack.fleet.fleetServerSetup.cloudDeploymentLink"
+                  defaultMessage="Edit deployment"
+                />
+              </EuiButton>
+            </>
+          }
+        />
+      </EuiPanel>
+      <EuiSpacer size="m" />
+      <EuiFlexItem>
+        <EuiFlexGroup justifyContent="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="m" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" color="subdued">
+              <FormattedMessage
+                id="xpack.fleet.fleetServerSetup.waitingText"
+                defaultMessage="Waiting for a Fleet Server to connect..."
+              />
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </>
+  );
+};