[Fleet] Remove beta badges from proxies sections and add warning (ela…

…stic#184811) Closes elastic/ingest-dev#3232 ## Summary - Remove beta badges from settings proxies sections - Add a callout message in all previous sections to warn user about proxies usage - Add link to [docs](https://www.elastic.co/guide/en/fleet/master/fleet-agent-proxy-support.html) in proxies table <details> <summary>Screenshots</summary> ### Proxies table ![Screenshot 2024-06-05 at 14 30 50](https://github.com/elastic/kibana/assets/16084106/2f85974a-626d-4dbb-9757-e40555f9dd71) ### Add proxy flyout ![Screenshot 2024-06-05 at 12 32 35](https://github.com/elastic/kibana/assets/16084106/54d085e5-a761-4171-be8a-a8a763f1a02a) ### Edit fleet server flyout ![Screenshot 2024-06-05 at 12 28 01](https://github.com/elastic/kibana/assets/16084106/e9dc075f-4fba-4f2e-b0cb-1576560967a7) ### Add agent binary source flyout ![Screenshot 2024-06-05 at 12 26 30](https://github.com/elastic/kibana/assets/16084106/a452a7a7-c154-4d88-9215-56a1b4950d63) ### Add new output flyout ![Screenshot 2024-06-05 at 12 24 23](https://github.com/elastic/kibana/assets/16084106/6f083394-d0a5-447c-ac1a-b26ac57a9075) </details> ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials --------- Co-authored-by: Kibana Machine <[email protected]>
alexwizp · Jun 6, 2024 · 584362e · 584362e
1 parent 072b29d
commit 584362e
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 99 deletions.
diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts
@@ -859,6 +859,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
       performancePresets: `${FLEET_DOCS}es-output-settings.html#es-output-settings-performance-tuning-settings`,
       scalingKubernetesResourcesAndLimits: `${FLEET_DOCS}scaling-on-kubernetes.html#_specifying_resources_and_limits_in_agent_manifests`,
       roleAndPrivileges: `${FLEET_DOCS}fleet-roles-and-privileges.html`,
+      proxiesSettings: `${FLEET_DOCS}fleet-agent-proxy-support.html`,
     },
     ecs: {
       guide: `${ELASTIC_WEBSITE_URL}guide/en/ecs/${ECS_VERSION}/index.html`,

diff --git a/packages/kbn-doc-links/src/types.ts b/packages/kbn-doc-links/src/types.ts
@@ -552,6 +552,7 @@ export interface DocLinks {
     performancePresets: string;
     scalingKubernetesResourcesAndLimits: string;
     roleAndPrivileges: string;
+    proxiesSettings: string;
   }>;
   readonly ecs: {
     readonly guide: string;

diff --git a/...t/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx b/...t/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx
@@ -24,13 +24,13 @@ import {
   EuiLink,
   EuiSwitch,
   EuiSpacer,
-  EuiBetaBadge,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import type { DownloadSource, FleetProxy } from '../../../../types';
 import { FLYOUT_MAX_WIDTH } from '../../constants';
 import { useBreadcrumbs, useStartServices } from '../../../../hooks';
+import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
 
 import { useDowloadSourceFlyoutForm } from './use_download_source_flyout_form';
 
@@ -142,21 +142,7 @@ export const EditDownloadSourceFlyout: React.FunctionComponent<EditDownloadSourc
             label={
               <FormattedMessage
                 id="xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdLabel"
-                defaultMessage="Proxy {badge}"
-                values={{
-                  badge: (
-                    <EuiBetaBadge
-                      size="s"
-                      className="eui-alignTop"
-                      label={i18n.translate(
-                        'xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge',
-                        {
-                          defaultMessage: 'Beta',
-                        }
-                      )}
-                    />
-                  ),
-                }}
+                defaultMessage="Proxy"
               />
             }
             helpText={
@@ -188,6 +174,8 @@ export const EditDownloadSourceFlyout: React.FunctionComponent<EditDownloadSourc
               )}
             />
           </EuiFormRow>
+          <EuiSpacer size="xs" />
+          <ProxyWarning />
           <EuiSpacer size="m" />
           <EuiFormRow fullWidth {...inputs.defaultDownloadSourceInput.formRowProps}>
             <EuiSwitch

diff --git a/.../public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx b/.../public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx
@@ -19,12 +19,15 @@ import {
   EuiButtonEmpty,
   EuiButton,
   EuiForm,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { FLYOUT_MAX_WIDTH } from '../../constants';
 import type { FleetProxy } from '../../../../types';
 import { TextInput, TextAreaInput } from '../form';
 
+import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
+
 import { useFleetProxyForm } from './use_fleet_proxy_form';
 
 export interface FleetProxyFlyoutProps {
@@ -36,8 +39,6 @@ export const FleetProxyFlyout: React.FunctionComponent<FleetProxyFlyoutProps> =
   onClose,
   fleetProxy,
 }) => {
-  // const { docLinks } = useStartServices();
-
   const form = useFleetProxyForm(fleetProxy, onClose);
   const { inputs } = form;
 
@@ -61,6 +62,8 @@ export const FleetProxyFlyout: React.FunctionComponent<FleetProxyFlyoutProps> =
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
+        <ProxyWarning />
+        <EuiSpacer size="m" />
         <EuiForm onSubmit={form.submit}>
           <TextInput
             label={

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
@@ -28,7 +28,6 @@ import {
   EuiSpacer,
   EuiLink,
   EuiComboBox,
-  EuiBetaBadge,
   EuiText,
   EuiAccordion,
   EuiCode,
@@ -51,6 +50,8 @@ import { FLYOUT_MAX_WIDTH } from '../../constants';
 
 import { useBreadcrumbs, useFleetStatus, useStartServices } from '../../../../hooks';
 
+import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
+
 import { OutputFormKafkaSection } from './output_form_kafka';
 
 import { YamlCodeEditorWithPlaceholder } from './yaml_code_editor_with_placeholder';
@@ -327,45 +328,37 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
               label={
                 <FormattedMessage
                   id="xpack.fleet.settings.editOutputFlyout.proxyIdLabel"
-                  defaultMessage="Proxy {badge}"
-                  values={{
-                    badge: (
-                      <EuiBetaBadge
-                        size="s"
-                        className="eui-alignTop"
-                        label={i18n.translate(
-                          'xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge',
-                          {
-                            defaultMessage: 'Beta',
-                          }
-                        )}
-                      />
-                    ),
-                  }}
+                  defaultMessage="Proxy"
                 />
               }
             >
-              <EuiComboBox
-                fullWidth
-                data-test-subj="settingsOutputsFlyout.proxyIdInput"
-                {...inputs.proxyIdInput.props}
-                onChange={(options) => inputs.proxyIdInput.setValue(options?.[0]?.value ?? '')}
-                selectedOptions={
-                  inputs.proxyIdInput.value !== ''
-                    ? proxiesOptions.filter((option) => option.value === inputs.proxyIdInput.value)
-                    : []
-                }
-                options={proxiesOptions}
-                singleSelection={{ asPlainText: true }}
-                isDisabled={inputs.proxyIdInput.props.disabled}
-                isClearable={true}
-                placeholder={i18n.translate(
-                  'xpack.fleet.settings.editOutputFlyout.proxyIdPlaceholder',
-                  {
-                    defaultMessage: 'Select proxy',
+              <>
+                <EuiComboBox
+                  fullWidth
+                  data-test-subj="settingsOutputsFlyout.proxyIdInput"
+                  {...inputs.proxyIdInput.props}
+                  onChange={(options) => inputs.proxyIdInput.setValue(options?.[0]?.value ?? '')}
+                  selectedOptions={
+                    inputs.proxyIdInput.value !== ''
+                      ? proxiesOptions.filter(
+                          (option) => option.value === inputs.proxyIdInput.value
+                        )
+                      : []
                   }
-                )}
-              />
+                  options={proxiesOptions}
+                  singleSelection={{ asPlainText: true }}
+                  isDisabled={inputs.proxyIdInput.props.disabled}
+                  isClearable={true}
+                  placeholder={i18n.translate(
+                    'xpack.fleet.settings.editOutputFlyout.proxyIdPlaceholder',
+                    {
+                      defaultMessage: 'Select proxy',
+                    }
+                  )}
+                />
+                <EuiSpacer size="xs" />
+                <ProxyWarning />
+              </>
             </EuiFormRow>
           )}
           <EuiFormRow fullWidth {...inputs.defaultOutputInput.formRowProps}>

diff --git a/...lic/applications/fleet/sections/settings/components/fleet_proxies_table/proxy_warning.tsx b/...lic/applications/fleet/sections/settings/components/fleet_proxies_table/proxy_warning.tsx
@@ -0,0 +1,24 @@
+/*
+ * 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 from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiCallOut } from '@elastic/eui';
+
+export const ProxyWarning: React.FunctionComponent<{}> = () => (
+  <EuiCallOut
+    iconType="warning"
+    color="warning"
+    size="s"
+    title={
+      <FormattedMessage
+        id="xpack.fleet.settings.proxyWarning.warningTitle"
+        defaultMessage="Be aware that changing the proxy settings may cause Elastic Agents to lose connectivity. Please ensure that agents have reachability to the proxy in the context that it is being used for."
+      />
+    }
+  />
+);
diff --git a/...ublic/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx b/...ublic/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx
@@ -26,14 +26,14 @@ import {
   EuiSwitch,
   EuiComboBox,
   EuiCallOut,
-  EuiBetaBadge,
 } from '@elastic/eui';
 
 import { MultiRowInput } from '../multi_row_input';
 import { useStartServices } from '../../../../hooks';
 import { FLYOUT_MAX_WIDTH } from '../../constants';
 import type { FleetServerHost, FleetProxy } from '../../../../types';
 import { TextInput } from '../form';
+import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
 
 import { useFleetServerHostsForm } from './use_fleet_server_host_form';
 
@@ -188,45 +188,35 @@ export const FleetServerHostsFlyout: React.FunctionComponent<FleetServerHostsFly
             label={
               <FormattedMessage
                 id="xpack.fleet.settings.fleetServerHostsFlyout.proxyIdLabel"
-                defaultMessage="Proxy {badge}"
-                values={{
-                  badge: (
-                    <EuiBetaBadge
-                      size="s"
-                      className="eui-alignTop"
-                      label={i18n.translate(
-                        'xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge',
-                        {
-                          defaultMessage: 'Beta',
-                        }
-                      )}
-                    />
-                  ),
-                }}
+                defaultMessage="Proxy"
               />
             }
           >
-            <EuiComboBox
-              fullWidth
-              data-test-subj="fleetServerHostsFlyout.proxyIdInput"
-              {...inputs.proxyIdInput.props}
-              onChange={(options) => inputs.proxyIdInput.setValue(options?.[0]?.value ?? '')}
-              selectedOptions={
-                inputs.proxyIdInput.value !== ''
-                  ? proxiesOptions.filter((option) => option.value === inputs.proxyIdInput.value)
-                  : []
-              }
-              options={proxiesOptions}
-              singleSelection={{ asPlainText: true }}
-              isDisabled={inputs.proxyIdInput.props.disabled}
-              isClearable={true}
-              placeholder={i18n.translate(
-                'xpack.fleet.settings.fleetServerHostsFlyout.proxyIdPlaceholder',
-                {
-                  defaultMessage: 'Select proxy',
+            <>
+              <EuiComboBox
+                fullWidth
+                data-test-subj="fleetServerHostsFlyout.proxyIdInput"
+                {...inputs.proxyIdInput.props}
+                onChange={(options) => inputs.proxyIdInput.setValue(options?.[0]?.value ?? '')}
+                selectedOptions={
+                  inputs.proxyIdInput.value !== ''
+                    ? proxiesOptions.filter((option) => option.value === inputs.proxyIdInput.value)
+                    : []
                 }
-              )}
-            />
+                options={proxiesOptions}
+                singleSelection={{ asPlainText: true }}
+                isDisabled={inputs.proxyIdInput.props.disabled}
+                isClearable={true}
+                placeholder={i18n.translate(
+                  'xpack.fleet.settings.fleetServerHostsFlyout.proxyIdPlaceholder',
+                  {
+                    defaultMessage: 'Select proxy',
+                  }
+                )}
+              />
+              <EuiSpacer size="xs" />
+              <ProxyWarning />
+            </>
           </EuiFormRow>
           <EuiFormRow fullWidth {...inputs.isDefaultInput.formRowProps}>
             <EuiSwitch

diff --git a/...c/applications/fleet/sections/settings/components/settings_page/fleet_proxies_section.tsx b/...c/applications/fleet/sections/settings/components/settings_page/fleet_proxies_section.tsx
@@ -13,11 +13,11 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiBetaBadge,
+  EuiLink,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { useAuthz, useLink } from '../../../../hooks';
+import { useAuthz, useLink, useStartServices } from '../../../../hooks';
 import type { FleetProxy } from '../../../../types';
 import { FleetProxiesTable } from '../fleet_proxies_table';
 
@@ -32,6 +32,7 @@ export const FleetProxiesSection: React.FunctionComponent<FleetProxiesSectionPro
 }) => {
   const authz = useAuthz();
   const { getHref } = useLink();
+  const { docLinks } = useStartServices();
 
   return (
     <>
@@ -46,14 +47,21 @@ export const FleetProxiesSection: React.FunctionComponent<FleetProxiesSectionPro
             </h4>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiBetaBadge label="beta" />
-        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiText color="subdued" size="m">
         <FormattedMessage
           id="xpack.fleet.settings.fleetProxiesSection.subtitle"
-          defaultMessage="Specify any proxy URLs to be used in Fleet servers, Outputs or Agent binary download sources."
+          defaultMessage="Specify any proxy URLs to be used in Fleet servers, Outputs or Agent binary download sources. For more information see our {docLink}."
+          values={{
+            docLink: (
+              <EuiLink target="_blank" external href={docLinks.links.fleet.proxiesSettings}>
+                <FormattedMessage
+                  id="xpack.fleet.settings.fleetProxiesSection.link"
+                  defaultMessage="docs"
+                />
+              </EuiLink>
+            ),
+          }}
         />
       </EuiText>
       <EuiSpacer size="m" />

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -18696,7 +18696,6 @@
     "xpack.fleet.settings.editDownloadSourcesFlyout.hostsInputPlaceholder": "Indiquer l’hôte",
     "xpack.fleet.settings.editDownloadSourcesFlyout.nameInputLabel": "Nom",
     "xpack.fleet.settings.editDownloadSourcesFlyout.nameInputPlaceholder": "Indiquer le nom",
-    "xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge": "Bêta",
     "xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdPlaceholder": "Sélectionner un proxy",
     "xpack.fleet.settings.editDownloadSourcesFlyout.proxyInputDescription": "Proxy utilisé pour accéder à la source de téléchargement. Actuellement, seule l’URL du proxy est utilisée, les en-têtes et les certificats ne sont pas compatibles.",
     "xpack.fleet.settings.editDownloadSourcesFlyout.saveButton": "Enregistrer et appliquer les paramètres",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -18675,7 +18675,6 @@
     "xpack.fleet.settings.editDownloadSourcesFlyout.hostsInputPlaceholder": "ホストを指定",
     "xpack.fleet.settings.editDownloadSourcesFlyout.nameInputLabel": "名前",
     "xpack.fleet.settings.editDownloadSourcesFlyout.nameInputPlaceholder": "名前を指定",
-    "xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge": "ベータ",
     "xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdPlaceholder": "プロキシを選択",
     "xpack.fleet.settings.editDownloadSourcesFlyout.proxyInputDescription": "ダウンロードソースへのアクセスに使用されるプロキシ。現在はプロキシURLのみが使用され、ヘッダーや証明書はサポートされていません。",
     "xpack.fleet.settings.editDownloadSourcesFlyout.saveButton": "設定を保存して適用",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -18704,7 +18704,6 @@
     "xpack.fleet.settings.editDownloadSourcesFlyout.hostsInputPlaceholder": "指定主机",
     "xpack.fleet.settings.editDownloadSourcesFlyout.nameInputLabel": "名称",
     "xpack.fleet.settings.editDownloadSourcesFlyout.nameInputPlaceholder": "指定名称",
-    "xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge": "公测版",
     "xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdPlaceholder": "选择代理",
     "xpack.fleet.settings.editDownloadSourcesFlyout.proxyInputDescription": "用于访问下载源的代理。当前仅使用代理 URL，不支持标题和证书。",
     "xpack.fleet.settings.editDownloadSourcesFlyout.saveButton": "保存并应用设置",