feat: edit description (#406)

* feat: edit-desc

* included pw-tests

playwright-tests/update-description.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test"
+
+test("test", async ({ page }) => {
+  await page.goto("http://localhost:5177/editor?snippet_id=snippet_3")
+  await page.getByRole("button", { name: "Fake testuser Login" }).click()
+  await page.locator('[id="radix-\\:rm\\:"]').click()
+  await page.waitForTimeout(2000)
+  await page.getByRole("menuitem", { name: "Edit Description" }).click()
+  await page.getByPlaceholder("Enter new description").press("End")
+  await page
+    .getByPlaceholder("Enter new description")
+    .fill("Check out this new description")
+  await page.getByRole("button", { name: "Update" }).click()
+  await page.locator('[id="radix-\\:rm\\:"]').click()
+  await page.waitForTimeout(2000)
+  await page.getByRole("menuitem", { name: "Edit Description" }).click()
+  await expect(page).toHaveScreenshot("update-description.png")
+})

src/components/EditorNav.tsx

@@ -22,6 +22,7 @@ import {
   Eye,
   EyeIcon,
   File,
+  FilePenLine,
   MoreVertical,
   Package,
   Pencil,
@@ -44,6 +45,7 @@ import { useRenameSnippetDialog } from "./dialogs/rename-snippet-dialog"
 import { DownloadButtonAndMenu } from "./DownloadButtonAndMenu"
 import { SnippetLink } from "./SnippetLink"
 import { TypeBadge } from "./TypeBadge"
+import { useUpdateDescriptionDialog } from "./dialogs/edit-description-dialog"
 
 export default function EditorNav({
   circuitJson,
@@ -72,6 +74,10 @@ export default function EditorNav({
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const { Dialog: RenameDialog, openDialog: openRenameDialog } =
     useRenameSnippetDialog()
+  const {
+    Dialog: UpdateDescriptionDialog,
+    openDialog: openupdateDescriptionDialog,
+  } = useUpdateDescriptionDialog()
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
     useConfirmDeleteSnippetDialog()
   const { Dialog: CreateOrderDialog, openDialog: openCreateOrderDialog } =
@@ -209,7 +215,7 @@ export default function EditorNav({
           )}
         </div>
       </div>
-      <div className="flex items-center justify-between -space-x-1">
+      <div className="flex items-center justify-end md:justify-between -space-x-1">
         <div className="flex mx-2 items-center space-x-1">
           {snippet && <TypeBadge type={snippetType ?? snippet.snippet_type} />}
           <Button
@@ -268,6 +274,13 @@ export default function EditorNav({
                 <File className="mr-2 h-3 w-3" />
                 View Files
               </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() => openupdateDescriptionDialog()}
+              >
+                <FilePenLine className="mr-2 h-3 w-3" />
+                Edit Description
+              </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-xs"
                 onClick={() => openViewTsFilesDialog()}
@@ -369,6 +382,10 @@ export default function EditorNav({
           </Button>
         </div>
       </div>
+      <UpdateDescriptionDialog
+        snippetId={snippet?.snippet_id ?? ""}
+        currentDescription={snippet?.description ?? ""}
+      />
       <RenameDialog
         snippetId={snippet?.snippet_id ?? ""}
         currentName={snippet?.unscoped_name ?? ""}

src/components/dialogs/edit-description-dialog.tsx

@@ -0,0 +1,96 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Button } from "../ui/button"
+import { useState } from "react"
+import { useMutation, useQueryClient } from "react-query"
+import { createUseDialog } from "./create-use-dialog"
+import { useAxios } from "@/hooks/use-axios"
+import { useToast } from "@/hooks/use-toast"
+import { Textarea } from "../ui/textarea"
+
+export const UpdateDescriptionDialog = ({
+  open,
+  onOpenChange,
+  snippetId,
+  currentDescription,
+  onUpdate,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  snippetId: string
+  currentDescription: string
+  onUpdate?: (newDescription: string) => void
+}) => {
+  const [newDescription, setNewDescription] = useState(currentDescription)
+  const axios = useAxios()
+  const { toast } = useToast()
+  const qc = useQueryClient()
+
+  const updateDescriptionMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.post("/snippets/update", {
+        snippet_id: snippetId,
+        description: newDescription,
+      })
+      if (response.status !== 200) {
+        throw new Error("Failed to update description")
+      }
+      return response.data
+    },
+    onMutate: async () => {
+      await qc.cancelQueries({ queryKey: ["snippets", snippetId] })
+      const previousSnippet = qc.getQueryData(["snippets", snippetId])
+      qc.setQueryData(["snippets", snippetId], (old: any) => ({
+        ...old,
+        description: newDescription,
+      }))
+      return { previousSnippet }
+    },
+    onSuccess: () => {
+      onUpdate?.(newDescription)
+      onOpenChange(false)
+      toast({
+        title: "Description updated",
+        description: "Successfully updated snippet description",
+      })
+    },
+    onError: (error, variables, context) => {
+      qc.setQueryData(["snippets", snippetId], context?.previousSnippet)
+      console.error("Error updating description:", error)
+      toast({
+        title: "Error",
+        description: "Failed to update the description. Please try again.",
+        variant: "destructive",
+      })
+    },
+    onSettled: () => {
+      qc.invalidateQueries({ queryKey: ["snippets", snippetId] })
+    },
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Update Description</DialogTitle>
+        </DialogHeader>
+        <Textarea
+          value={newDescription}
+          onChange={(e) => setNewDescription(e.target.value)}
+          placeholder="Enter new description"
+          disabled={updateDescriptionMutation.isLoading}
+          className="resize-none min-h-[80px]"
+        />
+        <Button
+          disabled={updateDescriptionMutation.isLoading}
+          onClick={() => updateDescriptionMutation.mutate()}
+        >
+          {updateDescriptionMutation.isLoading ? "Updating..." : "Update"}
+        </Button>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useUpdateDescriptionDialog = createUseDialog(
+  UpdateDescriptionDialog,
+)