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