Skip to content

Commit

Permalink
Snapshots title ie11 misalignment (#48802) (#49912)
Browse files Browse the repository at this point in the history 
* Removed Flexbox around header and link elements.

* Removed unused EUI component

* Added class to include the ellipses when name is truncated.

* Fixed title in policy_details.tsx

* Fixed buttons and title on policy and repository table.

* Linting fixes.

* Removed unused references.

* Added keys to arrays of elements to resolve React errors.
  • Loading branch information
John Dorlus authored Oct 31, 2019
1 parent faa854e commit 4dc3e7c
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 131 deletions.
78 changes: 35 additions & 43 deletions ...s/snapshot_restore/public/app/sections/home/policy_list/policy_details/policy_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
EuiContextMenu,
EuiButtonIcon,
EuiLink,
EuiSpacer,
} from '@elastic/eui';

import { SlmPolicy } from '../../../../../../common/types';
Expand Down Expand Up @@ -302,49 +303,40 @@ export const PolicyDetails: React.FunctionComponent<Props> = ({
maxWidth={550}
>
<EuiFlyoutHeader>
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem>
<EuiTitle size="m">
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<h2 id="srPolicyDetailsFlyoutTitle" data-test-subj="title">
{policyName}
</h2>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
iconType="refresh"
color="subdued"
aria-label={i18n.translate(
'xpack.snapshotRestore.policyDetails.reloadButtonAriaLabel',
{ defaultMessage: 'Reload' }
)}
onClick={() => reload()}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTitle>
</EuiFlexItem>
{policyDetails && policyDetails.policy && policyDetails.policy.inProgress ? (
<EuiFlexItem>
<SectionLoading inline={true} size="s">
<EuiLink
href={linkToSnapshot(
policyDetails.policy.repository,
policyDetails.policy.inProgress.snapshotName
)}
data-test-subj="inProgressSnapshotLink"
>
<FormattedMessage
id="xpack.snapshotRestore.policyDetails.inProgressSnapshotLinkText"
defaultMessage="'{snapshotName}' in progress"
values={{ snapshotName: policyDetails.policy.inProgress.snapshotName }}
/>
</EuiLink>
</SectionLoading>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
<EuiTitle size="m">
<h2 id="srPolicyDetailsFlyoutTitle" data-test-subj="title">
{policyName}{' '}
<EuiButtonIcon
iconType="refresh"
color="subdued"
aria-label={i18n.translate(
'xpack.snapshotRestore.policyDetails.reloadButtonAriaLabel',
{ defaultMessage: 'Reload' }
)}
onClick={() => reload()}
/>
</h2>
</EuiTitle>
{policyDetails && policyDetails.policy && policyDetails.policy.inProgress ? (
<>
<EuiSpacer size="s" />
<SectionLoading inline={true} size="s">
<EuiLink
href={linkToSnapshot(
policyDetails.policy.repository,
policyDetails.policy.inProgress.snapshotName
)}
data-test-subj="inProgressSnapshotLink"
>
<FormattedMessage
id="xpack.snapshotRestore.policyDetails.inProgressSnapshotLinkText"
defaultMessage="'{snapshotName}' in progress"
values={{ snapshotName: policyDetails.policy.inProgress.snapshotName }}
/>
</EuiLink>
</SectionLoading>
</>
) : null}
{renderTabs()}
</EuiFlyoutHeader>

Expand Down
56 changes: 26 additions & 30 deletions ...ugins/snapshot_restore/public/app/sections/home/policy_list/policy_table/policy_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,36 +327,32 @@ export const PolicyTable: React.FunctionComponent<Props> = ({
) : (
undefined
),
toolsRight: (
<EuiFlexGroup gutterSize="m" justifyContent="spaceAround">
<EuiFlexItem>
<EuiButton
color="secondary"
iconType="refresh"
onClick={reload}
data-test-subj="reloadButton"
>
<FormattedMessage
id="xpack.snapshotRestore.policyList.table.reloadPoliciesButton"
defaultMessage="Reload"
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiButton
href={linkToAddPolicy()}
fill
iconType="plusInCircle"
data-test-subj="createPolicyButton"
>
<FormattedMessage
id="xpack.snapshotRestore.policyList.table.addPolicyButton"
defaultMessage="Create a policy"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
),
toolsRight: [
<EuiButton
key="reloadPolicies"
color="secondary"
iconType="refresh"
onClick={reload}
data-test-subj="reloadButton"
>
<FormattedMessage
id="xpack.snapshotRestore.policyList.table.reloadPoliciesButton"
defaultMessage="Reload"
/>
</EuiButton>,
<EuiButton
key="createNewPolicy"
href={linkToAddPolicy()}
fill
iconType="plusInCircle"
data-test-subj="createPolicyButton"
>
<FormattedMessage
id="xpack.snapshotRestore.policyList.table.addPolicyButton"
defaultMessage="Create a policy"
/>
</EuiButton>,
],
box: {
incremental: true,
schema: true,
Expand Down
58 changes: 26 additions & 32 deletions ...ot_restore/public/app/sections/home/repository_list/repository_table/repository_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import {
EuiBadge,
EuiButton,
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiInMemoryTable,
EuiLink,
EuiToolTip,
Expand Down Expand Up @@ -235,36 +233,32 @@ export const RepositoryTable: React.FunctionComponent<Props> = ({
) : (
undefined
),
toolsRight: (
<EuiFlexGroup gutterSize="m" justifyContent="spaceAround">
<EuiFlexItem>
<EuiButton
color="secondary"
iconType="refresh"
onClick={reload}
data-test-subj="reloadButton"
>
<FormattedMessage
id="xpack.snapshotRestore.repositoryList.table.reloadRepositoriesButton"
defaultMessage="Reload"
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiButton
href={linkToAddRepository()}
fill
iconType="plusInCircle"
data-test-subj="registerRepositoryButton"
>
<FormattedMessage
id="xpack.snapshotRestore.repositoryList.addRepositoryButtonLabel"
defaultMessage="Register a repository"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
),
toolsRight: [
<EuiButton
key="reloadButton"
color="secondary"
iconType="refresh"
onClick={reload}
data-test-subj="reloadButton"
>
<FormattedMessage
id="xpack.snapshotRestore.repositoryList.table.reloadRepositoriesButton"
defaultMessage="Reload"
/>
</EuiButton>,
<EuiButton
key="registerRepo"
href={linkToAddRepository()}
fill
iconType="plusInCircle"
data-test-subj="registerRepositoryButton"
>
<FormattedMessage
id="xpack.snapshotRestore.repositoryList.addRepositoryButtonLabel"
defaultMessage="Register a repository"
/>
</EuiButton>,
],
box: {
incremental: true,
schema: true,
Expand Down
42 changes: 16 additions & 26 deletions ...shot_restore/public/app/sections/home/snapshot_list/snapshot_details/snapshot_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
EuiTab,
EuiTabs,
EuiText,
EuiTitle,
} from '@elastic/eui';
import React, { Fragment, useState, useEffect } from 'react';

Expand Down Expand Up @@ -256,33 +255,24 @@ export const SnapshotDetails: React.FunctionComponent<Props> = ({
maxWidth={550}
>
<EuiFlyoutHeader>
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem>
<EuiTitle size="m">
<h2 id="srSnapshotDetailsFlyoutTitle" data-test-subj="detailTitle">
{snapshotId}
</h2>
</EuiTitle>
</EuiFlexItem>

<EuiFlexItem>
<EuiText size="s">
<p>
<EuiLink href={linkToRepository(repositoryName)} data-test-subj="repositoryLink">
<FormattedMessage
id="xpack.snapshotRestore.snapshotDetails.repositoryTitle"
defaultMessage="'{repositoryName}' repository"
values={{ repositoryName }}
/>
</EuiLink>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>

<EuiText>
<h2 id="srSnapshotDetailsFlyoutTitle" data-test-subj="detailTitle">
{snapshotId}
</h2>
<p>
<small>
<EuiLink href={linkToRepository(repositoryName)} data-test-subj="repositoryLink">
<FormattedMessage
id="xpack.snapshotRestore.snapshotDetails.repositoryTitle"
defaultMessage="'{repositoryName}' repository"
values={{ repositoryName }}
/>
</EuiLink>
</small>
</p>
</EuiText>
{tabs}
</EuiFlyoutHeader>

<EuiFlyoutBody data-test-subj="content">{content}</EuiFlyoutBody>
<EuiFlyoutFooter>{renderFooter()}</EuiFlyoutFooter>
</EuiFlyout>
Expand Down

0 comments on commit 4dc3e7c

Please sign in to comment.