Add support for removing nodes in SceneGraph Inspector (#578)

Co-authored-by: Brian Leighty <bleighty@tubi.tv>
rokucommunity · Jun 12, 2024 · 973d345 · 973d345
1 parent 71af907
commit 973d345
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/webviews/src/ExtensionIntermediary.ts b/webviews/src/ExtensionIntermediary.ts
@@ -4,7 +4,7 @@ import { RequestType } from 'roku-test-automation/client/dist/types/OnDeviceComp
 import type { VscodeCommand } from '../../src/commands/VscodeCommand';
 import type { ViewProviderEvent } from '../../src/viewProviders/ViewProviderEvent';
 import { ViewProviderCommand } from '../../src/viewProviders/ViewProviderCommand';
-import type { DeleteEntireRegistrySectionsArgs, DeleteNodeReferencesArgs, DeleteRegistrySectionsArgs, FindNodesAtLocationArgs, GetFocusedNodeArgs, GetNodesInfoArgs, GetNodesWithPropertiesArgs, GetValueArgs, GetValuesArgs, HasFocusArgs, IsInFocusChainArgs, OnFieldChangeOnceArgs, ReadRegistryArgs, RequestOptions, SetValueArgs, StoreNodeReferencesArgs, WriteRegistryArgs, GetVolumeListArgs, GetDirectoryListingArgs, StatPathArgs, RenameFileArgs, DeleteFileArgs, CreateDirectoryArgs, RemoveNodeChildrenArgs, FocusNodeArgs } from 'roku-test-automation';
+import type { DeleteEntireRegistrySectionsArgs, DeleteNodeReferencesArgs, DeleteRegistrySectionsArgs, FindNodesAtLocationArgs, GetFocusedNodeArgs, GetNodesInfoArgs, GetNodesWithPropertiesArgs, GetValueArgs, GetValuesArgs, HasFocusArgs, IsInFocusChainArgs, OnFieldChangeOnceArgs, ReadRegistryArgs, RequestOptions, SetValueArgs, StoreNodeReferencesArgs, WriteRegistryArgs, GetVolumeListArgs, GetDirectoryListingArgs, StatPathArgs, RenameFileArgs, DeleteFileArgs, CreateDirectoryArgs, RemoveNodeArgs, RemoveNodeChildrenArgs, FocusNodeArgs } from 'roku-test-automation';
 
 class ExtensionIntermediary {
     private inflightRequests = {};
@@ -249,6 +249,10 @@ class ODCIntermediary {
         return this.sendOdcMessage<ReturnType<typeof rta.odc.removeNodeChildren>>(RequestType.removeNodeChildren, args, options);
     }
 
+    public async removeNode(args: RemoveNodeArgs, options?: RequestOptions) {
+        return this.sendOdcMessage<ReturnType<typeof rta.odc.removeNode>>(RequestType.removeNode, args, options);
+    }
+
     public async focusNode(args: FocusNodeArgs, options?: RequestOptions) {
         return this.sendOdcMessage<ReturnType<typeof rta.odc.focusNode>>(RequestType.focusNode, args, options);
     }

diff --git a/webviews/src/views/SceneGraphInspectorView/Branch.svelte b/webviews/src/views/SceneGraphInspectorView/Branch.svelte
@@ -3,10 +3,11 @@
     import throttle from 'just-throttle';
     import { odc } from '../../ExtensionIntermediary';
     import { utils } from '../../utils';
-    import { Eye, EyeClosed, DebugBreakpointDataUnverified, Move, Issues } from 'svelte-codicons';
+    import { Eye, EyeClosed, DebugBreakpointDataUnverified, Move, Issues, Trash } from 'svelte-codicons';
     import Chevron from '../../shared/Chevron.svelte';
     import type { TreeNodeWithBase } from '../../shared/types';
     import { createEventDispatcher } from 'svelte';
+    import type { TreeNode } from 'roku-test-automation';
     const dispatch = createEventDispatcher();
 
     export let treeNode: TreeNodeWithBase;
@@ -177,6 +178,18 @@
             keyPath: treeNode.keyPath
         });
     }
+
+    async function removeNode() {
+        await odc.removeNode({
+            keyPath: treeNode.keyPath
+        });
+        dispatch('nodeRemoved', treeNode);
+    }
+
+    function onChildNodeRemoved(event: CustomEvent<TreeNode>) {
+        const removedChildTreeNode = event.detail;
+        treeNode.children = treeNode.children.filter(child => child.keyPath !== removedChildTreeNode.keyPath);
+    }
 </script>
 
 <style>
@@ -271,6 +284,11 @@
         </span>
     </div>
     <div class="actions">
+        {#if treeNode.parentRef >= 0}
+            <span title="Remove Node" class="icon-button" on:click|stopPropagation={removeNode}>
+                <Trash />
+            </span>
+        {/if}
         {#if treeNode.visible !== undefined}
             <span title="Focus Node" class="icon-button" on:click|stopPropagation={focusNode}>
                 <Issues />
@@ -300,6 +318,7 @@
             on:openNode
             on:treeNodeFocused
             on:childExpanded={onChildExpanded}
+            on:nodeRemoved={onChildNodeRemoved}
             depth={depth + 1}
             treeNode={treeNodeChild}
             selectTreeNode={selectTreeNode}