🚧 wip: create label dialog

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);
                 });

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<AxiosResponse<{ data: { siteResourceId: number } }>>(
-                `/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 (

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 (
+        <Credenza open={open} onOpenChange={setOpen}>
+            <CredenzaContent className="max-w-3xl">
+                <CredenzaHeader>
+                    <CredenzaTitle>
+                        {t("createInternalResourceDialogCreateClientResource")}
+                    </CredenzaTitle>
+                    <CredenzaDescription>
+                        {t(
+                            "createInternalResourceDialogCreateClientResourceDescription"
+                        )}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+                <CredenzaBody>
+                    <></>
+                </CredenzaBody>
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button
+                            variant="outline"
+                            onClick={() => setOpen(false)}
+                            disabled={isSubmitting}
+                        >
+                            {t("createInternalResourceDialogCancel")}
+                        </Button>
+                    </CredenzaClose>
+                    <Button
+                        type="submit"
+                        form="create-internal-resource-form"
+                        disabled={isSubmitting}
+                        loading={isSubmitting}
+                    >
+                        {t("createInternalResourceDialogCreateResource")}
+                    </Button>
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}

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<LabelRow | null>(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 (
-                        <Button
-                            variant="ghost"
-                            className="p-3"
-                            onClick={() => toggleSort("name")}
-                        >
-                            {t("name")}
-                            <Icon className="ml-2 h-4 w-4" />
-                        </Button>
-                    );
+                    return <span className="p-3">{t("name")}</span>;
                 },
-                cell: ({ row }) => <EditLabelCell label={row.original} />
+                cell: ({ row }) => (
+                    <div className="flex items-center gap-1.5 group">
+                        <div
+                            className="size-2.5 rounded-full bg-(--color) flex-none"
+                            style={{
+                                // @ts-expect-error css color
+                                "--color": row.original.color
+                            }}
+                        />
+
+                        {row.original.name}
+                    </div>
+                )
             },
             {
                 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 (
-        <div className="flex items-center gap-1.5 group">
-            <div
-                className="size-2.5 rounded-full bg-(--color) flex-none"
-                style={{
-                    // @ts-expect-error css color
-                    "--color": label.color
-                }}
-            />
-
-            {label.name}
-
-            {/* <Button
-                variant="ghost"
-                size="sm"
-                className={cn(
-                    "opacity-0 group-hover:opacity-100 text-xs",
-                    "inline-flex gap-2 items-center"
-                )}
-            >
-                {t("edit")}
-                <PencilIcon className="size-3 flex-none" />
-            </Button> */}
-        </div>
-    );
-}