mirror of https://github.com/apache/superset.git
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
This commit is contained in:
parent
fd757c4aa4
commit
220c46131e
|
@ -165,6 +165,8 @@ export default class AlteredSliceTag extends React.Component {
|
||||||
Header: 'After',
|
Header: 'After',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
// set the wrap text in the specific columns.
|
||||||
|
const columnsForWrapText = ['Control', 'Before', 'After'];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableView
|
<TableView
|
||||||
|
@ -172,6 +174,7 @@ export default class AlteredSliceTag extends React.Component {
|
||||||
data={this.state.rows}
|
data={this.state.rows}
|
||||||
pageSize={50}
|
pageSize={50}
|
||||||
className="table-condensed"
|
className="table-condensed"
|
||||||
|
columnsForWrapText={columnsForWrapText}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,6 +31,7 @@ interface TableCollectionProps {
|
||||||
columns: TableInstance['column'][];
|
columns: TableInstance['column'][];
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
highlightRowId?: number;
|
highlightRowId?: number;
|
||||||
|
columnsForWrapText?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Table = styled.table`
|
export const Table = styled.table`
|
||||||
|
@ -192,13 +193,18 @@ export const Table = styled.table`
|
||||||
.table-cell {
|
.table-cell {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
padding-left: ${({ theme }) => theme.gridUnit * 4}px;
|
padding-left: ${({ theme }) => theme.gridUnit * 4}px;
|
||||||
}
|
}
|
||||||
|
&__wrap {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
&__nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes loading-shimmer {
|
@keyframes loading-shimmer {
|
||||||
|
@ -224,6 +230,7 @@ export default React.memo(
|
||||||
rows,
|
rows,
|
||||||
loading,
|
loading,
|
||||||
highlightRowId,
|
highlightRowId,
|
||||||
|
columnsForWrapText,
|
||||||
}: TableCollectionProps) => (
|
}: TableCollectionProps) => (
|
||||||
<Table
|
<Table
|
||||||
{...getTableProps()}
|
{...getTableProps()}
|
||||||
|
@ -301,15 +308,23 @@ export default React.memo(
|
||||||
>
|
>
|
||||||
{row.cells.map(cell => {
|
{row.cells.map(cell => {
|
||||||
if (cell.column.hidden) return null;
|
if (cell.column.hidden) return null;
|
||||||
|
|
||||||
const columnCellProps = cell.column.cellProps || {};
|
const columnCellProps = cell.column.cellProps || {};
|
||||||
|
const isWrapText =
|
||||||
|
columnsForWrapText &&
|
||||||
|
columnsForWrapText.includes(cell.column.Header as string);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<td
|
<td
|
||||||
data-test="table-row-cell"
|
data-test="table-row-cell"
|
||||||
className={cx('table-cell', {
|
className={cx(
|
||||||
'table-cell-loader': loading,
|
`table-cell table-cell__${
|
||||||
[cell.column.size || '']: cell.column.size,
|
isWrapText ? 'wrap' : 'nowrap'
|
||||||
})}
|
}`,
|
||||||
|
{
|
||||||
|
'table-cell-loader': loading,
|
||||||
|
[cell.column.size || '']: cell.column.size,
|
||||||
|
},
|
||||||
|
)}
|
||||||
{...cell.getCellProps()}
|
{...cell.getCellProps()}
|
||||||
{...columnCellProps}
|
{...columnCellProps}
|
||||||
>
|
>
|
||||||
|
|
|
@ -43,16 +43,40 @@ InteractiveTableView.args = {
|
||||||
accessor: 'name',
|
accessor: 'name',
|
||||||
Header: 'Name',
|
Header: 'Name',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
accessor: 'summary',
|
||||||
|
Header: 'Summary',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
data: [
|
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 }],
|
initialSortBy: [{ id: 'name', desc: true }],
|
||||||
noDataText: 'No data here',
|
noDataText: 'No data here',
|
||||||
pageSize: 1,
|
pageSize: 1,
|
||||||
showRowCount: true,
|
showRowCount: true,
|
||||||
withPagination: true,
|
withPagination: true,
|
||||||
|
columnsForWrapText: ['Summary'],
|
||||||
};
|
};
|
||||||
|
|
||||||
InteractiveTableView.argTypes = {
|
InteractiveTableView.argTypes = {
|
||||||
|
|
|
@ -191,3 +191,21 @@ test('should render the right page', () => {
|
||||||
expect(screen.getByText('Kate')).toBeInTheDocument();
|
expect(screen.getByText('Kate')).toBeInTheDocument();
|
||||||
expect(screen.queryByText('Emily')).not.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',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
|
@ -50,6 +50,7 @@ export interface TableViewProps {
|
||||||
showRowCount?: boolean;
|
showRowCount?: boolean;
|
||||||
scrollTable?: boolean;
|
scrollTable?: boolean;
|
||||||
small?: boolean;
|
small?: boolean;
|
||||||
|
columnsForWrapText?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const EmptyWrapper = styled.div`
|
const EmptyWrapper = styled.div`
|
||||||
|
@ -127,6 +128,7 @@ const TableView = ({
|
||||||
noDataText,
|
noDataText,
|
||||||
showRowCount = true,
|
showRowCount = true,
|
||||||
serverPagination = false,
|
serverPagination = false,
|
||||||
|
columnsForWrapText,
|
||||||
onServerPagination = () => {},
|
onServerPagination = () => {},
|
||||||
...props
|
...props
|
||||||
}: TableViewProps) => {
|
}: TableViewProps) => {
|
||||||
|
@ -204,6 +206,7 @@ const TableView = ({
|
||||||
rows={content}
|
rows={content}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
columnsForWrapText={columnsForWrapText}
|
||||||
/>
|
/>
|
||||||
{isEmpty && (
|
{isEmpty && (
|
||||||
<EmptyWrapperComponent>
|
<EmptyWrapperComponent>
|
||||||
|
|
Loading…
Reference in New Issue