Skip to content

Issue feat: Fix landing page issues#2969

Open
AkshataKatwal16 wants to merge 3 commits into
tekdi:feat-landing-pagefrom
AkshataKatwal16:feat-landing-page
Open

Issue feat: Fix landing page issues#2969
AkshataKatwal16 wants to merge 3 commits into
tekdi:feat-landing-pagefrom
AkshataKatwal16:feat-landing-page

Conversation

@AkshataKatwal16
Copy link
Copy Markdown
Contributor

No description provided.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request improves the responsiveness and layout of the landing page and its components, including the header, program cards, and role cards. Key updates include centering grid content, adjusting responsive breakpoints, and refining typography and spacing. Feedback was provided regarding the use of unstable keys in list rendering, which could lead to rendering bugs.

: (imageItem as any)?.description || '/images/default.png';
return (
<Grid item xs={12} sm={6} md={4} key={program.tenantId || index}>
<Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using program.tenantId || index as a key is potentially problematic. If tenantId is present but not unique across programs (e.g., if multiple programs belong to the same tenant), React will encounter duplicate keys, which can lead to rendering bugs and performance issues. If tenantId is guaranteed to be unique for each program, the fallback to index is redundant. If it is not guaranteed to be unique, consider using a more stable and unique identifier if available.

Suggested change
<Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
<Grid item xs={12} sm={6} md={3} key={program.tenantId}>

: (imageItem as any)?.description || '/images/default.png';
return (
<Grid item xs={12} sm={6} md={4} key={program.tenantId || index}>
<Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using program.tenantId || index as a key is potentially problematic. If tenantId is present but not unique across programs, React will encounter duplicate keys, leading to rendering issues. If tenantId is guaranteed to be unique, the fallback to index is redundant. If it is not guaranteed to be unique, consider using a more stable and unique identifier if available.

Suggested change
<Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
<Grid item xs={12} sm={6} md={3} key={program.tenantId}>

@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
16.2% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant