[Telemetry] Replace usage of old settings field

src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx

@@ -243,19 +243,19 @@ describe('TelemetryManagementSectionComponent', () => {
       />
     );
     try {
-      const toggleOptInComponent = component.find('Field');
+      const toggleOptInComponent = component.find('FieldRow');
       await expect(
-        toggleOptInComponent.prop<TelemetryManagementSection['toggleOptIn']>('handleChange')()
+        toggleOptInComponent.prop<TelemetryManagementSection['toggleOptIn']>('onFieldChange')()
       ).resolves.toBe(true);
       // TODO: Fix `mountWithIntl` types in @kbn/test-jest-helpers to make testing easier
       expect((component.state() as { enabled: boolean }).enabled).toBe(true);
       await expect(
-        toggleOptInComponent.prop<TelemetryManagementSection['toggleOptIn']>('handleChange')()
+        toggleOptInComponent.prop<TelemetryManagementSection['toggleOptIn']>('onFieldChange')()
       ).resolves.toBe(true);
       expect((component.state() as { enabled: boolean }).enabled).toBe(false);
       telemetryService.setOptIn = jest.fn().mockRejectedValue(Error('test-error'));
       await expect(
-        toggleOptInComponent.prop<TelemetryManagementSection['toggleOptIn']>('handleChange')()
+        toggleOptInComponent.prop<TelemetryManagementSection['toggleOptIn']>('onFieldChange')()
       ).rejects.toStrictEqual(Error('test-error'));
     } finally {
       component.unmount();

src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx

@@ -21,8 +21,12 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import type { TelemetryPluginSetup } from '@kbn/telemetry-plugin/public';
 import type { DocLinksStart, ToastsStart } from '@kbn/core/public';
-import { LazyField } from '@kbn/advanced-settings-plugin/public';
+import { withSuspense } from '@kbn/shared-ux-utility';
 import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
+import { getFieldDefinition } from '@kbn/management-settings-field-definition';
+import { UiSettingMetadata } from '@kbn/management-settings-types';
+import { FieldRowProvider } from '@kbn/management-settings-components-field-row';
+import { ValueValidation } from '@kbn/core-ui-settings-browser/src/types';
 import { OptInExampleFlyout } from './opt_in_example_flyout';
 
 type TelemetryService = TelemetryPluginSetup['telemetryService'];
@@ -42,6 +46,12 @@ interface State {
   enabled: boolean;
 }
 
+const LazyFieldRow = React.lazy(async () => ({
+  default: (await import('@kbn/management-settings-components-field-row')).FieldRow,
+}));
+
+const FieldRow = withSuspense(LazyFieldRow);
+
 export class TelemetryManagementSection extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -62,6 +72,24 @@ export class TelemetryManagementSection extends Component<Props, State> {
       return null;
     }
 
+    const usageCollectionSetting: UiSettingMetadata = {
+      type: 'boolean',
+      value: true,
+      userValue: enabled,
+      name: i18n.translate('telemetry.provideUsageDataTitle', {
+        defaultMessage: 'Share usage with Elastic',
+      }),
+      // @ts-expect-error
+      description: this.renderDescription(),
+      requiresPageReload: false,
+    };
+
+    // We don't validate the user input on these settings
+    const settingsValidationResponse: ValueValidation = {
+      successfulValidation: true,
+      valid: true,
+    };
+
     return (
       <Fragment>
         {showExample && (
@@ -90,30 +118,23 @@ export class TelemetryManagementSection extends Component<Props, State> {
             <EuiSplitPanel.Inner>
               {this.maybeGetAppliesSettingMessage()}
               <EuiSpacer size="s" />
-              <LazyField
-                setting={{
-                  type: 'boolean',
-                  name: 'Usage collection',
-                  displayName: i18n.translate('telemetry.provideUsageDataTitle', {
-                    defaultMessage: 'Share usage with Elastic',
-                  }),
-                  value: enabled,
-                  description: this.renderDescription(),
-                  defVal: true,
-                  ariaName: i18n.translate('telemetry.provideUsageDataAriaName', {
-                    defaultMessage: 'Share usage with Elastic',
-                  }),
-                  requiresPageReload: false,
-                  category: [],
-                  isOverridden: false,
-                  isCustom: true,
+              <FieldRowProvider
+                {...{
+                  links: this.props.docLinks.management,
+                  showDanger: (message: string) => this.props.toasts.addDanger(message),
+                  validateChange: async () => settingsValidationResponse,
                 }}
-                loading={processing}
-                docLinks={this.props.docLinks}
-                toasts={this.props.toasts}
-                handleChange={this.toggleOptIn}
-                enableSaving={this.props.enableSaving}
-              />
+              >
+                <FieldRow
+                  field={getFieldDefinition({
+                    id: 'Usage collection',
+                    setting: usageCollectionSetting,
+                    params: { isOverridden: false, isCustom: true },
+                  })}
+                  isSavingEnabled={this.props.enableSaving && !processing}
+                  onFieldChange={this.toggleOptIn}
+                />
+              </FieldRowProvider>
             </EuiSplitPanel.Inner>
           </EuiForm>
         </EuiSplitPanel.Outer>

src/plugins/telemetry_management_section/tsconfig.json

@@ -18,6 +18,11 @@
     "@kbn/i18n-react",
     "@kbn/i18n",
     "@kbn/management-settings-section-registry",
+    "@kbn/shared-ux-utility",
+    "@kbn/management-settings-field-definition",
+    "@kbn/management-settings-types",
+    "@kbn/management-settings-components-field-row",
+    "@kbn/core-ui-settings-browser",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/translations/translations/fr-FR.json

@@ -5564,7 +5564,6 @@
     "telemetry.optInNoticeSeenErrorToastText": "Une erreur s'est produite lors du rejet de l'avis.",
     "telemetry.optInSuccessOff": "Ne partage plus l’utilisation avec Elastic.",
     "telemetry.optInSuccessOn": "Le partage d’utilisation avec Elastic est activé.",
-    "telemetry.provideUsageDataAriaName": "Partager l’utilisation avec Elastic",
     "telemetry.provideUsageDataTitle": "Partager l’utilisation avec Elastic",
     "telemetry.readOurUsageDataPrivacyStatementLinkText": "Déclaration de confidentialité",
     "telemetry.securityData": "données de sécurité",

x-pack/plugins/translations/translations/ja-JP.json

@@ -5579,7 +5579,6 @@
     "telemetry.optInNoticeSeenErrorToastText": "通知の消去中にエラーが発生しました",
     "telemetry.optInSuccessOff": "Elasticと使用状況が共有されることはありません。",
     "telemetry.optInSuccessOn": "Elasticとの使用状況の共有は有効です。",
-    "telemetry.provideUsageDataAriaName": "Elasticと使用状況を共有",
     "telemetry.provideUsageDataTitle": "Elasticと使用状況を共有",
     "telemetry.readOurUsageDataPrivacyStatementLinkText": "プライバシーポリシー",
     "telemetry.securityData": "セキュリティデータ",

x-pack/plugins/translations/translations/zh-CN.json

@@ -5672,7 +5672,6 @@
     "telemetry.optInNoticeSeenErrorToastText": "关闭声明时发生错误",
     "telemetry.optInSuccessOff": "不再与 Elastic 共享使用情况。",
     "telemetry.optInSuccessOn": "已启用与 Elastic 共享使用情况。",
-    "telemetry.provideUsageDataAriaName": "与 Elastic 共享使用情况",
     "telemetry.provideUsageDataTitle": "与 Elastic 共享使用情况",
     "telemetry.readOurUsageDataPrivacyStatementLinkText": "隐私声明",
     "telemetry.securityData": "安全数据",