fix: open import translations help links in new tab

[aditya-mitra]

Open the help icons beside the checkboxes in import translations page in a new tab. Also make them all of equal size.

before	after

Summary by CodeRabbit

• Bug Fixes

  • External help documentation links now open in a new browser tab, allowing you to reference documentation while continuing your work.
  • Enhanced security attributes for external resource links.

• UI Improvements

  • Improved visual consistency of help icons throughout the import settings panel.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This change updates help icon styling and external link handling in the ImportSettingsPanel component. Documentation links now open in new tabs with security attributes, an inner Box wrapper is removed for cleaner markup, and a new custom help icon is added to the createNewKeys checkbox.

Changes

Cohort / File(s)	Change Summary
Help icon and link behavior updates webapp/src/views/projects/import/component/ImportSettingsPanel.tsx	Added rel="noreferrer noopener" and target="_blank" to external help link StyledLink wrappers; replaced inner Box wrapper with direct icon child in import override descriptions help icon; introduced new customHelpIcon for createNewKeys checkbox with HelpCircle in empty StyledLink

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single file affected with straightforward markup and attribute changes
• Verify external link security attributes are correctly applied
• Confirm visual rendering of restructured help icon elements matches design intent

Poem

🐰 With noreferrer guards and blanks so new,
Help icons bloom in safer hue—
Links leap to docs through windows bright,
While checkboxes gain helpful light! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: opening import translations help links in a new tab, which is the primary objective of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

webapp/src/views/projects/import/component/ImportSettingsPanel.tsx (1)

113-119: External help links: new‑tab behavior and security attributes look good

Using target="_blank" together with rel="noreferrer noopener" on the two DOCS links is correct and consistent, and the shared StyledLink keeps icon sizing uniform. As an optional follow‑up, consider adding an accessible name (aria-label or title) on these icon‑only anchors so screen readers can announce what each help link does.

Also applies to: 133-139

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 62f4cea and 19536e5.

📒 Files selected for processing (1)

• webapp/src/views/projects/import/component/ImportSettingsPanel.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

webapp/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

webapp/**/*.{ts,tsx}: Use TypeScript path aliases (tg.component/, tg.service/, tg.hooks/, tg.views/, tg.globalContext/*) instead of relative imports
After backend API changes, regenerate TypeScript types by running npm run schema (and npm run billing-schema if applicable) in the webapp directory
Use typed React Query hooks from useQueryApi.ts for API communication, not raw React Query
Use Tolgee-specific hooks useReportEvent and useReportOnce from 'tg.hooks/useReportEvent' for business event tracking and analytics

Files:

• webapp/src/views/projects/import/component/ImportSettingsPanel.tsx

webapp/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Always use data-cy attributes for E2E test selectors, never rely on text content

Files:

• webapp/src/views/projects/import/component/ImportSettingsPanel.tsx

**/*.{ts,tsx,js,jsx,kt,kts}

⚙️ CodeRabbit configuration file

As part of review, please check if the file follows 'The Stepdown Rule': The most important, high-level concepts should be at the top (like a newspaper headline and opening paragraph). Details should increase as you read downward. Functions should be ordered so that a caller appears before the functions it calls. When working with JavaScript components, we allow the main component to live at the bottom of the file as an exception to the rule.

Files:

• webapp/src/views/projects/import/component/ImportSettingsPanel.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Non-interactive help icon wrapped in StyledLink may be misleading

Here StyledLink is used without an href, so this third help icon looks like the other clickable help icons but isn’t actually a link. That’s likely to confuse users and is a bit odd semantically for an anchor.

Consider either:

• Wiring it up to a real docs URL with the same target/rel pattern once available, or
• Making it clearly decorative (e.g., wrap the icon in a non-anchor container like Box or span, and mark it aria-hidden).

This will keep the UI behavior consistent with the other help icons and avoid a “dead” control.