HUB-8864: fix toasts not expanding bug

HUB-8864 (Toast do not expand after being in back of stack)

Author: rettrich-tng

.changeset/little-suns-build.md

@@ -0,0 +1,5 @@
+---
+"@knime/components": patch
+---
+
+fix toasts not expanding after being in back of stack

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

@@ -72,6 +72,10 @@ const isTruncated = ref(isTruncatable);
 const showMore = () => {
   // TODO HUB-5698: animate toast and stack height when expanding truncated text
   isTruncated.value = false;
+  if (toastRef.value !== null) {
+    // reset height if it has been set in animateHeightTo
+    toastRef.value.style.height = "unset";
+  }
 };
 
 // Height transformations
@@ -162,7 +166,7 @@ watch(toRef(props, "active"), (active) => {
           <template v-else>{{ message }}</template>
         </div>
         <div v-else-if="props.component" class="message">
-          <component :is="props.component" />
+          <component :is="props.component" @show-more="showMore" />
         </div>
 
         <div v-if="buttons.length" class="buttons">

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

@@ -18,6 +18,7 @@ interface ApiErrorTemplateProps {
 }
 
 const props = defineProps<ApiErrorTemplateProps>();
+const emits = defineEmits(["showMore"]);
 
 const { copy, copied } = useClipboard({
   copiedDuring: 3000,
@@ -68,14 +69,19 @@ const errorForClipboard = computed(() => {
 const copyToClipboard = () => {
   copy(errorForClipboard.value);
 };
+
+const onShowDetailsClicked = () => {
+  showDetails.value = true;
+  emits("showMore");
+};
 </script>
 
 <template>
   <div class="wrapper">
     <div class="title">
       {{ props.title }}
     </div>
-    <button v-if="!showDetails" class="show-more" @click="showDetails = true">
+    <button v-if="!showDetails" class="show-more" @click="onShowDetailsClicked">
       Show details
     </button>
     <div v-if="showDetails" class="additional-info">

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

@@ -100,4 +100,10 @@ describe("ApiErrorTemplate", () => {
     await wrapper.find("button").trigger("click");
     expect(wrapper.find("button").text()).toBe("Error was copied");
   });
+
+  it("emits showMore event", async () => {
+    const { wrapper } = doMount();
+    await wrapper.find("button").trigger("click");
+    expect(wrapper.emitted("showMore")).toBeDefined();
+  });
 });