feat(project-tree): delete all checked items (#31004)

Author: mariusandra

frontend/src/layout/panel-layout/ProjectTree/ProjectTree.tsx

@@ -42,6 +42,7 @@ export function ProjectTree(): JSX.Element {
         onItemChecked,
         moveCheckedItems,
         linkCheckedItems,
+        deleteCheckedItems,
         setCheckedItems,
         assureVisibility,
     } = useActions(projectTreeLogic)
@@ -78,7 +79,7 @@ export function ProjectTree(): JSX.Element {
                         <ButtonPrimitive menuItem>{checkedItems[item.id] ? 'Deselect' : 'Select'}</ButtonPrimitive>
                     </MenuItem>
                 ) : null}
-                {checkedItemsCount !== '0' && item.record?.type === 'folder' ? (
+                {checkedItemCountNumeric > 0 && item.record?.type === 'folder' ? (
                     <MenuItem
                         asChild
                         onClick={(e: any) => {
@@ -91,7 +92,7 @@ export function ProjectTree(): JSX.Element {
                         </ButtonPrimitive>
                     </MenuItem>
                 ) : null}
-                {checkedItemsCount !== '0' && item.record?.type === 'folder' ? (
+                {checkedItemCountNumeric > 0 && item.record?.type === 'folder' ? (
                     <MenuItem
                         asChild
                         onClick={(e: any) => {
@@ -140,16 +141,24 @@ export function ProjectTree(): JSX.Element {
                         <ButtonPrimitive menuItem>Rename</ButtonPrimitive>
                     </MenuItem>
                 ) : null}
-                {item.record?.created_at || item.record?.type === 'folder' ? (
+                {item.record?.id || item.record?.type === 'folder' ? (
                     <MenuItem
                         asChild
                         onClick={(e: any) => {
                             e.stopPropagation()
-                            deleteItem(item.record as unknown as FileSystemEntry)
+                            if (checkedItemCountNumeric > 1 && checkedItems[item.id]) {
+                                deleteCheckedItems()
+                            } else {
+                                deleteItem(item.record as unknown as FileSystemEntry)
+                            }
                         }}
                     >
                         <ButtonPrimitive menuItem>
-                            {item.record?.shortcut ? 'Remove shortcut' : "Delete and move back to 'Unfiled'"}
+                            {checkedItemCountNumeric > 1 && checkedItems[item.id]
+                                ? `Delete ${checkedItemsCount} item${checkedItemCountNumeric === 1 ? '' : 's'}`
+                                : item.record?.shortcut
+                                ? 'Remove shortcut'
+                                : "Delete and move back to 'Unfiled'"}
                         </ButtonPrimitive>
                     </MenuItem>
                 ) : null}
@@ -197,7 +206,7 @@ export function ProjectTree(): JSX.Element {
                     <ButtonPrimitive onClick={() => createFolder('')} tooltip="New root folder">
                         <IconFolderPlus className="text-tertiary" />
                     </ButtonPrimitive>
-                    {checkedItemsCount !== '0' && checkedItemsCount !== '0+' ? (
+                    {checkedItemCountNumeric > 0 && checkedItemsCount !== '0+' ? (
                         <ButtonPrimitive onClick={() => setCheckedItems({})} tooltip="Clear">
                             <LemonTag type="highlight">{checkedItemsCount} selected</LemonTag>
                         </ButtonPrimitive>
@@ -217,7 +226,7 @@ export function ProjectTree(): JSX.Element {
                     }
                     return window.location.href.endsWith(item.record?.href)
                 }}
-                enableMultiSelection={checkedItemsCount !== '0'}
+                enableMultiSelection={checkedItemCountNumeric > 0}
                 onItemChecked={onItemChecked}
                 checkedItemCount={checkedItemCountNumeric}
                 onNodeClick={(node) => {

frontend/src/layout/panel-layout/ProjectTree/projectTreeLogic.tsx

@@ -76,6 +76,7 @@ export const projectTreeLogic = kea<projectTreeLogicType>([
         expandProjectFolder: (path: string) => ({ path }),
         moveCheckedItems: (path: string) => ({ path }),
         linkCheckedItems: (path: string) => ({ path }),
+        deleteCheckedItems: true,
         checkSelectedFolders: true,
         syncTypeAndRef: (type: string, ref: string) => ({ type, ref }),
         updateSyncedFiles: (files: FileSystemEntry[]) => ({ files }),
@@ -509,7 +510,8 @@ export const projectTreeLogic = kea<projectTreeLogicType>([
         ],
         sortedItems: [
             (s) => [s.viableItems],
-            (viableItems): FileSystemEntry[] => [...viableItems].sort((a, b) => a.path.localeCompare(b.path)),
+            (viableItems): FileSystemEntry[] =>
+                [...viableItems].sort((a, b) => (a.path > b.path ? 1 : a.path < b.path ? -1 : 0)),
         ],
         viableItemsById: [
             (s) => [s.viableItems],
@@ -913,6 +915,26 @@ export const projectTreeLogic = kea<projectTreeLogicType>([
                 })
             }
         },
+        deleteCheckedItems: () => {
+            const { checkedItems } = values
+            let skipInFolder: string | null = null
+            for (const item of values.sortedItems) {
+                if (skipInFolder !== null) {
+                    if (item.path.startsWith(skipInFolder + '/')) {
+                        continue
+                    } else {
+                        skipInFolder = null
+                    }
+                }
+                const itemId = item.type === 'folder' ? `project-folder/${item.path}` : `project/${item.id}`
+                if (checkedItems[itemId]) {
+                    actions.deleteItem(item)
+                    if (item.type === 'folder') {
+                        skipInFolder = item.path
+                    }
+                }
+            }
+        },
         deleteItem: async ({ item }) => {
             if (!item.id) {
                 const response = await api.fileSystem.list({ type: 'folder', path: item.path })