@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/SchemaPropertyBlockKeyValue.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="schema-property-block-key-value">
+    <PKeyValue class="block-document-key-value" :label="property.title">
+      <template v-if="blockDocument" #value>
+        <template v-if="blockDocument">
+          <p-link :to="routes.block(blockDocument.id)">
+            {{ blockDocument.name }}
+          </p-link>
+        </template>
+      </template>
+    </PKeyValue>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PKeyValue, PLink } from '@prefecthq/prefect-design'
+  import { useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { BlockDocumentValue } from '@/models/api/BlockDocumentCreateRequest'
+  import { SchemaProperty } from '@/types'
+
+  const props = defineProps<{
+    property: SchemaProperty,
+    value: BlockDocumentValue,
+  }>()
+
+  const api = useWorkspaceApi()
+  const routes = useWorkspaceRoutes()
+  const args = computed<[string] | null>(() => {
+    if (props.value.blockDocumentId) {
+      return [props.value.blockDocumentId]
+    }
+
+    return null
+  })
+  const subscription = useSubscriptionWithDependencies(api.blockDocuments.getBlockDocument, args)
+  const blockDocument = computed(() => subscription.response)
+</script>

package/src/components/SchemaPropertyKeyValue.vue

@@ -0,0 +1,58 @@
+<template>
+  <template v-if="isBlockDocumentValue(value)">
+    <SchemaPropertyBlockKeyValue v-bind="{ property, value }" />
+  </template>
+  <!-- todo: support displaying nested objects -->
+  <template v-else>
+    <p-key-value :label="property.title" class="schema-property-key-value" v-bind="{ value, alternate }">
+      <template v-if="isDefined && isJsonProperty" #value>
+        <CopyableWrapper :text-to-copy="jsonValue">
+          <p-code-highlight lang="json" :text="jsonValue" />
+        </CopyableWrapper>
+      </template>
+    </p-key-value>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import CopyableWrapper from '@/components/CopyableWrapper.vue'
+  import JsonInput from '@/components/JsonInput.vue'
+  import SchemaPropertyBlockKeyValue from '@/components/SchemaPropertyBlockKeyValue.vue'
+  import { isBlockDocumentValue } from '@/models'
+  import { SchemaProperty, SchemaValue } from '@/types/schemas'
+  import { stringifyUnknownJson } from '@/utilities/stringifyUnknownJson'
+
+  const props = defineProps<{
+    property: SchemaProperty,
+    value: SchemaValue,
+    alternate?: boolean,
+  }>()
+
+  const isJsonProperty = computed(() => {
+    return props.property.type === 'array' || props.property.meta?.component === JsonInput
+  })
+
+  const jsonValue = computed(() => stringifyUnknownJson(props.value) ?? '')
+
+  // todo: copied from PKeyValue. Hoping to update PKeyValue to eliminate the need for this
+  const isDefined = computed((): boolean => {
+    if (typeof props.value === 'object' && props.value !== null) {
+      if (Array.isArray(props.value)) {
+        return props.value.length > 0
+      }
+
+      return Object.keys(props.value).length > 0
+    }
+
+    return typeof props.value !== 'undefined' && props.value !== null && props.value !== ''
+  })
+</script>
+
+<style>
+.schema-property-key-value { @apply
+  max-w-full
+  min-w-0
+  items-stretch
+}
+</style>

package/src/components/SearchInput.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="search">
+    <template v-if="label">
+      <p-label for="search" :label="label" class="search__label" />
+    </template>
+    <p-text-input
+      v-model="internalValue"
+      type="search"
+      :small="size === 'small'"
+      :size
+      :placeholder
+      class="search__input"
+    >
+      <template #prepend>
+        <p-icon icon="MagnifyingGlassIcon" class="search__icon" />
+      </template>
+    </p-text-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PTextInput, PIcon, PLabel } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+
+  const props = withDefaults(defineProps<{
+    modelValue: string | null | undefined,
+    placeholder?: string,
+    label?: string,
+    size?: 'small' | 'default' | 'large',
+  }>(), {
+    placeholder: 'Search...',
+    label: undefined,
+    size: 'default',
+  })
+
+  const emits = defineEmits<{
+    (event: 'update:modelValue', value: string | null | undefined): void,
+  }>()
+
+
+  const internalValue = computed({
+    get() {
+      return props.modelValue
+    },
+    set(value: string | null | undefined) {
+      emits('update:modelValue', value)
+    },
+  })
+</script>
+
+<style>
+.search__label { @apply
+  sr-only
+}
+
+.search__icon { @apply
+  ml-2;
+  color: var(--p-color-input-placeholder);
+}
+</style>

package/src/components/SelectedCount.vue

@@ -0,0 +1,33 @@
+<template>
+  <span v-if="isNumber(count)" class="selected-count">
+    {{ count }} {{ composedLabel }} selected
+  </span>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { toPluralString, isNumber } from '@/utilities'
+
+  const props = withDefaults(defineProps<{
+    count: number | null | undefined,
+    label?: string,
+  }>(), {
+    label: '',
+  })
+
+  const composedLabel = computed(() => {
+    if (props.count && props.label !== '') {
+      return toPluralString(props.label, props.count)
+    }
+    return ''
+  })
+</script>
+
+<style>
+.selected-count { @apply
+  text-subdued
+  text-sm
+  whitespace-nowrap
+  font-mono
+}
+</style>

package/src/components/SeparatedList.vue

@@ -0,0 +1,57 @@
+<template>
+  <span class="separated-list">
+    <template v-if="itemArray.length">
+      <div class="separated-list__tags">
+        <template v-for="item in allButLastArrayItems(itemArray)" :key="item">
+          <slot :item="item">
+            {{ item }}
+          </slot>
+        </template>
+      </div>
+      <template v-if="itemArray.length > 1">
+        or
+      </template>
+      <slot :item="lastItem">
+        {{ lastItem }}
+      </slot>
+    </template>
+    <template v-else>
+      <span class="separated-list__bold">any</span>
+    </template>
+  </span>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { allButLastArrayItems, lastItemInArray } from '@/utilities/arrays'
+
+  const props = defineProps<{
+    itemArray: string[],
+  }>()
+
+  const lastItem = computed(() => lastItemInArray(props.itemArray))
+</script>
+
+<style>
+.separated-list {
+  @apply
+  inline-flex
+  gap-1
+  items-center
+  flex-wrap
+}
+
+.separated-list__tags {
+  @apply
+  inline-flex
+  gap-1
+  leading-4
+  align-middle
+  flex-wrap
+}
+
+.separated-list__bold {
+  @apply
+  font-bold
+}
+</style>

package/src/components/StateBadge.vue

@@ -0,0 +1,56 @@
+<template>
+  <p-tag class="state-badge" :class="classes" :dismissible="dismissible">
+    <StateIcon v-if="!stateWithNoType" :state-type="type" :shade="iconShade" class="state-badge__icon" />
+    <span>{{ name }}</span>
+  </p-tag>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import StateIcon from '@/components/StateIcon.vue'
+  import { StateBadgeState } from '@/types/stateBadge'
+  import { TailwindColor } from '@/types/tailwind'
+  import { mapStateNameToStateType } from '@/utilities/state'
+
+  const props = defineProps<{
+    state: StateBadgeState | null,
+    flat?: boolean,
+    dismissible?: boolean,
+  }>()
+
+  const type = computed(() => props.state?.type ?? mapStateNameToStateType(props.state?.name).type)
+  const stateWithNoType = computed(() => props.state && !type.value)
+  const name = computed(() => props.state?.name ?? 'Unknown')
+
+  const classes = computed(() => [
+    `state--${type.value}`, {
+      'state-badge--flat': props.flat,
+    },
+  ])
+
+  const iconShade = computed<TailwindColor>(() => props.flat ? 500 : 700)
+</script>
+
+<style>
+.state-badge { @apply
+  inline-flex
+  gap-1
+  items-center
+  text-xs
+  font-semibold
+  rounded-full
+  py-0.5
+  px-2.5
+}
+
+.state-badge__icon { @apply
+  w-4
+  h-4
+  !text-inherit
+}
+
+.state-badge--flat { @apply
+  py-0
+  bg-transparent
+}
+</style>

package/src/components/StateIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <p-icon :icon="icon" :class="classes" />
+</template>
+
+<script lang="ts" setup>
+  import { PIcon } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import { StateType } from '@/models/StateType'
+  import { TailwindColor } from '@/types/tailwind'
+  import { capitalize } from '@/utilities/strings'
+
+  const props = withDefaults(defineProps<{
+    stateType: StateType | null | undefined,
+    shade?: TailwindColor,
+  }>(), {
+    shade: 500,
+  })
+
+  const icon = computed(() => {
+    if (props.stateType === 'paused') {
+      return 'Pending'
+    }
+
+    if (props.stateType === 'cancelling') {
+      return 'Cancelled'
+    }
+
+    return capitalize(props.stateType ?? 'QuestionMarkCircleIcon')
+  })
+
+  const classes = computed(() => `text-state-${props.stateType}-${props.shade}`)
+</script>

package/src/components/StateListItem.vue

@@ -0,0 +1,200 @@
+<template>
+  <component
+    :is="component"
+    v-model:selected="model"
+    :value="value"
+    class="state-list-item"
+    :class="classes"
+  >
+    <div class="state-list-item__content-container">
+      <div class="state-list-item__content">
+        <div class="state-list-item__top-section">
+          <div class="state-list-item__name">
+            <slot name="name" />
+          </div>
+
+          <div class="state-list-item__tags">
+            <slot name="tags">
+              <p-tag-wrapper v-bind="{ tags, justify }" />
+            </slot>
+          </div>
+
+          <template v-if="slots.action">
+            <div class="state-list-item__action">
+              <slot name="action" />
+            </div>
+          </template>
+        </div>
+        <div v-if="slots.meta" class="state-list-item__meta">
+          <slot name="meta" />
+        </div>
+        <template v-if="slots.relationships">
+          <div class="state-list-item__relationships">
+            <slot name="relationships" />
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+  import { PListItemInput, CheckboxModel, media, PListItem } from '@prefecthq/prefect-design'
+  import { computed, useSlots } from 'vue'
+  import { StateType } from '@/models/StateType'
+
+  const props = defineProps<{
+    selectable?: boolean,
+    selected?: CheckboxModel | null,
+    value?: unknown,
+    stateType?: StateType | null | undefined,
+    tags?: string[] | null,
+  }>()
+
+  const component = computed(() => {
+    if (props.selectable) {
+      return PListItemInput
+    }
+
+    return PListItem
+  })
+
+  const emit = defineEmits<{
+    (event: 'update:selected', value: CheckboxModel): void,
+  }>()
+
+  const slots = useSlots()
+
+  const model = computed({
+    get() {
+      return props.selected ?? undefined
+    },
+    set(value: CheckboxModel) {
+      emit('update:selected', value)
+    },
+  })
+
+  const classes = computed(() => `state-list-item--${props.stateType ?? 'unknown'}`)
+  const justify = computed(() => media.md ? 'right' : 'left')
+  const tags = computed(() => props.tags ?? [])
+</script>
+
+<style>
+.state-list-item { @apply
+  border-l-8
+  border-transparent
+}
+
+.state-list-item--completed { @apply
+  border-state-completed-500
+}
+
+.state-list-item--running { @apply
+  border-state-running-500
+}
+
+.state-list-item--scheduled { @apply
+  border-state-scheduled-500
+}
+
+.state-list-item--pending { @apply
+  border-state-pending-500
+}
+
+.state-list-item--paused { @apply
+  border-state-paused-500
+}
+
+.state-list-item--failed { @apply
+  border-state-failed-500
+}
+
+.state-list-item--cancelled { @apply
+  border-state-cancelled-500
+}
+
+.state-list-item--crashed { @apply
+  border-state-crashed-500
+}
+
+.state-list-item__content { @apply
+  flex
+  flex-col
+  gap-2
+  items-start
+  grow
+}
+
+.state-list-item__content-container { @apply
+  flex
+}
+
+.state-list-item__top-section { @apply
+  grid
+  w-full
+  items-start
+  gap-2;
+
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    "name action"
+    "tags tags";
+}
+
+@screen md {
+  .state-list-item__top-section {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+     "name tags action";
+  }
+}
+
+.state-list-item__name { @apply
+  text-base
+  text-subdued;
+
+  grid-area: name;
+}
+
+.state-list-item__meta { @apply
+  flex
+  flex-col
+  items-start
+  gap-2
+  whitespace-nowrap
+  mr-1
+  md:flex-row
+  md:flex-wrap
+  md:items-center
+  w-full
+}
+
+.state-list-item__tags { @apply
+  min-w-12
+  grow;
+
+  grid-area: tags;
+}
+
+.state-list-item__action {
+  grid-area: action;
+}
+
+.state-list-item__relationships { @apply
+  flex
+  flex-col
+  items-start
+  text-xs
+  font-medium
+  gap-2
+  whitespace-nowrap
+  mr-1
+  self-stretch
+  md:items-center
+  md:flex-wrap
+  md:flex-row
+  md:gap-4
+}
+</style>

package/src/components/StateNameSelect.vue

@@ -0,0 +1,146 @@
+<template>
+  <p-select v-model="internalValue" class="state-name-select" v-bind="{ options, multiple, emptyMessage }">
+    <template #option="{ option }">
+      <template v-if="option.value === allExceptScheduled">
+        All except scheduled
+      </template>
+      <template v-else-if="option.value === allRunStates">
+        All run states
+      </template>
+      <template v-else>
+        <StateBadge :state="getStateFromTagValue(option.value)" />
+      </template>
+    </template>
+    <template #tag="{ value, dismiss }">
+      <template v-if="value === allExceptScheduled">
+        All except scheduled
+      </template>
+      <template v-else-if="value === allRunStates">
+        All run states
+      </template>
+      <template v-else>
+        <StateBadge
+          class="state-name-select__option state-name-select__option--multiple"
+          :state="getStateFromTagValue(value)"
+          dismissible
+          @dismiss="dismiss"
+        />
+      </template>
+    </template>
+    <template #default="{ value }">
+      <template v-if="value === allExceptScheduled">
+        All except scheduled
+      </template>
+      <template v-else-if="value === allRunStates">
+        All run states
+      </template>
+      <template v-else>
+        <StateBadge
+          class="state-name-select__option"
+          :state="getStateFromTagValue(value)"
+          flat
+        />
+      </template>
+    </template>
+  </p-select>
+</template>
+
+<script lang="ts" setup>
+  import { isArray, PSelect, SelectOption } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import StateBadge from '@/components/StateBadge.vue'
+  import { StateBadgeState } from '@/types/stateBadge'
+  import { prefectStateNames } from '@/types/states'
+  import { mapStateNameToStateType } from '@/utilities'
+
+  const allExceptScheduled = 'allExceptScheduled'
+  const allRunStates = 'All run states'
+
+  const props = defineProps<{
+    selected: string | string[] | null | undefined,
+    emptyMessage?: string,
+    multiple?: boolean,
+  }>()
+
+  const emits = defineEmits<{
+    (event: 'update:selected', value: string | string[] | null): void,
+  }>()
+
+  const multiple = computed(() => props.multiple || isArray(internalValue.value) && internalValue.value.length > 0)
+
+  const internalValue = computed({
+    get() {
+      if (isArray(props.selected) && !props.selected.length) {
+        return allRunStates
+      }
+
+      if (!props.selected) {
+        return allRunStates
+      }
+
+      const isAllExceptScheduled = props.selected.length === prefectStateNames.length - 1
+        && !props.selected.includes('Scheduled')
+
+      if (isAllExceptScheduled) {
+        return allExceptScheduled
+      }
+
+      return props.selected
+    },
+    set(value: string | string[] | null) {
+      if (!value) {
+        emits('update:selected', [])
+      } else if (value === allRunStates || value.includes(allRunStates)) {
+        emits('update:selected', [])
+      } else if (multiple.value) {
+        const values = isArray(value) ? value : [value]
+
+        if (values.includes(allExceptScheduled)) {
+          emits('update:selected', prefectStateNames.filter((stateName) => stateName !== 'Scheduled'))
+        } else {
+          emits('update:selected', values)
+        }
+      } else {
+        emits('update:selected', value)
+      }
+    },
+  })
+
+  const options = computed<SelectOption[]>(() => {
+    const stateNames = prefectStateNames.map((stateName) => {
+      const { name, type } = mapStateNameToStateType(stateName)
+
+      return {
+        label: name,
+        value: name,
+        type,
+      }
+    })
+
+    return [
+      {
+        label: 'All except scheduled',
+        value: allExceptScheduled,
+      },
+      {
+        label: 'All run states',
+        value: allRunStates,
+      },
+      ...stateNames,
+    ]
+  })
+
+  const getStateFromTagValue = (value: unknown): StateBadgeState | null => {
+    if (typeof value == 'string') {
+      return mapStateNameToStateType(value)
+    }
+
+    return null
+  }
+</script>
+
+<style>
+.state-name-select {
+  min-width: theme('spacing.40')
+}
+</style>