@knime/hub-features 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @knime/hub-features
 
+## 1.5.1
+
+### Patch Changes
+
+- 3f6c9c5: Fix VersionItem content width
+
+## 1.5.0
+
+### Minor Changes
+
+- 75dffab: Add useVersionsApi composable
+
 ## 1.4.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/hub-features",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "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)",

package/src/components/versions/ManageVersions.vue

@@ -18,7 +18,7 @@ import type {
 
 type ManageVersionsProps = {
   hasUnversionedChanges: boolean;
-  unversionedSavepoint?: ItemSavepoint & WithAvatar & WithLabels;
+  unversionedSavepoint?: (ItemSavepoint & WithAvatar & WithLabels) | null;
   currentVersion: NamedItemVersion["version"] | null;
   versionHistory: Array<NamedItemVersion & WithAvatar & WithLabels>;
   loading: boolean;

package/src/components/versions/VersionItem.vue

@@ -92,11 +92,11 @@ const onLabelLeave = () => {
 
 <template>
   <div>
-    <Tooltip ref="tooltip" :text="tooltipText">
-      <div
-        :class="['version-item-container', isSelected && 'selected']"
-        @click="toggleVersionSelection"
-      >
+    <div
+      :class="['version-item-container', isSelected && 'selected']"
+      @click="toggleVersionSelection"
+    >
+      <Tooltip ref="tooltip" class="tooltip" :text="tooltipText">
         <div class="left">
           <h6>
             {{ version.title }}
@@ -136,8 +136,8 @@ const onLabelLeave = () => {
             </nav>
           </div>
         </div>
-      </div>
-    </Tooltip>
+      </Tooltip>
+    </div>
   </div>
 </template>
 
@@ -146,13 +146,18 @@ const onLabelLeave = () => {
   position: relative;
   background-color: var(--knime-white);
   display: flex;
-  justify-content: space-between;
   align-items: center;
   align-items: stretch;
   padding: 10px;
   gap: 15px;
   transition: background-color 0.25s ease;
 
+  & .tooltip {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
   & p {
     font-size: 11px;
     line-height: 1.5;

package/src/components/versions/index.ts

@@ -4,3 +4,4 @@ import ManageVersions from "./ManageVersions.vue";
 export { CreateVersionForm, ManageVersions };
 export type * from "./types";
 export * from "./constants";
+export * from "./useVersionsApi";

package/src/components/versions/useVersionsApi.ts

@@ -0,0 +1,175 @@
+/* global RequestInit */
+import { merge } from "lodash-es";
+
+import type { HubAvatarData } from "@knime/hub-features";
+import { VERSION_DEFAULT_LIMIT } from "@knime/hub-features/versions";
+import type {
+  AssignedLabel,
+  ItemSavepoint,
+  NamedItemVersion,
+  WithAvatar,
+  WithLabels,
+} from "@knime/hub-features/versions";
+
+type UseVersionsApiOptions = {
+  baseUrl?: string;
+};
+
+export const useVersionsApi = ({ baseUrl }: UseVersionsApiOptions) => {
+  const doHubRequest = (path: string, requestOptions: RequestInit = {}) => {
+    const res = `${baseUrl}${path}`;
+    consola.trace(`useVersionsApi::fetching '${res}'`, requestOptions);
+
+    const defaults = {
+      method: "GET",
+    };
+    return fetch(res, {
+      ...defaults,
+      ...requestOptions,
+    });
+  };
+
+  const doHubRequestJson = async (
+    path: string,
+    requestOptions: RequestInit = {},
+  ) => {
+    merge(requestOptions, {
+      headers: { "Content-Type": "application/json" as const },
+    });
+    const response = await doHubRequest(path, requestOptions);
+    return response.json();
+  };
+
+  const fetchVersions = ({
+    itemId,
+    loadAll,
+  }: {
+    itemId: string;
+    loadAll: boolean;
+  }) => {
+    let path = `/repository/${itemId}/versions`;
+
+    if (loadAll) {
+      path += "?limit=-1";
+    }
+
+    return doHubRequestJson(path) as Promise<{
+      totalCount: number;
+      versions: Array<NamedItemVersion>;
+    }>;
+  };
+
+  const fetchResourceLabels = ({
+    resourceType,
+    resourceId,
+  }: {
+    resourceType: "savepoint";
+    resourceId: string;
+  }) => {
+    return doHubRequestJson(
+      `/validation/validation/resources/${resourceType}/${resourceId}/labels`,
+      {},
+    ).catch(() => ({ assignedLabels: [] })) as Promise<{
+      assignedLabels: Array<AssignedLabel>;
+    }>;
+  };
+
+  const deleteVersion = ({
+    projectItemId,
+    version,
+  }: {
+    projectItemId: string;
+    version: NamedItemVersion["version"];
+  }) => {
+    return doHubRequest(`/repository/${projectItemId}/versions/${version}`, {
+      method: "DELETE",
+    });
+  };
+
+  const createVersion = ({
+    projectItemId,
+    title,
+    description,
+  }: {
+    projectItemId: string;
+    title: string;
+    description: string;
+  }): Promise<NamedItemVersion> => {
+    return doHubRequestJson(`/repository/${projectItemId}/versions`, {
+      method: "POST",
+      body: JSON.stringify({
+        title,
+        description,
+      }),
+    });
+  };
+
+  const getAvatar = async ({
+    accountName,
+  }: {
+    accountName: string;
+  }): Promise<HubAvatarData> => {
+    const accountInfo = await doHubRequestJson(
+      `/accounts/name/${accountName}`,
+      {
+        headers: {
+          Prefer: "representation=minimal",
+        },
+      },
+    );
+
+    return {
+      kind: accountInfo.type === "TEAM" ? "group" : "account",
+      name: accountInfo.name,
+      image: {
+        url: accountInfo.avatarUrl,
+        altText: `${accountInfo.realName ?? accountInfo.name} profile image`,
+      },
+    } satisfies HubAvatarData;
+  };
+
+  const loadSavepointMetadata = async (
+    savepoint: ItemSavepoint,
+  ): Promise<WithAvatar & WithLabels> => {
+    return {
+      avatar: await getAvatar({
+        accountName: savepoint.version?.author ?? savepoint.author,
+      }),
+      labels: savepoint.itemVersionId
+        ? await fetchResourceLabels({
+            resourceType: "savepoint",
+            resourceId: savepoint.itemVersionId,
+          }).then((response) => response.assignedLabels)
+        : [],
+    };
+  };
+
+  const fetchItemSavepoints = ({
+    itemId,
+    limit,
+  }: {
+    itemId: string;
+    limit?: number;
+  }) => {
+    return doHubRequestJson(
+      `/repository/${itemId}/savepoints?limit=${
+        limit ?? VERSION_DEFAULT_LIMIT
+      }`,
+    ) as Promise<{
+      totalCount: number;
+      savepoints: Array<ItemSavepoint>;
+    }>;
+  };
+
+  return {
+    fetchVersions,
+    fetchResourceLabels,
+    fetchItemSavepoints,
+    loadSavepointMetadata,
+    deleteVersion,
+    createVersion,
+    getAvatar,
+  };
+};
+
+export type VersionsAPI = ReturnType<typeof useVersionsApi>;

package/src/index.ts

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