From 29214b1ba53d2e261674c01667fccaa41dad0c9f Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Wed, 30 Aug 2023 23:16:33 -0700 Subject: [PATCH 1/7] Fix frozen listbox popover --- app/components/TopBar.tsx | 2 +- .../form/fields/DateTimeRangePicker.spec.tsx | 3 +++ libs/ui/lib/listbox/Listbox.tsx | 12 ++++++++++-- package-lock.json | 13 +++++++++++++ package.json | 1 + 5 files changed, 28 insertions(+), 3 deletions(-) diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx index 60280a24e6..7b6400d8f8 100644 --- a/app/components/TopBar.tsx +++ b/app/components/TopBar.tsx @@ -50,7 +50,7 @@ export function TopBar({ children }: { children: React.ReactNode }) { {/* Height is governed by PageContainer grid */} {/* shrink-0 is needed to prevent getting squished by body content */} -
+
{otherPickers}
diff --git a/app/components/form/fields/DateTimeRangePicker.spec.tsx b/app/components/form/fields/DateTimeRangePicker.spec.tsx index 600db3d63f..660530256a 100644 --- a/app/components/form/fields/DateTimeRangePicker.spec.tsx +++ b/app/components/form/fields/DateTimeRangePicker.spec.tsx @@ -7,6 +7,7 @@ */ import { getLocalTimeZone, now as getNow } from '@internationalized/date' import { fireEvent, render, screen } from '@testing-library/react' +import ResizeObserverPolyfill from 'resize-observer-polyfill' import { beforeAll, describe, expect, it, vi } from 'vitest' import { clickByRole } from 'app/test/unit' @@ -34,6 +35,8 @@ function renderLastDay() { } beforeAll(() => { + global.ResizeObserver = ResizeObserverPolyfill + vi.useFakeTimers() vi.setSystemTime(now.toDate()) diff --git a/libs/ui/lib/listbox/Listbox.tsx b/libs/ui/lib/listbox/Listbox.tsx index 2949752cc6..e0fae06e52 100644 --- a/libs/ui/lib/listbox/Listbox.tsx +++ b/libs/ui/lib/listbox/Listbox.tsx @@ -5,7 +5,14 @@ * * Copyright Oxide Computer Company */ -import { FloatingPortal, flip, offset, size, useFloating } from '@floating-ui/react' +import { + FloatingPortal, + autoUpdate, + flip, + offset, + size, + useFloating, +} from '@floating-ui/react' import { Listbox as Select } from '@headlessui/react' import cn from 'classnames' import type { ReactNode } from 'react' @@ -68,6 +75,7 @@ export const Listbox = ({ }, }), ], + whileElementsMounted: autoUpdate, }) const selectedItem = selected && items.find((i) => i.value === selected) @@ -134,7 +142,7 @@ export const Listbox = ({ {items.map((item) => ( Date: Fri, 1 Sep 2023 01:05:53 -0700 Subject: [PATCH 2/7] Update z-indexes on a few items, aligned with suggested z-index protocol --- app/components/TopBar.tsx | 2 +- libs/ui/lib/listbox/Listbox.tsx | 2 +- libs/ui/lib/modal/Modal.tsx | 2 +- libs/ui/lib/side-modal/SideModal.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx index 7b6400d8f8..6822e7b11f 100644 --- a/app/components/TopBar.tsx +++ b/app/components/TopBar.tsx @@ -50,7 +50,7 @@ export function TopBar({ children }: { children: React.ReactNode }) {
{/* Height is governed by PageContainer grid */} {/* shrink-0 is needed to prevent getting squished by body content */} -
+
{otherPickers}
diff --git a/libs/ui/lib/listbox/Listbox.tsx b/libs/ui/lib/listbox/Listbox.tsx index e0fae06e52..bf5aff5363 100644 --- a/libs/ui/lib/listbox/Listbox.tsx +++ b/libs/ui/lib/listbox/Listbox.tsx @@ -142,7 +142,7 @@ export const Listbox = ({ {items.map((item) => ( `translate3d(-50%, ${-50 + value}%, 0px)`), diff --git a/libs/ui/lib/side-modal/SideModal.tsx b/libs/ui/lib/side-modal/SideModal.tsx index f546230cf5..d67fb08ff7 100644 --- a/libs/ui/lib/side-modal/SideModal.tsx +++ b/libs/ui/lib/side-modal/SideModal.tsx @@ -71,7 +71,7 @@ export function SideModal({ aria-hidden /> `translate3d(${value}%, 0px, 0px)`), From f79bcb909ea46919b06ba683c05b1480a3d02784 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Fri, 1 Sep 2023 20:20:48 -0700 Subject: [PATCH 3/7] Handle Listbox in SidebarModal --- app/components/form/fields/ListboxField.tsx | 3 +++ app/forms/network-interface-create.tsx | 2 ++ libs/ui/lib/listbox/Listbox.tsx | 6 +++++- libs/ui/styles/components/menu-list.css | 2 +- 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/app/components/form/fields/ListboxField.tsx b/app/components/form/fields/ListboxField.tsx index f6eb9453d4..d511e65142 100644 --- a/app/components/form/fields/ListboxField.tsx +++ b/app/components/form/fields/ListboxField.tsx @@ -31,6 +31,7 @@ export type ListboxFieldProps< items: ListboxItem[] onChange?: (value: string | null | undefined) => void isLoading?: boolean + isInSidebar?: boolean } export function ListboxField< @@ -49,6 +50,7 @@ export function ListboxField< control, onChange, isLoading, + isInSidebar, }: ListboxFieldProps) { // TODO: recreate this logic // validate: (v) => (required && !v ? `${name} is required` : undefined), @@ -78,6 +80,7 @@ export function ListboxField< name={name} hasError={error !== undefined} isLoading={isLoading} + isInSidebar={isInSidebar} /> diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx index 5ad5dbf808..6eca5f0353 100644 --- a/app/forms/network-interface-create.tsx +++ b/app/forms/network-interface-create.tsx @@ -74,6 +74,7 @@ export default function CreateNetworkInterfaceForm({ items={vpcs.map(({ name }) => ({ label: name, value: name }))} required control={form.control} + isInSidebar /> diff --git a/libs/ui/lib/listbox/Listbox.tsx b/libs/ui/lib/listbox/Listbox.tsx index bf5aff5363..4d7757a8d4 100644 --- a/libs/ui/lib/listbox/Listbox.tsx +++ b/libs/ui/lib/listbox/Listbox.tsx @@ -45,6 +45,7 @@ export interface ListboxProps { helpText?: string required?: boolean isLoading?: boolean + isInSidebar?: boolean } export const Listbox = ({ @@ -61,6 +62,7 @@ export const Listbox = ({ required, disabled, isLoading = false, + isInSidebar = false, ...props }: ListboxProps) => { const { refs, floatingStyles } = useFloating({ @@ -142,7 +144,9 @@ export const Listbox = ({ {items.map((item) => ( Date: Fri, 1 Sep 2023 21:10:15 -0700 Subject: [PATCH 4/7] Add z-index for MswBanner --- app/components/MswBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/MswBanner.tsx b/app/components/MswBanner.tsx index 63801a29ac..b7f9d95c62 100644 --- a/app/components/MswBanner.tsx +++ b/app/components/MswBanner.tsx @@ -35,7 +35,7 @@ export function MswBanner() { return ( <> {/* The [&+*]:pt-10 style is to ensure the page container isn't pushed out of screen as it uses 100vh for layout */} -