EPMRPP-93012 || Assign a new user to a project from Project team page #4453
Conversation
allaprischepa
requested review from
AmsterGet,
BlazarQSO and
maria-hambardzumian
as code owners
WalkthroughThis update refactors and enhances the invitation flow for external users in the project team management UI. It introduces new modular React components, updates localization files with new invitation-related strings in multiple languages, centralizes message and constant definitions, and improves error handling and notification logic for user invitations. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InviteUserModal
participant ExternalUserInvitationModal
participant NotificationSystem
User->>InviteUserModal: Open invite modal
InviteUserModal->>InviteUserModal: User submits invitation
alt User is external and status is PENDING
InviteUserModal->>ExternalUserInvitationModal: Show invitation modal with link/email
User->>ExternalUserInvitationModal: Click "Copy link"
ExternalUserInvitationModal->>NotificationSystem: Show copy success/error notification
User->>ExternalUserInvitationModal: Click "Got it"/Close
else User is invited successfully
InviteUserModal->>NotificationSystem: Show invite success notification
InviteUserModal->>InviteUserModal: Close modal
end
alt Error occurs (e.g. forbidden)
InviteUserModal->>NotificationSystem: Show error notification with link
end
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used🧠 Learnings (1)📓 Common learnings⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #4453 +/- ##
========================================
Coverage 67.13% 67.13%
========================================
Files 84 84
Lines 989 989
Branches 140 140
========================================
Hits 664 664
Misses 294 294
Partials 31 31 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (4)
app/src/pages/organization/projectTeamPage/inviteUserModal/constants.ts (2)
21-23: Freeze/declareERROR_CODESas immutable and clarify the 4003 constantSame immutability concern as above; additionally,
4003is domain-specific (not a standard HTTP 403). Consider documenting the meaning or renaming:-export const ERROR_CODES = { - FORBIDDEN: 4003, -}; +export const ERROR_CODES = { + FORBIDDEN_INVITE: 4003, +} as const;Alternatively, pull these codes from a single shared
apiErrorCodes.tsto avoid drift.
25-27: Avoid hard-coding public URLs inside feature code
settingsLinktargets production docs; for on-prem or air-gapped deployments the link may be wrong. Move it to a config layer or localization token so deployments can override:-export const settingsLink = - 'https://reportportal.io/docs/admin-panel/ServerSettings/#instance-invitations_'; +export const settingsLink = + process.env.REACT_APP_DOCS_INVITATION_URL ?? + 'https://reportportal.io/docs/admin-panel/ServerSettings/#instance-invitations_';app/src/pages/organization/projectTeamPage/inviteUserModal/messages.ts (1)
32-35: Multiline back-tick string keeps newline in the rendered textThe back-tick literal inserts a hard line-break after “Please note,” which will appear in the modal. Use a single-line string or
trim():- description: { - id: 'InviteUserModal.description', - defaultMessage: `Please note, that new users joining this project's organization will be assigned the ‘Member’ role, while existing users will retain their current organizational roles and permissions.`, - }, + description: { + id: 'InviteUserModal.description', + defaultMessage: + "Please note, that new users joining this project's organization will be assigned the ‘Member’ role, while existing users will retain their current organizational roles and permissions.", + },app/src/pages/inside/common/modals/externalUserInvitationModal/externalUserInvitationModal.scss (1)
23-34: Hard-coded pixel values reduce scalability
max-width: 416px,font-size: 20px, andline-height: 31pxare hard-coded. Switching torem/emkeeps the modal responsive to the user’s root font-size and improves accessibility.- max-width: 416px; - font-size: 20px; - line-height: 31px; + max-width: 26rem; /* 26rem ≈ 416px at 16px base */ + font-size: 1.25rem; /* 20px */ + line-height: 1.55rem; /* 31px */Not mandatory for merge, but worth considering.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
app/localization/translated/be.json(2 hunks)app/localization/translated/es.json(2 hunks)app/localization/translated/ru.json(2 hunks)app/localization/translated/uk.json(2 hunks)app/localization/translated/zh.json(2 hunks)app/src/pages/common/membersPage/index.js(0 hunks)app/src/pages/common/membersPage/modals/externalUserInvitationModal/externalUserInvitationModal.jsx(0 hunks)app/src/pages/common/membersPage/modals/externalUserInvitationModal/externalUserInvitationModal.scss(0 hunks)app/src/pages/inside/common/modals/externalUserInvitationModal/externalUserInvitationModal.scss(1 hunks)app/src/pages/inside/common/modals/externalUserInvitationModal/externalUserInvitationModal.tsx(1 hunks)app/src/pages/inside/common/modals/externalUserInvitationModal/index.ts(1 hunks)app/src/pages/inside/common/modals/externalUserInvitationModal/messages.ts(1 hunks)app/src/pages/organization/projectTeamPage/inviteUserModal/constants.ts(1 hunks)app/src/pages/organization/projectTeamPage/inviteUserModal/inviteUserModal.jsx(6 hunks)app/src/pages/organization/projectTeamPage/inviteUserModal/messages.ts(1 hunks)
💤 Files with no reviewable changes (3)
- app/src/pages/common/membersPage/index.js
- app/src/pages/common/membersPage/modals/externalUserInvitationModal/externalUserInvitationModal.scss
- app/src/pages/common/membersPage/modals/externalUserInvitationModal/externalUserInvitationModal.jsx
🧰 Additional context used
🧠 Learnings (8)
📓 Common learnings
Learnt from: allaprischepa
PR: reportportal/service-ui#4418
File: app/localization/translated/zh.json:2125-2130
Timestamp: 2025-06-23T06:22:27.254Z
Learning: For the ReportPortal project, translation work should be delegated to dedicated translators rather than being handled directly during code review. English keys can serve as placeholders until proper translations are provided by the translation team.
Learnt from: allaprischepa
PR: reportportal/service-ui#4418
File: app/localization/translated/es.json:2127-2131
Timestamp: 2025-06-23T06:21:47.861Z
Learning: The user allaprischepa prefers to have professional translators handle localization work rather than implementing suggested translations in code reviews.
Learnt from: Guria
PR: reportportal/service-ui#4403
File: app/src/pages/inside/testCaseLibraryPage/emptyState/emptyStateDetails.tsx:30-36
Timestamp: 2025-06-12T00:09:07.409Z
Learning: During the mock stage of UI work in reportportal/service-ui, it is acceptable for interactive elements (e.g., buttons) to omit functional handlers such as `onClick`; these will be implemented in subsequent merge requests. Review comments should avoid flagging these omissions unless the implementation MR is in scope.
app/src/pages/organization/projectTeamPage/inviteUserModal/constants.ts (2)
Learnt from: yelyzavetakhokhlova
PR: reportportal/service-ui#4416
File: app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/template/template.tsx:23-24
Timestamp: 2025-06-18T14:37:30.906Z
Learning: In the test case library page at `app/src/pages/inside/testCaseLibraryPage/constans.ts`, the file is intentionally named `constans.ts` (missing the 't'), not `constants.ts`. This is the correct filename and imports referencing '../../../constans' are valid.
Learnt from: allaprischepa
PR: reportportal/service-ui#4434
File: app/src/controllers/organization/projects/sagas.js:141-172
Timestamp: 2025-06-26T13:05:48.078Z
Learning: In the ReportPortal service-ui codebase, API error responses consistently return objects with `errorCode` and `message` properties, making destructuring with `catch ({ errorCode, message })` the appropriate error handling pattern.
app/localization/translated/zh.json (2)
Learnt from: AmsterGet
PR: reportportal/service-ui#4409
File: app/localization/translated/es.json:1648-1652
Timestamp: 2025-06-18T16:24:46.188Z
Learning: In the ReportPortal project, Spanish and Chinese localization entries are intentionally left in English during development. Native speakers handle these translations later in the process, so having English text in Spanish (es.json) and Chinese (zh.json) locale files is expected and acceptable.
Learnt from: allaprischepa
PR: reportportal/service-ui#4418
File: app/localization/translated/zh.json:2125-2130
Timestamp: 2025-06-23T06:22:27.254Z
Learning: For the ReportPortal project, translation work should be delegated to dedicated translators rather than being handled directly during code review. English keys can serve as placeholders until proper translations are provided by the translation team.
app/src/pages/organization/projectTeamPage/inviteUserModal/inviteUserModal.jsx (2)
Learnt from: Guria
PR: reportportal/service-ui#4391
File: app/src/pages/inside/common/emptyStatePage/emptyStatePage.jsx:111-111
Timestamp: 2025-06-09T21:33:49.377Z
Learning: PropTypes.elementType accepts strings, functions, and React special elements (like React.Fragment, Suspense, etc.) through React's isValidElementType function. It's more flexible than PropTypes.string and can be used when a prop might receive different types of valid React element types including strings.
Learnt from: Guria
PR: reportportal/service-ui#4385
File: app/src/components/testCaseList/testCaseNameCell/testCaseNameCell.tsx:30-42
Timestamp: 2025-06-09T17:12:07.281Z
Learning: In React components, static objects like icon mappings that don't depend on props or state should be defined outside the component function to avoid unnecessary re-creation on every render, improving performance.
app/localization/translated/es.json (2)
undefined
<retrieved_learning>
Learnt from: AmsterGet
PR: #4409
File: app/localization/translated/es.json:1648-1652
Timestamp: 2025-06-18T16:24:46.188Z
Learning: In the ReportPortal project, Spanish and Chinese localization entries are intentionally left in English during development. Native speakers handle these translations later in the process, so having English text in Spanish (es.json) and Chinese (zh.json) locale files is expected and acceptable.
</retrieved_learning>
<retrieved_learning>
Learnt from: allaprischepa
PR: #4418
File: app/localization/translated/zh.json:2125-2130
Timestamp: 2025-06-23T06:22:27.254Z
Learning: For the ReportPortal project, translation work should be delegated to dedicated translators rather than being handled directly during code review. English keys can serve as placeholders until proper translations are provided by the translation team.
</retrieved_learning>
app/localization/translated/be.json (3)
undefined
<retrieved_learning>
Learnt from: allaprischepa
PR: #4418
File: app/localization/translated/zh.json:2125-2130
Timestamp: 2025-06-23T06:22:27.254Z
Learning: For the ReportPortal project, translation work should be delegated to dedicated translators rather than being handled directly during code review. English keys can serve as placeholders until proper translations are provided by the translation team.
</retrieved_learning>
<retrieved_learning>
Learnt from: AmsterGet
PR: #4409
File: app/localization/translated/es.json:1648-1652
Timestamp: 2025-06-18T16:24:46.188Z
Learning: In the ReportPortal project, Spanish and Chinese localization entries are intentionally left in English during development. Native speakers handle these translations later in the process, so having English text in Spanish (es.json) and Chinese (zh.json) locale files is expected and acceptable.
</retrieved_learning>
<retrieved_learning>
Learnt from: allaprischepa
PR: #4418
File: app/localization/translated/es.json:2127-2131
Timestamp: 2025-06-23T06:21:47.861Z
Learning: The user allaprischepa prefers to have professional translators handle localization work rather than implementing suggested translations in code reviews.
</retrieved_learning>
app/localization/translated/ru.json (3)
undefined
<retrieved_learning>
Learnt from: allaprischepa
PR: #4418
File: app/localization/translated/zh.json:2125-2130
Timestamp: 2025-06-23T06:22:27.254Z
Learning: For the ReportPortal project, translation work should be delegated to dedicated translators rather than being handled directly during code review. English keys can serve as placeholders until proper translations are provided by the translation team.
</retrieved_learning>
<retrieved_learning>
Learnt from: AmsterGet
PR: #4409
File: app/localization/translated/es.json:1648-1652
Timestamp: 2025-06-18T16:24:46.188Z
Learning: In the ReportPortal project, Spanish and Chinese localization entries are intentionally left in English during development. Native speakers handle these translations later in the process, so having English text in Spanish (es.json) and Chinese (zh.json) locale files is expected and acceptable.
</retrieved_learning>
<retrieved_learning>
Learnt from: allaprischepa
PR: #4418
File: app/localization/translated/es.json:2127-2131
Timestamp: 2025-06-23T06:21:47.861Z
Learning: The user allaprischepa prefers to have professional translators handle localization work rather than implementing suggested translations in code reviews.
</retrieved_learning>
app/localization/translated/uk.json (3)
undefined
<retrieved_learning>
Learnt from: AmsterGet
PR: #4409
File: app/localization/translated/es.json:1648-1652
Timestamp: 2025-06-18T16:24:46.188Z
Learning: In the ReportPortal project, Spanish and Chinese localization entries are intentionally left in English during development. Native speakers handle these translations later in the process, so having English text in Spanish (es.json) and Chinese (zh.json) locale files is expected and acceptable.
</retrieved_learning>
<retrieved_learning>
Learnt from: allaprischepa
PR: #4418
File: app/localization/translated/zh.json:2125-2130
Timestamp: 2025-06-23T06:22:27.254Z
Learning: For the ReportPortal project, translation work should be delegated to dedicated translators rather than being handled directly during code review. English keys can serve as placeholders until proper translations are provided by the translation team.
</retrieved_learning>
<retrieved_learning>
Learnt from: allaprischepa
PR: #4418
File: app/localization/translated/es.json:2127-2131
Timestamp: 2025-06-23T06:21:47.861Z
Learning: The user allaprischepa prefers to have professional translators handle localization work rather than implementing suggested translations in code reviews.
</retrieved_learning>
🧬 Code Graph Analysis (2)
app/src/pages/organization/projectTeamPage/inviteUserModal/messages.ts (1)
app/src/pages/inside/common/modals/externalUserInvitationModal/messages.ts (1)
messages(19-57)
app/src/pages/inside/common/modals/externalUserInvitationModal/messages.ts (1)
app/src/pages/organization/projectTeamPage/inviteUserModal/messages.ts (1)
messages(19-68)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Call feature Docker build / Build and export to AWS ECR
- GitHub Check: build (20)
- GitHub Check: build (20)
🔇 Additional comments (16)
app/src/pages/inside/common/modals/externalUserInvitationModal/index.ts (1)
1-18: Header year bump looks goodOnly the license year changed; no functional impact.
app/src/pages/organization/projectTeamPage/inviteUserModal/messages.ts (1)
63-67: Link placeholder is not marked as HTML – potential XSS foot-gunThe message contains
<a>markup but doesn’t declare the value as HTML‐safe. Make it explicit viavalues={{ linkName: <b>{...}</b> }}or split link construction out of the i18n string to keep translations text-only.Also consider moving the URL to localization (see constants comment).
app/localization/translated/uk.json (2)
783-792: Localization keys added with consistent placeholders – looks goodThe new Ukrainian strings are syntactically correct, reuse the
{email}placeholder consistently, and don’t introduce unwanted formatting differences.
1138-1141: Invite-user messages read well and keep placeholder integrityBoth added entries follow existing naming and HTML-placeholder patterns (
{email},{linkName}), so no further action is required.app/localization/translated/ru.json (2)
783-792: New invitation-flow strings look goodPlaceholders (
{email}), HTML tags, and tone are consistent with the rest of the RU locale.
No further action needed.
1140-1140: Consistent placeholder usageBoth
{email}and{linkName}variables are preserved exactly as in the EN source.
String complies with existing formatting conventions.app/src/pages/inside/common/modals/externalUserInvitationModal/externalUserInvitationModal.scss (1)
49-56: externalUserInvitationModal.scss: undefined CSS variable in.infoblockNo definition for
--rp-ui-base-was found in the repo, so this declaration is dropped by the browser. Please update to the correct design-token name:• File:
app/src/pages/inside/common/modals/externalUserInvitationModal/externalUserInvitationModal.scss
(inside the.infoselector around lines 49–56)Suggested diff:
- font-family: var(--rp-ui-base-); + font-family: var(--rp-ui-base-font-family); /* or --rp-ui-base-body – adjust to the real token */Verify the exact CSS custom-property in your design system and update this line to prevent silent style regressions.
app/localization/translated/es.json (2)
783-792: Keys added with correct placeholders — no issuesThe new
ExternalUserInvitationModal.*entries follow the existing localisation conventions:
- Place-holders
{email}and markup<b> … </b>are consistent with other messages.- English copy here is acceptable per project guidelines that translators will localise later.
No action required.
1141-1141: String looks good, minor placeholder check
InviteUserModal.externalInviteForbiddencorrectly introduces{email}and{linkName}placeholders and matches the syntax style used elsewhere. Nothing blocking, just double-check at runtime that both placeholders are provided to avoid renderingundefined.app/localization/translated/zh.json (2)
783-792: No concerns with the newExternalUserInvitationModalmessagesKeys are unique, JSON syntax is intact, and English placeholders are acceptable at this stage (per established localization workflow).
1140-1141: Verify runtime injection of{linkName}placeholder
InviteUserModal.externalInviteForbiddenintroduces an HTML-embedded placeholder<a>{linkName}</a>.
Please confirm that the calling code supplies alinkNamevalue; otherwise the resulting message will contain an empty anchor.app/localization/translated/be.json (2)
783-791: No issues – keys added consistentlyKeys follow existing naming & placeholder patterns, JSON remains valid.
1140-1140: Verify all placeholders are supplied by the UI codeString
InviteUserModal.externalInviteForbiddencontains two tokens –{email}and{linkName}.
Please make sure the component passes both vars; otherwise the message will render raw placeholders.app/src/pages/organization/projectTeamPage/inviteUserModal/inviteUserModal.jsx (3)
56-58: Good refactoring of header computationComputing the header once and reusing it improves code maintainability and consistency.
81-95: Excellent security-conscious error handlingThe enhanced error handling with XSS protection using DOMPurify is well-implemented. The conditional messaging for forbidden external invites provides better user feedback.
125-147: Well-structured modal integration and notification flowThe refactoring improves code clarity by:
- Using explicit status checking with
InvitationStatus.PENDING- Properly passing the computed header to maintain UI consistency
- Moving the success notification to the appropriate location after successful invitation
The XSS protection is properly maintained throughout.
app/src/pages/organization/projectTeamPage/inviteUserModal/constants.ts
Outdated
Show resolved
Hide resolved
app/src/pages/organization/projectTeamPage/inviteUserModal/messages.ts
Outdated
Show resolved
Hide resolved
app/src/pages/inside/common/modals/externalUserInvitationModal/messages.ts
Outdated
Show resolved
Hide resolved
app/src/pages/inside/common/modals/externalUserInvitationModal/externalUserInvitationModal.tsx
Outdated
Show resolved
Hide resolved
app/src/pages/inside/common/modals/externalUserInvitationModal/externalUserInvitationModal.tsx
Outdated
Show resolved
Hide resolved
allaprischepa
force-pushed
the
feature/EPMRPP-93012-assign-new-user-to-project-from-project-team-page
branch
from
83ba781 to
c0b6e02
Compare
|
allaprischepa
deleted the
feature/EPMRPP-93012-assign-new-user-to-project-from-project-team-page
branch
PR Checklist
developfor features/bugfixes, other if mentioned in the task)npm run lint) prior to submission? Enable the git hook on commit in your IDE to run it and format the code automatically.npm run build)?devnpm script)manage:translationsscript?ToDo
Solve the issue with the long system alert:
Conclusion: As a result of the discussion with Viktoryia, we decided to leave it as is for now, and she will discuss a possible approach with the designers in more detail later.
Visuals
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Refactor
Style