From f402ef4c3c409141a13afc8bed7d810e36661000 Mon Sep 17 00:00:00 2001 From: Sean Hatfield Date: Wed, 7 Feb 2024 08:17:48 -0800 Subject: [PATCH] [CHORE] Hide security tab on Settings Sidebar/Refactor SettingsSidebar component (#683) * hide security setting in settings sidebar when in multiusermode * refactor sidebar to handle mobile view inside SettingsSidebar component * forgot eventlogs on sidebar move footer on settingSidebar to component --------- Co-authored-by: timothycarambat --- .../src/components/SettingsSidebar/index.jsx | 653 +++++++----------- .../src/pages/Admin/Invitations/index.jsx | 5 +- frontend/src/pages/Admin/Logging/index.jsx | 5 +- frontend/src/pages/Admin/System/index.jsx | 5 +- frontend/src/pages/Admin/Users/index.jsx | 5 +- frontend/src/pages/Admin/Workspaces/index.jsx | 5 +- .../pages/GeneralSettings/ApiKeys/index.jsx | 5 +- .../GeneralSettings/Appearance/index.jsx | 6 +- .../src/pages/GeneralSettings/Chats/index.jsx | 5 +- .../Connectors/Github/index.jsx | 5 +- .../Connectors/Youtube/index.jsx | 5 +- .../GeneralSettings/DataConnectors/index.jsx | 5 +- .../GeneralSettings/EmbedChats/index.jsx | 5 +- .../GeneralSettings/EmbedConfigs/index.jsx | 5 +- .../EmbeddingPreference/index.jsx | 5 +- .../GeneralSettings/LLMPreference/index.jsx | 5 +- .../pages/GeneralSettings/Security/index.jsx | 5 +- .../GeneralSettings/VectorDatabase/index.jsx | 5 +- 18 files changed, 291 insertions(+), 448 deletions(-) diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx index 5fe81363c..13c4abeab 100644 --- a/frontend/src/components/SettingsSidebar/index.jsx +++ b/frontend/src/components/SettingsSidebar/index.jsx @@ -25,11 +25,104 @@ import { } from "@phosphor-icons/react"; import useUser from "@/hooks/useUser"; import { USER_BACKGROUND_COLOR } from "@/utils/constants"; +import { isMobile } from "react-device-detect"; export default function SettingsSidebar() { const { logo } = useLogo(); - const sidebarRef = useRef(null); const { user } = useUser(); + const sidebarRef = useRef(null); + const [showSidebar, setShowSidebar] = useState(false); + const [showBgOverlay, setShowBgOverlay] = useState(false); + + useEffect(() => { + function handleBg() { + if (showSidebar) { + setTimeout(() => { + setShowBgOverlay(true); + }, 300); + } else { + setShowBgOverlay(false); + } + } + handleBg(); + }, [showSidebar]); + + if (isMobile) { + return ( + <> +
+ +
+ Logo +
+
+
+
+
setShowSidebar(false)} + /> +
+
+ {/* Header Information */} +
+
+ Logo +
+
+ + + +
+
+ + {/* Primary Body */} +
+
+
+ +
+
+
+
+
+
+
+
+
+ + ); + } return ( <> @@ -62,162 +155,15 @@ export default function SettingsSidebar() { Settings
{/* Primary Body */} -
+
-
-
- {/* Footer */} -
-
- - - - - - - - - - {/* */} -
-
+
@@ -226,254 +172,38 @@ export default function SettingsSidebar() { ); } -export function SidebarMobileHeader() { - const { logo } = useLogo(); - const { user } = useUser(); - const sidebarRef = useRef(null); - const [showSidebar, setShowSidebar] = useState(false); - const [showBgOverlay, setShowBgOverlay] = useState(false); - - useEffect(() => { - function handleBg() { - if (showSidebar) { - setTimeout(() => { - setShowBgOverlay(true); - }, 300); - } else { - setShowBgOverlay(false); - } - } - handleBg(); - }, [showSidebar]); - +const Footer = () => { return ( - <> -
- -
- Logo + + + + + + -
-
+
+ {/* */}
-
-
setShowSidebar(false)} - /> -
-
- {/* Header Information */} -
-
- Logo -
-
- - - -
-
- - {/* Primary Body */} -
-
-
-
-
-
- {/* Footer */} -
-
- - - - - - - - - - {/* */} -
-
-
-
-
-
-
- +
); -} +}; const Option = ({ btnText, @@ -484,7 +214,10 @@ const Option = ({ user = null, allowedRole = [], subOptions = null, + hidden = false, }) => { + if (hidden) return null; + const hasActiveChild = childLinks.includes(window.location.pathname); const isActive = window.location.pathname === href; @@ -493,6 +226,7 @@ const Option = ({ // Option is dual-mode, but user exists, we need to check permissions if (flex && !!user && !allowedRole.includes(user?.role)) return null; + return ( <>
@@ -526,3 +260,130 @@ const Option = ({ ); }; + +const SidebarOptions = ({ user = null }) => ( + <> +