Skip to content

refactor: update component naming and imports #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 5 commits into from
Oct 21, 2025
Merged

refactor: update component naming and imports #160

merged 5 commits into from
Oct 21, 2025

Conversation

@PavelKopecky
Copy link
Contributor

@PavelKopecky PavelKopecky commented Oct 20, 2025

Closes #158

@coderabbitai
Copy link

coderabbitai bot commented Oct 20, 2025 •
edited
Loading

Walkthrough

This PR systematically refactors component naming and imports across the application. It renames multiple Vue components with more descriptive prefixes (e.g., CityAutoComplete → ProbeCityAutocomplete, LogLoader → ProbeLogLoader, BlockLoading → AsyncBlockLoading), consolidates GPDialog content into GpDialogContent\* variants, replaces older component references with their new equivalents throughout pages and nested components, removes import extensions from module paths (.js and .ts), and adds an ESLint rule enforcing no-import extensions for TypeScript and Vue files under app and server directories.

Possibly related PRs

Suggested reviewers

  • MartinKolarik

Poem

🎭 Components dance in new attire,
Old names retire, new names inspire,
Extensions fade, imports gleam,
Naming consistency—a developer's dream! 🌟

Pre-merge checks and finishing touches

✅ Passed checks (4 passed)
Check name Status Explanation
Title Check ✅ Passed The PR title "refactor: update component naming and imports" directly and clearly describes the primary work in the changeset. The title uses a conventional commit type (refactor:) and accurately summarizes the main activities: renaming components throughout the codebase and removing/updating component imports. The title is concise and specific enough that teammates reviewing history would understand the nature of the changes without ambiguity.
Linked Issues Check ✅ Passed The PR successfully addresses the objectives of issue #158 to remove component imports and update component naming. The changeset demonstrates comprehensive implementation: component names have been updated across multiple files (e.g., BlockLoading → AsyncBlockLoading, StartProbeCommands → ProbeStartCommands, CreditItem → ListItemCredits), unused component imports have been removed (AdminFilterSettings, BigProbeIcon, MobileProbeListFilters, ProbeListFilters, CreditItem, AsyncRow, AppItem, TokenItem), and import paths have been cleaned up to remove file extensions. All coding-related requirements appear to be met.
Out of Scope Changes Check ✅ Passed All changes in the PR are directly related to the stated objective of removing component imports and updating component naming. The modifications to import paths (removing .js extensions) and the ESLint configuration update are supporting changes that reinforce the main objective of improving import consistency. No out-of-scope or unrelated changes have been identified in the changeset.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch gh-158
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6d4b696 and fc48c9b.

📒 Files selected for processing (19)
  • app/components/async/AsyncBlock.vue (1 hunks)
  • app/components/credits/CreditsFilters.vue (1 hunks)
  • app/components/gp-dialog/content/AdoptProbe.vue (1 hunks)
  • app/components/gp-dialog/content/StartProbe.vue (1 hunks)
  • app/components/gp-dialog/content/UpdateProbe.vue (1 hunks)
  • app/components/probe/LocationInput.vue (1 hunks)
  • app/components/probe/TabDetails.vue (1 hunks)
  • app/components/probe/TabLogs.vue (2 hunks)
  • app/components/probe/filters/ProbeFiltersDesktop.vue (1 hunks)
  • app/components/probe/filters/ProbeFiltersMobile.vue (1 hunks)
  • app/pages/credits.vue (3 hunks)
  • app/pages/index.vue (2 hunks)
  • app/pages/login.vue (1 hunks)
  • app/pages/probes/[id].vue (1 hunks)
  • app/pages/probes/index.vue (5 hunks)
  • app/pages/tokens.vue (2 hunks)
  • app/plugins/05.setMetadata.ts (1 hunks)
  • app/utils/init-google-map.ts (1 hunks)
  • eslint.config.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{vue,ts,js}

⚙️ CodeRabbit configuration file

We use Nuxt with auto imports enabled. Don't warn about missing imports.

Files:

  • app/components/probe/LocationInput.vue
  • app/components/async/AsyncBlock.vue
  • app/utils/init-google-map.ts
  • eslint.config.js
  • app/components/gp-dialog/content/StartProbe.vue
  • app/pages/credits.vue
  • app/components/credits/CreditsFilters.vue
  • app/components/gp-dialog/content/AdoptProbe.vue
  • app/components/probe/filters/ProbeFiltersDesktop.vue
  • app/components/probe/TabLogs.vue
  • app/pages/login.vue
  • app/plugins/05.setMetadata.ts
  • app/pages/tokens.vue
  • app/components/gp-dialog/content/UpdateProbe.vue
  • app/pages/probes/[id].vue
  • app/pages/probes/index.vue
  • app/pages/index.vue
  • app/components/probe/TabDetails.vue
  • app/components/probe/filters/ProbeFiltersMobile.vue
🧠 Learnings (2)
📚 Learning: 2025-09-08T13:39:10.713Z 
Learnt from: PavelKopecky
PR: jsdelivr/globalping-dash#125
File: components/CityAutoComplete.vue:14-16
Timestamp: 2025-09-08T13:39:10.713Z
Learning: In CityAutoComplete component (components/CityAutoComplete.vue), the placeholder "Detect automatically" should be shown when model.customLocation is truthy. This is because when a probe has a custom location override, the user can clear the input field to switch back to automatic detection. The placeholder informs the user what will happen if they leave the field empty and save.

Applied to files:

  • app/components/probe/LocationInput.vue
📚 Learning: 2025-10-06T17:46:36.047Z 
Learnt from: PavelKopecky
PR: jsdelivr/globalping-dash#146
File: app/pages/credits.vue:58-62
Timestamp: 2025-10-06T17:46:36.047Z
Learning: In `app/pages/credits.vue`, the `CreditsChange` items rendered in the mobile view (lines 58-62) do not have an `id` field available for use as a v-for key. Using the array index is acceptable in this scenario due to the short list length and pagination-only updates.

Applied to files:

  • app/pages/credits.vue
🔇 Additional comments (9)
app/components/probe/filters/ProbeFiltersMobile.vue (1)

88-88: Refactoring successfully completed across the codebase.

Verification confirms all old component names have been removed and replaced with their new equivalents. ProbeFiltersAdminOnly is correctly implemented at line 88 in ProbeFiltersMobile.vue, and all related component migrations throughout the application are consistent with no orphaned references.

app/pages/tokens.vue (2)

99-106: LGTM! Component rename applied correctly.

The migration from TokenItem to ListItemTokens is clean, with all props and event handlers properly maintained.

168-173: LGTM! Component rename applied correctly.

The migration from AppItem to ListItemApps is clean, with all props and event handlers properly maintained.

app/pages/probes/index.vue (5)

44-44: LGTM! Component rename applied correctly.

The migration from ProbeListFilters to ProbeFiltersDesktop maintains the same usage pattern.

102-102: LGTM! Component rename applied correctly.

The migration from TagsList to ProbeTagsList properly maintains all props.

144-147: LGTM! Component rename applied correctly.

The migration from MobileProbeListFilters to ProbeFiltersMobile maintains the event handlers and integration with the Popover component.

182-182: LGTM! Component rename applied correctly.

The migration from TagsList to ProbeTagsList properly maintains the tags prop.

241-269: LGTM! Dialog content components migrated correctly.

All four dialogs have been successfully migrated to the new GpDialogContent* pattern:

  • GpDialogContentStartProbe (self-contained)
  • GpDialogContentAdoptProbe with proper event handlers
  • GpDialogContentDeleteProbes with probes prop and event handlers
  • GpDialogContentUpdateProbe (self-contained)

The props and event bindings are all correctly preserved.

app/components/async/AsyncBlock.vue (1)

2-3: Component references verified—no issues found.

The renamed components AsyncBlockLoading and AsyncBlockError exist in the codebase at app/components/async/ and are properly structured for Nuxt auto-imports. The template changes in AsyncBlock.vue are valid.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@MartinKolarik MartinKolarik merged commit 2f776fc into master Oct 21, 2025
5 checks passed
@MartinKolarik MartinKolarik deleted the gh-158 branch October 21, 2025 12:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@MartinKolarik MartinKolarik MartinKolarik approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Remove component imports

3 participants

@PavelKopecky @MartinKolarik