Fix: issue-612 fixed sampleData breaks (#630)

* Fix: issue-612 fixed sampleData breaks

* optimised conditional rendering
This commit is contained in:
Shailesh Parmar 2021-10-01 18:50:50 +05:30 committed by GitHub
parent b231e68c6e
commit 9671850c55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 47 deletions

View File

@ -24,60 +24,66 @@ import { isEven } from '../../utils/CommonUtils';
export type SampleColumns = { name: string; dataType: string }; export type SampleColumns = { name: string; dataType: string };
type Props = { type Props = {
sampleData: { sampleData?: {
columns: Array<SampleColumns>; columns?: Array<SampleColumns>;
rows: TableData['rows']; rows?: TableData['rows'];
}; };
}; };
const SampleDataTable: FunctionComponent<Props> = ({ sampleData }: Props) => { const SampleDataTable: FunctionComponent<Props> = ({ sampleData }: Props) => {
return ( return (
<div className="tw-table-responsive"> <div className="tw-table-responsive">
<table {sampleData?.rows && sampleData?.columns ? (
className="tw-min-w-max tw-w-full tw-table-auto" <table
data-testid="sample-data-table"> className="tw-min-w-max tw-w-full tw-table-auto"
<thead> data-testid="sample-data-table">
<tr className="tableHead-row"> <thead>
{sampleData.columns.map((column) => { <tr className="tableHead-row">
{sampleData.columns.map((column) => {
return (
<th
className="tableHead-cell"
data-testid="column-name"
key={column.name}>
{column.name}
<span className="tw-py-0.5 tw-px-1 tw-ml-1 tw-rounded tw-text-grey-muted">
({lowerCase(column.dataType)})
</span>
</th>
);
})}
</tr>
</thead>
<tbody className="tw-text-gray-600 tw-text-sm">
{sampleData?.rows?.map((row, rowIndex) => {
return ( return (
<th <tr
className="tableHead-cell" className={classNames(
data-testid="column-name" 'tableBody-row',
key={column.name}> !isEven(rowIndex + 1) ? 'odd-row' : null
{column.name} )}
<span className="tw-py-0.5 tw-px-1 tw-ml-1 tw-rounded tw-text-grey-muted"> data-testid="row"
({lowerCase(column.dataType)}) key={rowIndex}>
</span> {row.map((data, index) => {
</th> return (
<td
className="tableBody-cell"
data-testid="cell"
key={index}>
{data ? data.toString() : '--'}
</td>
);
})}
</tr>
); );
})} })}
</tr> </tbody>
</thead> </table>
<tbody className="tw-text-gray-600 tw-text-sm"> ) : (
{sampleData?.rows?.map((row, rowIndex) => { <div className="tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8">
return ( No sample data available
<tr </div>
className={classNames( )}
'tableBody-row',
!isEven(rowIndex + 1) ? 'odd-row' : null
)}
data-testid="row"
key={rowIndex}>
{row.map((data, index) => {
return (
<td
className="tableBody-cell"
data-testid="cell"
key={index}>
{data ? data.toString() : '--'}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
</div> </div>
); );
}; };

View File

@ -81,8 +81,8 @@ const SchemaTab: FunctionComponent<Props> = ({
}); });
return { return {
columns: updatedColumns as SampleColumns[], columns: updatedColumns as SampleColumns[] | undefined,
rows: sampleData.rows, rows: sampleData?.rows,
}; };
}; };