diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/search-bar.less b/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/search-bar.less
index d3d8c53f4bd..53b66bc979d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/search-bar.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/search-bar.less
@@ -13,10 +13,21 @@
@import (reference) url('../../../styles/variables.less');
.page-search-bar {
+ width: 100%;
.ant-input-affix-wrapper {
border-radius: 10px;
- border: 1px solid @blue-15;
+ border: 1px solid @border-color-6;
+ background: @grey-17;
height: 40px;
+
+ .ant-input {
+ background: @grey-17;
+
+ &::placeholder {
+ color: @grey-21;
+ font-weight: 300;
+ }
+ }
}
.ant-input-affix-wrapper:focus,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
index c131a341c1f..f59b42e72fd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
@@ -47,6 +47,7 @@ import {
handleUpdateTableColumnSelections,
} from '../../../utils/TableUtils';
import { useGenericContext } from '../../Customization/GenericProvider/GenericProvider';
+import AppBadge from '../Badge/Badge.component';
import Loader from '../Loader/Loader';
import NextPrevious from '../NextPrevious/NextPrevious';
import Searchbar from '../SearchBarComponent/SearchBar.component';
@@ -241,31 +242,41 @@ const Table =
>(
return (
-
-
- {searchProps ? (
-
-
-
- ) : null}
+
+
+
+
+
+
{t('label.table-plural')}
+
+
+
+ {searchProps ? (
+
+ ) : null}
+
Delete Modal
)
);
-jest.mock('../../components/common/NextPrevious/NextPrevious', () =>
+jest.mock(
+ '../../components/common/RichTextEditor/RichTextEditorPreviewNew',
+ () =>
+ jest
+ .fn()
+ .mockReturnValue(
+
+ RichTextEditorPreviewerNew
+
+ )
+);
+
+jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () =>
jest
.fn()
- .mockReturnValue(Next Previous
)
-);
-
-jest.mock(
- '../../components/common/RichTextEditor/RichTextEditorPreviewerV1',
- () => jest.fn().mockReturnValue(Editor
)
-);
-
-jest.mock('../../components/common/Loader/Loader', () =>
- jest.fn().mockReturnValue(Loader
)
+ .mockReturnValue(ErrorPlaceHolder
)
);
jest.mock('../../hooks/authHooks', () => ({
@@ -60,9 +63,32 @@ jest.mock('../../hooks/authHooks', () => ({
}));
jest.mock('../../rest/KpiAPI', () => ({
- getListKPIs: jest
+ getListKPIs: jest.fn().mockImplementation(() =>
+ Promise.resolve({
+ data: KPI_DATA,
+ paging: { after: '', before: '', total: 2 },
+ })
+ ),
+}));
+
+jest.mock('../../components/DataInsight/EmptyGraphPlaceholder', () => ({
+ EmptyGraphPlaceholder: jest
.fn()
- .mockImplementation(() => Promise.resolve({ data: KPI_DATA })),
+ .mockImplementation(() => EmptyGraphPlaceholder
),
+}));
+
+jest.mock('../../utils/PermissionsUtils', () => ({
+ checkPermission: jest.fn(),
+}));
+
+jest.mock('../../utils/RouterUtils', () => ({
+ getKpiPath: jest.fn(),
+}));
+
+jest.mock('../../context/PermissionProvider/PermissionProvider', () => ({
+ usePermissionProvider: jest.fn().mockReturnValue({
+ viewKPIPermission: true,
+ }),
}));
describe('KPI list component', () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
index dee48c2e92e..e57c59cfc45 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
@@ -231,8 +231,8 @@ const KPIList = () => {
return (
<>
{
{
handleTask(hasData)}
/>
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 10b268ae563..9366aa1556a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -968,13 +968,14 @@ a[href].link-text-grey,
width: 350px;
}
-// Table icons
+// Pagination styles
-.filter-icon {
- width: 16px;
- height: 16px;
+.pagination-next-icon {
+ font-size: 12px;
}
-.filter-icon-active {
- fill: @primary-color;
+.pagination-prev-icon {
+ font-size: 12px;
+ margin-top: -3px;
+ transform: rotate(180deg);
}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
index dc74a5451aa..8a93ad9c1a7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
@@ -17,10 +17,9 @@
.ant-table-thead {
tr > th {
font-weight: 500;
- color: @grey-4;
- text-transform: uppercase;
+ color: @grey-600;
border-right: none;
- border-color: @border-color;
+ border-color: @border-color-1;
}
tr > td {
color: @text-color;
@@ -29,7 +28,7 @@
}
.ant-table-body {
tr > td {
- border-color: @border-color;
+ border-color: @border-color-1;
}
}
.ant-table-cell {
@@ -37,7 +36,7 @@
}
.ant-table-bordered {
table {
- border-color: @border-color;
+ border-color: @border-color-1;
tbody {
tr {
td {
@@ -84,7 +83,7 @@
border-bottom: none;
td {
- border-bottom: 1px solid @border-color;
+ border-bottom: 1px solid @border-color-1;
}
}
}
@@ -176,3 +175,32 @@
width: 1px;
}
}
+
+// Table icons
+
+.table-action-icon {
+ width: 14px;
+ height: 14px;
+ color: @grey-600;
+ cursor: pointer;
+}
+
+.table-expand-icon {
+ margin-right: 8px;
+ color: @text-color;
+ font-size: 12px;
+}
+
+.filter-icon {
+ color: @grey-600;
+}
+
+.filter-icon-active {
+ color: @primary-color;
+}
+
+.drag-icon {
+ width: 6px;
+ margin-right: 8px;
+ color: @grey-4;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
index c44053e5ac5..80b8cb56be0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
@@ -128,6 +128,7 @@
@grey-18: #afb5d9;
@grey-19: #363f72;
@grey-20: #dce3ec;
+@grey-21: #ababab;
@text-grey-muted: @grey-4;
@de-active-color: #6b7280;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx
index 426eec96f9e..4c264a66092 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx
@@ -15,19 +15,11 @@ import { Tooltip } from 'antd';
import { t } from 'i18next';
import React from 'react';
import { ReactComponent as IconComments } from '../assets/svg/comment.svg';
-import { DE_ACTIVE_COLOR } from '../constants/constants';
import { EntityField } from '../constants/Feeds.constants';
import { EntityType } from '../enums/entity.enum';
import { ThreadType } from '../generated/entity/feed/thread';
import { ENTITY_LINK_SEPARATOR, getEntityFeedLink } from './EntityUtils';
-const iconsProps = {
- height: 14,
- name: 'comments',
- width: 14,
- style: { color: DE_ACTIVE_COLOR },
-};
-
export const getFieldThreadElement = (
onThreadLinkSelect: (value: string, threadType?: ThreadType) => void,
entityType: EntityType,
@@ -50,9 +42,9 @@ export const getFieldThreadElement = (
entity: t('label.conversation'),
})}>
{
e.preventDefault();
e.stopPropagation();
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableColumn.util.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableColumn.util.tsx
index 1401229a088..afc587e50cd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableColumn.util.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableColumn.util.tsx
@@ -16,7 +16,6 @@ import classNames from 'classnames';
import React from 'react';
import { ReactComponent as FilterIcon } from '../assets/svg/ic-filter.svg';
import { OwnerLabel } from '../components/common/OwnerLabel/OwnerLabel.component';
-import { ICON_DIMENSION } from '../constants/constants';
import { TABLE_COLUMNS_KEYS } from '../constants/TableKeys.constants';
import { EntityReference } from '../generated/type/entityReference';
import i18n from './i18next/LocalUtil';
@@ -28,7 +27,6 @@ export const columnFilterIcon = (filtered: boolean) => (
})}
component={FilterIcon}
data-testid="filter-icon"
- style={ICON_DIMENSION}
/>
);
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
index 28b2c25286b..2d73b781dfd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@@ -137,7 +137,7 @@ import Lineage from '../components/Lineage/Lineage.component';
import { SourceType } from '../components/SearchedData/SearchedData.interface';
import { NON_SERVICE_TYPE_ASSETS } from '../constants/Assets.constants';
import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
-import { DE_ACTIVE_COLOR, TEXT_BODY_COLOR } from '../constants/constants';
+import { DE_ACTIVE_COLOR } from '../constants/constants';
import { ExportTypes } from '../constants/Export.constants';
import LineageProvider from '../context/LineageProvider/LineageProvider';
import { OperationPermission } from '../context/PermissionProvider/PermissionProvider.interface';
@@ -557,21 +557,18 @@ export function getTableExpandableConfig(
expandIcon: ({ expanded, onExpand, expandable, record }) =>
expandable ? (
<>
- {isDraggable && (
-
- )}
+ {isDraggable && }
onExpand(record, e)}
/>
) : (
isDraggable && (
<>
-
+
)