@knime/hub-features 1.28.0 → 1.29.0

package/src/components/versions/components/NoVersionItem.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="no-versions-item">No version created yet</div>
-</template>
-
-<style lang="postcss" scoped>
-.no-versions-item {
-  padding-top: 4px;
-  font-size: 12px;
-  font-weight: 300;
-  line-height: 15px;
-
-  &::after {
-    position: absolute;
-    top: 11px;
-    left: -4px;
-    width: 6px;
-    height: 6px;
-    content: "";
-    background-color: var(--knime-masala);
-    border-radius: 100%;
-  }
-}
-</style>

package/src/components/versions/components/VersionHistory.vue

@@ -1,138 +0,0 @@
-<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";
-
-defineProps<{
-  selectedVersion: NamedItemVersion["version"] | null;
-  versionHistory: Array<NamedItemVersion & WithAvatar & WithLabels>;
-  hasLoadedAllVersions: boolean;
-  loading: boolean;
-  hasUnversionedChanges: boolean;
-  hasAdminRights: boolean;
-  hasEditCapability: boolean;
-}>();
-
-defineEmits<{
-  loadAll: [];
-  delete: [version: NamedItemVersion["version"]];
-  restore: [version: NamedItemVersion["version"]];
-  select: [version: NamedItemVersion["version"] | null];
-}>();
-</script>
-
-<template>
-  <div class="version-history-container">
-    <div :class="['versions', { 'no-changes': !hasUnversionedChanges }]">
-      <VersionItem
-        v-for="itemVersion in versionHistory"
-        :key="itemVersion.version"
-        :is-selected="itemVersion.version === selectedVersion"
-        :version="itemVersion"
-        :has-admin-rights="hasAdminRights"
-        :has-edit-capability="hasEditCapability"
-        class="version-item"
-        @delete="$emit('delete', itemVersion.version)"
-        @restore="$emit('restore', itemVersion.version)"
-        @select="$emit('select', $event ? itemVersion.version : null)"
-      />
-      <NoVersionItem v-if="!loading && versionHistory.length === 0" />
-    </div>
-    <IdleReadyButton
-      v-if="!hasLoadedAllVersions"
-      :with-border="false"
-      with-down-icon
-      :idle="loading"
-      ready-text="&nbsp; Load all &nbsp;"
-      @click="$emit('loadAll')"
-    />
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-@import url("@knime/styles/css/mixins.css");
-
-.version-history-container {
-  height: 100%;
-
-  & .header {
-    display: flex;
-    align-items: center;
-    width: 440px;
-    height: 24px;
-    margin-bottom: 10px;
-
-    & .title {
-      display: inline;
-      margin: 0;
-      font-size: 16px;
-      font-weight: 700;
-      line-height: 19px;
-    }
-
-    @media only screen and (width <= 900px) {
-      width: calc(100vw - 60px);
-    }
-  }
-
-  & .versions {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    /*
-      Explicit min-height to ensure submenu is never cut off.
-      Height is equal to 2 versions.
-    */
-    min-height: 50px;
-    padding: 0 0 10px 20px;
-    margin-left: 10px;
-    scrollbar-width: none; /* Hide scrollbar for Firefox */
-    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
-
-    &::before {
-      position: absolute;
-      top: -30px;
-      left: -2px;
-      width: 2px;
-      height: calc(100% + 35px);
-      content: "";
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5'%3E%3Ccircle cx='1' cy='1' r='.5' fill='%236E6E6E'/%3E%3C/svg%3E");
-      background-repeat: repeat-y;
-      background-size: 5px;
-    }
-
-    &.no-changes::before {
-      top: -15px;
-      height: calc(100% + 20px);
-    }
-  }
-
-  & .empty-versions {
-    padding: 7px;
-    font-size: 11px;
-  }
-
-  /* Hide scrollbar for now */
-  & .versions::-webkit-scrollbar {
-    display: none;
-  }
-
-  @media only screen and (width <= 900px) {
-    width: 100vw;
-  }
-}
-
-svg {
-  @mixin svg-icon-size 18;
-
-  display: inline-block;
-  margin-right: 5px;
-  vertical-align: middle;
-  stroke: var(--knime-masala);
-}
-</style>

package/src/components/versions/components/VersionItem.vue

@@ -1,278 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { compact } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
-
-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 type { NamedItemVersion, WithAvatar, WithLabels } from "../types";
-
-import LabelList from "./LabelList.vue";
-
-const DESCRIPTION_TRUNCATE_LENGTH = 120;
-
-const props = defineProps<{
-  version: NamedItemVersion & WithAvatar & WithLabels;
-  isSelected: boolean;
-  hasAdminRights: boolean;
-  hasEditCapability: boolean;
-}>();
-
-const emit = defineEmits<{
-  select: [selectionStatus: boolean];
-  delete: [];
-  restore: [];
-}>();
-
-const hideTooltip = ref(false);
-const tooltipText = computed(() => {
-  if (hideTooltip.value) {
-    return "";
-  }
-
-  if (props.isSelected) {
-    return "Deselect to go back to latest";
-  } else {
-    return "Show version";
-  }
-});
-
-const truncatedDescription = computed(() => {
-  return truncateString(props.version.description, DESCRIPTION_TRUNCATE_LENGTH);
-});
-const isDescriptionTruncated = computed(
-  () =>
-    props.version.description &&
-    props.version.description.length !== truncatedDescription.value.length,
-);
-const isDescriptionExpanded = ref(false);
-
-const toggleVersionSelection = () => {
-  emit("select", !props.isSelected);
-};
-
-const menuItems = computed(() =>
-  compact([
-    props.hasEditCapability && {
-      text: props.isSelected ? "Deselect this version" : "Show this version",
-      action: toggleVersionSelection,
-    },
-    props.hasEditCapability && {
-      text: "Restore this version",
-      action: () => emit("restore"),
-    },
-    props.hasAdminRights && {
-      text: "Delete this version",
-      action: () => emit("delete"),
-    },
-  ]),
-);
-
-const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
-  item.action();
-};
-
-const onExpandDescription = () => {
-  isDescriptionExpanded.value = true;
-};
-
-const onLabelOver = () => {
-  hideTooltip.value = true;
-};
-const onLabelLeave = () => {
-  hideTooltip.value = false;
-};
-</script>
-
-<template>
-  <div>
-    <div
-      :class="['version-item-container', isSelected && 'selected']"
-      @click="toggleVersionSelection"
-    >
-      <Tooltip ref="tooltip" class="tooltip" :text="tooltipText">
-        <div class="left">
-          <h6>
-            {{ version.title }}
-          </h6>
-
-          <div class="labels">
-            <LabelList
-              :labels="version.labels"
-              @label-over="onLabelOver"
-              @label-leave="onLabelLeave"
-            />
-          </div>
-
-          <p v-if="isDescriptionTruncated && !isDescriptionExpanded">
-            {{ truncatedDescription }}
-            <button class="show-more-button" @click.stop="onExpandDescription">
-              Show more
-            </button>
-          </p>
-          <p v-else-if="version.description">{{ version.description }}</p>
-          <span class="footer-info">
-            Created on <LocalDateTime show-time :date="version.createdOn" /> –
-            Version {{ version.version }}
-          </span>
-        </div>
-        <div class="right">
-          <HubAvatar class="profile-picture" v-bind="version.avatar" />
-          <div v-if="menuItems.length" class="controls">
-            <nav>
-              <SubMenu
-                :items="menuItems"
-                button-title="Options"
-                @item-click="onMenuItemClick"
-              >
-                <MenuIcon class="open-icon" />
-              </SubMenu>
-            </nav>
-          </div>
-        </div>
-      </Tooltip>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.version-item-container {
-  position: relative;
-  display: flex;
-  gap: 15px;
-  align-items: center;
-  align-items: stretch;
-  padding: 10px;
-  background-color: var(--knime-white);
-  transition: background-color 0.25s ease;
-
-  & .tooltip {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  & p {
-    margin: 10px 0;
-    font-size: 11px;
-    line-height: 1.5;
-  }
-
-  & button {
-    all: unset;
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--knime-dove-gray);
-  }
-
-  & .left {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    word-break: normal;
-    overflow-wrap: break-word;
-
-    & h6 {
-      display: block;
-      margin: 0;
-      font-size: 13px;
-      font-weight: 700;
-      line-height: 18px;
-      transition: color 0.25s ease;
-    }
-
-    & .footer-info {
-      margin: 0;
-      font-size: 11px;
-      font-weight: 300;
-      line-height: 1.5;
-      transition: color 0.25s ease;
-    }
-  }
-
-  & .right {
-    display: flex;
-    gap: 8px;
-    align-items: stretch;
-    justify-content: flex-end;
-    width: 100px;
-
-    & .controls {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      padding-left: 5px;
-      margin-right: -4px;
-      border-left: 1px solid var(--knime-silver-sand);
-    }
-  }
-
-  &::before {
-    position: absolute;
-    top: 12px;
-    left: -6px;
-    width: 12px;
-    height: 12px;
-    content: "";
-    background-color: var(--knime-white);
-    transform: rotateZ(45deg);
-    transition: background-color 0.25s ease;
-  }
-
-  &::after {
-    position: absolute;
-    top: 15px;
-    left: -24px;
-    width: 6px;
-    height: 6px;
-    content: "";
-    background-color: var(--knime-masala);
-    border-radius: 100%;
-    box-shadow: 0 0 0 0 transparent;
-    transition:
-      background-color 0.25s ease,
-      box-shadow 0.25s ease;
-  }
-
-  &:hover {
-    cursor: pointer;
-    box-shadow: 0 2px 10px 0 var(--knime-gray-dark-semi);
-  }
-
-  &.selected {
-    background-color: var(--knime-cornflower-semi);
-
-    & .left {
-      & h6,
-      & .date {
-        color: var(--knime-cornflower-dark);
-      }
-    }
-
-    & .controls {
-      border-left: 1px solid var(--knime-cornflower-light);
-    }
-
-    & .footer-info {
-      color: var(--knime-cornflower-dark);
-    }
-
-    &::before {
-      background-color: var(--knime-cornflower-semi);
-    }
-
-    &::after {
-      background-color: var(--knime-cornflower);
-      box-shadow:
-        0 0 0 3px var(--knime-porcelain),
-        0 0 0 5px var(--knime-cornflower);
-    }
-  }
-
-  @media only screen and (width <= 900px) {
-    width: calc(100vw - 100px);
-  }
-}
-</style>

package/src/components/versions/components/VersionLimitInfo.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-import { InlineMessage } from "@knime/components";
-
-import type { VersionLimit } from "../types";
-
-const {
-  versionLimit,
-  upgradeUrl = undefined,
-  isPrivate = false,
-} = defineProps<{
-  versionLimit: Required<VersionLimit>;
-  upgradeUrl?: string;
-  isPrivate?: boolean;
-}>();
-
-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{{ isPrivate ? " for private items." : "." }}
-  </InlineMessage>
-</template>