From c5cc372d7f669416bc7d5c154c368c8a65174e5d Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 12 Sep 2023 17:19:53 -0700
Subject: [PATCH] refactor(web): install plugin composable extensibility

---
 web/components/UserProfile/Promo.vue | 10 +++++++---
 web/composables/installPlugin.ts     | 25 +++++++++++--------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/web/components/UserProfile/Promo.vue b/web/components/UserProfile/Promo.vue
index 593fe353a..5f0a21d23 100644
--- a/web/components/UserProfile/Promo.vue
+++ b/web/components/UserProfile/Promo.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 /**
- * @todo devEnv should be a .env variable so we can gate staging installs
- *
  * @todo future idea – turn this into a carousel. each feature could have a short video if we ever them
  */
 import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
@@ -64,6 +62,12 @@ const features = ref<UserProfilePromoFeature[]>([
 ]);
 
 const staging = ref(false);
+
+const connectPluginUrl = computed((): string => {
+  const url = new URL(`https://sfo2.digitaloceanspaces.com/unraid-dl/unraid-api/dynamix.unraid.net${staging.value ? '.staging.plg' : '.plg'}`);
+  return url.toString();
+});
+
 const { install } = useInstallPlugin();
 </script>
 
@@ -106,7 +110,7 @@ const { install } = useInstallPlugin();
         </SwitchGroup>
         <button
           class="text-white text-14px text-center w-full flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md bg-gradient-to-r from-unraid-red to-orange hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60"
-          @click="install({ staging, update: false })"
+          @click="install({ pluginUrl: connectPluginUrl, modalTitle: t('Installing Connect') })"
         >
           {{ staging ? 'Install Connect Staging' : t('Install Connect') }}
         </button>
diff --git a/web/composables/installPlugin.ts b/web/composables/installPlugin.ts
index 7e9348a0f..daf8be8c7 100644
--- a/web/composables/installPlugin.ts
+++ b/web/composables/installPlugin.ts
@@ -1,30 +1,27 @@
+export interface InstallPluginPayload {
+  modalTitle: string;
+  pluginUrl: string;
+  update?: boolean;
+}
+
 const useInstallPlugin = () => {
-  const install = (payload = { staging: false, update: false }) => {
+  const install = (payload: InstallPluginPayload) => {
     try {
-      const file = `https://sfo2.digitaloceanspaces.com/unraid-dl/unraid-api/dynamix.unraid.net${payload?.staging ? '.staging.plg' : '.plg'}`;
-
-      if (!payload.update) {
-        // after initial install, the dropdown store looks for this to automatically open the launchpad dropdown
-        sessionStorage.setItem('clickedInstallPlugin', '1');
-      }
-      const modalTitle = payload.update ? 'Updating Connect (beta)' : 'Installing Connect (beta)';
-
       // @ts-ignore – `openPlugin` will be included in 6.10.4+ DefaultPageLayout
       if (typeof openPlugin === 'function') {
         // @ts-ignore
         openPlugin(
-          `plugin ${payload.update ? 'update' : 'install'} ${file}`,
-          modalTitle,
+          `plugin ${payload.update ? 'update' : 'install'} ${payload.pluginUrl}`,
+          payload.modalTitle,
           '',
           'refresh',
         );
       } else {
         // `openBox()` is defined in the webgui's DefaultPageLayout.php and used when openPlugin is not available
-
         // @ts-ignore
         openBox(
-          `/plugins/dynamix.plugin.manager/scripts/plugin&arg1=install&arg2=${file}`,
-          modalTitle,
+          `/plugins/dynamix.plugin.manager/scripts/plugin&arg1=install&arg2=${payload.pluginUrl}`,
+          payload.modalTitle,
           600,
           900,
           true,