Delete button in FS view

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;
+        });
     }
 }

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',

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>

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>