From 5cba2471d983e8173ab3b4a043f0f488f7cf9105 Mon Sep 17 00:00:00 2001 From: Athul Date: Wed, 8 Oct 2025 16:45:37 +0530 Subject: [PATCH 1/9] Add settings sidebar navigation and improve modal icon sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Created reusable SettingsLayout component with floating sidebar navigation - Updated settings pages to use consistent sidebar with click-outside detection - Fixed settings route to redirect to platform settings (prevents empty page) - Improved modal icon sizing to 50% for better visual balance - Updated settings pages background to white 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../agency/display-logs/DisplayLogs.css | 4 +- .../editable-text/EditableText.css | 2 +- .../src/components/deployments/body/Body.jsx | 12 +- .../data-source-card/DataSourceCard.css | 7 +- .../data-source-card/DataSourceCard.jsx | 5 +- .../DisplayLogsAndNotifications.css | 6 +- .../navigations/tool-nav-bar/ToolNavBar.jsx | 2 +- frontend/src/components/onboard/onBoard.css | 7 +- .../pipelines/Pipelines.css | 1 - .../settings/default-triad/DefaultTriad.jsx | 5 +- .../settings/platform/PlatformSettings.css | 4 +- .../settings/platform/PlatformSettings.jsx | 175 +++++++++--------- .../settings-layout/SettingsLayout.jsx | 91 +++++++++ .../components/settings/settings/Settings.css | 51 +++-- .../components/settings/settings/Settings.jsx | 86 +-------- .../components/widgets/list-view/ListView.css | 4 +- frontend/src/index.css | 9 +- 17 files changed, 272 insertions(+), 199 deletions(-) create mode 100644 frontend/src/components/settings/settings-layout/SettingsLayout.jsx diff --git a/frontend/src/components/agency/display-logs/DisplayLogs.css b/frontend/src/components/agency/display-logs/DisplayLogs.css index d1e9541d36..b0f637e576 100644 --- a/frontend/src/components/agency/display-logs/DisplayLogs.css +++ b/frontend/src/components/agency/display-logs/DisplayLogs.css @@ -6,10 +6,10 @@ } .display-logs-col-first { - font-size: 12px; + font-size: 14px; } .display-logs-col { - font-size: 12px; + font-size: 14px; padding-left: 5px; } diff --git a/frontend/src/components/custom-tools/editable-text/EditableText.css b/frontend/src/components/custom-tools/editable-text/EditableText.css index 3c6d855863..289142b1c2 100644 --- a/frontend/src/components/custom-tools/editable-text/EditableText.css +++ b/frontend/src/components/custom-tools/editable-text/EditableText.css @@ -18,5 +18,5 @@ .input-header-text { font-weight: bold; - font-size: 20px; + font-size: 14px; } diff --git a/frontend/src/components/deployments/body/Body.jsx b/frontend/src/components/deployments/body/Body.jsx index 4e5e6054f2..b1bcdd7688 100644 --- a/frontend/src/components/deployments/body/Body.jsx +++ b/frontend/src/components/deployments/body/Body.jsx @@ -12,11 +12,13 @@ function Body({ type, columns, tableData, isTableLoading, openAddModal }) { } if (!tableData?.length) { return ( - openAddModal(false)} - /> + + openAddModal(false)} + /> + ); } return ( diff --git a/frontend/src/components/input-output/data-source-card/DataSourceCard.css b/frontend/src/components/input-output/data-source-card/DataSourceCard.css index 2658f1b1ad..ea36d46357 100644 --- a/frontend/src/components/input-output/data-source-card/DataSourceCard.css +++ b/frontend/src/components/input-output/data-source-card/DataSourceCard.css @@ -9,8 +9,8 @@ } .ds-card .cover-img { - height: 180px; - width: 90%; + height: 50%; + width: 50%; text-align: center; padding: 10px; background-color: transparent; @@ -40,6 +40,9 @@ .cover-container { position: relative; + display: flex; + flex-direction: column; + align-items: center; } .cover-img { diff --git a/frontend/src/components/input-output/data-source-card/DataSourceCard.jsx b/frontend/src/components/input-output/data-source-card/DataSourceCard.jsx index b6ef89cdab..899d5eb187 100644 --- a/frontend/src/components/input-output/data-source-card/DataSourceCard.jsx +++ b/frontend/src/components/input-output/data-source-card/DataSourceCard.jsx @@ -41,9 +41,10 @@ function DataSourceCard({ srcDetails, setSelectedSourceId, type }) {
diff --git a/frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.css b/frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.css index 2db63dc25c..7588948dbf 100644 --- a/frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.css +++ b/frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.css @@ -14,7 +14,7 @@ .logs-handle { height: 40px; - background-color: #eee; + background-color: #fff; border-bottom: 1px solid #ccc; cursor: ns-resize; user-select: none; @@ -36,7 +36,7 @@ .tool-logs-table .ant-table { font-family: Consolas, "Courier New", monospace; - font-size: 12px !important; + font-size: 14px !important; background-color: #fff; } @@ -50,6 +50,6 @@ } .display-logs-md { - font-size: 12px; + font-size: 14px; padding-left: 5px; } diff --git a/frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx b/frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx index 79a995632e..e3d45066d4 100644 --- a/frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx +++ b/frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx @@ -36,7 +36,7 @@ function ToolNavBar({ +
- + ); } diff --git a/frontend/src/components/settings/platform/PlatformSettings.css b/frontend/src/components/settings/platform/PlatformSettings.css index e085bf1c55..810b6c480b 100644 --- a/frontend/src/components/settings/platform/PlatformSettings.css +++ b/frontend/src/components/settings/platform/PlatformSettings.css @@ -1,8 +1,8 @@ /* Styles for PlatformSettings */ .plt-set-layout { - height: 100%; - background-color: var(--page-bg-2); + height: calc(100vh - 60px); + background-color: #ffffff; } .plt-set-layout-2 { diff --git a/frontend/src/components/settings/platform/PlatformSettings.jsx b/frontend/src/components/settings/platform/PlatformSettings.jsx index 89b929418a..c47c95d24d 100644 --- a/frontend/src/components/settings/platform/PlatformSettings.jsx +++ b/frontend/src/components/settings/platform/PlatformSettings.jsx @@ -15,6 +15,7 @@ import { ConfirmModal } from "../../widgets/confirm-modal/ConfirmModal.jsx"; import "./PlatformSettings.css"; import { useExceptionHandler } from "../../../hooks/useExceptionHandler.jsx"; import usePostHogEvents from "../../../hooks/usePostHogEvents.js"; +import { SettingsLayout } from "../settings-layout/SettingsLayout.jsx"; const defaultKeys = [ { @@ -233,100 +234,104 @@ function PlatformSettings() { }; return ( - <> -
- - - Platform Settings - -
-
- -
-
- {keys.map((keyDetails, keyIndex) => { - return ( -
-
-
- - -
- - {keyDetails?.keyName} - -
- - -
- handleToggle(keyIndex)} - > - Active Key - -
- - -
+ +
+
+ + + Platform Settings + +
+
+ +
+
+ {keys.map((keyDetails, keyIndex) => { + return ( +
- - -
- copyText(keys[keyIndex].key)} - /> - } - /> -
- - - - - - handleDelete(keyIndex)} - content="Want to delete this platform key? This action cannot be undone." - okText="Delete" - > +
+ + +
+ + {keyDetails?.keyName} + +
+ + +
+ handleToggle(keyIndex)} + > + Active Key + +
+ + +
+
+ + +
+ + copyText(keys[keyIndex].key) + } + /> + } + /> +
+ + - - - + + + handleDelete(keyIndex)} + content="Want to delete this platform key? This action cannot be undone." + okText="Delete" + > + + + + +
+ {keyIndex < keys?.length - 1 && }
- {keyIndex < keys?.length - 1 && } -
- ); - })} + ); + })} +
-
- + +
- + ); } diff --git a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx new file mode 100644 index 0000000000..8846ec3f94 --- /dev/null +++ b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx @@ -0,0 +1,91 @@ +import { useEffect, useRef, useState } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import PropTypes from "prop-types"; +import "../settings/Settings.css"; +import { useSessionStore } from "../../../store/session-store"; + +function SettingsLayout({ children, activeKey }) { + const navigate = useNavigate(); + const location = useLocation(); + const [isSidebarVisible, setIsSidebarVisible] = useState(true); + const sidebarRef = useRef(null); + const { sessionDetails } = useSessionStore(); + + const settingsMenuItems = [ + { + key: "platform", + label: "Platform Settings", + path: `/${sessionDetails?.orgName}/settings/platform`, + }, + { + key: "users", + label: "User Management", + path: `/${sessionDetails?.orgName}/users`, + }, + { + key: "triad", + label: "Default Triad", + path: `/${sessionDetails?.orgName}/settings/triad`, + }, + { + key: "review", + label: "Human In the Loop Settings", + path: `/${sessionDetails?.orgName}/settings/review`, + }, + ]; + + // Handle click outside to close sidebar + useEffect(() => { + const handleClickOutside = (event) => { + if (sidebarRef.current && !sidebarRef.current.contains(event.target)) { + setIsSidebarVisible(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + // Determine active key from route if not provided + const getActiveKey = () => { + if (activeKey) return activeKey; + const path = location.pathname; + if (path.includes("platform")) return "platform"; + if (path.includes("users")) return "users"; + if (path.includes("triad")) return "triad"; + if (path.includes("review")) return "review"; + return "platform"; + }; + + const currentActiveKey = getActiveKey(); + + return ( +
+ {isSidebarVisible && ( +
+ {settingsMenuItems.map((item) => ( +
navigate(item.path)} + > + {item.label} +
+ ))} +
+ )} +
{children}
+
+ ); +} + +SettingsLayout.propTypes = { + children: PropTypes.node.isRequired, + activeKey: PropTypes.string, +}; + +export { SettingsLayout }; diff --git a/frontend/src/components/settings/settings/Settings.css b/frontend/src/components/settings/settings/Settings.css index 51f78ced8a..1b44369cd5 100644 --- a/frontend/src/components/settings/settings/Settings.css +++ b/frontend/src/components/settings/settings/Settings.css @@ -1,23 +1,52 @@ /* Styles for Settings */ -.settings-bg-col { - background-color: var(--page-bg-2); +.settings-container { + position: relative; height: 100%; + background-color: var(--page-bg-2); +} + +.settings-sidebar { + position: fixed; + left: 75px; + bottom: 60px; + width: 200px; + background-color: #fff; + border-radius: 4px; + padding: 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + z-index: 1000; } -.settings-layout { - padding: 20px; +.settings-menu-item { + padding: 12px 16px; + font-size: 14px; + cursor: pointer; + color: #000; + transition: all 0.2s; + border-bottom: 1px solid #f0f0f0; } -.settings-head { - margin-bottom: 8px; +.settings-menu-item:first-child { + border-radius: 4px 4px 0 0; } -.settings-head-typo { - font-size: 18px; - font-weight: 600; +.settings-menu-item:last-child { + border-bottom: none; + border-radius: 0 0 4px 4px; } -.settings-plt-typo { - font-size: 14px; +.settings-menu-item:hover { + background-color: #f5f5f5; +} + +.settings-menu-item.active { + background-color: #e6f7ff; + color: #1890ff; + font-weight: 500; +} + +.settings-content { + height: 100%; + overflow: auto; } diff --git a/frontend/src/components/settings/settings/Settings.jsx b/frontend/src/components/settings/settings/Settings.jsx index d8938e8d5e..83559064f1 100644 --- a/frontend/src/components/settings/settings/Settings.jsx +++ b/frontend/src/components/settings/settings/Settings.jsx @@ -1,88 +1,22 @@ -import { Typography } from "antd"; -import { useNavigate } from "react-router-dom"; -import "./Settings.css"; - -import { IslandLayout } from "../../../layouts/island-layout/IslandLayout.jsx"; +import { useNavigate, useLocation } from "react-router-dom"; +import { useEffect } from "react"; import { useSessionStore } from "../../../store/session-store"; -import usePostHogEvents from "../../../hooks/usePostHogEvents.js"; function Settings() { const navigate = useNavigate(); + const location = useLocation(); const { sessionDetails } = useSessionStore(); - const { setPostHogCustomEvent } = usePostHogEvents(); - const handleDefaultTriadClick = () => { - navigate("triad"); - try { - setPostHogCustomEvent("intent_select_default_triad", { - info: "Clicked on 'Default Triad' button", + useEffect(() => { + // Redirect to platform settings if on base settings page + if (location.pathname.endsWith("/settings")) { + navigate(`/${sessionDetails?.orgName}/settings/platform`, { + replace: true, }); - } catch (err) { - // If an error occurs while setting custom posthog event, ignore it and continue } - }; - - return ( -
- -
-
- - General Settings - -
-
- navigate("platform")} - > - Platform Settings - -
-
- navigate(`/${sessionDetails?.orgName}/users`)} - > - User Management - -
-
- - Default Triad - -
+ }, [location.pathname, navigate, sessionDetails?.orgName]); - {sessionDetails?.isPlatformAdmin && ( -
- navigate("admin")} - > - Admin settings - -
- )} -
- navigate("review")} - > - Human In The Loop Settings - -
-
- -
- ); + return null; } export { Settings }; diff --git a/frontend/src/components/widgets/list-view/ListView.css b/frontend/src/components/widgets/list-view/ListView.css index 0deda612b1..955716c4e1 100644 --- a/frontend/src/components/widgets/list-view/ListView.css +++ b/frontend/src/components/widgets/list-view/ListView.css @@ -59,8 +59,8 @@ } .adapter-cover-img .fit-cover { - width: 120px; - height: 90px; + width: 38px; + height: 38px; object-fit: contain; } diff --git a/frontend/src/index.css b/frontend/src/index.css index 7f67b52262..fe6c7222aa 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -29,6 +29,11 @@ body { } /* Custom scroll bar css starts */ +* { + scrollbar-width: thin; + scrollbar-color: #E8EDF2 transparent; +} + ::-webkit-scrollbar { width: 3px; height: 5px; @@ -43,12 +48,12 @@ body { /* Handle */ ::-webkit-scrollbar-thumb { border-radius: 4px; - background: #e2e2e2; + background: #E8EDF2; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { - background: #b3b3b3; + background: #D4DCE5; } /* Corner where both X and Y scroll bar meets */ From dc54058953a66c001090740e1651b9baa71780a8 Mon Sep 17 00:00:00 2001 From: Athul Date: Wed, 8 Oct 2025 18:30:37 +0530 Subject: [PATCH 2/9] Resolve Sonar accessibility issues in SettingsLayout - Added keyboard listener (onKeyDown) for Enter and Space keys - Added role='button' and tabIndex={0} for proper accessibility - Fixes: Visible, non-interactive elements with click handlers must have keyboard listener - Fixes: Interactive elements must support tabbing, mouse, keyboard, and touch inputs --- .../settings/settings-layout/SettingsLayout.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx index 8846ec3f94..05471eed63 100644 --- a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx +++ b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx @@ -61,6 +61,13 @@ function SettingsLayout({ children, activeKey }) { const currentActiveKey = getActiveKey(); + const handleKeyDown = (event, path) => { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + navigate(path); + } + }; + return (
{isSidebarVisible && ( @@ -72,6 +79,9 @@ function SettingsLayout({ children, activeKey }) { currentActiveKey === item.key ? "active" : "" }`} onClick={() => navigate(item.path)} + onKeyDown={(e) => handleKeyDown(e, item.path)} + role="button" + tabIndex={0} > {item.label}
From c2b52433ae996ff4c75205741cd0b62bc055a119 Mon Sep 17 00:00:00 2001 From: Athul Date: Wed, 8 Oct 2025 19:01:09 +0530 Subject: [PATCH 3/9] Resolve CodeRabbit review issues - Remove click-outside logic that made sidebar unrecoverable - Fix route matching to use specific paths instead of substring includes - Consolidate duplicate .cover-img CSS class definitions - Sidebar now remains persistent for consistent navigation access --- .../data-source-card/DataSourceCard.css | 11 +--- .../settings-layout/SettingsLayout.jsx | 59 +++++++------------ 2 files changed, 24 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/input-output/data-source-card/DataSourceCard.css b/frontend/src/components/input-output/data-source-card/DataSourceCard.css index ea36d46357..d8e399ee55 100644 --- a/frontend/src/components/input-output/data-source-card/DataSourceCard.css +++ b/frontend/src/components/input-output/data-source-card/DataSourceCard.css @@ -16,7 +16,10 @@ background-color: transparent; display: flex; align-items: center; + justify-content: center; overflow: hidden; + position: relative; + z-index: 0; } .ds-card-name { @@ -45,14 +48,6 @@ align-items: center; } -.cover-img { - position: relative; - z-index: 0; - align-items: center; - display: flex; - justify-content: center; -} - .ds-card.disabled { opacity: 0.7; } diff --git a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx index 05471eed63..3c59bcc9b1 100644 --- a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx +++ b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useRef } from "react"; import { useNavigate, useLocation } from "react-router-dom"; import PropTypes from "prop-types"; import "../settings/Settings.css"; @@ -7,7 +7,6 @@ import { useSessionStore } from "../../../store/session-store"; function SettingsLayout({ children, activeKey }) { const navigate = useNavigate(); const location = useLocation(); - const [isSidebarVisible, setIsSidebarVisible] = useState(true); const sidebarRef = useRef(null); const { sessionDetails } = useSessionStore(); @@ -34,28 +33,14 @@ function SettingsLayout({ children, activeKey }) { }, ]; - // Handle click outside to close sidebar - useEffect(() => { - const handleClickOutside = (event) => { - if (sidebarRef.current && !sidebarRef.current.contains(event.target)) { - setIsSidebarVisible(false); - } - }; - - document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, []); - // Determine active key from route if not provided const getActiveKey = () => { if (activeKey) return activeKey; const path = location.pathname; - if (path.includes("platform")) return "platform"; - if (path.includes("users")) return "users"; - if (path.includes("triad")) return "triad"; - if (path.includes("review")) return "review"; + if (path.includes("/settings/platform")) return "platform"; + if (path.includes("/users")) return "users"; + if (path.includes("/settings/triad")) return "triad"; + if (path.includes("/settings/review")) return "review"; return "platform"; }; @@ -70,24 +55,22 @@ function SettingsLayout({ children, activeKey }) { return (
- {isSidebarVisible && ( -
- {settingsMenuItems.map((item) => ( -
navigate(item.path)} - onKeyDown={(e) => handleKeyDown(e, item.path)} - role="button" - tabIndex={0} - > - {item.label} -
- ))} -
- )} +
+ {settingsMenuItems.map((item) => ( +
navigate(item.path)} + onKeyDown={(e) => handleKeyDown(e, item.path)} + role="button" + tabIndex={0} + > + {item.label} +
+ ))} +
{children}
); From a0ff6bec337c424aff4eac08387c9072c91cded4 Mon Sep 17 00:00:00 2001 From: Athul Date: Thu, 9 Oct 2025 13:56:07 +0530 Subject: [PATCH 4/9] Fix settings popup visibility and Platform button behavior - Popup appears when navigating to any settings page (including re-navigation to same page) - Popup closes when clicking outside - Platform button always shows popup, even when already on Platform Settings - Uses location.key to detect navigation events (triggers even for same-path navigation) - Platform button path set to /settings/platform for direct access --- .../navigations/side-nav-bar/SideNavBar.jsx | 3 +- .../settings-layout/SettingsLayout.jsx | 57 +++++++++++++------ 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx b/frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx index 2d351216a6..32d1f1bace 100644 --- a/frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx +++ b/frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx @@ -207,11 +207,12 @@ const SideNavBar = ({ collapsed }) => { title: "Platform", description: "Settings for the platform", image: PlatformSettingsIcon, - path: `/${orgName}/settings`, + path: `/${orgName}/settings/platform`, active: window.location.pathname === `/${orgName}/settings` || window.location.pathname === `/${orgName}/settings/platform` || window.location.pathname === `/${orgName}/settings/triad` || + window.location.pathname === `/${orgName}/settings/review` || window.location.pathname === `/${orgName}/users`, }, ], diff --git a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx index 3c59bcc9b1..707512df5f 100644 --- a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx +++ b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx @@ -1,4 +1,4 @@ -import { useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useNavigate, useLocation } from "react-router-dom"; import PropTypes from "prop-types"; import "../settings/Settings.css"; @@ -7,6 +7,7 @@ import { useSessionStore } from "../../../store/session-store"; function SettingsLayout({ children, activeKey }) { const navigate = useNavigate(); const location = useLocation(); + const [isSidebarVisible, setIsSidebarVisible] = useState(true); const sidebarRef = useRef(null); const { sessionDetails } = useSessionStore(); @@ -33,6 +34,26 @@ function SettingsLayout({ children, activeKey }) { }, ]; + // Show sidebar when route changes (navigating to a new settings page) + // location.key changes even when navigating to the same path + useEffect(() => { + setIsSidebarVisible(true); + }, [location.pathname, location.key]); + + // Handle click outside to close sidebar + useEffect(() => { + const handleClickOutside = (event) => { + if (sidebarRef.current && !sidebarRef.current.contains(event.target)) { + setIsSidebarVisible(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + // Determine active key from route if not provided const getActiveKey = () => { if (activeKey) return activeKey; @@ -55,22 +76,24 @@ function SettingsLayout({ children, activeKey }) { return (
-
- {settingsMenuItems.map((item) => ( -
navigate(item.path)} - onKeyDown={(e) => handleKeyDown(e, item.path)} - role="button" - tabIndex={0} - > - {item.label} -
- ))} -
+ {isSidebarVisible && ( +
+ {settingsMenuItems.map((item) => ( +
navigate(item.path)} + onKeyDown={(e) => handleKeyDown(e, item.path)} + role="button" + tabIndex={0} + > + {item.label} +
+ ))} +
+ )}
{children}
); From 6b5c1bdde4738d6dd65059ca6bd7c80e0885a6c9 Mon Sep 17 00:00:00 2001 From: Athul Date: Tue, 14 Oct 2025 20:36:40 +0530 Subject: [PATCH 5/9] Fix CodeRabbit review issues --- frontend/src/components/onboard/onBoard.css | 1 + .../settings/settings-layout/SettingsLayout.jsx | 15 +++++++++++---- .../src/components/settings/settings/Settings.jsx | 4 ++-- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/onboard/onBoard.css b/frontend/src/components/onboard/onBoard.css index 2d903a38c8..9b82488d15 100644 --- a/frontend/src/components/onboard/onBoard.css +++ b/frontend/src/components/onboard/onBoard.css @@ -5,6 +5,7 @@ height: 100vh; overflow-y: auto; padding: 50px 20px 20px 20px; + box-sizing: border-box; } @media screen and (max-height: 900px) { diff --git a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx index 707512df5f..4b79fc9330 100644 --- a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx +++ b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx @@ -11,6 +11,11 @@ function SettingsLayout({ children, activeKey }) { const sidebarRef = useRef(null); const { sessionDetails } = useSessionStore(); + // Guard against missing orgName + if (!sessionDetails?.orgName) { + return null; + } + const settingsMenuItems = [ { key: "platform", @@ -29,7 +34,7 @@ function SettingsLayout({ children, activeKey }) { }, { key: "review", - label: "Human In the Loop Settings", + label: "Human In the Loop Settings", path: `/${sessionDetails?.orgName}/settings/review`, }, ]; @@ -77,7 +82,7 @@ function SettingsLayout({ children, activeKey }) { return (
{isSidebarVisible && ( -
+
+ )} -
{children}
+
{children}
); } diff --git a/frontend/src/components/settings/settings/Settings.jsx b/frontend/src/components/settings/settings/Settings.jsx index 83559064f1..45d812ab17 100644 --- a/frontend/src/components/settings/settings/Settings.jsx +++ b/frontend/src/components/settings/settings/Settings.jsx @@ -9,8 +9,8 @@ function Settings() { useEffect(() => { // Redirect to platform settings if on base settings page - if (location.pathname.endsWith("/settings")) { - navigate(`/${sessionDetails?.orgName}/settings/platform`, { + if ((location.pathname.endsWith("/settings") || location.pathname.endsWith("/settings/")) && sessionDetails?.orgName) { + navigate(`/${sessionDetails?.orgName}/settings/platform/`, { replace: true, }); } From 74fcd5e30ae20b27aa84cafb744f39c13a88d3ee Mon Sep 17 00:00:00 2001 From: Athul Date: Tue, 14 Oct 2025 20:47:54 +0530 Subject: [PATCH 6/9] Remove trailing slash for path consistency --- frontend/src/components/settings/settings/Settings.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/settings/settings/Settings.jsx b/frontend/src/components/settings/settings/Settings.jsx index 45d812ab17..81741dddac 100644 --- a/frontend/src/components/settings/settings/Settings.jsx +++ b/frontend/src/components/settings/settings/Settings.jsx @@ -10,7 +10,7 @@ function Settings() { useEffect(() => { // Redirect to platform settings if on base settings page if ((location.pathname.endsWith("/settings") || location.pathname.endsWith("/settings/")) && sessionDetails?.orgName) { - navigate(`/${sessionDetails?.orgName}/settings/platform/`, { + navigate(`/${sessionDetails?.orgName}/settings/platform`, { replace: true, }); } From bdda2091a2ea074528990440868802086ccafcc8 Mon Sep 17 00:00:00 2001 From: Athul Date: Tue, 14 Oct 2025 21:00:53 +0530 Subject: [PATCH 7/9] Fix SonarCloud issues --- .../settings-layout/SettingsLayout.jsx | 57 ++++++++----------- 1 file changed, 24 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx index 4b79fc9330..24b0e7167c 100644 --- a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx +++ b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx @@ -11,7 +11,27 @@ function SettingsLayout({ children, activeKey }) { const sidebarRef = useRef(null); const { sessionDetails } = useSessionStore(); - // Guard against missing orgName + // Show sidebar when route changes (navigating to a new settings page) + // location.key changes even when navigating to the same path + useEffect(() => { + setIsSidebarVisible(true); + }, [location.pathname, location.key]); + + // Handle click outside to close sidebar + useEffect(() => { + const handleClickOutside = (event) => { + if (sidebarRef.current && !sidebarRef.current.contains(event.target)) { + setIsSidebarVisible(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + // Guard against missing orgName - check AFTER all hooks if (!sessionDetails?.orgName) { return null; } @@ -39,26 +59,6 @@ function SettingsLayout({ children, activeKey }) { }, ]; - // Show sidebar when route changes (navigating to a new settings page) - // location.key changes even when navigating to the same path - useEffect(() => { - setIsSidebarVisible(true); - }, [location.pathname, location.key]); - - // Handle click outside to close sidebar - useEffect(() => { - const handleClickOutside = (event) => { - if (sidebarRef.current && !sidebarRef.current.contains(event.target)) { - setIsSidebarVisible(false); - } - }; - - document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, []); - // Determine active key from route if not provided const getActiveKey = () => { if (activeKey) return activeKey; @@ -72,32 +72,23 @@ function SettingsLayout({ children, activeKey }) { const currentActiveKey = getActiveKey(); - const handleKeyDown = (event, path) => { - if (event.key === "Enter" || event.key === " ") { - event.preventDefault(); - navigate(path); - } - }; - return (
{isSidebarVisible && ( )} From cfec84eced61b88135bab3342be820d1a494777e Mon Sep 17 00:00:00 2001 From: Athul Date: Wed, 15 Oct 2025 00:13:08 +0530 Subject: [PATCH 8/9] Replace navigate(-1) with safe navigation to tools page --- .../components/settings/default-triad/DefaultTriad.jsx | 6 +++++- .../src/components/settings/platform/PlatformSettings.jsx | 8 ++++++-- frontend/src/components/settings/settings/Settings.jsx | 6 +++++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/settings/default-triad/DefaultTriad.jsx b/frontend/src/components/settings/default-triad/DefaultTriad.jsx index c85d6b4a3c..b12dad2b31 100644 --- a/frontend/src/components/settings/default-triad/DefaultTriad.jsx +++ b/frontend/src/components/settings/default-triad/DefaultTriad.jsx @@ -176,7 +176,11 @@ function DefaultTriad() { return (
- diff --git a/frontend/src/components/settings/platform/PlatformSettings.jsx b/frontend/src/components/settings/platform/PlatformSettings.jsx index c47c95d24d..76768791d9 100644 --- a/frontend/src/components/settings/platform/PlatformSettings.jsx +++ b/frontend/src/components/settings/platform/PlatformSettings.jsx @@ -237,8 +237,12 @@ function PlatformSettings() {
- Platform Settings diff --git a/frontend/src/components/settings/settings/Settings.jsx b/frontend/src/components/settings/settings/Settings.jsx index 81741dddac..2ed2dfa0fe 100644 --- a/frontend/src/components/settings/settings/Settings.jsx +++ b/frontend/src/components/settings/settings/Settings.jsx @@ -9,7 +9,11 @@ function Settings() { useEffect(() => { // Redirect to platform settings if on base settings page - if ((location.pathname.endsWith("/settings") || location.pathname.endsWith("/settings/")) && sessionDetails?.orgName) { + if ( + (location.pathname.endsWith("/settings") || + location.pathname.endsWith("/settings/")) && + sessionDetails?.orgName + ) { navigate(`/${sessionDetails?.orgName}/settings/platform`, { replace: true, }); From 75609f11a9ac9ee7c5e582f25f98536096d1dce6 Mon Sep 17 00:00:00 2001 From: Athul Date: Wed, 15 Oct 2025 15:46:30 +0530 Subject: [PATCH 9/9] Fix Prettier formatting issues in SettingsLayout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Split nav element attributes onto separate lines - Format children in main element with proper indentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../settings/settings-layout/SettingsLayout.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx index 24b0e7167c..0d8acf0749 100644 --- a/frontend/src/components/settings/settings-layout/SettingsLayout.jsx +++ b/frontend/src/components/settings/settings-layout/SettingsLayout.jsx @@ -75,7 +75,11 @@ function SettingsLayout({ children, activeKey }) { return (
{isSidebarVisible && ( -
); }