From 8f08c2ebe8b59b39764203fea1a312fe1221262b Mon Sep 17 00:00:00 2001 From: David Crespo Date: Fri, 23 Feb 2024 16:36:32 -0600 Subject: [PATCH 1/4] move hooks out of ui/index.ts --- app/components/EquivalentCliCommand.tsx | 4 +++- app/components/RefetchIntervalPicker.tsx | 3 ++- app/main.tsx | 2 ++ app/ui/index.ts | 6 ------ app/ui/lib/CopyToClipboard.tsx | 4 +++- 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/app/components/EquivalentCliCommand.tsx b/app/components/EquivalentCliCommand.tsx index 7bedc9ab02..ceadc43dda 100644 --- a/app/components/EquivalentCliCommand.tsx +++ b/app/components/EquivalentCliCommand.tsx @@ -7,7 +7,9 @@ */ import { useState } from 'react' -import { Button, Modal, Success12Icon, useTimeout } from '@oxide/ui' +import { Button, Modal, Success12Icon } from '@oxide/ui' + +import useTimeout from '~/ui/lib/use-timeout' export default function EquivalentCliCommand({ command }: { command: string }) { const [isOpen, setIsOpen] = useState(false) diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx index e22b025690..22ef2292a0 100644 --- a/app/components/RefetchIntervalPicker.tsx +++ b/app/components/RefetchIntervalPicker.tsx @@ -14,10 +14,11 @@ import { Refresh16Icon, SpinnerLoader, Time16Icon, - useInterval, type ListboxItem, } from '@oxide/ui' +import useInterval from '~/ui/lib/use-interval' + const intervalPresets = { Off: undefined, '10s': 10 * 1000, diff --git a/app/main.tsx b/app/main.tsx index 4cc71bf5c5..5547de2b25 100644 --- a/app/main.tsx +++ b/app/main.tsx @@ -21,6 +21,8 @@ import { ReduceMotion } from './hooks' import { startMockAPI } from './msw-mock-api' import { routes } from './routes' +import './ui/styles/index.css' + if (process.env.SHA) { console.info( 'Oxide Web Console version', diff --git a/app/ui/index.ts b/app/ui/index.ts index 3e7d054913..62aeefe428 100644 --- a/app/ui/index.ts +++ b/app/ui/index.ts @@ -5,12 +5,6 @@ * * Copyright Oxide Computer Company */ -import useInterval from './lib/use-interval' -import useTimeout from './lib/use-timeout' - -import './styles/index.css' - -export { useInterval, useTimeout } export * from './lib/ActionMenu' export * from './lib/AuthCodeInput' diff --git a/app/ui/lib/CopyToClipboard.tsx b/app/ui/lib/CopyToClipboard.tsx index 2979d73629..eb3ce50197 100644 --- a/app/ui/lib/CopyToClipboard.tsx +++ b/app/ui/lib/CopyToClipboard.tsx @@ -10,7 +10,9 @@ import { animated, config, useTransition } from '@react-spring/web' import cn from 'classnames' import { useState } from 'react' -import { Copy12Icon, Success12Icon, useTimeout } from '@oxide/ui' +import { Copy12Icon, Success12Icon } from '@oxide/ui' + +import useTimeout from './use-timeout' export const CopyToClipboard = ({ ariaLabel = 'Click to copy this text', From f25eea32e78e1037a6e789fbf9328097919de4b7 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Fri, 23 Feb 2024 16:47:12 -0600 Subject: [PATCH 2/4] get a bunch of less used components out of the UI barrel file --- app/components/ExternalIps.tsx | 3 ++- app/components/MswBanner.tsx | 11 +++-------- app/components/Pagination.tsx | 2 +- app/components/ToastStack.tsx | 3 +-- app/components/form/fields/ErrorMessage.tsx | 2 +- app/components/form/fields/FileField.tsx | 5 ++++- app/components/form/fields/NumberField.tsx | 7 +++++-- app/components/form/fields/RadioField.tsx | 10 +++------- app/components/form/fields/SshKeysField.tsx | 2 +- app/components/form/fields/TextField.tsx | 7 ++++--- app/forms/image-upload.tsx | 2 +- app/forms/instance-create.tsx | 2 +- app/hooks/use-quick-actions.tsx | 2 +- app/layouts/helpers.tsx | 3 +-- app/main.tsx | 5 +++-- app/pages/DeviceAuthVerifyPage.tsx | 3 ++- .../project/instances/instance/tabs/ConnectTab.tsx | 2 +- app/pages/system/UtilizationPage.tsx | 11 ++--------- app/stores/toast.ts | 2 +- app/ui/index.ts | 13 ------------- app/ui/lib/Listbox.tsx | 10 +++------- 21 files changed, 41 insertions(+), 66 deletions(-) diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx index ad96588d9a..f8edac7a2e 100644 --- a/app/components/ExternalIps.tsx +++ b/app/components/ExternalIps.tsx @@ -8,9 +8,10 @@ import { useApiQuery } from '@oxide/api' import { EmptyCell, SkeletonCell } from '@oxide/table' -import { CopyToClipboard } from '@oxide/ui' import { intersperse } from '@oxide/util' +import { CopyToClipboard } from '~/ui/lib/CopyToClipboard' + type InstanceSelector = { project: string; instance: string } export function ExternalIps({ project, instance }: InstanceSelector) { diff --git a/app/components/MswBanner.tsx b/app/components/MswBanner.tsx index a23dd71c6a..8e628884cd 100644 --- a/app/components/MswBanner.tsx +++ b/app/components/MswBanner.tsx @@ -7,14 +7,9 @@ */ import { useState, type ReactNode } from 'react' -import { - Button, - Info16Icon, - Modal, - ModalLink, - ModalLinks, - NextArrow12Icon, -} from '@oxide/ui' +import { Button, Info16Icon, Modal, NextArrow12Icon } from '@oxide/ui' + +import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks' function ExternalLink({ href, children }: { href: string; children: ReactNode }) { return ( diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx index c0392ba304..3a09c77bc3 100644 --- a/app/components/Pagination.tsx +++ b/app/components/Pagination.tsx @@ -10,7 +10,7 @@ import tunnel from 'tunnel-rat' import { Pagination as UIPagination, type PaginationProps as UIPaginationProps, -} from '@oxide/ui' +} from '~/ui/lib/Pagination' const Tunnel = tunnel('pagination') diff --git a/app/components/ToastStack.tsx b/app/components/ToastStack.tsx index d98a5ac746..66b36dc069 100644 --- a/app/components/ToastStack.tsx +++ b/app/components/ToastStack.tsx @@ -7,8 +7,7 @@ */ import { animated, useTransition } from '@react-spring/web' -import { Toast } from '@oxide/ui' - +import { Toast } from '~/ui/lib/Toast' import { useToastStore } from 'app/stores/toast' export function ToastStack() { diff --git a/app/components/form/fields/ErrorMessage.tsx b/app/components/form/fields/ErrorMessage.tsx index ed07f0d0c0..f804f46189 100644 --- a/app/components/form/fields/ErrorMessage.tsx +++ b/app/components/form/fields/ErrorMessage.tsx @@ -7,7 +7,7 @@ */ import type { FieldError } from 'react-hook-form' -import { TextInputError } from '@oxide/ui' +import { TextInputError } from '~/ui/lib/TextInput' type ErrorMessageProps = { error: FieldError | undefined diff --git a/app/components/form/fields/FileField.tsx b/app/components/form/fields/FileField.tsx index 389ac99e57..b4427a2cb2 100644 --- a/app/components/form/fields/FileField.tsx +++ b/app/components/form/fields/FileField.tsx @@ -7,7 +7,10 @@ */ import { Controller, type Control, type FieldPath, type FieldValues } from 'react-hook-form' -import { FieldLabel, FileInput, TextInputHint } from '@oxide/ui' +import { FieldLabel } from '@oxide/ui' + +import { FileInput } from '~/ui/lib/FileInput' +import { TextInputHint } from '~/ui/lib/TextInput' import { ErrorMessage } from './ErrorMessage' diff --git a/app/components/form/fields/NumberField.tsx b/app/components/form/fields/NumberField.tsx index ddc1cd8142..4ecf3b59cb 100644 --- a/app/components/form/fields/NumberField.tsx +++ b/app/components/form/fields/NumberField.tsx @@ -9,9 +9,12 @@ import cn from 'classnames' import { useId } from 'react' import { Controller, type FieldPathByValue, type FieldValues } from 'react-hook-form' -import { FieldLabel, TextInputHint, NumberInput as UINumberField } from '@oxide/ui' +import { FieldLabel } from '@oxide/ui' import { capitalize } from '@oxide/util' +import { NumberInput } from '~/ui/lib/NumberInput' +import { TextInputHint } from '~/ui/lib/TextInput' + import { ErrorMessage } from './ErrorMessage' import type { TextFieldProps } from './TextField' @@ -83,7 +86,7 @@ export const NumberFieldInner = < render={({ field, fieldState: { error } }) => { return ( <> - , diff --git a/app/components/form/fields/SshKeysField.tsx b/app/components/form/fields/SshKeysField.tsx index f7825b3c54..fbc84c0a96 100644 --- a/app/components/form/fields/SshKeysField.tsx +++ b/app/components/form/fields/SshKeysField.tsx @@ -17,9 +17,9 @@ import { FieldLabel, Key16Icon, Message, - TextInputHint, } from '@oxide/ui' +import { TextInputHint } from '~/ui/lib/TextInput' import type { InstanceCreateInput } from 'app/forms/instance-create' import { CreateSSHKeySideModalForm } from 'app/forms/ssh-key-create' diff --git a/app/components/form/fields/TextField.tsx b/app/components/form/fields/TextField.tsx index 4d561c8585..54ce0df1be 100644 --- a/app/components/form/fields/TextField.tsx +++ b/app/components/form/fields/TextField.tsx @@ -16,14 +16,15 @@ import { type Validate, } from 'react-hook-form' +import { FieldLabel } from '@oxide/ui' +import { capitalize } from '@oxide/util' + import { - FieldLabel, TextInputHint, TextInput as UITextField, type TextAreaProps as UITextAreaProps, type TextInputBaseProps as UITextFieldProps, -} from '@oxide/ui' -import { capitalize } from '@oxide/util' +} from '~/ui/lib/TextInput' import { ErrorMessage } from './ErrorMessage' diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx index fdcc62cb2c..89b95b7ff5 100644 --- a/app/forms/image-upload.tsx +++ b/app/forms/image-upload.tsx @@ -24,13 +24,13 @@ import { Error12Icon, Message, Modal, - Progress, Spinner, Success12Icon, Unauthorized12Icon, } from '@oxide/ui' import { GiB, invariant, KiB } from '@oxide/util' +import { Progress } from '~/ui/lib/Progress' import { DescriptionField, FileField, diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx index 28ef80a543..f8aa249bc4 100644 --- a/app/forms/instance-create.tsx +++ b/app/forms/instance-create.tsx @@ -29,10 +29,10 @@ import { Message, RadioCard, Tabs, - TextInputHint, } from '@oxide/ui' import { GiB, invariant } from '@oxide/util' +import { TextInputHint } from '~/ui/lib/TextInput' import { AccordionItem } from 'app/components/AccordionItem' import { CheckboxField, diff --git a/app/hooks/use-quick-actions.tsx b/app/hooks/use-quick-actions.tsx index 066aac22a9..340d4482da 100644 --- a/app/hooks/use-quick-actions.tsx +++ b/app/hooks/use-quick-actions.tsx @@ -9,9 +9,9 @@ import { useEffect, useMemo } from 'react' import { useLocation, useNavigate } from 'react-router-dom' import { create } from 'zustand' -import { ActionMenu, type QuickActionItem } from '@oxide/ui' import { invariant } from '@oxide/util' +import { ActionMenu, type QuickActionItem } from '~/ui/lib/ActionMenu' import { useCurrentUser } from 'app/layouts/AuthenticatedLayout' import { pb } from 'app/util/path-builder' diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx index 972910c4ee..80e0d3793b 100644 --- a/app/layouts/helpers.tsx +++ b/app/layouts/helpers.tsx @@ -8,9 +8,8 @@ import { useRef } from 'react' import { Outlet } from 'react-router-dom' -import { SkipLinkTarget } from '@oxide/ui' - import { Pagination } from '~/components/Pagination' +import { SkipLinkTarget } from '~/ui/lib/SkipLink' import { classed } from '~/util/classed' import { PageActionsTarget } from 'app/components/PageActions' import { useScrollRestoration } from 'app/hooks/use-scroll-restoration' diff --git a/app/main.tsx b/app/main.tsx index 5547de2b25..07583dd030 100644 --- a/app/main.tsx +++ b/app/main.tsx @@ -12,7 +12,6 @@ import { createRoot } from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import { queryClient } from '@oxide/api' -import { SkipLink } from '@oxide/ui' import { ConfirmActionModal } from './components/ConfirmActionModal' import { ErrorBoundary } from './components/ErrorBoundary' @@ -21,7 +20,9 @@ import { ReduceMotion } from './hooks' import { startMockAPI } from './msw-mock-api' import { routes } from './routes' -import './ui/styles/index.css' +import '~/ui/styles/index.css' + +import { SkipLink } from '~/ui/lib/SkipLink' if (process.env.SHA) { console.info( diff --git a/app/pages/DeviceAuthVerifyPage.tsx b/app/pages/DeviceAuthVerifyPage.tsx index 945e13accc..3872987fe2 100644 --- a/app/pages/DeviceAuthVerifyPage.tsx +++ b/app/pages/DeviceAuthVerifyPage.tsx @@ -9,8 +9,9 @@ import { useState } from 'react' import { useNavigate } from 'react-router-dom' import { useApiMutation } from '@oxide/api' -import { AuthCodeInput, Button, Warning12Icon } from '@oxide/ui' +import { Button, Warning12Icon } from '@oxide/ui' +import { AuthCodeInput } from '~/ui/lib/AuthCodeInput' import { pb } from 'app/util/path-builder' const DASH_AFTER_IDXS = [3] diff --git a/app/pages/project/instances/instance/tabs/ConnectTab.tsx b/app/pages/project/instances/instance/tabs/ConnectTab.tsx index bf3278c1ee..25ecf8ce72 100644 --- a/app/pages/project/instances/instance/tabs/ConnectTab.tsx +++ b/app/pages/project/instances/instance/tabs/ConnectTab.tsx @@ -5,8 +5,8 @@ * * Copyright Oxide Computer Company */ -import { SettingsGroup } from '@oxide/ui' +import { SettingsGroup } from '~/ui/lib/SettingsGroup' import { useInstanceSelector } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx index 6c60720a34..ed97d4f27a 100644 --- a/app/pages/system/UtilizationPage.tsx +++ b/app/pages/system/UtilizationPage.tsx @@ -15,17 +15,10 @@ import { totalUtilization, usePrefetchedApiQuery, } from '@oxide/api' -import { - Listbox, - Metrics24Icon, - PageHeader, - PageTitle, - ResourceMeter, - Table, - Tabs, -} from '@oxide/ui' +import { Listbox, Metrics24Icon, PageHeader, PageTitle, Table, Tabs } from '@oxide/ui' import { bytesToGiB, bytesToTiB, round } from '@oxide/util' +import { ResourceMeter } from '~/ui/lib/ResourceMeter' import { CapacityBars } from 'app/components/CapacityBars' import { useDateTimeRangePicker } from 'app/components/form' import { QueryParamTabs } from 'app/components/QueryParamTabs' diff --git a/app/stores/toast.ts b/app/stores/toast.ts index 68326d750a..1168f2ec9f 100644 --- a/app/stores/toast.ts +++ b/app/stores/toast.ts @@ -8,7 +8,7 @@ import { v4 as uuid } from 'uuid' import { create } from 'zustand' -import type { ToastProps } from '@oxide/ui' +import type { ToastProps } from '~/ui/lib/Toast' type Toast = { id: string diff --git a/app/ui/index.ts b/app/ui/index.ts index 62aeefe428..619ea2aa62 100644 --- a/app/ui/index.ts +++ b/app/ui/index.ts @@ -6,16 +6,12 @@ * Copyright Oxide Computer Company */ -export * from './lib/ActionMenu' -export * from './lib/AuthCodeInput' export * from './lib/Badge' export * from './lib/Button' export * from './lib/Checkbox' -export * from './lib/CopyToClipboard' export * from './lib/DateRangePicker' export * from './lib/Divider' export * from './lib/DropdownMenu' -export * from './lib/FileInput' export * from './lib/EmptyMessage' export * from './lib/FieldLabel' @@ -24,24 +20,15 @@ export * from './lib/Message' export * from './lib/Listbox' export * from './lib/Message' export * from './lib/Modal' -export * from './lib/ModalLinks' export * as MiniTable from './lib/MiniTable' -export * from './lib/NumberInput' export * from './lib/PageHeader' -export * from './lib/Pagination' -export * from './lib/Progress' export * from './lib/PropertiesTable' export * from './lib/RadioGroup' export * from './lib/Radio' -export * from './lib/ResourceMeter' -export * from './lib/SettingsGroup' export * from './lib/SideModal' -export * from './lib/SkipLink' export * from './lib/Spinner' export * from './lib/Table' export * from './lib/Tabs' -export * from './lib/TextInput' -export * from './lib/Toast' export * from './lib/Tooltip' export * from './lib/Truncate' export * from './util/wrap' diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx index 945067d668..35f8c37128 100644 --- a/app/ui/lib/Listbox.tsx +++ b/app/ui/lib/Listbox.tsx @@ -17,13 +17,9 @@ import { Listbox as Select } from '@headlessui/react' import cn from 'classnames' import type { ReactNode } from 'react' -import { - FieldLabel, - SelectArrows6Icon, - SpinnerLoader, - TextInputHint, - usePopoverZIndex, -} from '@oxide/ui' +import { FieldLabel, SelectArrows6Icon, SpinnerLoader, usePopoverZIndex } from '@oxide/ui' + +import { TextInputHint } from './TextInput' export type ListboxItem = { value: Value From d4d1e6e090926c9d2ad8139368b1078b43d7c99a Mon Sep 17 00:00:00 2001 From: David Crespo Date: Fri, 23 Feb 2024 17:07:35 -0600 Subject: [PATCH 3/4] get rid of the app/forms barrel --- app/components/form/fields/TlsCertsField.tsx | 6 +++- app/components/form/index.ts | 28 ---------------- app/forms/disk-attach.tsx | 3 +- app/forms/disk-create.tsx | 16 ++++------ app/forms/firewall-rules-create.tsx | 18 +++++------ app/forms/firewall-rules-edit.tsx | 2 +- app/forms/floating-ip-create.tsx | 12 +++---- app/forms/idp/create.tsx | 12 +++---- app/forms/idp/edit.tsx | 5 ++- app/forms/idp/shared.tsx | 3 +- app/forms/image-edit.tsx | 5 ++- app/forms/image-from-snapshot.tsx | 5 ++- app/forms/image-upload.tsx | 14 ++++---- app/forms/instance-create.tsx | 32 +++++++++---------- app/forms/ip-pool-create.tsx | 4 ++- app/forms/ip-pool-edit.tsx | 4 ++- app/forms/ip-pool-range-add.tsx | 3 +- app/forms/network-interface-create.tsx | 14 ++++---- app/forms/network-interface-edit.tsx | 4 ++- app/forms/project-access.tsx | 3 +- app/forms/project-create.tsx | 4 ++- app/forms/project-edit.tsx | 4 ++- app/forms/silo-access.tsx | 3 +- app/forms/silo-create.tsx | 18 +++++------ app/forms/snapshot-create.tsx | 10 +++--- app/forms/ssh-key-create.tsx | 5 ++- app/forms/subnet-create.tsx | 5 ++- app/forms/subnet-edit.tsx | 4 ++- app/forms/vpc-create.tsx | 5 ++- app/forms/vpc-edit.tsx | 4 ++- app/pages/LoginPage.tsx | 2 +- app/pages/SiloUtilizationPage.tsx | 2 +- .../instances/instance/tabs/MetricsTab.tsx | 2 +- app/pages/settings/ProfilePage.tsx | 3 +- app/pages/system/SiloImagesPage.tsx | 3 +- app/pages/system/UtilizationPage.tsx | 2 +- app/pages/system/networking/IpPoolPage.tsx | 2 +- app/pages/system/silos/SiloIpPoolsTab.tsx | 2 +- 38 files changed, 136 insertions(+), 137 deletions(-) delete mode 100644 app/components/form/index.ts diff --git a/app/components/form/fields/TlsCertsField.tsx b/app/components/form/fields/TlsCertsField.tsx index 504e4e7896..848daa2bb7 100644 --- a/app/components/form/fields/TlsCertsField.tsx +++ b/app/components/form/fields/TlsCertsField.tsx @@ -12,10 +12,14 @@ import type { Merge } from 'type-fest' import type { CertificateCreate } from '@oxide/api' import { Button, Error16Icon, FieldLabel, MiniTable, Modal } from '@oxide/ui' -import { DescriptionField, FileField, TextField, validateName } from 'app/components/form' import type { SiloCreateFormValues } from 'app/forms/silo-create' import { useForm } from 'app/hooks' +import { DescriptionField } from './DescriptionField' +import { FileField } from './FileField' +import { validateName } from './NameField' +import { TextField } from './TextField' + export function TlsCertsField({ control }: { control: Control }) { const [showAddCert, setShowAddCert] = useState(false) diff --git a/app/components/form/index.ts b/app/components/form/index.ts deleted file mode 100644 index 9994821850..0000000000 --- a/app/components/form/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * 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 - */ - -export * from './Form' -export * from './FullPageForm' -export * from './SideModalForm' - -export * from './fields/CheckboxField' -export * from './fields/DateTimeRangePicker' -export * from './fields/DescriptionField' -export * from './fields/DiskSizeField' -export * from './fields/DisksTableField' -export * from './fields/FileField' -export * from './fields/ImageSelectField' -export * from './fields/ListboxField' -export * from './fields/NameField' -export * from './fields/NetworkInterfaceField' -export * from './fields/NumberField' -export * from './fields/RadioField' -export * from './fields/SshKeysField' -export * from './fields/SubnetListbox' -export * from './fields/TextField' -export * from './fields/TlsCertsField' diff --git a/app/forms/disk-attach.tsx b/app/forms/disk-attach.tsx index 74ac546c1a..da8380af8b 100644 --- a/app/forms/disk-attach.tsx +++ b/app/forms/disk-attach.tsx @@ -7,7 +7,8 @@ */ import { useApiQuery, type ApiError } from '@oxide/api' -import { ListboxField, SideModalForm } from 'app/components/form' +import { ListboxField } from '~/components/form/fields/ListboxField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useProjectSelector } from 'app/hooks' const defaultValues = { name: '' } diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx index 536998043d..1a8d3fc1da 100644 --- a/app/forms/disk-create.tsx +++ b/app/forms/disk-create.tsx @@ -23,15 +23,13 @@ import { import { FieldLabel, FormDivider, Radio, RadioGroup } from '@oxide/ui' import { bytesToGiB, GiB } from '@oxide/util' -import { - DescriptionField, - DiskSizeField, - ListboxField, - NameField, - RadioField, - SideModalForm, - toListboxItem, -} from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { DiskSizeField } from '~/components/form/fields/DiskSizeField' +import { toListboxItem } from '~/components/form/fields/ImageSelectField' +import { ListboxField } from '~/components/form/fields/ListboxField' +import { NameField } from '~/components/form/fields/NameField' +import { RadioField } from '~/components/form/fields/RadioField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useProjectSelector, useToast } from 'app/hooks' const blankDiskSource: DiskSource = { diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx index 30dbaea64a..a144b968fc 100644 --- a/app/forms/firewall-rules-create.tsx +++ b/app/forms/firewall-rules-create.tsx @@ -20,16 +20,14 @@ import { } from '@oxide/api' import { Badge, Button, Error16Icon, FormDivider, MiniTable } from '@oxide/ui' -import { - CheckboxField, - DescriptionField, - ListboxField, - NameField, - NumberField, - RadioField, - SideModalForm, - TextField, -} from 'app/components/form' +import { CheckboxField } from '~/components/form/fields/CheckboxField' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { ListboxField } from '~/components/form/fields/ListboxField' +import { NameField } from '~/components/form/fields/NameField' +import { NumberField } from '~/components/form/fields/NumberField' +import { RadioField } from '~/components/form/fields/RadioField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useVpcSelector } from 'app/hooks' export type FirewallRuleValues = { diff --git a/app/forms/firewall-rules-edit.tsx b/app/forms/firewall-rules-edit.tsx index a523397433..bc4d04acb8 100644 --- a/app/forms/firewall-rules-edit.tsx +++ b/app/forms/firewall-rules-edit.tsx @@ -12,7 +12,7 @@ import { type VpcFirewallRule, } from '@oxide/api' -import { SideModalForm } from 'app/components/form' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useVpcSelector } from 'app/hooks' import { diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx index 365f2f07c6..d6c3cb3bff 100644 --- a/app/forms/floating-ip-create.tsx +++ b/app/forms/floating-ip-create.tsx @@ -20,14 +20,12 @@ import { import { Badge, Message } from '@oxide/ui' import { validateIp } from '@oxide/util' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { ListboxField } from '~/components/form/fields/ListboxField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { AccordionItem } from 'app/components/AccordionItem' -import { - DescriptionField, - ListboxField, - NameField, - SideModalForm, - TextField, -} from 'app/components/form' import { useForm, useProjectSelector, useToast } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx index f56135a862..4abc00dfa4 100644 --- a/app/forms/idp/create.tsx +++ b/app/forms/idp/create.tsx @@ -9,13 +9,11 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient } from '@oxide/api' -import { - DescriptionField, - FileField, - NameField, - SideModalForm, - TextField, -} from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { FileField } from '~/components/form/fields/FileField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useSiloSelector, useToast } from 'app/hooks' import { readBlobAsBase64 } from 'app/util/file' import { pb } from 'app/util/path-builder' diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx index 4ef6de5fd2..f5e183526d 100644 --- a/app/forms/idp/edit.tsx +++ b/app/forms/idp/edit.tsx @@ -11,7 +11,10 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api' import { Access16Icon, PropertiesTable, ResourceLabel, Truncate } from '@oxide/ui' import { formatDateTime } from '@oxide/util' -import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { getIdpSelector, useForm, useIdpSelector } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/idp/shared.tsx b/app/forms/idp/shared.tsx index 4ba93cd5fb..3540070cbe 100644 --- a/app/forms/idp/shared.tsx +++ b/app/forms/idp/shared.tsx @@ -11,7 +11,8 @@ import type { Merge } from 'type-fest' import type { IdpMetadataSource, SamlIdentityProviderCreate } from '@oxide/api' import { Radio, RadioGroup } from '@oxide/ui' -import { FileField, TextField } from 'app/components/form' +import { FileField } from '~/components/form/fields/FileField' +import { TextField } from '~/components/form/fields/TextField' export type IdpCreateFormValues = { type: 'saml' } & Merge< SamlIdentityProviderCreate, diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx index 383a5370dc..ebbcf39895 100644 --- a/app/forms/image-edit.tsx +++ b/app/forms/image-edit.tsx @@ -11,7 +11,10 @@ import { apiQueryClient, usePrefetchedApiQuery, type Image } from '@oxide/api' import { Images16Icon, PropertiesTable, ResourceLabel, Truncate } from '@oxide/ui' import { bytesToGiB, formatDateTime } from '@oxide/util' -import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { getProjectImageSelector, getSiloImageSelector, diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx index 8c10dd3eba..d4732e0e9c 100644 --- a/app/forms/image-from-snapshot.tsx +++ b/app/forms/image-from-snapshot.tsx @@ -17,7 +17,10 @@ import { } from '@oxide/api' import { PropertiesTable } from '@oxide/ui' -import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { getProjectSnapshotSelector, useForm, useProjectSnapshotSelector } from 'app/hooks' import { addToast } from 'app/stores/toast' import { pb } from 'app/util/path-builder' diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx index 89b95b7ff5..cd94a367be 100644 --- a/app/forms/image-upload.tsx +++ b/app/forms/image-upload.tsx @@ -30,15 +30,13 @@ import { } from '@oxide/ui' import { GiB, invariant, KiB } from '@oxide/util' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { FileField } from '~/components/form/fields/FileField' +import { NameField } from '~/components/form/fields/NameField' +import { RadioField } from '~/components/form/fields/RadioField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { Progress } from '~/ui/lib/Progress' -import { - DescriptionField, - FileField, - NameField, - RadioField, - SideModalForm, - TextField, -} from 'app/components/form' import { useForm, useProjectSelector } from 'app/hooks' import { readBlobAsBase64 } from 'app/util/file' import { pb } from 'app/util/path-builder' diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx index f8aa249bc4..49dd29ca5b 100644 --- a/app/forms/instance-create.tsx +++ b/app/forms/instance-create.tsx @@ -32,25 +32,25 @@ import { } from '@oxide/ui' import { GiB, invariant } from '@oxide/util' -import { TextInputHint } from '~/ui/lib/TextInput' -import { AccordionItem } from 'app/components/AccordionItem' +import { CheckboxField } from '~/components/form/fields/CheckboxField' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { DiskSizeField } from '~/components/form/fields/DiskSizeField' import { - CheckboxField, - DescriptionField, - DiskSizeField, DisksTableField, - FileField, - Form, - FullPageForm, - ImageSelectField, - NameField, - NetworkInterfaceField, - NumberField, - RadioFieldDyn, - SshKeysField, - TextField, type DiskTableItem, -} from 'app/components/form' +} from '~/components/form/fields/DisksTableField' +import { FileField } from '~/components/form/fields/FileField' +import { ImageSelectField } from '~/components/form/fields/ImageSelectField' +import { NameField } from '~/components/form/fields/NameField' +import { NetworkInterfaceField } from '~/components/form/fields/NetworkInterfaceField' +import { NumberField } from '~/components/form/fields/NumberField' +import { RadioFieldDyn } from '~/components/form/fields/RadioField' +import { SshKeysField } from '~/components/form/fields/SshKeysField' +import { TextField } from '~/components/form/fields/TextField' +import { Form } from '~/components/form/Form' +import { FullPageForm } from '~/components/form/FullPageForm' +import { TextInputHint } from '~/ui/lib/TextInput' +import { AccordionItem } from 'app/components/AccordionItem' import { getProjectSelector, useForm, useProjectSelector, useToast } from 'app/hooks' import { readBlobAsBase64 } from 'app/util/file' import { links } from 'app/util/links' diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx index 41edaa1f0c..94c761b91b 100644 --- a/app/forms/ip-pool-create.tsx +++ b/app/forms/ip-pool-create.tsx @@ -9,7 +9,9 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient, type IpPoolCreate } from '@oxide/api' -import { DescriptionField, NameField, SideModalForm } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm } from 'app/hooks' import { addToast } from 'app/stores/toast' import { pb } from 'app/util/path-builder' diff --git a/app/forms/ip-pool-edit.tsx b/app/forms/ip-pool-edit.tsx index 9a318e45c2..9d8dbfc8aa 100644 --- a/app/forms/ip-pool-edit.tsx +++ b/app/forms/ip-pool-edit.tsx @@ -14,7 +14,9 @@ import { usePrefetchedApiQuery, } from '@oxide/api' -import { DescriptionField, NameField, SideModalForm } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { getIpPoolSelector, useForm, useIpPoolSelector, useToast } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/ip-pool-range-add.tsx b/app/forms/ip-pool-range-add.tsx index a32671fbfd..32c8a820b9 100644 --- a/app/forms/ip-pool-range-add.tsx +++ b/app/forms/ip-pool-range-add.tsx @@ -11,7 +11,8 @@ import { useApiMutation, useApiQueryClient, type IpRange } from '@oxide/api' import { Message } from '@oxide/ui' import { validateIp } from '@oxide/util' -import { SideModalForm, TextField } from 'app/components/form' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useIpPoolSelector } from 'app/hooks' import { addToast } from 'app/stores/toast' import { pb } from 'app/util/path-builder' diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx index a459c9aa84..76c3ac3e25 100644 --- a/app/forms/network-interface-create.tsx +++ b/app/forms/network-interface-create.tsx @@ -10,14 +10,12 @@ import { useMemo } from 'react' import { useApiQuery, type ApiError, type InstanceNetworkInterfaceCreate } from '@oxide/api' import { FormDivider } from '@oxide/ui' -import { - DescriptionField, - ListboxField, - NameField, - SideModalForm, - SubnetListbox, - TextField, -} from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { ListboxField } from '~/components/form/fields/ListboxField' +import { NameField } from '~/components/form/fields/NameField' +import { SubnetListbox } from '~/components/form/fields/SubnetListbox' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useProjectSelector } from 'app/hooks' const defaultValues: InstanceNetworkInterfaceCreate = { diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx index da037192e7..c0a490d3c8 100644 --- a/app/forms/network-interface-edit.tsx +++ b/app/forms/network-interface-edit.tsx @@ -12,7 +12,9 @@ import { } from '@oxide/api' import { pick } from '@oxide/util' -import { DescriptionField, NameField, SideModalForm } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useInstanceSelector } from 'app/hooks' type EditNetworkInterfaceFormProps = { diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx index 06ac70b5a0..18d0bf0c9b 100644 --- a/app/forms/project-access.tsx +++ b/app/forms/project-access.tsx @@ -12,7 +12,8 @@ import { useApiQueryClient, } from '@oxide/api' -import { ListboxField, SideModalForm } from 'app/components/form' +import { ListboxField } from 'app/components/form/fields/ListboxField' +import { SideModalForm } from 'app/components/form/SideModalForm' import { useForm, useProjectSelector } from 'app/hooks' import { diff --git a/app/forms/project-create.tsx b/app/forms/project-create.tsx index 5fb0d1c21b..368e715960 100644 --- a/app/forms/project-create.tsx +++ b/app/forms/project-create.tsx @@ -9,7 +9,9 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient, type ProjectCreate } from '@oxide/api' -import { DescriptionField, NameField, SideModalForm } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm } from 'app/hooks' import { addToast } from 'app/stores/toast' import { pb } from 'app/util/path-builder' diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx index 641de38a67..1659152eba 100644 --- a/app/forms/project-edit.tsx +++ b/app/forms/project-edit.tsx @@ -14,7 +14,9 @@ import { usePrefetchedApiQuery, } from '@oxide/api' -import { DescriptionField, NameField, SideModalForm } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx index cb509389f7..f93636fc99 100644 --- a/app/forms/silo-access.tsx +++ b/app/forms/silo-access.tsx @@ -12,7 +12,8 @@ import { useApiQueryClient, } from '@oxide/api' -import { ListboxField, SideModalForm } from 'app/components/form' +import { ListboxField } from '~/components/form/fields/ListboxField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm } from 'app/hooks' import { diff --git a/app/forms/silo-create.tsx b/app/forms/silo-create.tsx index 7cde774aba..c4e7e76370 100644 --- a/app/forms/silo-create.tsx +++ b/app/forms/silo-create.tsx @@ -10,16 +10,14 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient, type SiloCreate } from '@oxide/api' import { FormDivider } from '@oxide/ui' -import { - CheckboxField, - DescriptionField, - NameField, - RadioField, - SideModalForm, - TextField, - TlsCertsField, -} from 'app/components/form' -import { NumberField } from 'app/components/form/fields/NumberField' +import { CheckboxField } from '~/components/form/fields/CheckboxField' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { NumberField } from '~/components/form/fields/NumberField' +import { RadioField } from '~/components/form/fields/RadioField' +import { TextField } from '~/components/form/fields/TextField' +import { TlsCertsField } from '~/components/form/fields/TlsCertsField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useToast } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/snapshot-create.tsx b/app/forms/snapshot-create.tsx index 3c3d6f2220..19db3d11bf 100644 --- a/app/forms/snapshot-create.tsx +++ b/app/forms/snapshot-create.tsx @@ -16,12 +16,10 @@ import { type SnapshotCreate, } from '@oxide/api' -import { - DescriptionField, - ListboxField, - NameField, - SideModalForm, -} from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { ListboxField } from '~/components/form/fields/ListboxField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useProjectSelector, useToast } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/ssh-key-create.tsx b/app/forms/ssh-key-create.tsx index 4b930ce825..b734570e1d 100644 --- a/app/forms/ssh-key-create.tsx +++ b/app/forms/ssh-key-create.tsx @@ -9,7 +9,10 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient, type SshKeyCreate } from '@oxide/api' -import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx index 59c3a972ca..9860827073 100644 --- a/app/forms/subnet-create.tsx +++ b/app/forms/subnet-create.tsx @@ -8,7 +8,10 @@ import { useApiMutation, useApiQueryClient, type VpcSubnetCreate } from '@oxide/api' import { FormDivider } from '@oxide/ui' -import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useVpcSelector } from 'app/hooks' const defaultValues: VpcSubnetCreate = { diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx index 25762e1d48..e98d5af5a2 100644 --- a/app/forms/subnet-edit.tsx +++ b/app/forms/subnet-edit.tsx @@ -8,7 +8,9 @@ import { useApiMutation, useApiQueryClient, type VpcSubnet } from '@oxide/api' import { pick } from '@oxide/util' -import { DescriptionField, NameField, SideModalForm } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useVpcSelector } from 'app/hooks' type EditSubnetFormProps = { diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx index 64362dd26f..c52fe7e3b1 100644 --- a/app/forms/vpc-create.tsx +++ b/app/forms/vpc-create.tsx @@ -9,7 +9,10 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient, type VpcCreate } from '@oxide/api' -import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { TextField } from '~/components/form/fields/TextField' +import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useProjectSelector, useToast } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx index d2e61abead..c5af5e9f9b 100644 --- a/app/forms/vpc-edit.tsx +++ b/app/forms/vpc-edit.tsx @@ -14,7 +14,9 @@ import { usePrefetchedApiQuery, } from '@oxide/api' -import { DescriptionField, NameField, SideModalForm } from 'app/components/form' +import { DescriptionField } from '~/components/form/fields/DescriptionField' +import { NameField } from '~/components/form/fields/NameField' +import { SideModalForm } from '~/components/form/SideModalForm' import { getVpcSelector, useForm, useToast, useVpcSelector } from 'app/hooks' import { pb } from 'app/util/path-builder' diff --git a/app/pages/LoginPage.tsx b/app/pages/LoginPage.tsx index 59bfc5c2d7..c5b027915a 100644 --- a/app/pages/LoginPage.tsx +++ b/app/pages/LoginPage.tsx @@ -11,7 +11,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom' import { useApiMutation, type UsernamePasswordCredentials } from '@oxide/api' import { Button, Identicon } from '@oxide/ui' -import { TextFieldInner } from 'app/components/form' +import { TextFieldInner } from '~/components/form/fields/TextField' import 'app/components/login-page.css' diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx index 02874967bf..ad06b3130b 100644 --- a/app/pages/SiloUtilizationPage.tsx +++ b/app/pages/SiloUtilizationPage.tsx @@ -13,8 +13,8 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api' import { Divider, Listbox, Metrics24Icon, PageHeader, PageTitle } from '@oxide/ui' import { bytesToGiB, bytesToTiB } from '@oxide/util' +import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker' import { CapacityBars } from 'app/components/CapacityBars' -import { useDateTimeRangePicker } from 'app/components/form' import { useIntervalPicker } from 'app/components/RefetchIntervalPicker' import { SiloMetric } from 'app/components/SystemMetric' import { useCurrentUser } from 'app/layouts/AuthenticatedLayout' diff --git a/app/pages/project/instances/instance/tabs/MetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab.tsx index 5d39592881..7c3ef2675e 100644 --- a/app/pages/project/instances/instance/tabs/MetricsTab.tsx +++ b/app/pages/project/instances/instance/tabs/MetricsTab.tsx @@ -17,7 +17,7 @@ import { } from '@oxide/api' import { EmptyMessage, Listbox, Spinner, Storage24Icon, TableEmptyBox } from '@oxide/ui' -import { useDateTimeRangePicker } from 'app/components/form' +import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker' import { getInstanceSelector, useInstanceSelector } from 'app/hooks' const TimeSeriesChart = React.lazy(() => import('app/components/TimeSeriesChart')) diff --git a/app/pages/settings/ProfilePage.tsx b/app/pages/settings/ProfilePage.tsx index effdf7ddde..4b4b9c2897 100644 --- a/app/pages/settings/ProfilePage.tsx +++ b/app/pages/settings/ProfilePage.tsx @@ -9,7 +9,8 @@ import type { Group } from '@oxide/api' import { createColumnHelper, Table, useReactTable } from '@oxide/table' import { Settings24Icon } from '@oxide/ui' -import { FullPageForm, TextField } from 'app/components/form' +import { TextField } from '~/components/form/fields/TextField' +import { FullPageForm } from '~/components/form/FullPageForm' import { useForm } from 'app/hooks' import { useCurrentUser } from 'app/layouts/AuthenticatedLayout' diff --git a/app/pages/system/SiloImagesPage.tsx b/app/pages/system/SiloImagesPage.tsx index e7bcbcef14..451863cb8a 100644 --- a/app/pages/system/SiloImagesPage.tsx +++ b/app/pages/system/SiloImagesPage.tsx @@ -28,7 +28,8 @@ import { TableActions, } from '@oxide/ui' -import { ListboxField, toListboxItem } from 'app/components/form' +import { toListboxItem } from '~/components/form/fields/ImageSelectField' +import { ListboxField } from '~/components/form/fields/ListboxField' import { useForm, useToast } from 'app/hooks' import { confirmDelete } from 'app/stores/confirm-delete' import { addToast } from 'app/stores/toast' diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx index ed97d4f27a..82c1fc4d5f 100644 --- a/app/pages/system/UtilizationPage.tsx +++ b/app/pages/system/UtilizationPage.tsx @@ -18,9 +18,9 @@ import { import { Listbox, Metrics24Icon, PageHeader, PageTitle, Table, Tabs } from '@oxide/ui' import { bytesToGiB, bytesToTiB, round } from '@oxide/util' +import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePicker' import { ResourceMeter } from '~/ui/lib/ResourceMeter' import { CapacityBars } from 'app/components/CapacityBars' -import { useDateTimeRangePicker } from 'app/components/form' import { QueryParamTabs } from 'app/components/QueryParamTabs' import { useIntervalPicker } from 'app/components/RefetchIntervalPicker' import { SystemMetric } from 'app/components/SystemMetric' diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx index eec97cc465..bd97068993 100644 --- a/app/pages/system/networking/IpPoolPage.tsx +++ b/app/pages/system/networking/IpPoolPage.tsx @@ -39,8 +39,8 @@ import { Tabs, } from '@oxide/ui' +import { ListboxField } from '~/components/form/fields/ListboxField' import { ExternalLink } from 'app/components/ExternalLink' -import { ListboxField } from 'app/components/form' import { HL } from 'app/components/HL' import { QueryParamTabs } from 'app/components/QueryParamTabs' import { getIpPoolSelector, useForm, useIpPoolSelector } from 'app/hooks' diff --git a/app/pages/system/silos/SiloIpPoolsTab.tsx b/app/pages/system/silos/SiloIpPoolsTab.tsx index 529ff9bb21..368274c186 100644 --- a/app/pages/system/silos/SiloIpPoolsTab.tsx +++ b/app/pages/system/silos/SiloIpPoolsTab.tsx @@ -20,8 +20,8 @@ import { Success12Icon, } from '@oxide/ui' +import { ListboxField } from '~/components/form/fields/ListboxField' import { ExternalLink } from 'app/components/ExternalLink' -import { ListboxField } from 'app/components/form' import { HL } from 'app/components/HL' import { useForm, useSiloSelector } from 'app/hooks' import { confirmAction } from 'app/stores/confirm-action' From 2e9ce5dd41d50d51f2e4d7a212abc5043ef56504 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Mon, 26 Feb 2024 11:09:06 -0600 Subject: [PATCH 4/4] add app/ui readme --- app/ui/README.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 app/ui/README.md diff --git a/app/ui/README.md b/app/ui/README.md new file mode 100644 index 0000000000..30c6c424d4 --- /dev/null +++ b/app/ui/README.md @@ -0,0 +1,3 @@ +# UI components + +What distinguishes these components from those in `app/components` is that these are ones you could imagine being in a generic Oxide UI library. They are (mostly, aspirationally, ideally) not aware of React Router (except for a couple `Link`s), React Hook Form, or React Query.