From 7cb78537b01820f8ec2d3d4d5fe05ee6d47eef26 Mon Sep 17 00:00:00 2001 From: Bogdan Tsechoev Date: 2024年12月23日 16:51:48 +0000 Subject: [PATCH] feat (UI): Collapsible menu items --- .../src/components/IndexPage/IndexPage.tsx | 642 ++++++++++-------- .../components/IndexPage/IndexPageWrapper.tsx | 25 +- 2 files changed, 378 insertions(+), 289 deletions(-) diff --git a/ui/packages/platform/src/components/IndexPage/IndexPage.tsx b/ui/packages/platform/src/components/IndexPage/IndexPage.tsx index 18fb50c0..c5a20e98 100644 --- a/ui/packages/platform/src/components/IndexPage/IndexPage.tsx +++ b/ui/packages/platform/src/components/IndexPage/IndexPage.tsx @@ -5,7 +5,7 @@ *-------------------------------------------------------------------------- */ -import { Component } from 'react' +import React, { Component, useState } from 'react' import { Switch, Route, NavLink, Redirect, useRouteMatch } from 'react-router-dom' import { AppBar, @@ -16,13 +16,15 @@ import { ListItem, List, Drawer, + Collapse, + Box, + ListItemText } from '@material-ui/core' import qs from 'qs' import { icons } from '@postgres.ai/shared/styles/icons' import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner' import { GatewayLink } from '@postgres.ai/shared/components/GatewayLink' -import { Box } from '@mui/material' import { OrganizationWrapperProps, OrganizationMenuProps, @@ -85,6 +87,7 @@ import { PostgresClusterInstallWrapper } from 'components/PostgresClusterInstall import { PostgresClustersWrapper } from 'components/PostgresClusters/PostgresClustersWrapper' import cn from "classnames"; import { BotSettingsFormWrapper } from "../BotSettingsForm/BotSettingsFormWrapper"; +import { ExpandLess, ExpandMore } from "@material-ui/icons"; interface IndexPageWithStylesProps extends IndexPageProps { @@ -291,7 +294,21 @@ function ProjectWrapper(parentProps: Omit) { } function OrganizationMenu(parentProps: OrganizationMenuProps) { - const isDemoOrg = useRouteMatch(`/${settings.demoOrgAlias}`) + const [activeMenuItems, setActiveMenuItems] = useState>(new Set()); + + const handleOpenMenuItem = (e: React.MouseEvent, value: string) => { + e.stopPropagation() + setActiveMenuItems((prev) => { + const newSet = new Set(prev); + if (newSet.has(value)) { + newSet.delete(value); + } else { + newSet.add(value); + } + return newSet; + }); + }; + if ( parentProps.env && parentProps.env.data && @@ -315,7 +332,7 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) { } return ( -
+
Organization @@ -333,329 +350,380 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) {
- - - - - - {icons.dashboardIcon} - - Dashboard - - - - - - - {icons.aiBotIcon} - - AI AssistantNEW - - - - - - {icons.databaseLabIcon} - - Database Lab - - - - - Instances - - - - - Observed sessions - - - - - - {icons.sqlOptimizationIcon} - - SQL Optimization - - - - - Ask Joe - - - - - History - - - {false && ( +
+ - Plan visualization + + {icons.dashboardIcon} + + Dashboard - )} - - {/* - - - {icons.postgresSQLIcon} - - Postgres - - - - - Clusters - - */} - - - - - {icons.checkupIcon} - - Checkup - - - - - Reports - - - - - - {icons.settingsIcon} - - Settings - - - {orgPermissions && orgPermissions.settingsOrganizationUpdate && ( - General + + {icons.aiBotIcon} + + AI AssistantNEW - )} - {orgPermissions && orgPermissions.settingsOrganizationUpdate && ( handleOpenMenuItem(e, 'dblab')} > - - AI Assistant - + + {icons.databaseLabIcon} + + Database Lab + {activeMenuItems.has('dblab') + ? + : } + - )} - - - Members - - - - - Access tokens - - - {orgData !== null && Permissions.isAdmin(orgData) && ( + + + + Instances + + + + + Observed sessions + + + + handleOpenMenuItem(e, 'sqlOptimization')} +> + + + {icons.sqlOptimizationIcon} + + SQL Optimization + {activeMenuItems.has('sqlOptimization') + ? + : } + + + + + + + Ask Joe + + + + + History + + + {false && ( + + + Plan visualization + + + )} + + + {/* - Billing + + {icons.postgresSQLIcon} + + Postgres - )} - {orgPermissions && orgPermissions.auditLogView && ( - Audit + Clusters + */} + + handleOpenMenuItem(e, 'checkup')} +> + + + {icons.checkupIcon} + + Checkup + {activeMenuItems.has('checkup') + ? + : } + - )} - + + + + + Reports + + + + + handleOpenMenuItem(e, 'settings')} +> + + + {icons.settingsIcon} + + Settings + {activeMenuItems.has('settings') + ? + : } + + + + + {orgPermissions && orgPermissions.settingsOrganizationUpdate && ( + + + General + + + )} + {orgPermissions && orgPermissions.settingsOrganizationUpdate && ( + + + AI Assistant + + + )} + + + Members + + + + + Access tokens + + + {orgData !== null && Permissions.isAdmin(orgData) && ( + + + Billing + + + )} + {orgPermissions && orgPermissions.auditLogView && ( + + + Audit + + + )} + + + +
) } diff --git a/ui/packages/platform/src/components/IndexPage/IndexPageWrapper.tsx b/ui/packages/platform/src/components/IndexPage/IndexPageWrapper.tsx index 156abe51..088cb735 100644 --- a/ui/packages/platform/src/components/IndexPage/IndexPageWrapper.tsx +++ b/ui/packages/platform/src/components/IndexPage/IndexPageWrapper.tsx @@ -9,7 +9,7 @@ export interface IndexPageProps Omit {} export const IndexPageWrapper = (props: IndexPageProps) => { - const drawerWidth = 185 + const drawerWidth = 190 const useStyles = makeStyles( (theme) => ({ @@ -205,6 +205,9 @@ export const IndexPageWrapper = (props: IndexPageProps) => { padding: '0px', marginTop: '10px', }, + menuSectionHeaderCollapsible: { + marginTop: 0 + }, bottomFixedMenuItem: { fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontStyle: 'normal', @@ -236,15 +239,28 @@ export const IndexPageWrapper = (props: IndexPageProps) => { paddingLeft: '15px', color: '#000000', }, + menuSectionHeaderLinkText: { + display: 'inline-flex', + alignItems: 'center', + fontWeight: 'bold' + }, menuSingleSectionHeaderActiveLink: { backgroundColor: colors.consoleStroke, }, menuPointer: { height: '100%', }, + menuContainer: { + height: 'calc(100% - 90px)', + display: 'flex', + flexDirection: 'column' + }, + navMenuContainer: { + flex: 1, + overflowY: 'auto' + }, navMenu: { padding: '0px', - height: 'calc(100% - 160px)', overflowY: 'auto', display: 'flex', @@ -253,6 +269,11 @@ export const IndexPageWrapper = (props: IndexPageProps) => { menuSectionHeaderIcon: { marginRight: '13px', }, + menuSectionHeaderExpandIcon: { + marginLeft: 4, + width: 16, + height: 16 + }, menuItem: { fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontStyle: 'normal',

AltStyle によって変換されたページ (->オリジナル) /