From 16b1d2612ce57b5c70a6c6cdb7695da0d5c5d75b Mon Sep 17 00:00:00 2001
From: Pranshu Srivastava <rexagod@gmail.com>
Date: Tue, 7 Sep 2021 19:15:15 +0530
Subject: [PATCH] Bug 1961391: Textual updates follow-up

This PR:
* Covers the corner case where there are a lot of storage classes.
* Removes the un-used `commaSeparatedString` method.
---
 .../locales/en/ceph-storage-plugin.json       |  1 -
 .../ceph-storage-plugin/src/utils/common.tsx  | 20 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json b/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
index d446db98e06..6be83eb87e5 100644
--- a/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
+++ b/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
@@ -720,7 +720,6 @@
   "When the nodes in the selected StorageClass are spread across fewer than 3 availability zones, the StorageCluster will be deployed with the host based failure domain.": "When the nodes in the selected StorageClass are spread across fewer than 3 availability zones, the StorageCluster will be deployed with the host based failure domain.",
   "Cluster-Wide and StorageClass": "Cluster-Wide and StorageClass",
   "Cluster-Wide": "Cluster-Wide",
-  "and": "and",
   "Select at least 2 Backing Store resources": "Select at least 2 Backing Store resources",
   "Select at least 1 Backing Store resource": "Select at least 1 Backing Store resource",
   "x {{replica}} replicas = {{osdSize, number}} TiB": "x {{replica}} replicas = {{osdSize, number}} TiB",
diff --git a/frontend/packages/ceph-storage-plugin/src/utils/common.tsx b/frontend/packages/ceph-storage-plugin/src/utils/common.tsx
index cf4499cae49..a63cfeecda1 100644
--- a/frontend/packages/ceph-storage-plugin/src/utils/common.tsx
+++ b/frontend/packages/ceph-storage-plugin/src/utils/common.tsx
@@ -1,4 +1,3 @@
-import { TFunction } from 'i18next';
 import * as React from 'react';
 
 import { getLastLanguage } from '@console/app/src/components/user-preferences/language/getLastLanguage';
@@ -12,12 +11,19 @@ export const checkArbiterCluster = (storageCluster: StorageClusterKind): boolean
 export const checkFlexibleScaling = (storageCluster: StorageClusterKind): boolean =>
   storageCluster?.spec?.flexibleScaling;
 
-export const commaSeparatedString = (text: string[], t: TFunction): string =>
-  [text.slice(0, -1).join(', '), text.slice(-1)[0]].join(
-    text.length < 2 ? '' : ` ${t('ceph-storage-plugin~and')} `,
-  );
-
-export const toList = (text: string[]): React.ReactNode => text.map((s) => <li key={s}>{s}</li>);
+export const toList = (text: string[]): React.ReactNode => (
+  <div
+    style={{
+      overflowY: text.length > 3 ? 'scroll' : 'visible',
+      maxHeight: '5rem',
+      overflowX: 'hidden',
+    }}
+  >
+    {text.map((s) => (
+      <li key={s}>{s}</li>
+    ))}
+  </div>
+);
 
 export const calcPercentage = (value: number, total: number) =>
   humanizePercentage((value * 100) / total).string;