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

superset-frontend/src/components/AlteredSliceTag/index.jsx

@@ -165,13 +165,16 @@ export default class AlteredSliceTag extends React.Component {
         Header: 'After',
       },
     ];
+    // set the wrap text in the specific columns.
+    const columnsForWrapText = ['Control', 'Before', 'After'];
 
     return (
       <TableView
         columns={columns}
         data={this.state.rows}
         pageSize={50}
         className="table-condensed"
+        columnsForWrapText={columnsForWrapText}
       />
     );
   }

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}
                     >

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 = {

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',
+  );
+});

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>