@knime/hub-features 1.12.6 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @knime/hub-features
 
+## 1.13.0
+
+### Minor Changes
+
+- d04922e: display version limit info in ManageVersions side drawer
+
 ## 1.12.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/hub-features",
-  "version": "1.12.6",
+  "version": "1.13.0",
   "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/CurrentState.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   hasEditCapability: boolean;
   hasPreviousVersion: boolean;
   currentStateSavepoint: ItemSavepoint & WithAvatar & WithLabels;
+  isVersionLimitExceeded?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -66,7 +67,7 @@ const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
       </div>
       <div class="right">
         <Button
-          v-if="hasEditCapability"
+          v-if="hasEditCapability && !isVersionLimitExceeded"
           with-border
           compact
           class="create-button"

package/src/components/versions/ManageVersions.vue

@@ -8,10 +8,12 @@ import HistoryIcon from "@knime/styles/img/icons/history.svg";
 
 import CurrentState from "./CurrentState.vue";
 import VersionHistory from "./VersionHistory.vue";
+import VersionLimitInfo from "./VersionLimitInfo.vue";
 import { CURRENT_STATE_VERSION } from "./constants";
 import type {
   ItemSavepoint,
   NamedItemVersion,
+  VersionLimit,
   WithAvatar,
   WithLabels,
 } from "./types";
@@ -25,6 +27,8 @@ type ManageVersionsProps = {
   hasLoadedAllVersions: boolean;
   hasAdminRights: boolean;
   hasEditCapability: boolean;
+  versionLimit?: VersionLimit;
+  upgradeUrl?: string;
 };
 
 defineProps<ManageVersionsProps>();
@@ -67,6 +71,10 @@ const closeLabelPopovers = throttle(() => {
             :has-previous-version="versionHistory.length > 0"
             :is-selected="currentVersion === CURRENT_STATE_VERSION"
             :current-state-savepoint="unversionedSavepoint"
+            :is-version-limit-exceeded="
+              versionLimit?.limit !== undefined &&
+              versionLimit.currentUsage >= versionLimit.limit
+            "
             @select="$emit('select', CURRENT_STATE_VERSION)"
             @create-version="$emit('create')"
             @discard="$emit('discardCurrentState')"
@@ -92,6 +100,15 @@ const closeLabelPopovers = throttle(() => {
             @load-all="$emit('loadAll')"
             @select="$emit('select', $event ?? CURRENT_STATE_VERSION)"
           />
+          <VersionLimitInfo
+            v-if="versionLimit?.limit !== undefined"
+            class="version-limit-info"
+            :version-limit="{
+              limit: versionLimit.limit,
+              currentUsage: versionLimit.currentUsage,
+            }"
+            :upgrade-url
+          />
         </div>
       </div>
     </div>
@@ -155,6 +172,10 @@ const closeLabelPopovers = throttle(() => {
       & .versions {
         width: 100%;
         padding: 30px;
+
+        & .version-limit-info {
+          margin-top: 30px;
+        }
       }
     }
 

package/src/components/versions/VersionLimitInfo.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { InlineMessage } from "@knime/components";
+
+import type { VersionLimit } from "./types";
+
+const { versionLimit, upgradeUrl = undefined } = defineProps<{
+  versionLimit: Required<VersionLimit>;
+  upgradeUrl?: string;
+}>();
+
+const isLimitReached = computed(
+  () => versionLimit.currentUsage >= versionLimit.limit,
+);
+
+const title = computed(() => {
+  if (isLimitReached.value) {
+    return `You've reached the maximum of ${versionLimit.limit} versions.`;
+  } else {
+    return `Using ${versionLimit.currentUsage} of ${versionLimit.limit} versions.`;
+  }
+});
+</script>
+
+<template>
+  <InlineMessage variant="info" :title>
+    <template v-if="upgradeUrl"><a :href="upgradeUrl">Upgrade</a></template>
+    <template v-else>Upgrade</template>
+    to use unlimited versions.
+  </InlineMessage>
+</template>

package/src/components/versions/types.ts

@@ -70,3 +70,8 @@ export type ItemPermission =
   | "CONFIGURATION"
   | "MOVE"
   | "COPY";
+
+export type VersionLimit = {
+  currentUsage: number;
+  limit?: number;
+};

package/src/components/versions/useVersionsApi.ts

@@ -8,6 +8,7 @@ import type {
   ItemSavepoint,
   NamedItemVersion,
   RepositoryItem,
+  VersionLimit,
   WithAvatar,
   WithLabels,
 } from "@knime/hub-features/versions";
@@ -51,6 +52,12 @@ export const useVersionsApi = ({
     return doHubRequest(`/repository/${itemId}`) as Promise<RepositoryItem>;
   };
 
+  const fetchVersionLimit = ({ itemId }: { itemId: string }) => {
+    return doHubRequest(
+      `/repository/limits/${itemId}/item-versions`,
+    ) as Promise<VersionLimit>;
+  };
+
   const fetchVersions = ({
     itemId,
     loadAll,
@@ -214,6 +221,7 @@ export const useVersionsApi = ({
 
   return {
     fetchVersions,
+    fetchVersionLimit,
     fetchResourceLabels,
     fetchItemSavepoints,
     fetchPermissions,