From 2454ace415b4d3b66db7905264021bbf122566c3 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Mon, 11 Mar 2024 14:38:21 -0400
Subject: [PATCH] Delete button in FS view (#552)

* [WIP] delete button in FS view

* typo
---
 .../RokuFileSystemViewViewProvider.ts         | 10 ++++++++
 src/viewProviders/ViewProviderCommand.ts      |  1 +
 .../RokuFileSystemView/FileSystemEntry.svelte | 11 ++++++++-
 .../RokuFileSystemView.svelte                 | 24 +++++++++++++------
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/viewProviders/RokuFileSystemViewViewProvider.ts b/src/viewProviders/RokuFileSystemViewViewProvider.ts
index fb6c2505..59e07b3c 100644
--- a/src/viewProviders/RokuFileSystemViewViewProvider.ts
+++ b/src/viewProviders/RokuFileSystemViewViewProvider.ts
@@ -29,5 +29,15 @@ export class RokuFileSystemViewViewProvider extends BaseRdbViewProvider {
             await vscode.commands.executeCommand('workbench.action.files.setActiveEditorReadonlyInSession');
             return true;
         });
+
+        this.addMessageCommandCallback(ViewProviderCommand.deleteRokuFile, async (message) => {
+            const pathContentsInfo = message.context;
+            await this.dependencies.rtaManager.onDeviceComponent.deleteFile({
+                path: pathContentsInfo.path
+            });
+
+            await vscode.commands.executeCommand(VscodeCommand.rokuFileSystemViewRefresh);
+            return true;
+        });
     }
 }
diff --git a/src/viewProviders/ViewProviderCommand.ts b/src/viewProviders/ViewProviderCommand.ts
index 8d9b38a5..f77853cf 100644
--- a/src/viewProviders/ViewProviderCommand.ts
+++ b/src/viewProviders/ViewProviderCommand.ts
@@ -4,6 +4,7 @@ export enum ViewProviderCommand {
     getStoredRokuAppOverlays = 'getStoredRokuAppOverlays',
     getWorkspaceState = 'getWorkspaceState',
     openRokuFile = 'openRokuFile',
+    deleteRokuFile = 'deleteRokuFile',
     runRokuAutomationConfig = 'runRokuAutomationConfig',
     sendMessageToWebviews = 'sendMessageToWebviews',
     setManualIpAddress = 'setManualIpAddress',
diff --git a/webviews/src/views/RokuFileSystemView/FileSystemEntry.svelte b/webviews/src/views/RokuFileSystemView/FileSystemEntry.svelte
index 63551d53..36c0efc6 100644
--- a/webviews/src/views/RokuFileSystemView/FileSystemEntry.svelte
+++ b/webviews/src/views/RokuFileSystemView/FileSystemEntry.svelte
@@ -1,6 +1,6 @@
 
 <script lang="ts">
-    import { File, Database, Folder } from 'svelte-codicons';
+    import { File, Database, Folder, Trash } from 'svelte-codicons';
     import { createEventDispatcher } from 'svelte';
     import type { PathContentsInfo } from '../../shared/types';
     const dispatch = createEventDispatcher();
@@ -17,6 +17,10 @@
         dispatch('open', entry);
     }
 
+    function onDeleteClick() {
+        dispatch('delete', entry);
+    }
+
     function padNum(number: number) {
         return number.toString().padStart(2, '0');
     }
@@ -74,4 +78,9 @@
         <vscode-data-grid-cell grid-column="5">{formatDate(entry.ctime)}</vscode-data-grid-cell>
     {/if}
 {/if}
+{#if entry.permissions === "rw" && (entry.type === 'directory' || entry.type === 'file')}
+    <vscode-data-grid-cell grid-column="6">
+        <vscode-button on:click={onDeleteClick}><Trash/></vscode-button>
+    </vscode-data-grid-cell>
+{/if}
 </vscode-data-grid-row>
diff --git a/webviews/src/views/RokuFileSystemView/RokuFileSystemView.svelte b/webviews/src/views/RokuFileSystemView/RokuFileSystemView.svelte
index b923f4be..453024fc 100644
--- a/webviews/src/views/RokuFileSystemView/RokuFileSystemView.svelte
+++ b/webviews/src/views/RokuFileSystemView/RokuFileSystemView.svelte
@@ -24,33 +24,35 @@
         name?: true,
         size?: true,
         dateModified?: true,
-        dateCreated?: true
+        dateCreated?: true,
+        delete?: true
     };
 
     $:{
         if(containerWidth > 600) {
-            gridTemplateColumns = '24px 6fr 2fr 4fr 4fr'
+            gridTemplateColumns = '24px 6fr 2fr 4fr 4fr 1fr'
             columnsToShow = {
                 name: true,
                 size: true,
                 dateModified: true,
-                dateCreated: true
+                dateCreated: true,
+                delete: true
             }
         } else if(containerWidth > 400) {
-            gridTemplateColumns = '24px 6fr 2fr 4fr 0'
+            gridTemplateColumns = '24px 6fr 2fr 4fr 0 0'
             columnsToShow = {
                 name: true,
                 size: true,
                 dateModified: true,
             }
         } else if(containerWidth > 300) {
-            gridTemplateColumns = '24px 6fr 2fr 0 0'
+            gridTemplateColumns = '24px 6fr 2fr 0 0 0'
             columnsToShow = {
                 name: true,
                 size: true
             }
         } else {
-            gridTemplateColumns = '24px 6fr 0 0 0'
+            gridTemplateColumns = '24px 6fr 0 0 0 0'
             columnsToShow = {
                 name: true
             }
@@ -102,6 +104,11 @@
         }
     }
 
+    function onDelete(event: CustomEvent<PathContentsInfo>) {
+        const pathContentsInfo = event.detail;
+        intermediary.sendCommand(ViewProviderCommand.deleteRokuFile, pathContentsInfo);
+    }
+
     /**
      * Handles retrieving info about the current path from the Roku device and updating the UI accordingly
      * @param path the path we want to update the UI based on
@@ -296,10 +303,13 @@
                         {#if columnsToShow.dateCreated}
                             <SortableGridHeader on:click={onSortColumnChange} title="Date Created" column={5} />
                         {/if}
+                        {#if columnsToShow.delete}
+                            <vscode-data-grid-cell grid-column="6">Delete</vscode-data-grid-cell>
+                        {/if}
                     </vscode-data-grid-row>
 
                     {#each currentPathContentsInfo as entry}
-                        <FileSystemEntry on:open={onOpen} entry={entry} columnsToShow={columnsToShow} />
+                        <FileSystemEntry on:open={onOpen} on:delete={onDelete} entry={entry} columnsToShow={columnsToShow} />
                     {/each}
                 </vscode-data-grid>
             </div>