feat: add delete option to file menu (#936)

app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx

@@ -141,7 +141,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           type: ToastType.Loading,
           message: `Deleting file "${file.name}"...`,
         });
-        await application.deleteItem(file);
+        await application.files.deleteFile(file);
         addToast({
           type: ToastType.Success,
           message: `Deleted file "${file.name}"`,

app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -169,18 +169,20 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
             </div>
           ) : null}
           {filteredList.length > 0 ? (
-            filteredList.map((file: SNFile) => {
+            filteredList
-              return (
+              .filter((file) => !file.deleted)
-                <PopoverFileItem
+              .map((file: SNFile) => {
-                  key={file.uuid}
+                return (
-                  file={file}
+                  <PopoverFileItem
-                  isAttachedToNote={attachedFiles.includes(file)}
+                    key={file.uuid}
-                  handleFileAction={handleFileAction}
+                    file={file}
-                  getIconType={application.iconsController.getIconForFileType}
+                    isAttachedToNote={attachedFiles.includes(file)}
-                  closeOnBlur={closeOnBlur}
+                    handleFileAction={handleFileAction}
-                />
+                    getIconType={application.iconsController.getIconForFileType}
-              );
+                    closeOnBlur={closeOnBlur}
-            })
+                  />
+                );
+              })
           ) : (
             <div className="flex flex-col items-center justify-center w-full py-8">
               <div className="w-18 h-18 mb-2">

app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx

@@ -179,6 +179,20 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 <Icon type="pencil" className="mr-2 color-neutral" />
                 Rename
               </button>
+              <button
+                onBlur={closeOnBlur}
+                className="sn-dropdown-item focus:bg-info-backdrop"
+                onClick={() => {
+                  handleFileAction({
+                    type: PopoverFileItemActionType.DeleteFile,
+                    payload: file,
+                  });
+                  closeMenu();
+                }}
+              >
+                <Icon type="trash" className="mr-2 color-danger" />
+                <span className="color-danger">Delete permanently</span>
+              </button>
             </>
           )}
         </DisclosurePanel>