From 358fdd9a7ae7299fa86b6cbcbe2b77e249750586 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 14 Jul 2023 12:21:17 -0700
Subject: [PATCH] fix: dropdown content keyline conditional display

---
 _data/serverState.ts                       |  5 +++--
 components/UserProfile/DropdownContent.vue | 14 +++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/_data/serverState.ts b/_data/serverState.ts
index e5959f80a..f5591684e 100644
--- a/_data/serverState.ts
+++ b/_data/serverState.ts
@@ -29,7 +29,7 @@ const blacklistedGuid = '154B-00EE-0700-9B50CF819816';
 // EBLACKLISTED1
 // EBLACKLISTED2
 // ENOCONN
-const state: string = 'EGUID';
+const state: string = 'BASIC';
 
 const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
 let expireTime = 0;
@@ -55,7 +55,8 @@ const serverState = {
   "license": "",
   "locale": "en_US",
   "name": "fuji",
-  "connectPluginInstalled": "dynamix.unraid.net.staging.plg",
+  // "connectPluginInstalled": "dynamix.unraid.net.staging.plg",
+  "connectPluginInstalled": "",
   "registered": false,
   "regGen": 0,
   // "regGuid": "0781-5583-8355-81071A2B0211",
diff --git a/components/UserProfile/DropdownContent.vue b/components/UserProfile/DropdownContent.vue
index f029708bc..fad0a53f2 100644
--- a/components/UserProfile/DropdownContent.vue
+++ b/components/UserProfile/DropdownContent.vue
@@ -3,6 +3,7 @@ import { storeToRefs } from 'pinia';
 import { ArrowTopRightOnSquareIcon, CogIcon, InformationCircleIcon, } from '@heroicons/vue/24/solid';
 
 import { ACCOUNT, CONNECT_DASHBOARD, PLUGIN_SETTINGS } from '~/helpers/urls';
+import { useErrorsStore } from '~/store/errors';
 import { usePromoStore } from '~/store/promo';
 import { useServerStore } from '~/store/server';
 import type { UserProfileLink } from '~/types/userProfile';
@@ -10,8 +11,11 @@ import type { UserProfileLink } from '~/types/userProfile';
 const myServersEnv = ref<string>('Staging');
 const devEnv = ref<string>('development');
 
+const errorsStore = useErrorsStore();
 const promoStore = usePromoStore();
+
 const { keyActions, connectPluginInstalled, registered, stateData } = storeToRefs(useServerStore());
+const { errors } = storeToRefs(errorsStore);
 
 const signInAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signIn') ?? []);
 const signOutAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signOut') ?? []);
@@ -66,6 +70,10 @@ const links = computed(():UserProfileLink[] => {
     ),
   ];
 });
+
+const showErrors = computed(() => errors.value.length);
+const showConnectStatus = computed(() => !stateData.value.error && registered.value && connectPluginInstalled.value);
+const showKeyline = computed(() => (showErrors.value || showConnectStatus.value) && keyActions.value?.length && links.value.length);
 </script>
 
 <template>
@@ -81,10 +89,10 @@ const links = computed(():UserProfileLink[] => {
       </span>
     </header>
     <ul class="list-reset flex flex-col gap-y-4px p-0">
-      <UpcDropdownError />
-      <UpcDropdownConnectStatus v-if="!stateData.error && registered && connectPluginInstalled" class="mt-8px" />
+      <UpcDropdownError v-if="showErrors" />
+      <UpcDropdownConnectStatus v-if="showConnectStatus" class="mt-8px" />
 
-      <li v-if="keyActions || links.length" class="m-8px">
+      <li v-if="showKeyline" class="m-8px">
         <UpcKeyline />
       </li>