@knime/hub-features 1.2.24 → 1.3.0

package/src/components/versions/CurrentState.vue

@@ -0,0 +1,256 @@
+<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 LabelList from "./LabelList.vue";
+import type { ItemSavepoint, WithAvatar, WithLabels } from "./types";
+
+const props = defineProps<{
+  isSelected: boolean;
+  hasEditCapability: boolean;
+  currentStateSavepoint: ItemSavepoint & WithAvatar & WithLabels;
+}>();
+
+const emit = defineEmits<{
+  createVersion: [];
+  discard: [];
+  select: [];
+}>();
+
+const menuItems = computed(() => {
+  return props.hasEditCapability
+    ? [
+        {
+          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"
+          with-border
+          compact
+          class="create-button"
+          @click="$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 {
+    content: "";
+    position: absolute;
+    left: -22px;
+    top: 0;
+    width: 2px;
+    height: calc(100% + 30px);
+    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-size: 5px;
+    background-repeat: repeat-y;
+  }
+
+  & .current-state {
+    background-color: var(--knime-gray-ultra-light);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    gap: 10px;
+    transition: background-color 0.25s ease;
+
+    & .left {
+      & .draft {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+
+        & h6 {
+          display: flex;
+          align-items: center;
+          margin: 0;
+          font-size: 13px;
+          line-height: 18px;
+          font-weight: 700;
+          transition: color 0.25s ease;
+
+          & .draft-icon {
+            @mixin svg-icon-size 20;
+
+            margin-right: 4px;
+            background: var(--knime-carrot-light);
+            padding: 4px;
+            border-radius: 1000px;
+          }
+        }
+
+        & .labels {
+          display: flex;
+          flex-flow: row wrap;
+          align-items: center;
+          gap: 5px;
+        }
+
+        & .date {
+          margin: 0;
+          font-size: 11px;
+          line-height: 16px;
+          font-weight: 300;
+          transition: color 0.25s ease;
+        }
+      }
+    }
+
+    & .right {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 8px;
+
+      & .create-button {
+        white-space: nowrap;
+      }
+
+      & .controls {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        border-left: 1px solid var(--knime-silver-sand);
+        padding-left: 5px;
+        margin-right: -4px;
+      }
+    }
+
+    &::before {
+      content: "";
+      width: 12px;
+      height: 12px;
+      background-color: var(--knime-gray-ultra-light);
+      transform: rotateZ(45deg);
+      position: absolute;
+      left: -6px;
+      top: 12px;
+      transition: background-color 0.25s ease;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: -24px;
+      top: 15px;
+      background-color: var(--knime-masala);
+      width: 6px;
+      height: 6px;
+      border-radius: 100%;
+      box-shadow: 0 0 0 0 transparent;
+      transition:
+        background-color 0.25s ease,
+        box-shadow 0.25s ease;
+    }
+
+    &:hover {
+      box-shadow: 0 2px 10px 0 var(--knime-gray-dark-semi);
+      cursor: pointer;
+    }
+
+    &.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/LabelList.vue

@@ -0,0 +1,254 @@
+<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";
+
+import { FunctionButton } from "@knime/components";
+import { truncateString } from "@knime/utils";
+
+import Popover from "../Popover.vue";
+
+import type { AssignedLabel } from "./types";
+
+interface PopoverElement extends 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;
+    align-items: center;
+    gap: var(--space-4);
+    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 {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 0;
+  margin: 0 0 var(--space-8);
+  padding-right: 18px;
+}
+
+& .panel {
+  & .description {
+    margin-bottom: var(--space-6);
+  }
+
+  & .message,
+  & .description {
+    font-weight: 300;
+    font-size: 13px;
+
+    &:empty {
+      display: none;
+    }
+  }
+}
+
+@media only screen and (width <= 900px) {
+  .label-list-with-popover {
+    display: none;
+  }
+}
+</style>

package/src/components/versions/ManageVersions.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { useEventBus } from "@vueuse/core";
+import { throttle } from "lodash-es";
+
+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 type {
+  ItemSavepoint,
+  NamedItemVersion,
+  WithAvatar,
+  WithLabels,
+} from "./types";
+
+type ManageVersionsProps = {
+  hasUnversionedChanges: boolean;
+  unversionedSavepoint?: ItemSavepoint & WithAvatar & WithLabels;
+  currentVersion: NamedItemVersion["version"] | null;
+  versionHistory: Array<NamedItemVersion & WithAvatar & WithLabels>;
+  loading: boolean;
+  hasLoadedAllVersions: boolean;
+  hasAdminRights: boolean;
+  hasEditCapability: boolean;
+};
+
+defineProps<ManageVersionsProps>();
+
+defineEmits<{
+  close: [];
+  loadAll: [];
+  create: [];
+  delete: [version: NamedItemVersion["version"]];
+  restore: [version: NamedItemVersion["version"]];
+  select: [version: NamedItemVersion["version"]];
+}>();
+
+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
+            :is-selected="currentVersion === CURRENT_STATE_VERSION"
+            :current-state-savepoint="unversionedSavepoint"
+            @select="$emit('select', CURRENT_STATE_VERSION)"
+            @create-version="$emit('create')"
+          />
+        </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)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+@import url("@knime/styles/css/mixins.css");
+
+.manage-versions-container {
+  position: relative;
+  background-color: var(--knime-gray-light-semi);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  overscroll-behavior: none;
+  isolation: isolate;
+
+  & .close {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 3;
+  }
+
+  & .manage-versions {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    & .header {
+      background-color: var(--knime-white);
+      z-index: 2;
+      box-shadow: var(--shadow-elevation-1);
+      padding: 32px 30px 30px;
+
+      & h4 {
+        display: inline;
+        margin: 0;
+        font-size: 22px;
+        line-height: 26px;
+      }
+
+      & .history-icon {
+        @mixin svg-icon-size 24;
+
+        margin-right: 9px;
+        vertical-align: sub;
+        stroke: var(--knime-masala);
+        position: relative;
+        top: 1px;
+      }
+    }
+
+    & .overflow-container {
+      overflow-y: auto;
+
+      & .versions {
+        width: 100%;
+        padding: 30px;
+      }
+    }
+
+    & .changes {
+      background-color: var(--knime-white);
+      width: 100%;
+      padding-top: 30px;
+    }
+  }
+}
+</style>

package/src/components/versions/NoVersionItem.vue

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