HUB-8597: add component prop to Toast interface

and make toast width adjustable

HUB-8597 (Adapt WAC toast to api errors)

Author: rettrich-tng

.changeset/strange-eels-itch.md

@@ -0,0 +1,6 @@
+---
+"@knime/components": minor
+"demo": patch
+---
+
+add component prop to Toast interface to enable custom formatted toast content, update demo

demo/src/components/ToastService.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import CodeExample from "./demo/CodeExample.vue";
-import { Button } from "@knime/components";
+import { ApiErrorTemplate, Button } from "@knime/components";
 import Interactive from "@knime/styles/img/icons/interactive.svg";
 // @ts-ignore
 import { useToasts, type Toast } from "@knime/components";
+import { h } from "vue";
 
 // import toastServiceCode from "@knime/components/toastService?raw";
 // import typesCode from "@knime/components/types?raw";
@@ -325,6 +326,26 @@ const callbackToast: Toast = {
     },
   ],
 };
+
+const apiError = h(ApiErrorTemplate, {
+  title:
+    "Could not load the workflow from the deployment. Check if the workflow version for this deployment is still available.",
+  details: [
+    'Could not load workflow "/Users/some team/some space/workflowname" for deployment "cdf0fc54a-fasd123123-asd1234123-adfa123"',
+    'Something else happend with workflow "/Users/some team/some space/workflowname" for deployment "cdf0fc54a-fasd123123-asd1234123-adfa123"',
+  ],
+  status: 123,
+  date: new Date(),
+  requestId: "134123212413412321241341",
+  errorId: "abcdefg",
+});
+
+const apiErrorToast: Toast = {
+  type: "error",
+  headline: "Deployment could not be created",
+  component: apiError,
+  width: 400,
+};
 </script>
 
 <template>
@@ -437,6 +458,9 @@ const callbackToast: Toast = {
               <Button with-border compact @click="show(callbackToast)"
                 >Toast with a callback</Button
               >
+              <Button with-border compact @click="show(apiErrorToast)"
+                >Toast with an api error</Button
+              >
             </div>
           </div>
           <h5>Stack control</h5>

packages/components/src/components/Toast/__tests__/Toast.test.js

@@ -2,6 +2,7 @@ import { mount, shallowMount } from "@vue/test-utils";
 import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
 
 import Toast from "../components/Toast.vue";
+import { defineComponent, h } from "vue";
 
 describe("Toast.vue", () => {
   const MAX_LENGTH = 160;
@@ -124,4 +125,33 @@ describe("Toast.vue", () => {
       expect(wrapper.emitted().remove).toBeTruthy();
     });
   });
+
+  describe("custom component", () => {
+    const dummyComponent = defineComponent({
+      template: "<div class='dummy-component'>My custom toast</div>",
+    });
+
+    it("renders custom component if provided", () => {
+      const wrapper = mount(Toast, {
+        props: {
+          type: "info",
+          component: h(dummyComponent),
+        },
+      });
+
+      expect(wrapper.find(".dummy-component").exists()).toBeTruthy();
+    });
+
+    it("does not render custom component if message is provided", () => {
+      const wrapper = mount(Toast, {
+        props: {
+          type: "info",
+          message: "I want to break free",
+          component: h(dummyComponent),
+        },
+      });
+
+      expect(wrapper.find(".dummy-component").exists()).toBeFalsy();
+    });
+  });
 });

packages/components/src/components/Toast/components/Toast.vue

@@ -24,10 +24,12 @@ const props = withDefaults(defineProps<Toast>(), {
   type: "info",
   headline: "",
   message: "",
+  component: null,
   autoRemove: true,
   active: true,
   buttons: () => [],
   stackId: "default",
+  width: 350,
 });
 
 const availableHeadline = computed(() => {
@@ -144,7 +146,11 @@ watch(toRef(props, "active"), (active) => {
 </script>
 
 <template>
-  <div ref="toastRef" :class="['toast', type]">
+  <div
+    ref="toastRef"
+    :class="['toast', type]"
+    :style="{ '--toast-width': `${width}px` }"
+  >
     <div
       v-show="active"
       class="container"
@@ -155,13 +161,16 @@ watch(toRef(props, "active"), (active) => {
       </div>
       <div class="content">
         <div class="headline">{{ availableHeadline }}</div>
-        <div class="message">
+        <div v-if="message" class="message">
           <template v-if="isTruncated">
             {{ truncatedMessage }}
             <button class="show-more" @click="showMore">show more</button>
           </template>
           <template v-else>{{ message }}</template>
         </div>
+        <div v-else-if="props.component" class="message">
+          <component :is="props.component" />
+        </div>
 
         <div v-if="buttons.length" class="buttons">
           <ToastButton
@@ -197,7 +206,7 @@ watch(toRef(props, "active"), (active) => {
   overflow: hidden;
   background-color: var(--knime-white);
   color: var(--knime-masala);
-  width: 350px;
+  width: var(--toast-width, 350px);
   min-height: 75px;
   transition: all 0.3s;
   display: flex;

packages/components/src/components/Toast/components/templates/ApiErrorTemplate.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { Button } from "@knime/components";
+import CopyIcon from "@knime/styles/img/icons/copy.svg";
+import { useClipboard } from "@vueuse/core";
+import { computed } from "vue";
+
+// see https://www.rfc-editor.org/rfc/rfc9457 for api error specification
+interface ApiErrorTemplateProps {
+  title: string;
+  details?: string[];
+  status: number;
+  date: Date;
+  requestId: string;
+  errorId?: string;
+}
+
+const props = defineProps<ApiErrorTemplateProps>();
+
+const { copy, copied } = useClipboard({
+  copiedDuring: 3000,
+});
+
+const dateFormatOptions = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  hour12: true,
+} as const;
+
+const formattedDate = computed(() => {
+  // eslint-disable-next-line no-undefined
+  const formatter = new Intl.DateTimeFormat(undefined, dateFormatOptions); // use default locale
+  return formatter.format(props.date);
+});
+
+const errorForClipboard = computed(() => {
+  let details = "";
+  if (props.details?.length) {
+    if (props.details.length > 1) {
+      const detailLines = props.details
+        .map((item) => `\u2022 ${item}`)
+        .join("\n");
+      details = `\n${detailLines}`;
+    } else {
+      details = props.details[0];
+    }
+  }
+  let errorText = `${props.title}\n\n`;
+  errorText += details ? `Details: ${details}\n\n` : "";
+
+  errorText += `Status: ${props.status}\n`;
+  errorText += `Date: ${formattedDate.value}\n`;
+  errorText += `Request Id: ${props.requestId}\n`;
+  errorText += props.errorId ? `Error Id: ${props.errorId}\n` : "";
+
+  return errorText;
+});
+
+const copyButtonText = computed(() => {
+  return copied.value ? "Error was copied" : "Copy error to clipboard";
+});
+
+const copyToClipboard = () => {
+  copy(errorForClipboard.value);
+};
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="title">
+      {{ props.title }}
+    </div>
+    <div v-if="props.details?.length" class="details">
+      <strong>Details:</strong>
+      <template v-if="props.details.length == 1">
+        {{ props.details[0] }}
+      </template>
+      <template v-else>
+        <ul>
+          <li v-for="(item, index) in details" :key="index">{{ item }}</li>
+        </ul>
+      </template>
+    </div>
+    <div><strong>Status: </strong>{{ status }}</div>
+    <div><strong>Date: </strong>{{ formattedDate }}</div>
+    <div><strong>Request id: </strong>{{ requestId }}</div>
+    <div v-if="errorId"><strong>Error id: </strong>{{ errorId }}</div>
+    <div class="copy-button-wrapper">
+      <Button @click="copyToClipboard"><CopyIcon />{{ copyButtonText }}</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.details {
+  margin: 12px 0;
+}
+
+.copy-button-wrapper {
+  & .button {
+    font-size: 13px;
+    padding: 0;
+
+    & svg {
+      margin-top: 2px;
+      width: 12px;
+    }
+  }
+}
+</style>

packages/components/src/components/Toast/components/templates/__tests__/ApiErrorTemplate.test.ts

@@ -0,0 +1,86 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import ApiErrorTemplate from "../ApiErrorTemplate.vue";
+import { ref } from "vue";
+
+const { useClipboardMock } = vi.hoisted(() => ({
+  useClipboardMock: vi.fn(),
+}));
+
+vi.mock("@vueuse/core", () => ({
+  useClipboard: useClipboardMock,
+}));
+
+describe("ApiErrorTemplate", () => {
+  const defaultProps = {
+    title: "There was an error",
+    details: ["Here", "are", "the", "deets"],
+    status: 500,
+    date: new Date(2012, 11, 12),
+    requestId: "123456789",
+  };
+  const doMount = (props = defaultProps) => {
+    const copiedMock = ref(false);
+    const copyMock = vi.fn(() => {
+      copiedMock.value = true;
+    });
+    useClipboardMock.mockReturnValue({
+      copy: copyMock,
+      copied: copiedMock,
+    });
+    const wrapper = mount(ApiErrorTemplate, {
+      props,
+    });
+    return {
+      wrapper,
+      copyMock,
+    };
+  };
+
+  it("renders relevant information", () => {
+    const { wrapper } = doMount();
+    expect(wrapper.find(".title").text()).toBe(defaultProps.title);
+    const details = wrapper.find(".details").text();
+    defaultProps.details.forEach((item) => {
+      expect(details).toContain(item);
+    });
+    expect(wrapper.text()).toContain("Status: 500");
+    expect(wrapper.text()).toContain("Date: Dec 12, 2012, 12:00:00 AM");
+    expect(wrapper.text()).toContain(`Request id: ${defaultProps.requestId}`);
+  });
+
+  it("renders optional errorId", () => {
+    const { wrapper } = doMount({
+      ...defaultProps,
+      errorId: "extremely-fatal-error",
+    } as any);
+    expect(wrapper.text()).toContain("extremely-fatal-error");
+  });
+
+  it("copies to clipboard", async () => {
+    const { wrapper, copyMock } = doMount({
+      ...defaultProps,
+      errorId: "extremely-fatal-error",
+    } as any);
+    expect(useClipboardMock).toHaveBeenCalled();
+    await wrapper.find("button").trigger("click");
+    expect(copyMock).toHaveBeenCalled();
+    // @ts-ignore
+    const copiedText = copyMock.mock.calls[0][0];
+    expect(copiedText).toContain(defaultProps.title);
+    defaultProps.details.forEach((item) => {
+      expect(copiedText).toContain(item);
+    });
+    expect(copiedText).toContain("Status: 500");
+    expect(copiedText).toContain("Date: Dec 12, 2012, 12:00:00 AM");
+    expect(copiedText).toContain(`Request Id: ${defaultProps.requestId}`);
+    expect(copiedText).toContain("Error Id: extremely-fatal-error");
+  });
+
+  it("updates button text on copy", async () => {
+    const { wrapper } = doMount();
+    expect(wrapper.find("button").text()).toBe("Copy error to clipboard");
+    await wrapper.find("button").trigger("click");
+    expect(wrapper.find("button").text()).toBe("Error was copied");
+  });
+});

packages/components/src/components/Toast/index.ts

@@ -1,5 +1,6 @@
 import ToastStack from "./components/ToastStack.vue";
+import ApiErrorTemplate from "./components/templates/ApiErrorTemplate.vue";
 
-export { ToastStack };
+export { ToastStack, ApiErrorTemplate };
 export * from "./types";
 export * from "./toastService";

packages/components/src/components/Toast/types.ts

@@ -1,4 +1,9 @@
-import type { ComputedRef, FunctionalComponent, SVGAttributes } from "vue";
+import type {
+  ComputedRef,
+  FunctionalComponent,
+  SVGAttributes,
+  VNode,
+} from "vue";
 
 type BaseToastButton = {
   /**
@@ -52,6 +57,7 @@ export interface Toast {
   headline?: string;
   message?: string;
   buttons?: ToastButton[];
+  component?: VNode | null;
   /**
    * If set to true, the toast will have an animated progress bar indicating time before
    * being automatically dismissed.
@@ -62,6 +68,7 @@ export interface Toast {
   key?: string;
   meta?: any;
   stackId?: string;
+  width?: number;
 }
 
 export interface ToastService {