Skip to content

Commit

Permalink
[Remote Clusters] Added a11y tests and fixed violations (#96989) (#97589
Browse files Browse the repository at this point in the history 
)

* Added a11y tests for Remote Clusters plugin and fixed discovered violations

* Added an a11y test for a delete modal

* Updated payload type casting

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@yuliacech @kibanamachine
yuliacech and kibanamachine authored Apr 20, 2021
1 parent b53d7c6 commit 3244ae9
Show file tree
Hide file tree
Showing 8 changed files with 247 additions and 91 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export interface Cluster {
hasDeprecatedProxySetting?: boolean;
}

interface ClusterPayloadEs {
export interface ClusterPayloadEs {
skip_unavailable?: boolean | null;
mode?: 'sniff' | 'proxy' | null;
proxy_address?: string | null;
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/remote_clusters/common/lib/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ export {
serializeCluster,
Cluster,
ClusterInfoEs,
ClusterPayloadEs,
} from './cluster_serialization';
4 changes: 2 additions & 2 deletions ...usters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ import {
convertCloudUrlToProxyConnection,
convertProxyConnectionToCloudUrl,
validateCluster,
isCloudUrlEnabled,
} from './validators';
import { isCloudUrlEnabled } from './validators/validate_cloud_url';

const defaultClusterValues: Cluster = {
name: '',
Expand Down Expand Up @@ -369,7 +369,7 @@ export class RemoteClusterForm extends Component<Props, State> {
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={this.toggleRequest}>
<EuiButtonEmpty onClick={this.toggleRequest} data-test-subj="remoteClustersRequestButton">
{isRequestVisible ? (
<FormattedMessage
id="xpack.remoteClusters.remoteClusterForm.hideRequestButtonLabel"
Expand Down
2 changes: 1 addition & 1 deletion ...te_clusters/public/application/sections/components/remote_cluster_form/request_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export class RequestFlyout extends PureComponent<Props> {
return (
<EuiFlyout maxWidth={480} onClose={close}>
<EuiFlyoutHeader>
<EuiTitle>
<EuiTitle data-test-subj="remoteClusterRequestFlyoutTitle">
<h2>
{name ? (
<FormattedMessage
Expand Down
10 changes: 4 additions & 6 deletions ...pplication/sections/remote_cluster_list/components/connection_status/connection_status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,11 @@ export function ConnectionStatus({ isConnected, mode }) {
return (
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>{icon}</EuiFlexItem>
<span className="eui-displayBlock">{icon}</span>
</EuiFlexItem>

<EuiFlexItem className="remoteClustersConnectionStatus__message">
<EuiText size="s">{message}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexItem grow={false} className="remoteClustersConnectionStatus__message">
<EuiText size="s">{message}</EuiText>
</EuiFlexItem>

{!isConnected && mode === SNIFF_MODE && (
Expand Down
114 changes: 33 additions & 81 deletions ...ote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,9 +183,9 @@ export class DetailPanel extends Component {
mode,
}) {
return (
<EuiDescriptionList data-test-subj="remoteClusterDetailPanelStatusValues">
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup data-test-subj="remoteClusterDetailPanelStatusValues">
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -194,13 +194,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailIsConnected">
<ConnectionStatus isConnected={isConnected} mode={mode} />
</EuiDescriptionListDescription>
</EuiFlexItem>

<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -209,17 +206,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailConnectedNodesCount">
{connectedNodesCount}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -228,17 +218,18 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailSeeds">
{seeds.map((seed) => (
<EuiText size="s" key={seed}>
{seed}
</EuiText>
))}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiDescriptionList>
</EuiFlexItem>

<EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -247,17 +238,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailSkipUnavailable">
{this.renderSkipUnavailableValue(skipUnavailable)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -266,13 +250,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailMaxConnections">
{maxConnectionsPerCluster}
</EuiDescriptionListDescription>
</EuiFlexItem>

<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -281,13 +262,12 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailInitialConnectTimeout">
{initialConnectTimeout}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
);
}

Expand All @@ -302,9 +282,9 @@ export class DetailPanel extends Component {
serverName,
}) {
return (
<EuiDescriptionList data-test-subj="remoteClusterDetailPanelStatusValues">
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -313,13 +293,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailIsConnected">
<ConnectionStatus isConnected={isConnected} mode={mode} />
</EuiDescriptionListDescription>
</EuiFlexItem>

<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -328,17 +305,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailConnectedSocketsCount">
{connectedSocketsCount ? connectedSocketsCount : '-'}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -347,13 +317,25 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailProxyAddress">
{proxyAddress}
</EuiDescriptionListDescription>
</EuiFlexItem>

<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.serverNameLabel"
defaultMessage="Server name"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailServerName">
{serverName ? serverName : '-'}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -362,17 +344,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailSkipUnavailable">
{this.renderSkipUnavailableValue(skipUnavailable)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -381,13 +356,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailMaxSocketConnections">
{proxySocketConnections ? proxySocketConnections : '-'}
</EuiDescriptionListDescription>
</EuiFlexItem>

<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
Expand All @@ -396,42 +368,22 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailInitialConnectTimeout">
{initialConnectTimeout}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.serverNameLabel"
defaultMessage="Server name"
/>
</EuiTitle>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription data-test-subj="remoteClusterDetailServerName">
{serverName ? serverName : '-'}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
);
}

renderCluster(cluster) {
return (
<section
aria-labelledby="xpack.remoteClusters.detailPanel.statusTitle"
aria-labelledby="clusterStatus"
data-test-subj="remoteClusterDetailPanelStatusSection"
>
<EuiTitle size="s">
<EuiTitle size="s" id="clusterStatus">
<h3>
<FormattedMessage
id="xpack.remoteClusters.detailPanel.statusTitle"
Expand Down
Loading

0 comments on commit 3244ae9

Please sign in to comment.