Enable right-click to delete option in Explorer cards (#1341)

* Export `fsPromises.unlink` from `node:fs` for `metafiles/deleteFile` thunk

* Added `DeleteFileDialog` modal

* Close `DeleteBranchDialog` on successful deletion

* Allow right-click on `File` in `Explorer` to initiate `DeleteFileDialog` modal

packages/preload/src/index.ts

@@ -94,6 +94,7 @@ export {
   replaceExt,
   validateFileName,
   writeFileAsync,
+  unlink,
 } from './io';
 export {
   clipboard,

packages/preload/src/io/index.ts

@@ -12,6 +12,7 @@ export * from './io-readDir';
 export * from './io-readFile';
 export * from './io-validateFileName';
 export * from './io-writeFile';
+export {unlink} from 'node:fs/promises';
 
 /**
  * **WARNING** If a method is not included here, please see

packages/renderer/src/components/Explorer/File.tsx

@@ -1,3 +1,4 @@
+import {extractFilename, isModified, isStaged, isUnmerged, uuid} from '#preload';
 import {Description} from '@mui/icons-material';
 import {Skeleton} from '@mui/material';
 import type {UUID} from '@syn-types/app';
@@ -8,7 +9,7 @@ import {isFilebasedMetafile, isVersionedMetafile} from '../../store/slices/metaf
 import {createCard} from '../../store/thunks/cards';
 import {StageButton, UnstageButton} from './GitButtons';
 import {StyledTreeItem} from './TreeItem';
-import {extractFilename, isModified, isStaged, isUnmerged} from '#preload';
+import {modalAdded} from '/@/store/slices/modals';
 
 const File = ({id}: {id: UUID}) => {
   const metafile = useAppSelector(state => metafileSelectors.selectById(state, id));
@@ -27,6 +28,17 @@ const File = ({id}: {id: UUID}) => {
     if (isFilebasedMetafile(metafile)) await dispatch(createCard({path: metafile.path}));
   };
 
+  const handleRightClick = () => {
+    if (isFilebasedMetafile(metafile))
+      dispatch(
+        modalAdded({
+          id: uuid(),
+          type: 'DeleteFileDialog',
+          metafile: metafile.id,
+        }),
+      );
+  };
+
   return (
     <>
       {isFilebasedMetafile(metafile) ? (
@@ -53,6 +65,7 @@ const File = ({id}: {id: UUID}) => {
           endIcon={<Description />}
           color={motif?.color}
           onClick={handleClick}
+          onContextMenu={handleRightClick}
         />
       ) : (
         <Skeleton

packages/renderer/src/components/Modal/DeleteBranchDialog.tsx

@@ -29,6 +29,7 @@ const DeleteBranchDialog = ({modal}: {modal: DeleteBranchDialogModal}) => {
           ? `Deleted ${branch.scope}/${branch.ref} branch...`
           : `Unable to delete ${branch.scope}/${branch.ref} branch...`,
       );
+      if (result) handleClose();
     }
   };
 

packages/renderer/src/components/Modal/DeleteFileDialog.tsx

@@ -0,0 +1,78 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  styled,
+} from '@mui/material';
+import type {DeleteFileDialog as DeleteFileDialogModal} from '@syn-types/modal';
+import {useAppDispatch, useAppSelector} from '../../store/hooks';
+import {modalRemoved} from '../../store/slices/modals';
+import {deleteFile} from '/@/store/thunks/metafiles';
+import metafileSelectors from '/@/store/selectors/metafiles';
+
+const DeleteFileDialog = ({modal}: {modal: DeleteFileDialogModal}) => {
+  const dispatch = useAppDispatch();
+  const metafile = useAppSelector(state => metafileSelectors.selectById(state, modal.metafile));
+
+  const handleClose = () => dispatch(modalRemoved(modal.id));
+  const handleClick = async () => {
+    if (metafile) {
+      const result = await dispatch(deleteFile(metafile.id));
+      console.log(
+        result ? `Deleted ${metafile.name} file...` : `Unable to delete ${metafile.name} file...`,
+      );
+      if (result) handleClose();
+    }
+  };
+
+  return (
+    <StyledDialog
+      open
+      onClose={handleClose}
+      aria-labelledby="delete-file-dialog-title"
+      aria-describedby="delete-file-description"
+    >
+      <DialogTitle id="delete-file-dialog-title">Delete File</DialogTitle>
+      <DialogContent sx={{px: 2, pb: 1.5}}>
+        <DialogContentText id="delete-file-description">
+          Are you sure you want to permanently delete the file{' '}
+          <Box
+            component="span"
+            fontWeight="fontWeightBold"
+          >
+            {metafile?.name}
+          </Box>{' '}
+          ?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          id="cancel-button"
+          variant="contained"
+          onClick={handleClose}
+        >
+          Cancel
+        </Button>
+        <Button
+          id="delete-file-button"
+          variant="contained"
+          onClick={handleClick}
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </StyledDialog>
+  );
+};
+
+const StyledDialog = styled(Dialog)(() => ({
+  '& .MuiDialog-paper': {
+    width: 400,
+  },
+}));
+
+export default DeleteFileDialog;

packages/renderer/src/components/Modal/ModalComponent.tsx

@@ -2,6 +2,7 @@ import type {Modal} from '@syn-types/modal';
 import GitGraph from '../GitGraph';
 import CommitDialog from './CommitDialog';
 import DeleteBranchDialog from './DeleteBranchDialog';
+import DeleteFileDialog from './DeleteFileDialog';
 import MergeDialog from './MergeDialog';
 import NewBranchDialog from './NewBranchDialog';
 import NewCardDialog from './NewCardDialog';
@@ -10,6 +11,7 @@ import RevertCommitDialog from './RevertCommitDialog';
 import {
   isCommitDialogModal,
   isDeleteBranchDialog,
+  isDeleteFileDialog,
   isGitGraphModal,
   isMergeDialogModal,
   isNewBranchDialog,
@@ -31,8 +33,10 @@ const ModalComponent = (props: Modal) => {
       return isNewBranchDialog(props) ? <NewBranchDialog modal={props} /> : null;
     case 'DeleteBranchDialog':
       return isDeleteBranchDialog(props) ? <DeleteBranchDialog modal={props} /> : null;
+    case 'DeleteFileDialog':
+      return isDeleteFileDialog(props) ? <DeleteFileDialog modal={props} /> : null;
     case 'NewCardDialog':
-      // no specific fields required for `NewCardDialog`, so just using Modal props
+      // no specific fields required for `NewCardDialog`, so no type predicate is needed
       return <NewCardDialog modal={props} />;
     case 'Notification':
       return isNotification(props) ? <Notification {...props} /> : null;

packages/renderer/src/store/slices/modals.ts

@@ -3,6 +3,7 @@ import {createEntityAdapter, createSlice} from '@reduxjs/toolkit';
 import type {
   CommitDialog,
   DeleteBranchDialog,
+  DeleteFileDialog,
   GitGraph,
   MergeDialog,
   Modal,
@@ -37,6 +38,9 @@ export const isNewBranchDialog = (modal: Modal | undefined): modal is NewBranchD
 export const isDeleteBranchDialog = (modal: Modal | undefined): modal is DeleteBranchDialog =>
   isDefined(modal) && modal.type === 'DeleteBranchDialog';
 
+export const isDeleteFileDialog = (modal: Modal | undefined): modal is DeleteFileDialog =>
+  isDefined(modal) && modal.type === 'DeleteFileDialog';
+
 export const isNotification = (modal: Modal | undefined): modal is Notification =>
   isDefined(modal) && modal.type === 'Notification';
 

packages/renderer/src/store/thunks/metafiles.ts

@@ -10,6 +10,7 @@ import {
   isVersionedMetafile,
   isVirtualMetafile,
   metafileAdded,
+  metafileRemoved,
   metafileUpdated,
 } from '../slices/metafiles';
 import {addBranch, fetchBranch, updateBranch} from './branches';
@@ -49,6 +50,7 @@ import {
   uuid,
   worktreeStatus,
   writeFileAsync,
+  unlink,
 } from '#preload';
 
 /**
@@ -336,6 +338,32 @@ export const saveFile = createAppAsyncThunk<boolean, {id: UUID; filepath?: strin
   },
 );
 
+/**
+ * Delete file from the filesystem and remove Metafile object from the store.
+ * @param obj - A destructured object for named parameters.
+ * @param obj.id - The UUID of a {@link Metafile} object that should be deleted.
+ * @returns {boolean} A boolean indicating true if the filesystem and metafile were successfully
+ * deleted, false otherwise.
+ */
+export const deleteFile = createAppAsyncThunk<boolean, UUID>(
+  'metafiles/deleteFile',
+  async (id, thunkAPI) => {
+    const metafile = thunkAPI.getState().metafiles.entities[id];
+
+    if (isFilebasedMetafile(metafile)) {
+      // delete file
+      await unlink(metafile.path);
+      // remove metafile
+      thunkAPI.dispatch(metafileRemoved(metafile.id));
+      // update parent metafile
+      const parent = await thunkAPI.dispatch(fetchParentMetafile(metafile)).unwrap();
+      if (parent) thunkAPI.dispatch(updateDirectoryMetafile(parent));
+      return true;
+    }
+    return false;
+  },
+);
+
 export const stageMetafile = createAppAsyncThunk<void, UUID>(
   'metafiles/stageMetafile',
   async (id, thunkAPI) => {

types/@syn-types/app.d.ts

@@ -114,6 +114,7 @@ export type ModalType =
   | 'BranchList'
   | 'CloneSelector'
   | 'DeleteBranchDialog'
+  | 'DeleteFileDialog'
   | 'GitGraph'
   | 'MergeDialog'
   | 'MergeSelector'

types/@syn-types/modal.d.ts

@@ -14,6 +14,7 @@ export type Modal = {
   Partial<MergeDialogProps> &
   Partial<NewBranchDialogProps> &
   Partial<DeleteBranchDialogProps> &
+  Partial<DeleteFileDialogProps> &
   Partial<NotificationProps> &
   Partial<RevertCommitDialogProps>;
 
@@ -44,6 +45,13 @@ export type MergeDialogProps = {
   readonly mode?: MergeAction;
 };
 
+/** A modal for deleting an existinf file within the filesystem and Redux store. */
+export type DeleteFileDialog = Prettify<Override<Modal, DeleteFileDialogProps>>;
+export type DeleteFileDialogProps = {
+  /** The UUID for associated Metafile object. */
+  readonly metafile: UUID;
+};
+
 /** A modal for creating a new branch within the filesystem and Redux store. */
 export type NewBranchDialog = Prettify<Override<Modal, NewBranchDialogProps>>;
 export type NewBranchDialogProps = {