yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-26 01:46:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

MINOR: apply new tab design overall application where required (#20512)

Browse Source 
* apply new tab design overall application where required

* fix the background color and border double border
This commit is contained in:
Ashish Gupta 2025-04-04 17:04:23 +05:30 committed by GitHub
parent 61e500253f
commit a801d39d15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 151 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx
View File

@ -205,6 +205,7 @@ const APIEndpointVersion: FC<APIEndpointVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

1
openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerVersion/ContainerVersion.component.tsx
View File

@ -258,6 +258,7 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

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

@ -278,6 +278,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
data-testid="tabs"
defaultActiveKey={tab}
items={tabItems}

1
openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModelVersion/DataModelVersion.component.tsx
View File

@ -240,6 +240,7 @@ const DataModelVersion: FC<DataModelVersionProp> = ({
<Col span={24}>
<Tabs
activeKey={tab}
className="tabs-new"
items={tabItems}
onChange={handleTabChange}
/>

162
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Button, Col, Row, Skeleton, Space, Tooltip, Typography } from 'antd';
import { Button, Row, Skeleton, Space, Tooltip, Typography } from 'antd';
import { ColumnsType, TablePaginationConfig } from 'antd/lib/table';
import { FilterValue, SorterResult } from 'antd/lib/table/interface';
import { AxiosError } from 'axios';
@ -494,90 +494,86 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
}, [testCases]);
return (
<Row gutter={[16, 16]}>
<Col span={24}>
<Table
className="test-case-table-container"
columns={columns}
{...(pagingData && showPagination
? {
customPaginationProps: {
...pagingData,
showPagination,
},
<>
<Table
className="test-case-table-container"
columns={columns}
{...(pagingData && showPagination
? {
customPaginationProps: {
...pagingData,
showPagination,
},
}
: {})}
data-testid="test-case-table"
dataSource={sortedData}
loading={isLoading}
locale={{
emptyText: (
<FilterTablePlaceHolder
placeholderText={
<Transi18next
i18nKey="message.no-data-quality-test-case"
renderElement={
<a
href={DATA_QUALITY_PROFILER_DOCS}
rel="noreferrer"
target="_blank"
title="Data Quality Profiler Documentation"
/>
}
values={{
explore: t('message.explore-our-guide-here'),
}}
/>
}
: {})}
data-testid="test-case-table"
dataSource={sortedData}
loading={isLoading}
locale={{
emptyText: (
<FilterTablePlaceHolder
placeholderText={
<Transi18next
i18nKey="message.no-data-quality-test-case"
renderElement={
<a
href={DATA_QUALITY_PROFILER_DOCS}
rel="noreferrer"
target="_blank"
title="Data Quality Profiler Documentation"
/>
}
values={{
explore: t('message.explore-our-guide-here'),
}}
/>
}
/>
),
}}
pagination={false}
rowKey="id"
scroll={{ x: true }}
size="small"
onChange={handleTableChange}
/>
</Col>
<Col>
<EditTestCaseModal
testCase={selectedTestCase?.data as TestCase}
visible={selectedTestCase?.action === 'UPDATE'}
onCancel={handleCancel}
onUpdate={onTestUpdate}
/>
/>
),
}}
pagination={false}
rowKey="id"
scroll={{ x: true }}
size="small"
onChange={handleTableChange}
/>
<EditTestCaseModal
testCase={selectedTestCase?.data as TestCase}
visible={selectedTestCase?.action === 'UPDATE'}
onCancel={handleCancel}
onUpdate={onTestUpdate}
/>
{removeFromTestSuite ? (
<ConfirmationModal
bodyText={t(
'message.are-you-sure-you-want-to-remove-child-from-parent',
{
child: getEntityName(selectedTestCase?.data),
parent: getEntityName(removeFromTestSuite.testSuite),
}
)}
cancelText={t('label.cancel')}
confirmText={t('label.remove')}
header={t('label.remove-entity', { entity: t('label.test-case') })}
isLoading={isTestCaseRemovalLoading}
visible={selectedTestCase?.action === 'DELETE'}
onCancel={handleCancel}
onConfirm={handleConfirmClick}
/>
) : (
<DeleteWidgetModal
isRecursiveDelete
afterDeleteAction={afterDeleteAction}
allowSoftDelete={false}
entityId={selectedTestCase?.data?.id ?? ''}
entityName={getEntityName(selectedTestCase?.data)}
entityType={EntityType.TEST_CASE}
visible={selectedTestCase?.action === 'DELETE'}
onCancel={handleCancel}
/>
)}
</Col>
</Row>
{removeFromTestSuite ? (
<ConfirmationModal
bodyText={t(
'message.are-you-sure-you-want-to-remove-child-from-parent',
{
child: getEntityName(selectedTestCase?.data),
parent: getEntityName(removeFromTestSuite.testSuite),
}
)}
cancelText={t('label.cancel')}
confirmText={t('label.remove')}
header={t('label.remove-entity', { entity: t('label.test-case') })}
isLoading={isTestCaseRemovalLoading}
visible={selectedTestCase?.action === 'DELETE'}
onCancel={handleCancel}
onConfirm={handleConfirmClick}
/>
) : (
<DeleteWidgetModal
isRecursiveDelete
afterDeleteAction={afterDeleteAction}
allowSoftDelete={false}
entityId={selectedTestCase?.data?.id ?? ''}
entityName={getEntityName(selectedTestCase?.data)}
entityType={EntityType.TEST_CASE}
visible={selectedTestCase?.action === 'DELETE'}
onCancel={handleCancel}
/>
)}
</>
);
};

2
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/QualityTab/QualityTab.component.tsx
View File

@ -380,7 +380,7 @@ export const QualityTab = () => {
<SummaryPanel testSummary={testCaseSummary ?? INITIAL_TEST_SUMMARY} />
</Col>
<Col span={24}>
<Tabs items={tabs} onChange={handleTabChange} />
<Tabs className="tabs-new" items={tabs} onChange={handleTabChange} />
</Col>
</Row>
);

1
openmetadata-ui/src/main/resources/ui/src/components/Database/StoredProcedureVersion/StoredProcedureVersion.component.tsx
View File

@ -201,6 +201,7 @@ const StoredProcedureVersion = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

1
openmetadata-ui/src/main/resources/ui/src/components/Database/TableVersion/TableVersion.component.tsx
View File

@ -262,6 +262,7 @@ const TableVersion: React.FC<TableVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

1
openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricVersion/MetricVersion.tsx
View File

@ -206,6 +206,7 @@ const MetricVersion: FC<MetricVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

1
openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelVersion/MlModelVersion.component.tsx
View File

@ -359,6 +359,7 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

1
openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx
View File

@ -196,6 +196,7 @@ const NotificationBox = ({
{t('label.notification-plural')}
</Typography.Title>
<Tabs
className="tabs-new"
defaultActiveKey="Task"
size="small"
tabBarGutter={24}

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

@ -295,6 +295,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

1
openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx
View File

@ -230,6 +230,7 @@ const SearchIndexVersion: React.FC<SearchIndexVersionProps> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

2
openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx
View File

@ -448,7 +448,7 @@ function IngestionListTable({
return (
<>
<div
className={classNames('m-b-md', tableContainerClassName)}
className={classNames(tableContainerClassName)}
data-testid="ingestion-table">
<Table
className={tableClassName}

2
openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Services.tsx
View File

@ -470,7 +470,7 @@ const Services = ({ serviceName }: ServicesProps) => {
return (
<Row
className="justify-center m-b-md"
className="justify-center"
data-testid="services-container"
gutter={[16, 16]}>
<Col span={24}>

36
openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/Users.component.tsx
View File

@ -343,27 +343,21 @@ const Users = ({
</div>
</Col>
<Col flex="auto">
<Row className="mb-sm w-full">
<div className="tabs-container d-flex justify-center">
<Tabs
activeKey={currentTab}
className="user-page-tabs-new"
data-testid="tabs"
items={tabs.map((tab) => ({
key: tab.key,
label: tab.label,
disabled: tab.disabled,
}))}
renderTabBar={(props, DefaultTabBar) => (
<div>
<DefaultTabBar {...props} />
</div>
)}
onChange={activeTabHandler}
/>
</div>
</Row>
<Row className="tabs-content" gutter={[16, 16]}>
<Tabs
activeKey={currentTab}
className="tabs-new"
data-testid="tabs"
items={tabs.map((tab) => ({
key: tab.key,
label: tab.label,
disabled: tab.disabled,
}))}
renderTabBar={(props, DefaultTabBar) => (
<DefaultTabBar {...props} />
)}
onChange={activeTabHandler}
/>
<Row className="users-tabs-container" gutter={[16, 16]}>
<Col span={24}>
{tabs.find((tab) => tab.key === currentTab)?.children}
</Col>

63
openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/users.less
View File

@ -21,46 +21,6 @@
align-items: flex-start;
}
.user-page-tabs {
margin-top: 10px;
.ant-tabs-nav {
margin: 0 !important;
padding: 0 20px;
}
}
.user-page-tabs-new {
height: 48px;
.ant-tabs-nav {
margin: 0;
padding: 0 20px;
.ant-tabs-nav-list {
border-bottom: none;
.ant-tabs-tab {
padding-bottom: 8px;
position: relative;
color: @text-color;
font-size: 14px;
&.ant-tabs-tab-active {
color: #1570ef;
font-weight: 600;
}
}
}
}
.ant-tabs-ink-bar {
bottom: 6px;
height: 2px;
background-color: #1570ef;
}
}
.user-layout {
> .ant-col {
padding-top: 0;
@ -210,31 +170,10 @@
}
}
.tabs-container {
background-color: @white;
display: flex;
justify-content: flex-start;
align-items: center;
height: 48px;
width: 100%;
border-radius: 12px;
margin-bottom: 20px;
border: 1px solid #eaecf5;
.ant-tabs-nav::before {
border-bottom: none !important;
}
}
.tabs-content {
.users-tabs-container {
.activity-feed-tab {
border: none;
border-radius: 0px;
.right-container {
border-radius: 12px;
border: 1px solid @grey-15;
}
}
}

1
openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicVersion/TopicVersion.component.tsx
View File

@ -223,6 +223,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
onUpdate={() => Promise.resolve()}>
<Col span={24}>
<Tabs
className="tabs-new"
defaultActiveKey={tab}
items={tabItems}
onChange={handleTabChange}

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

@ -454,7 +454,7 @@ function AlertDetailsPage({
<Col span={24}>
<Tabs
activeKey={tab}
className="m-b-lg"
className="tabs-new"
items={tabItems}
onTabClick={handleTabChange}
/>

7
openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
View File

@ -292,7 +292,12 @@ const CustomEntityDetailV1 = () => {
<PageHeader data={customPageHeader} />
</Col>
<Col className="global-settings-tabs" span={24}>
<Tabs items={tabs} key={tab} onChange={onTabChange} />
<Tabs
className="tabs-new"
items={tabs}
key={tab}
onChange={onTabChange}
/>
</Col>
</Row>
</PageLayoutV1>

1
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx
View File

@ -246,6 +246,7 @@ export const PersonaDetailsPage = () => {
<Col span={24}>
<Tabs
activeKey={activeKey}
className="tabs-new"
items={tabItems}
tabBarExtraContent={
activeKey === 'users' && (

2
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
View File

@ -449,7 +449,7 @@ const PoliciesDetailPage = () => {
onDescriptionUpdate={handleDescriptionUpdate}
/>
<Tabs defaultActiveKey="rules">
<Tabs className="tabs-new" defaultActiveKey="rules">
<TabPane key="rules" tab={t('label.rule-plural')}>
{isEmpty(policy.rules) ? (
<ErrorPlaceHolder />

3
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailsList.component.tsx
View File

@ -13,12 +13,13 @@
import Icon from '@ant-design/icons/lib/components/Icon';
import { Button, Tooltip } from 'antd';
import Table, { ColumnsType } from 'antd/lib/table';
import { ColumnsType } from 'antd/lib/table';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { ReactComponent as IconRemove } from '../../../assets/svg/ic-remove.svg';
import RichTextEditorPreviewerNew from '../../../components/common/RichTextEditor/RichTextEditorPreviewNew';
import Table from '../../../components/common/Table/Table';
import { EntityReference } from '../../../generated/type/entityReference';
import { getEntityName } from '../../../utils/EntityUtils';
import {

5
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx
View File

@ -374,7 +374,10 @@ const RolesDetailPage = () => {
onDescriptionUpdate={handleDescriptionUpdate}
/>
<Tabs data-testid="tabs" defaultActiveKey="policies">
<Tabs
className="tabs-new"
data-testid="tabs"
defaultActiveKey="policies">
<TabPane key="policies" tab={t('label.policy-plural')}>
<Space
className="role-detail-tab w-full"

3
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx
View File

@ -12,13 +12,14 @@
*/
import Icon from '@ant-design/icons/lib/components/Icon';
import { Button, Table, Tooltip } from 'antd';
import { Button, Tooltip } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { ReactComponent as IconRemove } from '../../../assets/svg/ic-remove.svg';
import RichTextEditorPreviewerNew from '../../../components/common/RichTextEditor/RichTextEditorPreviewNew';
import Table from '../../../components/common/Table/Table';
import { EntityReference } from '../../../generated/type/entityReference';
import { getEntityName } from '../../../utils/EntityUtils';
import {

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

@ -36,6 +36,7 @@ import useCustomLocation from '../../hooks/useCustomLocation/useCustomLocation';
import { getSettingPageEntityBreadCrumb } from '../../utils/GlobalSettingsUtils';
import { userPermissions } from '../../utils/PermissionsUtils';
import { getResourceEntityFromServiceCategory } from '../../utils/ServiceUtils';
import './service-page.less';
const ServicesPage = () => {
const { tab } = useParams<{ tab: string }>();
@ -95,6 +96,7 @@ const ServicesPage = () => {
<Tabs
destroyInactiveTabPane
activeKey={search as string}
className="tabs-new services-tabs"
items={[
...(serviceName === 'dataObservabilityServices'
? []

21
openmetadata-ui/src/main/resources/ui/src/pages/ServicesPage/service-page.less Normal file
View File

@ -0,0 +1,21 @@
/*
* Copyright 2025 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import (reference) url('../../styles/variables.less');
.ant-tabs.services-tabs {
.ant-tabs-tabpane {
padding: @padding-mlg;
border: 1px solid @grey-15;
margin-bottom: @margin-mlg;
}
}

2
openmetadata-ui/src/main/resources/ui/src/pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component.tsx
View File

@ -523,7 +523,7 @@ const TestSuiteDetailsPage = () => {
</Col>
<Col span={24}>
<Tabs items={tabs} />
<Tabs className="tabs-new" items={tabs} />
</Col>
<Col span={24}>
<Modal