@knime/hub-features 1.27.0 → 1.29.0

package/src/components/versions/components/LabelList.vue

@@ -1,253 +0,0 @@
-<script setup lang="ts">
-import { type Ref, computed, onMounted, ref } from "vue";
-import { useEventBus } from "@vueuse/core";
-import { autoUpdate, offset, useFloating } from "@floating-ui/vue";
-import { isEqual } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
-
-import { FunctionButton } from "@knime/components";
-import { truncateString } from "@knime/utils";
-
-import Popover from "../../Popover.vue";
-import type { AssignedLabel } from "../types";
-
-type PopoverElement = HTMLElement & {
-  closeMenu: () => void;
-  openMenu: () => void;
-};
-
-const LABEL_LENGTH = 25;
-
-const props = withDefaults(
-  defineProps<{
-    labels: Array<AssignedLabel>;
-    defaultLabelCount?: number;
-  }>(),
-  { defaultLabelCount: 3 },
-);
-const emit = defineEmits(["labelOver", "labelLeave"]);
-
-const eventBus = useEventBus("versionLabels");
-const eventBusKey = "versionLabelShowPopover";
-
-const showAll = ref(false);
-const activeLabel: Ref<AssignedLabel | null> = ref(null);
-
-const popover: Ref<PopoverElement | null> = ref(null);
-const floatingPanel: Ref<HTMLElement | null> = ref(null);
-const floatingAnchor: Ref<HTMLElement | null> = ref(null);
-// 40px is the offset of the arrow on the popover plus the top padding
-// this is necessary to compensate for the offset calculation
-const defaultCrossAxisOffset = -46;
-const defaultMainAxisOffset = 75;
-
-const createMiddleware = () => [
-  offset({
-    crossAxis: defaultCrossAxisOffset,
-    mainAxis: defaultMainAxisOffset,
-  }),
-];
-
-const { floatingStyles } = useFloating(floatingAnchor, floatingPanel, {
-  whileElementsMounted: autoUpdate,
-  placement: "left-start",
-  strategy: "fixed",
-  middleware: createMiddleware(),
-});
-
-const popoverTopOffset = ref(0);
-const popoverFloatingStyles = computed(() => {
-  const parsedTop = parseInt(floatingStyles.value.top.replace("px", ""), 10);
-  const compensatedTop = `${parsedTop + popoverTopOffset.value}px`;
-
-  return {
-    ...floatingStyles.value,
-    top: compensatedTop,
-  };
-});
-
-const isShowMoreVisible = computed(
-  () => props.labels.length > props.defaultLabelCount && !showAll.value,
-);
-
-const showMoreButtonText = computed(
-  () => `+${props.labels.length - props.defaultLabelCount}`,
-);
-
-const filteredLabels = computed(() =>
-  showAll.value ? props.labels : props.labels.slice(0, props.defaultLabelCount),
-);
-
-const calculateDistanceToUpperBorder = (labelElement: HTMLElement) => {
-  const labelRect = labelElement.getBoundingClientRect();
-  const floatingAnchorRect = floatingAnchor.value!.getBoundingClientRect();
-
-  return Math.round(labelRect.top - floatingAnchorRect.top);
-};
-
-const isActiveLabel = (label: AssignedLabel) =>
-  isEqual(activeLabel.value, label);
-
-const togglePopover = (label: AssignedLabel, labelElement: HTMLElement) => {
-  if (isActiveLabel(label)) {
-    activeLabel.value = null;
-    popover.value?.closeMenu();
-  } else {
-    eventBus.emit(eventBusKey);
-    popoverTopOffset.value = calculateDistanceToUpperBorder(labelElement);
-
-    activeLabel.value = label;
-    popover.value?.openMenu();
-  }
-};
-
-const showMore = () => {
-  showAll.value = !showAll.value;
-};
-
-const mouseOver = () => emit("labelOver");
-const mouseLeave = () => emit("labelLeave");
-
-onMounted(() => {
-  eventBus.on((event: unknown) => {
-    if (event === eventBusKey) {
-      popover.value?.closeMenu();
-      activeLabel.value = null;
-    }
-  });
-});
-</script>
-
-<template>
-  <template v-if="labels.length > 0">
-    <div class="label-list-with-popover">
-      <div ref="floatingAnchor" class="label-list">
-        <FunctionButton
-          v-for="label in filteredLabels"
-          :key="label.labelId"
-          compact
-          class="with-border"
-          :active="isActiveLabel(label)"
-          @mouseover="mouseOver"
-          @mouseleave="mouseLeave"
-          @click.stop="togglePopover(label, $event.currentTarget)"
-          @keydown.esc.stop="popover?.closeMenu()"
-        >
-          {{ truncateString(label.label.name, LABEL_LENGTH) }}
-        </FunctionButton>
-
-        <FunctionButton
-          v-if="isShowMoreVisible"
-          compact
-          class="with-border"
-          @mouseover="mouseOver"
-          @mouseleave="mouseLeave"
-          @click.stop="showMore"
-          >{{ showMoreButtonText }}</FunctionButton
-        >
-      </div>
-
-      <div
-        ref="floatingPanel"
-        class="floating-panel"
-        :style="popoverFloatingStyles"
-        @click.stop
-        @mouseover="mouseOver"
-        @mouseleave="mouseLeave"
-      >
-        <Popover
-          ref="popover"
-          :use-button="false"
-          :button-with-border="false"
-          arrow-position="right"
-          @close="activeLabel = null"
-        >
-          <template #content>
-            <h6 class="headline">
-              {{ activeLabel?.label.name }}
-            </h6>
-            <div class="panel">
-              <div class="description">
-                {{ activeLabel?.label.description }}
-              </div>
-              <div class="message">{{ activeLabel?.message }}</div>
-            </div>
-          </template>
-        </Popover>
-      </div>
-    </div>
-  </template>
-</template>
-
-<style lang="postcss" scoped>
-.label-list-with-popover {
-  position: relative;
-
-  & .label-list {
-    position: relative;
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--space-4);
-    align-items: center;
-    padding: var(--space-6) 0;
-
-    & .function-button {
-      &.with-border {
-        padding: 2px var(--space-8);
-        border: 1px solid var(--knime-silver-sand);
-
-        &.active {
-          border-color: var(--theme-button-function-background-color-active);
-        }
-      }
-    }
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  & .floating-panel {
-    z-index: 3;
-  }
-}
-
-/* the position is set back because it interferes with the position calculation of floating UI */
-.popover.expanded :deep(.content) {
-  position: initial;
-}
-
-.headline,
-.panel {
-  line-height: 1.5;
-}
-
-.headline {
-  padding-right: 18px;
-  margin: 0;
-  margin: 0 0 var(--space-8);
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.panel {
-  & .description {
-    margin-bottom: var(--space-6);
-  }
-
-  & .message,
-  & .description {
-    font-size: 13px;
-    font-weight: 300;
-
-    &:empty {
-      display: none;
-    }
-  }
-}
-
-@media only screen and (width <= 900px) {
-  .label-list-with-popover {
-    display: none;
-  }
-}
-</style>

package/src/components/versions/components/ManageVersions.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-import { useEventBus } from "@vueuse/core";
-import { throttle } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
-
-import { FunctionButton } from "@knime/components";
-import CloseIcon from "@knime/styles/img/icons/close.svg";
-import HistoryIcon from "@knime/styles/img/icons/history.svg";
-
-import { CURRENT_STATE_VERSION } from "../constants";
-import type {
-  ItemSavepoint,
-  NamedItemVersion,
-  VersionLimit,
-  WithAvatar,
-  WithLabels,
-} from "../types";
-
-import CurrentState from "./CurrentState.vue";
-import VersionHistory from "./VersionHistory.vue";
-import VersionLimitInfo from "./VersionLimitInfo.vue";
-
-type ManageVersionsProps = {
-  hasUnversionedChanges: boolean;
-  unversionedSavepoint?: (ItemSavepoint & WithAvatar & WithLabels) | null;
-  currentVersion: NamedItemVersion["version"] | null;
-  versionHistory: Array<NamedItemVersion & WithAvatar & WithLabels>;
-  loading: boolean;
-  hasLoadedAllVersions: boolean;
-  hasAdminRights: boolean;
-  hasEditCapability: boolean;
-  versionLimit?: VersionLimit;
-  upgradeUrl?: string;
-  isPrivate?: boolean;
-};
-
-defineProps<ManageVersionsProps>();
-
-defineEmits<{
-  close: [];
-  loadAll: [];
-  create: [];
-  delete: [version: NamedItemVersion["version"]];
-  restore: [version: NamedItemVersion["version"]];
-  select: [version: NamedItemVersion["version"]];
-  discardCurrentState: [];
-}>();
-
-const labelsEventBus = useEventBus("versionLabels");
-
-const closeLabelPopovers = throttle(() => {
-  labelsEventBus.emit("versionLabelShowPopover");
-  // eslint-disable-next-line no-magic-numbers
-}, 10000); // Arbitrary delay to reduce overhead, is automatically reset @scrollend
-</script>
-
-<template>
-  <div class="manage-versions-container">
-    <FunctionButton class="close" @click="$emit('close')">
-      <CloseIcon />
-    </FunctionButton>
-
-    <div class="manage-versions">
-      <div class="header">
-        <HistoryIcon class="history-icon" /><!--
-        -->
-        <h4>Version history</h4>
-        <div
-          v-if="hasUnversionedChanges && unversionedSavepoint"
-          class="changes"
-        >
-          <CurrentState
-            :has-edit-capability="hasEditCapability"
-            :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')"
-          />
-        </div>
-      </div>
-      <div
-        class="overflow-container"
-        @scroll="closeLabelPopovers"
-        @scrollend="closeLabelPopovers.cancel"
-      >
-        <div class="versions">
-          <VersionHistory
-            :selected-version="currentVersion"
-            :version-history
-            :loading
-            :has-unversioned-changes
-            :has-loaded-all-versions
-            :has-admin-rights
-            :has-edit-capability
-            @delete="$emit('delete', $event)"
-            @restore="$emit('restore', $event)"
-            @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
-            :is-private
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-@import url("@knime/styles/css/mixins.css");
-
-.manage-versions-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  height: 100%;
-  overscroll-behavior: none;
-  background-color: var(--knime-gray-light-semi);
-  isolation: isolate;
-
-  & .close {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 3;
-  }
-
-  & .manage-versions {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    & .header {
-      z-index: 2;
-      padding: 32px 30px 30px;
-      background-color: var(--knime-white);
-
-      & h4 {
-        display: inline;
-        margin: 0;
-        font-size: 22px;
-        line-height: 26px;
-      }
-
-      & .history-icon {
-        @mixin svg-icon-size 24;
-
-        position: relative;
-        top: 1px;
-        margin-right: 9px;
-        vertical-align: sub;
-        stroke: var(--knime-masala);
-      }
-    }
-
-    & .overflow-container {
-      overflow-y: auto;
-
-      & .versions {
-        width: 100%;
-        padding: 30px;
-
-        & .version-limit-info {
-          margin-top: 30px;
-        }
-      }
-    }
-
-    & .changes {
-      width: 100%;
-      padding-top: 30px;
-      background-color: var(--knime-white);
-    }
-  }
-}
-</style>

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>