Alert messages with title and details (#880)

* ➕ Make alert box component style scoped and detail togglable

* 👕 Fix linter warnings

* 🔨 Fix optional component prop

* 🔨 Migrate alert-box instances

* ➕ Implement message reasons

* ➕ Implement message reasons for components using ftue store props

* ➕ Implement message reasons for components using ftue store props

* 👕 Fix linter warnings

* ➕ Implement google caldav error detection

* 🔨 Implement alert messaging instead of simple strings

* 👕 Fix linter warnings

* Catch up from main (#891)

* Enable E2E tests to run against local dev env and stage env (at branch/PR level) (#870)

* Enable E2E tests to run against local dev env and against stage at the branch/PR level

* Post-review updates

* Fix initialization of profile metrics (#877)

* 🔨 Fix initialization of profile metrics

* 🔨 Fix linting warning

* 🔨 Call profile updates in parallel

* 🔨 Move lang var to commented metric collection

* Fix grammatical mistake in frontend English messages (#882)

---------

Co-authored-by: Rob Wood <rwood@thunderbird.net>
Co-authored-by: Jakob Cornell <jakob+gpg@jcornell.net>

* 👕 Fix linter warnings

* 🔨 Fix missing import

* 🔨 Fix persistent invalidation messages

* 🔨 Move Google domains to defines

* 🔨 Use alert type instead of simple string

* ➕ Integration test for Google CalDAV

* 🔨 Fix Google CalDAV test

* 💚 Use alert property directly

---------

Co-authored-by: Rob Wood <rwood@thunderbird.net>
Co-authored-by: Jakob Cornell <jakob+gpg@jcornell.net>

Author: 3 people

backend/src/appointment/defines.py

@@ -22,3 +22,6 @@
 
 # CalDAV doesn't provide colours afaik
 DEFAULT_CALENDAR_COLOUR = '#c276c5'
+
+# List of Google CalDAV domains
+GOOGLE_CALDAV_DOMAINS = ['googleusercontent.com', 'google.com', 'gmail.com']

backend/src/appointment/exceptions/calendar.py

@@ -12,6 +12,7 @@ class EventNotDeletedException(Exception):
 
 class FreeBusyTimeException(Exception):
     """Generic error with the free busy time api"""
+
     pass
 
 
@@ -20,4 +21,3 @@ class TestConnectionFailed(Exception):
 
     def __init__(self, reason: str | None = None):
         self.reason = reason
-

backend/src/appointment/exceptions/validation.py

@@ -10,16 +10,21 @@ class APIException(HTTPException):
     id_code = 'UNKNOWN'
     status_code = 500
     message_key = None
+    reason = None
 
-    def __init__(self, **kwargs):
+    def __init__(self, reason: str|None = None, **kwargs):
         message_key = kwargs.pop('message_key', False)
         if message_key is not False:
             self.message_key = message_key
 
+        if reason:
+            self.reason = reason
+
         super().__init__(
             status_code=self.status_code,
             detail={
                 'id': self.id_code,
+                'reason': self.get_reason(),
                 'message': self.get_msg(),
                 'status': self.status_code,
             },
@@ -32,6 +37,8 @@ def get_msg(self):
 
         return l10n('unknown-error')
 
+    def get_reason(self):
+        return self.reason
 
 class InvalidPermissionLevelException(APIException):
     """Raise when the subscribers permission level is too low for the action"""
@@ -205,19 +212,9 @@ def get_msg(self):
 class RemoteCalendarConnectionError(APIException):
     id_code = 'REMOTE_CALENDAR_CONNECTION_ERROR'
     status_code = 400
-    reason = None
-
-    def __init__(self, reason: str|None = None, **kwargs):
-        if reason:
-            self.reason = reason
-        super().__init__(**kwargs)
 
     def get_msg(self):
-        reason = self.reason
-        if not self.reason:
-            reason = l10n('unknown-error-short')
-
-        return l10n('remote-calendar-connection-error', {'reason': reason})
+        return l10n('remote-calendar-connection-error')
 
 
 class EventCouldNotBeAccepted(APIException):
@@ -332,3 +329,16 @@ class APIRateLimitExceeded(APIException):
 
     def get_msg(self):
         return l10n('rate-limit-exceeded')
+
+
+class GoogleCaldavNotSupported(APIException):
+    """Is raised when an attempt to access the Google CalDAV API was detected"""
+
+    id_code = 'GOOGLE_CALDAV_NOT_SUPPORTED'
+    status_code = 400
+
+    def get_msg(self):
+        return l10n('google-caldav-not-supported')
+
+    def get_reason(self):
+        return l10n('google-caldav-not-supported-details')

backend/src/appointment/l10n/de/main.ftl

@@ -46,15 +46,12 @@ not-in-allow-list = Deine E-Mail-Adresse ist nicht in der Liste erlaubter Adress
 
 schedule-not-active = Der Zeitplan wurde abgeschaltet. Bitte für weitere Informationen den Eigentümer des Zeitplans kontaktieren.
 
-remote-calendar-connection-error = Der angebundene Kalender konnte nicht erreicht werden: {$reason}.
-remote-calendar-connection-error = The remote calendar could not be reached due to {$reason}.
+remote-calendar-connection-error = Es konnte keine Verbindung hergestellt werden.
 
-        Bitte die Verbindungsinformationen überprüfen und noch einmal versuchen.
-
-# Possible entries for $reason,
-remote-calendar-reason-doesnt-support-caldav = Der Kalender bietet keine CalDAV-Unterstützung
-remote-calendar-reason-doesnt-support-auth = Der Kalender unterstützt keine Authentifizierung
-remote-calendar-reason-unauthorized = Es gibt ein Problem mit Benutzername oder Passwort
+# Possible error reasons
+remote-calendar-reason-doesnt-support-caldav = Der Kalender bietet keine CalDAV-Unterstützung.
+remote-calendar-reason-doesnt-support-auth = Der Kalender unterstützt keine der verfügbaren Authentifizierungsmethoden
+remote-calendar-reason-unauthorized = Bitte überprüfe Benutzername und Passwort und versuche es nochmal.
 
 event-could-not-be-accepted = Es ist ein Fehler bei der Annahme der Buchungsdaten aufgetreten. Bitte später noch einmal versuchen.
 event-could-not-be-deleted = Es ist ein Fehler beim Entfernen des vorläufigen Termins aufgetreten. Bitte später noch einmal versuchen.
@@ -67,6 +64,7 @@ subscriber-self-delete = Die Löschung des eigenen Benutzerkontos ist hier nicht
 
 rate-limit-exceeded = Zu viele Anfragen in zu kurzem Zeitraum. Bitte später noch einmal versuchen.
 
+# This is for the frontend, don't variable-ify!
 error-minimum-value = {field} sollte wenigstens {value} sein.
 
 ## Authentication Exceptions
@@ -91,6 +89,8 @@ google-auth-expired = Die Google-Authentifizierungssitzung ist abgelaufen, bitte
 google-sync-fail = Bei der Synchronisierung von Kalendern ist ein Fehler aufgetreten. Bitte später noch einmal versuchen.
 google-only-one = Es kann nur ein einziges Google-Konto verbunden sein.
 google-connect-to-continue = Zum Fortfahren muss mindestens ein Google-Konto verbunden werden.
+google-caldav-not-supported = Google CalDAV wird nicht unterstützt.
+google-caldav-not-supported-details = Bitte 'Google Kalender verbinden' benutzen.
 
 ## Frontend Facing Strings
 

backend/src/appointment/l10n/en/main.ftl

@@ -46,14 +46,12 @@ not-in-allow-list = Your email is not in the allow list.
 
 schedule-not-active = The schedule has been turned off. Please contact the schedule owner for more information.
 
-remote-calendar-connection-error = The remote calendar could not be reached due to {$reason}.
+remote-calendar-connection-error = We couldn't connect to your calendar.
 
-        Please verify your connection information and try again.
-
-# Possible entries for $reason,
-remote-calendar-reason-doesnt-support-caldav = the remote calendar does not support CalDAV
-remote-calendar-reason-doesnt-support-auth = the remote calendar does not support authentication
-remote-calendar-reason-unauthorized = an issue with your username or password
+# Possible error reasons
+remote-calendar-reason-doesnt-support-caldav = The remote calendar does not support CalDAV.
+remote-calendar-reason-doesnt-support-auth = The server does not support any of the available authentication methods.
+remote-calendar-reason-unauthorized = Please check your username and password, then try again.
 
 event-could-not-be-accepted = There was an error accepting the booking details. Please try again later.
 event-could-not-be-deleted = There was an error removing the hold event. Please try again later.
@@ -91,6 +89,8 @@ google-auth-expired = Google authentication session expired, please try again.
 google-sync-fail = An error occurred while syncing calendars. Please try again later.
 google-only-one = You can only have one Google account connected.
 google-connect-to-continue = You must connect at least one Google account to continue.
+google-caldav-not-supported = Google CalDAV is not supported.
+google-caldav-not-supported-details = Please use the 'Connect Google Calendar' option to link your calendar.
 
 ## Frontend Facing Strings
 

backend/src/appointment/routes/caldav.py

@@ -14,8 +14,9 @@
 from appointment.dependencies.database import get_db, get_redis
 from appointment.exceptions.calendar import TestConnectionFailed
 from appointment.exceptions.misc import UnexpectedBehaviourWarning
-from appointment.exceptions.validation import RemoteCalendarConnectionError
+from appointment.exceptions.validation import RemoteCalendarConnectionError, GoogleCaldavNotSupported
 from appointment.l10n import l10n
+from appointment.defines import GOOGLE_CALDAV_DOMAINS
 
 router = APIRouter()
 
@@ -37,6 +38,12 @@ def caldav_autodiscover_auth(
 
     dns_lookup_cache_key = f'dns:{utils.encrypt(connection.url)}'
 
+    # Check for an attempt to use Google CalDAV API
+    # which we don't support because we use their API directly
+    basename = urlparse(connection.url).netloc
+    if (any([(g in basename) for g in GOOGLE_CALDAV_DOMAINS])):
+        raise GoogleCaldavNotSupported()
+
     lookup_branch = None
     lookup_url = None
     if redis_client:

backend/test/integration/test_calendar.py

@@ -5,6 +5,7 @@
 from appointment.database.models import CalendarProvider
 from appointment.controller.calendar import CalDavConnector, GoogleConnector
 from appointment.database import schemas, models
+from appointment.defines import GOOGLE_CALDAV_DOMAINS
 
 from sqlalchemy import select
 
@@ -384,6 +385,20 @@ def test_create_first_caldav_calendar(self, with_client):
         assert 'user' not in data
         assert 'password' not in data
 
+    def test_create_google_caldav_calendar(self, with_client):
+        response = with_client.post(
+            '/caldav/auth',
+            json={
+                'url': 'https://' + GOOGLE_CALDAV_DOMAINS[0],
+                'user': os.getenv('CALDAV_TEST_USER'),
+                'password': os.getenv('CALDAV_TEST_PASS'),
+            },
+            headers=auth_headers,
+        )
+        assert response.status_code == 400, response.text
+        data = response.json()
+        assert data['detail']['id'] == 'GOOGLE_CALDAV_NOT_SUPPORTED'
+
     def test_update_existing_caldav_calendar_with_password(self, with_client, with_db, make_caldav_calendar):
         generated_calendar = make_caldav_calendar()
 

frontend/src/components/DataTable.vue

@@ -24,7 +24,7 @@ interface Props {
   dataList: TableDataRow[], // List of data to be displayed
   filters?: TableFilter[], // List of filters to be displayed
   loading: boolean, // Displays a loading spinner
-  showPagination: boolean;
+  showPagination?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {

frontend/src/components/FTUE/CalDavProvider.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import {
-  computed,
-  inject, ref,
+  computed, inject, ref,
 } from 'vue';
 import { callKey } from '@/keys';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import TextInput from '@/tbpro/elements/TextInput.vue';
-import { CalendarListResponse, PydanticException } from '@/models';
+import {
+  CalendarListResponse, PydanticException,
+} from '@/models';
 import { clearFormErrors, handleFormError } from '@/utils';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 
@@ -70,10 +71,11 @@ const onSubmit = async () => {
   if (!error.value) {
     emits('next');
   } else {
-    const err = handleFormError(t, formRef, data?.value as PydanticException);
-    if (err) {
+    const err = data?.value as PydanticException;
+    const errorMessage = handleFormError(t, formRef, err);
+    if (errorMessage) {
       // Emit a form-level error event if there's a problem here
-      emits('error', err);
+      emits('error', errorMessage);
     }
   }
 };

frontend/src/components/FTUE/CalendarProvider.vue

@@ -5,6 +5,7 @@ import {
 import { callKey } from '@/keys';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { storeToRefs } from 'pinia';
+import { Alert } from '@/models';
 import GoogleOauthProvider from '@/components/FTUE/GoogleOauthProvider.vue';
 import CalDavProvider from '@/components/FTUE/CalDavProvider.vue';
 
@@ -32,17 +33,32 @@ const onSwitch = () => {
   }
 };
 
-const onError = (err: string) => {
-  errorMessage.value = err;
+const onError = (alert: Alert) => {
+  errorMessage.value = alert;
 };
 
 </script>
 
 <template>
   <div class="content">
     <div class="provider-view">
-      <google-oauth-provider @next="onNext" @previous="onPrevious" @switch="onSwitch" :showPrevious="true" :showSwitch="true" v-if="provider === 'google'"></google-oauth-provider>
-      <cal-dav-provider @next="onNext" @previous="onPrevious" @switch="onSwitch" @error="onError" :showPrevious="true" :showSwitch="true" v-else-if="provider === 'caldav'"></cal-dav-provider>
+      <google-oauth-provider
+        v-if="provider === 'google'"
+        @next="onNext"
+        @previous="onPrevious"
+        @switch="onSwitch"
+        :showPrevious="true"
+        :showSwitch="true"
+      />
+      <cal-dav-provider
+        v-else-if="provider === 'caldav'"
+        @next="onNext"
+        @previous="onPrevious"
+        @switch="onSwitch"
+        @error="onError"
+        :showPrevious="true"
+        :showSwitch="true"
+      />
     </div>
   </div>
 </template>