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

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

Merged
merged 18 commits into from
Feb 19, 2020
Merged

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

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
4a31dfc
Moved all of the show/hide toggles outside of ordered lists.
Feb 8, 2020
56b79d3
Fixed styling issues for indice list.
Feb 11, 2020
3ae9eee
Fixed i10n tag that I accidentally changed.
Feb 11, 2020
42b9f1b
Merge branch 'master' into Move_Show_Hide_Indices_Outside_List
elasticmachine Feb 11, 2020
152ebee
Added component to show/hide indices.
Feb 14, 2020
8d891e1
Merge branch 'master' of github.com:elastic/kibana into Move_Show_Hid…
Feb 14, 2020
921a9b2
Merge branch 'Move_Show_Hide_Indices_Outside_List' of github.com:cuff…
Feb 14, 2020
ecf0572
Abstracted out some of the common parts of the Show Hide component an…
Feb 14, 2020
65aff58
Merge branch 'master' of github.com:elastic/kibana into Move_Show_Hid…
Feb 14, 2020
2edaacb
Fixed changes per comments. Restored <EuiText> to fix the issue with …
Feb 14, 2020
aff3bf5
Merge branch 'master' into Move_Show_Hide_Indices_Outside_List
elasticmachine Feb 15, 2020
25b202f
Merge branch 'master' of github.com:elastic/kibana into Move_Show_Hid…
Feb 17, 2020
6b742de
Merge branch 'Move_Show_Hide_Indices_Outside_List' of github.com:cuff…
Feb 17, 2020
3bdddc2
Merge branch 'master' of github.com:elastic/kibana into Move_Show_Hid…
Feb 18, 2020
8f27468
Merge branch 'master' into Move_Show_Hide_Indices_Outside_List
elasticmachine Feb 19, 2020
2813ad3
Merge branch 'master' of github.com:elastic/kibana into Move_Show_Hid…
Feb 19, 2020
2fbcd1f
Fixed internalization issues..
Feb 19, 2020
6fb6ddf
Merge branch 'Move_Show_Hide_Indices_Outside_List' of github.com:cuff…
Feb 19, 2020
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
81 changes: 81 additions & 0 deletions x-pack/legacy/plugins/snapshot_restore/public/app/components/collapsible_indices_list.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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