[UiSettings] Add technical preview badge configuration for advance settings (#225620)

## 📓 Summary

From the o11y team, we wanted to have a technical preview badge
available next to our new advanced settings.

Historically, new settings in technical preview have been created added
some custom text in the description, which is not much highlighted.

To align with the design definition and make this available to every
solution, a new `technicalPreview` option is available when configuring
a setting now:

```ts
type TechnicalPreviewSettings =
  | boolean
  | {
      /** Technical Preview custom message */
      message?: string;
      /** Key to documentation links */
      docLinksKey?: string;
    };

interface UISettingsParams {
// ...
/** A flag indicating that this setting is a technical preview. If true, the setting will display a tech preview badge after the title. */
  technicalPreview?: TechnicalPreviewSettings;
}
```

This has been applied to most of the detected settings in technical
preview.

<img width="3005" alt="Screenshot 2025-06-27 at 13 12 00"
src="https://github.com/user-attachments/assets/5e8a4770-3926-4017-acb7-30cd05db6eab"
/>

Author: tonyghiani

src/core/packages/ui-settings/common/index.ts

@@ -16,6 +16,7 @@ export type {
   UserProvidedValues,
   UiSettingsScope,
   GetUiSettingsContext,
+  TechnicalPreviewSettings,
 } from './src/ui_settings';
 export { type DarkModeValue, parseDarkModeValue } from './src/dark_mode';
 export {

src/core/packages/ui-settings/common/src/ui_settings.ts

@@ -46,6 +46,19 @@ export interface DeprecationSettings {
   docLinksKey: string;
 }
 
+/**
+ * Type for the technical preview settings.
+ * @public
+ * */
+export type TechnicalPreviewSettings =
+  | boolean
+  | {
+      /** Technical Preview message */
+      message?: string;
+      /** Key to documentation links */
+      docLinksKey?: string;
+    };
+
 export interface GetUiSettingsContext {
   request?: KibanaRequest;
 }
@@ -86,6 +99,8 @@ export interface UiSettingsParams<T = unknown> {
   type?: UiSettingsType;
   /** optional deprecation information. Used to generate a deprecation warning. */
   deprecation?: DeprecationSettings;
+  /** A flag indicating that this setting is a technical preview. If true, the setting will display a tech preview badge after the title. */
+  technicalPreview?: TechnicalPreviewSettings;
   /**
    * index of the settings within its category (ascending order, smallest will be displayed first).
    * Used for ordering in the UI.

src/platform/packages/shared/kbn-management/settings/components/field_row/field_row.test.tsx

@@ -329,6 +329,42 @@ describe('Field', () => {
         expect(getByText('Custom setting')).toBeInTheDocument();
       });
 
+      it('should render technical preview badge if it is technical preview', () => {
+        const { getByText } = render(
+          wrap(
+            <FieldRow
+              field={getFieldDefinition({
+                id,
+                setting: { ...setting, technicalPreview: true },
+                params: { isCustom: true },
+              })}
+              onFieldChange={handleChange}
+              isSavingEnabled={true}
+            />
+          )
+        );
+
+        expect(getByText('Technical preview')).toBeInTheDocument();
+      });
+
+      it('should NOT render technical preview badge if the technicalPreview is false or unspecified', () => {
+        const { queryByText } = render(
+          wrap(
+            <FieldRow
+              field={getFieldDefinition({
+                id,
+                setting,
+                params: { isCustom: true },
+              })}
+              onFieldChange={handleChange}
+              isSavingEnabled={true}
+            />
+          )
+        );
+
+        expect(queryByText('Technical preview')).not.toBeInTheDocument();
+      });
+
       it('should render unsaved value if there are unsaved changes', () => {
         const { getByTestId, getByAltText } = render(
           wrap(

src/platform/packages/shared/kbn-management/settings/components/field_row/field_row.tsx

@@ -50,6 +50,7 @@ type Definition<T extends SettingType = SettingType> = Pick<
   | 'name'
   | 'savedValue'
   | 'type'
+  | 'technicalPreview'
   | 'unsavedFieldId'
 >;
 

src/platform/packages/shared/kbn-management/settings/components/field_row/title/technical_preview_badge.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+
+import { EuiBetaBadge, EuiBetaBadgeProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { FieldDefinition, SettingType } from '@kbn/management-settings-types';
+import { isBoolean } from 'lodash';
+
+/**
+ * Props for a {@link FieldTitle} component.
+ */
+export interface TechnicalPreviewBadgeProps<T extends SettingType> {
+  /** The {@link FieldDefinition} corresponding the setting. */
+  field: Pick<FieldDefinition<T>, 'technicalPreview'>;
+}
+
+const defaultLabel = i18n.translate('management.settings.field.technicalPreviewLabel', {
+  defaultMessage: 'Technical preview',
+});
+
+const defaultTooltip = i18n.translate('management.settings.technicalPreviewDefaultTooltip', {
+  defaultMessage:
+    'This functionality is in technical preview. It may change or be removed in a future release.',
+});
+
+const badgeBaseProps: Pick<EuiBetaBadgeProps, 'alignment' | 'label' | 'size'> = {
+  alignment: 'middle',
+  label: defaultLabel,
+  size: 's',
+};
+
+/**
+ *
+ */
+export const FieldTitleTechnicalPreviewBadge = <T extends SettingType>({
+  field,
+}: TechnicalPreviewBadgeProps<T>) => {
+  if (!field.technicalPreview) {
+    return null;
+  }
+
+  if (isBoolean(field.technicalPreview)) {
+    return <EuiBetaBadge {...badgeBaseProps} tooltipContent={defaultTooltip} />;
+  }
+
+  if (!field.technicalPreview.docLinksKey) {
+    return (
+      <EuiBetaBadge
+        {...badgeBaseProps}
+        tooltipContent={field.technicalPreview.message || defaultTooltip}
+      />
+    );
+  }
+
+  return (
+    <EuiBetaBadge
+      {...badgeBaseProps}
+      tooltipContent={field.technicalPreview.message || defaultTooltip}
+      href={field.technicalPreview.docLinksKey}
+      target="_blank"
+    />
+  );
+};

src/platform/packages/shared/kbn-management/settings/components/field_row/title/title.tsx

@@ -17,6 +17,7 @@ import { FieldDefinition, UnsavedFieldChange, SettingType } from '@kbn/managemen
 import { useFieldStyles } from '../field_row.styles';
 import { FieldTitleCustomIcon } from './icon_custom';
 import { FieldTitleUnsavedIcon } from './icon_unsaved';
+import { FieldTitleTechnicalPreviewBadge } from './technical_preview_badge';
 
 /**
  * Props for a {@link FieldTitle} component.
@@ -25,7 +26,7 @@ export interface TitleProps<T extends SettingType> {
   /** The {@link FieldDefinition} corresponding the setting. */
   field: Pick<
     FieldDefinition<T>,
-    'displayName' | 'savedValue' | 'isCustom' | 'id' | 'type' | 'isOverridden'
+    'displayName' | 'savedValue' | 'isCustom' | 'id' | 'type' | 'isOverridden' | 'technicalPreview'
   >;
   /** Emotion-based `css` for the root React element. */
   css?: Interpolation<Theme>;
@@ -50,16 +51,13 @@ export const FieldTitle = <T extends SettingType>({
   });
 
   return (
-    <EuiFlexGroup gutterSize="xs" alignItems="center">
+    <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false} css={cssFieldTitle}>
         <h3 {...props}>{field.displayName}</h3>
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <FieldTitleCustomIcon {...{ field }} />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <FieldTitleUnsavedIcon {...{ field, unsavedChange }} />
-      </EuiFlexItem>
+      <FieldTitleTechnicalPreviewBadge {...{ field }} />
+      <FieldTitleCustomIcon {...{ field }} />
+      <FieldTitleUnsavedIcon {...{ field, unsavedChange }} />
     </EuiFlexGroup>
   );
 };

src/platform/packages/shared/kbn-management/settings/field_definition/get_definition.ts

@@ -103,6 +103,7 @@ export const getFieldDefinition = <T extends SettingType>(
     userValue: savedValue,
     value: defaultValue,
     solution,
+    technicalPreview,
   } = setting;
 
   const { isCustom, isOverridden } = params;
@@ -146,6 +147,7 @@ export const getFieldDefinition = <T extends SettingType>(
     type,
     unsavedFieldId: `${id}-unsaved`,
     solution,
+    technicalPreview,
   };
 
   // TODO: clintandrewhall - add validation (e.g. `select` contains non-empty `options`)

src/platform/packages/shared/kbn-management/settings/types/field_definition.ts

@@ -10,7 +10,11 @@
 import { ReactElement } from 'react';
 
 import { UiCounterMetricType } from '@kbn/analytics';
-import { DeprecationSettings, UiSettingsSolution } from '@kbn/core-ui-settings-common';
+import {
+  DeprecationSettings,
+  TechnicalPreviewSettings,
+  UiSettingsSolution,
+} from '@kbn/core-ui-settings-common';
 
 import { KnownTypeToValue, SettingType } from './setting_type';
 
@@ -93,6 +97,11 @@ export interface FieldDefinition<
    * @see {@link UiSettingsSolution}
    */
   solution?: UiSettingsSolution;
+  /**
+   * Technical preview information for the field
+   * @see {@link TechnicalPreviewSettings}
+   */
+  technicalPreview?: TechnicalPreviewSettings;
 }
 
 /**

src/platform/plugins/shared/ai_assistant_management/selection/server/plugin.ts

@@ -58,10 +58,7 @@ export class AIAssistantManagementSelectionPlugin
           'aiAssistantManagementSelection.preferredAIAssistantTypeSettingDescription',
           {
             defaultMessage:
-              '<em>[technical preview]</em> Whether to show the AI Assistant menu item in Observability and Search, everywhere, or nowhere.',
-            values: {
-              em: (chunks) => `<em>${chunks}</em>`,
-            },
+              'Whether to show the AI Assistant menu item in Observability and Search, everywhere, or nowhere.',
           }
         ),
         schema: schema.oneOf(
@@ -90,6 +87,7 @@ export class AIAssistantManagementSelectionPlugin
         },
         requiresPageReload: true,
         solution: 'oblt',
+        technicalPreview: true,
       },
     });