Skip to content

Commit

Permalink
Abstracted out some of the common parts of the Show Hide component an…
Browse files Browse the repository at this point in the history 
…d implemented the general component in the pages. Also made conditional for the i18n tags.
  • Loading branch information
John Dorlus committed Feb 14, 2020
1 parent 921a9b2 commit ecf0572
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 296 deletions.
61 changes: 6 additions & 55 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 @@ -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 { ShowHideIndices } from '../../show_hide_indices';

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,51 +155,11 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{displayIndices ? (
<div>
<ul>
{(isShowingFullIndicesList
? displayIndices
: [...displayIndices].splice(0, 10)
).map(index => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
))}
</ul>
<EuiSpacer size="xs" />
{hiddenIndicesCount ? (
<div>
{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>
)}
</div>
) : null}
</div>
) : (
<FormattedMessage
id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.allIndicesValue"
defaultMessage="All indices"
/>
)}
<ShowHideIndices
indices={indices}
defaultState={false}
i18nId="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.indicesCollapseAllLink"
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
Expand Down
62 changes: 7 additions & 55 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 { ShowHideIndices } from '../../show_hide_indices';

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,51 +80,11 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{displayIndices ? (
<div>
<ul>
{(isShowingFullIndicesList
? displayIndices
: [...displayIndices].splice(0, 10)
).map(index => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
))}
</ul>
<EuiSpacer size="xs" />
{hiddenIndicesCount ? (
<EuiText>
{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>
)}
</EuiText>
) : null}
</div>
) : (
<FormattedMessage
id="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.allIndicesValue"
defaultMessage="All indices"
/>
)}
<ShowHideIndices
indices={restoreIndices}
defaultState={false}
i18nId="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.indicesCollapseAllLink"
/>
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
Expand Down
51 changes: 25 additions & 26 deletions x-pack/legacy/plugins/snapshot_restore/public/app/components/show_hide_indices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,24 @@
*/

import React, { useState } from 'react';
import {
EuiDescriptionListDescription,
EuiTitle,
EuiSpacer,
EuiText,
EuiLink,
EuiIcon,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/target/types/react';

import { EuiDescriptionListDescription, EuiTitle, EuiLink, EuiIcon } from '@elastic/eui';
interface Props {
indices: string[] | string;
indices: string[] | string | undefined;
defaultState: boolean;
i18nId: string;
}

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

export const ShowHideIndices: React.FunctionComponent<Props> = ({
indices,
defaultState,
i18nId,
}) => {
const {
core: { i18n },
} = useAppDependencies();
const { FormattedMessage } = i18n;
const [isShowingFullIndicesList, setIsShowingFullIndicesList] = useState<boolean>(defaultState);
const displayIndices = indices
? typeof indices === 'string'
Expand All @@ -49,22 +46,24 @@ export const ShowHideIndices: React.FunctionComponent<Props> = ({
)
)}
</ul>
<EuiSpacer size="xs" />
{hiddenIndicesCount ? (
<EuiText>
<EuiLink onClick={() => setIsShowingFullIndicesList(false)}>
<FormattedMessage
id={i18nId}
defaultMessage={
isShowingFullIndicesList
? 'Show'
: 'Hide' + '{count, plural, one {# index} other {# indices}}'
}
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowUp" />
</EuiLink>
</EuiText>
<EuiLink
onClick={() =>
isShowingFullIndicesList
? setIsShowingFullIndicesList(false)
: setIsShowingFullIndicesList(true)
}
>
<FormattedMessage
id={isShowingFullIndicesList ? i18nId.replace('Show', 'Collapse') : i18nId}
defaultMessage={
(isShowingFullIndicesList ? 'Hide' : 'Show') +
' {count, plural, one {# index} other {# indices}}'
}
values={{ count: hiddenIndicesCount }}
/>{' '}
<EuiIcon type="arrowUp" />
</EuiLink>
) : null}
</div>
) : (
Expand Down
84 changes: 6 additions & 78 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 @@ -23,7 +23,7 @@ import {

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

interface Props {
Expand Down Expand Up @@ -56,82 +56,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>
))}
</ul>
<EuiSpacer size="xs" />
{hiddenIndicesCount ? (
<div>
<EuiText>
<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>
</EuiText>
</div>
) : null}
</EuiText>
) : (
<FormattedMessage
id="xpack.snapshotRestore.policyDetails.allIndicesLabel"
defaultMessage="All indices"
/>
);
const fullIndicesList =
displayIndices && displayIndices.length && displayIndices.length > 10 ? (
<div>
<ul>
{displayIndices.map((index: string) => (
<li key={index}>
<EuiTitle size="xs">
<span>{index}</span>
</EuiTitle>
</li>
))}
</ul>
<EuiSpacer size="xs" />
{hiddenIndicesCount ? (
<div>
<EuiText>
<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>
</EuiText>
</div>
) : null}
</div>
) : null;

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

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

<EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
{isShowingFullIndicesList ? fullIndicesList : shortIndicesList}
<ShowHideIndices
indices={indices}
i18nId="xpack.snapshotRestore.policyDetails.indicesCollapseAllLink"
defaultState={false}
/>
</EuiDescriptionListDescription>
</EuiFlexItem>

Expand Down
Loading

0 comments on commit ecf0572

Please sign in to comment.