From 43546c84ebbeff38f0c477cd3ab487142bba2d94 Mon Sep 17 00:00:00 2001 From: Fred KISSIE Date: Thu, 14 May 2026 22:42:01 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20=20wip:=20create=20label=20dialo?= =?UTF-8?q?g?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClientResourcesTable.tsx | 4 +- .../CreateInternalResourceDialog.tsx | 88 +++++++++---------- src/components/CreateOrgLabelDialog.tsx | 74 ++++++++++++++++ src/components/OrgLabelsTable.tsx | 79 ++++------------- 4 files changed, 137 insertions(+), 108 deletions(-) create mode 100644 src/components/CreateOrgLabelDialog.tsx diff --git a/src/components/ClientResourcesTable.tsx b/src/components/ClientResourcesTable.tsx index 7ebef5795..156cc7f41 100644 --- a/src/components/ClientResourcesTable.tsx +++ b/src/components/ClientResourcesTable.tsx @@ -204,8 +204,8 @@ export default function ClientResourcesTable({ siteId: number ) => { try { - await api.delete(`/site-resource/${resourceId}`).then(() => { - startTransition(() => { + startTransition(async () => { + await api.delete(`/site-resource/${resourceId}`).then(() => { router.refresh(); setIsDeleteModalOpen(false); }); diff --git a/src/components/CreateInternalResourceDialog.tsx b/src/components/CreateInternalResourceDialog.tsx index 4d2bc0916..dc1dacd4b 100644 --- a/src/components/CreateInternalResourceDialog.tsx +++ b/src/components/CreateInternalResourceDialog.tsx @@ -16,7 +16,7 @@ import { toast } from "@app/hooks/useToast"; import { createApiClient, formatAxiosError } from "@app/lib/api"; import { AxiosResponse } from "axios"; import { useTranslations } from "next-intl"; -import { useState } from "react"; +import { useState, useTransition } from "react"; import { cleanForFQDN, InternalResourceForm, @@ -39,30 +39,30 @@ export default function CreateInternalResourceDialog({ }: CreateInternalResourceDialogProps) { const t = useTranslations(); const api = createApiClient(useEnvContext()); - const [isSubmitting, setIsSubmitting] = useState(false); const [isHttpModeDisabled, setIsHttpModeDisabled] = useState(false); + const [isSubmitting, startTransition] = useTransition(); - async function handleSubmit(values: InternalResourceFormValues) { - setIsSubmitting(true); - try { - let data = { ...values }; - if ( - (data.mode === "host" || data.mode === "http") && - isHostname(data.destination) - ) { - const currentAlias = data.alias?.trim() || ""; - if (!currentAlias) { - let aliasValue = data.destination; - if (data.destination.toLowerCase() === "localhost") { - aliasValue = `${cleanForFQDN(data.name)}.internal`; + function handleSubmit(values: InternalResourceFormValues) { + startTransition(async () => { + try { + let data = { ...values }; + if ( + (data.mode === "host" || data.mode === "http") && + isHostname(data.destination) + ) { + const currentAlias = data.alias?.trim() || ""; + if (!currentAlias) { + let aliasValue = data.destination; + if (data.destination.toLowerCase() === "localhost") { + aliasValue = `${cleanForFQDN(data.name)}.internal`; + } + data = { ...data, alias: aliasValue }; } - data = { ...data, alias: aliasValue }; } - } - await api.put>( - `/org/${orgId}/site-resource`, - { + await api.put< + AxiosResponse<{ data: { siteResourceId: number } }> + >(`/org/${orgId}/site-resource`, { name: data.name, siteIds: data.siteIds, mode: data.mode, @@ -106,32 +106,30 @@ export default function CreateInternalResourceDialog({ clientIds: data.clients ? data.clients.map((c) => parseInt(c.id)) : [] - } - ); + }); - toast({ - title: t("createInternalResourceDialogSuccess"), - description: t( - "createInternalResourceDialogInternalResourceCreatedSuccessfully" - ), - variant: "default" - }); - setOpen(false); - onSuccess?.(); - } catch (error) { - toast({ - title: t("createInternalResourceDialogError"), - description: formatAxiosError( - error, - t( - "createInternalResourceDialogFailedToCreateInternalResource" - ) - ), - variant: "destructive" - }); - } finally { - setIsSubmitting(false); - } + toast({ + title: t("createInternalResourceDialogSuccess"), + description: t( + "createInternalResourceDialogInternalResourceCreatedSuccessfully" + ), + variant: "default" + }); + setOpen(false); + onSuccess?.(); + } catch (error) { + toast({ + title: t("createInternalResourceDialogError"), + description: formatAxiosError( + error, + t( + "createInternalResourceDialogFailedToCreateInternalResource" + ) + ), + variant: "destructive" + }); + } + }); } return ( diff --git a/src/components/CreateOrgLabelDialog.tsx b/src/components/CreateOrgLabelDialog.tsx new file mode 100644 index 000000000..f06f979ca --- /dev/null +++ b/src/components/CreateOrgLabelDialog.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useEnvContext } from "@app/hooks/useEnvContext"; +import { createApiClient } from "@app/lib/api"; +import { useTranslations } from "next-intl"; +import { useState, useTransition } from "react"; +import { + Credenza, + CredenzaBody, + CredenzaClose, + CredenzaContent, + CredenzaDescription, + CredenzaFooter, + CredenzaHeader, + CredenzaTitle +} from "./Credenza"; +import { Button } from "./ui/button"; + +export type CreateOrgLabelDialogProps = { + open: boolean; + setOpen: (val: boolean) => void; + orgId: string; + onSuccess?: () => void; +}; + +export function CreateOrgLabelDialog({ + open, + setOpen, + orgId, + onSuccess +}: CreateOrgLabelDialogProps) { + const t = useTranslations(); + const api = createApiClient(useEnvContext()); + const [isSubmitting, startTransition] = useTransition(); + + return ( + + + + + {t("createInternalResourceDialogCreateClientResource")} + + + {t( + "createInternalResourceDialogCreateClientResourceDescription" + )} + + + + <> + + + + + + + + + + ); +} diff --git a/src/components/OrgLabelsTable.tsx b/src/components/OrgLabelsTable.tsx index 0c6349a61..bcb6f59ea 100644 --- a/src/components/OrgLabelsTable.tsx +++ b/src/components/OrgLabelsTable.tsx @@ -53,7 +53,7 @@ export default function OrgLabelsTable({ rowCount }: OrgLabelsTableProps) { const router = useRouter(); - const pathname = usePathname(); + const { navigate: filter, isNavigating: isFiltering, @@ -63,13 +63,13 @@ export default function OrgLabelsTable({ const [selectedLabel, setSelectedLabel] = useState(null); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const [isRefreshing, startRefreshTransition] = useTransition(); + const [isRefreshing, startTransition] = useTransition(); const api = createApiClient(useEnvContext()); const t = useTranslations(); function refreshData() { - startRefreshTransition(async () => { + startTransition(async () => { try { router.refresh(); } catch { @@ -82,11 +82,6 @@ export default function OrgLabelsTable({ }); } - function toggleSort(column: string) { - const newSearch = getNextSortOrder(column, searchParams); - filter({ searchParams: newSearch }); - } - const handlePaginationChange = (newPage: PaginationState) => { searchParams.set("page", (newPage.pageIndex + 1).toString()); searchParams.set("pageSize", newPage.pageSize.toString()); @@ -105,25 +100,21 @@ export default function OrgLabelsTable({ accessorKey: "name", enableHiding: false, header: () => { - const nameOrder = getSortDirection("name", searchParams); - const Icon = - nameOrder === "asc" - ? ArrowDown01Icon - : nameOrder === "desc" - ? ArrowUp10Icon - : ChevronsUpDownIcon; - return ( - - ); + return {t("name")}; }, - cell: ({ row }) => + cell: ({ row }) => ( +
+
+ + {row.original.name} +
+ ) }, { accessorKey: "actions", @@ -160,7 +151,7 @@ export default function OrgLabelsTable({ ); function deleteLabel(label: LabelRow) { - startRefreshTransition(async () => { + startTransition(async () => { await api .delete(`/org/${orgId}/label/${label.labelId}`) .catch((e) => { @@ -214,37 +205,3 @@ export default function OrgLabelsTable({ ); } - -type EditLabelCellProps = { - label: LabelRow; -}; - -function EditLabelCell({ label }: EditLabelCellProps) { - const t = useTranslations(); - - return ( -
-
- - {label.name} - - {/* */} -
- ); -}