Feature/FWF-4833 sidebar updations #628

Ajay-aot · 2025-06-20T16:19:50Z

User description

Issue Tracking

JIRA: https://aottech.atlassian.net/browse/FWF-4833
Issue Type: BUG/ FEATURE

Changes

1.icons updated
2.BPMTask loader commented for now to prevent the skeleton loader in the task table from displaying oddly due to socket.

#screenshots

PR Type

Enhancement

Description

Add task and submit icons to sidebar navigation
Support custom icon prop in MenuComponent
Comment out BPM task loader dispatch
Style tweaks and rename "Sign Out" to "Logout"

Changes walkthrough 📝

Relevant files

Enhancement

index.tsx `Add NavbarTaskIcon and Submit Icon Components` forms-flow-components/src/components/SvgIcons/index.tsx Introduce `NavbarTaskIcon` SVG component Introduce `NavbarSubmitIcon` SVG component Define default `color` and `className` props	+47/-1
MenuComponent.jsx `Support custom menu icons` forms-flow-nav/src/sidenav/MenuComponent.jsx Add `icon` prop to `MenuComponent` Render provided icon or fallback chevron Update PropTypes to include `icon`	+14/-11
Sidebar.jsx `Integrate navigation icons in Sidebar` forms-flow-nav/src/sidenav/Sidebar.jsx Integrate `NavbarTaskIcon` and `NavbarSubmitIcon` Add "Review" and "Submit" menu sections with icons Rename sign-out button text to `Logout` Compute dynamic icon background color	+55/-44

Bug fix

filterServices.ts `Temporarily disable BPM task loader` forms-flow-review/src/api/services/filterServices.ts Comment out `setBPMTaskLoader(true)` dispatch Prevent skeleton loader display due to socket	+1/-1

Formatting

Sidebar.scss `Refine Sidebar SCSS styling` forms-flow-nav/src/sidenav/Sidebar.scss Remove default box-shadow on accordion buttons Center `.sign-out-button` content Align `.user-name` text and adjust margins	+4/-4

Need help?
Type /help how to ... in the comments thread for any questions about PR-Agent usage.
Check out the documentation for more information.

github-actions · 2025-06-20T16:20:50Z

PR Reviewer Guide 🔍

(Review updated until commit `edc313f`)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Props not applied The newly added `NavbarTaskIcon` and `NavbarSubmitIcon` destructure `className` and `...props` but do not apply them to the `<svg>` element. Consider spreading `props` and passing `className` to the `<svg>` so that consumers can customize these icons. export const NavbarTaskIcon = ({ color = grayDarkestColor, className, ...props }) => ( <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" > <circle cx="12" cy="12.5" r="12" fill={color} /> <path d="M8 12.6786L10.5 15.3571L15.5 10" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); Invalid CSS property Using `background-color: none` is not valid CSS. It should be `background: none` or `background-color: transparent` to clear or reset the background. background-color: none; } Fallback CSS variable The fallback for `chevronColor` uses `getPropertyValue("gray-darkest")`, which is not a valid CSS variable name. You likely intended a CSS variable like `--gray-darkest` or another defined variable. "--navbar-main-menu-active-font-color" )?.trim() \|\| getComputedStyle(document.documentElement).getPropertyValue( "gray-darkest" ).trim();

github-actions · 2025-06-20T16:21:36Z

PR Code Suggestions ✨

Latest suggestions up to edc313f
Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix invalid CSS variable fallback The fallback key `"gray-darkest"` is not a valid CSS variable and will return an empty string. Replace it with an existing CSS variable (e.g. `--ff-gray-800`) or a literal color to guarantee a valid `chevronColor`. forms-flow-nav/src/sidenav/MenuComponent.jsx [76-81] const chevronColor = getComputedStyle(document.documentElement).getPropertyValue( "--navbar-main-menu-active-font-color" )?.trim() \|\| getComputedStyle(document.documentElement).getPropertyValue( - "gray-darkest" + "--ff-gray-800" ).trim(); Suggestion importance[1-10]: 7 __ Why: Replacing the non‐existent `"gray-darkest"` fallback with a valid CSS variable ensures `chevronColor` never ends up empty, preventing inconsistent UI styling.	Medium
Possible issue	Ensure valid fallback icon color The fallback `"gray-darkest"` does not reference a CSS variable and yields no color. Use a defined CSS variable or default hex to ensure `iconBgColor` is valid. forms-flow-nav/src/sidenav/Sidebar.jsx [323-328] const iconBgColor = -getComputedStyle(document.documentElement).getPropertyValue( - "--navbar-main-menu-active-font-color" -)?.trim() \|\| getComputedStyle(document.documentElement).getPropertyValue( - "gray-darkest" -).trim(); + getComputedStyle(document.documentElement).getPropertyValue( + "--navbar-main-menu-active-font-color" + )?.trim() \|\| getComputedStyle(document.documentElement).getPropertyValue( + "--ff-gray-800" + ).trim(); Suggestion importance[1-10]: 7 __ Why: Using a real CSS variable instead of `"gray-darkest"` guarantees `iconBgColor` has a valid value, avoiding potential missing background styling.	Medium
General	Forward props to SVG element Spread received props and apply the forwarded `className` onto the to ensure consumers can customize styling, event handlers, and accessibility attributes. forms-flow-components/src/components/SvgIcons/index.tsx [1035-1046] export const NavbarTaskIcon = ({ color = grayDarkestColor, className, ...props }) => ( <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" + className={className} + {...props} > Suggestion importance[1-10]: 6 __ Why: Spreading `...props` and applying the `className` on the `<svg>` improves reusability and styling flexibility without affecting existing icon logic.	Low

Previous suggestions

Suggestions up to commit 5a635f7

Category	Suggestion	Impact
General	Fix CSS var fallback key The fallback value for the CSS variable is a literal string `"gray-darkest"` rather than a CSS custom property. Use the correct `--gray-darkest` variable or provide a hex color as fallback. forms-flow-nav/src/sidenav/Sidebar.jsx [323-328] const iconBgColor = getComputedStyle(document.documentElement).getPropertyValue( "--navbar-main-menu-active-font-color" )?.trim() \|\| getComputedStyle(document.documentElement).getPropertyValue( - "gray-darkest" + "--gray-darkest" ).trim(); Suggestion importance[1-10]: 8 __ Why: The fallback for `getPropertyValue` uses the literal `"gray-darkest"` instead of the CSS variable `--gray-darkest`, causing the fallback to fail and leading to incorrect icon background colors.	Medium
General	Spread props on SVG element The new icon components accept `className` and other props but aren’t applying them to the element. Spread `className` and `...props` onto so consumers can style or size them. forms-flow-components/src/components/SvgIcons/index.tsx [1040-1046] <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" + className={className} + {...props} > Suggestion importance[1-10]: 6 __ Why: The new icon components accept `className` and `...props` but don’t apply them to `<svg>`, preventing consumers from customizing styling or behavior.	Low
Possible issue	Use camelCase SVG props React SVG props must use camelCase. Replace `stroke-width`, `stroke-linecap` and `stroke-linejoin` with `strokeWidth`, `strokeLinecap` and `strokeLinejoin` respectively. forms-flow-components/src/components/SvgIcons/index.tsx [1048-1054] <path d="M8 12.6786L10.5 15.3571L15.5 10" stroke="white" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" /> Suggestion importance[1-10]: 7 __ Why: The SVG attributes `stroke-width`, `stroke-linecap`, and `stroke-linejoin` should be camelCased (`strokeWidth`, `strokeLinecap`, `strokeLinejoin`) in React for consistency and to avoid potential rendering issues.	Medium

sonarqubecloud · 2025-06-20T16:23:53Z

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

github-actions · 2025-06-20T16:24:08Z

Persistent review updated to latest commit edc313f

arun-s-aot · 2025-06-21T06:47:54Z

forms-flow-nav/src/sidenav/MenuComponent.jsx

    "--navbar-main-menu-active-font-color"
  )?.trim() || getComputedStyle(document.documentElement).getPropertyValue(
-    "--ff-gray-800"
+    "gray-darkest"


can you change it to --gray-darkest

arun-s-aot · 2025-06-21T06:48:16Z

forms-flow-nav/src/sidenav/Sidebar.jsx

+  getComputedStyle(document.documentElement).getPropertyValue(
+    "--navbar-main-menu-active-font-color"
+  )?.trim() || getComputedStyle(document.documentElement).getPropertyValue(
+    "gray-darkest"


can you change it to --gray-darkest

Ajay-aot added 3 commits June 20, 2025 10:58

sidebar icon updations

74f2812

navbar icon updates

e3b7410

unwanted imports removed

5a635f7

Ajay-aot requested review from a team as code owners June 20, 2025 16:19

github-actions bot added the Review effort 3/5 label Jun 20, 2025

sonar issue solved

edc313f

Josephalexantony-aot approved these changes Jun 20, 2025

View reviewed changes

abilpraju-aot approved these changes Jun 21, 2025

View reviewed changes

arun-s-aot approved these changes Jun 21, 2025

View reviewed changes

arun-s-aot reviewed Jun 21, 2025

View reviewed changes

arun-s-aot merged commit 553b60b into AOT-Technologies:develop Jun 21, 2025
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/FWF-4833 sidebar updations #628

Feature/FWF-4833 sidebar updations #628

Uh oh!

Ajay-aot commented Jun 20, 2025 •

edited by github-actions bot

Loading

Uh oh!

github-actions bot commented Jun 20, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 20, 2025 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Jun 20, 2025

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

arun-s-aot Jun 21, 2025

Uh oh!

arun-s-aot Jun 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Feature/FWF-4833 sidebar updations #628

Feature/FWF-4833 sidebar updations #628

Uh oh!

Conversation

Ajay-aot commented Jun 20, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Issue Tracking

Changes

PR Type

Description

Changes walkthrough 📝

Uh oh!

github-actions bot commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Reviewer Guide 🔍

(Review updated until commit edc313f)

Uh oh!

github-actions bot commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Previous suggestions

Uh oh!

sonarqubecloud bot commented Jun 20, 2025

Quality Gate passed

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

arun-s-aot Jun 21, 2025

Choose a reason for hiding this comment

Uh oh!

arun-s-aot Jun 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Ajay-aot commented Jun 20, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Jun 20, 2025 •

edited

Loading

(Review updated until commit `edc313f`)

github-actions bot commented Jun 20, 2025 •

edited

Loading