Chore(UI): Add pretty and eslint for openmetadata-ui-core-components for code quality#26686
Chore(UI): Add pretty and eslint for openmetadata-ui-core-components for code quality#26686aniketkatkar97 wants to merge 19 commits intomainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds Prettier + ESLint tooling to openmetadata-ui-core-components and applies the resulting formatting updates across the UI source to align code quality with openmetadata-ui.
Changes:
- Added ESLint flat config (
eslint.config.mjs) and Prettier config/ignore files. - Updated
package.jsonwith lint/format scripts and devDependencies for ESLint/Prettier. - Ran formatting across TS/TSX/CSS sources (quotes, prop ordering, line wrapping, etc.).
Reviewed changes
Copilot reviewed 130 out of 146 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| openmetadata-ui-core-components/src/main/resources/ui/src/theme/button-theme.ts | Formatting-only (import wrapping) to match Prettier style |
| openmetadata-ui-core-components/src/main/resources/ui/src/styles/typography.css | Prettier formatting (quote normalization, content quotes) |
| openmetadata-ui-core-components/src/main/resources/ui/src/styles/storybook.css | Prettier formatting for CSS imports |
| openmetadata-ui-core-components/src/main/resources/ui/src/styles/globals.css | Prettier formatting (imports, font/shadow var wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Typography.stories.tsx | Prettier formatting (types, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Tooltip.stories.tsx | Prettier formatting (quotes, prop ordering, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Toggle.stories.tsx | Prettier formatting (quotes, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Tags.stories.tsx | Prettier formatting (quotes, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Slider.stories.tsx | Prettier formatting (JSX wrapping, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/SlideoutMenu.stories.tsx | Prettier formatting (quotes, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Select.stories.tsx | Prettier formatting (prop ordering, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/RadioButtons.stories.tsx | Prettier formatting (import wrapping, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/ProgressIndicators.stories.tsx | Prettier formatting (import wrapping, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Popover.stories.tsx | Prettier formatting (imports, prop ordering, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Pagination.stories.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Input.stories.tsx | Prettier formatting (imports, JSX wrapping, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Grid.stories.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/FeaturedIcon.stories.tsx | Prettier formatting (argTypes wrapping, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Dropdown.stories.tsx | Prettier formatting (imports, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/DotIcon.stories.tsx | Prettier formatting (imports, quotes) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Divider.stories.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/CloseButton.stories.tsx | Prettier formatting (imports, quotes) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/CheckboxIcons.stories.tsx | Prettier formatting (imports, quotes) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Checkbox.stories.tsx | Prettier formatting (imports, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Card.stories.tsx | Prettier formatting (JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/ButtonUtility.stories.tsx | Prettier formatting (imports, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/ButtonGroup.stories.tsx | Prettier formatting (import wrapping, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/BaseButton.stories.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/stories/Avatar.stories.tsx | Prettier formatting (imports, prop ordering, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/hooks/use-resize-observer.ts | Prettier formatting (quotes/indentation) |
| openmetadata-ui-core-components/src/main/resources/ui/src/hooks/use-clipboard.ts | Prettier formatting (quotes/spacing) |
| openmetadata-ui-core-components/src/main/resources/ui/src/hooks/use-breakpoint.ts | Prettier formatting (quotes/wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/constants/Tabs.constants.ts | Prettier formatting (quotes/object wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/foundations/typography.tsx | Prettier formatting (quotes, export formatting) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/foundations/dot-icon.tsx | Prettier formatting (JSX attribute wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/checkbox-icons.tsx | Prettier formatting (JSX attribute ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/video-player/play-button-icon.tsx | Prettier formatting (quotes, indentation) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/video-player/icons.tsx | Prettier formatting (JSX attribute ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/tooltip/tooltip.tsx | Prettier formatting (imports, quotes, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/textarea/textarea.tsx | Prettier formatting (imports, JSX & style blocks) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/tags/base-components/tag-close-x.tsx | Prettier formatting (imports, JSX & prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/tags/base-components/tag-checkbox.tsx | Prettier formatting (quotes, JSX attribute ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/slider/slider.tsx | Prettier formatting (imports, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/skeleton/skeleton.tsx | Prettier formatting (quotes, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-native.tsx | Prettier formatting (imports, JSX attribute ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-item.tsx | Prettier formatting (imports, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/select/popover.tsx | Prettier formatting (imports, quotes) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/progress-indicators/simple-circle.tsx | Prettier formatting (wrapping/attribute ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/progress-indicators/progress-indicators.tsx | Prettier formatting (typing/JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/input/label.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/input/hint-text.tsx | Prettier formatting (quotes, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/grid/grid.tsx | Prettier formatting (typing, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/form/hook-form.tsx | Prettier formatting (typing, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/form/form.tsx | Prettier formatting (quotes) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/file-upload-trigger/file-upload-trigger.tsx | Prettier formatting (imports, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/divider/divider.tsx | Prettier formatting (quotes, JSX ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/card/card.tsx | Prettier formatting (quotes, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/buttons/close-button.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/buttons/button-utility.tsx | Prettier formatting (imports, typing, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/avatar/utils.ts | Prettier formatting (quotes, spacing) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/avatar/base-components/index.tsx | Prettier formatting (quote style) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/avatar/base-components/avatar-online-indicator.tsx | Prettier formatting (quotes, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/avatar/base-components/avatar-company-icon.tsx | Prettier formatting (quotes, JSX ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/avatar/base-components/avatar-add-button.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/avatar/avatar-label-group.tsx | Prettier formatting (quotes, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/alert/alert.tsx | Prettier formatting (imports, quotes, prop ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/popover/popover.tsx | Prettier formatting (imports, quotes, JSX ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/pagination/pagination-line.tsx | Prettier formatting (quotes, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/pagination/pagination-dot.tsx | Prettier formatting (quotes, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/modals/modal.tsx | Prettier formatting (imports, quotes, JSX ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/date-picker/range-preset.tsx | Prettier formatting (imports, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/date-picker/date-picker.tsx | Prettier formatting (imports, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/date-picker/date-input.tsx | Prettier formatting (imports, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/date-picker/calendar.tsx | Prettier formatting (imports, JSX wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/config.ts | Prettier formatting (type wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-list.tsx | Prettier formatting (quotes, JSX ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item-button.tsx | Prettier formatting (quotes, JSX ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/mobile-header.tsx | Prettier formatting (quotes, JSX ordering) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/application/accordion/accordion.tsx | Prettier formatting (quotes, wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/SnackbarContent.tsx | Prettier formatting (long string wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/src/colors/generateMuiPalettes.ts | Prettier formatting (imports, line wrapping) |
| openmetadata-ui-core-components/src/main/resources/ui/package.json | Add lint/format scripts + devDependencies for ESLint/Prettier |
| openmetadata-ui-core-components/src/main/resources/ui/eslint.config.mjs | New ESLint flat config for TS/React + Storybook overrides |
| openmetadata-ui-core-components/src/main/resources/ui/.prettierrc.yaml | New Prettier configuration |
| openmetadata-ui-core-components/src/main/resources/ui/.prettierignore | New Prettier ignore rules |
...tadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-native.tsx
Outdated
Show resolved
Hide resolved
...tadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-native.tsx
Show resolved
Hide resolved
...tadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-native.tsx
Show resolved
Hide resolved
openmetadata-ui-core-components/src/main/resources/ui/src/components/base/form/hook-form.tsx
Show resolved
Hide resolved
...e-components/src/main/resources/ui/src/components/base/progress-indicators/simple-circle.tsx
Outdated
Show resolved
Hide resolved
...tadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-native.tsx
Show resolved
Hide resolved
...tadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-native.tsx
Show resolved
Hide resolved
...tadata-ui-core-components/src/main/resources/ui/src/components/base/select/select-native.tsx
Outdated
Show resolved
Hide resolved
...e-components/src/main/resources/ui/src/components/base/progress-indicators/simple-circle.tsx
Outdated
Show resolved
Hide resolved
openmetadata-ui-core-components/src/main/resources/ui/src/components/base/slider/slider.tsx
Show resolved
Hide resolved
openmetadata-ui-core-components/src/main/resources/ui/src/components/base/slider/slider.tsx
Show resolved
Hide resolved
...onents/src/main/resources/ui/src/components/base/progress-indicators/progress-indicators.tsx
Outdated
Show resolved
Hide resolved
...onents/src/main/resources/ui/src/components/base/progress-indicators/progress-indicators.tsx
Outdated
Show resolved
Hide resolved
| setCopied(id || true); | ||
| setTimeout(() => setCopied(false), DEFAULT_TIMEOUT); |
There was a problem hiding this comment.
The timeout isn’t cleared on unmount and repeated calls can queue multiple timeouts, causing state updates after unmount or unexpected “copied” flicker. Consider storing the timeout id in a ref and clearing it before scheduling a new one, plus cleaning it up in an effect cleanup.
Code Review ✅ Approved 5 resolved / 5 findingsIntegrates Prettier and ESLint tooling for openmetadata-ui-core-components to enforce code quality standards. Resolves workflow trigger issues, removes debug logging, and corrects the CI configuration to properly lint only changed files with correct path handling. ✅ 5 resolved✅ Bug: Workflow trigger change breaks all CI jobs
✅ Bug: Debug console.log left in production component
✅ Bug: Redundant path filter for core-components eslint config
✅ Performance: Core-components CI job lints all files instead of only changed ones
✅ Bug: Core-components CI lint uses wrong file paths
OptionsAuto-apply is off → Gitar will not commit updates to this branch. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
❌ Lint Check Failed — ESLint + Prettier (core-components)The following files have style issues that need to be fixed: Fix locally: cd openmetadata-ui-core-components/src/main/resources/ui
yarn lint:fix && yarn pretty |
| console.log({ value, min, max, percentage }); | ||
|
|
There was a problem hiding this comment.
console.log was introduced in a non-story component. This will (1) fail linting with the new no-console: 'error' rule, and (2) emit noisy logs in production builds. Please remove the log statement (or gate it behind an explicit dev-only flag if you truly need it).
| console.log({ value, min, max, percentage }); |
| className, | ||
| progressClassName, | ||
| }: ProgressIndicatorWithTextProps) => { | ||
| const percentage = ((value - min) * 100) / (max - min); |
There was a problem hiding this comment.
Both ProgressBarBase and ProgressBar still divide by (max - min) without guarding against max <= min. This can produce Infinity/NaN, which then leaks into transform: translateX(...) and position styles (e.g., left: 'NaN%'). Suggest handling max - min <= 0 (similar to CircleProgressBar in simple-circle.tsx) and clamping the resulting percentage to [0, 100].
|
|
||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version-file: "${{ env.UI_WORKING_DIRECTORY }}/.nvmrc" |
There was a problem hiding this comment.
The core-components lint job uses the Node version from openmetadata-ui/.../.nvmrc rather than the core-components directory. If core-components expects a different Node version (or if the UI .nvmrc changes independently), this job may start failing unexpectedly. Prefer node-version-file: \"${{ env.CORE_COMPONENTS_WORKING_DIRECTORY }}/.nvmrc\" (and add one there) or hardcode a shared version explicitly.
| node-version-file: "${{ env.UI_WORKING_DIRECTORY }}/.nvmrc" | |
| node-version-file: "${{ env.CORE_COMPONENTS_WORKING_DIRECTORY }}/.nvmrc" |
| authorize: | ||
| if: | | ||
| github.event_name == 'pull_request_target' && | ||
| github.event_name == 'pull_request' && |
There was a problem hiding this comment.
Switching from pull_request_target to pull_request improves security, but it also commonly removes pull-requests: write capabilities for PRs originating from forks (GitHub restricts the GITHUB_TOKEN to read-only in that case). The steps that create/update/delete PR comments can fail due to insufficient permissions. Consider gating PR-comment steps to same-repo PRs (e.g., if: github.event.pull_request.head.repo.full_name == github.repository), or splitting comments into a pull_request_target workflow that only reads artifacts/results and never checks out untrusted code.
| github.event_name == 'pull_request' && | |
| github.event_name == 'pull_request' && | |
| github.event.pull_request.head.repo.full_name == github.repository && |
| runs-on: ubuntu-latest | ||
| permissions: | ||
| contents: read | ||
| pull-requests: write |
There was a problem hiding this comment.
Switching from pull_request_target to pull_request improves security, but it also commonly removes pull-requests: write capabilities for PRs originating from forks (GitHub restricts the GITHUB_TOKEN to read-only in that case). The steps that create/update/delete PR comments can fail due to insufficient permissions. Consider gating PR-comment steps to same-repo PRs (e.g., if: github.event.pull_request.head.repo.full_name == github.repository), or splitting comments into a pull_request_target workflow that only reads artifacts/results and never checks out untrusted code.
| - name: Post failure comment | ||
| if: failure() |
There was a problem hiding this comment.
Switching from pull_request_target to pull_request improves security, but it also commonly removes pull-requests: write capabilities for PRs originating from forks (GitHub restricts the GITHUB_TOKEN to read-only in that case). The steps that create/update/delete PR comments can fail due to insufficient permissions. Consider gating PR-comment steps to same-repo PRs (e.g., if: github.event.pull_request.head.repo.full_name == github.repository), or splitting comments into a pull_request_target workflow that only reads artifacts/results and never checks out untrusted code.
🟡 Playwright Results — all passed (17 flaky)✅ 3392 passed · ❌ 0 failed · 🟡 17 flaky · ⏭️ 183 skipped
🟡 17 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
Uh oh!
There was an error while loading. Please reload this page.