From 9bda99b1d136d6f693d8c42bc12b31eef47b60b8 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Mon, 26 Jun 2023 15:06:10 -0700
Subject: [PATCH] test: setup for troubleshooting

---
 components/UserProfile/DropdownError.vue | 21 +++++++++++++--------
 components/UserProfile/DropdownItem.vue  |  2 +-
 store/callback.ts                        |  3 ++-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/UserProfile/DropdownError.vue b/components/UserProfile/DropdownError.vue
index 4af84296e..290c7930c 100644
--- a/components/UserProfile/DropdownError.vue
+++ b/components/UserProfile/DropdownError.vue
@@ -1,32 +1,37 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { InformationCircleIcon } from '@heroicons/vue/24/solid';
+import { useAccountStore } from '~/store/account';
 import { useServerStore } from '~/store/server';
+import { CONNECT_FORUMS } from '~/helpers/urls';
 import type { UserProfileLink } from '~/types/userProfile';
 
+const accountStore = useAccountStore();
 const { stateData } = storeToRefs(useServerStore());
 const links = ref<UserProfileLink[]>([
   {
-    click: () => console.debug('Placeholder Button'),
+    click: () => accountStore.troubleshoot(),
     external: true,
     icon: InformationCircleIcon,
     text: 'Placeholder Button',
   },
   {
-    click: () => console.debug('Support Button'),
     external: true,
+    href: CONNECT_FORUMS,
     icon: InformationCircleIcon,
-    text: 'Support Button',
+    text: 'Connect Support Forum',
   },
 ]);
 </script>
 
 <template>
-  <ul v-if="stateData.error" class="list-reset flex flex-col gap-y-4px -mx-8px mb-4px py-12px px-16px bg-unraid-red/40 rounded">
+  <ul v-if="stateData.error" class="list-reset flex flex-col gap-y-4px -mx-8px mb-4px py-12px px-16px bg-unraid-red/60 rounded">
     <h3 class="text-18px">{{ stateData.heading }}</h3>
     <p class="text-14px opacity-85">{{ stateData.message }}</p>
-    <li v-for="(link, index) in links" :key="`link_${index}`" class="-mx-8px">
-      <UpcDropdownItem :item="link" />
-    </li>
+    <template v-if="links">
+      <li v-for="(link, index) in links" :key="`link_${index}`" class="-mx-8px">
+        <UpcDropdownItem :item="link" />
+      </li>
+    </template>
   </ul>
-</template>
\ No newline at end of file
+</template>
diff --git a/components/UserProfile/DropdownItem.vue b/components/UserProfile/DropdownItem.vue
index db8f94d74..26d753497 100644
--- a/components/UserProfile/DropdownItem.vue
+++ b/components/UserProfile/DropdownItem.vue
@@ -15,7 +15,7 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
 <template>
   <component
     :is="item?.click ? 'button' : 'a'"
-    @click.stop="item?.click() ?? null"
+    @click.stop="item?.click ? item?.click() : null"
     :href="item?.href ?? null"
     :title="item?.title ?? null"
     :target="item?.external ? '_blank' : null"
diff --git a/store/callback.ts b/store/callback.ts
index 2cad7d58f..7c0d51616 100644
--- a/store/callback.ts
+++ b/store/callback.ts
@@ -28,7 +28,8 @@ export type ServerStateDataActionType =
   | 'recover'
   | 'replace'
   | 'trialExtend'
-  | 'trialStart';
+  | 'trialStart'
+  | 'troubleshoot';
 
 export interface ServerPayload {
   server: ServerAccountCallbackServerData;