From 2edaacbc3d1e2efdd38dd1cf1116e9d8c35bfefe Mon Sep 17 00:00:00 2001
From: John Dorlus <jsdorlus@elastic.co>
Date: Fri, 14 Feb 2020 17:35:49 -0500
Subject: [PATCH] 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.

---
 .../components/collapsible_indices_list.tsx   | 81 +++++++++++++++++++
 .../public/app/components/index.ts            |  2 +-
 .../policy_form/steps/step_review.tsx         | 10 +--
 .../steps/step_review.tsx                     |  8 +-
 .../app/components/show_hide_indices.tsx      | 77 ------------------
 .../policy_details/tabs/tab_summary.tsx       | 12 +--
 .../snapshot_details/tabs/tab_summary.tsx     | 12 +--
 7 files changed, 96 insertions(+), 106 deletions(-)
 create mode 100644 x-pack/legacy/plugins/snapshot_restore/public/app/components/collapsible_indices_list.tsx
 delete mode 100644 x-pack/legacy/plugins/snapshot_restore/public/app/components/show_hide_indices.tsx

diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/collapsible_indices_list.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/collapsible_indices_list.tsx
new file mode 100644
index 0000000000000..96224ec1283e2
--- /dev/null
+++ b/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"
+        />
+      )}
+    </>
+  );
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts
index d460350043845..a7038ebd71578 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts
+++ b/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,
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
index bee7d004d891f..a7f7748b7d72f 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
+++ b/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>
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx
index e5e9840805ccb..0d2c2398c6012 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx
+++ b/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>
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/show_hide_indices.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/show_hide_indices.tsx
deleted file mode 100644
index 9fde1e1f91452..0000000000000
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/show_hide_indices.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * 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 { EuiDescriptionListDescription, EuiTitle, EuiLink, EuiIcon } from '@elastic/eui';
-interface Props {
-  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'
-      ? indices.split(',')
-      : indices
-    : undefined;
-  const hiddenIndicesCount =
-    displayIndices && displayIndices.length > 10 ? displayIndices.length - 10 : 0;
-  return (
-    <EuiDescriptionListDescription>
-      {displayIndices ? (
-        <div>
-          <ul>
-            {(isShowingFullIndicesList ? displayIndices : [...displayIndices].splice(0, 10)).map(
-              index => (
-                <li key={index}>
-                  <EuiTitle size="xs">
-                    <span>{index}</span>
-                  </EuiTitle>
-                </li>
-              )
-            )}
-          </ul>
-          {hiddenIndicesCount ? (
-            <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>
-      ) : (
-        <FormattedMessage
-          id="xpack.snapshotRestore.restoreForm.stepReview.summaryTab.allIndicesValue"
-          defaultMessage="All indices"
-        />
-      )}
-    </EuiDescriptionListDescription>
-  );
-};
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx
index c06ec03f5dfdf..1f63115c3a5fb 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx
+++ b/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>
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx
index 821cf93e21fb6..c71fead0a6fc2 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx
+++ b/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>