diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx index bdc36bff0307..d76144457467 100644 --- a/src/frontend/src/components/nav/PanelGroup.tsx +++ b/src/frontend/src/components/nav/PanelGroup.tsx @@ -46,6 +46,7 @@ export type PanelProps = { selectedPanel?: string; onPanelChange?: (panel: string) => void; collapsible?: boolean; + ml?: string; }; function BasePanelGroup({ @@ -53,7 +54,8 @@ function BasePanelGroup({ panels, onPanelChange, selectedPanel, - collapsible = true + collapsible = true, + ml = '' }: Readonly): ReactNode { const location = useLocation(); const navigate = useNavigate(); @@ -117,7 +119,7 @@ function BasePanelGroup({ return ( - + {panels.map( diff --git a/src/frontend/src/components/settings/QuickAction.tsx b/src/frontend/src/components/settings/QuickAction.tsx new file mode 100644 index 000000000000..e4aff43512f3 --- /dev/null +++ b/src/frontend/src/components/settings/QuickAction.tsx @@ -0,0 +1,110 @@ +import { Trans, t } from '@lingui/macro'; +import { Carousel } from '@mantine/carousel'; +import { + Button, + Divider, + Flex, + Group, + Paper, + Stack, + Text, + Title +} from '@mantine/core'; +import { IconHome } from '@tabler/icons-react'; + +import { ActionButton } from '../buttons/ActionButton'; + +interface ActionItem { + id: string; + title: string; + description: string; + action: () => void; +} + +function ActionCarousel({ items }: { items: ActionItem[] }) { + const slides = items.map((image) => ( + + + + + + {image.title} +
+ {image.description} +
+
+ +
+
+
+ )); + + return ( + + {slides} + + ); +} + +export const QuickAction = ({ + navigate, + ml = 'sm' +}: { + navigate?: any; + ml?: string; +}) => { + const items = [ + { + id: '1', + title: 'Add a new group', + description: 'Create a new group to manage your users', + action: () => console.log('Add a new group') + }, + { + id: '2', + title: 'Add a new user', + description: 'Create a new user to manage your groups', + action: () => console.log('Add a new user') + }, + { + id: '3', + title: 'Add a new role', + description: 'Create a new role to manage your permissions', + action: () => console.log('Add a new role') + } + ]; + return ( + + + <Trans>Quick Actions</Trans> + + + {navigate ? ( + <> + } + color="blue" + size="lg" + radius="sm" + variant="filled" + tooltip={t`Go to Home`} + onClick={() => navigate('home')} + /> + + + ) : null} + + + + ); +}; diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx new file mode 100644 index 000000000000..ac0520f2f2db --- /dev/null +++ b/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx @@ -0,0 +1,37 @@ +import { Trans, t } from '@lingui/macro'; +import { Alert, Button, Stack, Title } from '@mantine/core'; +import { IconBrandGithub } from '@tabler/icons-react'; + +import { QuickAction } from '../../../../components/settings/QuickAction'; + +export default function HomePanel(): JSX.Element { + return ( + + + + This is a new feature in PUI previously not available. It provides a + centralized location for all administration functionality and is meant + to replace Djangos admin view. + +
+ Please raise issues for any missing admin functionality. +
+ +
+ + + <Trans>System status</Trans> + + TBD + + <Trans>Security recommodations</Trans> + + TBD +
+ ); +} diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx index 7c0b51c8d735..a06300806d99 100644 --- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx +++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx @@ -1,19 +1,12 @@ -import { Trans, t } from '@lingui/macro'; -import { - Divider, - Paper, - SimpleGrid, - Skeleton, - Stack, - Text, - Title -} from '@mantine/core'; +import { t } from '@lingui/macro'; +import { Divider, Skeleton, Stack } from '@mantine/core'; import { IconCoins, IconCpu, IconDevicesPc, IconExclamationCircle, IconFileUpload, + IconHome, IconList, IconListDetails, IconPackages, @@ -25,11 +18,12 @@ import { IconUsersGroup } from '@tabler/icons-react'; import { lazy, useMemo } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; import PermissionDenied from '../../../../components/errors/PermissionDenied'; -import { PlaceholderPill } from '../../../../components/items/Placeholder'; import { PanelGroup, PanelType } from '../../../../components/nav/PanelGroup'; import { SettingsHeader } from '../../../../components/nav/SettingsHeader'; +import { QuickAction } from '../../../../components/settings/QuickAction'; import { GlobalSettingList } from '../../../../components/settings/SettingList'; import { Loadable } from '../../../../functions/loading'; import { useUserState } from '../../../../states/UserState'; @@ -40,6 +34,8 @@ const ReportTemplatePanel = Loadable( const LabelTemplatePanel = Loadable(lazy(() => import('./LabelTemplatePanel'))); +const HomePanel = Loadable(lazy(() => import('./HomePanel'))); + const UserManagementPanel = Loadable( lazy(() => import('./UserManagementPanel')) ); @@ -94,9 +90,25 @@ const LocationTypesTable = Loadable( export default function AdminCenter() { const user = useUserState(); + const navigate = useNavigate(); + const location = useLocation(); + + const panel = useMemo(() => { + return location.pathname.replace('/settings/admin/', ''); + }, [location.pathname]); + const showQuickAction: boolean = useMemo(() => { + return panel !== 'home'; + }, [panel]); const adminCenterPanels: PanelType[] = useMemo(() => { return [ + { + name: 'home', + label: t`Home`, + icon: , + content: , + showHeadline: false + }, { name: 'user', label: t`Users`, @@ -196,29 +208,6 @@ export default function AdminCenter() { ]; }, []); - const QuickAction = () => ( - - - <Trans>Quick Actions</Trans> - - - - - Add a new user - - - - - - - - - - - - - ); - if (!user.isLoggedIn()) { return ; } @@ -233,11 +222,12 @@ export default function AdminCenter() { switch_link="/settings/system" switch_text="System Settings" /> - + {showQuickAction ? : null} ) : (