Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[7.x] [Logs UI][a11y] Announce name of column on remove column button (#41695) #42529

Merged
merged 1 commit into from
Aug 2, 2019
Merged

[7.x] [Logs UI][a11y] Announce name of column on remove column button (#41695) #42529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 43 additions & 33 deletions .../plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import {
EuiDroppable,
EuiIcon,
} from '@elastic/eui';
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useCallback } from 'react';
import { DragHandleProps, DropResult } from '../../../../../common/eui_draggable';

Expand Down Expand Up @@ -167,29 +168,35 @@ const FieldLogColumnConfigurationPanel: React.FunctionComponent<{
remove,
},
dragHandleProps,
}) => (
<EuiPanel data-test-subj={`logColumnPanel fieldLogColumnPanel fieldLogColumnPanel:${field}`}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
<EuiIcon type="grab" />
</div>
</EuiFlexItem>
<EuiFlexItem grow={1}>
<FormattedMessage
id="xpack.infra.sourceConfiguration.fieldLogColumnTitle"
defaultMessage="Field"
/>
</EuiFlexItem>
<EuiFlexItem grow={3}>
<code>{field}</code>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<RemoveLogColumnButton onClick={remove} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}) => {
const fieldLogColumnTitle = i18n.translate(
'xpack.infra.sourceConfiguration.fieldLogColumnTitle',
{
defaultMessage: 'Field',
}
);
return (
<EuiPanel data-test-subj={`logColumnPanel fieldLogColumnPanel fieldLogColumnPanel:${field}`}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
<EuiIcon type="grab" />
</div>
</EuiFlexItem>
<EuiFlexItem grow={1}>{fieldLogColumnTitle}</EuiFlexItem>
<EuiFlexItem grow={3}>
<code>{field}</code>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<RemoveLogColumnButton
onClick={remove}
columnDescription={`${fieldLogColumnTitle} - ${field}`}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
};

const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{
fieldName: React.ReactNode;
Expand All @@ -213,31 +220,34 @@ const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<RemoveLogColumnButton onClick={removeColumn} />
<RemoveLogColumnButton onClick={removeColumn} columnDescription={String(fieldName)} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);

const RemoveLogColumnButton = injectI18n<{
const RemoveLogColumnButton: React.FunctionComponent<{
onClick?: () => void;
}>(({ intl, onClick }) => {
const removeColumnLabel = intl.formatMessage({
id: 'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel',
defaultMessage: 'Remove this column',
});
columnDescription: string;
}> = ({ onClick, columnDescription }) => {
const removeColumnLabel = i18n.translate(
'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel',
{
defaultMessage: 'Remove {columnDescription} column',
values: { columnDescription },
}
);

return (
<EuiButtonIcon
aria-label={removeColumnLabel}
color="danger"
data-test-subj="removeLogColumnButton"
iconType="trash"
onClick={onClick}
title={removeColumnLabel}
/>
);
});
};

const LogColumnConfigurationEmptyPrompt: React.FunctionComponent = () => (
<EuiEmptyPrompt
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/ja-JP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5276,7 +5276,6 @@
"xpack.infra.sourceConfiguration.noLogColumnsTitle": "列がありません",
"xpack.infra.sourceConfiguration.podFieldDescription": "Kubernetes ポッドの識別に使用されるフィールドです。推奨値は {defaultValue} です。",
"xpack.infra.sourceConfiguration.podFieldLabel": "ポッド ID",
"xpack.infra.sourceConfiguration.removeLogColumnButtonLabel": "この列を削除",
"xpack.infra.sourceConfiguration.sourceConfigurationButtonLabel": "構成",
"xpack.infra.sourceConfiguration.sourceConfigurationIndicesTabTitle": "インデックスとフィールド",
"xpack.infra.sourceConfiguration.sourceConfigurationLogColumnsTabTitle": "ログ列",
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5419,7 +5419,6 @@
"xpack.infra.sourceConfiguration.noLogColumnsTitle": "无列",
"xpack.infra.sourceConfiguration.podFieldDescription": "用于标识 Kubernetes Pod 的字段。推荐值为 {defaultValue}。",
"xpack.infra.sourceConfiguration.podFieldLabel": "Pod ID",
"xpack.infra.sourceConfiguration.removeLogColumnButtonLabel": "移除此列",
"xpack.infra.sourceConfiguration.sourceConfigurationButtonLabel": "配置",
"xpack.infra.sourceConfiguration.sourceConfigurationIndicesTabTitle": "索引和字段",
"xpack.infra.sourceConfiguration.sourceConfigurationLogColumnsTabTitle": "日志列",
Expand Down