[UII] Allow components to be used for configured settings description (…

…#183203) ## Summary Spinning out a few unrelated tweaks from the work for #180778. This PR: - In addition to strings, allows React components to be used for configured settings `description` - Fixes small i18n issues - Fixes some setting names to have sentence casing and adjust some description copies - Moves deprecated unenrollment timeout setting to bottom of list Screenshot with all changes: ![image](https://github.com/elastic/kibana/assets/1965714/0c7b692b-e47f-4013-a95c-6ec49f5976e4) --------- Co-authored-by: Julia Bardi <[email protected]>
elastic · May 13, 2024 · fd101bf · fd101bf
1 parent e141190
commit fd101bf
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 69 deletions.
diff --git a/x-pack/plugins/fleet/common/settings/agent_policy_settings.ts b/x-pack/plugins/fleet/common/settings/agent_policy_settings.ts
@@ -27,10 +27,10 @@ export const AGENT_POLICY_ADVANCED_SETTINGS: SettingsConfig[] = [
   {
     name: 'agent.limits.go_max_procs',
     title: i18n.translate('xpack.fleet.settings.agentPolicyAdvanced.goMaxProcsTitle', {
-      defaultMessage: 'GO_MAX_PROCS',
+      defaultMessage: 'Limit CPU usage',
     }),
     description: i18n.translate('xpack.fleet.settings.agentPolicyAdvanced.goMaxProcsDescription', {
-      defaultMessage: 'Limits the maximum number of CPUs that can be executing simultaneously',
+      defaultMessage: 'Limits the maximum number of CPUs that can be executing simultaneously.',
     }),
     learnMoreLink:
       'https://www.elastic.co/guide/en/fleet/current/enable-custom-policy-settings.html#limit-cpu-usage',
@@ -48,7 +48,7 @@ export const AGENT_POLICY_ADVANCED_SETTINGS: SettingsConfig[] = [
     description: i18n.translate(
       'xpack.fleet.settings.agentPolicyAdvanced.downloadTimeoutDescription',
       {
-        defaultMessage: 'Timeout for downloading the agent binary',
+        defaultMessage: 'Timeout for downloading the agent binary.',
       }
     ),
     learnMoreLink:
@@ -73,7 +73,7 @@ export const AGENT_POLICY_ADVANCED_SETTINGS: SettingsConfig[] = [
     description: i18n.translate(
       'xpack.fleet.settings.agentPolicyAdvanced.agentDownloadTargetDirectoryDescription',
       {
-        defaultMessage: 'The disk path to which the agent binary will be downloaded',
+        defaultMessage: 'The disk path to which the agent binary will be downloaded.',
       }
     ),
     learnMoreLink:
@@ -95,7 +95,7 @@ export const AGENT_POLICY_ADVANCED_SETTINGS: SettingsConfig[] = [
     description: i18n.translate(
       'xpack.fleet.settings.agentPolicyAdvanced.agentLoggingMetricsPeriodDescription',
       {
-        defaultMessage: 'The frequency of agent metrics logging',
+        defaultMessage: 'The frequency of logging the internal Elastic Agent metrics.',
       }
     ),
     learnMoreLink:
@@ -114,7 +114,7 @@ export const AGENT_POLICY_ADVANCED_SETTINGS: SettingsConfig[] = [
     description: i18n.translate(
       'xpack.fleet.settings.agentPolicyAdvanced.agentMonitoringHttpDescription',
       {
-        defaultMessage: 'Agent HTTP monitoring settings',
+        defaultMessage: 'Agent HTTP monitoring settings.',
       }
     ),
     learnMoreLink:
@@ -132,13 +132,13 @@ export const AGENT_POLICY_ADVANCED_SETTINGS: SettingsConfig[] = [
     name: 'agent.logging.level',
     hidden: true,
     title: i18n.translate('xpack.fleet.settings.agentPolicyAdvanced.agentLoggingLevelTitle', {
-      defaultMessage: 'Agent Logging Level',
+      defaultMessage: 'Agent logging level',
     }),
     description: i18n.translate(
       'xpack.fleet.settings.agentPolicyAdvanced.agentLoggingLevelDescription',
       {
         defaultMessage:
-          'Sets the log level for all the agents on the policy. The default log level is "info"',
+          'Sets the log level for all the agents on the policy. The default log level is "info".',
       }
     ),
     api_field: {

diff --git a/x-pack/plugins/fleet/common/settings/types.ts b/x-pack/plugins/fleet/common/settings/types.ts
@@ -12,7 +12,7 @@ export type SettingsSection = 'AGENT_POLICY_ADVANCED_SETTINGS';
 export interface SettingsConfig {
   name: string;
   title: string;
-  description: string;
+  description: string | React.ReactNode;
   learnMoreLink?: string;
   schema: z.ZodTypeAny;
   api_field: {

diff --git a/...ugins/fleet/public/applications/fleet/components/form_settings/settings_field_wrapper.tsx b/...ugins/fleet/public/applications/fleet/components/form_settings/settings_field_wrapper.tsx
@@ -7,6 +7,7 @@
 
 import { z, ZodFirstPartyTypeKind } from 'zod';
 import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiDescribedFormGroup, EuiFormRow, EuiLink } from '@elastic/eui';
 
 import type { SettingsConfig } from '../../../../../common/settings/types';
@@ -75,10 +76,13 @@ export const SettingsFieldWrapper: React.FC<{
       title={<h4>{settingsConfig.title}</h4>}
       description={
         <>
-          {settingsConfig.description}.{' '}
+          {settingsConfig.description}{' '}
           {settingsConfig.learnMoreLink && (
             <EuiLink href={settingsConfig.learnMoreLink} external>
-              Learn more.
+              <FormattedMessage
+                id="xpack.fleet.configuredSettings.learnMoreLinkText"
+                defaultMessage="Learn more."
+              />
             </EuiLink>
           )}
         </>

diff --git a/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx b/...pplications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
@@ -138,7 +138,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
               <FormattedMessage
                 id="xpack.fleet.agentPolicyForm.tamperingSwitchLabel"
                 defaultMessage="Prevent agent tampering"
-              />
+              />{' '}
               {!policyHasElasticDefend && (
                 <span data-test-subj="tamperMissingIntegrationTooltip">
                   <EuiIconTip
@@ -587,7 +587,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
           <h3>
             <FormattedMessage
               id="xpack.fleet.agentPolicyForm.downloadSourceLabel"
-              defaultMessage="Agent Binary Download"
+              defaultMessage="Agent binary download"
               data-test-subj="agentPolicyForm.downloadSource.label"
             />
           </h3>
@@ -624,62 +624,6 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
-      <EuiDescribedFormGroup
-        title={
-          <h3>
-            <FormattedMessage
-              id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutLabel"
-              defaultMessage="Unenrollment timeout"
-            />
-            &nbsp;
-            <EuiToolTip
-              content={i18n.translate('xpack.fleet.agentPolicyForm.unenrollmentTimeoutTooltip', {
-                defaultMessage:
-                  'This setting is deprecated and will be removed in a future release. Consider using inactivity timeout instead',
-              })}
-            >
-              <EuiBetaBadge
-                label={i18n.translate(
-                  'xpack.fleet.agentPolicyForm.unenrollmentTimeoutDeprecatedLabel',
-                  { defaultMessage: 'Deprecated' }
-                )}
-                size="s"
-              />
-            </EuiToolTip>
-          </h3>
-        }
-        description={
-          <FormattedMessage
-            id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutDescription"
-            defaultMessage="An optional timeout in seconds. If provided, and fleet server is below version 8.7.0, an agent will automatically unenroll after being gone for this period of time."
-          />
-        }
-      >
-        <EuiFormRow
-          fullWidth
-          error={
-            touchedFields.unenroll_timeout && validation.unenroll_timeout
-              ? validation.unenroll_timeout
-              : null
-          }
-          isInvalid={Boolean(touchedFields.unenroll_timeout && validation.unenroll_timeout)}
-          isDisabled={disabled}
-        >
-          <EuiFieldNumber
-            fullWidth
-            disabled={disabled || agentPolicy.is_managed === true}
-            value={agentPolicy.unenroll_timeout || ''}
-            min={0}
-            onChange={(e) => {
-              updateAgentPolicy({
-                unenroll_timeout: e.target.value ? Number(e.target.value) : 0,
-              });
-            }}
-            isInvalid={Boolean(touchedFields.unenroll_timeout && validation.unenroll_timeout)}
-            onBlur={() => setTouchedFields({ ...touchedFields, unenroll_timeout: true })}
-          />
-        </EuiFormRow>
-      </EuiDescribedFormGroup>
       <EuiDescribedFormGroup
         title={
           <h3>
@@ -766,6 +710,62 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
+      <EuiDescribedFormGroup
+        title={
+          <h3>
+            <FormattedMessage
+              id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutLabel"
+              defaultMessage="Unenrollment timeout"
+            />
+            &nbsp;
+            <EuiToolTip
+              content={i18n.translate('xpack.fleet.agentPolicyForm.unenrollmentTimeoutTooltip', {
+                defaultMessage:
+                  'This setting is deprecated and will be removed in a future release. Consider using inactivity timeout instead',
+              })}
+            >
+              <EuiBetaBadge
+                label={i18n.translate(
+                  'xpack.fleet.agentPolicyForm.unenrollmentTimeoutDeprecatedLabel',
+                  { defaultMessage: 'Deprecated' }
+                )}
+                size="s"
+              />
+            </EuiToolTip>
+          </h3>
+        }
+        description={
+          <FormattedMessage
+            id="xpack.fleet.agentPolicyForm.unenrollmentTimeoutDescription"
+            defaultMessage="An optional timeout in seconds. If provided, and fleet server is below version 8.7.0, an agent will automatically unenroll after being gone for this period of time."
+          />
+        }
+      >
+        <EuiFormRow
+          fullWidth
+          error={
+            touchedFields.unenroll_timeout && validation.unenroll_timeout
+              ? validation.unenroll_timeout
+              : null
+          }
+          isInvalid={Boolean(touchedFields.unenroll_timeout && validation.unenroll_timeout)}
+          isDisabled={disabled}
+        >
+          <EuiFieldNumber
+            fullWidth
+            disabled={disabled || agentPolicy.is_managed === true}
+            value={agentPolicy.unenroll_timeout || ''}
+            min={0}
+            onChange={(e) => {
+              updateAgentPolicy({
+                unenroll_timeout: e.target.value ? Number(e.target.value) : 0,
+              });
+            }}
+            isInvalid={Boolean(touchedFields.unenroll_timeout && validation.unenroll_timeout)}
+            onBlur={() => setTouchedFields({ ...touchedFields, unenroll_timeout: true })}
+          />
+        </EuiFormRow>
+      </EuiDescribedFormGroup>
       <EuiSpacer size="l" />
     </>
   );