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.

x-pack/legacy/plugins/snapshot_restore/public/app/components/collapsible_indices_list.tsx

@@ -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"
+        />
+      )}
+    </>
+  );
+};

x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts

@@ -16,7 +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 { ShowHideIndices } from './show_hide_indices';
+export { CollapsibleIndicesList } from './collapsible_indices_list';
 export {
   RetentionSettingsUpdateModalProvider,
   UpdateRetentionSettings,

x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx

@@ -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,
@@ -21,7 +21,7 @@ import {
 import { serializePolicy } from '../../../../../common/lib';
 import { useAppDependencies } from '../../../index';
 import { StepProps } from './';
-import { ShowHideIndices } from '../../show_hide_indices';
+import { CollapsibleIndicesList } from '../../collapsible_indices_list';
 
 export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
   policy,
@@ -155,11 +155,7 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
               />
             </EuiDescriptionListTitle>
             <EuiDescriptionListDescription>
-              <ShowHideIndices
-                indices={indices}
-                defaultState={false}
-                i18nId="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.indicesCollapseAllLink"
-              />
+              <CollapsibleIndicesList indices={indices} />
             </EuiDescriptionListDescription>
           </EuiDescriptionList>
         </EuiFlexItem>

x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx

@@ -23,7 +23,7 @@ import {
 import { serializeRestoreSettings } from '../../../../../common/lib';
 import { useAppDependencies } from '../../../index';
 import { StepProps } from './';
-import { ShowHideIndices } from '../../show_hide_indices';
+import { CollapsibleIndicesList } from '../../collapsible_indices_list';
 
 export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
   restoreSettings,
@@ -80,11 +80,7 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
               />
             </EuiDescriptionListTitle>
             <EuiDescriptionListDescription>
-              <ShowHideIndices
-                indices={restoreIndices}
-                defaultState={false}
-                i18nId="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.indicesCollapseAllLink"
-              />
+              <CollapsibleIndicesList indices={restoreIndices} />
             </EuiDescriptionListDescription>
           </EuiDescriptionList>
         </EuiFlexItem>

x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx

@@ -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,
@@ -13,8 +13,6 @@ import {
   EuiDescriptionList,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
-  EuiIcon,
-  EuiText,
   EuiPanel,
   EuiStat,
   EuiSpacer,
@@ -23,7 +21,7 @@ import {
 
 import { SlmPolicy } from '../../../../../../../common/types';
 import { useAppDependencies } from '../../../../../index';
-import { FormattedDateTime, ShowHideIndices } from '../../../../../components';
+import { FormattedDateTime, CollapsibleIndicesList } from '../../../../../components';
 import { linkToSnapshots, linkToRepository } from '../../../../../services/navigation';
 
 interface Props {
@@ -240,11 +238,7 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
             </EuiDescriptionListTitle>
 
             <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-              <ShowHideIndices
-                indices={indices}
-                i18nId="xpack.snapshotRestore.policyDetails.indicesCollapseAllLink"
-                defaultState={false}
-              />
+              <CollapsibleIndicesList indices={indices} />
             </EuiDescriptionListDescription>
           </EuiFlexItem>
 

x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx

@@ -19,7 +19,11 @@ import {
 import { SnapshotDetails } from '../../../../../../../common/types';
 import { SNAPSHOT_STATE } from '../../../../../constants';
 import { useAppDependencies } from '../../../../../index';
-import { DataPlaceholder, FormattedDateTime, ShowHideIndices } from '../../../../../components';
+import {
+  DataPlaceholder,
+  FormattedDateTime,
+  CollapsibleIndicesList,
+} from '../../../../../components';
 import { linkToPolicy } from '../../../../../services/navigation';
 import { SnapshotState } from './snapshot_state';
 
@@ -128,11 +132,7 @@ export const TabSummary: React.FC<Props> = ({ snapshotDetails }) => {
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            <ShowHideIndices
-              indices={indices}
-              defaultState={false}
-              i18nId="xpack.snapshotRestore.snapshotDetails.itemIndicesShowAllLink"
-            />
+            <CollapsibleIndicesList indices={indices} />
           </EuiDescriptionListDescription>
         </EuiFlexItem>
       </EuiFlexGroup>