@knime/hub-features 1.35.3 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @knime/hub-features
 
+## 2.0.0
+
+### Major Changes
+
+- c0933b6: **Breaking:** removed `useFileUpload`. It is available from
+  `@knime/product-features/data-transfer`.
+
+  `@knime/utils` now comes from the registry rather than the private copy in this
+  repository.
+
+### Patch Changes
+
+- Updated dependencies [c0933b6]
+  - @knime/components@2.0.0
+
+## 1.35.4
+
+### Patch Changes
+
+- Updated dependencies [97ad603]
+  - @knime/utils@1.11.2
+  - @knime/components@1.46.13
+
 ## 1.35.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/hub-features",
-  "version": "1.35.3",
+  "version": "2.0.0",
   "description": "Vue components & composables for shared hub features",
   "repository": {
     "type": "git",
@@ -33,15 +33,15 @@
   },
   "dependencies": {
     "@floating-ui/vue": "1.1.8",
+    "@knime/utils": "2.0.0",
     "@vueuse/components": "~13.8.0",
     "@vueuse/core": "~13.8.0",
     "@vueuse/shared": "~13.8.0",
     "lodash-es": "4.18.1",
     "ofetch": "^1.4.1",
     "typescript": "^5.9.3",
-    "@knime/components": "1.46.12",
-    "@knime/styles": "1.15.4",
-    "@knime/utils": "1.11.1"
+    "@knime/components": "2.0.0",
+    "@knime/styles": "1.15.4"
   },
   "peerDependencies": {
     "consola": "3.x",

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./rfcErrors";
-export * from "./useFileUpload";
 export * from "./useDownloadArtifact";
 export * from "./components/avatars";
 export * from "./embeddingSDK";

package/src/useFileUpload/index.ts

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

package/src/useFileUpload/useFileUpload.ts

@@ -1,348 +0,0 @@
-import { computed, reactive, readonly, ref } from "vue";
-import { FetchError, type FetchOptions } from "ofetch";
-
-import { useUploadManager } from "@knime/components";
-import {
-  formatFileSize,
-  getFileMimeType,
-  knimeFileFormats,
-  promise,
-} from "@knime/utils";
-
-import { createHttpClient } from "../httpClient/createHttpClient";
-import { rfcErrors } from "../rfcErrors";
-
-const DEFAULT_MAX_UPLOAD_QUEUE_SIZE = 10;
-const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 5 * 1024 * 1024 * 1024;
-
-const DEFAULT_RETRY_DELAY_MS = 50;
-
-// Catalog & artifacts services currently have a limit for 5 GiB for
-// upload and copy/move operations but it is not communicated to clients.
-// Repeat the constant here to be able to still make a pre-check. See NXT-4510.
-const getUploadSizeLimitBytes = () => DEFAULT_UPLOAD_SIZE_LIMIT_BYTES;
-
-type UseFileUploadOptions = {
-  /**
-   * Max number of concurrent uploads allowed in the upload queue.
-   * When an upload is started with a number of files that exceed the pending
-   * uploads then only files up-to the max queue size will be processed and the rest
-   * will be ignored. This will also call the `onUploadQueueSizeExceeded` callback
-   */
-  maxUploadQueueSize?: number;
-  onFileUploadComplete?: (payload: {
-    uploadId: string;
-    filePartIds: Record<number, string>;
-    parentId: string;
-    name: string;
-  }) => void;
-  onFileUploadFailed?: (payload: {
-    uploadId: string;
-    error: Error;
-    parentId: string;
-  }) => void;
-  onUploadQueueSizeExceeded?: (maxQueueSize: number) => void;
-  /**
-   * Options to customize the fetch client used internally to make http requests.
-   * e.g: headers, baseUrl, etc
-   */
-  customFetchClientOptions?: FetchOptions;
-};
-
-/**
- * This composable handles uploads of data to a hub repository item (space or workflow group).
- * It is a multi-step process which is described as follows:
- *
- * Step 1:
- * First we need to prepare an upload. The items will be uploaded to a `parent` container
- * identified by its id. Then, for each file we want to upload, we must provide paths relative
- * to the parent that identify each file. Example:
- *  ```
- *   {
- *      "items": {
- *          "my-file.txt": { itemContentType: "text/plain", itemContentSize: 5000 },
- *          "folder/my-file.zip": { itemContentType: "application/zip", itemContentSize: 5000 },
- *      }
- *   }
- *  ```
- * This describes 2 items, one placed in the parent's root and another inside a folder.
- * The response for this would look like:
- *  ```
- *   {
- *      "items": {
- *          "my-file.txt": { uploadId: "id1" },
- *          "folder/my-file.zip": { uploadId: "id2" },
- *      }
- *   }
- *  ```
- * Now, each corresponding `uploadId` uniquely identifies the upload process for
- * their respective files.
- *
- * Step 2:
- * Next, we need to start uploading the file parts. Technically, you _can_ just upload
- * each file as one big file "part", but practicaly that is not recommended because a hiccup
- * in the connection means you would have to start the upload from scratch; instead, we split
- * the files in smaller parts.
- * The upload manager helper will take care of splitting the file. However, the responsibility
- * of this composable is to supply a function to resolve the upload URL. This upload URL is obtained
- * by POSTing to an endpoint with the `uploadId` and the `partNumber` and this will return
- * the data required to make an upload to a presigned URL; this will be called for each file part.
- *
- * Step 3:
- * Completion:
- * Once the upload of a single file is complete, the upload manager will trigger the `onFileUploadComplete`
- * callback, which then will supply the ids of all the different parts that got uploaded for a given `uploadId`
- * Then we need to "complete" the upload by sending a request which provides the `uploadId` and a list of
- * the ids of all the parts. Note that some backends don't return the ids of the file parts after a successful
- * upload of a part, in this case empty strings or null can be used instead of the part id.
- *
- * Cancellation:
- * Alternative to completion, you can also cancel an upload. For this, the composable makes a DELETE request
- * providing the corresponding `uploadId` which will effectively cancel it.
- *
- *
- * Usage example:
- * ```
- * const { start, uploadItems, cancel } = useFileUpload();
- *
- * const someEventHandler = (parentId: string, files: File[]) => {
- *    start(parentId, files);
- * }
- *
- * <template>
- *    <!-- `uploadItems` will reactively update -->
- *    <div v-for="item in uploadItems" :key="item.id">
- *      <span>{{ item.name }} / {{ item.size }}</span>
- *      <hr />
- *      <span>Progress: {{ item.progress }}</span>
- *    </div>
- * </template>
- * ```
- */
-export const useFileUpload = (options: UseFileUploadOptions = {}) => {
-  const $ofetch = createHttpClient(options.customFetchClientOptions);
-
-  const prepareUpload = (
-    parentId: string,
-    files: Array<File>,
-  ): Promise<Array<{ uploadId: string; file: File }>> => {
-    const fileDictionary = Object.fromEntries(
-      files.map((file) => {
-        // strip extension for workflows
-        const name = knimeFileFormats.KNWF.getNameOrDefault(file, file.name);
-
-        return [name, file];
-      }),
-    );
-
-    // map file dictionary to body payload of the prepare upload request
-    const items: Record<string, { itemContentType: string }> =
-      Object.fromEntries(
-        Object.entries(fileDictionary).map(([name, file]) => [
-          name,
-          {
-            itemContentType: getFileMimeType(file),
-            itemContentSize: file.size,
-          },
-        ]),
-      );
-
-    type PrepareUploadResponse = {
-      items: Record<string, { uploadId: string }>;
-    };
-
-    return $ofetch<PrepareUploadResponse>(`/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 = (uploadId: string, partNumber: number) => {
-    type UploadURLResponse = {
-      method: string;
-      url: string;
-      header: { Host: string };
-    };
-
-    return $ofetch<UploadURLResponse>(
-      `/uploads/${uploadId}/parts/?partNumber=${partNumber}`,
-      { method: "POST" },
-    );
-  };
-
-  const completeUpload = (
-    uploadId: string,
-    partIds: Record<number, string>,
-  ) => {
-    return $ofetch(`/uploads/${uploadId}`, {
-      method: "POST",
-      body: partIds,
-    });
-  };
-
-  const cancelUpload = (uploadId: string) => {
-    return $ofetch(`/uploads/${uploadId}`, {
-      method: "DELETE",
-    });
-  };
-
-  // contains upload ids for files that have a processing step which was not finished yet
-  const unprocessedUploads = reactive<Set<string>>(new Set());
-  const isKNWFFile = (file: File) => knimeFileFormats.KNWF.matches(file);
-
-  let useUploadManagerResult: ReturnType<typeof useUploadManager> | null = null;
-
-  const setProcessingCompleted = ({ uploadId }: { uploadId: string }) => {
-    unprocessedUploads.delete(uploadId);
-  };
-
-  const setProcessingFailed = ({
-    uploadId,
-    error,
-  }: {
-    uploadId: string;
-    error?: Error;
-  }) => {
-    unprocessedUploads.delete(uploadId);
-    useUploadManagerResult?.setFailed(
-      uploadId,
-      error ?? new Error("An error occurred when processing the file"),
-    );
-  };
-
-  useUploadManagerResult = useUploadManager({
-    resolveFilePartUploadURL,
-
-    onFileUploadComplete: ({ uploadId, filePartIds, parentId, name }) => {
-      promise
-        .retryPromise({ fn: () => completeUpload(uploadId, filePartIds) })
-        .then(() => {
-          options.onFileUploadComplete?.({
-            uploadId,
-            filePartIds,
-            parentId,
-            name,
-          });
-        })
-        .catch((error) => {
-          consola.error("Error attempting to complete upload", { error });
-          setProcessingFailed({ uploadId, error });
-        });
-    },
-
-    onFileUploadFailed: ({ uploadId, error, parentId }) => {
-      options?.onFileUploadFailed?.({ uploadId, error, parentId });
-    },
-  });
-
-  const getEnqueueableFiles = (files: File[]): File[] => {
-    const { totalPendingUploads } = useUploadManagerResult;
-
-    const { maxUploadQueueSize = DEFAULT_MAX_UPLOAD_QUEUE_SIZE } = options;
-
-    if (files.length + totalPendingUploads.value > maxUploadQueueSize) {
-      options.onUploadQueueSizeExceeded?.(maxUploadQueueSize);
-    }
-
-    // only keep as many files as the queue allows
-    return files.slice(0, maxUploadQueueSize - totalPendingUploads.value);
-  };
-
-  const { uploadState, ...uploadMangerResultRest } = useUploadManagerResult;
-
-  const uploadItems = computed(() => {
-    return Object.values(uploadState.value).map((uploadItem) => ({
-      ...uploadItem,
-      status:
-        uploadItem.status === "complete" &&
-        unprocessedUploads.has(uploadItem.id)
-          ? "processing"
-          : uploadItem.status,
-    }));
-  });
-
-  const prepareQueueSize = ref(0);
-
-  return {
-    ...uploadMangerResultRest,
-    uploadItems,
-    unprocessedUploads: readonly(unprocessedUploads),
-    setProcessingCompleted,
-    setProcessingFailed,
-
-    isPreparingUpload: computed(() => prepareQueueSize.value > 0),
-    totalFilesBeingPrepared: computed(() => prepareQueueSize.value),
-
-    start: async (
-      parentId: string,
-      files: File[],
-      options: { isFileWithProcessing?: typeof isKNWFFile } = {},
-    ) => {
-      const { isFileWithProcessing = isKNWFFile } = options;
-      const enqueableFiles = getEnqueueableFiles(files);
-      const uploadSizeLimitBytes = getUploadSizeLimitBytes();
-      const oversizedFiles = enqueableFiles.filter(
-        (file) => file.size > uploadSizeLimitBytes,
-      );
-
-      if (oversizedFiles.length > 0) {
-        throw new rfcErrors.RFCError({
-          title: "Upload size limit exceeded",
-          status: 413,
-          details: oversizedFiles.map(
-            (file) =>
-              `${file.name} (${formatFileSize(file.size)}) exceeds the upload limit of ${formatFileSize(uploadSizeLimitBytes)}.`,
-          ),
-        });
-      }
-
-      try {
-        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,
-        });
-
-        uploadPayload.forEach(({ uploadId, file }) => {
-          if (isFileWithProcessing(file)) {
-            unprocessedUploads.add(uploadId);
-          }
-        });
-
-        const uploadIds = uploadPayload.map((upload) => upload.uploadId);
-
-        // accept floating promise, errors are handled inside the function
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        useUploadManagerResult.start(parentId, uploadPayload);
-
-        return uploadIds;
-      } catch (error) {
-        throw rfcErrors.tryParse(error) ?? 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: unknown) => {
-        consola.error("There was a problem cancelling the upload", { error });
-      });
-    },
-  };
-};