@knime/hub-features 1.28.0 → 1.29.1

package/src/components/versions/components/CurrentState.vue

@@ -1,258 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-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 type { ItemSavepoint, WithAvatar, WithLabels } from "../types";
-
-import LabelList from "./LabelList.vue";
-
-const props = defineProps<{
-  isSelected: boolean;
-  hasEditCapability: boolean;
-  hasPreviousVersion: boolean;
-  currentStateSavepoint: ItemSavepoint & WithAvatar & WithLabels;
-  isVersionLimitExceeded?: boolean;
-}>();
-
-const emit = defineEmits<{
-  createVersion: [];
-  discard: [];
-  select: [];
-}>();
-
-const menuItems = computed(() => {
-  return props.hasEditCapability && props.hasPreviousVersion
-    ? [
-        {
-          text: "Discard",
-          action: () => emit("discard"),
-        },
-      ]
-    : [];
-});
-
-const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
-  item.action();
-};
-</script>
-
-<template>
-  <div class="wrapper">
-    <div
-      class="current-state"
-      :class="{ selected: isSelected }"
-      @click="!isSelected && $emit('select')"
-    >
-      <div class="left">
-        <div class="draft">
-          <h6><WrenchIcon class="draft-icon" /><span>Draft</span></h6>
-
-          <div class="labels">
-            <LabelList :labels="currentStateSavepoint.labels" />
-          </div>
-
-          <span class="date">
-            Latest edits on
-            <LocalDateTime
-              class="date"
-              show-time
-              :date="currentStateSavepoint.changes[0].createdOn"
-            />
-          </span>
-        </div>
-      </div>
-      <div class="right">
-        <Button
-          v-if="hasEditCapability && !isVersionLimitExceeded"
-          with-border
-          compact
-          class="create-button"
-          @click.stop="$emit('createVersion')"
-        >
-          Create version
-        </Button>
-        <HubAvatar
-          class="profile-picture"
-          v-bind="currentStateSavepoint.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>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-@import url("@knime/styles/css/mixins.css");
-
-.wrapper {
-  position: relative;
-  margin-left: 30px;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: -22px;
-    width: 2px;
-    height: calc(100% + 30px);
-    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;
-  }
-
-  & .current-state {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    background-color: var(--knime-gray-ultra-light);
-    transition: background-color 0.25s ease;
-
-    & .left {
-      & .draft {
-        display: flex;
-        flex-direction: column;
-        gap: 3px;
-        word-break: normal;
-        overflow-wrap: anywhere;
-
-        & h6 {
-          display: flex;
-          align-items: center;
-          margin: 0;
-          font-size: 13px;
-          font-weight: 700;
-          line-height: 18px;
-          transition: color 0.25s ease;
-
-          & .draft-icon {
-            @mixin svg-icon-size 20;
-
-            padding: 4px;
-            margin-right: 4px;
-            background: var(--knime-carrot-light);
-            border-radius: 1000px;
-          }
-        }
-
-        & .labels {
-          display: flex;
-          flex-flow: row wrap;
-          gap: 5px;
-          align-items: center;
-        }
-
-        & .date {
-          margin: 0;
-          font-size: 11px;
-          font-weight: 300;
-          line-height: 16px;
-          transition: color 0.25s ease;
-        }
-      }
-    }
-
-    & .right {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      justify-content: flex-end;
-
-      & .create-button {
-        white-space: nowrap;
-      }
-
-      & .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-gray-ultra-light);
-      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);
-
-          & .draft-icon {
-            background: none;
-            stroke: var(--knime-cornflower-dark);
-          }
-        }
-      }
-
-      & .controls {
-        border-left: 1px solid var(--knime-cornflower-light);
-      }
-
-      &::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/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>