yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-02 03:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improvements(UI): Made table styling consistent across the project (#7155)

Browse Source 
* Made table border styling consistent across the project

* Worked on comments

* classname changed for table container in dataqualitytable component

* Update openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx

Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>

Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
This commit is contained in:
Aniket Katkar 2022-09-02 16:03:24 +05:30 committed by GitHub
parent 8462d4389d
commit 383075aec9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 201 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/CustomPropertyTable.tsx
View File

@ -72,12 +72,12 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
return (
<Fragment>
<div className="tw-bg-white tw-border tw-border-main tw-rounded tw-shadow">
<div className="tw-table-container">
<table
className="tw-w-full"
data-testid="entity-custom-properties-table">
<thead data-testid="table-header">
<tr className="tableHead-row tw-border-t-0 tw-border-l-0 tw-border-r-0">
<tr className="tableHead-row">
<th className="tableHead-cell" data-testid="property-name">
Name
</th>
@ -98,7 +98,6 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
<tr
className={classNames(
`tableBody-row ${!isEven(index + 1) && 'odd-row'}`,
'tw-border-l-0 tw-border-r-0',
{
'tw-border-b-0': index === customProperties.length - 1,
}

2
openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
View File

@ -567,7 +567,7 @@ const DashboardDetails = ({
/>
</div>
</div>
<div className="tw-table-responsive tw-my-6">
<div className="tw-table-responsive tw-my-6 tw-table-container">
<table className="tw-w-full" data-testid="charts-table">
<thead>
<tr className="tableHead-row">

2
openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx
View File

@ -249,7 +249,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
description={getDashboardDescription()}
/>
</div>
<div className="tw-table-responsive tw-my-6 tw-col-span-full">
<div className="tw-table-responsive tw-my-6 tw-col-span-full tw-table-container">
<table className="tw-w-full" data-testid="schema-table">
<thead>
<tr className="tableHead-row">

4
openmetadata-ui/src/main/resources/ui/src/components/DataQualityTest/Table/DataQualityTable.tsx
View File

@ -94,7 +94,9 @@ const DataQualityTable = ({
};
return (
<div className="tw-table-responsive" data-testid="table-container">
<div
className="tw-table-responsive tw-table-container"
data-testid="table-container">
<table className="tw-w-full">
<thead>
<tr className="tableHead-row" data-testid="table-header">

2
openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx
View File

@ -40,7 +40,7 @@ const AssetsTabs = ({ assetData, onAssetPaginate, currentPage }: Props) => {
return (
<div>
<div className="" data-testid="table-container">
<div className="tw-table-container" data-testid="table-container">
<table
className="tw-bg-white tw-w-full tw-mb-4"
data-testid="database-tables">

2
openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
View File

@ -426,7 +426,7 @@ const Ingestion: React.FC<IngestionProps> = ({
</div>
</div>
{getSearchedIngestions().length ? (
<div className="tw-table-responsive tw-mb-6">
<div className="tw-table-responsive tw-mb-6 tw-table-container">
<table
className="tw-bg-white tw-w-full tw-mb-4"
data-testid="ingestion-table">

174
openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
View File

@ -340,49 +340,55 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
return (
<div className="tw-flex tw-flex-col tw-mt-2">
<h6 className="tw-font-medium tw-text-base">Hyper Parameters</h6>
<table
className="tw-w-full tw-mt-2"
data-testid="hyperparameters-table"
id="hyperparameters-table">
<thead>
<tr className="tableHead-row">
<th className="tableHead-cell">Name</th>
<th className="tableHead-cell">Value</th>
</tr>
</thead>
<tbody className="tableBody">
{mlModelDetail.mlHyperParameters &&
mlModelDetail.mlHyperParameters.length ? (
<Fragment>
{mlModelDetail.mlHyperParameters.map((param) => (
<tr
className={classNames('tableBody-row')}
data-testid="tableBody-row"
key={uniqueId()}>
<td className="tableBody-cell" data-testid="tableBody-cell">
{param.name}
</td>
<td className="tableBody-cell" data-testid="tableBody-cell">
{param.value}
</td>
</tr>
))}
</Fragment>
) : (
<tr
className={classNames('tableBody-row')}
data-testid="tableBody-row"
key={uniqueId()}>
<td
className="tableBody-cell tw-text-center"
colSpan={2}
data-testid="tableBody-cell">
No Data
</td>
<div className="tw-table-container tw-mt-2">
<table
className="tw-w-full"
data-testid="hyperparameters-table"
id="hyperparameters-table">
<thead>
<tr className="tableHead-row">
<th className="tableHead-cell">Name</th>
<th className="tableHead-cell">Value</th>
</tr>
)}
</tbody>
</table>
</thead>
<tbody className="tableBody">
{mlModelDetail.mlHyperParameters &&
mlModelDetail.mlHyperParameters.length ? (
<Fragment>
{mlModelDetail.mlHyperParameters.map((param) => (
<tr
className={classNames('tableBody-row')}
data-testid="tableBody-row"
key={uniqueId()}>
<td
className="tableBody-cell"
data-testid="tableBody-cell">
{param.name}
</td>
<td
className="tableBody-cell"
data-testid="tableBody-cell">
{param.value}
</td>
</tr>
))}
</Fragment>
) : (
<tr
className={classNames('tableBody-row')}
data-testid="tableBody-row"
key={uniqueId()}>
<td
className="tableBody-cell tw-text-center"
colSpan={2}
data-testid="tableBody-cell">
No Data
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
@ -392,47 +398,49 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
<div className="tw-flex tw-flex-col tw-mt-2">
<h6 className="tw-font-medium tw-text-base">Model Store</h6>
{mlModelDetail.mlStore ? (
<table
className="tw-w-full tw-mt-2"
data-testid="model-store-table"
id="model-store-table">
<thead>
<tr className="tableHead-row">
{Object.keys(mlModelDetail.mlStore).map((key) => (
<th className="tableHead-cell" key={uniqueId()}>
{startCase(key)}
</th>
))}
</tr>
</thead>
<tbody className="tableBody">
<tr
className={classNames('tableBody-row')}
data-testid="tableBody-row"
key={uniqueId()}>
<td className="tableBody-cell" data-testid="tableBody-cell">
<span>
<a
href={mlModelDetail.mlStore.storage}
rel="noreferrer"
target="_blank">
{mlModelDetail.mlStore.storage}
</a>
</span>
</td>
<td className="tableBody-cell" data-testid="tableBody-cell">
<span>
<a
href={mlModelDetail.mlStore.imageRepository}
rel="noreferrer"
target="_blank">
{mlModelDetail.mlStore.imageRepository}
</a>
</span>
</td>
</tr>
</tbody>
</table>
<div className="tw-mt-2 tw-table-container">
<table
className="tw-w-full"
data-testid="model-store-table"
id="model-store-table">
<thead>
<tr className="tableHead-row">
{Object.keys(mlModelDetail.mlStore).map((key) => (
<th className="tableHead-cell" key={uniqueId()}>
{startCase(key)}
</th>
))}
</tr>
</thead>
<tbody className="tableBody">
<tr
className={classNames('tableBody-row')}
data-testid="tableBody-row"
key={uniqueId()}>
<td className="tableBody-cell" data-testid="tableBody-cell">
<span>
<a
href={mlModelDetail.mlStore.storage}
rel="noreferrer"
target="_blank">
{mlModelDetail.mlStore.storage}
</a>
</span>
</td>
<td className="tableBody-cell" data-testid="tableBody-cell">
<span>
<a
href={mlModelDetail.mlStore.imageRepository}
rel="noreferrer"
target="_blank">
{mlModelDetail.mlStore.imageRepository}
</a>
</span>
</td>
</tr>
</tbody>
</table>
</div>
) : (
<span className="tw-text-grey-muted tw-text-center">No Data</span>
)}

2
openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.component.tsx
View File

@ -246,7 +246,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
description={getPipelineDescription()}
/>
</div>
<div className="tw-table-responsive tw-my-6 tw-col-span-full">
<div className="tw-table-responsive tw-my-6 tw-col-span-full tw-table-container">
<table className="tw-w-full" data-testid="schema-table">
<thead>
<tr className="tableHead-row">

4
openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx
View File

@ -101,7 +101,9 @@ const SampleDataTable: FunctionComponent<Props> = ({ sampleData }: Props) => {
</button>
) : null}
<div className="tw-table-responsive tw-overflow-x-auto" ref={tableRef}>
<div
className="tw-table-responsive tw-overflow-x-auto tw-table-container"
ref={tableRef}>
{sampleData?.rows?.length && sampleData?.columns?.length ? (
<table
className="tw-min-w-max tw-w-full tw-table-auto"

5
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
View File

@ -52,10 +52,10 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
}, []);
return (
<div className="tw-bg-white tw-border tw-border-main tw-rounded">
<div className="tw-table-container">
<table className="tw-w-full" data-testid="custom-properties-table">
<thead data-testid="table-header">
<tr className="tableHead-row tw-border-t-0 tw-border-l-0 tw-border-r-0">
<tr className="tableHead-row">
<th className="tableHead-cell tw-w-2/4" data-testid="property-name">
Name
</th>
@ -72,7 +72,6 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
<tr
className={classNames(
`tableBody-row ${!isEven(index + 1) && 'odd-row'}`,
'tw-border-l-0 tw-border-r-0',
{
'tw-border-b-0': index === customProperties.length - 1,
}

6
openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
View File

@ -514,9 +514,9 @@ const DatabaseSchemaPage: FunctionComponent = () => {
const getSchemaTableList = () => {
return (
<Fragment>
<div className="tw-table-container tw-mb-4">
<table
className="tw-bg-white tw-w-full tw-mb-4"
className="tw-bg-white tw-w-full"
data-testid="databaseSchema-tables">
<thead data-testid="table-header">
<tr className="tableHead-row">
@ -565,7 +565,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
)}
</tbody>
</table>
</Fragment>
</div>
);
};

162
openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
View File

@ -667,90 +667,92 @@ const DatabaseDetails: FunctionComponent = () => {
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
{activeTab === 1 && (
<Fragment>
<table
className="tw-bg-white tw-w-full tw-mb-4"
data-testid="database-databaseSchemas">
<thead data-testid="table-header">
<tr className="tableHead-row">
<th
className="tableHead-cell"
data-testid="header-name">
Schema Name
</th>
<th
className="tableHead-cell"
data-testid="header-description">
Description
</th>
<th
className="tableHead-cell"
data-testid="header-owner">
Owner
</th>
<th
className="tableHead-cell"
data-testid="header-usage">
Usage
</th>
</tr>
</thead>
<tbody className="tableBody">
{schemaData.length > 0 ? (
schemaData.map((schema, index) => (
<tr
className={classNames(
'tableBody-row',
!isEven(index + 1) ? 'odd-row' : null
)}
data-testid="table-column"
key={index}>
<td className="tableBody-cell">
<Link
to={
schema.fullyQualifiedName
? getDatabaseSchemaDetailsPath(
schema.fullyQualifiedName
)
: ''
}>
{schema.name}
</Link>
</td>
<td className="tableBody-cell">
{schema.description?.trim() ? (
<RichTextEditorPreviewer
markdown={schema.description}
/>
) : (
<span className="tw-no-description">
No description
</span>
<div className="tw-table-container tw-mb-4">
<table
className="tw-bg-white tw-w-full"
data-testid="database-databaseSchemas">
<thead data-testid="table-header">
<tr className="tableHead-row">
<th
className="tableHead-cell"
data-testid="header-name">
Schema Name
</th>
<th
className="tableHead-cell"
data-testid="header-description">
Description
</th>
<th
className="tableHead-cell"
data-testid="header-owner">
Owner
</th>
<th
className="tableHead-cell"
data-testid="header-usage">
Usage
</th>
</tr>
</thead>
<tbody className="tableBody">
{schemaData.length > 0 ? (
schemaData.map((schema, index) => (
<tr
className={classNames(
'tableBody-row',
!isEven(index + 1) ? 'odd-row' : null
)}
</td>
<td className="tableBody-cell">
<p>{getEntityName(schema?.owner) || '--'}</p>
</td>
<td className="tableBody-cell">
<p>
{getUsagePercentile(
schema.usageSummary?.weeklyStats
?.percentileRank || 0
data-testid="table-column"
key={index}>
<td className="tableBody-cell">
<Link
to={
schema.fullyQualifiedName
? getDatabaseSchemaDetailsPath(
schema.fullyQualifiedName
)
: ''
}>
{schema.name}
</Link>
</td>
<td className="tableBody-cell">
{schema.description?.trim() ? (
<RichTextEditorPreviewer
markdown={schema.description}
/>
) : (
<span className="tw-no-description">
No description
</span>
)}
</p>
</td>
<td className="tableBody-cell">
<p>{getEntityName(schema?.owner) || '--'}</p>
</td>
<td className="tableBody-cell">
<p>
{getUsagePercentile(
schema.usageSummary?.weeklyStats
?.percentileRank || 0
)}
</p>
</td>
</tr>
))
) : (
<tr className="tableBody-row">
<td
className="tableBody-cell tw-text-center"
colSpan={5}>
No records found.
</td>
</tr>
))
) : (
<tr className="tableBody-row">
<td
className="tableBody-cell tw-text-center"
colSpan={5}>
No records found.
</td>
</tr>
)}
</tbody>
</table>
)}
</tbody>
</table>
</div>
{Boolean(
!isNil(databaseSchemaPaging.after) ||
!isNil(databaseSchemaPaging.before)

4
openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
View File

@ -996,10 +996,10 @@ const ServicePage: FunctionComponent = () => {
{activeTab === 1 && (
<Fragment>
<div
className="tw-mt-4 tw-px-1"
className="tw-my-4 tw-table-container"
data-testid="table-container">
<table
className="tw-bg-white tw-w-full tw-mb-4"
className="tw-bg-white tw-w-full"
data-testid="database-tables">
<thead>
<tr className="tableHead-row">{getTableHeaders()}</tr>

2
openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
View File

@ -590,7 +590,7 @@ const TagsPage = () => {
onDescriptionUpdate={UpdateCategory}
/>
</div>
<div className="tw-bg-white">
<div className="tw-table-container">
<table className="tw-w-full" data-testid="table">
<thead>
<tr className="tableHead-row">

10
openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
View File

@ -78,7 +78,7 @@
/* Table css start */
.tableHead-row {
@apply tw-border tw-border-main tw-leading-normal;
@apply tw-leading-normal;
}
.tableHead-cell {
@apply tw-py-3 tw-px-6 tw-font-medium tw-text-left tw-whitespace-nowrap;
@ -87,10 +87,10 @@
@apply tw-text-grey-body;
}
.tableBody-row {
@apply tw-border tw-border-main hover:tw-bg-body-hover;
@apply tw-border-t tw-border-main hover:tw-bg-body-hover;
}
.tableBody-cell {
@apply tw-py-3 tw-px-6 tw-text-left;
@apply tw-py-2 tw-px-6 tw-text-left;
}
/* Table css end */
@ -494,4 +494,8 @@
.tw-max-w-75 {
max-width: 75%;
}
.tw-table-container {
@apply tw-bg-white tw-border tw-border-main tw-rounded tw-shadow;
}
}