mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-10-06 22:35:24 +00:00
7b5834e044
* Domain, Sub-domain, Data Product listing (#23374) * Domain, Sub-domain, Data Product listing * feat: implement atomic design architecture with micro hooks for entity listings This commit introduces a comprehensive atomic design system that eliminates code duplication while providing maximum flexibility through composable micro hooks. ## Key Features ### Atomic Design Structure - Created `src/components/common/atoms/` with feature-based organization - Implemented micro hooks (5-15 lines each) with single responsibilities - Added comprehensive JSDoc documentation for each micro hook ### Entity Listing Improvements - Refactored domain, subdomain, and data product listings - Simplified entity-specific hooks using shared domain atoms - Implemented flexible `useDataTable({ listing })` interface ### Performance & Stability - Fixed infinite API calls and re-render loops - Implemented proper useCallback/useMemo patterns with stable dependencies - Added error boundaries and proper error handling ### UX Improvements - Fixed search to trigger on Enter key (eliminated race conditions) - Updated sidebar navigation to use singular forms for sub-menu items - Fixed navigation paths for data product details - Added proper translation keys and removed hardcoded strings ### Bug Fixes - Fixed filter field mappings to use `.keyword` for exact matching - Fixed data product navigation paths (`/dataProduct` vs `/data-product`) - Fixed filter styling to use original SearchDropdown components - Temporarily disabled problematic domainType filter due to API errors 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(ui): add i18n support and enhance atomic hooks for entity listings - Add useDelete hook with proper i18n for entity deletion with confirmation modal - Add useCardView hook for flexible card layout rendering - Add useViewToggle hook for table/card view switching - Add useDomainCardTemplates for domain and data product card layouts - Add TagsCell component for rendering glossary and classification tags - Refactor useTableRow to use composition with useCellRenderer - Fix i18n translations for delete confirmation messages - Update Domain, DataProduct, and SubDomains pages to use new atomic hooks - Add missing translation keys to en-us.json 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat(ui): implement MUI-based tree select components and atomic design patterns - Add MUIAsyncTreeSelect component with lazy loading and keyboard navigation - Implement MUIGlossaryTagSuggestion for hierarchical glossary term selection - Add MUITagSuggestion for improved tag selection experience - Create reusable TagChip component for consistent tag display - Implement atomic drawer hooks for form handling - Update domain and data product listing pages with new components - Add comprehensive tree selection hooks (data, expansion, selection, search) - Enhance form utilities with MUI field types 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat(ui): enhance drawer styling and add MUI form components - Add gradient background image to drawer header with 30% opacity - Apply rounded top corners (16px) to drawer for modern appearance - Add box shadow to drawer footer for visual hierarchy - Introduce MUIFormItemLabel component for consistent form labels - Fix TypeScript any type warning in AddDomainForm - Enhance domain listing pages with improved drawer integration 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * feat(ui): implement MUI-based user/team selection component with atomic design - Add MUIUserTeamSelect component with atomic design patterns - Create ProfilePicture atomic component for consistent avatar rendering - Update AddDomainForm to use new MUI components instead of legacy selectors - Enhance useCellRenderer to use ProfilePicture for owner display - Add support for user-only, team-only, and mixed selection modes - Implement smart selection logic preventing user/team conflicts - Add internationalization support for new selection component 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat(ui): add MUI domain select component and fix drawer close functionality - Implement MUIDomainSelect component using MUIAsyncTreeSelect for hierarchical domain selection - Fix drawer close/cancel button functionality with proper onBeforeClose pattern - Standardize form submission patterns across domain and data product forms - Enhance MUIAsyncTreeSelect with keyboard navigation and scroll-to-view - Clean EntityReference objects to match API schema requirements - Remove duplicate onSubmit handlers in drawer forms 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat(ui): implement MUI-based color and icon picker components for domain forms - Add MUIColorPicker component with predefined color palette and accessibility features - Add MUIIconPicker component with icon selection and URL input capabilities - Update AddDomainForm to use new MUI components with improved layout and responsive design - Create IconUtils for centralized icon rendering functionality - Update cell renderer to handle icons properly with fallback support - Enhance form styling with backdrop blur adjustments and form label theming - Add missing translation keys for icon-plural and url labels - Standardize drawer widths across domain and data product forms 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Satish <satish@Satishs-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com> * Remove entity description in row * Add placeholders for owners and experts fields * Clear the form on submit * Reset form on submit and cancel * Revert "Reset form on submit and cancel" This reverts commit e2a19cfd1005d0d967530931287c0a125595eef7. * add explore filter * Add icons * Fix search functionality for icons * Change width of form from 750px to 670px for subdomain and data product * retain filters in url * Change background color Editor toolbar to white * Fix no data available for glossary tags * show filter selections * Revert "Change background color Editor toolbar to white" This reverts commit a0bdc2231ab0d40a47ef91bd425deb2fb1d2dc87. * persist filters in url and selection * minor fixes * fix tests * fix tests * fix tests * fix playwrights * Change helper text background and foreground colors for Domain type (#23594) * feat: Create reusable EntityAvatar component for consistent icon rendering (#23609) - Created EntityAvatar component to centralize entity icon rendering logic - Updated domain and data product detail pages to use EntityAvatar - Updated useCellRenderer to use EntityAvatar for listing pages - Supports custom icons via style.iconURL and custom colors via style.color - Handles URL-based icons, icon names from ICON_MAP, and default icons 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Satish <satish@Satishs-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com> * feat: add dynamic permission checks for create buttons in listing pages (#23610) - Update DomainListPage to dynamically check domain.Create permission - Update DataProductListPage to dynamically check dataProduct.Create permission - Replace hardcoded createPermission: true with actual permission checks - Import and use usePermissionProvider hook for both components 🤖 Generated with Claude Code Co-authored-by: Satish <satish@Satishs-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com> * fix: remove hardcoded SubDomain conditional logic from EntityAvatar - Remove special case handling for SubDomain icons - Remove unused SubDomainIcon import - Let getDefaultIconForEntityType handle all entity types uniformly - Ensures consistent icon selection across all entity types 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * fix playwrights * Add tooltip for icon (#23588) * feat: Replace Ant Design toast notifications with MUI notistack (#23608) - Added notistack dependency to UI packages - Created NotistackUtils.ts with notification helper functions (error, success, info, warning) - Created SnackbarContent styled component in ui-core-components package - Configured SnackbarProvider in App.tsx with custom styled content - Migrated domain, data product, and sub-domain components to use notistack - Error notifications display at top-center position - Success notifications maintain top-right position (default) - Removed unused MuiSnackbarContent theme override 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Satish <satish@Satishs-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com> * Change editor toolbar background color to white for add domain form (#23587) * fix permission test * Update editor border radius (#23618) * Update editor border radius * Update editor border radius to 8px on all side for add domain form * feat: enhance notification system with MUI styling and customizable messages - Add MUI-styled snackbar notifications with themed backgrounds and borders - Create NotificationMessage component with Untitled UI icons and ring effects - Update notification utilities to accept React.ReactNode for flexible formatting - Apply Typography with fontWeight: 600 to all domain/subdomain/data product notifications - Use lightest [25] shade for subtle notification backgrounds * fix: ensure form resets on cancel and preserves data on error - Fix form not resetting when drawer is cancelled/closed - Override closeDrawer in useCompositeDrawer to call onBeforeClose - Add onCancel callbacks to reset form in all domain/data product drawers - Prevent form reset on submission errors by rejecting promises - Ensure form data is preserved when errors occur (e.g., duplicate names) This ensures proper form state management: - Forms reset when drawer is closed via X button or Cancel button - Forms preserve user input when validation or server errors occur - Users can fix errors and retry without re-entering all data * feat: add Playwright test compatibility to notistack notifications - Add data-testid="alert-bar" to snackbar containers using SnackbarProps - Add data-testid="alert-icon" to notification icons - Add data-testid="alert-icon-close" to close buttons - Implement close button functionality for all notification variants - Update DomainListPage to pass closeSnackbar function - Ensure compatibility with existing toastNotification test utility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: update domain-related test IDs for better Playwright compatibility (#23630) - Change add domain button from 'add-entity-button' to 'add-domain' - Add 'form-heading' test ID to drawer header titles - Update Playwright domain utilities to use new test IDs - Update domain spec tests to use correct button test IDs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Satish <satish@Satishs-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com> * feat: add closeSnackbar functionality to domain and data product form notifications - Enable manual dismissal of success/error notifications for form submissions - Update DataProductListPage and DomainDetailsPage notification calls - Improve user control over notification lifecycle for key actions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add default icons for domains and data product (#23633) * test: improve Playwright test reliability with timeouts and race condition fixes - Fix race condition in subdomain creation test using Promise.all - Add 15-second timeouts to element visibility checks across domain tests - Add timeouts to tab clicks and count verification functions - Prevent flaky test failures in CI/CD environments 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add 2px gap between label and info icon * Move add domain form styles into a new file * test: fix Playwright domain and subdomain test selectors - Add data-testid to table rows for reliable subdomain selection - Fix race conditions using Promise.all() pattern - Update search box locator from getByRole to getByPlaceholder - Add skipDomainSelection parameter to prevent redundant navigation - Update IngestionBot test to skip domain selection when already on page 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update tests and remove domain filter * Set searchbox width through props (#23655) * test: fix Playwright test timeouts in domain and data product selection - Wait for initial page load before searching in selectDomain - Wait for initial page load before searching in selectDataProduct - Use data-testid selector instead of text filter in selectDataProduct - Add 15s timeout to data product click action Prevents race conditions where search interferes with initial page load, fixing "Target page, context or browser has been closed" timeout errors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * test: remove redundant selectDomain calls in IngestionBot test Remove duplicate selectDomain calls before addServicesToDomain since the function already handles domain selection internally via goToAssetsTab. This prevents potential race conditions and timeout issues on CI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add placeholder for domain field (#23658) * fix(playwright): handle search debounce race condition in domain/data product selection Fixed race condition where domain/data product rows were clicked before search debounce completed: - Added loader wait cycle after search to ensure debounce completes before clicking - Applied to both selectDomain and selectDataProduct functions - Fixes 3 failing tests: Create DataProducts, Update custom properties, Clear assets after deletion 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor(playwright): extract search debounce wait pattern and remove manual timeouts - Created waitForSearchDebounce() helper function to encapsulate debounce wait logic - Replaced duplicate code in selectDomain() and selectDataProduct() - Removed all manual { timeout: 15000 } specifications from domain.ts, Domains.spec.ts, and SubDomainPagination.spec.ts - Uses Playwright's default 30s timeout instead of manual timeout specifications 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(ui): improve MUIUserTeamSelect with freeSolo and request cancellation Enhanced the user/team selection component to fix typing issues and race conditions: - Added freeSolo prop to allow immediate typing without requiring dropdown interaction - Modified open state logic to prevent empty dropdown when no search results found - Implemented AbortController signal passing through fetchUsers/fetchTeams to searchData - Updated searchData API to accept optional AbortSignal parameter for request cancellation - Prevents race conditions where stale API responses overwrite newer search results This ensures smooth typing experience and reliable search results in user/team selection fields. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor(ui): improve MUIUserTeamSelect async search and state management - Separate user and team options into independent state (matching antd version) - Add freeSolo prop to allow immediate typing without selection - Force listbox remount with key prop to fix async dropdown not updating - Remove request cancellation logic and deduplication (uniqBy) - Update handlers to filter freeSolo string values 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Disable next button when there are no items (#23685) * fix(playwright): reduce search debounce timeout to 999ms Add 999ms timeout to loader appearance check in waitForSearchDebounce to align with component's 300ms search debounce and prevent long waits 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Satish <satish@Satishs-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Ushran Gouhar <ushran987@gmail.com> Co-authored-by: karanh37 <karanh37@gmail.com> Co-authored-by: Karan Hotchandani <33024356+karanh37@users.noreply.github.com> Co-authored-by: Ushran Gouhar <43915259+ugouhar@users.noreply.github.com>