[OSDEV-2366] Add sidebar to the production location page

[protsack-stephan]

Redesign the sidebar navigation ("Jump to") with custom SVG icons (Overview, General Information, Operational Details) and smooth-scroll click handling.

Restyle the "Back to search results" link, replace the MUI Button + ArrowBack with a plain <a> tag and a rotated ArrowRightAlt icon and make the sidebar sticky so it stays visible while scrolling the production location details

Changes:

• New components: Icons/Overview, Icons/GeneralInformation, Icons/OperationalDetails
• Updated NavBar with declarative navItems array, scroll-into-view on click, new styles with hover/active states
• In BackToSearch component switched from <Button> to <a>, simplified styles
• For the ProductionLocationDetailsContainer wrapped sidebar content in a sticky container.
• Added unit tests for NavBar and BackToSearch

[barecheck]

React App | Jest test suite - Code coverage report

Total: 41.66%

Your code coverage diff: 0.21% ▴

✅ All code changes are covered

[barecheck]

Dedupe Hub App | Unittest test suite - Code coverage report

Total: 55.73%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

[barecheck]

Countries App | Unittest test suite - Code coverage report

Total: 100%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

[barecheck]

Contricleaner App | Unittest test suite - Code coverage report

Total: 98.75%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

[barecheck]

Django App | Unittest test suite - Code coverage report

Total: 81.97%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a "Jump to" sidebar to the Production Location page: three new SVG icon components, a dynamic NavBar that smooth-scrolls to sections, BackToSearch converted to an anchor (dispatches RESET_SINGLE_FACILITY and navigates to /facilities), sidebar made sticky via styles, plus tests and a release-note entry. (50 words)

Changes

Cohort / File(s)	Summary
Icon Components src/react/src/components/Icons/Overview.jsx, src/react/src/components/Icons/GeneralInformation.jsx, src/react/src/components/Icons/OperationalDetails.jsx	Added three new default-exported SVG icon components with configurable props for use in the sidebar navigation.
NavBar Navigation src/react/src/components/ProductionLocation/Sidebar/NavBar/NavBar.jsx, src/react/src/components/ProductionLocation/Sidebar/NavBar/styles.js	Replaced static menu with dynamic navItems, added smooth-scroll handleClick, imported new icons, and expanded interactive/active styling and layout classes.
BackToSearch Component src/react/src/components/ProductionLocation/Sidebar/BackToSearch/BackToSearch.jsx, src/react/src/components/ProductionLocation/Sidebar/BackToSearch/styles.js	Replaced Button with anchor-styled link, rotated icon for back affordance, centralized onClick that prevents default, dispatches RESET_SINGLE_FACILITY, and navigates to /facilities; updated styles and class names.
Sidebar Container Layout src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer.jsx, src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/styles.js	Wrapped sidebar pieces in a new sidebar Grid container and added responsive sticky positioning (md: top 10px; lg: top 120px).
Tests src/react/src/__tests__/components/NavBar.test.js, src/react/src/__tests__/components/ProductionLocationDetailsBackToSearch.test.js	Added Jest tests: NavBar renders "Jump to" and three items, verifies smooth scroll behavior and missing-target safety; BackToSearch renders link and arrow, checks href and that clicking dispatches RESET_SINGLE_FACILITY.
Release Notes doc/release/RELEASE-NOTES.md	Inserted release-note line (OSDEV-2366) documenting the "Jump to" sidebar links for the Production Location page.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant User as User
participant Nav as NavBar
participant DOM as Section (e.g., #overview)
User->>Nav: Click "Overview" link
Nav->>DOM: document.querySelector(hash) → call scrollIntoView({behavior:'smooth', block:'start'})
Note right of DOM: If element missing, handler returns without throwing

mermaid
sequenceDiagram
participant User as User
participant Back as BackToSearch
participant Store as Redux Store
participant Router as Router
User->>Back: Click "Back to search results"
Back->>Store: dispatch(RESET_SINGLE_FACILITY)
Back->>Router: navigate to /facilities

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• VadimKovalenkoSNF
• roman-stolar
• mazursasha1990
• Innavin369

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title 'OSDEV-2366 Add sidebar to the production location page' directly and clearly describes the main change—adding a redesigned sidebar to the production location page.
Description check	✅ Passed	The pull request description is well-detailed and directly related to the changeset, covering all major changes including new icon components, NavBar redesign, BackToSearch styling updates, sticky sidebar implementation, and test additions.

_{✏️ 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 OSDEV-2366-add-sidebar

---

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

[coderabbitai]

Actionable comments posted: 5

🧹 Nitpick comments (2)

src/react/src/components/Icons/Overview.jsx (1)

5-17: Mark decorative SVGs as non-announced for assistive tech.

This icon is used next to visible text labels, so it should be hidden from screen readers to avoid redundant output.

♿ Suggested tweak

         <svg
             xmlns="http://www.w3.org/2000/svg"
             width={props.width || '24'}
             height={props.height || '24'}
             viewBox={props.viewBox || '0 0 24 24'}
+            aria-hidden="true"
+            focusable="false"
             fill="none"
             stroke="currentColor"

🤖 Prompt for AI Agents

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

In `@src/react/src/components/Icons/Overview.jsx` around lines 5 - 17, This SVG is
decorative and should be hidden from assistive tech: add aria-hidden="true" and
focusable="false" to the <svg> element in Overview.jsx (and ensure those
attributes are applied after or override the {...props} spread so consumers
can't accidentally re-enable it), e.g., set aria-hidden and focusable on the SVG
element and keep no title/role that would expose it.

src/react/src/components/ProductionLocation/Sidebar/BackToSearch/BackToSearch.jsx (1)

29-29: Use the existing JSS class for icon styling instead of inline style.

Line 29 applies rotation inline while classes.icon already exists in the paired styles module.

♻️ Proposed cleanup

-                <ArrowRightAlt style={{ transform: 'rotate(180deg)' }} />
+                <ArrowRightAlt className={classes.icon} />

🤖 Prompt for AI Agents

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

In
`@src/react/src/components/ProductionLocation/Sidebar/BackToSearch/BackToSearch.jsx`
at line 29, The ArrowRightAlt icon is being rotated with an inline style instead
of using the existing JSS rule; remove the inline style on the ArrowRightAlt
element in BackToSearch.jsx and apply the pre-defined classes.icon className to
the icon (ensure the icon JSX uses className={classes.icon}), and if the
rotation rule is missing in the JSS for classes.icon, add the rotation there so
styling is centralized.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In
`@src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer.jsx`:
- Line 92: The JSX references classes.sidebarContainer in
ProductionLocationDetailsContainer (Grid item at the top) but styles for
sidebarContainer are missing; add a matching rule named sidebarContainer to
ProductionLocationDetailsContainer/styles.js (or rename the JSX reference to an
existing class key) so the class is defined; ensure the new sidebarContainer
style includes the intended layout/spacing (e.g., width, padding/margin, or
responsive rules) to match the original design expectations.

In
`@src/react/src/components/ProductionLocation/Sidebar/BackToSearch/BackToSearch.jsx`:
- Around line 16-20: The onClick handler in BackToSearch.jsx currently always
calls event.preventDefault(), which blocks native modified-clicks; change the
onClick to only preventDefault and perform clearFacility() +
push(facilitiesRoute) when the user did a primary (left) click without modifier
keys (check event.button === 0 and ensure !event.metaKey && !event.ctrlKey &&
!event.shiftKey && !event.altKey), otherwise return and allow the browser to
handle Ctrl/Cmd/middle-clicks. Apply the same conditional fix to the other
similar click handler referenced around lines 24-27, keeping references to
clearFacility, push and facilitiesRoute.

In `@src/react/src/components/ProductionLocation/Sidebar/NavBar/NavBar.jsx`:
- Around line 15-27: The nav items never provide an active flag and the NavBar
component destructures `active`, so update the NavBar logic to track which item
is active locally: add a React state (e.g., `const [activeItem, setActiveItem] =
useState(...)`) in the NavBar component, derive `active` by comparing each
item's `to` or `label` with `activeItem` when rendering the `navItems` array,
and add an onClick that calls `setActiveItem(item.to)` (or similar) to toggle
active; ensure the render uses that computed `active` to apply the active class
instead of expecting `navItems` to include an `active` property.
- Around line 29-34: In handleClick, don't call event.preventDefault() before
confirming the target exists; instead extract the id from the to param, look up
the DOM node via document.getElementById(id), and only call
event.preventDefault() if element is found, then call element.scrollIntoView({
behavior: 'smooth', block: 'start' }); also guard id extraction (e.g., handle
cases where to is falsy) so handleClick returns early and lets default
navigation proceed when no element is present.

In `@src/react/src/components/ProductionLocation/Sidebar/NavBar/styles.js`:
- Around line 31-33: The active menu style currently sets color on
menuItemActive using `${theme.palette.primary.main}14`; change this to set
backgroundColor instead (i.e., replace the color property with backgroundColor
using the same translucent value derived from theme.palette.primary.main) so the
active row is highlighted as a background rather than changing text color; keep
the Object.freeze and existing value expression intact.

---

Nitpick comments:
In `@src/react/src/components/Icons/Overview.jsx`:
- Around line 5-17: This SVG is decorative and should be hidden from assistive
tech: add aria-hidden="true" and focusable="false" to the <svg> element in
Overview.jsx (and ensure those attributes are applied after or override the
{...props} spread so consumers can't accidentally re-enable it), e.g., set
aria-hidden and focusable on the SVG element and keep no title/role that would
expose it.

In
`@src/react/src/components/ProductionLocation/Sidebar/BackToSearch/BackToSearch.jsx`:
- Line 29: The ArrowRightAlt icon is being rotated with an inline style instead
of using the existing JSS rule; remove the inline style on the ArrowRightAlt
element in BackToSearch.jsx and apply the pre-defined classes.icon className to
the icon (ensure the icon JSX uses className={classes.icon}), and if the
rotation rule is missing in the JSS for classes.icon, add the rotation there so
styling is centralized.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 11ff5d21-6abc-4d6a-9af3-7042f47e0222

📥 Commits

Reviewing files that changed from the base of the PR and between 10385a9 and eb62e66.

📒 Files selected for processing (12)

• doc/release/RELEASE-NOTES.md
• src/react/src/__tests__/components/NavBar.test.js
• src/react/src/__tests__/components/ProductionLocationDetailsBackToSearch.test.js
• src/react/src/components/Icons/GeneralInformation.jsx
• src/react/src/components/Icons/OperationalDetails.jsx
• src/react/src/components/Icons/Overview.jsx
• src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer.jsx
• src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/styles.js
• src/react/src/components/ProductionLocation/Sidebar/BackToSearch/BackToSearch.jsx
• src/react/src/components/ProductionLocation/Sidebar/BackToSearch/styles.js
• src/react/src/components/ProductionLocation/Sidebar/NavBar/NavBar.jsx
• src/react/src/components/ProductionLocation/Sidebar/NavBar/styles.js

[VadimKovalenkoSNF]

Good work, approved!

[sonarqubecloud]

Quality Gate passed

Issues
23 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)

src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer.jsx (1)

94-98: Consider using a div or Box instead of Grid for the sidebar wrapper.

The <Grid> element here has no container or item props and doesn't participate in the Grid layout system—it's purely a styled wrapper. While this works, using a plain div (or MUI's Box) would be more semantically appropriate and avoid any confusion about Grid layout intent.

Regarding the SonarCloud PropTypes warning for classes.sidebar: this is common with withStyles HOCs where the classes shape is auto-generated. Adding explicit PropTypes for each class key is optional but can be considered if the project enforces strict PropTypes validation.

♻️ Optional: Use div instead of Grid

-                <Grid className={classes.sidebar}>
+                <div className={classes.sidebar}>
                     <NavBar />
                     <ContributeFields osId={osID} />
                     <SupplyChain />
-                </Grid>
+                </div>

🤖 Prompt for AI Agents

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

In
`@src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer.jsx`
around lines 94 - 98, The sidebar wrapper uses MUI Grid but isn't a Grid
container/item—replace the <Grid className={classes.sidebar}> in
ProductionLocationDetailsContainer with a semantic wrapper (either a plain div
or MUI Box) to avoid implying Grid layout; update imports (remove Grid if
unused) and keep the class reference as className={classes.sidebar} so NavBar,
ContributeFields, and SupplyChain remain children. Also address the SonarCloud
PropTypes warning by adding an explicit PropTypes definition for the injected
classes (e.g., PropTypes.shape({...sidebar: PropTypes.string.isRequired, ...}))
on ProductionLocationDetailsContainer or relax the rule if project policy
allows.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In
`@src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer.jsx`:
- Around line 94-98: The sidebar wrapper uses MUI Grid but isn't a Grid
container/item—replace the <Grid className={classes.sidebar}> in
ProductionLocationDetailsContainer with a semantic wrapper (either a plain div
or MUI Box) to avoid implying Grid layout; update imports (remove Grid if
unused) and keep the class reference as className={classes.sidebar} so NavBar,
ContributeFields, and SupplyChain remain children. Also address the SonarCloud
PropTypes warning by adding an explicit PropTypes definition for the injected
classes (e.g., PropTypes.shape({...sidebar: PropTypes.string.isRequired, ...}))
on ProductionLocationDetailsContainer or relax the rule if project policy
allows.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 86970899-f5b2-4f3d-a407-b988d3a330e8

📥 Commits

Reviewing files that changed from the base of the PR and between 4c5ea7d and 1b22ca3.

📒 Files selected for processing (1)

• src/react/src/components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer.jsx

[vlad-shapik]

LGTM