@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/types/states.ts

@@ -0,0 +1,54 @@
+import { StateType } from '@/models/StateType'
+
+// intentionally grouped by state type progression
+// this order determines the other these show up in the ui
+export const prefectStateNames = [
+  'Scheduled',
+  'Late',
+  'Resuming',
+  'AwaitingRetry',
+  'Pending',
+  'Paused',
+  'Suspended',
+  'Running',
+  'Retrying',
+  'Completed',
+  'Cancelled',
+  'Cancelling',
+  'Crashed',
+  'Failed',
+  'TimedOut',
+] as const
+export type PrefectStateNames = typeof prefectStateNames[number]
+
+export const prefectStateNameTypes = {
+  'Scheduled': 'scheduled',
+  'Late': 'scheduled',
+  'Resuming': 'scheduled',
+  'AwaitingRetry': 'scheduled',
+  'Pending': 'pending',
+  'Paused': 'paused',
+  'Suspended': 'paused',
+  'Running': 'running',
+  'Retrying': 'running',
+  'Completed': 'completed',
+  'Cancelled': 'cancelled',
+  'Cancelling': 'cancelling',
+  'Crashed': 'crashed',
+  'Failed': 'failed',
+  'TimedOut': 'failed',
+} as const satisfies Record<PrefectStateNames, StateType>
+
+export const prefectStateNamesWithoutScheduled = [
+  'Pending',
+  'Paused',
+  'Suspended',
+  'Running',
+  'Retrying',
+  'Completed',
+  'Cancelled',
+  'Cancelling',
+  'Crashed',
+  'Failed',
+  'TimedOut',
+] as const

package/src/types/tabs.ts

@@ -0,0 +1,25 @@
+export type Tab = {
+  title: string,
+  key: string,
+  icon?: string,
+  class?: string,
+}
+
+export type RouterTab = Tab & {
+  route: {
+    name: string,
+    hash?: string,
+  },
+}
+
+export function isRouterTab(input: Tab | RouterTab): input is RouterTab {
+  const routerTab = input as RouterTab
+  return !!routerTab.route
+}
+
+type WithCount<T> = T & {
+  count: number | null,
+}
+
+export type ListTab = WithCount<Tab>
+export type ListRouterTab = WithCount<RouterTab>

package/src/types/tailwind.ts

@@ -0,0 +1 @@
+export type TailwindColor = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'

package/src/types/useEntitySubscription.ts

@@ -0,0 +1,8 @@
+import { Action, UseSubscription } from '@prefecthq/vue-compositions'
+import { ComputedRef } from 'vue'
+
+export type UseEntitySubscription<T extends Action, PropertyName extends string> = {
+  subscription: UseSubscription<T | (() => undefined)>,
+} & {
+  [ P in PropertyName ]: ComputedRef<UseSubscription<T | (() => undefined)>['response']>
+}

package/src/types/utilities.ts

@@ -0,0 +1,39 @@
+export type KeysMatching<T, V> = {
+  [K in keyof T]-?: T[K] extends V ? K : never
+}[keyof T]
+
+export type Require<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>
+
+export type AnyCase<T extends string> =
+  string extends T
+    ? string
+    : T extends `${infer F1}${infer F2}${infer R}`
+      ? (`${Uppercase<F1> | Lowercase<F1>}${Uppercase<F2> | Lowercase<F2>}${AnyCase<R>}`)
+      : T extends `${infer F}${infer R}`
+        ? `${Uppercase<F> | Lowercase<F>}${AnyCase<R>}`
+        : ''
+
+
+// This is a bit of a hacky type because
+// TS < 4.8 doesn't support ranges well
+// but it saves a bunch of boilerplate :)
+export type NumberRange<
+  N extends number,
+  M extends number,
+  Result extends unknown[] = [N]
+> =
+  (Result['length'] extends M
+    ? [...Result, M]
+    : NumberRange<N, M, [...Result, Result['length']]>
+  )
+
+export type MaybeArray<T> = T | T[]
+
+// Converts types like { A: boolean } & { B: number } & { C: string } into a { A: boolean, B: number, C: string}
+// this type is somewhat magical and don't wanna mess with the {}
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Simplify<T> = { [K in keyof T]: T[K] } & {}
+
+export type Equals<T, U> =
+  (<G>() => G extends T ? 1 : 2) extends
+  (<G>() => G extends U ? 1 : 2) ? true : false

package/src/types/workspaceEventsFilter.ts

@@ -0,0 +1,40 @@
+import { EventResourceValue } from '@/automations/types/api/triggers'
+import { createTuple } from '@/utilities/tuples'
+
+/** A list to include events for resources with these IDs */
+type id = { id?: string[] }
+
+/** An object record to include events for resources with these labels */
+type labels = { labels?: Record<string, EventResourceValue > }
+
+export type EventNameFilter = { prefix?: string[], name?: string[], excludePrefix?: string[], excludeName?: string[] }
+
+export type EventAnyResourceFilter = id & labels & { idPrefix?: string[] }
+
+export type EventResourceFilter = EventAnyResourceFilter & { distinct?: boolean }
+
+export type EventRelatedFilter = id & labels & { role?: string[], resourcesInRoles?: unknown[] }
+
+export const { values: EventsFilterOrderOptions, isValue: isEventsFilterOrderOption } = createTuple(['ASC', 'DESC'])
+export type EventsFilterOrderOption = typeof EventsFilterOrderOptions[number]
+
+export type WorkspaceEventsFilter = {
+  limit?: number,
+  occurred: { since: Date, until: Date },
+  event?: EventNameFilter,
+  anyResource?: EventAnyResourceFilter,
+  resource?: EventResourceFilter,
+  related?: EventRelatedFilter,
+  scope?: { account?: string, workspace?: string[] },
+  id?: id,
+  order?: EventsFilterOrderOption,
+}
+
+/**
+ * Caution: Do not use unless you need to construct a partial filter before adding occurred.
+ * All requests made should include occurred and the api endpoints guard against this by using
+ * the EventsFilter type which requires both occurred.since and occurred.until.
+ */
+export type PartialWorkspaceEventsFilter = Omit<WorkspaceEventsFilter, 'occurred'> & {
+  occurred?: { since?: Date, until?: Date },
+}

package/src/types/workspaceEventsHistory.ts

@@ -0,0 +1,8 @@
+import { WorkspaceEventsHistoryUnit } from '@/models/api/workspaceEventsHistoryRequest'
+import { WorkspaceEventsFilter } from '@/types/workspaceEventsFilter'
+
+export type WorkspaceEventsHistory = {
+  unit?: WorkspaceEventsHistoryUnit,
+  interval?: number,
+  filter: WorkspaceEventsFilter,
+}

package/src/utilities/activeViewMode.ts

@@ -0,0 +1,18 @@
+import { useLocalStorage } from '@prefecthq/vue-compositions'
+import { computed } from 'vue'
+import { ViewOption } from '@/types/flowRunResults'
+import { getCacheKey } from '@/utilities/cache'
+
+const viewModeLocalStorageKey = getCacheKey('prefect-ui-library-view-mode')
+const defaultValue: ViewOption = 'grid'
+
+const { value: viewMode, set: setViewMode } = useLocalStorage<ViewOption>(viewModeLocalStorageKey, defaultValue)
+
+export const activeViewMode = computed({
+  get() {
+    return viewMode.value
+  },
+  set(value: ViewOption) {
+    setViewMode(value)
+  },
+})

package/src/utilities/api.ts

@@ -0,0 +1,67 @@
+import { createActions } from '@prefecthq/vue-compositions'
+import { InjectionKey } from 'vue'
+import { AxiosInstanceSetupHook } from '@/services/Api'
+import { CollectionsApi } from '@/services/CollectionsApi'
+import { HealthApi } from '@/services/HealthApi'
+import { UiApi } from '@/services/UiApi'
+import { WorkspaceApiConfig } from '@/services/WorkspaceApi'
+import { WorkspaceArtifactsApi } from '@/services/WorkspaceArtifactsApi'
+import { WorkspaceAutomationsApi } from '@/services/WorkspaceAutomationsApi'
+import { WorkspaceBlockCapabilitiesApi } from '@/services/WorkspaceBlockCapabilitiesApi'
+import { WorkspaceBlockDocumentsApi } from '@/services/WorkspaceBlockDocumentsApi'
+import { WorkspaceBlockSchemasApi } from '@/services/WorkspaceBlockSchemasApi'
+import { WorkspaceBlockTypesApi } from '@/services/WorkspaceBlockTypesApi'
+import { WorkspaceConcurrencyLimitsApi } from '@/services/WorkspaceConcurrencyLimitsApi'
+import { WorkspaceConcurrencyV2LimitsApi } from '@/services/WorkspaceConcurrencyLimitsV2API'
+import { WorkspaceDeploymentsApi } from '@/services/WorkspaceDeploymentsApi'
+import { WorkspaceDeploymentScheduleApi } from '@/services/WorkspaceDeploymentScheduleApi'
+import { WorkspaceEventsApi } from '@/services/workspaceEventsApi'
+import { WorkspaceFlowRunsApi } from '@/services/WorkspaceFlowRunsApi'
+import { WorkspaceFlowsApi } from '@/services/WorkspaceFlowsApi'
+import { WorkspaceLogsApi } from '@/services/WorkspaceLogsApi'
+import { WorkspaceNotificationsApi } from '@/services/WorkspaceNotificationsApi'
+import { WorkspaceSavedSearchesApi } from '@/services/WorkspaceSavedSearchesApi'
+import { WorkspaceSchemasWorkspaceApi } from '@/services/WorkspaceSchemasWorkspaceApi'
+import { WorkspaceTaskRunsApi } from '@/services/WorkspaceTaskRunsApi'
+import { WorkspaceVariablesApi } from '@/services/WorkspaceVariablesApi'
+import { WorkspaceWorkPoolQueuesApi } from '@/services/WorkspaceWorkPoolQueuesApi'
+import { WorkspaceWorkPoolsApi } from '@/services/WorkspaceWorkPoolsApi'
+import { WorkspaceWorkPoolWorkersApi } from '@/services/WorkspaceWorkPoolWorkersApi'
+import { WorkspaceWorkQueuesApi } from '@/services/WorkspaceWorkQueuesApi'
+
+// We want the return type to be inferred
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createApi(workspaceConfig: WorkspaceApiConfig, instanceSetupHook: AxiosInstanceSetupHook | null = null) {
+  return {
+    artifacts: createActions(new WorkspaceArtifactsApi(workspaceConfig, instanceSetupHook)),
+    automations: createActions(new WorkspaceAutomationsApi(workspaceConfig, instanceSetupHook)),
+    blockCapabilities: createActions(new WorkspaceBlockCapabilitiesApi(workspaceConfig, instanceSetupHook)),
+    blockDocuments: createActions(new WorkspaceBlockDocumentsApi(workspaceConfig, instanceSetupHook)),
+    blockSchemas: createActions(new WorkspaceBlockSchemasApi(workspaceConfig, instanceSetupHook)),
+    blockTypes: createActions(new WorkspaceBlockTypesApi(workspaceConfig, instanceSetupHook)),
+    collections: createActions(new CollectionsApi(workspaceConfig, instanceSetupHook)),
+    concurrencyLimits: createActions(new WorkspaceConcurrencyLimitsApi(workspaceConfig, instanceSetupHook)),
+    concurrencyV2Limits: createActions(new WorkspaceConcurrencyV2LimitsApi(workspaceConfig, instanceSetupHook)),
+    deployments: createActions(new WorkspaceDeploymentsApi(workspaceConfig, instanceSetupHook)),
+    deploymentSchedules: createActions(new WorkspaceDeploymentScheduleApi(workspaceConfig, instanceSetupHook)),
+    flowRuns: createActions(new WorkspaceFlowRunsApi(workspaceConfig, instanceSetupHook)),
+    flows: createActions(new WorkspaceFlowsApi(workspaceConfig, instanceSetupHook)),
+    health: createActions(new HealthApi(workspaceConfig, instanceSetupHook)),
+    logs: createActions(new WorkspaceLogsApi(workspaceConfig, instanceSetupHook)),
+    notifications: createActions(new WorkspaceNotificationsApi(workspaceConfig, instanceSetupHook)),
+    savedSearches: createActions(new WorkspaceSavedSearchesApi(workspaceConfig, instanceSetupHook)),
+    taskRuns: createActions(new WorkspaceTaskRunsApi(workspaceConfig, instanceSetupHook)),
+    ui: createActions(new UiApi(workspaceConfig, instanceSetupHook)),
+    variables: createActions(new WorkspaceVariablesApi(workspaceConfig, instanceSetupHook)),
+    workPoolQueues: createActions(new WorkspaceWorkPoolQueuesApi(workspaceConfig, instanceSetupHook)),
+    workPools: createActions(new WorkspaceWorkPoolsApi(workspaceConfig, instanceSetupHook)),
+    workPoolWorkers: createActions(new WorkspaceWorkPoolWorkersApi(workspaceConfig, instanceSetupHook)),
+    workQueues: createActions(new WorkspaceWorkQueuesApi(workspaceConfig, instanceSetupHook)),
+    schemas: createActions(new WorkspaceSchemasWorkspaceApi(workspaceConfig, instanceSetupHook)),
+    events: createActions(new WorkspaceEventsApi(workspaceConfig, instanceSetupHook)),
+  }
+}
+
+export type CreateApi = ReturnType<typeof createApi>
+
+export const workspaceApiKey: InjectionKey<CreateApi> = Symbol('WorkspaceApi')

package/src/utilities/arrays.ts

@@ -0,0 +1,175 @@
+import { floor, random, uniform } from '@/utilities/math'
+
+export function isArray(value: unknown): value is unknown[] {
+  return Array.isArray(value)
+}
+
+// we really do want any here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function toMap<T extends any[], K extends keyof T[number]>(source: T, key: K): Map<T[number][K], T[number]> {
+  return source.reduce<Map<K, T>>((result, item) => {
+    result.set(item[key], item)
+
+    return result
+  }, new Map())
+}
+
+// Random element selector equivalent to python's choice method
+export const choice = <T>(list: T[] | Readonly<T[]>): T => list[floor(random() * list.length)]
+
+export const range = (min: number, max: number): number[] => Array.from({ length: max - min }, (x, i) => min + i)
+
+export function unique<T>(array: T[]): T[] {
+  return [...new Set(array)]
+}
+
+// we really do want any here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNonEmptyArray<T extends any[]>(
+  array: T | undefined,
+): array is T {
+  return array !== undefined && array.length > 0
+}
+
+
+export function asArray<T>(input: T | T[] | null): T[] {
+  if (input === null || input === undefined) {
+    return []
+  }
+
+  if (!Array.isArray(input)) {
+    return [input]
+  }
+
+  return input
+}
+
+// we really do want any here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isSame(arrayA: any[], arrayB: any[]): boolean {
+  if (arrayA.length !== arrayB.length) {
+    return false
+  }
+
+  const arrayBCopy = [...arrayB]
+
+  return arrayA.every(itemA => arrayBCopy.some((itemB, index) => {
+    const match = itemA.toString() === itemB.toString()
+
+    if (match) {
+      arrayBCopy.splice(index, 1)
+    }
+
+    return match
+  }))
+}
+
+// we really do want any here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function lastItemInArray<T extends any[]>(array: T): T[number] {
+  return array[array.length - 1]
+}
+
+// we really do want any here
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function allButLastArrayItems<T extends any[]>(array: T): T[number][] {
+  return array.slice(0, array.length - 1)
+}
+
+// shamelessly copied from https://stackoverflow.com/a/2450976/2687861
+export function shuffle<T>(array: T[]): T[] {
+  let currentIndex = array.length
+  let randomIndex = undefined
+
+  while (currentIndex != 0) {
+
+    randomIndex = Math.floor(Math.random() * currentIndex)
+    currentIndex--;
+
+    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]
+  }
+
+  return array
+}
+
+export function isEmptyArray(value: unknown): value is unknown[] {
+  return Array.isArray(value) && value.length === 0
+}
+
+export function isStringArray(value: unknown): value is string[] {
+  return Array.isArray(value) && value.length > 0 && value.every(item => typeof item === 'string')
+}
+
+export function isNumberArray(value: unknown): value is number[] {
+  return Array.isArray(value) && value.length > 0 && value.every(item => typeof item === 'number')
+}
+
+export function asSingle<T>(value: T | T[]): T {
+  if (Array.isArray(value)) {
+    const [first] = value
+
+    return first
+  }
+
+  return value
+}
+
+export function repeat<T>(count: number, method: (index: number) => T): T[] {
+  return new Array(count).fill(null).map((value, index) => method(index))
+}
+
+export function some<T>(source: T[], min?: number, max?: number): T[] {
+  const minArg = min ?? 1
+  const maxArg = max ?? source.length
+  const count = uniform(minArg, maxArg)
+  const copy = [...source]
+
+  const value = repeat(count, () => {
+    const index = uniform(0, copy.length - 1)
+    const value = copy.splice(index, 1)
+
+    return value[0]
+  })
+
+  return value
+}
+
+export function intersects(first: unknown[], ...rest: unknown[][]): boolean {
+  return first.some(firstValue => rest.every(restArray => restArray.includes(firstValue)))
+}
+
+export function groupBy<T, K extends keyof T>(source: T[], key: K): Map<T[K], T[]> {
+  return source.reduce((result, value) => {
+    const mapKey = value[key]
+    const initial = result.get(mapKey) ?? []
+
+    initial.push(value)
+
+    result.set(mapKey, initial)
+
+    return result
+  }, new Map<T[K], T[]>())
+}
+
+export function separate<T>(source: T[], filter: (value: T) => boolean): [found: T[], notFound: T[]] {
+  return source.reduce<[T[], T[]]>(([found, notFound], value) => {
+    if (filter(value)) {
+      found.push(value)
+    } else {
+      notFound.push(value)
+    }
+
+    return [found, notFound]
+  }, [[], []])
+}
+
+export function toggle<T>(source: T[], value: T, force?: boolean): T[] {
+  const index = source.indexOf(value)
+  const add = force === true || index === -1
+
+  if (add) {
+    return [...source, value]
+  }
+
+  return source.filter(item => item !== value)
+}

package/src/utilities/boolean.ts

@@ -0,0 +1,3 @@
+export function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean'
+}

package/src/utilities/cache.ts

@@ -0,0 +1,35 @@
+// this can be used to cache bust between releases. Incrementing this will remove all caches using the previous version
+const cacheVersion = 4
+const cachePrefix = 'cache-key'
+const cacheKeyPrefix = `${cachePrefix}-${cacheVersion}`
+
+export function getCacheKey(label: string): string {
+  return `${cacheKeyPrefix}:${label}`
+}
+
+export function isCacheKey(key: string): boolean {
+  return key.startsWith(cachePrefix)
+}
+
+export function isOldCacheKey(key: string): boolean {
+  return isCacheKey(key) && !key.startsWith(cacheKeyPrefix)
+}
+
+export function clearOldCacheKeys(): void {
+  const sessionStorageKeys = Object.keys(sessionStorage)
+
+  sessionStorageKeys.forEach(key => {
+    if (isOldCacheKey(key)) {
+      sessionStorage.removeItem(key)
+    }
+  })
+
+  const localStorageKeys = Object.keys(localStorage)
+
+  localStorageKeys.forEach(key => {
+    if (isOldCacheKey(key)) {
+      localStorage.removeItem(key)
+    }
+  })
+
+}

package/src/utilities/colorMode.ts

@@ -0,0 +1,36 @@
+import { Ref, readonly, ref } from 'vue'
+import { ColorMode, colorModes } from '@/types/ColorMode'
+
+const internalValue = ref<ColorMode | null>(null)
+
+export function getColorModeClass(mode: ColorMode | null): string {
+  return `color-mode-${mode ?? 'default'}`
+}
+
+export function isColorMode(value: unknown): value is ColorMode {
+  if (typeof value !== 'string') {
+    return false
+  }
+
+  return colorModes.includes(value as ColorMode)
+}
+
+export function applyColorModeClass(value: ColorMode | null): void {
+  colorModes.forEach(mode => document.body.classList.remove(getColorModeClass(mode)))
+
+  const classes = getColorModeClass(value)
+
+  document.body.classList.add(classes)
+
+  internalValue.value = value
+}
+
+type UseColorMode = {
+  value: Readonly<Ref<ColorMode | null>>,
+}
+
+export function useColorMode(): UseColorMode {
+  return {
+    value: readonly(internalValue),
+  }
+}

package/src/utilities/components.ts

@@ -0,0 +1,34 @@
+export type Component = { $props: unknown }
+export type ComponentDefinition = { new(...args: unknown[]): Component }
+
+// https://stackoverflow.com/questions/73732549/narrow-number-argument-of-function-to-be-literal-type?noredirect=1#comment130199140_73732549
+// eslint-disable-next-line @typescript-eslint/ban-types
+type NoInfer<T> = T & {}
+
+type WithPropsArgs<T extends ComponentDefinition, E extends string = '', P = InstanceType<T>['$props']> = Omit<Partial<P>, E> extends Omit<P, E>
+  ? [ component: T, props?: Omit<P, E> & Record<string, unknown> ]
+  : [ component: T, props: Omit<P, E> & Record<string, unknown> ]
+
+type WithProps<T extends ComponentDefinition, E extends string = '', P = InstanceType<T>['$props']> = Omit<Partial<P>, E> extends Omit<P, E>
+  ? { component: T, props?: Omit<P, E> & Record<string, unknown> }
+  : { component: T, props: Omit<P, E> & Record<string, unknown> }
+
+export function withProps<T extends ComponentDefinition>(...[component, props]: WithPropsArgs<T>): WithProps<NoInfer<T>> {
+  return {
+    component,
+    props,
+  }
+}
+
+export function withPropsWithoutExcluded<T extends ComponentDefinition, E extends string>(excluded: E | E[], ...[component, props]: WithPropsArgs<T, E>): WithProps<NoInfer<T>, E> {
+  return {
+    component,
+    props,
+  }
+}
+
+export function withPropsWithoutExcludedFactory<E extends string>(prop: E | E[]) {
+  return function<T extends ComponentDefinition>(...args: WithPropsArgs<T, E>): WithProps<T, E> {
+    return withPropsWithoutExcluded(prop, ...args)
+  }
+}

package/src/utilities/copy.ts

@@ -0,0 +1,7 @@
+import { showToast } from '@prefecthq/prefect-design'
+
+export function copyToClipboard(text: string, message: string = 'Copied to clipboard!'): void {
+  navigator.clipboard.writeText(text)
+
+  showToast(message, 'success')
+}