Skip to content

Commit

Permalink
Moved all of the show/hide toggles outside of ordered lists. (#57163) (…
Browse files Browse the repository at this point in the history 
…#58063)

* Moved all of the show/hide toggles outside of ordered lists.

* Fixed styling issues for indice list.

* Fixed i10n tag that I accidentally changed.

* Added component to show/hide indices.

* Abstracted out some of the common parts of the Show Hide component and implemented the general component in the pages. Also made conditional for the i18n tags.

* Fixed changes per comments. Restored <EuiText> to fix the issue with the bullet points. Updated the i18n tags to be more generic. Created 2 components for formatted message.

* Fixed internalization issues..

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
@elasticmachine
John Dorlus and elasticmachine authored Feb 21, 2020
1 parent b3af317 commit d7b70f6
Show file tree
Hide file tree
Showing 8 changed files with 98 additions and 289 deletions.
81 changes: 81 additions & 0 deletions x-pack/legacy/plugins/snapshot_restore/public/app/components/collapsible_indices_list.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useState } from 'react';
import { EuiTitle, EuiLink, EuiIcon, EuiText, EuiSpacer } from '@elastic/eui';
interface Props {
indices: string[] | string | undefined;
}

import { useAppDependencies } from '../index';

export const CollapsibleIndicesList: React.FunctionComponent<Props> = ({ indices }) => {
const {
core: { i18n },
} = useAppDependencies();
const { FormattedMessage } = i18n;
const [isShowingFullIndicesList, setIsShowingFullIndicesList] = useState<boolean>(false);
const displayIndices = indices
? typeof indices === 'string'
? indices.split(',')
: indices
: undefined;
const hiddenIndicesCount =
displayIndices && displayIndices.length > 10 ? displayIndices.length - 10 : 0;
return (
<>
{displayIndices ? (
<>
<EuiText>
<ul>
{(isShowingFullIndicesList ? displayIndices : [...displayIndices].splice(0, 10)).map(
index => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
)
)}
</ul>
</EuiText>
{hiddenIndicesCount ? (
<>
<EuiSpacer size="xs" />
<EuiLink
onClick={() =>
isShowingFullIndicesList
? setIsShowingFullIndicesList(false)
: setIsShowingFullIndicesList(true)
}
>
{isShowingFullIndicesList ? (
<FormattedMessage
id="xpack.snapshotRestore.indicesList.indicesCollapseAllLink"
defaultMessage="Hide {count, plural, one {# index} other {# indices}}"
values={{ count: hiddenIndicesCount }}
/>
) : (
<FormattedMessage
id="xpack.snapshotRestore.indicesList.indicesExpandAllLink"
defaultMessage="Show {count, plural, one {# index} other {# indices}}"
values={{ count: hiddenIndicesCount }}
/>
)}{' '}
<EuiIcon type={isShowingFullIndicesList ? 'arrowUp' : 'arrowDown'} />
</EuiLink>
</>
) : null}
</>
) : (
<FormattedMessage
id="xpack.snapshotRestore.indicesList.allIndicesValue"
defaultMessage="All indices"
/>
)}
</>
);
};
1 change: 1 addition & 0 deletions x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export { SnapshotDeleteProvider } from './snapshot_delete_provider';
export { RestoreSnapshotForm } from './restore_snapshot_form';
export { PolicyExecuteProvider } from './policy_execute_provider';
export { PolicyDeleteProvider } from './policy_delete_provider';
export { CollapsibleIndicesList } from './collapsible_indices_list';
export {
RetentionSettingsUpdateModalProvider,
UpdateRetentionSettings,
Expand Down
60 changes: 3 additions & 57 deletions ...k/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, useState } from 'react';
import React, { Fragment } from 'react';
import {
EuiCodeBlock,
EuiFlexGroup,
Expand All @@ -13,7 +13,6 @@ import {
EuiDescriptionListDescription,
EuiSpacer,
EuiTabbedContent,
EuiText,
EuiTitle,
EuiLink,
EuiIcon,
Expand All @@ -22,6 +21,7 @@ import {
import { serializePolicy } from '../../../../../common/lib';
import { useAppDependencies } from '../../../index';
import { StepProps } from './';
import { CollapsibleIndicesList } from '../../collapsible_indices_list';

export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
policy,
Expand All @@ -39,15 +39,6 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
partial: undefined,
};

const [isShowingFullIndicesList, setIsShowingFullIndicesList] = useState<boolean>(false);
const displayIndices = indices
? typeof indices === 'string'
? indices.split(',')
: indices
: undefined;
const hiddenIndicesCount =
displayIndices && displayIndices.length > 10 ? displayIndices.length - 10 : 0;

const serializedPolicy = serializePolicy(policy);
const { retention: serializedRetention } = serializedPolicy;

Expand Down Expand Up @@ -164,52 +155,7 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{displayIndices ? (
<EuiText>
<ul>
{(isShowingFullIndicesList
? displayIndices
: [...displayIndices].splice(0, 10)
).map(index => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
))}
{hiddenIndicesCount ? (
<li key="hiddenIndicesCount">
<EuiTitle size="xs">
{isShowingFullIndicesList ? (
<EuiLink onClick={() => setIsShowingFullIndicesList(false)}>
<FormattedMessage
id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.indicesCollapseAllLink"
defaultMessage="Hide {count, plural, one {# index} other {# indices}}"
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowUp" />
</EuiLink>
) : (
<EuiLink onClick={() => setIsShowingFullIndicesList(true)}>
<FormattedMessage
id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.indicesShowAllLink"
defaultMessage="Show {count} more {count, plural, one {index} other {indices}}"
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowDown" />
</EuiLink>
)}
</EuiTitle>
</li>
) : null}
</ul>
</EuiText>
) : (
<FormattedMessage
id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.allIndicesValue"
defaultMessage="All indices"
/>
)}
<CollapsibleIndicesList indices={indices} />
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
Expand Down
59 changes: 3 additions & 56 deletions ...lugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useState, Fragment } from 'react';
import React, { Fragment } from 'react';
import {
EuiCodeEditor,
EuiFlexGrid,
Expand All @@ -23,6 +23,7 @@ import {
import { serializeRestoreSettings } from '../../../../../common/lib';
import { useAppDependencies } from '../../../index';
import { StepProps } from './';
import { CollapsibleIndicesList } from '../../collapsible_indices_list';

export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
restoreSettings,
Expand All @@ -44,15 +45,6 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
const serializedRestoreSettings = serializeRestoreSettings(restoreSettings);
const { index_settings: serializedIndexSettings } = serializedRestoreSettings;

const [isShowingFullIndicesList, setIsShowingFullIndicesList] = useState<boolean>(false);
const displayIndices = restoreIndices
? typeof restoreIndices === 'string'
? restoreIndices.split(',')
: restoreIndices
: undefined;
const hiddenIndicesCount =
displayIndices && displayIndices.length > 10 ? displayIndices.length - 10 : 0;

const renderSummaryTab = () => (
<Fragment>
<EuiSpacer size="m" />
Expand Down Expand Up @@ -88,52 +80,7 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{displayIndices ? (
<EuiText>
<ul>
{(isShowingFullIndicesList
? displayIndices
: [...displayIndices].splice(0, 10)
).map(index => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
))}
{hiddenIndicesCount ? (
<li key="hiddenIndicesCount">
<EuiTitle size="xs">
{isShowingFullIndicesList ? (
<EuiLink onClick={() => setIsShowingFullIndicesList(false)}>
<FormattedMessage
id="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.indicesCollapseAllLink"
defaultMessage="Hide {count, plural, one {# index} other {# indices}}"
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowUp" />
</EuiLink>
) : (
<EuiLink onClick={() => setIsShowingFullIndicesList(true)}>
<FormattedMessage
id="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.indicesShowAllLink"
defaultMessage="Show {count} more {count, plural, one {index} other {indices}}"
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowDown" />
</EuiLink>
)}
</EuiTitle>
</li>
) : null}
</ul>
</EuiText>
) : (
<FormattedMessage
id="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.allIndicesValue"
defaultMessage="All indices"
/>
)}
<CollapsibleIndicesList indices={restoreIndices} />
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
Expand Down
82 changes: 3 additions & 79 deletions ...snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useState, useEffect, Fragment } from 'react';
import React, { Fragment } from 'react';
import {
EuiCallOut,
EuiFlexGroup,
Expand All @@ -13,8 +13,6 @@ import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
EuiIcon,
EuiText,
EuiPanel,
EuiStat,
EuiSpacer,
Expand All @@ -23,7 +21,7 @@ import {

import { SlmPolicy } from '../../../../../../../common/types';
import { useAppDependencies } from '../../../../../index';
import { FormattedDateTime } from '../../../../../components';
import { FormattedDateTime, CollapsibleIndicesList } from '../../../../../components';
import { linkToSnapshots, linkToRepository } from '../../../../../services/navigation';

interface Props {
Expand Down Expand Up @@ -56,80 +54,6 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
partial: undefined,
};

// Only show 10 indices initially
const [isShowingFullIndicesList, setIsShowingFullIndicesList] = useState<boolean>(false);
const displayIndices = typeof indices === 'string' ? indices.split(',') : indices;
const hiddenIndicesCount =
displayIndices && displayIndices.length > 10 ? displayIndices.length - 10 : 0;
const shortIndicesList =
displayIndices && displayIndices.length ? (
<EuiText size="m">
<ul>
{[...displayIndices].splice(0, 10).map((index: string) => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
))}
{hiddenIndicesCount ? (
<li key="hiddenIndicesCount">
<EuiTitle size="xs">
<EuiLink onClick={() => setIsShowingFullIndicesList(true)}>
<FormattedMessage
id="xpack.snapshotRestore.policyDetails.indicesShowAllLink"
defaultMessage="Show {count} more {count, plural, one {index} other {indices}}"
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowDown" />
</EuiLink>
</EuiTitle>
</li>
) : null}
</ul>
</EuiText>
) : (
<FormattedMessage
id="xpack.snapshotRestore.policyDetails.allIndicesLabel"
defaultMessage="All indices"
/>
);
const fullIndicesList =
displayIndices && displayIndices.length && displayIndices.length > 10 ? (
<EuiText size="m">
<ul>
{displayIndices.map((index: string) => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
))}
{hiddenIndicesCount ? (
<li key="hiddenIndicesCount">
<EuiTitle size="xs">
<EuiLink onClick={() => setIsShowingFullIndicesList(false)}>
<FormattedMessage
id="xpack.snapshotRestore.policyDetails.indicesCollapseAllLink"
defaultMessage="Hide {count, plural, one {# index} other {# indices}}"
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowUp" />
</EuiLink>
</EuiTitle>
</li>
) : null}
</ul>
</EuiText>
) : null;

// Reset indices list state when clicking through different policies
useEffect(() => {
return () => {
setIsShowingFullIndicesList(false);
};
}, []);

return (
<Fragment>
{isManagedPolicy ? (
Expand Down Expand Up @@ -314,7 +238,7 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
</EuiDescriptionListTitle>

<EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
{isShowingFullIndicesList ? fullIndicesList : shortIndicesList}
<CollapsibleIndicesList indices={indices} />
</EuiDescriptionListDescription>
</EuiFlexItem>

Expand Down
Loading

0 comments on commit d7b70f6

Please sign in to comment.