diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/config-color.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/config-color.svg new file mode 100644 index 00000000000..59096a18ca5 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/config-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/dashboard.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/dashboard.svg index 0042657e4b4..c53e0e755c2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/dashboard.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/dashboard.svg @@ -1,4 +1,4 @@ - - + + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/lineage-color.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/lineage-color.svg new file mode 100644 index 00000000000..4d2c070dda1 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/lineage-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/manage-color.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/manage-color.svg new file mode 100644 index 00000000000..029e652df8a --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/manage-color.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/pipeline.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/pipeline.svg index ca57d265cf4..442ab29ac4e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/pipeline.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/pipeline.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/profiler-color.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/profiler-color.svg new file mode 100644 index 00000000000..905b875500f --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/profiler-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/schema-color.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/schema-color.svg new file mode 100644 index 00000000000..3781c5ef451 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/schema-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/search-color.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/search-color.svg new file mode 100644 index 00000000000..e99fa9ee763 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/search-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/search.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/search.svg index 2a697ffe36a..2501900a7f2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/search.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/search.svg @@ -1,3 +1,3 @@ - - + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/topic.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/topic.svg index 84f21f93853..61448b8690d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/topic.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/topic.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx index 53b031ef0d8..6ff7acd0fa2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx @@ -97,6 +97,7 @@ const DashboardDetails = ({ alt: 'schema', name: 'icon-schema', title: 'Details', + selectedName: 'icon-schemacolor', }, isProtected: false, position: 1, @@ -107,6 +108,7 @@ const DashboardDetails = ({ alt: 'manage', name: 'icon-manage', title: 'Manage', + selectedName: 'icon-managecolor', }, isProtected: true, protectedState: !owner || hasEditAccess(), diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx index 79bfbc1055c..cf421ad18b3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx @@ -124,6 +124,7 @@ const DatasetDetails: React.FC = ({ alt: 'schema', name: 'icon-schema', title: 'Schema', + selectedName: 'icon-schemacolor', }, isProtected: false, position: 1, @@ -134,6 +135,7 @@ const DatasetDetails: React.FC = ({ alt: 'profiler', name: 'icon-profiler', title: 'Profiler', + selectedName: 'icon-profilercolor', }, isProtected: false, position: 2, @@ -144,6 +146,7 @@ const DatasetDetails: React.FC = ({ alt: 'lineage', name: 'icon-lineage', title: 'Lineage', + selectedName: 'icon-lineagecolor', }, isProtected: false, position: 3, @@ -154,6 +157,7 @@ const DatasetDetails: React.FC = ({ alt: 'dbt-model', name: 'dbtmodel-light-grey', title: 'DBT', + selectedName: 'icon-schemacolor', }, isProtected: false, isHidden: !dataModel?.sql, @@ -165,6 +169,7 @@ const DatasetDetails: React.FC = ({ alt: 'manage', name: 'icon-manage', title: 'Manage', + selectedName: 'icon-managecolor', }, isProtected: true, protectedState: !owner || hasEditAccess(), diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx index b709d159cfd..24d0962903a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx @@ -316,6 +316,7 @@ const DatasetVersion: React.FC = ({ alt: 'schema', name: 'icon-schema', title: 'Schema', + selectedName: 'icon-schemacolor', }, isProtected: false, position: 1, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx index 3fc8fa77c1f..b8f93df8c4b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -410,7 +410,11 @@ const Explore: React.FC = ({ {tabDetail.label} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx index a0919a3d2f9..ac31b7f4804 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx @@ -113,7 +113,11 @@ const MyAssetStats: FunctionComponent = ({ className="tw-flex tw-items-center tw-justify-between tw-mb-2" key={index}>
- + {data.link ? ( = ({ alt: 'schema', name: 'icon-schema', title: 'Schema', + selectedName: 'icon-schemacolor', }, isProtected: false, position: 1, @@ -122,6 +123,7 @@ const TopicDetails: React.FC = ({ alt: 'config', name: 'icon-config', title: 'Config', + selectedName: 'icon-configcolor', }, isProtected: false, position: 2, @@ -132,6 +134,7 @@ const TopicDetails: React.FC = ({ alt: 'manage', name: 'icon-manage', title: 'Manage', + selectedName: 'icon-managecolor', }, isProtected: true, protectedState: !owner || hasEditAccess(), diff --git a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx index 23003ff2288..0eb3bdf0983 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx @@ -63,6 +63,7 @@ const Appbar: React.FC = (): JSX.Element => { const [searchValue, setSearchValue] = useState(searchQuery); const [isOpen, setIsOpen] = useState(true); const [isFeatureModalOpen, setIsFeatureModalOpen] = useState(false); + const [searchIcon, setSearchIcon] = useState('icon-searchv1'); const [version, setVersion] = useState(''); @@ -215,7 +216,7 @@ const Appbar: React.FC = (): JSX.Element => { { placeholder="Search for Table, Topics, Dashboards and Pipeline" type="text" value={searchValue || ''} + onBlur={() => setSearchIcon('icon-searchv1')} onChange={(e) => { setSearchValue(e.target.value); }} + onFocus={() => setSearchIcon('icon-searchv1color')} onKeyDown={(e: React.KeyboardEvent) => { const target = e.target as HTMLInputElement; if (e.key === 'Enter') { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx index 74cf9c0a2a0..58df9ad4ebd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx @@ -24,6 +24,7 @@ type Tab = { alt: string; name: string; title: string; + selectedName: string; }; isProtected: boolean; isHidden?: boolean; @@ -60,7 +61,11 @@ const TabsPane = ({ activeTab, setActiveTab, tabs, className = '' }: Props) => { onClick={() => setActiveTab?.(tab.position)}> {' '} @@ -75,12 +80,18 @@ const TabsPane = ({ activeTab, setActiveTab, tabs, className = '' }: Props) => { onClick={() => setActiveTab?.(tab.position)}> {' '} {tab.name} - {!isNil(tab.count) ? getCountBadge(tab.count) : null} + {!isNil(tab.count) + ? getCountBadge(tab.count, '', tab.position === activeTab) + : null} ) ) : null diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx index 4daa71d8909..f08283ad59d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx @@ -16,6 +16,7 @@ import classNames from 'classnames'; import { debounce } from 'lodash'; import PropTypes from 'prop-types'; import React, { useCallback, useEffect, useState } from 'react'; +import SVGIcons from '../../../utils/SvgUtils'; type Props = { onSearch: (text: string) => void; @@ -70,17 +71,12 @@ const Searchbar = ({ })} data-testid="search-bar-container"> {label !== '' && } -
- - {/*
- - - -
*/} +
+ { alt: 'tables', name: 'table-grey', title: 'Tables', + selectedName: 'table', }, count: tableInstanceCount, isProtected: false, diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css index 96b972fb1ac..0ea5ff9a504 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css @@ -94,7 +94,7 @@ @apply tw-text-grey-body tw-font-normal tw-pt-4 tw-pb-2 tw-px-6 tw-border-b-2 tw-border-transparent hover:tw-border-main focus:tw-outline-none; } .tw-gh-tabs.active { - @apply tw-text-grey-dark tw-border-b-2 tw-border-primary; + @apply tw-border-b-2 tw-border-primary tw-text-primary tw-font-medium; } .tw-gh-tabs:disabled { @apply tw-opacity-50 tw-pointer-events-none hover:tw-border-none; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css index 33696b1bf55..7fefcb26299 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css @@ -165,6 +165,10 @@ a:focus { } .search-grey { width: 600px; + background: #f8f9fa; +} +.search-grey::placeholder { + color: #6b7280; } .search-grey.has-search { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx index fd2b5cc47aa..4f664d03c32 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -19,6 +19,7 @@ import IconOkta from '../assets/img/icon-okta.png'; import IconWelcomePopper from '../assets/img/welcome-popper-icon.png'; import IconAPI from '../assets/svg/api.svg'; import IconSuccess from '../assets/svg/check.svg'; +import IconConfigColor from '../assets/svg/config-color.svg'; import IconConfig from '../assets/svg/config.svg'; import IconDashboardGrey from '../assets/svg/dashboard-grey.svg'; import IconDashboard from '../assets/svg/dashboard.svg'; @@ -68,14 +69,19 @@ import IconNotNull from '../assets/svg/icon-notnull.svg'; import IconUnique from '../assets/svg/icon-unique.svg'; import IconInfo from '../assets/svg/info.svg'; import IconIngestion from '../assets/svg/ingestion.svg'; +import IconLineageColor from '../assets/svg/lineage-color.svg'; import LogoMonogram from '../assets/svg/logo-monogram.svg'; import Logo from '../assets/svg/logo.svg'; +import IconManageColor from '../assets/svg/manage-color.svg'; import IconMinus from '../assets/svg/minus.svg'; import IconPipelineGrey from '../assets/svg/pipeline-grey.svg'; import IconPipeline from '../assets/svg/pipeline.svg'; import IconPlus from '../assets/svg/plus.svg'; +import IconProfilerColor from '../assets/svg/profiler-color.svg'; import IconProfiler from '../assets/svg/profiler.svg'; import IconHelpCircle from '../assets/svg/question-circle.svg'; +import IconSchemaColor from '../assets/svg/schema-color.svg'; +import IconSearchV1Color from '../assets/svg/search-color.svg'; import IconSearchV1 from '../assets/svg/search.svg'; import IconSetting from '../assets/svg/service.svg'; import IconSlackGrey from '../assets/svg/slack-grey.svg'; @@ -183,6 +189,12 @@ export const Icons = { TAG_GREY: 'icon-tag-grey', TIER: 'icon-tier', SEARCHV1: 'icon-searchv1', + SCHEMACOLOR: 'icon-schemacolor', + CONFIGCOLOR: 'icon-configcolor', + LINEAGECOLOR: 'icon-lineagecolor', + PROFILERCOLOR: 'icon-profilercolor', + MANAGECOLOR: 'icon-managecolor', + SEARCHV1COLOR: 'icon-searchv1color', }; const SVGIcons: FunctionComponent = ({ @@ -520,6 +532,30 @@ const SVGIcons: FunctionComponent = ({ case Icons.SEARCHV1: IconComponent = IconSearchV1; + break; + case Icons.CONFIGCOLOR: + IconComponent = IconConfigColor; + + break; + case Icons.LINEAGECOLOR: + IconComponent = IconLineageColor; + + break; + case Icons.MANAGECOLOR: + IconComponent = IconManageColor; + + break; + case Icons.PROFILERCOLOR: + IconComponent = IconProfilerColor; + + break; + case Icons.SCHEMACOLOR: + IconComponent = IconSchemaColor; + + break; + case Icons.SEARCHV1COLOR: + IconComponent = IconSearchV1Color; + break; default: