feat(editor)!!: fully refactored package based editor for dx and new features (#1149)

* feat(FileSidebar, CodeEditor, CodeAndPreview): implement file deletion functionality

- Added a dropdown menu in FileSidebar for deleting files, integrating the handleDeleteFile function.
- Updated CodeAndPreview and CodeEditor components to support file deletion, including necessary state management and error handling.
- Introduced DeleteFileProps interface for type safety in file deletion operations.
- Enhanced useFileManagement hook to include handleDeleteFile logic, ensuring proper API interaction and user feedback through toast notifications.

* refactor(CodeAndPreview, useFileManagement, useUpdatePackageFilesMutation): enhance file management logic

- Improved the hasUnsavedChanges logic in CodeAndPreview to account for file count discrepancies.
- Refactored handleDeleteFile in useFileManagement to streamline file deletion and state updates.
- Added logic in useUpdatePackageFilesMutation to handle deletion of files that no longer exist in the package, ensuring proper API interaction and state management.

* Update CodeAndPreview.tsx

* refactor(FileSidebar): improve file path handling and variable naming

- Updated variable names for clarity, changing 'path' to 'filePath', 'parts' to 'pathSegments', 'current' to 'currentNode', and 'isFile' to 'isLeafNode'.
- Enhanced logic for constructing file paths and handling file selection, ensuring consistency and readability.
- Adjusted conditions for file and folder identification to improve code maintainability.

* refactor: update currentFile type to allow null in multiple components

- Changed the type of currentFile from string to string | null in FileSidebar, CodeAndPreview, CodeEditor, and CodeEditorHeader components to handle cases where no file is selected.
- Updated related logic to ensure proper handling of null values, improving robustness and preventing potential runtime errors.

* refactor(CodeAndPreview, useUpdatePackageFilesMutation): rename initialFilesLoad to initiallyLoadedFiles

- Updated the variable name from 'initialFilesLoad' to 'initiallyLoadedFiles' in CodeAndPreview and useUpdatePackageFilesMutation for improved clarity and consistency.
- Adjusted related logic to reflect the new naming, ensuring the functionality remains intact while enhancing code readability.

* refactor(useUpdatePackageFilesMutation): rename newpackage to newPackage for consistency

- Updated the variable name from 'newpackage' to 'newPackage' in useUpdatePackageFilesMutation to enhance clarity and maintain consistency with naming conventions.
- Adjusted related logic to ensure the functionality remains intact while improving code readability.

* refactor(CodeAndPreview, useFileManagement): consolidate file management logic and enhance save functionality

- Moved the handleSave and fsMap functions from CodeAndPreview to useFileManagement for better separation of concerns and improved code organization.
- Updated handleSave to utilize the new parameters and ensure proper state management and file saving logic.
- Refactored the file existence checks in handleCreateFile and handleDeleteFile to use the packageFilesWithContent prop for consistency.
- Enhanced toast notifications for better user feedback during file operations.

* Update src/components/package-port/CodeEditorHeader.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

* 1 - local files amangement

* refactor: improve file management logic and enhance code readability across multiple components

* test: add test for create_or_update allowing empty content_text in package files

* 69

* fix: ensure currentFile is defined before formatting and streamline file extension handling in CodeEditorHeader

* fix: correct currentFile access in CodeEditorHeader to ensure proper content retrieval

* fix: refine currentFile handling in CodeEditorHeader for improved file type detection and toast messaging

* feat: implement toggleSidebar function in FileSidebar for improved sidebar management and reset state

* style: update DropdownMenuContent styling in FileSidebar for improved appearance and positioning

* style: adjust width of Select component in CodeEditorHeader for better layout consistency

* fix: update item ID generation in FileSidebar and ensure TreeActions always reflects selection state

* refactor: streamline file selection logic in useFileManagement and update related components for consistency

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: ArnavK-09

bun-tests/fake-snippets-api/routes/package_files/create_or_update.test.ts

@@ -278,6 +278,32 @@ test("create_or_update - 404 for non-existent package", async () => {
   }
 })
 
+test("create_or_update - allow empty content_text", async () => {
+  const { axios } = await getTestServer()
+
+  const packageResponse = await axios.post("/api/packages/create", {
+    name: "@test/package-files-create-or-update-error",
+    description: "A test package for error cases",
+  })
+  const createdPackage = packageResponse.data.package
+
+  const releaseResponse = await axios.post("/api/package_releases/create", {
+    package_id: createdPackage.package_id,
+    version: "1.0.0",
+  })
+  const createdRelease = releaseResponse.data.package_release
+  const response = await axios.post("/api/package_files/create_or_update", {
+    package_release_id: createdRelease.package_release_id,
+    file_path: "/test.js",
+    content_text: "",
+  })
+  console.log(response.data.package_file)
+  expect(response.status).toBe(200)
+  expect(response.data.ok).toBe(true)
+  expect(response.data.package_file).toBeDefined()
+  expect(response.data.package_file.content_text).toBe("")
+})
+
 test("create_or_update - 400 for missing content", async () => {
   const { axios } = await getTestServer()
 

fake-snippets-api/routes/api/package_files/create_or_update.ts

@@ -28,7 +28,7 @@ const routeSpec = {
     }, "Cannot specify both package_release_id and package_name_with_version")
     .refine((v) => {
       if (v.content_base64 && v.content_text) return false
-      if (!v.content_base64 && !v.content_text) return false
+      if (!v.content_base64 && v.content_text === undefined) return false
       return true
     }, "Either content_base64 or content_text is required"),
   jsonResponse: z.object({
@@ -136,7 +136,7 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
       exisitingFile.package_file_id,
       {
         content_text:
-          content_text ||
+          content_text ??
           (content_base64
             ? Buffer.from(content_base64, "base64").toString()
             : null),
@@ -167,7 +167,7 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
     package_release_id: packageReleaseId,
     file_path,
     content_text:
-      content_text ||
+      content_text ??
       (content_base64
         ? Buffer.from(content_base64, "base64").toString()
         : null),

src/components/FileSidebar.tsx

@@ -1,20 +1,33 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import { File, Folder, PanelRightOpen, Plus } from "lucide-react"
+import { File, Folder, MoreVertical, PanelRightOpen, Plus } from "lucide-react"
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
 import { Input } from "@/components/ui/input"
-import { CreateFileProps } from "./package-port/CodeAndPreview"
-
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import type {
+  ICreateFileProps,
+  ICreateFileResult,
+  IDeleteFileProps,
+  IDeleteFileResult,
+} from "@/hooks/useFileManagement"
+import { useToast } from "@/hooks/use-toast"
 type FileName = string
 
 interface FileSidebarProps {
   files: Record<FileName, string>
-  currentFile: FileName
+  currentFile: FileName | null
   onFileSelect: (filename: FileName) => void
   className?: string
   fileSidebarState: ReturnType<typeof useState<boolean>>
-  handleCreateFile: (props: CreateFileProps) => void
+  handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
+  handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -24,11 +37,13 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   className,
   fileSidebarState,
   handleCreateFile,
+  handleDeleteFile,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [errorMessage, setErrorMessage] = useState("")
+  const { toast } = useToast()
 
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
@@ -38,38 +53,85 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     }
     const root: Record<string, TreeNode> = {}
 
-    Object.keys(files).forEach((path) => {
-      const startsWithSlash = path.startsWith("/")
-      const parts = (startsWithSlash ? path.slice(1) : path).trim().split("/")
-      let current = root
+    Object.keys(files).forEach((filePath) => {
+      const hasLeadingSlash = filePath.startsWith("/")
+      const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
+        .trim()
+        .split("/")
+      let currentNode: Record<string, TreeNode> = root
 
-      parts.forEach((part, index) => {
-        const isFile = index === parts.length - 1
-        const parentPath = parts.slice(0, index).join("/")
-        const currentPath = parentPath ? `${parentPath}/${part}` : part
-        const evaluatedFilePath = startsWithSlash
-          ? `/${currentPath}`
-          : currentPath
+      pathSegments.forEach((segment, segmentIndex) => {
+        const isLeafNode = segmentIndex === pathSegments.length - 1
+        const ancestorPath = pathSegments.slice(0, segmentIndex).join("/")
+        const relativePath = ancestorPath
+          ? `${ancestorPath}/${segment}`
+          : segment
+        const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
+        const itemId = absolutePath
         if (
-          !current[part] &&
-          (!isHiddenFile(currentPath) ||
+          !currentNode[segment] &&
+          (!isHiddenFile(relativePath) ||
             isHiddenFile(
-              currentFile.startsWith("/") ? currentFile.slice(1) : currentFile,
+              currentFile?.startsWith("/")
+                ? currentFile.slice(1)
+                : currentFile || "",
             ))
         ) {
-          current[part] = {
-            id: currentPath,
-            name: isFile ? part : part,
-            icon: isFile ? File : Folder,
-            onClick: isFile ? () => onFileSelect(evaluatedFilePath) : undefined,
-            draggable: isFile,
-            droppable: !isFile,
-            children: isFile ? undefined : {},
+          currentNode[segment] = {
+            id: itemId,
+            name: isLeafNode ? segment : segment,
+            icon: isLeafNode ? File : Folder,
+            onClick: isLeafNode ? () => onFileSelect(absolutePath) : undefined,
+            draggable: false,
+            droppable: !isLeafNode,
+            children: isLeafNode ? undefined : {},
+            actions: (
+              <>
+                <DropdownMenu key={itemId}>
+                  <DropdownMenuTrigger asChild>
+                    <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-48 bg-white shadow-lg rounded-md border-4 z-[100] border-white"
+                    style={{
+                      position: "absolute",
+                      top: "100%",
+                      left: "0",
+                      marginTop: "0.5rem",
+                      width: "8rem",
+                      padding: "0.01rem",
+                    }}
+                  >
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          const { fileDeleted } = handleDeleteFile({
+                            filename: relativePath,
+                            onError: (error) => {
+                              toast({
+                                title: `Error deleting file ${relativePath}`,
+                                description: error.message,
+                              })
+                            },
+                          })
+                          if (fileDeleted) {
+                            setErrorMessage("")
+                          }
+                        }}
+                        className="flex items-center px-4 py-1 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
+                      >
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </>
+            ),
           }
         }
 
-        if (!isFile && current[part].children) {
-          current = current[part].children
+        if (!isLeafNode && currentNode[segment].children) {
+          currentNode = currentNode[segment].children
         }
       })
     })
@@ -90,15 +152,26 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   }
 
   const treeData = transformFilesToTreeData(files)
-
+  // console.log("treeData", files)
   const handleCreateFileInline = () => {
-    handleCreateFile({
+    const { newFileCreated } = handleCreateFile({
       newFileName,
-      setErrorMessage,
-      onFileSelect,
-      setNewFileName,
-      setIsCreatingFile,
+      onError: (error) => {
+        setErrorMessage(error.message)
+      },
     })
+    if (newFileCreated) {
+      setIsCreatingFile(false)
+      setNewFileName("")
+      setErrorMessage("")
+    }
+  }
+
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen)
+    setErrorMessage("")
+    setIsCreatingFile(false)
+    setNewFileName("")
   }
 
   return (
@@ -110,7 +183,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       )}
     >
       <button
-        onClick={() => setSidebarOpen(!sidebarOpen)}
+        onClick={toggleSidebar}
         className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${
           !sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"
         }`}
@@ -129,6 +202,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
           <Input
             autoFocus
             value={newFileName}
+            spellCheck={false}
             onChange={(e) => setNewFileName(e.target.value)}
             onBlur={handleCreateFileInline}
             onKeyDown={(e) => {
@@ -149,7 +223,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       )}
       <TreeView
         data={treeData}
-        initialSelectedItemId={currentFile}
+        initialSelectedItemId={currentFile || ""}
         onSelectChange={(item) => {
           if (item?.onClick) {
             item.onClick()