From 220a64ebdcbf4a986dc5eae0dd84ab7a1a47052b Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Mon, 30 Oct 2023 17:24:23 -0700
Subject: [PATCH] chore(web): type fixes

---
 web/_data/serverState.ts                    | 41 ++++++++++----------
 web/components/Registration.ce.vue          |  2 +-
 web/components/Registration/Item.vue        |  2 +-
 web/components/UpdateOs/Status.vue          | 42 +++++++++++----------
 web/components/UserProfile/DropdownItem.vue |  2 +-
 web/composables/dateTime.ts                 |  2 +-
 web/composables/services/keyServer.ts       |  2 +-
 web/fix-array-type.ts                       |  2 +-
 web/helpers/urls.ts                         |  1 -
 web/pages/index.vue                         |  5 ++-
 web/store/errors.ts                         |  2 +-
 web/store/unraidApi.ts                      |  2 +-
 web/store/updateOs.ts                       |  1 -
 web/store/updateOsActions.ts                |  6 +--
 web/tailwind.config.ts                      |  1 +
 web/types/server.ts                         |  4 +-
 web/types/userProfile.ts                    |  1 +
 17 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index 2ad454892..8beff26c1 100644
--- a/web/_data/serverState.ts
+++ b/web/_data/serverState.ts
@@ -16,6 +16,14 @@ const staticGuid = '1111-1111-5GDB-123412341234';
 // const regWizTime = `1616711990500_${randomGuid}`;
 // const blacklistedGuid = '154B-00EE-0700-9B50CF819816';
 
+const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
+const twoDaysAgo = Date.now() - 2 * 24 * 60 * 60 * 1000; // 2 days ago
+// const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000; // 1 day ago
+const oneHourFromNow = Date.now() + 60 * 60 * 1000; // 1 hour from now
+const oneDayFromNow = Date.now() + 24 * 60 * 60 * 1000; // 1 day from now
+let expireTime = 0;
+let regExp: number | undefined;
+
 // ENOKEYFILE
 // TRIAL
 // BASIC
@@ -38,10 +46,12 @@ let regTy = '';
 switch (state) {
   // @ts-ignore
   case 'EEXPIRED':
+    expireTime = uptime; // 1 hour ago
   // @ts-ignore
   case 'ENOCONN':
   // @ts-ignore
   case 'TRIAL':
+    expireTime = oneHourFromNow; // in 1 hour
     regTy = 'Trial';
   // @ts-ignore
   case 'BASIC':
@@ -54,8 +64,18 @@ switch (state) {
   // @ts-ignore
   case 'STARTER':
     regDev = 4;
+    // regExp = oneHourFromNow;
+    regExp = oneDayFromNow;
+    // regExp = oneDayAgo;
+    // regExp = uptime;
+    // regExp = 1696363920000; // nori.local's expiration
   // @ts-ignore
   case 'UNLEASHED':
+    // regExp = oneHourFromNow;
+    regExp = oneDayFromNow;
+    // regExp = oneDayAgo;
+    // regExp = uptime;
+    // regExp = 1696363920000; // nori.local's expiration
   // @ts-ignore
   case 'LIFETIME':
     if (regDev === 0) { regDev = 99999; }
@@ -63,27 +83,6 @@ switch (state) {
     break;
 }
 
-const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
-const twoDaysAgo = Date.now() - 2 * 24 * 60 * 60 * 1000; // 2 days ago
-// const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000; // 1 day ago
-const oneHourFromNow = Date.now() + 60 * 60 * 1000; // 1 hour from now
-const oneDayFromNow = Date.now() + 24 * 60 * 60 * 1000; // 1 day from now
-let expireTime = 0;
-if (state === 'TRIAL') {
-  expireTime = oneHourFromNow; // in 1 hour
-} else if (state === 'EEXPIRED') {
-  expireTime = uptime; // 1 hour ago
-}
-
-let regExp: number | undefined;
-if (state === 'STARTER' || state === 'UNLEASHED') {
-  // regExp = oneHourFromNow;
-  regExp = oneDayFromNow;
-  // regExp = oneDayAgo;
-  // regExp = uptime;
-  // regExp = 1696363920000; // nori.local's expiration
-}
-
 // const connectPluginInstalled = 'dynamix.unraid.net.staging.plg';
 const connectPluginInstalled = '';
 
diff --git a/web/components/Registration.ce.vue b/web/components/Registration.ce.vue
index 47c4347f6..3aff0b976 100644
--- a/web/components/Registration.ce.vue
+++ b/web/components/Registration.ce.vue
@@ -157,7 +157,7 @@ const items = computed((): RegistrationItemProps[] => {
         }]
       : []),
     // filter out renew action and only display other key actions…renew is displayed in RegistrationUpdateExpirationAction
-    ...(keyActions.value?.filter(action => !['renew'].includes(action.name)).length > 0
+    ...(keyActions.value && keyActions.value?.filter(action => !['renew'].includes(action.name)).length > 0
       ? [{
           label: t('License key actions'),
           component: KeyActions,
diff --git a/web/components/Registration/Item.vue b/web/components/Registration/Item.vue
index 477514d90..195fee3f9 100644
--- a/web/components/Registration/Item.vue
+++ b/web/components/Registration/Item.vue
@@ -3,7 +3,7 @@ import { ShieldExclamationIcon } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
 
 import { useThemeStore } from '~/store/theme';
-import { RegistrationItemProps } from '~/types/registration';
+import type { RegistrationItemProps } from '~/types/registration';
 
 withDefaults(defineProps<RegistrationItemProps>(), {
   error: false,
diff --git a/web/components/UpdateOs/Status.vue b/web/components/UpdateOs/Status.vue
index 09f36cd50..21b7c1687 100644
--- a/web/components/UpdateOs/Status.vue
+++ b/web/components/UpdateOs/Status.vue
@@ -103,26 +103,28 @@ const regExpOutput = computed(() => {
         >
           {{ t('Checking...') }}
         </UiBadge>
-        <UiBadge
-          v-else-if="rebootType === ''"
-          :color="available || availableWithRenewal ? 'orange' : 'green'"
-          :icon="available || availableWithRenewal ? BellAlertIcon : CheckCircleIcon"
-          :title="parsedReleaseTimestamp ? t('Last checked: {0}', [parsedReleaseTimestamp.relative]) : ''"
-        >
-          {{ (available
-            ? t('Unraid {0} Available', [available])
-            : (availableWithRenewal
-              ? t('Up-to-date with eligible releases')
-              : t('Up-to-date')))
-          }}
-        </UiBadge>
-        <UiBadge
-          v-else-if="rebootType !== ''"
-          :color="'yellow'"
-          :icon="ExclamationTriangleIcon"
-        >
-          {{ t(rebootTypeText) }}
-        </UiBadge>
+        <template v-else>
+          <UiBadge
+            v-if="rebootType === ''"
+            :color="available || availableWithRenewal ? 'orange' : 'green'"
+            :icon="available || availableWithRenewal ? BellAlertIcon : CheckCircleIcon"
+            :title="parsedReleaseTimestamp ? t('Last checked: {0}', [parsedReleaseTimestamp.relative]) : ''"
+          >
+            {{ (available
+              ? t('Unraid {0} Available', [available])
+              : (availableWithRenewal
+                ? t('Up-to-date with eligible releases')
+                : t('Up-to-date')))
+            }}
+          </UiBadge>
+          <UiBadge
+            v-else
+            :color="'yellow'"
+            :icon="ExclamationTriangleIcon"
+          >
+            {{ t(rebootTypeText) }}
+          </UiBadge>
+        </template>
       </div>
 
       <div class="shrink-0">
diff --git a/web/components/UserProfile/DropdownItem.vue b/web/components/UserProfile/DropdownItem.vue
index 9cd31f929..fbcee0901 100644
--- a/web/components/UserProfile/DropdownItem.vue
+++ b/web/components/UserProfile/DropdownItem.vue
@@ -32,7 +32,7 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
       'rounded-md': rounded,
       'disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed': item?.disabled,
     }"
-    @click.stop="item?.click ? item?.click(clickParams) : null"
+    @click.stop="item?.click ? item?.click(item?.clickParams) : null"
   >
     <span class="leading-snug inline-flex flex-row items-center gap-x-8px">
       <component :is="item?.icon" class="flex-shrink-0 text-current w-16px h-16px" aria-hidden="true" />
diff --git a/web/composables/dateTime.ts b/web/composables/dateTime.ts
index c1e5887e7..e9f6aa1b1 100644
--- a/web/composables/dateTime.ts
+++ b/web/composables/dateTime.ts
@@ -1,6 +1,6 @@
 import dayjs, { extend } from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
-import { DateFormatOption, ServerDateTimeFormat, TimeFormatOption } from 'types/server';
+import type { DateFormatOption, ServerDateTimeFormat, TimeFormatOption } from '~/types/server';
 
 /** @see https://day.js.org/docs/en/display/format#localized-formats */
 extend(localizedFormat);
diff --git a/web/composables/services/keyServer.ts b/web/composables/services/keyServer.ts
index 1dd8fbefe..a3d68ca10 100644
--- a/web/composables/services/keyServer.ts
+++ b/web/composables/services/keyServer.ts
@@ -47,7 +47,7 @@ export const keyLatest = async (payload: KeyLatestPayload) => await KeyServer
   .formUrl(payload)
   .post();
 
-export const getOsReleaseBySha256 = async (sha256: string): Release => await KeyServer
+export const getOsReleaseBySha256 = async (sha256: string): Promise<Release> => await KeyServer
   .url(`/versions/sha256/${sha256}`)
   .get()
   .json();
diff --git a/web/fix-array-type.ts b/web/fix-array-type.ts
index 88274266f..181675cb4 100644
--- a/web/fix-array-type.ts
+++ b/web/fix-array-type.ts
@@ -6,7 +6,7 @@
  * @param {string*} str
  * @return {string}
  */
-function FixArrayType (str) {
+function FixArrayType (str: string) {
   if (str === 'Array') {
     return 'ArrayType';
   }
diff --git a/web/helpers/urls.ts b/web/helpers/urls.ts
index 8157dbfbf..3df2d2aaf 100644
--- a/web/helpers/urls.ts
+++ b/web/helpers/urls.ts
@@ -1,4 +1,3 @@
-import { OS_RELEASES } from '~/helpers/urls';
 const ACCOUNT = new URL(import.meta.env.VITE_ACCOUNT ?? 'https://account.unraid.net');
 const DOCS = new URL('https://docs.unraid.net');
 const FORUMS = new URL('https://forums.unraid.net');
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 441e261b4..55d4d7e77 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import AES from 'crypto-js/aes';
+import type { SendPayloads } from '~/store/callback';
 
 import { serverState } from '~/_data/serverState';
 
@@ -11,7 +12,7 @@ onBeforeMount(() => {
 const valueToMakeCallback = ref<string>('');
 const callbackDestination = ref<string>('');
 
-const createCallbackUrl = (payload: SendPayloads, sendType?: string) => { // params differs from callbackActions.send
+const createCallbackUrl = (payload: SendPayloads, sendType: string) => { // params differs from callbackActions.send
   console.debug('[callback.send]');
 
   valueToMakeCallback.value = payload; // differs from callbackActions.send
@@ -19,7 +20,7 @@ const createCallbackUrl = (payload: SendPayloads, sendType?: string) => { // par
   const stringifiedData = JSON.stringify({
     actions: [...payload],
     sender: window.location.href,
-    type: sendType ?? callbackActions.sendType,
+    type: sendType,
   });
   const encryptedMessage = AES.encrypt(
     stringifiedData,
diff --git a/web/store/errors.ts b/web/store/errors.ts
index ae7aadc02..06d8f782f 100644
--- a/web/store/errors.ts
+++ b/web/store/errors.ts
@@ -107,7 +107,7 @@ export const useErrorsStore = defineStore('errors', () => {
         await new Promise(resolve => setTimeout(resolve, 100));
         $panels = $modal.querySelectorAll('.allpanels');
       }
-      $panels.forEach(($panel) => {
+      $panels.forEach(($panel: HTMLDivElement) => {
         if ($panel.id === 'troubleshoot_panel') { $panel.style.display = 'block'; } else { $panel.style.display = 'none'; }
       });
     } catch (error) {
diff --git a/web/store/unraidApi.ts b/web/store/unraidApi.ts
index bb3051ea7..5dad258ec 100644
--- a/web/store/unraidApi.ts
+++ b/web/store/unraidApi.ts
@@ -8,7 +8,7 @@ import { provideApolloClient } from '@vue/apollo-composable';
 // import { logErrorMessages } from '@vue/apollo-util';
 import { createClient } from 'graphql-ws';
 import { defineStore, createPinia, setActivePinia } from 'pinia';
-import { UserProfileLink } from 'types/userProfile';
+import type { UserProfileLink } from '~/types/userProfile';
 
 import { WebguiUnraidApiCommand } from '~/composables/services/webgui';
 import { WEBGUI_GRAPHQL, WEBGUI_SETTINGS_MANAGMENT_ACCESS } from '~/helpers/urls';
diff --git a/web/store/updateOs.ts b/web/store/updateOs.ts
index 3c2a3473b..c1a1e3d87 100644
--- a/web/store/updateOs.ts
+++ b/web/store/updateOs.ts
@@ -14,7 +14,6 @@ import {
   OS_RELEASES_NEXT,
   OS_RELEASES_PREVIEW,
 } from '@/helpers/urls';
-// import testReleasesResponse from '~/_data/osReleases'; // test data
 
 export type OsVersionBranch = 'stable' | 'next' | 'preview' | 'test';
 
diff --git a/web/store/updateOsActions.ts b/web/store/updateOsActions.ts
index 5b33da5db..4bf7abaf6 100644
--- a/web/store/updateOsActions.ts
+++ b/web/store/updateOsActions.ts
@@ -100,7 +100,7 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
           serverStore.inIframe,
         );
       },
-      external: updateOsStore.available,
+      external: !!updateOsStore.available,
       icon: updateOsStore.available ? BellAlertIcon : ArrowPathIcon,
       name: 'updateOs',
       text: updateOsStore.available ? 'Unraid OS {0} Update Available' : 'Check for OS Updates',
@@ -124,7 +124,7 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
   /**
    * @description When receiving the callback the Account update page we'll use the provided sha256 of the release to get the release from the keyserver
    */
-  const getReleaseFromKeyServer = async (sha256: string): Release => {
+  const getReleaseFromKeyServer = async (sha256: string) => {
     console.debug('[getReleaseFromKeyServer]', sha256);
     try {
       const response = await getOsReleaseBySha256(sha256);
@@ -159,7 +159,7 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
     document.rebootNow.submit();
   };
 
-  const viewCurrentReleaseNotes = (modalTitle:string, webguiFilePath?:string|undefined) => {
+  const viewCurrentReleaseNotes = (modalTitle:string, webguiFilePath?:string|undefined) => { // @ts-ignore
     if (typeof openChanges === 'function') { // @ts-ignore
       openChanges(`showchanges ${webguiFilePath ?? '/var/tmp/unRAIDServer.txt'}`, modalTitle);
     } else {
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 6eda6498b..805fa2771 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -107,6 +107,7 @@ export default <Partial<Config>>{
       /**
        * @todo modify prose classes to use pixels for webgui…sadge https://tailwindcss.com/docs/typography-plugin#customizing-the-default-theme
        */
+      // @ts-ignore
       typography: theme => ({
         DEFAULT: {
           css: {
diff --git a/web/types/server.ts b/web/types/server.ts
index b6f92914a..4a592fa31 100644
--- a/web/types/server.ts
+++ b/web/types/server.ts
@@ -1,5 +1,5 @@
-import { Theme } from '~/store/theme';
-import { UserProfileLink } from '~/types/userProfile';
+import type { Theme } from '~/store/theme';
+import type { UserProfileLink } from '~/types/userProfile';
 
 export interface ServerStateConfigStatus {
   error?: 'INVALID' | 'NO_KEY_SERVER' | 'UNKNOWN_ERROR' | 'WITHDRAWN';
diff --git a/web/types/userProfile.ts b/web/types/userProfile.ts
index 2acd05000..ed21680e7 100644
--- a/web/types/userProfile.ts
+++ b/web/types/userProfile.ts
@@ -2,6 +2,7 @@ import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
 
 export interface UserProfileLink {
   click?: any; // @todo be more specific
+  clickParams?: string[] | number[];
   disabled?: boolean;
   emphasize?: boolean;
   external?: boolean;