multiple persona

1. state.user.role.
2. add file-browser.

Author: chhsiao1981

src/App.tsx

@@ -1,5 +1,4 @@
 import "./app.css";
-import "@patternfly/react-core/dist/styles/base.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { App as AntdApp, ConfigProvider, theme } from "antd";
 import { useContext } from "react";

src/api/api.ts

@@ -1,7 +1,5 @@
 import config from "config";
-import { keyBy } from "lodash";
 import { Cookies } from "react-cookie";
-import { T } from "vitest/dist/chunks/environment.C5eAp3K6.js";
 
 export type Query = Record<string, any>;
 

src/components/Wrapper/Sidebar.module.css

@@ -14,3 +14,7 @@
     border: none;
     font-weight: 400;
 }
+
+.hide {
+    display: none;
+}

src/components/Wrapper/Sidebar.tsx

@@ -7,6 +7,7 @@ import {
   PageSidebarBody,
   Brand,
   NavExpandable,
+  NavItemSeparator,
 } from "@patternfly/react-core";
 import { type DefaultError, useQueryClient } from "@tanstack/react-query";
 import { isEmpty } from "lodash";
@@ -33,6 +34,7 @@ const Sidebar: React.FC<AllProps> = (props: AllProps) => {
   const { sidebarActiveItem, isNavOpen, isTagExpanded, isPackageTagExpanded } =
     useAppSelector((state) => state.ui);
   const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
+  const role = useAppSelector((state) => state.user.role);
   const dispatch = useAppDispatch();
 
   const { onTagToggle, onPackageTagToggle } = props;
@@ -165,6 +167,10 @@ const Sidebar: React.FC<AllProps> = (props: AllProps) => {
               {renderLink("/shared", "Shared Data", "shared")}
             </NavItem>
 
+            <NavItem itemId="lib" isActive={sidebarActiveItem === "lib"}>
+              {renderLink("/library", "Library", "lib")}
+            </NavItem>
+
             <NavExpandable
               title="Tags"
               buttonProps={{ className: styles["tags-expand"] }}

src/components/Wrapper/Toolbar.module.css

@@ -0,0 +1,3 @@
+.role-prompt {
+    margin-right: 5px;
+}

src/components/Wrapper/Toolbar.tsx

@@ -23,10 +23,17 @@ import {
   useAppSelector,
   useSignUpAllowed,
 } from "../../store/hooks";
-import { setLogoutSuccess } from "../../store/user/userSlice";
+import {
+  setLogoutSuccess,
+  Roles,
+  StaffRoles,
+  type Role,
+  setRole,
+} from "../../store/user/userSlice";
 import { ThemeContext } from "../DarkTheme/useTheme";
 import FeedDetails from "../FeedDetails";
 import CartNotify from "./CartNotify";
+import styles from "./Toolbar.module.css";
 
 type ToolbarComponentProps = {
   showToolbar: boolean;
@@ -47,8 +54,12 @@ const ToolbarComponent: React.FC<ToolbarComponentProps> = (
   const { isDarkTheme, toggleTheme } = React.useContext(ThemeContext);
   const queryClient = useQueryClient();
   const username = useAppSelector((state) => state.user.username);
+  const role = useAppSelector((state) => state.user.role);
+  const isStaff = useAppSelector((state) => state.user.isStaff);
   const [dropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [roleDropdownOpen, setIsRoleDropdownOpen] = React.useState(false);
   const [trayOpen, setTrayOpen] = React.useState(false); // State for tray visibility
+  const roles = isStaff ? StaffRoles : Roles;
 
   const handleChange = () => {
     toggleTheme();
@@ -74,6 +85,10 @@ const ToolbarComponent: React.FC<ToolbarComponentProps> = (
     setIsDropdownOpen(!dropdownOpen);
   };
 
+  const onRoleDropdownToggle = () => {
+    setIsRoleDropdownOpen(!roleDropdownOpen);
+  };
+
   const copyLoginCommand = () => {
     const url = `${window.location.protocol}://${window.location.host}`;
     const command = `chrs login --ui "${url}" --cube "${
@@ -92,6 +107,17 @@ const ToolbarComponent: React.FC<ToolbarComponentProps> = (
     </DropdownItem>,
   ];
 
+  const renderRoleDropdownItem = (role: Role, idx: number) => {
+    return (
+      <DropdownItem
+        key={`role-${idx}`}
+        onClick={() => dispatch(setRole({ role }))}
+      >
+        {role}
+      </DropdownItem>
+    );
+  };
+
   const toggleTray = () => {
     setTrayOpen(!trayOpen);
   };
@@ -141,6 +167,22 @@ const ToolbarComponent: React.FC<ToolbarComponentProps> = (
                 ouiaId="Basic Switch"
               />
             </FlexItem>
+            <FlexItem>
+              <span className={styles["role-prompt"]}>I am: </span>
+              <Dropdown
+                onSelect={onRoleDropdownToggle}
+                isOpen={roleDropdownOpen}
+                toggle={(toggleRef) => (
+                  <MenuToggle ref={toggleRef} onClick={onRoleDropdownToggle}>
+                    {role}
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  {roles.map((each, idx) => renderRoleDropdownItem(each, idx))}
+                </DropdownList>
+              </Dropdown>
+            </FlexItem>
             <FlexItem>
               {token ? (
                 <Dropdown

src/components/Wrapper/index.tsx

@@ -80,7 +80,6 @@ const Wrapper = (props: WrapperProps) => {
       }
       sidebar={sidebar}
     >
-      {" "}
       {children}
     </Page>
   );

src/main.css

@@ -7,4 +7,4 @@
     font-size: var(--pf-v5-c-nav__section-title--FontSize);
     color: #eeaa00;
     border-block-end: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
-}
+}

src/main.tsx

@@ -4,6 +4,9 @@ import App from "./App.tsx";
 import { setupStore } from "./store/configureStore.ts";
 import { ThemeContextProvider } from "./components/DarkTheme/useTheme.tsx";
 import { enableMapSet } from "immer";
+
+import "@patternfly/react-core/dist/styles/base.css";
+
 import "./main.css";
 
 enableMapSet();

src/routes.tsx

@@ -28,6 +28,7 @@ import Store from "./components/NewStore";
 import { useAppDispatch, useAppSelector } from "./store/hooks";
 import { setSidebarActive } from "./store/ui/uiSlice";
 import { OperationsProvider } from "./components/NewLibrary/context";
+import GnomeLibrary from "./components/GnomeLibrary";
 
 interface IState {
   selectData?: Series;
@@ -127,7 +128,21 @@ export const MainRouter: React.FC = () => {
       path: "/",
       element: <Dashboard />,
     },
-
+    {
+      path: "library/*",
+      element: (
+        <PrivateRoute>
+          <RouterProvider
+            {...{ actions, state, route, setRoute }}
+            context={MainRouterContext}
+          >
+            <OperationsProvider>
+              <GnomeLibrary />
+            </OperationsProvider>
+          </RouterProvider>
+        </PrivateRoute>
+      ),
+    },
     {
       path: "data/*",
       element: (