Update Files tab left panel menu in Drag and Drop

[bfekadu21]

Description

Figma link

Requirements

Update the left panel menu for the Files tab based on the designs above. Here is how it should work: A folder can have multiple files nested within it. Clicking on the 3 dots icon allows the user to rename, duplicate, or delete a file or folder. If "Delete" is selected, a modal should appear on the screen (see Figma link for modal design). User can select multiple files to delete or duplicate by clicking on the check boxes next to the folder or file. Hover text should appear when the user hovers on the icons (see Figma).

[Vishal24-Kanini]

Hi,
I have done the code analysis and UX/UI analysis for the ticket and started working on the task.
Work is in progress.

[Vishal24-Kanini]

Hi,

• I have created the three dot icon align with folder or files, so that the user can rename, duplicate, or delete a file or folder.

• when select rename form menu modal, user is allowed to rename and when clicks on check icon to save , it will update the name

• i have created the api payload for rename functionality, but most likely we a need reactor for this in backend to update data.

Work is in progress.

[Vishal24-Kanini]

Hi,
below are the today's updates that has been implemented.

• If "Delete" is selected, then user can select file or folder by clicking on the check boxes next to the folder or file.

• only that folder is selected for delete shows with checkboxes next to folder and it's files.
• cancel and delete button is also there for that folder which is selected.
• modal is also pop-out after selecting the checkboxes then click on Delete button below to them.
• complete folder is deleteable as of now.

Work is in progress to delete multiple files at the same time.

[Vishal24-Kanini]

Hi,
below are the today's updates that has been implemented.

• if folder is selected for delete, all of it's files get checked by default. User can unchecked and checked later.

• When click on delete button below root folder, it will trigger confirm modal

Note

• As of now if whole folder is checked can be delete along with it's files if they are checked also.
• Single file can be delete if only one is checked.
• To delete multiple files we need to modify DeleteAsset functionality at the backend , we are sending array of multiple files paths which needs to handle at the backend for successful multiple deletion.

for rename we also need a reactor at the backend.

[Vishal24-Kanini]

Hi @johbaxter
as discussed we need one new reactor and one needs to be modified at the backend.

• To delete multiple files we need to modify (DeleteAsset) functionality at the backend , we are sending array of multiple files paths which needs to handle at the backend for successful multiple deletion.
• To rename the file or folder name we also need a reactor at the backend.

[johbaxter]

@rameshpaulraj -> Can we create the backend for this ticket and link it here

[Vishal24-Kanini]

Hi @rameshpaulraj
below is the code for old reactor and updated reactor to delete files for your reference:

• old Reactor

await monolithStore.runQuery(
      `DeleteAsset(filePath=["${fileDeletePath}"], space=["${space}"]);`,
   );

• updated reactor

await monolithStore.runQuery(
  `DeleteAsset(filePath=[${fileDeletePaths.map(p => `"${p}"`).join(',')}], space=["${space}"]);`
);

[Vishal24-Kanini]

Hi,
below are the updates that has been implemented.
I have tried to implement the Duplicating files or folder functionality on the FE side. i already developed the feasibility for user to checked multiple files within a folder or checked the complete folder or unchecked as desired.

[Vishal24-Kanini]

Hi,
below are the updates that has been implemented today.

• on FE side I have created the functionality for duplicating files or folder. I have modified the FE payload which sends the multiple files paths or single file/folder to the backend.

• if we select the folder only without any files, it will get duplicated with the counter in parenthesis like below :

• if we select folder along with only one file inside it, it will get duplicated with new folder and file name remain same as discussed

• if we select a folder and multiple files inside it , it will throw error from backend side, means we need to modify below reactors if possible -> @rameshpaulraj

MakeDirectory(filePath=["version/assets/New (1)/"], space=["2bfae3b6-8ccc-4b20-8276-4f4a384f40e2"]);

SaveAsset(fileName=["version/assets/New (1)/New1.json","version/assets/New (1)/New2.json"], content=[""], space=["2bfae3b6-8ccc-4b20-8276-4f4a384f40e2"]);
CommitAsset(filePath=["version/assets/New (1)/New1.json","version/assets/New (1)/New2.json"], comment=["Duplicating files"], space=["2bfae3b6-8ccc-4b20-8276-4f4a384f40e2"]);

• if we select only one file and want to duplicate within a folder, i am getting success response from backend but on refresh new file is not visible on UI

• if we select multiple files for duplicate, getting error from backend as of now

[Vishal24-Kanini]

Hi,
below are the updates that has been implemented so far.

• I am able to duplicate the complete folder along with it's selected files. earlier we were not sending content of each file. I talk with backend guy and I put modification like before calling backend, I am fetching content for each file and send that content along with each checked file.

• if we selected only files and going to duplicate them within a folder, the files getting overwrite again and again. we need to handle the files naming convention as same as folder.