React Plugin install dialog (closes #75)

backend/browser.py

@@ -80,10 +80,13 @@ class PluginBrowser:
     async def request_plugin_install(self, artifact, version, hash):
         request_id = str(time())
         self.install_requests[request_id] = PluginInstallContext(artifact, version, hash)
-        tab = await get_tab("QuickAccess")
+        tab = await get_tab("SP")
         await tab.open_websocket()
-        await tab.evaluate_js(f"addPluginInstallPrompt('{artifact}', '{version}', '{request_id}')")
+        await tab.evaluate_js(f"DeckyPluginLoader.addPluginInstallPrompt('{artifact}', '{version}', '{request_id}')")
     
     async def confirm_plugin_install(self, request_id):
         request = self.install_requests.pop(request_id)
-        await self._install(request.gh_url, request.version, request.hash)
+        await self._install(request.gh_url, request.version, request.hash)
+
+    def cancel_plugin_install(self, request_id):
+        self.install_requests.pop(request_id)

backend/utilities.py

@@ -12,6 +12,7 @@ class Utilities:
         self.util_methods = {
             "ping": self.ping,
             "http_request": self.http_request,
+            "cancel_plugin_install": self.cancel_plugin_install,
             "confirm_plugin_install": self.confirm_plugin_install,
             "execute_in_tab": self.execute_in_tab,
             "inject_css_into_tab": self.inject_css_into_tab,
@@ -26,8 +27,7 @@ class Utilities:
     async def _handle_server_method_call(self, request):
         method_name = request.match_info["method_name"]
         try:
-            method_info = await request.json()
+            args = await request.json()
-            args = method_info["args"]
         except JSONDecodeError:
             args = {}
         res = {}
@@ -43,6 +43,9 @@ class Utilities:
     async def confirm_plugin_install(self, request_id):
         return await self.context.plugin_browser.confirm_plugin_install(request_id)
 
+    def cancel_plugin_install(self, request_id):
+        return self.context.plugin_browser.cancel_plugin_install(request_id)
+
     async def http_request(self, method="", url="", **kwargs):
         async with ClientSession() as web:
             async with web.request(method, url, **kwargs) as res:

frontend/src/plugin-loader.tsx

@@ -1,3 +1,4 @@
+import { ModalRoot, showModal, staticClasses } from 'decky-frontend-lib';
 import { FaPlug } from 'react-icons/fa';
 
 import { DeckyState, DeckyStateContextProvider } from './components/DeckyState';
@@ -40,6 +41,25 @@ class PluginLoader extends Logger {
     });
   }
 
+  public addPluginInstallPrompt(artifact: string, version: string, request_id: string) {
+    showModal(
+      <ModalRoot
+        onOK={() => {
+          console.log('ok');
+          this.callServerMethod('confirm_plugin_install', { request_id });
+        }}
+        onCancel={() => {
+          console.log('nope');
+          this.callServerMethod('cancel_plugin_install', { request_id });
+        }}
+      >
+        <div className={staticClasses.Title}>
+          Install {artifact} version {version}?
+        </div>
+      </ModalRoot>,
+    );
+  }
+
   public dismountAll() {
     for (const plugin of this.plugins) {
       this.log(`Dismounting ${plugin.name}`);
@@ -82,33 +102,22 @@ class PluginLoader extends Logger {
     });
   }
 
+  async callServerMethod(methodName: string, args = {}) {
+    const response = await fetch(`http://127.0.0.1:1337/methods/${methodName}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(args),
+    });
+
+    return response.json();
+  }
+
   createPluginAPI(pluginName: string) {
     return {
       routerHook: this.routerHook,
-      async callServerMethod(methodName: string, args = {}) {
+      callServerMethod: this.callServerMethod,
-        const response = await fetch(`http://127.0.0.1:1337/methods/${methodName}`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(args),
-        });
-
-        return response.json();
-      },
-      async callPluginMethod(methodName: string, args = {}) {
-        const response = await fetch(`http://127.0.0.1:1337/plugins/${pluginName}/methods/${methodName}`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            args,
-          }),
-        });
-
-        return response.json();
-      },
       fetchNoCors(url: string, request: any = {}) {
         let args = { method: 'POST', headers: {}, body: '' };
         const req = { ...args, ...request, url, data: request.body };