From b9bee2836b1973fbd31ad060ee60c2061c4da295 Mon Sep 17 00:00:00 2001 From: Fred KISSIE Date: Thu, 23 Apr 2026 06:33:57 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20wip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/InternalResourceForm.tsx | 124 ++++++++++-------- src/components/machines-selector.tsx | 2 +- .../multi-select/multi-select-input.tsx | 61 +++++++++ .../{ => multi-select}/multi-select-tags.tsx | 2 +- 4 files changed, 135 insertions(+), 54 deletions(-) create mode 100644 src/components/multi-select/multi-select-input.tsx rename src/components/{ => multi-select}/multi-select-tags.tsx (99%) diff --git a/src/components/InternalResourceForm.tsx b/src/components/InternalResourceForm.tsx index 3a693d82b..559da4cce 100644 --- a/src/components/InternalResourceForm.tsx +++ b/src/components/InternalResourceForm.tsx @@ -40,7 +40,12 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { tierMatrix } from "@server/lib/billing/tierMatrix"; import { UserType } from "@server/types/UserTypes"; import { useQuery } from "@tanstack/react-query"; -import { ChevronsUpDown, ExternalLink } from "lucide-react"; +import { + ArrowDownIcon, + ChevronDownIcon, + ChevronsUpDown, + ExternalLink +} from "lucide-react"; import { useTranslations } from "next-intl"; import { useEffect, useRef, useState } from "react"; import { useForm } from "react-hook-form"; @@ -50,7 +55,7 @@ import { formatMultiSitesSelectorLabel } from "./multi-site-selector"; import type { Selectedsite } from "./site-selector"; -import { CaretSortIcon } from "@radix-ui/react-icons"; + import { MachinesSelector } from "./machines-selector"; import DomainPicker from "@app/components/DomainPicker"; import { SwitchInput } from "@app/components/SwitchInput"; @@ -155,7 +160,7 @@ export type InternalResourceData = { const tagSchema = z.object({ id: z.string(), text: z.string() }); function buildSelectedSitesForResource( - resource: InternalResourceData, + resource: InternalResourceData ): Selectedsite[] { return resource.siteIds.map((siteId, idx) => ({ name: resource.siteNames[idx] ?? "", @@ -608,9 +613,7 @@ export function InternalResourceForm({ users: [], clients: [] }); - setSelectedSites( - buildSelectedSitesForResource(resource) - ); + setSelectedSites(buildSelectedSitesForResource(resource)); setTcpPortMode( getPortModeFromString(resource.tcpPortRangeString) ); @@ -877,7 +880,9 @@ export function InternalResourceForm({ field.value ?? "http" } - disabled={httpSectionDisabled} + disabled={ + httpSectionDisabled + } > @@ -918,7 +923,10 @@ export function InternalResourceForm({ @@ -974,7 +982,9 @@ export function InternalResourceForm({ field.value ?? "" } - disabled={httpSectionDisabled} + disabled={ + httpSectionDisabled + } onChange={(e) => { const raw = e.target @@ -1009,7 +1019,9 @@ export function InternalResourceForm({ {isHttpMode && ( - + )} {isHttpMode ? ( @@ -1022,55 +1034,61 @@ export function InternalResourceForm({ {t(httpConfigurationDescriptionKey)} -
- { - if (res === null) { + > + { + if (res === null) { + form.setValue( + "httpConfigSubdomain", + null + ); + form.setValue( + "httpConfigDomainId", + null + ); + form.setValue( + "httpConfigFullDomain", + null + ); + return; + } form.setValue( "httpConfigSubdomain", - null + res.subdomain ?? null ); form.setValue( "httpConfigDomainId", - null + res.domainId ); form.setValue( "httpConfigFullDomain", - null + res.fullDomain ); - return; - } - form.setValue( - "httpConfigSubdomain", - res.subdomain ?? null - ); - form.setValue( - "httpConfigDomainId", - res.domainId - ); - form.setValue( - "httpConfigFullDomain", - res.fullDomain - ); - }} - /> + }} + />
@@ -1511,7 +1531,7 @@ export function InternalResourceForm({ role="combobox" className={cn( "justify-between w-full", - "text-muted-foreground pl-1.5" + "text-muted-foreground pl-1.5 cursor-text" )} > - + diff --git a/src/components/machines-selector.tsx b/src/components/machines-selector.tsx index 99515135e..f6ef463b8 100644 --- a/src/components/machines-selector.tsx +++ b/src/components/machines-selector.tsx @@ -5,7 +5,7 @@ import { useMemo, useState } from "react"; import { useDebounce } from "use-debounce"; import { useTranslations } from "next-intl"; -import { MultiSelectTags } from "./multi-select-tags"; +import { MultiSelectTags } from "./multi-select/multi-select-tags"; export type SelectedMachine = Pick< ListClientsResponse["clients"][number], diff --git a/src/components/multi-select/multi-select-input.tsx b/src/components/multi-select/multi-select-input.tsx new file mode 100644 index 000000000..d0d8e2873 --- /dev/null +++ b/src/components/multi-select/multi-select-input.tsx @@ -0,0 +1,61 @@ +import { + Popover, + PopoverContent, + PopoverTrigger +} from "@app/components/ui/popover"; +import { Button } from "@app/components/ui/button"; +import { cn } from "@app/lib/cn"; +import { ChevronDownIcon } from "lucide-react"; +import { + type TagValue, + type MultiSelectTagsProps, + MultiSelectTags +} from "./multi-select-tags"; + +export interface MultiSelectInputProps< + T extends TagValue +> extends MultiSelectTagsProps { + buttonText?: string; +} + +export function MultiSelectInput({ + buttonText, + ...props +}: MultiSelectInputProps) { + return ( + + +
+ + {/* {(field.value ?? []).map((client) => ( + + {client.name} + + ))} */} + {buttonText} + + +
+ + + + + + ); +} diff --git a/src/components/multi-select-tags.tsx b/src/components/multi-select/multi-select-tags.tsx similarity index 99% rename from src/components/multi-select-tags.tsx rename to src/components/multi-select/multi-select-tags.tsx index 2fb9b097d..67ce9e8f5 100644 --- a/src/components/multi-select-tags.tsx +++ b/src/components/multi-select/multi-select-tags.tsx @@ -6,7 +6,7 @@ import { CommandInput, CommandItem, CommandList -} from "./ui/command"; +} from "../ui/command"; import { cn } from "@app/lib/cn"; import { CheckIcon } from "lucide-react";