yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-11 08:23:40 +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 ( return (
<Fragment> <Fragment>
<div className="tw-bg-white tw-border tw-border-main tw-rounded tw-shadow"> <div className="tw-table-container">
<table <table
className="tw-w-full" className="tw-w-full"
data-testid="entity-custom-properties-table"> data-testid="entity-custom-properties-table">
<thead data-testid="table-header"> <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"> <th className="tableHead-cell" data-testid="property-name">
Name Name
</th> </th>
@ -98,7 +98,6 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
<tr <tr
className={classNames( className={classNames(
`tableBody-row ${!isEven(index + 1) && 'odd-row'}`, `tableBody-row ${!isEven(index + 1) && 'odd-row'}`,
'tw-border-l-0 tw-border-r-0',
{ {
'tw-border-b-0': index === customProperties.length - 1, '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> </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"> <table className="tw-w-full" data-testid="charts-table">
<thead> <thead>
<tr className="tableHead-row"> <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()} description={getDashboardDescription()}
/> />
</div> </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"> <table className="tw-w-full" data-testid="schema-table">
<thead> <thead>
<tr className="tableHead-row"> <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 ( 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"> <table className="tw-w-full">
<thead> <thead>
<tr className="tableHead-row" data-testid="table-header"> <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 ( return (
<div> <div>
<div className="" data-testid="table-container"> <div className="tw-table-container" data-testid="table-container">
<table <table
className="tw-bg-white tw-w-full tw-mb-4" className="tw-bg-white tw-w-full tw-mb-4"
data-testid="database-tables"> 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>
</div> </div>
{getSearchedIngestions().length ? ( {getSearchedIngestions().length ? (
<div className="tw-table-responsive tw-mb-6"> <div className="tw-table-responsive tw-mb-6 tw-table-container">
<table <table
className="tw-bg-white tw-w-full tw-mb-4" className="tw-bg-white tw-w-full tw-mb-4"
data-testid="ingestion-table"> 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 ( return (
<div className="tw-flex tw-flex-col tw-mt-2"> <div className="tw-flex tw-flex-col tw-mt-2">
<h6 className="tw-font-medium tw-text-base">Hyper Parameters</h6> <h6 className="tw-font-medium tw-text-base">Hyper Parameters</h6>
<table <div className="tw-table-container tw-mt-2">
className="tw-w-full tw-mt-2" <table
data-testid="hyperparameters-table" className="tw-w-full"
id="hyperparameters-table"> data-testid="hyperparameters-table"
<thead> id="hyperparameters-table">
<tr className="tableHead-row"> <thead>
<th className="tableHead-cell">Name</th> <tr className="tableHead-row">
<th className="tableHead-cell">Value</th> <th className="tableHead-cell">Name</th>
</tr> <th className="tableHead-cell">Value</th>
</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> </tr>
)} </thead>
</tbody> <tbody className="tableBody">
</table> {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> </div>
); );
}; };
@ -392,47 +398,49 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
<div className="tw-flex tw-flex-col tw-mt-2"> <div className="tw-flex tw-flex-col tw-mt-2">
<h6 className="tw-font-medium tw-text-base">Model Store</h6> <h6 className="tw-font-medium tw-text-base">Model Store</h6>
{mlModelDetail.mlStore ? ( {mlModelDetail.mlStore ? (
<table <div className="tw-mt-2 tw-table-container">
className="tw-w-full tw-mt-2" <table
data-testid="model-store-table" className="tw-w-full"
id="model-store-table"> data-testid="model-store-table"
<thead> id="model-store-table">
<tr className="tableHead-row"> <thead>
{Object.keys(mlModelDetail.mlStore).map((key) => ( <tr className="tableHead-row">
<th className="tableHead-cell" key={uniqueId()}> {Object.keys(mlModelDetail.mlStore).map((key) => (
{startCase(key)} <th className="tableHead-cell" key={uniqueId()}>
</th> {startCase(key)}
))} </th>
</tr> ))}
</thead> </tr>
<tbody className="tableBody"> </thead>
<tr <tbody className="tableBody">
className={classNames('tableBody-row')} <tr
data-testid="tableBody-row" className={classNames('tableBody-row')}
key={uniqueId()}> data-testid="tableBody-row"
<td className="tableBody-cell" data-testid="tableBody-cell"> key={uniqueId()}>
<span> <td className="tableBody-cell" data-testid="tableBody-cell">
<a <span>
href={mlModelDetail.mlStore.storage} <a
rel="noreferrer" href={mlModelDetail.mlStore.storage}
target="_blank"> rel="noreferrer"
{mlModelDetail.mlStore.storage} target="_blank">
</a> {mlModelDetail.mlStore.storage}
</span> </a>
</td> </span>
<td className="tableBody-cell" data-testid="tableBody-cell"> </td>
<span> <td className="tableBody-cell" data-testid="tableBody-cell">
<a <span>
href={mlModelDetail.mlStore.imageRepository} <a
rel="noreferrer" href={mlModelDetail.mlStore.imageRepository}
target="_blank"> rel="noreferrer"
{mlModelDetail.mlStore.imageRepository} target="_blank">
</a> {mlModelDetail.mlStore.imageRepository}
</span> </a>
</td> </span>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
) : ( ) : (
<span className="tw-text-grey-muted tw-text-center">No Data</span> <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()} description={getPipelineDescription()}
/> />
</div> </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"> <table className="tw-w-full" data-testid="schema-table">
<thead> <thead>
<tr className="tableHead-row"> <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> </button>
) : null} ) : 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 ? ( {sampleData?.rows?.length && sampleData?.columns?.length ? (
<table <table
className="tw-min-w-max tw-w-full tw-table-auto" 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 ( 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"> <table className="tw-w-full" data-testid="custom-properties-table">
<thead data-testid="table-header"> <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"> <th className="tableHead-cell tw-w-2/4" data-testid="property-name">
Name Name
</th> </th>
@ -72,7 +72,6 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
<tr <tr
className={classNames( className={classNames(
`tableBody-row ${!isEven(index + 1) && 'odd-row'}`, `tableBody-row ${!isEven(index + 1) && 'odd-row'}`,
'tw-border-l-0 tw-border-r-0',
{ {
'tw-border-b-0': index === customProperties.length - 1, '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 = () => { const getSchemaTableList = () => {
return ( return (
<Fragment> <div className="tw-table-container tw-mb-4">
<table <table
className="tw-bg-white tw-w-full tw-mb-4" className="tw-bg-white tw-w-full"
data-testid="databaseSchema-tables"> data-testid="databaseSchema-tables">
<thead data-testid="table-header"> <thead data-testid="table-header">
<tr className="tableHead-row"> <tr className="tableHead-row">
@ -565,7 +565,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
)} )}
</tbody> </tbody>
</table> </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"> <div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
{activeTab === 1 && ( {activeTab === 1 && (
<Fragment> <Fragment>
<table <div className="tw-table-container tw-mb-4">
className="tw-bg-white tw-w-full tw-mb-4" <table
data-testid="database-databaseSchemas"> className="tw-bg-white tw-w-full"
<thead data-testid="table-header"> data-testid="database-databaseSchemas">
<tr className="tableHead-row"> <thead data-testid="table-header">
<th <tr className="tableHead-row">
className="tableHead-cell" <th
data-testid="header-name"> className="tableHead-cell"
Schema Name data-testid="header-name">
</th> Schema Name
<th </th>
className="tableHead-cell" <th
data-testid="header-description"> className="tableHead-cell"
Description data-testid="header-description">
</th> Description
<th </th>
className="tableHead-cell" <th
data-testid="header-owner"> className="tableHead-cell"
Owner data-testid="header-owner">
</th> Owner
<th </th>
className="tableHead-cell" <th
data-testid="header-usage"> className="tableHead-cell"
Usage data-testid="header-usage">
</th> Usage
</tr> </th>
</thead> </tr>
<tbody className="tableBody"> </thead>
{schemaData.length > 0 ? ( <tbody className="tableBody">
schemaData.map((schema, index) => ( {schemaData.length > 0 ? (
<tr schemaData.map((schema, index) => (
className={classNames( <tr
'tableBody-row', className={classNames(
!isEven(index + 1) ? 'odd-row' : null '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>
)} )}
</td> data-testid="table-column"
<td className="tableBody-cell"> key={index}>
<p>{getEntityName(schema?.owner) || '--'}</p> <td className="tableBody-cell">
</td> <Link
<td className="tableBody-cell"> to={
<p> schema.fullyQualifiedName
{getUsagePercentile( ? getDatabaseSchemaDetailsPath(
schema.usageSummary?.weeklyStats schema.fullyQualifiedName
?.percentileRank || 0 )
: ''
}>
{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> </td>
</tr> </tr>
)) )}
) : ( </tbody>
<tr className="tableBody-row"> </table>
<td </div>
className="tableBody-cell tw-text-center"
colSpan={5}>
No records found.
</td>
</tr>
)}
</tbody>
</table>
{Boolean( {Boolean(
!isNil(databaseSchemaPaging.after) || !isNil(databaseSchemaPaging.after) ||
!isNil(databaseSchemaPaging.before) !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 && ( {activeTab === 1 && (
<Fragment> <Fragment>
<div <div
className="tw-mt-4 tw-px-1" className="tw-my-4 tw-table-container"
data-testid="table-container"> data-testid="table-container">
<table <table
className="tw-bg-white tw-w-full tw-mb-4" className="tw-bg-white tw-w-full"
data-testid="database-tables"> data-testid="database-tables">
<thead> <thead>
<tr className="tableHead-row">{getTableHeaders()}</tr> <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} onDescriptionUpdate={UpdateCategory}
/> />
</div> </div>
<div className="tw-bg-white"> <div className="tw-table-container">
<table className="tw-w-full" data-testid="table"> <table className="tw-w-full" data-testid="table">
<thead> <thead>
<tr className="tableHead-row"> <tr className="tableHead-row">

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

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