@knime/hub-features 1.0.15 → 1.0.17

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @knime/hub-features
 
+## 1.0.17
+
+### Patch Changes
+
+- 9fa8163: bugfix/improvements in uploads: retry only on server error, reset placeholder skeleton on prepare upload error
+- Updated dependencies [9fa8163]
+  - @knime/components@1.11.1
+  - @knime/utils@1.1.3
+
+## 1.0.16
+
+### Patch Changes
+
+- 5b0167e: - Add RFC error utils to handle API error responses
+  - Improve error handling for manifest upload request
+- Updated dependencies [5b0167e]
+  - @knime/components@1.11.0
+
 ## 1.0.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/hub-features",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Vue components & composables for shared hub features",
   "homepage": "https://knime.github.io/webapps-common/",
   "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
@@ -25,10 +25,11 @@
     "@vueuse/core": "10.4.1",
     "@vueuse/shared": "^10.10.0",
     "consola": "3.2.3",
+    "ofetch": "^1.4.1",
     "typescript": "^5.4.5",
-    "@knime/components": "1.10.0",
+    "@knime/components": "1.11.1",
     "@knime/styles": "1.1.1",
-    "@knime/utils": "1.1.2"
+    "@knime/utils": "1.1.3"
   },
   "peerDependencies": {
     "vue": "3.x"
@@ -39,7 +40,6 @@
     "@vue/test-utils": "2.4.4",
     "vite": "^5.4.7",
     "vite-svg-loader": "4.0.0",
-    "vitest-fetch-mock": "^0.4.1",
     "vue-tsc": "^2.0.19"
   },
   "scripts": {

package/src/common/ofetchClient.ts

@@ -0,0 +1,12 @@
+import { ofetch } from "ofetch";
+
+const defaultConfig = {
+  headers: {
+    "Content-Type": "application/json",
+
+    // see: https://knime-com.atlassian.net/wiki/spaces/SPECS/pages/4126769212/API+Errors#Client-Request-Headers
+    Accept: "application/json; application/problem+json",
+  },
+} as const;
+
+export const $ofetch = ofetch.create(defaultConfig);

package/src/index.ts

@@ -1 +1,2 @@
+export * from "./rfcErrors";
 export * from "./useFileUpload";

package/src/rfcErrors/RFCErrorToastTemplate.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useClipboard } from "@vueuse/core";
+
+import { Button } from "@knime/components";
+import CheckIcon from "@knime/styles/img/icons/check.svg";
+import CopyIcon from "@knime/styles/img/icons/copy.svg";
+
+interface Props {
+  headline: string; // toast headline, will not be displayed here but needed when copying to clipboard
+  title: string;
+  details?: string[];
+  status: number;
+  date: Date;
+  requestId: string;
+  errorId?: string;
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits(["showMore"]);
+
+const { copy, copied } = useClipboard({
+  copiedDuring: 3000,
+});
+
+const showDetails = ref(false);
+
+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.headline}\n\n`;
+  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 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="onShowDetailsClicked">
+      Show details
+    </button>
+    <div v-if="showDetails" class="additional-info">
+      <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 class="details-list">
+            <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">
+          <template v-if="copied"
+            ><CheckIcon class="copy-icon" />Error was copied</template
+          >
+          <template v-else
+            ><CopyIcon class="copy-icon" />Copy error to clipboard
+          </template>
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.details {
+  margin: 12px 0;
+
+  & .details-list {
+    padding-left: 25px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+}
+
+.show-more {
+  all: unset;
+  cursor: pointer;
+  font-weight: 500;
+  white-space: nowrap;
+
+  &:active,
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.copy-button-wrapper {
+  & .button {
+    font-size: 13px;
+    padding: 0;
+    margin-top: 10px;
+  }
+}
+
+svg.copy-icon {
+  width: 12px;
+}
+</style>

package/src/rfcErrors/index.ts

@@ -0,0 +1,60 @@
+import { h } from "vue";
+import { FetchError } from "ofetch";
+import type { Toast } from "packages/components/src";
+
+import RFCErrorToastTemplate from "./RFCErrorToastTemplate.vue";
+import { RFCError, type RFCErrorData } from "./types";
+
+/**
+ * Map to a toast template component compatible with an RFCError format
+ */
+const toToast = ({
+  headline,
+  rfcError,
+}: {
+  headline: string;
+  rfcError: RFCError;
+}): Toast => {
+  const { data } = rfcError;
+
+  const rfcErrorToastContent = h(RFCErrorToastTemplate, { headline, ...data });
+
+  return {
+    type: "error",
+    headline,
+    component: rfcErrorToastContent,
+    autoRemove: false,
+  };
+};
+
+/**
+ * Try to parse an ofetch's `FetchError` to an `RFCError`. When parsing is not possible
+ * it returns the same `FetchError` given unchanged.
+ */
+const tryParse = (error: FetchError): RFCError | FetchError => {
+  if (!error.response) {
+    return error;
+  }
+
+  const responseDate = error.response.headers.get("date")
+    ? new Date(error.response.headers.get("date")!)
+    : new Date();
+
+  const rfcErrorData: RFCErrorData = {
+    title: error.data.title as string,
+    details: error.data.details as string[] | undefined,
+    status: error.statusCode as number,
+    date: responseDate,
+    requestId: error.response.headers.get("x-request-id") ?? "",
+    // eslint-disable-next-line no-undefined
+    errorId: error.response.headers.get("x-error-id") ?? undefined,
+  };
+
+  return new RFCError(rfcErrorData);
+};
+
+export const rfcErrors = {
+  toToast,
+  tryParse,
+  RFCError,
+};

package/src/rfcErrors/types.ts

@@ -0,0 +1,20 @@
+/**
+ * Type based on an RFC-9457 error standard (https://www.rfc-editor.org/rfc/rfc9457)
+ */
+export type RFCErrorData = {
+  title: string;
+  details?: string[];
+  status: number;
+  date: Date;
+  requestId: string;
+  errorId?: string;
+};
+
+export class RFCError extends Error {
+  data: RFCErrorData;
+
+  constructor(data: RFCErrorData) {
+    super(data.title);
+    this.data = data;
+  }
+}

package/src/useFileUpload/useFileUpload.ts

@@ -1,12 +1,18 @@
 import { computed, ref } from "vue";
+import { FetchError } from "ofetch";
 
 import { useUploadManager } from "@knime/components";
 import { getFileMimeType, promise } from "@knime/utils";
 
+import { $ofetch } from "../common/ofetchClient";
+import { rfcErrors } from "../rfcErrors";
+
 const DEFAULT_MAX_UPLOAD_QUEUE_SIZE = 10;
 
 const DEFAULT_API_BASE_URL = "/_/api";
 
+const DEFAULT_RETRY_DELAY_MS = 50;
+
 type UseFileUploadOptions = {
   /**
    * Max number of concurrent uploads allowed in the upload queue.
@@ -35,8 +41,8 @@ type UseFileUploadOptions = {
  *  ```
  *   {
  *      "items": {
- *          "my-file.txt": { itemContentType: "text/plain" },
- *          "folder/my-file.zip": { itemContentType: "application/zip" },
+ *          "my-file.txt": { itemContentType: "text/plain", itemContentSize: 5000 },
+ *          "folder/my-file.zip": { itemContentType: "application/zip", itemContentSize: 5000 },
  *      }
  *   }
  *  ```
@@ -93,7 +99,6 @@ type UseFileUploadOptions = {
  * </template>
  * ```
  */
-
 export const useFileUpload = (options: UseFileUploadOptions = {}) => {
   const baseUrl = computed(() => options.apiBaseUrl ?? DEFAULT_API_BASE_URL);
 
@@ -110,7 +115,10 @@ export const useFileUpload = (options: UseFileUploadOptions = {}) => {
       Object.fromEntries(
         Object.entries(fileDictionary).map(([name, file]) => [
           name,
-          { itemContentType: getFileMimeType(file) },
+          {
+            itemContentType: getFileMimeType(file),
+            itemContentSize: file.size,
+          },
         ]),
       );
 
@@ -118,58 +126,45 @@ export const useFileUpload = (options: UseFileUploadOptions = {}) => {
       items: Record<string, { uploadId: string }>;
     };
 
-    return fetch(`${baseUrl.value}/repository/${parentId}/manifest`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json;charset=UTF8" },
-      body: JSON.stringify({ items }),
-    })
-      .then((response) => response.json() as Promise<PrepareUploadResponse>)
-      .then(({ items }) => {
-        return Object.keys(items).map((name) => {
-          const { uploadId } = items[name];
-          const file = fileDictionary[name];
-          return { uploadId, file };
-        });
+    return $ofetch<PrepareUploadResponse>(
+      `${baseUrl.value}/repository/${parentId}/manifest`,
+      { method: "POST", body: { items } },
+    ).then(({ items }) => {
+      return Object.keys(items).map((name) => {
+        const { uploadId } = items[name];
+        const file = fileDictionary[name];
+        return { uploadId, file };
       });
+    });
   };
 
-  const resolveFilePartUploadURL = async (
-    uploadId: string,
-    partNumber: number,
-  ) => {
+  const resolveFilePartUploadURL = (uploadId: string, partNumber: number) => {
     type UploadURLResponse = {
       method: string;
       url: string;
       header: { Host: string };
     };
 
-    const response = await fetch(
+    return $ofetch<UploadURLResponse>(
       `${baseUrl.value}/uploads/${uploadId}/parts/?partNumber=${partNumber}`,
       { method: "POST" },
     );
-
-    return response.json() as Promise<UploadURLResponse>;
   };
 
-  const completeUpload = async (
+  const completeUpload = (
     uploadId: string,
     partIds: Record<number, string>,
   ) => {
-    const response = await fetch(`${baseUrl.value}/uploads/${uploadId}`, {
+    return $ofetch(`${baseUrl.value}/uploads/${uploadId}`, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(partIds),
+      body: partIds,
     });
-
-    return response.json();
   };
 
-  const cancelUpload = async (uploadId: string) => {
-    const response = await fetch(`${baseUrl.value}/uploads/${uploadId}`, {
+  const cancelUpload = (uploadId: string) => {
+    return $ofetch(`${baseUrl.value}/uploads/${uploadId}`, {
       method: "DELETE",
     });
-
-    return response.json();
   };
 
   const useUploadManagerResult = useUploadManager({
@@ -177,7 +172,7 @@ export const useFileUpload = (options: UseFileUploadOptions = {}) => {
 
     onFileUploadComplete: ({ uploadId, filePartIds }) => {
       promise
-        .retryPromise(() => completeUpload(uploadId, filePartIds))
+        .retryPromise({ fn: () => completeUpload(uploadId, filePartIds) })
         .then(() => {
           options.onFileUploadComplete?.(uploadId, filePartIds);
         })
@@ -205,35 +200,48 @@ export const useFileUpload = (options: UseFileUploadOptions = {}) => {
     return files.slice(0, maxUploadQueueSize - totalPendingUploads.value);
   };
 
-  const isPreparingUpload = ref(false);
+  const prepareQueueSize = ref(0);
 
   return {
     ...useUploadManagerResult,
 
-    isPreparingUpload: computed(() => isPreparingUpload.value),
+    isPreparingUpload: computed(() => prepareQueueSize.value > 0),
+    totalFilesBeingPrepared: computed(() => prepareQueueSize.value),
 
     start: async (parentId: string, files: File[]) => {
+      const enqueableFiles = getEnqueueableFiles(files);
       try {
-        isPreparingUpload.value = true;
-
-        // TODO: HUB-9102: improve error handling here. see ticket for details
-        const uploadPayload = await promise.retryPromise(() =>
-          prepareUpload(parentId, getEnqueueableFiles(files)),
-        );
-
-        isPreparingUpload.value = false;
+        if (enqueableFiles.length === 0) {
+          return;
+        }
+
+        prepareQueueSize.value += enqueableFiles.length;
+
+        const uploadPayload = await promise.retryPromise({
+          fn: () => prepareUpload(parentId, enqueableFiles),
+          excludeError: (error: FetchError) =>
+            // eslint-disable-next-line no-magic-numbers
+            Boolean(error.statusCode && error.statusCode < 500),
+          retryDelayMS: DEFAULT_RETRY_DELAY_MS,
+        });
 
         useUploadManagerResult.start(parentId, uploadPayload);
       } catch (error) {
-        // TODO: HUB-8152 process max file size error
-        consola.error(error);
+        if (error instanceof FetchError) {
+          throw rfcErrors.tryParse(error);
+        }
+
+        throw error;
+      } finally {
+        // errors can only be thrown in the prepareUpload call, useUploadManagerResult.start does its own error handling
+        prepareQueueSize.value -= enqueableFiles.length;
       }
     },
 
     cancel: (uploadId: string) => {
       useUploadManagerResult.cancel(uploadId);
       cancelUpload(uploadId).catch((error) => {
-        consola.error("There was a problem canceling the upload", { error });
+        consola.error("There was a problem cancelling the upload", { error });
       });
     },
   };