@knime/hub-features 1.27.0 → 1.29.0

package/src/components/versions/components/VersionItem.vue

@@ -1,278 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { compact } from "lodash-es"; // eslint-disable-line depend/ban-dependencies
-
-import { LocalDateTime, SubMenu, Tooltip } from "@knime/components";
-import MenuIcon from "@knime/styles/img/icons/menu-options.svg";
-import { truncateString } from "@knime/utils";
-
-import HubAvatar from "../../avatars/HubAvatar.vue";
-import type { NamedItemVersion, WithAvatar, WithLabels } from "../types";
-
-import LabelList from "./LabelList.vue";
-
-const DESCRIPTION_TRUNCATE_LENGTH = 120;
-
-const props = defineProps<{
-  version: NamedItemVersion & WithAvatar & WithLabels;
-  isSelected: boolean;
-  hasAdminRights: boolean;
-  hasEditCapability: boolean;
-}>();
-
-const emit = defineEmits<{
-  select: [selectionStatus: boolean];
-  delete: [];
-  restore: [];
-}>();
-
-const hideTooltip = ref(false);
-const tooltipText = computed(() => {
-  if (hideTooltip.value) {
-    return "";
-  }
-
-  if (props.isSelected) {
-    return "Deselect to go back to latest";
-  } else {
-    return "Show version";
-  }
-});
-
-const truncatedDescription = computed(() => {
-  return truncateString(props.version.description, DESCRIPTION_TRUNCATE_LENGTH);
-});
-const isDescriptionTruncated = computed(
-  () =>
-    props.version.description &&
-    props.version.description.length !== truncatedDescription.value.length,
-);
-const isDescriptionExpanded = ref(false);
-
-const toggleVersionSelection = () => {
-  emit("select", !props.isSelected);
-};
-
-const menuItems = computed(() =>
-  compact([
-    props.hasEditCapability && {
-      text: props.isSelected ? "Deselect this version" : "Show this version",
-      action: toggleVersionSelection,
-    },
-    props.hasEditCapability && {
-      text: "Restore this version",
-      action: () => emit("restore"),
-    },
-    props.hasAdminRights && {
-      text: "Delete this version",
-      action: () => emit("delete"),
-    },
-  ]),
-);
-
-const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
-  item.action();
-};
-
-const onExpandDescription = () => {
-  isDescriptionExpanded.value = true;
-};
-
-const onLabelOver = () => {
-  hideTooltip.value = true;
-};
-const onLabelLeave = () => {
-  hideTooltip.value = false;
-};
-</script>
-
-<template>
-  <div>
-    <div
-      :class="['version-item-container', isSelected && 'selected']"
-      @click="toggleVersionSelection"
-    >
-      <Tooltip ref="tooltip" class="tooltip" :text="tooltipText">
-        <div class="left">
-          <h6>
-            {{ version.title }}
-          </h6>
-
-          <div class="labels">
-            <LabelList
-              :labels="version.labels"
-              @label-over="onLabelOver"
-              @label-leave="onLabelLeave"
-            />
-          </div>
-
-          <p v-if="isDescriptionTruncated && !isDescriptionExpanded">
-            {{ truncatedDescription }}
-            <button class="show-more-button" @click.stop="onExpandDescription">
-              Show more
-            </button>
-          </p>
-          <p v-else-if="version.description">{{ version.description }}</p>
-          <span class="footer-info">
-            Created on <LocalDateTime show-time :date="version.createdOn" /> –
-            Version {{ version.version }}
-          </span>
-        </div>
-        <div class="right">
-          <HubAvatar class="profile-picture" v-bind="version.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>
-      </Tooltip>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.version-item-container {
-  position: relative;
-  display: flex;
-  gap: 15px;
-  align-items: center;
-  align-items: stretch;
-  padding: 10px;
-  background-color: var(--knime-white);
-  transition: background-color 0.25s ease;
-
-  & .tooltip {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  & p {
-    margin: 10px 0;
-    font-size: 11px;
-    line-height: 1.5;
-  }
-
-  & button {
-    all: unset;
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--knime-dove-gray);
-  }
-
-  & .left {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    word-break: normal;
-    overflow-wrap: break-word;
-
-    & h6 {
-      display: block;
-      margin: 0;
-      font-size: 13px;
-      font-weight: 700;
-      line-height: 18px;
-      transition: color 0.25s ease;
-    }
-
-    & .footer-info {
-      margin: 0;
-      font-size: 11px;
-      font-weight: 300;
-      line-height: 1.5;
-      transition: color 0.25s ease;
-    }
-  }
-
-  & .right {
-    display: flex;
-    gap: 8px;
-    align-items: stretch;
-    justify-content: flex-end;
-    width: 100px;
-
-    & .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-white);
-    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);
-      }
-    }
-
-    & .controls {
-      border-left: 1px solid var(--knime-cornflower-light);
-    }
-
-    & .footer-info {
-      color: var(--knime-cornflower-dark);
-    }
-
-    &::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/VersionLimitInfo.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-import { InlineMessage } from "@knime/components";
-
-import type { VersionLimit } from "../types";
-
-const {
-  versionLimit,
-  upgradeUrl = undefined,
-  isPrivate = false,
-} = defineProps<{
-  versionLimit: Required<VersionLimit>;
-  upgradeUrl?: string;
-  isPrivate?: boolean;
-}>();
-
-const isLimitReached = computed(
-  () => versionLimit.currentUsage >= versionLimit.limit,
-);
-
-const title = computed(() => {
-  if (isLimitReached.value) {
-    return `You've reached the maximum of ${versionLimit.limit} versions.`;
-  } else {
-    return `Using ${versionLimit.currentUsage} of ${versionLimit.limit} versions.`;
-  }
-});
-</script>
-
-<template>
-  <InlineMessage variant="info" :title>
-    <template v-if="upgradeUrl"><a :href="upgradeUrl">Upgrade</a></template>
-    <template v-else>Upgrade</template>
-    to use unlimited versions{{ isPrivate ? " for private items." : "." }}
-  </InlineMessage>
-</template>

package/src/components/versions/composables/useVersionsApi.ts

@@ -1,254 +0,0 @@
-import { type FetchOptions } from "ofetch";
-
-import { type HubAvatarData, rfcErrors } from "@knime/hub-features";
-import { VERSION_DEFAULT_LIMIT } from "@knime/hub-features/versions";
-import type {
-  AssignedLabel,
-  ItemPermission,
-  ItemSavepoint,
-  NamedItemVersion,
-  RepositoryItem,
-  VersionLimit,
-  WithAvatar,
-  WithLabels,
-} from "@knime/hub-features/versions";
-
-import { getFetchClient } from "../../../common/ofetchClient";
-
-type UseVersionsApiOptions = {
-  customFetchClientOptions?: FetchOptions;
-};
-
-export const useVersionsApi = ({
-  customFetchClientOptions,
-}: UseVersionsApiOptions) => {
-  const $ofetch = getFetchClient(customFetchClientOptions);
-
-  const doHubRequest = async (path: string, fetchOptions?: FetchOptions) => {
-    const defaults: FetchOptions = {
-      method: "GET",
-    };
-
-    try {
-      consola.trace("useVersionsApi::calling", {
-        path,
-        options: fetchOptions,
-      });
-
-      return await $ofetch(path, { ...defaults, ...fetchOptions });
-    } catch (error) {
-      throw rfcErrors.tryParse(error) ?? error;
-    }
-  };
-
-  const fetchRepositoryItem = ({ itemId }: { itemId: string }) => {
-    return doHubRequest(`/repository/${itemId}`) as Promise<RepositoryItem>;
-  };
-
-  const fetchVersionLimit = ({ itemId }: { itemId: string }) => {
-    return doHubRequest(
-      `/repository/limits/${itemId}/item-versions`,
-    ) as Promise<VersionLimit>;
-  };
-
-  const fetchVersions = ({
-    itemId,
-    loadAll,
-  }: {
-    itemId: string;
-    loadAll: boolean;
-  }) => {
-    let path = `/repository/${itemId}/versions`;
-
-    if (loadAll) {
-      path += "?limit=-1";
-    }
-
-    return doHubRequest(path) as Promise<{
-      totalCount: number;
-      versions: Array<NamedItemVersion>;
-    }>;
-  };
-
-  const fetchResourceLabels = async ({
-    resourceType,
-    resourceId,
-  }: {
-    resourceType: "savepoint";
-    resourceId: string;
-  }): Promise<{
-    assignedLabels: Array<AssignedLabel>;
-  }> => {
-    try {
-      return await doHubRequest(
-        `/validation/validation/resources/${resourceType}/${resourceId}/labels`,
-      );
-    } catch (error) {
-      consola.error("useVersionsApi::Failed to fetch resource labels", {
-        resourceId,
-        resourceType,
-        error,
-      });
-
-      return { assignedLabels: [] };
-    }
-  };
-
-  const deleteVersion = ({
-    itemId,
-    version,
-  }: {
-    itemId: string;
-    version: NamedItemVersion["version"];
-  }) => {
-    return doHubRequest(`/repository/${itemId}/versions/${version}`, {
-      method: "DELETE",
-    });
-  };
-
-  const restoreVersion = ({
-    itemId,
-    version,
-  }: {
-    itemId: string;
-    version: NamedItemVersion["version"];
-  }) => {
-    return doHubRequest(
-      `/repository/${itemId}/workingArea?fromVersion=${version}`,
-      {
-        method: "POST",
-      },
-    );
-  };
-
-  const discardUnversionedChanges = ({ itemId }: { itemId: string }) => {
-    return doHubRequest(`/repository/${itemId}/workingArea`, {
-      method: "DELETE",
-    });
-  };
-
-  const createVersion = ({
-    itemId,
-    title,
-    description,
-  }: {
-    itemId: string;
-    title: string;
-    description: string;
-  }): Promise<NamedItemVersion> => {
-    return doHubRequest(`/repository/${itemId}/versions`, {
-      method: "POST",
-      body: JSON.stringify({
-        title,
-        description,
-      }),
-    });
-  };
-
-  const getAvatar = async ({
-    accountName,
-  }: {
-    accountName: string;
-  }): Promise<HubAvatarData> => {
-    try {
-      const accountInfo = await doHubRequest(`/accounts/name/${accountName}`, {
-        headers: {
-          Prefer: "representation=minimal",
-        },
-      });
-
-      return {
-        kind: accountInfo.type === "TEAM" ? "group" : "account",
-        name: accountInfo.name,
-        image: {
-          url: accountInfo.avatarUrl,
-          altText: `${accountInfo.realName ?? accountInfo.name} profile image`,
-        },
-      };
-    } catch (error) {
-      consola.error("useVersionsApi::Failed to fetch user avatar", {
-        accountName,
-        error,
-      });
-
-      return {
-        kind: "account",
-        name: "?",
-        tooltip: "unknown",
-      };
-    }
-  };
-
-  const loadSavepointMetadata = async (
-    savepoint: ItemSavepoint,
-  ): Promise<WithAvatar & WithLabels> => {
-    const avatar = await getAvatar({
-      accountName: savepoint.version?.author ?? savepoint.author,
-    });
-
-    const labels = savepoint.itemVersionId
-      ? await fetchResourceLabels({
-          resourceType: "savepoint",
-          resourceId: savepoint.itemVersionId,
-        }).then((response) => response.assignedLabels)
-      : [];
-
-    return { avatar, labels };
-  };
-
-  const fetchItemSavepoints = ({
-    itemId,
-    limit,
-  }: {
-    itemId: string;
-    limit?: number;
-  }) => {
-    return doHubRequest(
-      `/repository/${itemId}/savepoints?limit=${
-        limit ?? VERSION_DEFAULT_LIMIT
-      }`,
-    ) as Promise<{
-      totalCount: number;
-      savepoints: Array<ItemSavepoint>;
-    }>;
-  };
-
-  const fetchPermissions = async ({
-    itemId,
-  }: {
-    itemId: string;
-  }): Promise<ItemPermission[]> => {
-    const masonControlsMap = {
-      "knime:delete": "DELETE",
-      edit: "EDIT",
-      "knime:configuration": "CONFIGURATION",
-      "knime:move": "MOVE",
-      "knime:copy": "COPY",
-    } as const;
-
-    const repositoryItem = await fetchRepositoryItem({
-      itemId,
-    });
-    return Object.keys(repositoryItem["@controls"])
-      .filter((control) => control in masonControlsMap)
-      .map(
-        (control) => masonControlsMap[control as keyof typeof masonControlsMap],
-      );
-  };
-
-  return {
-    fetchVersions,
-    fetchVersionLimit,
-    fetchResourceLabels,
-    fetchItemSavepoints,
-    fetchPermissions,
-    loadSavepointMetadata,
-    deleteVersion,
-    restoreVersion,
-    discardUnversionedChanges,
-    createVersion,
-    getAvatar,
-  };
-};
-
-export type VersionsAPI = ReturnType<typeof useVersionsApi>;

package/src/components/versions/constants.ts

@@ -1,3 +0,0 @@
-export const VERSION_DEFAULT_LIMIT = 10;
-export const CURRENT_STATE_VERSION = "current-state";
-export const MOST_RECENT_VERSION = "most-recent";

package/src/components/versions/index.ts

@@ -1,7 +0,0 @@
-import CreateVersionForm from "./components/CreateVersionForm.vue";
-import ManageVersions from "./components/ManageVersions.vue";
-
-export { CreateVersionForm, ManageVersions };
-export type * from "./types";
-export * from "./constants";
-export * from "./composables/useVersionsApi";

package/src/components/versions/types.ts

@@ -1,77 +0,0 @@
-import type { HubAvatarData } from "../avatars/HubAvatar.vue";
-
-import type { CURRENT_STATE_VERSION, MOST_RECENT_VERSION } from "./constants";
-
-// TODO: Generate from OpenAPI spec
-export type NamedItemVersion = {
-  version: number | typeof CURRENT_STATE_VERSION | typeof MOST_RECENT_VERSION;
-  title: string;
-  description?: string;
-  author: string;
-  authorAccountId?: string;
-  createdOn: string;
-};
-
-interface MasonControl {
-  [key: string]: {
-    href: string;
-    method: string;
-    accept?: string[];
-    encoding?: string;
-    title?: string;
-  };
-}
-
-export type RepositoryItem = {
-  path: string;
-  id: string;
-  type: string;
-  owner: string;
-  author: string;
-  createdOn: string;
-  "@controls": Array<MasonControl>;
-};
-
-export type AssignedLabel = {
-  labelId: string;
-  message?: string;
-  createdAt?: string;
-  createdBy?: string; // UUID
-  label: {
-    name?: string;
-    description?: string;
-  };
-};
-
-export type WithAvatar = { avatar: HubAvatarData };
-export type WithLabels = { labels: Array<AssignedLabel> };
-
-type ItemChange = {
-  author: string;
-  createdOn: string;
-  eventActionType: "ADDED" | "UPDATED" | "MOVED" | "RENAMED";
-  message: string;
-  authorAccountId?: string;
-};
-
-export type ItemSavepoint = {
-  author: string;
-  authorAccountId?: string;
-  lastEditedOn: string;
-  savepointNumber: number;
-  version?: NamedItemVersion;
-  itemVersionId?: string; // UUID
-  changes: Array<ItemChange>;
-};
-
-export type ItemPermission =
-  | "DELETE"
-  | "EDIT"
-  | "CONFIGURATION"
-  | "MOVE"
-  | "COPY";
-
-export type VersionLimit = {
-  currentUsage: number;
-  limit?: number;
-};