From f093042245f5ccb8a5557e9d568e9f613d74d080 Mon Sep 17 00:00:00 2001 From: Ushran Gouhar <43915259+ugouhar@users.noreply.github.com> Date: Tue, 30 Sep 2025 17:39:26 +0530 Subject: [PATCH] Add default icons for domains and data product (#23633) --- .../AddDomainForm/AddDomainForm.component.tsx | 8 ++++++++ .../common/IconPicker/IconPicker.constants.ts | 12 +++++++++++- .../common/IconPicker/IconPicker.interface.ts | 1 + .../common/IconPicker/MUIIconPicker.tsx | 16 +++++++++------- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx index 7c461cdcaec..061ea1ab321 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx @@ -36,6 +36,10 @@ import { } from '../../../utils/DomainUtils'; import { generateFormFields, getField } from '../../../utils/formUtils'; import { checkPermission } from '../../../utils/PermissionsUtils'; +import { + DEFAULT_DATA_PRODUCT_ICON, + DEFAULT_DOMAIN_ICON, +} from '../../common/IconPicker'; import '../domain.less'; import { DomainFormType } from '../DomainPage.interface'; import { AddDomainFormProps } from './AddDomainForm.interface'; @@ -74,6 +78,10 @@ const AddDomainForm = ({ allowUrl: true, placeholder: t('label.icon-url'), backgroundColor: selectedColor, + defaultIcon: + type === DomainFormType.DATA_PRODUCT + ? DEFAULT_DATA_PRODUCT_ICON + : DEFAULT_DOMAIN_ICON, }, formItemLayout: FormItemLayout.HORIZONTAL, formItemProps: { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.constants.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.constants.ts index 40497d9288c..b5d059f1820 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.constants.ts @@ -56,7 +56,17 @@ import { } from '@untitledui/icons'; import { IconDefinition } from './IconPicker.interface'; -export const DEFAULT_ICON = 'Cube01'; +export const DEFAULT_ICON_NAME = 'Cube01'; +export const DEFAULT_DOMAIN_ICON: IconDefinition = { + name: 'Globe01', + component: Globe01, + category: 'default', +}; +export const DEFAULT_DATA_PRODUCT_ICON: IconDefinition = { + name: 'Cube01', + component: Cube01, + category: 'default', +}; export const AVAILABLE_ICONS: IconDefinition[] = [ { name: 'Cube01', component: Cube01, category: 'default' }, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts index 79b3fc6690d..6c4cd1c358b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/IconPicker.interface.ts @@ -37,4 +37,5 @@ export interface MUIIconPickerProps { allowUrl?: boolean; backgroundColor?: string; toolTip?: ReactNode; + defaultIcon?: IconDefinition; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx index 7e93ad423a7..3b63d849c05 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/IconPicker/MUIIconPicker.tsx @@ -27,7 +27,7 @@ import { FC, useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { renderIcon } from '../../../utils/IconUtils'; import { useSearch } from '../atoms/navigation/useSearch'; -import { AVAILABLE_ICONS, DEFAULT_ICON } from './IconPicker.constants'; +import { AVAILABLE_ICONS, DEFAULT_ICON_NAME } from './IconPicker.constants'; import { IconPickerTabValue, IconPickerValue, @@ -42,6 +42,7 @@ const MUIIconPicker: FC = ({ placeholder = 'Enter icon URL', value, toolTip, + defaultIcon, onChange, }) => { const theme = useTheme(); @@ -49,10 +50,11 @@ const MUIIconPicker: FC = ({ const anchorRef = useRef(null); const [open, setOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(''); + const resolvedIconName = defaultIcon?.name || DEFAULT_ICON_NAME; const parseValue = (val: string | IconPickerValue | undefined) => { if (!val) { - return { type: 'icons' as IconPickerTabValue, value: DEFAULT_ICON }; + return { type: 'icons' as IconPickerTabValue, value: resolvedIconName }; } if (typeof val === 'string') { if (val.startsWith('http') || val.startsWith('/')) { @@ -241,7 +243,7 @@ const MUIIconPicker: FC = ({ = ({ transition: 'all 0.2s', backgroundColor: 'transparent', color: - selectedIcon === DEFAULT_ICON + selectedIcon === resolvedIconName ? theme.palette.primary?.main : theme.palette.grey?.[700], '&:hover': { @@ -264,14 +266,14 @@ const MUIIconPicker: FC = ({ mb: 2, }} tabIndex={0} - onClick={() => handleIconSelect(DEFAULT_ICON)} + onClick={() => handleIconSelect(resolvedIconName)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); - handleIconSelect(DEFAULT_ICON); + handleIconSelect(resolvedIconName); } }}> - {AVAILABLE_ICONS[0].component({ + {(defaultIcon?.component || AVAILABLE_ICONS[0].component)({ size: 20, style: { display: 'block', strokeWidth: 1.25 }, })}