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

* apply new tab design overall application where required

* fix the background color and border double border

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

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

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

@@ -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}

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

@@ -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}

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

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

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

@@ -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,8 +494,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   }, [testCases]);
 
   return (
-    <Row gutter={[16, 16]}>
+    <>
-      <Col span={24}>
       <Table
         className="test-case-table-container"
         columns={columns}
@@ -538,8 +537,6 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
         size="small"
         onChange={handleTableChange}
       />
-      </Col>
-      <Col>
       <EditTestCaseModal
         testCase={selectedTestCase?.data as TestCase}
         visible={selectedTestCase?.action === 'UPDATE'}
@@ -576,8 +573,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
           onCancel={handleCancel}
         />
       )}
-      </Col>
+    </>
-    </Row>
   );
 };
 

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

@@ -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>
   );

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

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

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

@@ -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}

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

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

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

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

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

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

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

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

openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx

@@ -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}

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

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

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

@@ -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}>

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

@@ -343,11 +343,9 @@ 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"
+            className="tabs-new"
             data-testid="tabs"
             items={tabs.map((tab) => ({
               key: tab.key,
@@ -355,15 +353,11 @@ const Users = ({
               disabled: tab.disabled,
             }))}
             renderTabBar={(props, DefaultTabBar) => (
-                  <div>
               <DefaultTabBar {...props} />
-                  </div>
             )}
             onChange={activeTabHandler}
           />
-            </div>
+          <Row className="users-tabs-container" gutter={[16, 16]}>
-          </Row>
-          <Row className="tabs-content" gutter={[16, 16]}>
             <Col span={24}>
               {tabs.find((tab) => tab.key === currentTab)?.children}
             </Col>

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

@@ -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 {
+.users-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 {
   .activity-feed-tab {
     border: none;
     border-radius: 0px;
-
-    .right-container {
-      border-radius: 12px;
-      border: 1px solid @grey-15;
-    }
   }
 }
 

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

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

openmetadata-ui/src/main/resources/ui/src/pages/AlertDetailsPage/AlertDetailsPage.tsx

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

openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx

@@ -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>

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

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

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

@@ -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 />

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

@@ -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 {

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

@@ -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"

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

@@ -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 {

openmetadata-ui/src/main/resources/ui/src/pages/ServicesPage/ServicesPage.tsx

@@ -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'
                 ? []

openmetadata-ui/src/main/resources/ui/src/pages/ServicesPage/service-page.less

@@ -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;
+  }
+}

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

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