[Fleet] Add Fleet Settings link to the output section (elastic#165678)

## Summary Update the fleet output page and add links for users. Update the fleet ES output page and add link for the custom yaml box Co-authored-by: julienlind <[email protected]>
kibanamachine · Sep 6, 2023 · b48dc84 · b48dc84
1 parent e8699ce
commit b48dc84
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts
@@ -728,6 +728,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       settings: `${FLEET_DOCS}fleet-settings.html`,
       kafkaSettings: `${FLEET_DOCS}kafka-output-settings.html`,
       logstashSettings: `${FLEET_DOCS}ls-output-settings.html`,
+      esSettings: `${FLEET_DOCS}es-output-settings.html`,
       settingsFleetServerHostSettings: `${FLEET_DOCS}fleet-settings.html#fleet-server-hosts-setting`,
       settingsFleetServerProxySettings: `${KIBANA_DOCS}fleet-settings-kb.html#fleet-data-visualizer-settings`,
       troubleshooting: `${FLEET_DOCS}fleet-troubleshooting.html`,

diff --git a/packages/kbn-doc-links/src/types.ts b/packages/kbn-doc-links/src/types.ts
@@ -489,6 +489,7 @@ export interface DocLinks {
     guide: string;
     fleetServer: string;
     fleetServerAddFleetServer: string;
+    esSettings: string;
     settings: string;
     logstashSettings: string;
     kafkaSettings: string;

diff --git a/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
@@ -424,9 +424,13 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
             />
           </EuiFormRow>
           <EuiFormRow
-            label={i18n.translate('xpack.fleet.settings.editOutputFlyout.yamlConfigInputLabel', {
-              defaultMessage: 'Advanced YAML configuration',
-            })}
+            label={
+              <EuiLink href={docLinks.links.fleet.esSettings} external target="_blank">
+                {i18n.translate('xpack.fleet.settings.editOutputFlyout.yamlConfigInputLabel', {
+                  defaultMessage: 'Advanced YAML configuration',
+                })}
+              </EuiLink>
+            }
             {...inputs.additionalYamlConfigInput.formRowProps}
             fullWidth
           >

diff --git a/...t/public/applications/fleet/sections/settings/components/settings_page/output_section.tsx b/...t/public/applications/fleet/sections/settings/components/settings_page/output_section.tsx
@@ -6,10 +6,10 @@
  */
 
 import React from 'react';
-import { EuiTitle, EuiText, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
+import { EuiTitle, EuiText, EuiSpacer, EuiButtonEmpty, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { useLink } from '../../../../hooks';
+import { useLink, useStartServices } from '../../../../hooks';
 import type { Output } from '../../../../types';
 import { OutputsTable } from '../outputs_table';
 
@@ -23,6 +23,7 @@ export const OutputSection: React.FunctionComponent<OutputSectionProps> = ({
   deleteOutput,
 }) => {
   const { getHref } = useLink();
+  const { docLinks } = useStartServices();
 
   return (
     <>
@@ -33,10 +34,12 @@ export const OutputSection: React.FunctionComponent<OutputSectionProps> = ({
       </EuiTitle>
       <EuiSpacer size="xs" />
       <EuiText color="subdued" size="m">
-        <FormattedMessage
-          id="xpack.fleet.settings.outputSectionSubtitle"
-          defaultMessage="Specify where agents will send data."
-        />
+        <EuiLink href={docLinks.links.fleet.settings} external target="_blank">
+          <FormattedMessage
+            id="xpack.fleet.settings.outputSectionSubtitle"
+            defaultMessage="Specify where agents will send data."
+          />
+        </EuiLink>
       </EuiText>
       <EuiSpacer size="m" />
       <OutputsTable outputs={outputs} deleteOutput={deleteOutput} />