Fix telemetry advanced setting style (#103838)

This commit is contained in:
Tim Roes 2021-06-30 13:37:16 +02:00 committed by GitHub
parent a63084b8de
commit 1d02a0d6c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 160 additions and 171 deletions

View file

@ -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>
`;

View file

@ -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>
);
}