Skip to content

Commit

Permalink
Merge pull request #1247 from merico-dev/1241-able-to-collapse-dashbo…
Browse files Browse the repository at this point in the history
…ard-list-to-get-more-space-for-dashboard

1241 able to collapse dashboard list to get more space for dashboard
  • Loading branch information
GerilLeto authored Oct 19, 2023
2 parents a1657e9 + 87a9ff6 commit 2598f9e
Show file tree
Hide file tree
Showing 31 changed files with 349 additions and 351 deletions.
2 changes: 1 addition & 1 deletion api/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@devtable/api",
"version": "10.46.1",
"version": "10.47.1",
"description": "",
"main": "index.js",
"scripts": {
Expand Down
14 changes: 7 additions & 7 deletions dashboard/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@devtable/dashboard",
"version": "10.46.1",
"version": "10.47.1",
"license": "Apache-2.0",
"publishConfig": {
"access": "public",
Expand Down Expand Up @@ -91,9 +91,9 @@
"crypto-js": "^4.1.1",
"cypress": "^12.9.0",
"cypress-wait-until": "^1.7.2",
"echarts": "^5.3.2",
"echarts-for-react": "^3.0.2",
"echarts-gl": "^2.0.9",
"echarts": "5.4.1",
"echarts-for-react": "3.0.2",
"echarts-gl": "2.0.9",
"jsdom": "^20.0.0",
"jsdom-testing-mocks": "^1.5.0",
"lodash": "^4.17.21",
Expand Down Expand Up @@ -148,9 +148,9 @@
"d3-array": "3.2.3",
"d3-regression": "1.3.10",
"dayjs": "1.11.9",
"echarts": "^5.3.2",
"echarts-for-react": "^3.0.2",
"echarts-gl": "^2.0.9",
"echarts": "5.4.1",
"echarts-for-react": "3.0.2",
"echarts-gl": "2.0.9",
"eventemitter2": "^6.4.6",
"jszip": "3.10.1",
"lodash": "^4.17.21",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@devtable/root",
"version": "10.46.1",
"version": "10.47.1",
"private": true,
"workspaces": [
"api",
Expand Down
2 changes: 1 addition & 1 deletion settings-form/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@devtable/settings-form",
"version": "10.46.1",
"version": "10.47.1",
"license": "Apache-2.0",
"publishConfig": {
"access": "public",
Expand Down
8 changes: 4 additions & 4 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@devtable/website",
"private": true,
"license": "Apache-2.0",
"version": "10.46.1",
"version": "10.47.1",
"scripts": {
"dev": "vite",
"preview": "vite preview"
Expand Down Expand Up @@ -48,9 +48,9 @@
"d3-array": "3.2.3",
"d3-regression": "1.3.10",
"dayjs": "1.11.9",
"echarts": "^5.3.2",
"echarts-for-react": "^3.0.2",
"echarts-gl": "^2.0.9",
"echarts": "5.4.1",
"echarts-for-react": "3.0.2",
"echarts-gl": "2.0.9",
"eventemitter2": "^6.4.6",
"json-stable-stringify": "^1.0.2",
"jszip": "3.10.1",
Expand Down
24 changes: 13 additions & 11 deletions website/src/components/account-dropdown/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Group, Menu, Text, UnstyledButton } from '@mantine/core';
import { Group, Menu, Stack, Text, UnstyledButton } from '@mantine/core';
import { useBoolean } from 'ahooks';
import { forwardRef } from 'react';
import { useNavigate } from 'react-router-dom';
Expand All @@ -10,18 +10,19 @@ import { UpdateProfileModal } from './update-profile';
interface UserButtonProps extends React.ComponentPropsWithoutRef<'button'> {
username: string;
email: string;
height: number;
}

const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
({ username, email, ...rest }: UserButtonProps, ref) => (
({ username, email, height, ...rest }: UserButtonProps, ref) => (
<UnstyledButton
ref={ref}
px="md"
py={0}
sx={(theme) => ({
display: 'block',
width: '100%',
height: '60px',
height,
color: theme.black,

'&:hover': {
Expand All @@ -31,23 +32,24 @@ const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
{...rest}
>
<Group>
<div style={{ flex: 1 }}>
<Stack spacing={0} style={{ flex: 1 }}>
<Text size="sm" weight={500}>
{username}
</Text>

<Text color="dimmed" size="xs">
{email}
</Text>
</div>
{email && (
<Text mt={-4} color="dimmed" size={11}>
{email}
</Text>
)}
</Stack>

<ChevronRight size={16} />
</Group>
</UnstyledButton>
),
);

export function AccountDropdown() {
export function AccountDropdown({ height }: { height: number }) {
const { account } = useAccountContext();
const navigate = useNavigate();
const logout = () => {
Expand All @@ -62,7 +64,7 @@ export function AccountDropdown() {
<Group position="center">
<Menu withinPortal>
<Menu.Target>
<UserButton username={account.name} email={account.email} />
<UserButton username={account.name} email={account.email} height={height} />
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>Account Settings</Menu.Label>
Expand Down
7 changes: 4 additions & 3 deletions website/src/components/logo/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { useRequest } from 'ahooks';
import { ConfigAPI } from '../../api-caller/config';
import { LogoLink } from './logo-link';
import { Box } from '@mantine/core';

export const Logo = () => {
export const Logo = ({ height }: { height: string | number }) => {
const { data } = useRequest(ConfigAPI.getWebsiteSettings);
if (!data) {
return null;
}

return (
<>
<Box sx={{ height, img: { height: '100%' } }}>
<LogoLink data={data} />
</>
</Box>
);
};
37 changes: 37 additions & 0 deletions website/src/frames/admin/breadcrumbs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Anchor, Breadcrumbs, Group, Text } from '@mantine/core';
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import { adminPageLinks } from './page-links';
import { Helmet } from 'react-helmet-async';

export const AdminBreadcrumbs = () => {
const location = useLocation();
const pathname = location.pathname;

const item = useMemo(() => {
const match = adminPageLinks.find((l) => l.to === pathname);
return match ?? null;
}, [pathname]);

return (
<>
{item && (
<Helmet>
<title>{item.name}</title>
</Helmet>
)}
<Breadcrumbs>
<Group spacing={6}>
<Text size="sm" color="#868e96" sx={{ cursor: 'default', userSelect: 'none' }}>
System Settings
</Text>
</Group>
{item && (
<Anchor key={item.to} href={item.to} size="sm">
<Group spacing={6}>{item.name}</Group>
</Anchor>
)}
</Breadcrumbs>
</>
);
};
18 changes: 0 additions & 18 deletions website/src/frames/admin/header/index.tsx

This file was deleted.

42 changes: 24 additions & 18 deletions website/src/frames/admin/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { AppShell, MantineProvider } from '@mantine/core';
import { AdminHeader } from './header';
import { AppShell, Box, Group, MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { Navigate, Outlet } from 'react-router-dom';
import { AdminNavbar } from './navbar';
import './index.css';
import { AccountDropdown } from '../../components/account-dropdown';
import { useAccountContext } from '../require-auth/account-context';
import './index.css';
import { AdminNavbar } from './navbar';
import { AdminBreadcrumbs } from './breadcrumbs';

export function AdminFrame() {
const { isAdmin } = useAccountContext();
Expand All @@ -14,27 +15,32 @@ export function AdminFrame() {
return (
<AppShell
padding="md"
header={<AdminHeader />}
navbar={<AdminNavbar />}
styles={{
root: {
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
},
body: {
flexGrow: 1,
},
main: {
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
height: '100vh',
overflow: 'hidden',
paddingTop: 0,
paddingRight: 0,
paddingBottom: 'calc(var(--mantine-footer-height, 0px) + 10px)',
paddingLeft: 'calc(var(--mantine-navbar-width, 0px) + 0px)',
width: '100vw',
transition: 'padding-left ease 100ms',
},
}}
>
<MantineProvider>
<Notifications position="top-right" />
<Outlet />
<Group position="apart" pl={10} sx={{ height: '40px', borderBottom: '0.0625rem solid #e9ecef' }}>
<Group position="left">
{/* should place breadcrumbs here */}
<AdminBreadcrumbs />
</Group>
<AccountDropdown height={39} />
</Group>
<Box p={10} sx={{ height: 'calc(100vh - 30px)', overflow: 'auto' }}>
<Notifications position="top-right" />
<Outlet />
</Box>
</MantineProvider>
</AppShell>
);
Expand Down
27 changes: 3 additions & 24 deletions website/src/frames/admin/navbar/admin-page-links.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import { Box, Group, Text, UnstyledButton } from '@mantine/core';
import {
IconClipboardCheck,
IconClipboardCopy,
IconDatabase,
IconInfoCircle,
IconKey,
IconUsers,
} from '@tabler/icons-react';
import { useLocation, useNavigate } from 'react-router-dom';
import { LinkType, adminPageLinks } from '../page-links';

interface IAdminPageLink {
to: string;
Expand All @@ -24,7 +17,7 @@ function AdminPageLink({ to, name, icon, active }: IAdminPageLink) {
display: 'block',
width: '100%',
padding: theme.spacing.xs,
borderRadius: theme.radius.sm,
borderRadius: 0,
color: theme.black,

'&:hover': {
Expand All @@ -43,28 +36,14 @@ function AdminPageLink({ to, name, icon, active }: IAdminPageLink) {
);
}

type LinkType = {
name: string;
to: string;
icon: React.ReactNode;
};

const links: LinkType[] = [
{ name: 'Data Sources', to: '/admin/data_source/list', icon: <IconDatabase size={16} color="#868e96" /> },
{ name: 'SQL Snippets', to: '/admin/sql_snippet/list', icon: <IconClipboardCopy size={16} color="#868e96" /> },
{ name: 'Accounts', to: '/admin/account/list', icon: <IconUsers size={16} color="#868e96" /> },
{ name: 'API Keys', to: '/admin/api_key/list', icon: <IconKey size={16} color="#868e96" /> },
{ name: 'Status', to: '/admin/status', icon: <IconInfoCircle size={16} color="#868e96" /> },
];

export function AdminPageLinks() {
const location = useLocation();
const isLinkActive = (link: LinkType) => {
return link.to === location.pathname;
};
return (
<Box pt="sm" sx={{ position: 'relative' }}>
{links.map((link) => (
{adminPageLinks.map((link) => (
<AdminPageLink key={link.to} active={isLinkActive(link)} {...link} />
))}
</Box>
Expand Down
27 changes: 27 additions & 0 deletions website/src/frames/admin/navbar/admin-system-nav-actions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { ActionIcon, Group, Navbar as MantineNavbar, Tooltip } from '@mantine/core';
import { IconX } from '@tabler/icons-react';
import { useNavigate } from 'react-router-dom';
import { Logo } from '../../../components/logo';

export const AdminSystemNavActions = () => {
const navigate = useNavigate();
const gotoDashboard = () => {
const id = localStorage.getItem('last_visited_dashboard_id');
const path = id ? `/dashboard/${id}` : '/dashboard';
navigate(path);
};
return (
<MantineNavbar.Section>
<Group position="apart" py={5} px={10} h={40} sx={{ borderBottom: '1px solid #eee' }}>
<Logo height="24px" />
<Group position="right">
<Tooltip label="Back to dashboards">
<ActionIcon color="blue" size="xs" onClick={gotoDashboard}>
<IconX size={20} />
</ActionIcon>
</Tooltip>
</Group>
</Group>
</MantineNavbar.Section>
);
};
Loading

0 comments on commit 2598f9e

Please sign in to comment.