Update User and Organization Profiles to support BlueSky instead of twitter #8244
Conversation
|
Warning Rate limit exceeded@ccanos has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 6 minutes and 50 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughThe changes replace all references to the Twitter social network with BlueSky (bsky) throughout the codebase. This includes updating model interfaces, form fields, validation, UI components, icon usage, and social network enumerations. A new BlueSky icon component is introduced, and the SocialNetworkEnum is extended to support BlueSky. Additional enhancements include validation schema refactoring, form submission improvements, and localization updates. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UserForm
participant SocialSegment
participant SocialLinks
participant BlueSkyIcon
User->>UserForm: Fill out user form
UserForm->>SocialSegment: Render social input fields
SocialSegment->>BlueSkyIcon: Display BlueSky icon for bsky field
UserForm->>SocialLinks: Pass bsky handle for display
SocialLinks->>BlueSkyIcon: Render BlueSky icon if bsky present
Suggested labels
Suggested reviewers
✨ Finishing Touches
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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/domain/shared/components/SocialLinks/icons/BlueSky.tsx (1)
1-14: Consider theming support and accessibility improvements.The icon implementation is solid, but there are a couple of enhancement opportunities:
- Theming: The hardcoded color
#0085ffmight not adapt well to theme changes (light/dark mode).- Accessibility: Consider adding accessibility props for screen readers.
Here's an enhanced version that addresses these concerns:
-const BlueSky = (props: SvgIconProps) => { +const BlueSky = (props: SvgIconProps) => { return ( - <SvgIcon viewBox="0 -3.268 64 68.414" width="24" height="24" {...props}> + <SvgIcon + viewBox="0 -3.268 64 68.414" + width="24" + height="24" + aria-label="BlueSky" + {...props} + > <path - fill="#0085ff" + fill={props.sx?.color || "#0085ff"} d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805zm36.254 0C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745z" /> </SvgIcon> ); };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/domain/community/user/models/UserModel.ts(1 hunks)src/domain/community/user/userForm/UserForm.tsx(6 hunks)src/domain/platform/admin/components/Common/SocialSegment.tsx(2 hunks)src/domain/shared/components/SocialLinks/SocialLinks.tsx(2 hunks)src/domain/shared/components/SocialLinks/icons/BlueSky.tsx(1 hunks)src/domain/shared/components/SocialLinks/models/SocialNetworks.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`src/**/*.{ts,tsx,js}`: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs. Ensure that the code adheres to TypeScript's typing system and modern ...
src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Use the following code guide documentation in the codebase: 'docs/code-guidelines.md'.
Ensure sufficient error handling and logging is present, but note:
- We have a global error handler in place. So local
try/catchblocks are not required unless they provide value beyond what the global error handler already covers.- Avoid flagging the absence of local error handling in cases where the global error handler suffices.
- Avoid flagging the absence of logging in cases where the global logger is already in place (graphql usage).
Inform about the recommendation of not using non-null assertion,
except on GraphQL queries where the variable is asserted non-null and followed by a
skip:with the same variable.
Examples:
- Not Required: there's a skip
{
variables: { templateId: templateId! },
skip: !templateId,
}Check for common security vulnerabilities such as:
- SQL Injection
- XSS (Cross-Site Scripting)
- CSRF (Cross-Site Request Forgery)
- Insecure dependencies
- Sensitive data exposure
src/domain/shared/components/SocialLinks/models/SocialNetworks.tssrc/domain/platform/admin/components/Common/SocialSegment.tsxsrc/domain/community/user/models/UserModel.tssrc/domain/shared/components/SocialLinks/SocialLinks.tsxsrc/domain/shared/components/SocialLinks/icons/BlueSky.tsxsrc/domain/community/user/userForm/UserForm.tsx
🧬 Code Graph Analysis (1)
src/domain/community/user/userForm/UserForm.tsx (1)
src/core/apollo/generated/graphql-schema.ts (1)
Reference(5369-5385)
🔇 Additional comments (13)
src/domain/shared/components/SocialLinks/SocialLinks.tsx (2)
8-8: LGTM: BlueSky import follows the established pattern.The import statement correctly follows the same pattern as other social network icon imports.
27-28: LGTM: BlueSky case implementation is consistent.The implementation follows the exact same pattern as other social network cases in the switch statement, maintaining consistency and following established conventions.
src/domain/shared/components/SocialLinks/models/SocialNetworks.ts (1)
7-7: LGTM: BlueSky enum addition with sort order consideration.The addition of
bskyto the enum is correct. Note that since enum field order determines link sorting (as mentioned in the comment), BlueSky links will now appear after Twitter and before email in the social links display.src/domain/community/user/models/UserModel.ts (1)
71-71:✅ Verification successful
LGTM: Form interface updated for BlueSky migration.
The property name change from
bskyin theUserFormGeneratedinterface is consistent with the migration to BlueSky. This change should be coordinated with form validation rules and UI components that reference this field.Let me verify that form validation and related components are properly updated:
🏁 Script executed:
#!/bin/bash # Description: Verify that form validation and components are updated to use bsky instead of twitter # Check for any remaining twitter references in user form validation rg -A 5 -B 5 "twitter.*yup|yup.*twitter" src/domain/community/user/ # Check for twitter field references in user form components rg -A 3 -B 3 "field.*twitter|twitter.*field" src/domain/community/user/ # Verify bsky validation is properly implemented rg -A 5 -B 5 "bsky.*yup|yup.*bsky" src/domain/community/user/Length of output: 1286
Approve BlueSky Migration for UserForm
The
bskyin theUserFormGeneratedinterface and all form validation rules and UI bindings have been updated. No residual• src/domain/community/user/models/UserModel.ts:
UserFormGeneratednow usesbsky: string;
• src/domain/community/user/userForm/UserForm.tsx: validation updated tobsky: yup.string().url('BlueSky url must be a valid URL'),src/domain/platform/admin/components/Common/SocialSegment.tsx (3)
8-8: LGTM: BlueSky icon import properly replaces Twitter.The import change is correct and maintains consistency with the migration to BlueSky.
41-42: LGTM: Form field properties updated consistently.The field name and title changes from Twitter to BlueSky are properly implemented and follow the established pattern of other social media fields in the component.
48-48: LGTM: Icon component properly updated.The BlueSky icon component replacement maintains the same structure and positioning as the previous Twitter icon implementation.
src/domain/community/user/userForm/UserForm.tsx (6)
31-31: LGTM: Social network enum updated correctly.The socialNames array has been properly updated to use BlueSky instead of Twitter.
78-81: LGTM: Reference lookup updated consistently.The memoized reference lookup has been correctly updated from
twitterReftoblueSkyRefwith the appropriate enum value.
98-98: LGTM: Initial values updated appropriately.The form initial values correctly use the
bskyfield instead of
121-121: LGTM: Validation message is user-friendly.The validation message clearly indicates "BlueSky url must be a valid URL", which provides good user experience.
177-177: LGTM: Dependency array updated correctly.The dependency array for the handleSubmit callback has been properly updated to include
blueSkyRefinstead oftwitterRef.
145-157:✅ Verification successful
Verify UserModel interface supports the bsky field.
The form submission logic has been properly updated to use
bskyinstead ofUserFormGeneratedinterface in the UserModel has been updated accordingly.
🏁 Script executed:
#!/bin/bash # Description: Verify that the UserModel interface supports the bsky field instead of twitter # Expected: Should find bsky field definition and no twitter field in UserFormGenerated interface # Search for the UserFormGenerated interface definition ast-grep --pattern 'interface UserFormGenerated { $$$ }' # Search for any remaining twitter field references in user model files rg -A 2 -B 2 "twitter" src/domain/community/user/models/Length of output: 1291
Verified:
UserFormGeneratedinterface includesbskyand no longer includes
TheUserFormGeneratedinterface (src/domain/community/user/models/UserModel.ts) definesbsky: stringand there are no remaining
bobbykolev
changed the title
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/core/i18n/en/translation.en.json (1)
932-933: Ensure i18n completeness and consistency
We’ve added two new validation keys (duplicateEmailandurl) in the English bundle.
- Please propagate these keys (with appropriate translations) to all other locale files under
src/core/i18n/*/translation.*.jsonto avoid fallback on missing keys.- For consistency with the existing
Invalid Email addressmessage, consider capitalizing “Email” in the duplicate-email message:- "duplicateEmail": "Duplicated email address", + "duplicateEmail": "Duplicated Email address",src/domain/platform/admin/components/Common/ProfileSegment.tsx (1)
26-32: Consider enhancing the validation error message.The validation correctly prevents social network names in references (case-insensitive). However, the error message "Use the social section" could be more descriptive.
Consider providing a more informative error message:
.test( 'includesSocial', - 'Use the social section', + 'Please use the dedicated social links section for social network profiles', value => !value || !socialNames.includes(value.toLowerCase()) ),src/domain/platform/admin/components/Organization/OrganizationForm.tsx (1)
119-123: Consider extracting social network validation messages.The validation messages for social networks follow the same pattern and could be simplified.
Consider creating a helper function:
const socialUrlValidation = (fieldName: string) => yup.string().url(t('forms.validations.url', { name: t(`components.profileSegment.socialLinks.${fieldName}`) })); // Then use it: linkedin: socialUrlValidation('linkedin'), bsky: socialUrlValidation('bsky'), github: socialUrlValidation('github'),
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
.vscode/settings.json(1 hunks)src/core/i18n/en/translation.en.json(2 hunks)src/domain/common/profile/ProfileModelUtils.ts(2 hunks)src/domain/community/user/userForm/UserForm.tsx(6 hunks)src/domain/platform/admin/components/Common/ProfileSegment.tsx(1 hunks)src/domain/platform/admin/components/Common/SocialSegment.tsx(3 hunks)src/domain/platform/admin/components/Organization/OrganizationForm.tsx(9 hunks)src/domain/platform/admin/components/Organization/OrganizationPage.tsx(3 hunks)src/domain/shared/components/SocialLinks/models/SocialNetworks.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .vscode/settings.json
🚧 Files skipped from review as they are similar to previous changes (3)
- src/domain/platform/admin/components/Common/SocialSegment.tsx
- src/domain/community/user/userForm/UserForm.tsx
- src/domain/shared/components/SocialLinks/models/SocialNetworks.ts
🧰 Additional context used
📓 Path-based instructions (2)
`src/**/*.{ts,tsx,js}`: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs. Ensure that the code adheres to TypeScript's typing system and modern ...
src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Use the following code guide documentation in the codebase: 'docs/code-guidelines.md'.
Ensure sufficient error handling and logging is present, but note:
- We have a global error handler in place. So local
try/catchblocks are not required unless they provide value beyond what the global error handler already covers.- Avoid flagging the absence of local error handling in cases where the global error handler suffices.
- Avoid flagging the absence of logging in cases where the global logger is already in place (graphql usage).
Inform about the recommendation of not using non-null assertion,
except on GraphQL queries where the variable is asserted non-null and followed by a
skip:with the same variable.
Examples:
- Not Required: there's a skip
{
variables: { templateId: templateId! },
skip: !templateId,
}Check for common security vulnerabilities such as:
- SQL Injection
- XSS (Cross-Site Scripting)
- CSRF (Cross-Site Request Forgery)
- Insecure dependencies
- Sensitive data exposure
src/domain/common/profile/ProfileModelUtils.tssrc/domain/platform/admin/components/Organization/OrganizationPage.tsxsrc/domain/platform/admin/components/Common/ProfileSegment.tsxsrc/domain/platform/admin/components/Organization/OrganizationForm.tsx
`src/**/*.json`: Review the JSON files for correct syntax and structure. Ensure that the configuration and data are accurate and follow the project's standards. Check for sensitive...
src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.
src/core/i18n/en/translation.en.json
🧬 Code Graph Analysis (2)
src/domain/platform/admin/components/Common/ProfileSegment.tsx (2)
src/domain/platform/admin/components/Common/ReferenceSegment.tsx (1)
referenceSegmentValidationObject(36-60)src/domain/shared/components/SocialLinks/models/SocialNetworks.ts (1)
socialNames(11-15)
src/domain/platform/admin/components/Organization/OrganizationForm.tsx (9)
src/domain/community/organization/model/OrganizationModel.ts (2)
OrganizationModel(7-33)EmptyOrganizationModel(35-70)src/core/apollo/generated/graphql-schema.ts (2)
CreateOrganizationInput(1894-1902)UpdateOrganizationInput(6931-6941)src/domain/common/profile/ProfileModel.ts (1)
EmptyProfileModel(22-31)src/domain/shared/components/SocialLinks/models/SocialNetworks.ts (1)
socialNames(11-15)src/domain/platform/admin/components/Common/ProfileSegment.tsx (1)
profileSegmentSchemaWithReferences(22-35)src/domain/common/reference/ReferenceModel.ts (1)
ReferenceModel(3-8)src/domain/common/profile/ProfileModelUtils.ts (1)
mapProfileModelToUpdateProfileInput(11-33)src/domain/platform/admin/components/Common/TagsetSegment.tsx (1)
TagsetSegment(24-50)src/domain/platform/admin/components/Common/ProfileReferenceSegment.tsx (1)
ProfileReferenceSegment(12-38)
🔇 Additional comments (6)
src/domain/common/profile/ProfileModelUtils.ts (2)
14-23: Good refactoring: Adding braces improves code consistency.Adding braces around the if statement block improves readability and follows TypeScript/JavaScript best practices for consistent code formatting.
25-32: Good refactoring: Direct return eliminates unnecessary variable.Removing the intermediate variable and returning the object directly makes the code more concise while maintaining the same functionality.
src/domain/platform/admin/components/Organization/OrganizationPage.tsx (1)
67-88: Good improvement for async form submission handling!The explicit
Promise<unknown>return type and returning the mutation results enable proper promise handling in the form component. This allows the form to track submission state and handle errors appropriately.src/domain/platform/admin/components/Common/ProfileSegment.tsx (1)
12-20: Well-structured validation schema refactoring!Good use of DRY principle by extracting common validation properties. This makes the schemas more maintainable.
src/domain/platform/admin/components/Organization/OrganizationForm.tsx (2)
86-93: Good use of memoization for social network references!The extraction of social network references is efficient and prevents unnecessary recalculations.
190-196: Excellent async form submission handling!Proper use of try/finally to ensure setSubmitting(false) is called even if the submission fails. This prevents the form from getting stuck in a loading state.
src/domain/platform/admin/components/Organization/OrganizationForm.tsx
Outdated
Show resolved
Hide resolved
ccanos
changed the title
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Refactor