@knime/hub-features 1.12.6 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @knime/hub-features
 
+## 1.14.0
+
+### Minor Changes
+
+- c75b415: Added SideDrawerHeader component
+
+### Patch Changes
+
+- Updated dependencies [c75b415]
+  - @knime/components@1.36.0
+
+## 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.14.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)",
@@ -31,7 +31,7 @@
     "lodash-es": "4.17.21",
     "ofetch": "^1.4.1",
     "typescript": "^5.8.3",
-    "@knime/components": "1.35.1",
+    "@knime/components": "1.36.0",
     "@knime/styles": "1.11.1",
     "@knime/utils": "1.5.5"
   },

package/src/components/versions/components/CreateVersionForm.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useTextareaAutosize } from "@vueuse/core";
+
+import {
+  Button,
+  InputField,
+  Label,
+  LoadingIcon,
+  SideDrawerHeader,
+  TextArea,
+} from "@knime/components";
+
+type Props = {
+  isCreationPending?: boolean;
+};
+
+withDefaults(defineProps<Props>(), { isCreationPending: false });
+
+const emit = defineEmits<{
+  create: [{ name: string; description: string }];
+  cancel: [hasUnsavedChanges: boolean];
+}>();
+
+const versionName = ref("");
+const versionDescription = ref("");
+
+const descriptionEditor = ref<InstanceType<typeof TextArea> | null>(null);
+
+onMounted(() => {
+  useTextareaAutosize({
+    element: descriptionEditor.value?.$el.getElementsByTagName("textarea")[0],
+    input: versionDescription,
+  });
+});
+
+const doValidate = ref(false);
+
+const isVersionNameInvalid = computed(() => {
+  return doValidate.value && versionName.value.length <= 0;
+});
+
+const hasUnsavedChanges = computed(() => {
+  return versionName.value !== "" || versionDescription.value !== "";
+});
+
+const onCreate = async () => {
+  doValidate.value = true;
+  await nextTick();
+
+  if (!isVersionNameInvalid.value) {
+    emit("create", {
+      name: versionName.value,
+      description: versionDescription.value,
+    });
+  }
+};
+</script>
+
+<template>
+  <div class="create-version-form">
+    <SideDrawerHeader
+      title="Create Version"
+      description="Give your version a name and description. Versions can be used to create a deployment.
+      "
+      :is-sub-drawer="true"
+      @close="$emit('cancel', hasUnsavedChanges)"
+    />
+    <div class="form-content">
+      <Label text="Version name">
+        <InputField
+          v-model="versionName"
+          type="text"
+          required
+          :is-valid="!isVersionNameInvalid"
+        />
+        <div v-if="isVersionNameInvalid" class="error">
+          Please enter at least 1 character.
+        </div>
+      </Label>
+      <Label text="Description">
+        <TextArea
+          ref="descriptionEditor"
+          v-model="versionDescription"
+          class="description"
+        />
+      </Label>
+      <div class="controls">
+        <Button
+          with-border
+          compact
+          class="button cancel"
+          @click="$emit('cancel', hasUnsavedChanges)"
+        >
+          <strong>Cancel</strong>
+        </Button>
+        <Button
+          primary
+          compact
+          class="button create"
+          :disabled="isVersionNameInvalid || isCreationPending"
+          @click="onCreate"
+        >
+          <LoadingIcon v-if="isCreationPending" />
+          <strong v-if="!isCreationPending">Create</strong>
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.create-version-form {
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  & .form-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 30px 30px 0;
+    gap: 30px;
+    overscroll-behavior: none;
+    isolation: isolate;
+    overflow: auto;
+    z-index: 1;
+    background-color: var(--knime-gray-ultra-light);
+
+    & .description {
+      width: 100%;
+      max-width: unset;
+      display: flex;
+
+      & :deep(textarea) {
+        width: 100%;
+        box-sizing: content-box;
+        max-height: 200px;
+        resize: none;
+      }
+    }
+
+    & .error {
+      position: absolute;
+      word-break: keep-all;
+      margin-top: 6px;
+      font-weight: 300;
+      font-size: 13px;
+      color: var(--theme-color-error);
+      line-height: 18px;
+    }
+
+    & .controls {
+      border-top: 1px solid var(--knime-silver-sand);
+      display: flex;
+      margin: 0 -30px;
+      padding: 10px 20px;
+      gap: 10px;
+      justify-content: space-between;
+      margin-top: auto;
+    }
+  }
+}
+</style>

package/src/components/versions/{CurrentState.vue → components/CurrentState.vue}

@@ -5,16 +5,17 @@ import { Button, LocalDateTime, SubMenu } from "@knime/components";
 import MenuIcon from "@knime/styles/img/icons/menu-options.svg";
 import WrenchIcon from "@knime/styles/img/icons/wrench.svg";
 
-import HubAvatar from "../avatars/HubAvatar.vue";
+import HubAvatar from "../../avatars/HubAvatar.vue";
+import type { ItemSavepoint, WithAvatar, WithLabels } from "../types";
 
 import LabelList from "./LabelList.vue";
-import type { ItemSavepoint, WithAvatar, WithLabels } from "./types";
 
 const props = defineProps<{
   isSelected: boolean;
   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/{LabelList.vue → components/LabelList.vue}

@@ -7,9 +7,8 @@ import { isEqual } from "lodash-es"; // eslint-disable-line depend/ban-dependenc
 import { FunctionButton } from "@knime/components";
 import { truncateString } from "@knime/utils";
 
-import Popover from "../Popover.vue";
-
-import type { AssignedLabel } from "./types";
+import Popover from "../../Popover.vue";
+import type { AssignedLabel } from "../types";
 
 type PopoverElement = HTMLElement & {
   closeMenu: () => void;

package/src/components/versions/{ManageVersions.vue → components/ManageVersions.vue}

@@ -6,15 +6,18 @@ import { FunctionButton } from "@knime/components";
 import CloseIcon from "@knime/styles/img/icons/close.svg";
 import HistoryIcon from "@knime/styles/img/icons/history.svg";
 
-import CurrentState from "./CurrentState.vue";
-import VersionHistory from "./VersionHistory.vue";
-import { CURRENT_STATE_VERSION } from "./constants";
+import { CURRENT_STATE_VERSION } from "../constants";
 import type {
   ItemSavepoint,
   NamedItemVersion,
+  VersionLimit,
   WithAvatar,
   WithLabels,
-} from "./types";
+} from "../types";
+
+import CurrentState from "./CurrentState.vue";
+import VersionHistory from "./VersionHistory.vue";
+import VersionLimitInfo from "./VersionLimitInfo.vue";
 
 type ManageVersionsProps = {
   hasUnversionedChanges: boolean;
@@ -25,6 +28,8 @@ type ManageVersionsProps = {
   hasLoadedAllVersions: boolean;
   hasAdminRights: boolean;
   hasEditCapability: boolean;
+  versionLimit?: VersionLimit;
+  upgradeUrl?: string;
 };
 
 defineProps<ManageVersionsProps>();
@@ -67,6 +72,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 +101,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 +173,10 @@ const closeLabelPopovers = throttle(() => {
       & .versions {
         width: 100%;
         padding: 30px;
+
+        & .version-limit-info {
+          margin-top: 30px;
+        }
       }
     }
 

package/src/components/versions/{VersionHistory.vue → components/VersionHistory.vue}

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { IdleReadyButton } from "@knime/components";
 
+import type { NamedItemVersion, WithAvatar, WithLabels } from "../types";
+
 import NoVersionItem from "./NoVersionItem.vue";
 import VersionItem from "./VersionItem.vue";
-import type { NamedItemVersion, WithAvatar, WithLabels } from "./types";
 
 defineProps<{
   selectedVersion: NamedItemVersion["version"] | null;

package/src/components/versions/{VersionItem.vue → components/VersionItem.vue}

@@ -6,10 +6,10 @@ import { LocalDateTime, SubMenu, Tooltip } from "@knime/components";
 import MenuIcon from "@knime/styles/img/icons/menu-options.svg";
 import { truncateString } from "@knime/utils";
 
-import HubAvatar from "../avatars/HubAvatar.vue";
+import HubAvatar from "../../avatars/HubAvatar.vue";
+import type { NamedItemVersion, WithAvatar, WithLabels } from "../types";
 
 import LabelList from "./LabelList.vue";
-import type { NamedItemVersion, WithAvatar, WithLabels } from "./types";
 
 const DESCRIPTION_TRUNCATE_LENGTH = 120;
 

package/src/components/versions/components/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/{useVersionsApi.ts → composables/useVersionsApi.ts}

@@ -8,11 +8,12 @@ import type {
   ItemSavepoint,
   NamedItemVersion,
   RepositoryItem,
+  VersionLimit,
   WithAvatar,
   WithLabels,
 } from "@knime/hub-features/versions";
 
-import { getFetchClient } from "../../common/ofetchClient";
+import { getFetchClient } from "../../../common/ofetchClient";
 
 type UseVersionsApiOptions = {
   customFetchClientOptions?: FetchOptions;
@@ -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,

package/src/components/versions/index.ts

@@ -1,7 +1,7 @@
-import CreateVersionForm from "./CreateVersionForm.vue";
-import ManageVersions from "./ManageVersions.vue";
+import CreateVersionForm from "./components/CreateVersionForm.vue";
+import ManageVersions from "./components/ManageVersions.vue";
 
 export { CreateVersionForm, ManageVersions };
 export type * from "./types";
 export * from "./constants";
-export * from "./useVersionsApi";
+export * from "./composables/useVersionsApi";

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/CreateVersionForm.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from "vue";
-import { useTextareaAutosize } from "@vueuse/core";
-
-import {
-  Button,
-  InputField,
-  Label,
-  LoadingIcon,
-  TextArea,
-} from "@knime/components";
-
-type Props = {
-  isCreationPending?: boolean;
-};
-
-withDefaults(defineProps<Props>(), { isCreationPending: false });
-
-const emit = defineEmits<{
-  create: [{ name: string; description: string }];
-  cancel: [hasUnsavedChanges: boolean];
-}>();
-
-const versionName = ref("");
-const versionDescription = ref("");
-
-const descriptionEditor = ref<InstanceType<typeof TextArea> | null>(null);
-
-onMounted(() => {
-  useTextareaAutosize({
-    element: descriptionEditor.value?.$el.getElementsByTagName("textarea")[0],
-    input: versionDescription,
-  });
-});
-
-const doValidate = ref(false);
-
-const isVersionNameInvalid = computed(() => {
-  return versionName.value.length <= 0 && doValidate.value;
-});
-
-const hasUnsavedChanges = computed(() => {
-  return versionName.value !== "" || versionDescription.value !== "";
-});
-
-const onCreate = async () => {
-  doValidate.value = true;
-  await nextTick();
-
-  if (!isVersionNameInvalid.value) {
-    emit("create", {
-      name: versionName.value,
-      description: versionDescription.value,
-    });
-  }
-};
-</script>
-
-<template>
-  <div class="create-version-form">
-    <Label text="Version name">
-      <InputField
-        v-model="versionName"
-        type="text"
-        required
-        :is-valid="!isVersionNameInvalid"
-      />
-      <div v-if="isVersionNameInvalid" class="error">
-        Please enter at least 1 character.
-      </div>
-    </Label>
-    <Label text="Description">
-      <TextArea
-        ref="descriptionEditor"
-        v-model="versionDescription"
-        class="description"
-      />
-    </Label>
-    <div class="controls">
-      <Button
-        with-border
-        compact
-        class="button cancel"
-        @click="$emit('cancel', hasUnsavedChanges)"
-      >
-        <strong>Cancel</strong>
-      </Button>
-      <Button
-        primary
-        compact
-        class="button create"
-        :disabled="isVersionNameInvalid || isCreationPending"
-        @click="onCreate"
-      >
-        <LoadingIcon v-if="isCreationPending" />
-        <strong v-if="!isCreationPending">Create</strong>
-      </Button>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.create-version-form {
-  height: 100%;
-  max-height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 30px 30px 0;
-  gap: 30px;
-  overscroll-behavior: none;
-  isolation: isolate;
-  overflow: auto;
-  z-index: 1;
-  background-color: var(--knime-gray-ultra-light);
-
-  & .description {
-    width: 100%;
-    max-width: unset;
-    display: flex;
-
-    & :deep(textarea) {
-      width: 100%;
-      box-sizing: content-box;
-      max-height: 200px;
-      resize: none;
-    }
-  }
-
-  & .error {
-    position: absolute;
-    word-break: keep-all;
-    margin-top: 6px;
-    font-weight: 300;
-    font-size: 13px;
-    color: var(--theme-color-error);
-    line-height: 18px;
-  }
-
-  & .controls {
-    border-top: 1px solid var(--knime-silver-sand);
-    display: flex;
-    margin: 0 -30px;
-    padding: 10px 20px;
-    gap: 10px;
-    justify-content: space-between;
-    margin-top: auto;
-  }
-}
-</style>