Set banner messages with the alert type, instead of trying to set a nullable value's title. (#934)

MelissaAutumn · web-flow · commit 743c88e9c0c6 · 2025-03-12T13:44:27.000-07:00
diff --git a/frontend/src/components/FTUE/ConnectCalendars.vue b/frontend/src/components/FTUE/ConnectCalendars.vue
@@ -3,14 +3,14 @@ import { useI18n } from 'vue-i18n';
 import {
   onMounted, inject, ref, computed, watch,
 } from 'vue';
-import { useFTUEStore } from '@/stores/ftue-store';
-import { useCalendarStore } from '@/stores/calendar-store';
 import { storeToRefs } from 'pinia';
-import { callKey } from '@/keys';
-import { CalendarItem } from '@/models';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import SyncCard from '@/tbpro/elements/SyncCard.vue';
+import { useFTUEStore } from '@/stores/ftue-store';
+import { useCalendarStore } from '@/stores/calendar-store';
+import { callKey } from '@/keys';
+import { CalendarItem } from '@/models';
 
 const { t } = useI18n();
 
@@ -32,7 +32,10 @@ const continueTitle = computed(() => (selectedCount.value ? t('label.continue')
 
 watch(selectedCount, (val) => {
   if (val === 0) {
-    warningMessage.value.title = t('ftue.oneCalendarRequired');
+    warningMessage.value = {
+      title: t('ftue.oneCalendarRequired'),
+      details: null,
+    };
   } else {
     warningMessage.value = null;
   }
@@ -41,7 +44,10 @@ watch(selectedCount, (val) => {
 onMounted(async () => {
   isLoading.value = true;
 
-  infoMessage.value.title = t('ftue.connectCalendarInfo');
+  infoMessage.value = {
+    title: t('ftue.connectCalendarInfo'),
+    details: null,
+  };
 
   await calendarStore.fetch(call, true);
   calendars.value = calendarStore.calendars.map((calendar) => ({
diff --git a/frontend/src/components/FTUE/ConnectVideo.vue b/frontend/src/components/FTUE/ConnectVideo.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { onMounted, inject, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+import TextInput from '@/tbpro/elements/TextInput.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useExternalConnectionsStore } from '@/stores/external-connections-store';
-import { storeToRefs } from 'pinia';
 import { callKey } from '@/keys';
 import {
   AuthUrl, AuthUrlResponse, BooleanResponse, Error, Exception, ExceptionDetail,
 } from '@/models';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
-import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
-import TextInput from '@/tbpro/elements/TextInput.vue';
 import { useScheduleStore } from '@/stores/schedule-store';
 
 const { t } = useI18n();
@@ -45,7 +45,10 @@ onMounted(async () => {
     const { data, error }: BooleanResponse = await call('zoom/ftue-status').get().json();
     // Did they hit back?
     if (error?.value) {
-      errorMessage.value.title = ((data.value as Exception)?.detail as ExceptionDetail)?.message;
+      errorMessage.value = {
+        title: ((data.value as Exception)?.detail as ExceptionDetail)?.message,
+        details: null,
+      };
       return;
     }
 
@@ -62,7 +65,7 @@ const onSubmit = async () => {
   });
 
   if ((data as Error)?.error) {
-    errorMessage.value.title = (data as Error)?.message;
+    errorMessage.value = { title: (data as Error)?.message, details: null };
     isLoading.value = false;
     return;
   }
diff --git a/frontend/src/components/FTUE/GoogleOauthProvider.vue b/frontend/src/components/FTUE/GoogleOauthProvider.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { onMounted, inject, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRoute, useRouter } from 'vue-router';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useUserStore } from '@/stores/user-store';
-import { storeToRefs } from 'pinia';
-import { useRoute, useRouter } from 'vue-router';
 import { useExternalConnectionsStore } from '@/stores/external-connections-store';
 import { callKey } from '@/keys';
 import { ExternalConnectionProviders } from '@/definitions';
-import { BooleanResponse, Exception, ExceptionDetail } from '@/models';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
+import {
+  BooleanResponse, Error, Exception, ExceptionDetail,
+} from '@/models';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -48,14 +50,20 @@ onMounted(async () => {
   if (route.query.error || noCalendarsError) {
     localStorage?.removeItem(initFlowKey);
     if (noCalendarsError) {
-      errorMessage.value.title = t('error.externalAccountHasNoCalendars', { external: 'Google' });
+      errorMessage.value = {
+        title: t('error.externalAccountHasNoCalendars', { external: 'Google' }),
+        details: null,
+      };
 
       // Also remove the google calendar
       if (externalConnectionStore.google.length > 0) {
         await externalConnectionStore.disconnect(call, ExternalConnectionProviders.Google);
       }
     } else {
-      errorMessage.value.title = route.query.error as string;
+      errorMessage.value = {
+        title: route.query.error as string,
+        details: null,
+      };
     }
     await router.replace(route.path);
   }
@@ -66,7 +74,10 @@ onMounted(async () => {
     const { data, error }: BooleanResponse = await call('google/ftue-status').get().json();
     // Did they hit back?
     if (error?.value) {
-      errorMessage.value.title = ((data.value as Exception)?.detail as ExceptionDetail)?.message;
+      errorMessage.value = {
+        title: ((data.value as Exception)?.detail as ExceptionDetail)?.message,
+        details: null,
+      };
       return;
     }
 
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
@@ -3,21 +3,23 @@ import {
   computed, inject, onMounted, ref,
 } from 'vue';
 import { storeToRefs } from 'pinia';
-import { DateFormatStrings, DEFAULT_SLOT_DURATION, SLOT_DURATION_OPTIONS } from '@/definitions';
 import { useI18n } from 'vue-i18n';
+import TextInput from '@/tbpro/elements/TextInput.vue';
+import SelectInput from '@/tbpro/elements/SelectInput.vue';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
+import BubbleSelect from '@/tbpro/elements/BubbleSelect.vue';
+import { DateFormatStrings, DEFAULT_SLOT_DURATION, SLOT_DURATION_OPTIONS } from '@/definitions';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useUserStore } from '@/stores/user-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useScheduleStore } from '@/stores/schedule-store';
 import {
   dayjsKey, callKey, isoWeekdaysKey,
 } from '@/keys';
-import { Error, SelectOption } from '@/models';
-import TextInput from '@/tbpro/elements/TextInput.vue';
-import SelectInput from '@/tbpro/elements/SelectInput.vue';
-import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
-import BubbleSelect from '@/tbpro/elements/BubbleSelect.vue';
+import {
+  Error, Exception, ExceptionDetail, SelectOption,
+} from '@/models';
 
 const { t } = useI18n();
 const dj = inject(dayjsKey);
@@ -99,7 +101,10 @@ const onSubmit = async () => {
     : await scheduleStore.createSchedule(call, scheduleData);
 
   if ((data as Error)?.error) {
-    errorMessage.value.title = (data as Error)?.message;
+    errorMessage.value = {
+      title: (data as Error)?.message,
+      details: null,
+    };
     isLoading.value = false;
     return;
   }
@@ -109,7 +114,10 @@ const onSubmit = async () => {
 
 onMounted(async () => {
   isLoading.value = true;
-  infoMessage.value.title = t('ftue.setupScheduleInfo');
+  infoMessage.value = {
+    title: t('ftue.setupScheduleInfo'),
+    details: null,
+  };
 
   await Promise.all([
     calendarStore.fetch(call, true),
