From a6dcc8b0b7d1df053e18a271d79d901a9efa1150 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Mon, 11 Nov 2024 15:36:00 -0600 Subject: [PATCH 1/7] strip down TopBarPicker into basic working system/silo picker --- app/components/SystemSiloPicker.tsx | 77 +++++++++++ app/components/TopBar.tsx | 55 +++++--- app/components/TopBarPicker.tsx | 195 ---------------------------- 3 files changed, 114 insertions(+), 213 deletions(-) create mode 100644 app/components/SystemSiloPicker.tsx delete mode 100644 app/components/TopBarPicker.tsx diff --git a/app/components/SystemSiloPicker.tsx b/app/components/SystemSiloPicker.tsx new file mode 100644 index 0000000000..4a405477b6 --- /dev/null +++ b/app/components/SystemSiloPicker.tsx @@ -0,0 +1,77 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, you can obtain one at https://mozilla.org/MPL/2.0/. + * + * Copyright Oxide Computer Company + */ +import cn from 'classnames' + +import { + Organization16Icon, + SelectArrows6Icon, + Servers16Icon, + Success12Icon, +} from '@oxide/design-system/icons/react' + +import { useCurrentUser } from '~/layouts/AuthenticatedLayout' +import * as DropdownMenu from '~/ui/lib/DropdownMenu' +import { pb } from '~/util/path-builder' + +/** + * Choose between System and Silo-scoped route trees, or if the user doesn't + * have access to system routes (i.e., if systemPolicyView 403s) show the + * current silo. + */ +export function SiloSystemPicker({ value }: { value: 'silo' | 'system' }) { + const { isFleetViewer } = useCurrentUser() + + // if the user can't see the picker, show a placeholder control with their + // silo name that links to root/home + if (!isFleetViewer) { + // TODO: is this supposed to be a link button? feels weird if not + return ( +
+ +
+ ) + } + + return ( + + +
+ {value === 'system' ? : } +
+
{value === 'system' ? 'System' : 'Silo'}
+ {/* aria-hidden is a tip from the Reach docs */} + + + {/* TODO: popover position should be further right */} + + + + + + ) +} + +function Item(props: { label: string; to: string; isSelected: boolean }) { + return ( + +
+
{props.label}
+ {props.isSelected && } +
+ + ) +} diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx index d31d6d6531..3f6756ca0d 100644 --- a/app/components/TopBar.tsx +++ b/app/components/TopBar.tsx @@ -9,17 +9,14 @@ import cn from 'classnames' import { Link } from 'react-router-dom' import { navToLogin, useApiMutation } from '@oxide/api' -import { - DirectionDownIcon, - PrevArrow12Icon, - Profile16Icon, -} from '@oxide/design-system/icons/react' +import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/react' -import { SiloSystemPicker } from '~/components/TopBarPicker' +import { SiloSystemPicker } from '~/components/SystemSiloPicker' import { useCrumbs } from '~/hooks/use-crumbs' import { useCurrentUser } from '~/layouts/AuthenticatedLayout' import { buttonStyle } from '~/ui/lib/Button' import * as DropdownMenu from '~/ui/lib/DropdownMenu' +import { Identicon } from '~/ui/lib/Identicon' import { Slash } from '~/ui/lib/Slash' import { intersperse } from '~/util/array' import { pb } from '~/util/path-builder' @@ -31,34 +28,56 @@ export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) { return ( <>
- +
{/* Height is governed by PageContainer grid */} - {/* shrink-0 is needed to prevent getting squished by body content */} -
-
+
+
+ -
- -
+
+
+
) } +const BigIdenticon = ({ name }: { name: string }) => ( + +) + +function HomeButton() { + const { me } = useCurrentUser() + return ( + +
+
+ +
+
+
Silo
+
+ {me.siloName} +
+
+
+ + ) +} + function Breadcrumbs() { const crumbs = useCrumbs().filter((c) => !c.titleOnly) const isTopLevel = crumbs.length <= 1 return (