From 220c46131e2e6e97496429fa946b0e1a89969f7e Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Wed, 9 Mar 2022 14:43:16 -0500
Subject: [PATCH] fix(altered-modal): make specified text fields wrap in table
 (#18822)

* fix(altered-modal): make all text fields wrap

* fix(altered-modal): limit the wrap text in particular column

* fix(altered-modal): make to update the unit test

* fix(altered-modal): make to fix the type of columnsForWrapText

* fix(alerted-modal): make to fix the type of columnsForWrapTest with string type
---
 .../src/components/AlteredSliceTag/index.jsx  |  3 ++
 .../src/components/TableCollection/index.tsx  | 27 ++++++++++++++----
 .../TableView/TableView.stories.tsx           | 28 +++++++++++++++++--
 .../components/TableView/TableView.test.tsx   | 18 ++++++++++++
 .../src/components/TableView/TableView.tsx    |  3 ++
 5 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/components/AlteredSliceTag/index.jsx b/superset-frontend/src/components/AlteredSliceTag/index.jsx
index 051412fcd8..181079a117 100644
--- a/superset-frontend/src/components/AlteredSliceTag/index.jsx
+++ b/superset-frontend/src/components/AlteredSliceTag/index.jsx
@@ -165,6 +165,8 @@ export default class AlteredSliceTag extends React.Component {
         Header: 'After',
       },
     ];
+    // set the wrap text in the specific columns.
+    const columnsForWrapText = ['Control', 'Before', 'After'];
 
     return (
       <TableView
@@ -172,6 +174,7 @@ export default class AlteredSliceTag extends React.Component {
         data={this.state.rows}
         pageSize={50}
         className="table-condensed"
+        columnsForWrapText={columnsForWrapText}
       />
     );
   }
diff --git a/superset-frontend/src/components/TableCollection/index.tsx b/superset-frontend/src/components/TableCollection/index.tsx
index f2dec54da1..a48af9f346 100644
--- a/superset-frontend/src/components/TableCollection/index.tsx
+++ b/superset-frontend/src/components/TableCollection/index.tsx
@@ -31,6 +31,7 @@ interface TableCollectionProps {
   columns: TableInstance['column'][];
   loading: boolean;
   highlightRowId?: number;
+  columnsForWrapText?: string[];
 }
 
 export const Table = styled.table`
@@ -192,13 +193,18 @@ export const Table = styled.table`
   .table-cell {
     text-overflow: ellipsis;
     overflow: hidden;
-    white-space: nowrap;
     max-width: 320px;
     line-height: 1;
     vertical-align: middle;
     &:first-of-type {
       padding-left: ${({ theme }) => theme.gridUnit * 4}px;
     }
+    &__wrap {
+      white-space: normal;
+    }
+    &__nowrap {
+      white-space: nowrap;
+    }
   }
 
   @keyframes loading-shimmer {
@@ -224,6 +230,7 @@ export default React.memo(
     rows,
     loading,
     highlightRowId,
+    columnsForWrapText,
   }: TableCollectionProps) => (
     <Table
       {...getTableProps()}
@@ -301,15 +308,23 @@ export default React.memo(
               >
                 {row.cells.map(cell => {
                   if (cell.column.hidden) return null;
-
                   const columnCellProps = cell.column.cellProps || {};
+                  const isWrapText =
+                    columnsForWrapText &&
+                    columnsForWrapText.includes(cell.column.Header as string);
+
                   return (
                     <td
                       data-test="table-row-cell"
-                      className={cx('table-cell', {
-                        'table-cell-loader': loading,
-                        [cell.column.size || '']: cell.column.size,
-                      })}
+                      className={cx(
+                        `table-cell table-cell__${
+                          isWrapText ? 'wrap' : 'nowrap'
+                        }`,
+                        {
+                          'table-cell-loader': loading,
+                          [cell.column.size || '']: cell.column.size,
+                        },
+                      )}
                       {...cell.getCellProps()}
                       {...columnCellProps}
                     >
diff --git a/superset-frontend/src/components/TableView/TableView.stories.tsx b/superset-frontend/src/components/TableView/TableView.stories.tsx
index e13ef1bf09..9d28ca38b4 100644
--- a/superset-frontend/src/components/TableView/TableView.stories.tsx
+++ b/superset-frontend/src/components/TableView/TableView.stories.tsx
@@ -43,16 +43,40 @@ InteractiveTableView.args = {
       accessor: 'name',
       Header: 'Name',
     },
+    {
+      accessor: 'summary',
+      Header: 'Summary',
+    },
   ],
   data: [
-    { id: 123, age: 27, name: 'Emily' },
-    { id: 321, age: 10, name: 'Kate' },
+    {
+      id: 123,
+      age: 27,
+      name: 'Emily',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
+    },
+    {
+      id: 321,
+      age: 10,
+      name: 'Kate',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
+    },
+    {
+      id: 321,
+      age: 10,
+      name: 'John Smith',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
+    },
   ],
   initialSortBy: [{ id: 'name', desc: true }],
   noDataText: 'No data here',
   pageSize: 1,
   showRowCount: true,
   withPagination: true,
+  columnsForWrapText: ['Summary'],
 };
 
 InteractiveTableView.argTypes = {
diff --git a/superset-frontend/src/components/TableView/TableView.test.tsx b/superset-frontend/src/components/TableView/TableView.test.tsx
index 355eb3f117..9111eee077 100644
--- a/superset-frontend/src/components/TableView/TableView.test.tsx
+++ b/superset-frontend/src/components/TableView/TableView.test.tsx
@@ -191,3 +191,21 @@ test('should render the right page', () => {
   expect(screen.getByText('Kate')).toBeInTheDocument();
   expect(screen.queryByText('Emily')).not.toBeInTheDocument();
 });
+
+test('should render the right wrap content text by columnsForWrapText', () => {
+  const props = {
+    ...mockedProps,
+    columnsForWrapText: ['Name'],
+  };
+  render(<TableView {...props} />);
+
+  expect(screen.getAllByTestId('table-row-cell')[0]).toHaveClass(
+    'table-cell__nowrap',
+  );
+  expect(screen.getAllByTestId('table-row-cell')[1]).toHaveClass(
+    'table-cell__nowrap',
+  );
+  expect(screen.getAllByTestId('table-row-cell')[2]).toHaveClass(
+    'table-cell__wrap',
+  );
+});
diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx
index 2329690c81..25a403ff9e 100644
--- a/superset-frontend/src/components/TableView/TableView.tsx
+++ b/superset-frontend/src/components/TableView/TableView.tsx
@@ -50,6 +50,7 @@ export interface TableViewProps {
   showRowCount?: boolean;
   scrollTable?: boolean;
   small?: boolean;
+  columnsForWrapText?: string[];
 }
 
 const EmptyWrapper = styled.div`
@@ -127,6 +128,7 @@ const TableView = ({
   noDataText,
   showRowCount = true,
   serverPagination = false,
+  columnsForWrapText,
   onServerPagination = () => {},
   ...props
 }: TableViewProps) => {
@@ -204,6 +206,7 @@ const TableView = ({
           rows={content}
           columns={columns}
           loading={loading}
+          columnsForWrapText={columnsForWrapText}
         />
         {isEmpty && (
           <EmptyWrapperComponent>