[MISC] Fix Dashboard icon always appearing highlighted

[chandrasekharan-zipstack]

What

• Changed dashboard icon SVG fill color from "white" to "#90A4B7" to match other navigation icons

Why

• The dashboard icon was always appearing highlighted in the sidebar regardless of the current route
• Using the correct color (#90A4B7) allows the CSS filter brightness(0) invert(1) to properly highlight the icon only when active

How

• Updated the SVG fill color in frontend/src/plugins/assets/dashboard-icon.svg from white to #90A4B7

Can this PR break any existing features. If yes, please list possible items. If no, please explain why.

• No, this is a pure styling fix that only changes the dashboard icon color to match other navigation icons

Notes on Testing

• Navigate to API Deployments page - Dashboard icon should appear gray/muted
• Navigate to Dashboard page - Dashboard icon should appear white/highlighted

Screenshots

Checklist

I have read and understood the Contribution Guidelines.

[coderabbitai]

Walkthrough

Replaces global globalThis.location.pathname references with React Router's useLocation() hook throughout SideNavBar component. Updates path-based active state calculations and conditional menu rendering to use the injected location object instead of browser globals.

Changes

Cohort / File(s)	Summary
React Router location hook migration frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx	Adds useLocation import and replaces all globalThis.location.pathname references with location.pathname from the hook. Updates active state determinations, path comparisons for menu items, and propagates location.pathname as an argument to dashboard and menu item builder functions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The PR description addresses a dashboard icon styling issue, but the raw_summary shows substantial refactoring changes to SideNavBar.jsx using React Router's useLocation hook that are not mentioned in the description.	Update the PR description to fully document the SideNavBar.jsx refactoring changes (replacing globalThis.location.pathname with useLocation hook), explaining why this refactor is necessary and its impact on the component's behavior.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fix (dashboard icon highlighting issue), matching the primary change in the PR description and objectives.
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

---

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: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx (2)

113-125: Pass pathname into getActiveSettingsKey instead of reading global location.
Line 114 explicitly references globalThis.location.pathname, which directly accesses the browser's global location object and bypasses router state (breaking in SSR/tests). Use React Router's useLocation() hook in SettingsPopoverContent and pass the pathname as a parameter instead.

🐛 Proposed fix

-const getActiveSettingsKey = () => {
-  const currentPath = globalThis.location.pathname;
+const getActiveSettingsKey = (pathname) => {
+  const currentPath = pathname;
   if (currentPath.includes("/settings/platform")) return "platform";
   if (currentPath.includes("/users")) return "users";
   if (currentPath.includes("/settings/triad")) return "triad";
   if (currentPath.includes("/settings/review")) return "review";
   return "platform";
 };
 
 const SettingsPopoverContent = ({ orgName, navigate }) => {
+  const { pathname } = useLocation();
   const settingsMenuItems = getSettingsMenuItems(orgName);
-  const currentActiveKey = getActiveSettingsKey();
+  const currentActiveKey = getActiveSettingsKey(pathname);

---

159-174: Apply unconditional hook calls for both useUnstractSubscriptionPlanStore and useSelectedProductStore.

Biome's useHookAtTopLevel rule (enabled by default) flags both hooks as violations since they're called conditionally. The try-catch on useUnstractSubscriptionPlanStore doesn't prevent the Rules of Hooks violation—only catches runtime errors. Both hooks require the same fix pattern:

🔧 Proposed fix (unconditional hook calls)

-  try {
-    if (unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore) {
-      unstractSubscriptionPlan =
-        unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore(
-          (state) => state?.unstractSubscriptionPlan,
-        );
-    }
-  } catch (error) {
-    // Do nothing
-  }
+  const useUnstractSubscriptionPlanStore =
+    unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore ??
+    (() => undefined);
+  unstractSubscriptionPlan = useUnstractSubscriptionPlanStore(
+    (state) => state?.unstractSubscriptionPlan,
+  );

-  if (selectedProductStore?.useSelectedProductStore) {
-    selectedProduct = selectedProductStore.useSelectedProductStore(
-      (state) => state?.selectedProduct,
-    );
-  }
+  const useSelectedProductStore =
+    selectedProductStore?.useSelectedProductStore ??
+    (() => undefined);
+  selectedProduct = useSelectedProductStore(
+    (state) => state?.selectedProduct,
+  );

[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