@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/utilities/dates.ts

@@ -0,0 +1,129 @@
+import { parse, isValid, isDate as dateFnsIsDate } from 'date-fns'
+import { secondsToApproximateString } from '@/utilities/seconds'
+import { dateFunctions, toDate, formatDateInTimezone } from '@/utilities/timezone'
+
+// formats defined by the style guide
+// https://www.notion.so/prefect/Formatting-Basics-1d4d83bcb2ba471ead90910aeb5913b2?pvs=4#b79673ff9e9b47f58236c449e5fe764a
+export const dateFormat = 'MMM do, yyyy'
+export const timeFormat = 'hh:mm a'
+export const dateTimeFormat = `${dateFormat} 'at' ${timeFormat}`
+
+export const timeNumericFormat = 'hh:mm:ss a'
+export const timeNumericShortFormat = 'hh:mm a'
+export const dateNumericFormat = 'yyyy/MM/dd'
+export const dateTimeNumericFormat = `${dateNumericFormat} ${timeNumericFormat}`
+export const dateTimeNumericShortFormat = `${dateNumericFormat} ${timeNumericShortFormat}`
+
+export {
+  daysInWeek,
+  daysInYear,
+  maxTime,
+  millisecondsInMinute,
+  millisecondsInHour,
+  millisecondsInSecond,
+  minTime,
+  minutesInHour,
+  monthsInQuarter,
+  monthsInYear,
+  quartersInYear,
+  secondsInHour,
+  secondsInMinute,
+  secondsInDay,
+  secondsInWeek,
+  secondsInYear,
+  secondsInMonth,
+  secondsInQuarter
+} from 'date-fns/constants'
+export const hoursInDay = 24
+
+export function isDate(value: unknown): value is Date {
+  return dateFnsIsDate(value)
+}
+
+export function isInvalidDate(value: unknown): boolean {
+  return isDate(value) && !isValid(value)
+}
+
+export function sortDates(itemA: Date, itemB: Date): number {
+  return itemA.getTime() - itemB.getTime()
+}
+
+export function formatDate(value: Date | string, format = dateFormat): string {
+  const date = toDate(value)
+
+  return formatDateInTimezone(date, format)
+}
+
+export function parseDate(value: string, reference: Date = new Date()): Date {
+  return parse(value, dateFormat, reference)
+}
+
+export function formatTime(value: Date): string {
+  return formatDate(value, timeFormat)
+}
+
+export function parseTime(value: string, reference: Date = new Date()): Date {
+  return parse(value, timeFormat, reference)
+}
+
+export function formatDateTime(value: Date): string {
+  return formatDate(value, dateTimeFormat)
+}
+
+export function parseDateTime(value: string, reference: Date = new Date()): Date {
+  return parse(value, dateTimeFormat, reference)
+}
+
+export function formatTimeNumeric(value: Date | string): string {
+  return formatDate(value, timeNumericFormat)
+}
+
+export function parseTimeNumeric(value: string, reference: Date = new Date()): Date {
+  return parse(value, timeNumericFormat, reference)
+}
+
+export function formatTimeShortNumeric(value: Date | string): string {
+  return formatDate(value, timeNumericShortFormat)
+}
+
+export function parseTimeShortNumeric(value: string, reference: Date = new Date()): Date {
+  return parse(value, timeNumericShortFormat, reference)
+}
+
+export function formatDateNumeric(value: Date): string {
+  return formatDate(value, dateNumericFormat)
+}
+
+export function parseDateNumeric(value: string, reference: Date = new Date()): Date {
+  return parse(value, dateNumericFormat, reference)
+}
+
+export function formatDateTimeNumeric(value: Date | string): string {
+  return formatDate(value, dateTimeNumericFormat)
+}
+
+export function parseDateTimeNumeric(value: string, reference: Date = new Date()): Date {
+  return parse(value, dateTimeNumericFormat, reference)
+}
+
+export function formatDateTimeShortNumeric(value: Date | string): string {
+  return formatDate(value, dateTimeNumericShortFormat)
+}
+
+export function parseDateTimeShortNumeric(value: string, reference: Date = new Date()): Date {
+  return parse(value, dateTimeNumericShortFormat, reference)
+}
+
+export function formatDateTimeRelative(value: Date | string, comparedTo: Date | string = new Date()): string {
+  const valueDate = toDate(value)
+  const compareDate = toDate(comparedTo)
+  const seconds = dateFunctions.differenceInSeconds(compareDate, valueDate)
+  const past = dateFunctions.isBefore(valueDate, compareDate)
+  const formatted = secondsToApproximateString(Math.abs(seconds))
+
+  if (past) {
+    return `${formatted} ago`
+  }
+
+  return `in ${formatted}`
+}

package/src/utilities/delete.ts

@@ -0,0 +1,24 @@
+import { showToast } from '@prefecthq/prefect-design'
+import { Action } from '@prefecthq/vue-compositions'
+import { localization } from '@/localization'
+import { asArray } from '@/utilities/arrays'
+import { getApiErrorMessage } from '@/utilities/errors'
+
+export type ItemType = 'Flow' | 'Deployment' | 'Flow run' | 'Work queue' | 'Block' | 'Notification' | 'Task run' | 'Concurrency Limit' | 'Work pool' | 'Schedule' | 'Worker'
+type MaybeSingleParam<T extends Action, Params = Parameters<T>> = Params extends [unknown] ? Params[0] | Params : Params
+
+export async function deleteItem<T extends Action>(args: MaybeSingleParam<T>, endpoint: T, type: ItemType): Promise<ReturnType<T> | void> {
+  let result: Promise<ReturnType<T>>
+
+  try {
+    const endpointArgs = asArray(args)
+    result = await endpoint(...endpointArgs)
+    showToast(localization.success.delete(type), 'success')
+    return result
+  } catch (error) {
+    const message = getApiErrorMessage(error, localization.error.delete(type.toLowerCase()))
+    showToast(message, 'error')
+
+    console.error(error)
+  }
+}

package/src/utilities/errors.ts

@@ -0,0 +1,64 @@
+import { isDefined } from '@prefecthq/prefect-design'
+import { AxiosError, isAxiosError } from 'axios'
+import { Require } from '@/types/utilities'
+import { isRecord, isString } from '@/utilities'
+
+type ApiErrorResponse = {
+  detail: string,
+}
+
+export function isApiErrorResponse(error: unknown): error is Require<AxiosError<ApiErrorResponse>, 'response'> {
+  if (!isAxiosError(error)) {
+    return false
+  }
+
+  if (!isDefined(error.response)) {
+    return false
+  }
+
+  const { data } = error.response
+
+  return isRecord(data) && isString(data.detail)
+}
+
+type ApiValidationError = {
+  loc: string[],
+  msg: string,
+  type: string,
+}
+
+type ApiValidationErrorResponse = {
+  exception_detail: ApiValidationError[],
+  exception_message: 'Invalid request received.',
+  request_body: unknown,
+}
+
+function isApiValidationErrorResponse(error: unknown): error is Require<AxiosError<ApiValidationErrorResponse>, 'response'> {
+  if (!isAxiosError(error)) {
+    return false
+  }
+
+  if (!isDefined(error.response)) {
+    return false
+  }
+
+  const { data } = error.response
+
+  return isRecord(data) && data.exception_message === 'Invalid request received.'
+}
+
+function getFirstApiValidationError(error: Require<AxiosError<ApiValidationErrorResponse>, 'response'>): string {
+  return error.response.data.exception_detail[0].msg
+}
+
+export function getApiErrorMessage(error: unknown, defaultErrorMessage: string): string {
+  if (isApiErrorResponse(error)) {
+    return error.response.data.detail
+  }
+
+  if (isApiValidationErrorResponse(error)) {
+    return getFirstApiValidationError(error)
+  }
+
+  return defaultErrorMessage
+}

package/src/utilities/eventTarget.ts

@@ -0,0 +1,8 @@
+export function eventTargetIsInput(eventTarget: EventTarget | null): boolean {
+  if (!(eventTarget instanceof HTMLElement)) {
+    return false
+  }
+
+  const eventTargetTagName = eventTarget.tagName.toLowerCase()
+  return ['input', 'textarea'].includes(eventTargetTagName)
+}

package/src/utilities/events.ts

@@ -0,0 +1,21 @@
+import { PrefectResourceRole, isPrefectResourceRole, prefectEventPrefixes } from '@/models/workspaceEvent'
+
+export function removePrefectEventLabelPrefix(value: string): string {
+  if (value.startsWith('prefect.') || value.startsWith('prefect-cloud.')) {
+    return value.split('.').slice(1).join('.')
+  }
+
+  return value
+}
+
+export function getPrefectResourceRole(value: string): PrefectResourceRole | null {
+  const roleRegex = new RegExp(`^(${prefectEventPrefixes.join('|')})\\.`, 'g')
+  const [, prefix = ''] = roleRegex.exec(value) ?? []
+  const role = prefix.split('.').at(-1)
+
+  if (isPrefectResourceRole(role)) {
+    return role
+  }
+
+  return null
+}

package/src/utilities/formValidation.ts

@@ -0,0 +1,18 @@
+import { ValidationRule } from '@prefecthq/vue-compositions'
+import { isEmptyArray, isEmptyString, isInvalidDate, isNullish } from '@/utilities'
+
+export const isRequired: ValidationRule<unknown> = (value, name) => {
+  if (isNullish(value) || isEmptyArray(value) || isEmptyString(value) || isInvalidDate(value)) {
+    return `${name} is required`
+  }
+
+  return true
+}
+
+export const isGreaterThanZeroOrNull: ValidationRule<number | undefined> = (value, name) => {
+  if (value == null || value > 0) {
+    return true
+  }
+
+  return `${name} must be greater than 0`
+}

package/src/utilities/functions.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFunction(value: unknown): value is (...args: any[]) => unknown {
+  return typeof value === 'function'
+}

package/src/utilities/httpStatus.ts

@@ -0,0 +1,173 @@
+import { AxiosError, AxiosResponse } from 'axios'
+
+export type HttpStatusName = keyof typeof httpStatusCode
+export type HttpStatus = typeof httpStatusCode[HttpStatusName]
+export type HttpStatusRange = keyof typeof httpStatusCodeRange
+
+type HttpStatusResponse = {
+  is: (status: HttpStatusName) => boolean,
+  isInRange: (statusRange: HttpStatusRange) => boolean,
+}
+
+function isAxiosResponse(value: unknown): value is AxiosResponse {
+  const response = value as AxiosResponse
+  return typeof response.status === 'number'
+}
+
+function isAxiosError(value: unknown): value is AxiosError {
+  const error = value as AxiosError
+  return isAxiosResponse(error.response)
+}
+
+function getStatusCode(value: unknown): number {
+  if (typeof value === 'number') {
+    return value
+  }
+
+  if (isAxiosResponse(value)) {
+    return value.status
+  }
+
+  if (isAxiosError(value)) {
+    return getStatusCode(value.response)
+  }
+
+  return 0
+}
+
+export function httpStatus(value: unknown): HttpStatusResponse {
+  const status = getStatusCode(value)
+
+  return {
+    is: (statusName: HttpStatusName) => httpStatusCode[statusName] === status,
+    isInRange: (statusRange: HttpStatusRange) => httpStatusCodeRange[statusRange].includes(status),
+  }
+}
+
+export const httpStatusCode = {
+  Continue: 100,
+  SwitchingProtocols: 101,
+  Processing: 102,
+  OK: 200,
+  Created: 201,
+  Accepted: 202,
+  NonAuthoritativeInformation: 203,
+  NoContent: 204,
+  ResetContent: 205,
+  PartialContent: 206,
+  MultiStatus: 207,
+  MultipleChoices: 300,
+  MovedPermanently: 301,
+  MovedTemporarily: 302,
+  SeeOther: 303,
+  NotModified: 304,
+  UseProxy: 305,
+  TemporaryRedirect: 307,
+  PermanentRedirect: 308,
+  BadRequest: 400,
+  Unauthorized: 401,
+  PaymentRequired: 402,
+  Forbidden: 403,
+  NotFound: 404,
+  MethodNotAllowed: 405,
+  NotAcceptable: 406,
+  ProxyAuthenticationRequired: 407,
+  RequestTimeout: 408,
+  Conflict: 409,
+  Gone: 410,
+  LengthRequired: 411,
+  PreconditionFailed: 412,
+  RequestEntityTooLarge: 413,
+  RequestURITooLong: 414,
+  UnsupportedMediaType: 415,
+  RequestedRangeNotSatisfiable: 416,
+  ExpectationFailed: 417,
+  ImATeapot: 418,
+  InsufficientSpaceOnResource: 419,
+  MethodFailure: 420,
+  MisdirectedRequest: 421,
+  UnprocessableEntity: 422,
+  Locked: 423,
+  FailedDependency: 424,
+  PreconditionRequired: 428,
+  TooManyRequests: 429,
+  RequestHeaderFieldsTooLarge: 431,
+  UnavailableForLegalReasons: 451,
+  InternalServerError: 500,
+  NotImplemented: 501,
+  BadGateway: 502,
+  ServiceUnavailable: 503,
+  GatewayTimeout: 504,
+  HTTPVersionNotSupported: 505,
+  InsufficientStorage: 507,
+  NetworkAuthenticationRequired: 511,
+}
+
+export const httpStatusCodeRange = {
+  informational: [
+    httpStatusCode.Continue,
+    httpStatusCode.SwitchingProtocols,
+    httpStatusCode.Processing,
+  ],
+  successful: [
+    httpStatusCode.OK,
+    httpStatusCode.Created,
+    httpStatusCode.Accepted,
+    httpStatusCode.NonAuthoritativeInformation,
+    httpStatusCode.NoContent,
+    httpStatusCode.ResetContent,
+    httpStatusCode.PartialContent,
+    httpStatusCode.MultiStatus,
+  ],
+  redirection: [
+    httpStatusCode.MultipleChoices,
+    httpStatusCode.MovedPermanently,
+    httpStatusCode.MovedTemporarily,
+    httpStatusCode.SeeOther,
+    httpStatusCode.NotModified,
+    httpStatusCode.UseProxy,
+    httpStatusCode.TemporaryRedirect,
+    httpStatusCode.PermanentRedirect,
+  ],
+  clientError: [
+    httpStatusCode.BadRequest,
+    httpStatusCode.Unauthorized,
+    httpStatusCode.PaymentRequired,
+    httpStatusCode.Forbidden,
+    httpStatusCode.NotFound,
+    httpStatusCode.MethodNotAllowed,
+    httpStatusCode.NotAcceptable,
+    httpStatusCode.ProxyAuthenticationRequired,
+    httpStatusCode.RequestTimeout,
+    httpStatusCode.Conflict,
+    httpStatusCode.Gone,
+    httpStatusCode.LengthRequired,
+    httpStatusCode.PreconditionFailed,
+    httpStatusCode.RequestEntityTooLarge,
+    httpStatusCode.RequestURITooLong,
+    httpStatusCode.UnsupportedMediaType,
+    httpStatusCode.RequestedRangeNotSatisfiable,
+    httpStatusCode.ExpectationFailed,
+    httpStatusCode.ImATeapot,
+    httpStatusCode.InsufficientSpaceOnResource,
+    httpStatusCode.MethodFailure,
+    httpStatusCode.MisdirectedRequest,
+    httpStatusCode.UnprocessableEntity,
+    httpStatusCode.Locked,
+    httpStatusCode.FailedDependency,
+    httpStatusCode.PreconditionRequired,
+    httpStatusCode.TooManyRequests,
+    httpStatusCode.RequestHeaderFieldsTooLarge,
+    httpStatusCode.UnavailableForLegalReasons,
+  ],
+  serverError: [
+    httpStatusCode.InternalServerError,
+    httpStatusCode.NotImplemented,
+    httpStatusCode.BadGateway,
+    httpStatusCode.ServiceUnavailable,
+    httpStatusCode.GatewayTimeout,
+    httpStatusCode.HTTPVersionNotSupported,
+    httpStatusCode.InsufficientStorage,
+    httpStatusCode.NetworkAuthenticationRequired,
+  ],
+}

package/src/utilities/index.ts

@@ -0,0 +1,35 @@
+export * from './api'
+export * from './arrays'
+export * from './boolean'
+export * from './cache'
+export * from './colorMode'
+export * from './components'
+export * from './copy'
+export * from './dates'
+export * from './delete'
+export * from './errors'
+export * from './functions'
+export * from './httpStatus'
+export * from './inject'
+export * from './json'
+export * from './logs'
+export * from './math'
+export * from './numbers'
+export * from './object'
+export * from './parameters'
+export * from './parseUnknownJson'
+export * from './processTypes'
+export * from './routes'
+export * from './savedFilters'
+export * from './seconds'
+export * from './state'
+export * from './stringifyUnknownJson'
+export * from './strings'
+export * from './subscriptions'
+export * from './time'
+export * from './timeIntervals'
+export * from './timezone'
+export * from './tuples'
+export * from './urls'
+export * from './validation'
+export * from './variables'

package/src/utilities/inject.ts

@@ -0,0 +1,25 @@
+import { inject as vueInject, InjectionKey, ComponentInternalInstance, getCurrentInstance } from 'vue'
+
+export function inject<T>(key: InjectionKey<T> | string): T {
+  const value = vueInject(key)
+
+  if (value === undefined) {
+    throw `Failed to inject value with key ${String(key)}`
+  }
+
+  return value
+}
+
+type ComponentInstanceWithProvide = ComponentInternalInstance & { provides: Record<string | symbol, unknown> } | null
+
+export function injectFromSelfOrAncestor<T>(key: InjectionKey<T>): T | undefined {
+  const vm = getCurrentInstance() as ComponentInstanceWithProvide
+  const value = vm?.provides[key as symbol]
+
+  if (value !== undefined) {
+    return value as T
+  }
+
+  return vueInject(key, undefined)
+}
+

package/src/utilities/json.ts

@@ -0,0 +1,28 @@
+import { isRecord } from '@/utilities'
+
+type JsonStringify = Parameters<typeof JSON.stringify>
+type JsonValue = JsonStringify[0]
+type JsonReplacer = JsonStringify[1]
+
+export function stringify(value: JsonValue, replacer?: JsonReplacer): string {
+  return JSON.stringify(value, replacer, 2)
+}
+
+export function isValidJsonRecord(value: unknown): value is string {
+  try {
+    const parsed = JSON.parse(value as string)
+    return isRecord(parsed)
+  } catch {
+    return false
+  }
+}
+
+export function isValidJson(value: unknown): value is string {
+  try {
+    JSON.parse(value as string)
+
+    return true
+  } catch {
+    return false
+  }
+}

package/src/utilities/jsonSafe.spec.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+import { jsonSafeParse } from '@/utilities/jsonSafeParse'
+import { jsonSafeStringify } from '@/utilities/jsonSafeStringify'
+
+// these values should be reversible.
+// parsing the first value should return the second
+// stringifying the second value should return the first
+const valid = [
+  ['true', true],
+  ['1', 1],
+  ['"foo"', 'foo'],
+  ['{}', {}],
+  ['{"foo":"bar"}', { foo: 'bar' }],
+  ['null', null],
+  ['[1,2,3]', [1, 2, 3]],
+  ['["foo","bar"]', ['foo', 'bar']],
+  ['"\\""', '"'],
+] as const
+
+const invalid = [
+  '"foo',
+  '{ "foo": ',
+]
+
+describe('jsonSafeParse', () => {
+
+  it.each(valid)('"%s" returns %s', (input, output) => {
+    const parsed = jsonSafeParse(input)
+
+    expect(parsed.value).toEqual(output)
+    expect(parsed.success).toBe(true)
+  })
+
+  it.each(invalid)('"%s" is invalid', (input) => {
+    const parsed = jsonSafeParse(input)
+
+    expect(parsed.value).toEqual(input)
+    expect(parsed.success).toBe(false)
+  })
+
+})
+
+describe('jsonSafeStringify', () => {
+
+  it.each(valid)('"%s" returns %s', (output, input) => {
+    const stringified = jsonSafeStringify(input)
+
+    expect(stringified.value).toEqual(output)
+    expect(stringified.success).toBe(true)
+  })
+
+  it.fails.each(invalid)('"%s" is invalid', (input) => {
+    const stringified = jsonSafeStringify(input)
+
+    expect(stringified.value).toEqual(input)
+    expect(stringified.success).toBe(false)
+  })
+
+})

package/src/utilities/jsonSafeParse.ts

@@ -0,0 +1,28 @@
+import { isString } from '@/utilities/strings'
+
+export type JsonSafeParse = {
+  success: boolean,
+  value: unknown,
+}
+
+export function jsonSafeParse(value: unknown): JsonSafeParse {
+  try {
+    if (!isString(value)) {
+      throw new Error()
+    }
+
+    const parsed = JSON.parse(value)
+
+    return {
+      success: true,
+      value: parsed,
+    }
+  } catch {
+    // silence is golden
+  }
+
+  return {
+    success: false,
+    value,
+  }
+}

package/src/utilities/jsonSafeStringify.ts

@@ -0,0 +1,22 @@
+export type JsonSafeStringify = {
+  success: boolean,
+  value: unknown,
+}
+
+export function jsonSafeStringify(value: unknown): JsonSafeStringify {
+  try {
+    const stringified = JSON.stringify(value)
+
+    return {
+      success: true,
+      value: stringified,
+    }
+  } catch {
+    // silence is golden
+  }
+
+  return {
+    success: false,
+    value,
+  }
+}

package/src/utilities/languageDefinitions/json.ts

@@ -0,0 +1,28 @@
+import type { Grammar } from 'prismjs'
+
+const definition: Grammar = {
+  'property': {
+    pattern: /(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,
+    lookbehind: true,
+    greedy: true,
+  },
+  'string': {
+    pattern: /(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,
+    lookbehind: true,
+    greedy: true,
+  },
+  'comment': {
+    pattern: /\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,
+    greedy: true,
+  },
+  'number': /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
+  'punctuation': /[{}[\],]/,
+  'operator': /:/,
+  'boolean': /\b(?:false|true)\b/,
+  'null': {
+    pattern: /\bnull\b/,
+    alias: 'keyword',
+  },
+}
+
+export { definition }