@knime/hub-features 1.2.24 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @knime/hub-features
 
+## 1.3.0
+
+### Minor Changes
+
+- e9beadc: Port VersionManager components
+
+### Patch Changes
+
+- Updated dependencies [6c99c22]
+  - @knime/components@1.20.0
+
+## 1.2.25
+
+### Patch Changes
+
+- Updated dependencies [5f3ca36]
+  - @knime/components@1.19.4
+
 ## 1.2.24
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/hub-features",
-  "version": "1.2.24",
+  "version": "1.3.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)",
@@ -18,16 +18,20 @@
   "exports": {
     ".": {
       "import": "./src/index.ts"
+    },
+    "./versions": {
+      "import": "./src/components/versions/index.ts"
     }
   },
   "dependencies": {
+    "@floating-ui/vue": "1.1.5",
     "@vueuse/components": "~10.11.1",
     "@vueuse/core": "~10.11.1",
     "@vueuse/shared": "~10.11.1",
     "lodash-es": "4.17.21",
     "ofetch": "^1.4.1",
     "typescript": "^5.4.5",
-    "@knime/components": "1.19.3",
+    "@knime/components": "1.20.0",
     "@knime/styles": "1.3.1",
     "@knime/utils": "1.3.1"
   },

package/src/components/Popover.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { type Ref, ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+
+import { FunctionButton } from "@knime/components";
+import CloseIcon from "@knime/styles/img/icons/close.svg";
+
+type Props = {
+  disabled?: boolean;
+  buttonTitle?: string | null;
+  useButton?: boolean;
+  buttonWithBorder?: boolean;
+  hasCloseButton?: boolean;
+  arrowPosition?: "top" | "right";
+};
+
+withDefaults(defineProps<Props>(), {
+  buttonTitle: null,
+  arrowPosition: "top",
+  useButton: true,
+  bottonWithBorder: true,
+  hasCloseButton: true,
+});
+
+const emit = defineEmits(["open", "close"]);
+
+const expanded = ref(false);
+const toggleRef: Ref<InstanceType<typeof FunctionButton> | null> = ref(null);
+const expandedElemRef = ref<HTMLElement | null>(null);
+
+const closeMenu = () => {
+  if (expanded.value) {
+    consola.trace("Closing popover menu");
+    emit("close");
+    expanded.value = false;
+  }
+};
+const openMenu = () => {
+  consola.trace("Opening popover menu");
+  emit("open");
+  expanded.value = true;
+};
+const onToggle = () => {
+  if (expanded.value) {
+    closeMenu();
+  } else {
+    openMenu();
+  }
+};
+const onFocus = () => {
+  toggleRef.value?.focus();
+};
+
+onClickOutside(expandedElemRef, closeMenu, { capture: false });
+
+defineExpose({
+  openMenu,
+  closeMenu,
+  onToggle,
+});
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    :class="['popover', `arrow-${arrowPosition}`, { expanded }]"
+    :expanded="expanded"
+    @focus="onFocus"
+  >
+    <!-- use mouseup instead of click as the click event fires twice on key input in Firefox-->
+    <FunctionButton
+      v-if="useButton"
+      ref="toggleRef"
+      :title="buttonTitle"
+      class="toggle"
+      :class="{ 'with-border': buttonWithBorder }"
+      :active="expanded"
+      :disabled="disabled"
+      @mouseup.stop="onToggle"
+      @keydown.space.stop="onToggle"
+      @keydown.esc.stop="closeMenu"
+    >
+      <slot name="button" />
+    </FunctionButton>
+    <span
+      v-else
+      ref="toggleRef"
+      tabindex="0"
+      :title="buttonTitle ?? undefined"
+      :active="expanded"
+      :class="['toggle', { disabled, 'with-border': buttonWithBorder }]"
+      @mouseup.stop="onToggle"
+      @keydown.space.prevent="onToggle"
+      @keydown.esc.prevent="closeMenu"
+    >
+      <slot name="button" />
+    </span>
+    <div v-if="expanded" ref="expandedElemRef" class="content">
+      <slot name="content" />
+      <FunctionButton
+        v-if="hasCloseButton"
+        class="closer"
+        @click.stop="closeMenu"
+      >
+        <CloseIcon />
+      </FunctionButton>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.popover {
+  position: relative;
+  --popover-top-margin: 18px;
+  --popover-arrow-size: 15px;
+
+  filter: drop-shadow(0 2px 10px var(--knime-gray-dark-semi));
+
+  &.expanded {
+    z-index: 1;
+
+    &::after {
+      position: absolute;
+      content: "";
+      width: 0;
+      height: 0;
+    }
+
+    /* transparent background to maintain focus on the popover while transitioning into it with the mouse */
+    &::before {
+      content: "";
+      position: absolute;
+      background-color: rgb(0 0 0 / 0%);
+    }
+
+    &.arrow-top {
+      &::after {
+        top: calc(100% + var(--popover-top-margin) - var(--popover-arrow-size));
+        right: 20px;
+        border-left: var(--popover-arrow-size) solid transparent;
+        border-right: var(--popover-arrow-size) solid transparent;
+        border-bottom: var(--popover-arrow-size) solid var(--knime-white);
+
+        @media only screen and (width <= 900px) {
+          border-top: var(--popover-arrow-size) solid var(--knime-white);
+          border-bottom: 0;
+          bottom: calc(
+            100% + var(--popover-top-margin) - var(--popover-arrow-size)
+          );
+          top: auto;
+        }
+      }
+
+      &::before {
+        top: calc(100% + var(--popover-top-margin) - var(--popover-arrow-size));
+        right: 0;
+        width: var(--popover-width, 300px);
+        height: var(--popover-arrow-size);
+      }
+    }
+
+    &.arrow-right {
+      &::after {
+        top: 40px;
+        left: var(--popover-width, 300px);
+        width: var(--popover-arrow-size);
+        height: auto;
+        aspect-ratio: 1/2;
+        background: var(--knime-white);
+        clip-path: polygon(0 0, 100% 50%, 0 100%);
+      }
+    }
+  }
+
+  & .content {
+    width: var(--popover-width, 300px);
+    position: absolute;
+    top: calc(
+      100% + var(--popover-top-margin) - 1px
+    ); /* shift by one pixel to avoid zoom issues */
+
+    right: 0;
+    padding: 20px;
+    background: var(--knime-white);
+
+    @media only screen and (width <= 900px) {
+      bottom: calc(
+        100% + var(--popover-top-margin) - 1px
+      ); /* shift by one pixel to avoid zoom issues */
+
+      top: auto;
+    }
+  }
+
+  & .toggle {
+    display: flex;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  & .with-border {
+    &.function-button {
+      border: 1px solid var(--knime-silver-sand);
+
+      &.active {
+        border-color: var(--theme-button-function-background-color-active);
+      }
+    }
+  }
+
+  & .closer {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+  }
+}
+</style>

package/src/components/avatars/HubAccountAvatar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Avatar } from "@knime/components";
+
+import type { HubAccountAvatarData } from "./HubAvatar.vue";
+/**
+ * Displays the avatar image for an account (i.e., team or user)
+ * or a colored placeholder. See HubAvatar.
+ */
+withDefaults(defineProps<HubAccountAvatarData>(), {
+  isTrusted: false,
+});
+</script>
+
+<template>
+  <Avatar
+    :image
+    :name
+    :tooltip
+    :show-text
+    :layout
+    :show-trusted="isTrusted"
+    :link-url
+  >
+    <template #overlay>
+      <slot />
+    </template>
+  </Avatar>
+</template>
+
+<style lang="postcss" scoped></style>

package/src/components/avatars/HubAvatar.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import HubAccountAvatar from "./HubAccountAvatar.vue";
+import HubGroupAvatar from "./HubGroupAvatar.vue";
+
+/**
+ * Avatar component which displays an image or a colored placeholder as well as a text
+ * for accounts (i.e., teams or users) or for groups. Depending on the entity for which
+ * an avatar image should be shown, this component renders a HubGroupAvatar or HubAccountAvatar.
+ */
+
+type CommonAvatarData = {
+  name: string;
+  linkUrl?: string;
+  layout?: "vertical" | "horizontal";
+  showText?: "name" | "placeholder" | "none";
+};
+
+export type HubGroupAvatarData = CommonAvatarData & {
+  kind: "group";
+  membersCount?: number;
+  isAdminGroup?: boolean;
+};
+
+export type HubAccountAvatarData = CommonAvatarData & {
+  kind: "account";
+  image?: { url?: string | null; altText?: string };
+  isTrusted?: boolean;
+  tooltip?: string;
+};
+
+export type HubAvatarData = HubGroupAvatarData | HubAccountAvatarData;
+
+const props = defineProps<HubAvatarData>();
+
+const renderComponent = computed(() => {
+  return props.kind === "group" ? HubGroupAvatar : HubAccountAvatar;
+});
+</script>
+
+<template>
+  <Component :is="renderComponent" v-bind="props">
+    <slot />
+  </Component>
+</template>

package/src/components/avatars/HubGroupAvatar.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { Avatar } from "@knime/components";
+import AdminGroupIcon from "@knime/styles/img/icons/team-group-admin.svg";
+import MemberGroupIcon from "@knime/styles/img/icons/team-group.svg";
+
+import type { HubGroupAvatarData } from "./HubAvatar.vue";
+
+/**
+ * Displays the avatar image for a group.
+ * See HubAvatar for more details.
+ */
+const props = defineProps<HubGroupAvatarData>();
+
+const membersCountPostfix = computed(() => {
+  if (props.membersCount === 0) {
+    return " (0 people)";
+  }
+  if (props.membersCount === 1) {
+    return " (1 person)";
+  }
+
+  return ` (${props.membersCount} people)`;
+});
+
+const displayText = computed(() => {
+  return `${props.name}${membersCountPostfix.value}`;
+});
+</script>
+
+<template>
+  <Avatar
+    :name="displayText"
+    :tooltip="displayText"
+    :show-text
+    :layout
+    :link-url
+    descriptor="Group"
+  >
+    <template #default>
+      <div class="container">
+        <AdminGroupIcon v-if="isAdminGroup" class="admin" />
+        <MemberGroupIcon v-else class="member" />
+      </div>
+    </template>
+
+    <template #overlay>
+      <slot />
+    </template>
+  </Avatar>
+</template>
+
+<style lang="postcss" scoped>
+@import url("@knime/styles/css/mixins.css");
+
+.container {
+  position: relative;
+  background-color: var(--knime-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  & > svg {
+    @mixin svg-icon-size 24;
+
+    position: absolute;
+    stroke: var(--knime-dove-gray);
+  }
+}
+</style>

package/src/components/avatars/index.ts

@@ -0,0 +1 @@
+export type * from "./HubAvatar.vue";

package/src/components/versions/CreateVersionForm.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useTextareaAutosize } from "@vueuse/core";
+
+import { Button, InputField, Label, TextArea } from "@knime/components";
+
+const emit = defineEmits<{
+  create: [{ name: string; description: string }];
+  cancel: [];
+}>();
+
+const versionName = ref("");
+const versionDescription = ref("");
+
+const descriptionEditor = ref<InstanceType<typeof TextArea>>(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 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')"
+      >
+        <strong>Cancel</strong>
+      </Button>
+      <Button
+        primary
+        compact
+        class="button create"
+        :disabled="isVersionNameInvalid"
+        @click="onCreate"
+      >
+        <strong>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>