chore(web): type fixes

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 = '';
 

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,

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,

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">

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" />

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);

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();

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';
   }

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');

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,

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) {

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';

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';
 

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 {

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: {

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';

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;