From 1d02a0d6c1f237320917bd0e3eefec0102269d64 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Wed, 30 Jun 2021 13:37:16 +0200
Subject: [PATCH] Fix telemetry advanced setting style (#103838)

---
 ...telemetry_management_section.test.tsx.snap | 246 +++++++++---------
 .../telemetry_management_section.tsx          |  85 +++---
 2 files changed, 160 insertions(+), 171 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 c4cee25a33b7f..014142a2a3d06 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
@@ -47,139 +47,137 @@ exports[`TelemetryManagementSectionComponent does not show the endpoint link whe
 
 exports[`TelemetryManagementSectionComponent renders as expected 1`] = `
 <Fragment>
-  <EuiPanel
-    paddingSize="l"
+  <_EuiSplitPanelOuter
+    hasBorder={true}
   >
     <EuiForm>
-      <EuiText>
-        <EuiFlexGroup
-          alignItems="baseline"
-        >
-          <EuiFlexItem
-            grow={false}
-          >
-            <h2>
-              <FormattedMessage
-                defaultMessage="Usage Data"
-                id="telemetry.usageDataTitle"
-                values={Object {}}
-              />
-            </h2>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiCallOut
-        color="primary"
-        iconType="spacesApp"
-        title={
-          <p>
+      <_EuiSplitPanelInner
+        color="subdued"
+      >
+        <EuiTitle>
+          <h2>
             <FormattedMessage
-              defaultMessage="Changes to this setting apply to {allOfKibanaText} and are saved automatically."
-              id="telemetry.callout.appliesSettingTitle"
-              values={
-                Object {
-                  "allOfKibanaText": <strong>
-                    <FormattedMessage
-                      defaultMessage="all of Kibana"
-                      id="telemetry.callout.appliesSettingTitle.allOfKibanaText"
-                      values={Object {}}
-                    />
-                  </strong>,
-                }
-              }
+              defaultMessage="Usage Data"
+              id="telemetry.usageDataTitle"
+              values={Object {}}
             />
-          </p>
-        }
-      />
-      <EuiSpacer
-        size="s"
-      />
-      <lazy
-        dockLinks={Object {}}
-        enableSaving={true}
-        handleChange={[Function]}
-        loading={false}
-        setting={
-          Object {
-            "ariaName": "Provide usage statistics",
-            "category": Array [],
-            "defVal": true,
-            "description": <React.Fragment>
-              <p>
-                <FormattedMessage
-                  defaultMessage="Enabling data usage collection helps us manage and improve our products and services. See our {privacyStatementLink} for more details."
-                  id="telemetry.telemetryConfigAndLinkDescription"
-                  values={
-                    Object {
-                      "privacyStatementLink": <EuiLink
-                        href="https://www.elastic.co/legal/privacy-statement"
-                        target="_blank"
-                      >
-                        <FormattedMessage
-                          defaultMessage="Privacy Statement"
-                          id="telemetry.readOurUsageDataPrivacyStatementLinkText"
-                          values={Object {}}
-                        />
-                      </EuiLink>,
-                    }
+          </h2>
+        </EuiTitle>
+      </_EuiSplitPanelInner>
+      <_EuiSplitPanelInner>
+        <EuiCallOut
+          color="primary"
+          iconType="spacesApp"
+          title={
+            <p>
+              <FormattedMessage
+                defaultMessage="Changes to this setting apply to {allOfKibanaText} and are saved automatically."
+                id="telemetry.callout.appliesSettingTitle"
+                values={
+                  Object {
+                    "allOfKibanaText": <strong>
+                      <FormattedMessage
+                        defaultMessage="all of Kibana"
+                        id="telemetry.callout.appliesSettingTitle.allOfKibanaText"
+                        values={Object {}}
+                      />
+                    </strong>,
                   }
-                />
-              </p>
-              <p>
-                <FormattedMessage
-                  defaultMessage="See examples of the {clusterData} and {endpointSecurityData} 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>,
-                      "endpointSecurityData": <EuiLink
-                        data-test-id="endpoint_security_example"
-                        onClick={[Function]}
-                      >
-                        <FormattedMessage
-                          defaultMessage="endpoint security data"
-                          id="telemetry.securityData"
-                          values={Object {}}
-                        />
-                      </EuiLink>,
+                }
+              />
+            </p>
+          }
+        />
+        <EuiSpacer
+          size="s"
+        />
+        <lazy
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          loading={false}
+          setting={
+            Object {
+              "ariaName": "Provide usage statistics",
+              "category": Array [],
+              "defVal": true,
+              "description": <React.Fragment>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="Enabling data usage collection helps us manage and improve our products and services. See our {privacyStatementLink} for more details."
+                    id="telemetry.telemetryConfigAndLinkDescription"
+                    values={
+                      Object {
+                        "privacyStatementLink": <EuiLink
+                          href="https://www.elastic.co/legal/privacy-statement"
+                          target="_blank"
+                        >
+                          <FormattedMessage
+                            defaultMessage="Privacy Statement"
+                            id="telemetry.readOurUsageDataPrivacyStatementLinkText"
+                            values={Object {}}
+                          />
+                        </EuiLink>,
+                      }
                     }
-                  }
-                />
-              </p>
-            </React.Fragment>,
-            "displayName": "Provide usage statistics",
-            "isCustom": true,
-            "isOverridden": false,
-            "name": "telemetry:enabled",
-            "requiresPageReload": false,
-            "type": "boolean",
-            "value": true,
+                  />
+                </p>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="See examples of the {clusterData} and {endpointSecurityData} 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>,
+                        "endpointSecurityData": <EuiLink
+                          data-test-id="endpoint_security_example"
+                          onClick={[Function]}
+                        >
+                          <FormattedMessage
+                            defaultMessage="endpoint security data"
+                            id="telemetry.securityData"
+                            values={Object {}}
+                          />
+                        </EuiLink>,
+                      }
+                    }
+                  />
+                </p>
+              </React.Fragment>,
+              "displayName": "Provide usage statistics",
+              "isCustom": true,
+              "isOverridden": false,
+              "name": "telemetry:enabled",
+              "requiresPageReload": false,
+              "type": "boolean",
+              "value": true,
+            }
           }
-        }
-        toasts={
-          Object {
-            "add": [MockFunction],
-            "addDanger": [MockFunction],
-            "addError": [MockFunction],
-            "addInfo": [MockFunction],
-            "addSuccess": [MockFunction],
-            "addWarning": [MockFunction],
-            "get$": [MockFunction],
-            "remove": [MockFunction],
+          toasts={
+            Object {
+              "add": [MockFunction],
+              "addDanger": [MockFunction],
+              "addError": [MockFunction],
+              "addInfo": [MockFunction],
+              "addSuccess": [MockFunction],
+              "addWarning": [MockFunction],
+              "get$": [MockFunction],
+              "remove": [MockFunction],
+            }
           }
-        }
-      />
+        />
+      </_EuiSplitPanelInner>
     </EuiForm>
-  </EuiPanel>
+  </_EuiSplitPanelOuter>
 </Fragment>
 `;
 
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 e9ddc4cf82dfc..b0d1b42a9b892 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
@@ -7,16 +7,7 @@
  */
 
 import React, { Component, Fragment } from 'react';
-import {
-  EuiCallOut,
-  EuiPanel,
-  EuiForm,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+import { EuiCallOut, EuiForm, EuiLink, EuiSpacer, EuiSplitPanel, EuiTitle } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -116,46 +107,46 @@ export class TelemetryManagementSection extends Component<Props, State> {
             <OptInSecurityExampleFlyout onClose={this.toggleSecurityExample} />
           </TrackApplicationView>
         )}
-        <EuiPanel paddingSize="l">
+        <EuiSplitPanel.Outer hasBorder>
           <EuiForm>
-            <EuiText>
-              <EuiFlexGroup alignItems="baseline">
-                <EuiFlexItem grow={false}>
-                  <h2>
-                    <FormattedMessage id="telemetry.usageDataTitle" defaultMessage="Usage Data" />
-                  </h2>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiText>
+            <EuiSplitPanel.Inner color="subdued">
+              <EuiTitle>
+                <h2>
+                  <FormattedMessage id="telemetry.usageDataTitle" defaultMessage="Usage Data" />
+                </h2>
+              </EuiTitle>
+            </EuiSplitPanel.Inner>
 
-            {this.maybeGetAppliesSettingMessage()}
-            <EuiSpacer size="s" />
-            <LazyField
-              setting={{
-                type: 'boolean',
-                name: 'telemetry:enabled',
-                displayName: i18n.translate('telemetry.provideUsageStatisticsTitle', {
-                  defaultMessage: 'Provide usage statistics',
-                }),
-                value: enabled,
-                description: this.renderDescription(),
-                defVal: true,
-                ariaName: i18n.translate('telemetry.provideUsageStatisticsAriaName', {
-                  defaultMessage: 'Provide usage statistics',
-                }),
-                requiresPageReload: false,
-                category: [],
-                isOverridden: false,
-                isCustom: true,
-              }}
-              loading={processing}
-              dockLinks={this.props.docLinks}
-              toasts={this.props.toasts}
-              handleChange={this.toggleOptIn}
-              enableSaving={this.props.enableSaving}
-            />
+            <EuiSplitPanel.Inner>
+              {this.maybeGetAppliesSettingMessage()}
+              <EuiSpacer size="s" />
+              <LazyField
+                setting={{
+                  type: 'boolean',
+                  name: 'telemetry:enabled',
+                  displayName: i18n.translate('telemetry.provideUsageStatisticsTitle', {
+                    defaultMessage: 'Provide usage statistics',
+                  }),
+                  value: enabled,
+                  description: this.renderDescription(),
+                  defVal: true,
+                  ariaName: i18n.translate('telemetry.provideUsageStatisticsAriaName', {
+                    defaultMessage: 'Provide usage statistics',
+                  }),
+                  requiresPageReload: false,
+                  category: [],
+                  isOverridden: false,
+                  isCustom: true,
+                }}
+                loading={processing}
+                dockLinks={this.props.docLinks}
+                toasts={this.props.toasts}
+                handleChange={this.toggleOptIn}
+                enableSaving={this.props.enableSaving}
+              />
+            </EuiSplitPanel.Inner>
           </EuiForm>
-        </EuiPanel>
+        </EuiSplitPanel.Outer>
       </Fragment>
     );
   }