From ddaea57a2f4b1c9b4432ceb2034a05c0a4da4590 Mon Sep 17 00:00:00 2001
From: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
Date: Wed, 17 Jan 2024 11:29:04 +0000
Subject: [PATCH] [Telemetry] Replace usage of old settings field (#174782)

Addresses https://github.com/elastic/kibana/issues/172922

## Summary

The `src/plugins/advanced_settings` plugin will soon be removed and
completely replaced by the new settings packages:
`packages/kbn-management/settings`. This PR replaces the usages of the
old Advanced settings `Field` component in the telemetry plugin.

<img width="1217" alt="Screenshot 2024-01-12 at 15 02 56"
src="https://github.com/elastic/kibana/assets/59341489/45a4a084-33ad-425c-b137-5acfe3c8bd3d">

**How to test:**
1. Start Es and Kibana
2. Go to Stack Management -> Advanced settings -> Global Settings
3. Verify that the "Usage collection" setting field renders and works as
expected.

Note: There is also a
[usage](https://github.com/elastic/kibana/blob/5a32eb0a7f56e53b1ade3f85311694ddc203dd28/src/plugins/telemetry_management_section/public/plugin.tsx#L20)
of `AdvancedSettingsSetup` in the telemetry setup contract - this will
be replaced in a future PR when we register the Advanced settings
application from the `management` plugin.


<!---
### Checklist

Delete any items that are not applicable to this PR.

- [ ] 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
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 ...telemetry_management_section.test.tsx.snap | 178 +++++++++---------
 .../telemetry_management_section.test.tsx     |   8 +-
 .../telemetry_management_section.tsx          |  69 ++++---
 .../tsconfig.json                             |   5 +
 .../translations/translations/fr-FR.json      |   1 -
 .../translations/translations/ja-JP.json      |   1 -
 .../translations/translations/zh-CN.json      |   1 -
 7 files changed, 144 insertions(+), 119 deletions(-)

diff --git a/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap b/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
index 430cf538779b6..55c9a27ce0df9 100644
--- a/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
+++ b/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
@@ -44,97 +44,99 @@ exports[`TelemetryManagementSectionComponent renders as expected 1`] = `
         <EuiSpacer
           size="s"
         />
-        <lazy
-          docLinks={
-            Object {
-              "legal": Object {
-                "privacyStatement": "https://some-host/some-url",
-              },
-            }
-          }
-          enableSaving={true}
-          handleChange={[Function]}
-          loading={false}
-          setting={
-            Object {
-              "ariaName": "Share usage with Elastic",
-              "category": Array [],
-              "defVal": true,
-              "description": <React.Fragment>
-                <p>
-                  <FormattedMessage
-                    defaultMessage="Enabling usage collection allows us to learn what our users are most interested in, so we can improve our products and services. Refer to our {privacyStatementLink}."
-                    id="telemetry.telemetryConfigAndLinkDescription"
-                    values={
-                      Object {
-                        "privacyStatementLink": <EuiLink
-                          href="https://some-host/some-url"
-                          target="_blank"
-                        >
-                          <FormattedMessage
-                            defaultMessage="Privacy Statement"
-                            id="telemetry.readOurUsageDataPrivacyStatementLinkText"
-                            values={Object {}}
-                          />
-                        </EuiLink>,
+        <FieldRowProvider
+          showDanger={[Function]}
+          validateChange={[Function]}
+        >
+          <ForwardRef
+            field={
+              Object {
+                "ariaAttributes": Object {
+                  "ariaLabel": "Share usage with Elastic",
+                },
+                "categories": Array [
+                  "general",
+                ],
+                "defaultValue": true,
+                "defaultValueDisplay": "true",
+                "deprecation": undefined,
+                "description": <React.Fragment>
+                  <p>
+                    <FormattedMessage
+                      defaultMessage="Enabling usage collection allows us to learn what our users are most interested in, so we can improve our products and services. Refer to our {privacyStatementLink}."
+                      id="telemetry.telemetryConfigAndLinkDescription"
+                      values={
+                        Object {
+                          "privacyStatementLink": <EuiLink
+                            href="https://some-host/some-url"
+                            target="_blank"
+                          >
+                            <FormattedMessage
+                              defaultMessage="Privacy Statement"
+                              id="telemetry.readOurUsageDataPrivacyStatementLinkText"
+                              values={Object {}}
+                            />
+                          </EuiLink>,
+                        }
                       }
-                    }
-                  />
-                </p>
-                <p>
-                  <FormattedMessage
-                    defaultMessage="See examples of the {clusterData} and {securityData} that we collect."
-                    id="telemetry.seeExampleOfClusterDataAndEndpointSecuity"
-                    values={
-                      Object {
-                        "clusterData": <EuiLink
-                          data-test-id="cluster_data_example"
-                          onClick={[Function]}
-                        >
-                          <FormattedMessage
-                            defaultMessage="cluster data"
-                            id="telemetry.clusterData"
-                            values={Object {}}
-                          />
-                        </EuiLink>,
-                        "securityData": <EuiLink
-                          data-test-id="endpoint_security_example"
-                          href="https://www.elastic.co/guide/en/security/current/advanced-settings.html#telemetry-settings"
-                          target="_blank"
-                        >
-                          <FormattedMessage
-                            defaultMessage="security data"
-                            id="telemetry.securityData"
-                            values={Object {}}
-                          />
-                        </EuiLink>,
+                    />
+                  </p>
+                  <p>
+                    <FormattedMessage
+                      defaultMessage="See examples of the {clusterData} and {securityData} that we collect."
+                      id="telemetry.seeExampleOfClusterDataAndEndpointSecuity"
+                      values={
+                        Object {
+                          "clusterData": <EuiLink
+                            data-test-id="cluster_data_example"
+                            onClick={[Function]}
+                          >
+                            <FormattedMessage
+                              defaultMessage="cluster data"
+                              id="telemetry.clusterData"
+                              values={Object {}}
+                            />
+                          </EuiLink>,
+                          "securityData": <EuiLink
+                            data-test-id="endpoint_security_example"
+                            href="https://www.elastic.co/guide/en/security/current/advanced-settings.html#telemetry-settings"
+                            target="_blank"
+                          >
+                            <FormattedMessage
+                              defaultMessage="security data"
+                              id="telemetry.securityData"
+                              values={Object {}}
+                            />
+                          </EuiLink>,
+                        }
                       }
-                    }
-                  />
-                </p>
-              </React.Fragment>,
-              "displayName": "Share usage with Elastic",
-              "isCustom": true,
-              "isOverridden": false,
-              "name": "Usage collection",
-              "requiresPageReload": false,
-              "type": "boolean",
-              "value": true,
-            }
-          }
-          toasts={
-            Object {
-              "add": [MockFunction],
-              "addDanger": [MockFunction],
-              "addError": [MockFunction],
-              "addInfo": [MockFunction],
-              "addSuccess": [MockFunction],
-              "addWarning": [MockFunction],
-              "get$": [MockFunction],
-              "remove": [MockFunction],
+                    />
+                  </p>
+                </React.Fragment>,
+                "displayName": "Share usage with Elastic",
+                "groupId": "Share usage with Elastic-group",
+                "id": "Usage collection",
+                "isCustom": true,
+                "isDefaultValue": true,
+                "isOverridden": false,
+                "isReadOnly": false,
+                "metric": undefined,
+                "name": "Share usage with Elastic",
+                "options": Object {
+                  "labels": Object {},
+                  "values": Array [],
+                },
+                "order": undefined,
+                "requiresPageReload": false,
+                "savedValue": true,
+                "type": "boolean",
+                "unsavedFieldId": "Usage collection-unsaved",
+              }
             }
-          }
-        />
+            isSavingEnabled={true}
+            onFieldChange={[Function]}
+          />
+        </FieldRowProvider>
       </_EuiSplitPanelInner>
     </EuiForm>
   </_EuiSplitPanelOuter>
diff --git a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx b/src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx
index aa57485ce6049..14fd9abd2ab81 100644
--- a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx
+++ b/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();
diff --git a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx b/src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx
index 6c3fe94256941..1448e8dc6b41d 100644
--- a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx
+++ b/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>
diff --git a/src/plugins/telemetry_management_section/tsconfig.json b/src/plugins/telemetry_management_section/tsconfig.json
index 76e8beadc68b2..2441412ff912a 100644
--- a/src/plugins/telemetry_management_section/tsconfig.json
+++ b/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/**/*",
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index fcbc20c1a8c79..0c01e6e827d32 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/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é",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 62908af4bd9c1..4cbe5278ce358 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/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": "セキュリティデータ",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index c1550eab55885..e3e0ae5d42628 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/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": "安全数据",