Skip to content

Commit

Permalink
Merge pull request #842 from bekossy/issue-139/-fix-collapsible-sideb…
Browse files Browse the repository at this point in the history 
…ar-in-ee

Fix collapsible sidebar in ee
  • Loading branch information
@aakrem
aakrem authored Oct 31, 2023
2 parents f61be36 + a86bd65 commit a5ae89b
Showing 1 changed file with 86 additions and 100 deletions.
186 changes: 86 additions & 100 deletions agenta-web/src/components/Sidebar/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import {
QuestionOutlined,
PhoneOutlined,
SettingOutlined,
LogoutOutlined,
ApartmentOutlined,
} from "@ant-design/icons"
import {Layout, Menu, Space, Tooltip, theme, Dropdown, Select, Avatar} from "antd"
import {Layout, Menu, Space, Tooltip, theme, Avatar} from "antd"

import Logo from "../Logo/Logo"
import Link from "next/link"
Expand All @@ -19,7 +21,7 @@ import {ErrorBoundary} from "react-error-boundary"
import {createUseStyles} from "react-jss"
import AlertPopup from "../AlertPopup/AlertPopup"
import {useProfileData} from "@/contexts/profile.context"
import {getColorFromStr, getGradientFromStr} from "@/lib/helpers/colors"
import {getColorFromStr} from "@/lib/helpers/colors"
import {getInitials, isDemo} from "@/lib/helpers/utils"
import {useSession} from "@/hooks/useSession"

Expand All @@ -32,11 +34,8 @@ const {Sider} = Layout

const useStyles = createUseStyles({
sidebar: ({colorBgContainer}: StyleProps) => ({
// paddingLeft: "10px",
// paddingRight: "10px",
background: `${colorBgContainer} !important`,
height: "100vh",
// position: "fixed !important",
position: "sticky !important",
bottom: "0px",
top: "0px",
Expand All @@ -52,7 +51,7 @@ const useStyles = createUseStyles({
display: "flex",
flexDirection: "column",
height: "100%",

padding: "0 10px",
"& > div:nth-of-type(1)": {
marginTop: "20px",
marginBottom: "20px",
Expand All @@ -71,16 +70,14 @@ const useStyles = createUseStyles({
borderRight: "0 !important",
},
menuContainer2: {
paddingBottom: 24,
borderRight: "0 !important",
},
menuLinks: {
width: "100%",
},
sideIcons: {},
optionSideIcon: {},
menuItemNoBg: {
textOverflow: "unset !important",
"& .ant-menu-submenu-title": {display: "flex", alignItems: "center"},
"& .ant-select-selector": {
padding: "0 !important",
},
Expand Down Expand Up @@ -188,17 +185,21 @@ const Sidebar: React.FC = () => {
<Tooltip
key="apps"
placement="right"
title="Create new applications or switch between your existing projects."
title={
!collapsed
? "Create new applications or switch between your existing projects."
: ""
}
>
<Menu.Item
icon={<AppstoreOutlined className={classes.sideIcons} />}
>
<Menu.Item icon={<AppstoreOutlined />}>
<Link
data-cy="app-management-link"
href={getNavigationPath("apps")}
className={classes.menuLinks}
>
App Management
{collapsed
? "Create new applications or switch between your existing projects."
: "App Management"}
</Link>
</Menu.Item>
</Tooltip>
Expand All @@ -207,88 +208,90 @@ const Sidebar: React.FC = () => {
<Tooltip
placement="right"
key="playground"
title="Experiment with real data and optimize your parameters including prompts, methods, and configuration settings."
title={
!collapsed
? "Experiment with real data and optimize your parameters including prompts, methods, and configuration settings."
: ""
}
>
<Menu.Item
icon={
<RocketOutlined
className={classes.optionSideIcon}
/>
}
>
<Menu.Item icon={<RocketOutlined />}>
<Link
data-cy="app-playground-link"
href={getNavigationPath("playground")}
className={classes.menuLinks}
>
Playground
{collapsed
? "Experiment with real data and optimize your parameters including prompts, methods, and configuration settings."
: "Playground"}
</Link>
</Menu.Item>
</Tooltip>

<Tooltip
placement="right"
title="Create and manage testsets for evaluation purposes."
title={
!collapsed
? "Create and manage testsets for evaluation purposes."
: ""
}
key="testsets"
>
<Menu.Item
icon={
<DatabaseOutlined
className={classes.optionSideIcon}
/>
}
>
<Menu.Item icon={<DatabaseOutlined />}>
<Link
data-cy="app-testsets-link"
href={getNavigationPath("testsets")}
className={classes.menuLinks}
>
Test Sets
{collapsed
? "Create and manage testsets for evaluation purposes."
: "Test Sets"}
</Link>
</Menu.Item>
</Tooltip>

<Tooltip
placement="right"
title="Perform 1-to-1 variant comparisons on testsets to identify superior options."
title={
!collapsed
? "Perform 1-to-1 variant comparisons on testsets to identify superior options."
: ""
}
key="evaluations"
>
<Menu.Item
icon={
<LineChartOutlined
className={classes.optionSideIcon}
/>
}
>
<Menu.Item icon={<LineChartOutlined />}>
<Link
data-cy="app-evaluations-link"
href={getNavigationPath("evaluations")}
className={classes.menuLinks}
>
Evaluate
{collapsed
? "Perform 1-to-1 variant comparisons on testsets to identify superior options."
: "Evaluate"}
</Link>
</Menu.Item>
</Tooltip>

<Tooltip
placement="right"
title="Monitor production logs to ensure seamless operations."
title={
!collapsed
? "Monitor production logs to ensure seamless operations."
: ""
}
key="endpoints"
>
<Menu.Item
icon={
<CloudUploadOutlined
className={classes.optionSideIcon}
/>
}
>
<Menu.Item icon={<CloudUploadOutlined />}>
<Link
data-cy="app-endpoints-link"
href={getNavigationPath("endpoints")}
className={classes.menuLinks}
>
<Space>
<span>Endpoints</span>
<span>
{collapsed
? "Monitor production logs to ensure seamless operations."
: "Endpoints"}
</span>
</Space>
</Link>
</Menu.Item>
Expand Down Expand Up @@ -327,62 +330,45 @@ const Sidebar: React.FC = () => {
</Link>
</Menu.Item>
{selectedOrg && (
<Menu.Item key="org" className={classes.menuItemNoBg}>
<Select
bordered={false}
value={selectedOrg.id}
options={orgs.map((org) => ({
label: (
<Tooltip title={org.name}>
<span className={classes.orgLabel}>
<div
style={{
backgroundImage:
getGradientFromStr(
org.id,
),
}}
/>
<span>{org.name}</span>
</span>
</Tooltip>
),
value: org.id,
}))}
onChange={(value) => changeSelectedOrg(value)}
/>
</Menu.Item>
)}
{user?.username && (
<Menu.Item key="user">
<Dropdown
menu={{
items: [
{key: "email", label: user.email},
{
key: "logout",
label: "Logout",
onClick: handleLogout,
},
],
}}
trigger={["click"]}
>
<a onClick={(e) => e.preventDefault()}>
<Space>
<Menu.SubMenu
title={selectedOrg.name}
key="workspaces"
className={classes.menuItemNoBg}
icon={<ApartmentOutlined />}
>
{orgs.map((org, index) => (
<Menu.Item
key={index}
style={{
display: "flex",
alignItems: "center",
}}
icon={
<Avatar
size={"small"}
style={{
backgroundColor:
getColorFromStr(user.email),
getColorFromStr(org.id),
color: "#fff",
}}
size="small"
>
{getInitials(user.email)}
{getInitials(org.name)}
</Avatar>
<span>{user.username}</span>
</Space>
</a>
</Dropdown>
}
onClick={() => changeSelectedOrg(org.id)}
>
<span>{org.name}</span>
</Menu.Item>
))}
</Menu.SubMenu>
)}
{user?.username && (
<Menu.Item
key="logout"
icon={<LogoutOutlined />}
onClick={handleLogout}
>
Logout
</Menu.Item>
)}
</>
Expand Down

0 comments on commit a5ae89b

Please sign in to comment.