@knime/hub-features 1.21.1 → 1.21.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @knime/hub-features
 
+## 1.21.2
+
+### Patch Changes
+
+- bfe6ec3: NXT-4509: add custom clipboard serialization to RFCError toast
+
 ## 1.21.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/hub-features",
-  "version": "1.21.1",
+  "version": "1.21.2",
   "description": "Vue components & composables for shared hub features",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "ofetch": "^1.4.1",
     "typescript": "^5.9.3",
     "@knime/components": "1.45.7",
-    "@knime/styles": "1.15.0",
-    "@knime/utils": "1.10.0"
+    "@knime/utils": "1.10.0",
+    "@knime/styles": "1.15.0"
   },
   "peerDependencies": {
     "consola": "3.x",

package/src/rfcErrors/RFCErrorToastTemplate.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useClipboard } from "@vueuse/core";
 
 import { Button } from "@knime/components";
@@ -7,11 +7,17 @@ import CheckIcon from "@knime/styles/img/icons/check.svg";
 import CopyIcon from "@knime/styles/img/icons/copy.svg";
 import { formatDateTimeString } from "@knime/utils";
 
+import { serializeErrorForClipboard as defaultSerializeRFCErrorData } from "./serializeRFCErrorData";
 import type { RFCErrorData } from "./types";
 
 type Props = {
   headline: string; // toast headline, will not be displayed here but needed when copying to clipboard
   canCopyToClipboard?: boolean;
+  serializeErrorForClipboard?: (
+    error: RFCErrorData,
+    headline: string,
+    formatDate: (date: Date) => string,
+  ) => string;
 } & RFCErrorData;
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   requestId: undefined,
   errorId: undefined,
   canCopyToClipboard: true,
+  serializeErrorForClipboard: defaultSerializeRFCErrorData,
 });
 const emits = defineEmits(["showMore"]);
 
@@ -30,53 +37,13 @@ const { copy, copied } = useClipboard({
 
 const showDetails = ref(false);
 
-const formattedDate = computed(() => {
-  return props.date ? formatDateTimeString(props.date.getTime()) : "";
-});
-
-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.headline}\n\n`;
-  errorText += `${props.title}\n\n`;
-  errorText += details ? `Details: ${details}\n\n` : "";
-
-  if (props.status !== undefined) {
-    errorText += `Status: ${props.status}\n`;
-  }
-
-  if (props.date) {
-    errorText += `Date: ${formattedDate.value}\n`;
-  }
-
-  if (props.requestId) {
-    errorText += `Request Id: ${props.requestId}\n`;
-  }
-
-  if (props.errorId) {
-    errorText += `Error Id: ${props.errorId}\n`;
-  }
-
-  if (props.stacktrace) {
-    errorText += "------\n"; // separator
-    errorText += `Stacktrace:\n\n${props.stacktrace}\n`;
-  }
-
-  return errorText;
-});
+const formatDate = (date: Date): string =>
+  date ? formatDateTimeString(date.getTime()) : "";
 
 const copyToClipboard = () => {
-  copy(errorForClipboard.value).catch((error) => {
+  copy(
+    props.serializeErrorForClipboard(props, props.headline, formatDate),
+  ).catch((error) => {
     consola.error("Failed to copy to clipboard", { error });
   });
 };
@@ -116,7 +83,7 @@ const onShowDetailsClicked = () => {
       <div v-if="status !== undefined">
         <strong>Status: </strong>{{ status }}
       </div>
-      <div v-if="date"><strong>Date: </strong>{{ formattedDate }}</div>
+      <div v-if="date"><strong>Date: </strong>{{ formatDate(date) }}</div>
       <div v-if="requestId"><strong>Request id: </strong>{{ requestId }}</div>
       <div v-if="errorId"><strong>Error id: </strong>{{ errorId }}</div>
       <div v-if="stacktrace && canCopyToClipboard">

package/src/rfcErrors/index.ts

@@ -13,10 +13,16 @@ const toToast = ({
   headline,
   rfcError,
   canCopyToClipboard = true,
+  serializeErrorForClipboard = undefined,
 }: {
   headline: string;
   rfcError: RFCError;
   canCopyToClipboard?: boolean;
+  serializeErrorForClipboard?: (
+    error: RFCErrorData,
+    headline: string,
+    formatDate: (date: Date) => string,
+  ) => string;
 }): Toast => {
   const { data } = rfcError;
 
@@ -24,6 +30,7 @@ const toToast = ({
     headline,
     ...data,
     canCopyToClipboard,
+    serializeErrorForClipboard,
   });
 
   return {

package/src/rfcErrors/serializeRFCErrorData.ts

@@ -0,0 +1,46 @@
+import type { RFCErrorData } from "./types";
+
+export const serializeErrorForClipboard = (
+  error: RFCErrorData,
+  headline: string,
+  formatDate: (date: Date) => string,
+): string => {
+  let details = "";
+  if (error.details?.length) {
+    if (error.details.length > 1) {
+      const detailLines = error.details
+        .map((item) => `\u2022 ${item}`)
+        .join("\n");
+      details = `\n${detailLines}`;
+    } else {
+      details = error.details[0];
+    }
+  }
+
+  let errorText = `${headline}\n\n`;
+  errorText += `${error.title}\n\n`;
+  errorText += details ? `Details: ${details}\n\n` : "";
+
+  if (error.status !== undefined) {
+    errorText += `Status: ${error.status}\n`;
+  }
+
+  if (error.date) {
+    errorText += `Date: ${formatDate(error.date)}\n`;
+  }
+
+  if (error.requestId) {
+    errorText += `Request Id: ${error.requestId}\n`;
+  }
+
+  if (error.errorId) {
+    errorText += `Error Id: ${error.errorId}\n`;
+  }
+
+  if (error.stacktrace) {
+    errorText += "------\n"; // separator
+    errorText += `Stacktrace:\n\n${error.stacktrace}\n`;
+  }
+
+  return errorText;
+};