fix render has-links toast detail across payload shapes

Author: baderdean

frontend/src/app.vue

@@ -39,32 +39,27 @@
 
         <div class="p-toast-detail">
           <div>
-            {{ (slotProps.message.detail as ToastHasLinksGroupDetail).message }}
+            {{ getToastHasLinksDetailMessage(slotProps.message.detail) }}
           </div>
           <div
-            v-if="
-              (slotProps.message.detail as ToastHasLinksGroupDetail).button
-                ?.action
-            "
+            v-if="hasToastHasLinksButtonAction(slotProps.message.detail)"
             class="mt-2"
           >
             <Button
               size="small"
               :label="
-                (slotProps.message.detail as ToastHasLinksGroupDetail).button
+                asToastHasLinksGroupDetail(slotProps.message.detail)?.button
                   ?.text
               "
               @click="
-                (
-                  slotProps.message.detail as ToastHasLinksGroupDetail
-                ).button?.action?.()
+                asToastHasLinksGroupDetail(
+                  slotProps.message.detail,
+                )?.button?.action?.()
               "
             ></Button>
           </div>
           <div
-            v-else-if="
-              (slotProps.message.detail as ToastHasLinksGroupDetail).link
-            "
+            v-else-if="hasToastHasLinksLink(slotProps.message.detail)"
             class="mt-2"
           >
             <Button
@@ -73,11 +68,10 @@
               as="a"
               variant="link"
               :label="
-                (slotProps.message.detail as ToastHasLinksGroupDetail).link
-                  ?.text
+                asToastHasLinksGroupDetail(slotProps.message.detail)?.link?.text
               "
               :href="
-                (slotProps.message.detail as ToastHasLinksGroupDetail).link?.url
+                asToastHasLinksGroupDetail(slotProps.message.detail)?.link?.url
               "
               target="_blank"
               rel="noopener noreferrer"
@@ -98,21 +92,15 @@
 </template>
 
 <script setup lang="ts">
-type ToastHasLinksGroupDetail = {
-  message: string;
-  link?: {
-    text: string;
-    url: string;
-  };
-  button?: {
-    text: string;
-    action?: () => void;
-  };
-};
-
 import AddSourceImap from '@/components/mining/stepper-panels/source/AddSourceImap.vue';
 import PassiveMiningDialog from '@/components/mining/PassiveMiningDialog.vue';
 import type { MiningSource } from '@/types/mining';
+import {
+  asToastHasLinksGroupDetail,
+  getToastHasLinksDetailMessage,
+  hasToastHasLinksButtonAction,
+  hasToastHasLinksLink,
+} from '@/utils/toast';
 import { useIdle } from '@vueuse/core';
 import { reloadNuxtApp } from 'nuxt/app';
 import Normalizer from '~/utils/normalizer';

frontend/src/tests/unit/mining-toast.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
 import { createStartMiningToastPayload } from '@/utils/extras';
+import {
+  getToastHasLinksDetailMessage,
+  hasToastHasLinksButtonAction,
+  hasToastHasLinksLink,
+} from '@/utils/toast';
 
 describe('createStartMiningToastPayload', () => {
   const translations: Record<string, string> = {
@@ -48,3 +53,40 @@ describe('createStartMiningToastPayload', () => {
     });
   });
 });
+
+describe('toast has-links detail helpers', () => {
+  it('returns message when detail is a string', () => {
+    expect(getToastHasLinksDetailMessage('Simple detail')).toBe(
+      'Simple detail',
+    );
+  });
+
+  it('returns message when detail is an object', () => {
+    expect(
+      getToastHasLinksDetailMessage({
+        message: 'Object detail',
+      }),
+    ).toBe('Object detail');
+  });
+
+  it('returns empty string for unsupported detail values', () => {
+    expect(getToastHasLinksDetailMessage(undefined)).toBe('');
+    expect(getToastHasLinksDetailMessage(null)).toBe('');
+  });
+
+  it('detects object link and button action safely', () => {
+    const withAction = {
+      message: 'x',
+      button: { text: 'Retry', action: () => true },
+    };
+    const withLink = {
+      message: 'x',
+      link: { text: 'More', url: 'https://example.com' },
+    };
+
+    expect(hasToastHasLinksButtonAction(withAction)).toBe(true);
+    expect(hasToastHasLinksButtonAction(withLink)).toBe(false);
+    expect(hasToastHasLinksLink(withLink)).toBe(true);
+    expect(hasToastHasLinksLink('plain detail')).toBe(false);
+  });
+});

frontend/src/utils/toast.ts

@@ -0,0 +1,53 @@
+export type ToastHasLinksGroupDetail = {
+  message: string;
+  link?: {
+    text: string;
+    url: string;
+  };
+  button?: {
+    text: string;
+    action?: () => void;
+  };
+};
+
+function isToastHasLinksGroupDetail(
+  detail: unknown,
+): detail is ToastHasLinksGroupDetail {
+  return (
+    typeof detail === 'object' &&
+    detail !== null &&
+    'message' in detail &&
+    typeof detail.message === 'string'
+  );
+}
+
+export function getToastHasLinksDetailMessage(detail: unknown) {
+  if (typeof detail === 'string') {
+    return detail;
+  }
+
+  if (isToastHasLinksGroupDetail(detail)) {
+    return detail.message;
+  }
+
+  return '';
+}
+
+export function hasToastHasLinksButtonAction(detail: unknown) {
+  return Boolean(
+    isToastHasLinksGroupDetail(detail) &&
+    typeof detail.button?.action === 'function',
+  );
+}
+
+export function hasToastHasLinksLink(detail: unknown) {
+  return Boolean(isToastHasLinksGroupDetail(detail) && detail.link?.url);
+}
+
+export function asToastHasLinksGroupDetail(detail: unknown) {
+  if (isToastHasLinksGroupDetail(detail)) {
+    return detail;
+  }
+
+  return undefined;
+}