feature/HIVE-54: fix profile component infinite loop and more

[pt-tsl]

• Fixes infinite loop call to __nextjs_original-stack-frames when accessing the profile page
• Allows editing border properties on AvatarWithPlaceholder component

Summary by CodeRabbit

• New Features

  • Avatar component now supports customizable border styles and widths for enhanced styling flexibility.

• Bug Fixes

  • Improved profile banner image fallback handling to ensure valid image URLs are always provided.

• Refactor

  • Streamlined profile menu options with improved rendering stability and conditional entry handling.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1581045

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refactors the ProfileComponent's menu options from a fragment-based structure to an explicit array-based approach with conditional rendering and proper keys. Additionally, the profile prop is made required, and the AvatarWithPlaceholder component gains configurable border styling through new borderStyle and borderWidth props.

Changes

Cohort / File(s)	Summary
ProfileComponent Refactoring packages/components/modules/profiles/web/ProfileComponent/index.tsx, packages/components/modules/profiles/web/ProfileComponent/types.ts	Converted menuOptions from fragment-based to array-based structure with explicit keys for stable rendering. Made profile prop required and non-nullable. Updated banner image fallback to use a concrete fallback path.
AvatarWithPlaceholder Enhancements packages/design-system/components/web/avatars/AvatarWithPlaceholder/index.tsx, packages/design-system/components/web/avatars/AvatarWithPlaceholder/styled.tsx, packages/design-system/components/web/avatars/AvatarWithPlaceholder/types.ts	Added borderStyle and borderWidth optional props with defaults ('solid' and '2px'). Replaced hard-coded border styling with dynamic values derived from new props. Extended component prop types to include new border customization options.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [FE - package] Account Deletion - Android & WebApp #299: Modifies AvatarWithPlaceholder component props and styling in the same files.
• feature/BA-2628-add-aria-label-and-alt-text-to-profile-images-and-inp… #281: Updates AvatarWithPlaceholder props and their propagation to AvatarStyled.
• feature/BA-2855-default-avatar-and-username-display #304: Modifies AvatarWithPlaceholder styled component and avatar-related styling.

Suggested labels

needs review

Suggested reviewers

• priscilladeroode
• anicioalexandre
• deboracosilveira

Poem

🐰 Array keys gleam so bright and new,
Avatars don a border's hue,
Props grow flexible, required and true,
Menu options hop—refactored through! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The pull request description addresses the two main objectives but does not follow the repository's template structure with package names and versions.	Align the description with the repository template format, including package names and versions (e.g., 'components package update - v X.X.X').

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feature/HIVE-54: fix profile component infinite loop and more' accurately describes the main changes: fixing an infinite loop in the profile component and adding border customization to AvatarWithPlaceholder.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/HIVE-54-fix-profile-component-infinite-loop-and-more

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

🧹 Nitpick comments (1)

packages/design-system/components/web/avatars/AvatarWithPlaceholder/styled.tsx (1)

13-16: Consider adding defensive defaults for optional border props in AvatarStyled.

Currently, borderStyle and borderWidth are optional props that receive defaults only at the AvatarWithPlaceholder wrapper level (index.tsx lines 11–12). While AvatarStyled is not currently re-exported and only used through the wrapper, adding defaults directly in the styled component would improve robustness and prevent invalid CSS if the component is ever used directly.

♻️ Suggested improvement

-export const AvatarStyled: ComponentType<AvatarWithPlaceholderProps> = styled(
-  Avatar,
-)<AvatarWithPlaceholderProps>(({ theme, width, height, borderStyle, borderWidth }) => ({
+export const AvatarStyled: ComponentType<AvatarWithPlaceholderProps> = styled(
+  Avatar,
+)<AvatarWithPlaceholderProps>(({ theme, width, height, borderStyle = 'solid', borderWidth = '2px' }) => ({
   width,
   height,
   border: `${borderStyle} ${borderWidth} ${theme.palette.background.default}`,
   backgroundColor: theme.palette.grey[300],
 }))

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@packages/design-system/components/web/avatars/AvatarWithPlaceholder/styled.tsx`
around lines 13 - 16, The styled component using AvatarWithPlaceholderProps
should defensively default optional border props to valid CSS values: when
computing the border inside the styled function (the object returned by
AvatarStyled / the styled AvatarWithPlaceholder), fall back to a safe
borderStyle (e.g., 'solid') and borderWidth (e.g., '1px') if borderStyle or
borderWidth are undefined before composing `${borderStyle} ${borderWidth}
${theme.palette.background.default}` so the computed border is always valid even
if the wrapper defaults are not provided.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@packages/design-system/components/web/avatars/AvatarWithPlaceholder/styled.tsx`:
- Around line 13-16: The styled component using AvatarWithPlaceholderProps
should defensively default optional border props to valid CSS values: when
computing the border inside the styled function (the object returned by
AvatarStyled / the styled AvatarWithPlaceholder), fall back to a safe
borderStyle (e.g., 'solid') and borderWidth (e.g., '1px') if borderStyle or
borderWidth are undefined before composing `${borderStyle} ${borderWidth}
${theme.palette.background.default}` so the computed border is always valid even
if the wrapper defaults are not provided.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ef165122-4ff3-4fff-8387-f426ba7b625f

📥 Commits

Reviewing files that changed from the base of the PR and between be3e85e and 1581045.

📒 Files selected for processing (5)

• packages/components/modules/profiles/web/ProfileComponent/index.tsx
• packages/components/modules/profiles/web/ProfileComponent/types.ts
• packages/design-system/components/web/avatars/AvatarWithPlaceholder/index.tsx
• packages/design-system/components/web/avatars/AvatarWithPlaceholder/styled.tsx
• packages/design-system/components/web/avatars/AvatarWithPlaceholder/types.ts