🚧 wip: create label dialog

src/components/ClientResourcesTable.tsx

@@ -204,8 +204,8 @@ export default function ClientResourcesTable({
         siteId: number
     ) => {
         try {
+            startTransition(async () => {
                 await api.delete(`/site-resource/${resourceId}`).then(() => {
-                startTransition(() => {
                     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,11 +39,11 @@ 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) {
+    function handleSubmit(values: InternalResourceFormValues) {
-        setIsSubmitting(true);
+        startTransition(async () => {
             try {
                 let data = { ...values };
                 if (
@@ -60,9 +60,9 @@ export default function CreateInternalResourceDialog({
                     }
                 }
 
-            await api.put<AxiosResponse<{ data: { siteResourceId: number } }>>(
+                await api.put<
-                `/org/${orgId}/site-resource`,
+                    AxiosResponse<{ data: { siteResourceId: number } }>
-                {
+                >(`/org/${orgId}/site-resource`, {
                     name: data.name,
                     siteIds: data.siteIds,
                     mode: data.mode,
@@ -106,8 +106,7 @@ export default function CreateInternalResourceDialog({
                     clientIds: data.clients
                         ? data.clients.map((c) => parseInt(c.id))
                         : []
-                }
+                });
-            );
 
                 toast({
                     title: t("createInternalResourceDialogSuccess"),
@@ -129,9 +128,8 @@ export default function CreateInternalResourceDialog({
                     ),
                     variant: "destructive"
                 });
-        } finally {
-            setIsSubmitting(false);
             }
+        });
     }
 
     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);
+                    return <span className="p-3">{t("name")}</span>;
-                    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>
-                    );
                 },
-                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>
-    );
-}