@knime/hub-features 1.27.0 → 1.29.0

package/src/analytics/types.ts

@@ -1,6 +1,9 @@
 import type { AnalyticsEventSchema } from "./schema/schema";
 
-export type DefaultContext = Record<string, string | boolean | number>;
+export type DefaultContext = { eventSource: "cloudhome" | "editor" } & Record<
+  string,
+  string | boolean | number
+>;
 export type Metadata = Omit<AnalyticsEventSchema, "events">;
 
 type NewEvents = AnalyticsEventSchema["events"];

package/src/httpClient/constants.ts

@@ -0,0 +1 @@
+export const API_BASE_URL = "/_/api";

package/src/{common/ofetchClient.ts → httpClient/createHttpClient.ts}

@@ -1,9 +1,9 @@
 import { merge } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
 import { type FetchOptions, ofetch } from "ofetch";
 
-import { DEFAULT_API_BASE_URL } from "./constants";
+import { API_BASE_URL } from "./constants";
 
-export const defaultConfig: FetchOptions = {
+const defaultConfig: FetchOptions = {
   headers: {
     "Content-Type": "application/json",
 
@@ -12,11 +12,12 @@ export const defaultConfig: FetchOptions = {
   },
 } as const;
 
-export const getFetchClient = (customOptions?: FetchOptions) => {
-  const { baseURL = DEFAULT_API_BASE_URL, ...otherCustomOptions } =
-    customOptions ?? {};
+const createHttpClient = (customOptions?: FetchOptions) => {
+  const { baseURL = API_BASE_URL, ...otherCustomOptions } = customOptions ?? {};
 
   return ofetch.create(
     merge({ baseURL, ...otherCustomOptions }, defaultConfig),
   );
 };
+
+export { type FetchOptions, defaultConfig, createHttpClient };

package/src/httpClient/index.ts

@@ -0,0 +1,2 @@
+export * from "./createHttpClient";
+export * from "./constants";

package/src/index.ts

@@ -4,3 +4,4 @@ export * from "./useDownloadArtifact";
 export * from "./components/avatars";
 export * from "./embeddingSDK";
 export * from "./authUtils";
+export * from "./httpClient";

package/src/useDownloadArtifact/useDownloadArtifact.ts

@@ -4,7 +4,7 @@ import { FetchError, type FetchOptions } from "ofetch";
 import type { DownloadItem as DownloadItemExternal } from "@knime/components";
 import { sleep } from "@knime/utils";
 
-import { getFetchClient } from "../common/ofetchClient";
+import { createHttpClient } from "../httpClient/createHttpClient";
 import { rfcErrors } from "../rfcErrors";
 
 const DEFAULT_MAX_RETRIES = null;
@@ -91,7 +91,7 @@ const isAbortError = (error: unknown) =>
 export const useDownloadArtifact = (
   options: UseDownloadArtifactOptions = {},
 ) => {
-  const $ofetch = getFetchClient(options.customFetchClientOptions);
+  const $ofetch = createHttpClient(options.customFetchClientOptions);
 
   const downloadItems = ref<Record<string, DownloadItem>>({});
   const abortControllers: Record<string, AbortController> = {};

package/src/useFileUpload/useFileUpload.ts

@@ -9,7 +9,7 @@ import {
   promise,
 } from "@knime/utils";
 
-import { getFetchClient } from "../common/ofetchClient";
+import { createHttpClient } from "../httpClient/createHttpClient";
 import { rfcErrors } from "../rfcErrors";
 
 const DEFAULT_MAX_UPLOAD_QUEUE_SIZE = 10;
@@ -120,7 +120,7 @@ type UseFileUploadOptions = {
  * ```
  */
 export const useFileUpload = (options: UseFileUploadOptions = {}) => {
-  const $ofetch = getFetchClient(options.customFetchClientOptions);
+  const $ofetch = createHttpClient(options.customFetchClientOptions);
 
   const prepareUpload = (
     parentId: string,

package/src/common/constants.ts

@@ -1 +0,0 @@
-export const DEFAULT_API_BASE_URL = "/_/api";

package/src/components/versions/components/CreateVersionForm.vue

@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from "vue";
-import { useTextareaAutosize } from "@vueuse/core";
-
-import {
-  InputField,
-  Label,
-  SideDrawerControls,
-  SideDrawerHeader,
-  TextArea,
-} from "@knime/components";
-
-type Props = {
-  isCreationPending?: boolean;
-};
-
-withDefaults(defineProps<Props>(), { isCreationPending: false });
-
-const emit = defineEmits<{
-  create: [{ name: string; description: string }];
-  cancel: [hasUnsavedChanges: boolean];
-}>();
-
-const versionName = ref("");
-const versionDescription = ref("");
-
-const descriptionEditor = ref<InstanceType<typeof TextArea> | null>(null);
-
-onMounted(() => {
-  useTextareaAutosize({
-    element: descriptionEditor.value?.$el.getElementsByTagName("textarea")[0],
-    input: versionDescription,
-  });
-});
-
-const doValidate = ref(false);
-
-const isVersionNameInvalid = computed(() => {
-  return doValidate.value && versionName.value.length <= 0;
-});
-
-const hasUnsavedChanges = computed(() => {
-  return versionName.value !== "" || versionDescription.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">
-    <SideDrawerHeader
-      title="Create Version"
-      description="Give your version a name and description. Versions can be used to create a deployment.
-      "
-      :is-sub-drawer="true"
-      @close="$emit('cancel', hasUnsavedChanges)"
-    />
-    <div class="form-content">
-      <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">
-        <SideDrawerControls
-          class="create-version-controls"
-          :edit-enabled="true"
-          :processing="isCreationPending"
-          action-label="Create"
-          :disabled="isVersionNameInvalid || isCreationPending"
-          @save="onCreate"
-          @cancel="$emit('cancel', hasUnsavedChanges)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.create-version-form {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-
-  & .form-content {
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 30px;
-    height: 100%;
-    padding: 30px 30px 0;
-    overflow: auto;
-    overscroll-behavior: none;
-    background-color: var(--knime-gray-ultra-light);
-    isolation: isolate;
-
-    & .description {
-      display: flex;
-      width: 100%;
-      max-width: unset;
-
-      & :deep(textarea) {
-        box-sizing: content-box;
-        width: 100%;
-        max-height: 200px;
-        resize: none;
-      }
-    }
-
-    & .error {
-      position: absolute;
-      margin-top: 6px;
-      font-size: 13px;
-      font-weight: 300;
-      line-height: 18px;
-      color: var(--theme-color-error);
-      word-break: keep-all;
-    }
-
-    & .controls {
-      margin: 0 -30px;
-      margin-top: auto;
-    }
-
-    .create-version-controls {
-      margin: 0;
-    }
-  }
-}
-</style>

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>