@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/NotificationForm.vue

@@ -0,0 +1,241 @@
+<template>
+  <p-form class="notification-form p-background" @submit="submit" @cancel="cancel">
+    <p class="notification-form__message">
+      Choose which flow run states and tags trigger this notification.
+    </p>
+
+    <div class="notification-form__horizontal-fields">
+      <p-label label="Run states">
+        <StateNameSelect v-model:selected="stateNames" empty-message="All states" multiple />
+      </p-label>
+
+      <p-label label="Tags (Optional)">
+        <p-tags-input v-model="tags" empty-message="All tags" />
+      </p-label>
+    </div>
+
+    <!-- @vue-ignore -->
+    <p-button-group v-model="selectedBlockTypeId" :options="buttonGroup" />
+
+    <template v-if="blockSchema && data">
+      <SchemaFormFields :schema="blockSchema.fields" property="blockData" />
+    </template>
+
+    <p class="notification-form__message">
+      Review your notification.
+    </p>
+
+    <div class="notification-form__review-block p-background">
+      <template v-if="blockType && data">
+        <NotificationDetails :notification="{ stateNames, tags }" :block-type="blockType" :data="data" />
+      </template>
+    </div>
+
+    <template #footer>
+      <p-button @click="cancel">
+        Cancel
+      </p-button>
+      <SubmitButton :action="action" />
+    </template>
+  </p-form>
+</template>
+
+<script lang="ts" setup>
+  import { PLabel, PTagsInput, PForm, PButtonGroup, showToast } from '@prefecthq/prefect-design'
+  import { useSubscription, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { useField } from 'vee-validate'
+  import { computed, watchEffect, ref, watch, reactive } from 'vue'
+  import NotificationDetails from '@/components/NotificationDetails.vue'
+  import SchemaFormFields from '@/components/SchemaFormFields.vue'
+  import StateNameSelect from '@/components/StateNameSelect.vue'
+  import SubmitButton from '@/components/SubmitButton.vue'
+  import { useBlockSchemaForBlockType, useForm, useReactiveField, useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { Notification } from '@/models'
+  import { BlockTypesFilter } from '@/models/Filters'
+  import { getSchemaDefaultValues } from '@/services/schemas/utilities'
+  import { FormAction } from '@/types/buttons'
+  import { SchemaValues } from '@/types/schemas'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    notification?: Notification,
+    action?: FormAction,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'update:notification' | 'submit', value: Partial<Notification>): void,
+    (event: 'cancel'): void,
+  }>()
+
+  const { handleSubmit } = useForm<{
+    stateNames: string[],
+    tags: string[],
+    blockData: SchemaValues,
+  }>({
+    initialValues: {
+      stateNames: props.notification?.stateNames ?? [],
+      tags: props.notification?.tags ?? [],
+      blockData: {},
+    },
+  })
+
+  const { value: stateNames } = useField<string[]>('stateNames')
+  const { value: tags } = useField<string[]>('tags')
+
+  const api = useWorkspaceApi()
+  const selectedBlockTypeId = ref<string>()
+  const blockDataMap = reactive<Record<string, SchemaValues | undefined>>({})
+
+  const data = computed({
+    get() {
+      if (selectedBlockTypeId.value === undefined || blockSchema.value === undefined) {
+        return undefined
+      }
+
+      const data = blockDataMap[selectedBlockTypeId.value]
+
+      if (!data) {
+        return getSchemaDefaultValues(blockSchema.value.fields)
+      }
+
+      return data
+    },
+    set(value: SchemaValues | undefined) {
+      if (selectedBlockTypeId.value === undefined) {
+        return
+      }
+
+      blockDataMap[selectedBlockTypeId.value] = value
+    },
+  })
+
+  useReactiveField(data, 'blockData')
+
+  const blockDocumentSubscriptionArgs = computed<Parameters<typeof api.blockDocuments.getBlockDocument> | null>(() => {
+    if (!props.notification?.blockDocumentId) {
+      return null
+    }
+
+    return [props.notification.blockDocumentId]
+  })
+  const blockDocumentSubscription = useSubscriptionWithDependencies(api.blockDocuments.getBlockDocument, blockDocumentSubscriptionArgs)
+  const blockDocument = computed(() => blockDocumentSubscription.response)
+
+  watch(blockDocument, document => {
+    if (!document) {
+      return
+    }
+
+    selectedBlockTypeId.value = document.blockTypeId
+    data.value = document.data
+  }, { immediate: true })
+
+  const blockTypesSubscriptionFilter: BlockTypesFilter = {
+    blockSchemas: {
+      blockCapabilities: ['notify'],
+    },
+  }
+  const blockTypesSubscription = useSubscription(api.blockTypes.getBlockTypes, [blockTypesSubscriptionFilter])
+  const blockTypes = computed(() => blockTypesSubscription.response ?? [])
+  const blockType = computed(() => blockTypes.value.find(type => type.id === selectedBlockTypeId.value))
+
+  const buttonGroup = computed(() => blockTypes.value.map(type => ({
+    label: type.name,
+    value: type.id,
+  })))
+
+  watchEffect(() => {
+    if (selectedBlockTypeId.value || props.notification?.blockDocumentId) {
+      return
+    }
+
+    if (blockTypes.value.length) {
+      selectedBlockTypeId.value = blockTypes.value[0].id
+    }
+  })
+
+  const blockTypeId = computed<string | null>(() => {
+    if (!selectedBlockTypeId.value) {
+      return null
+    }
+
+    if (blockDocument.value && selectedBlockTypeId.value === blockDocument.value.blockTypeId) {
+      return null
+    }
+
+    return selectedBlockTypeId.value
+  })
+  const { blockSchema: blockSchemaForSelectedBlockType } = useBlockSchemaForBlockType(blockTypeId)
+  const blockSchema = computed(() => {
+    if (blockDocument.value && selectedBlockTypeId.value === blockDocument.value.blockTypeId) {
+      return blockDocument.value.blockSchema
+    }
+
+    return blockSchemaForSelectedBlockType.value
+  })
+
+  const blockDocumentId = ref<string>()
+
+  const submit = handleSubmit(async (values) => {
+    if (blockSchema.value === undefined || selectedBlockTypeId.value === undefined || data.value === undefined) {
+      showToast(localization.error.submitNotification)
+      return
+    }
+
+    try {
+      if (
+        blockDocument.value?.id &&
+        blockDocument.value.blockSchemaId === blockSchema.value.id &&
+        blockDocument.value.blockTypeId === selectedBlockTypeId.value
+      ) {
+        blockDocumentId.value = blockDocument.value.id
+        await api.blockDocuments.updateBlockDocument(blockDocumentId.value, {
+          blockSchema: blockSchema.value,
+          data: data.value,
+        })
+      } else {
+        const newBlockDocument = await api.blockDocuments.createBlockDocument({
+          isAnonymous: true,
+          blockSchema: blockSchema.value,
+          data: data.value,
+        })
+        blockDocumentId.value = newBlockDocument.id
+      }
+      const notification = { ...values, blockDocumentId: blockDocumentId.value }
+
+      emit('update:notification', notification)
+      emit('submit', notification)
+    } catch (err) {
+      const message = getApiErrorMessage(err, localization.error.submitNotification)
+      showToast(message, 'error')
+    }
+  })
+
+  function cancel(): void {
+    emit('cancel')
+  }
+</script>
+
+<style>
+.notification-form {
+  @apply
+  p-6
+  rounded-default
+}
+.notification-form__message {
+  @apply
+  text-base
+}
+.notification-form__horizontal-fields {
+  @apply
+  flex
+  gap-4
+}
+.notification-form__review-block {
+  @apply
+  rounded-default
+  p-4
+  pb-6
+}
+</style>

package/src/components/NotificationMenu.vue

@@ -0,0 +1,53 @@
+<template>
+  <p-icon-button-menu>
+    <p-overflow-menu-item v-if="false" label="Send Test" />
+    <router-link v-if="can.update.notification_policy" :to="routes.notificationEdit(notification.id)">
+      <p-overflow-menu-item label="Edit" />
+    </router-link>
+    <p-overflow-menu-item v-if="can.delete.notification_policy" label="Delete" @click="open" />
+  </p-icon-button-menu>
+
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    label="Notification"
+    name="this notification"
+    @delete="deleteNotification(notification.id)"
+  />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'NotificationMenu',
+    expose: [],
+    inheritAttrs: false,
+  }
+</script>
+
+<script lang="ts" setup>
+  import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { useCan } from '@/compositions/useCan'
+  import { useShowModal } from '@/compositions/useShowModal'
+  import { Notification } from '@/models'
+  import { deleteItem } from '@/utilities'
+
+  defineProps<{
+    notification: Notification,
+  }>()
+
+  const emits = defineEmits<{
+    (event: 'delete', value: string): void,
+  }>()
+
+  const can = useCan()
+  const api = useWorkspaceApi()
+  const routes = useWorkspaceRoutes()
+
+  const { showModal, open, close } = useShowModal()
+
+  const deleteNotification = async (id: string): Promise<void> => {
+    close()
+    await deleteItem(id, api.notifications.deleteNotification, 'Notification')
+    emits('delete', id)
+  }
+</script>

package/src/components/NotificationStatusSelect.vue

@@ -0,0 +1,31 @@
+<template>
+  <p-select v-model="model" :options="options" class="notification-status-select" />
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { NotificationStatus } from '@/models'
+
+  const props = defineProps<{
+    selected: NotificationStatus,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'update:selected', value: NotificationStatus): void,
+  }>()
+
+  const model = computed({
+    get() {
+      return props.selected
+    },
+    set(value: NotificationStatus) {
+      emit('update:selected', value)
+    },
+  })
+
+  const options: { label: string, value: NotificationStatus }[] = [
+    { label: 'Status: All', value: 'all' },
+    { label: 'Status: Active', value: 'active' },
+    { label: 'Status: Paused', value: 'paused' },
+  ]
+</script>

package/src/components/NotificationToggle.vue

@@ -0,0 +1,59 @@
+<template>
+  <p-tooltip text="Pause or resume this notification">
+    <p-toggle v-if="can.update.notification_policy" v-model="internalValue" :loading="loading" />
+  </p-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import { PToggle, showToast } from '@prefecthq/prefect-design'
+  import { computed, ref } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { useCan } from '@/compositions/useCan'
+  import { localization } from '@/localization'
+  import { Notification } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    notification: Notification,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'update'): void,
+  }>()
+
+  const can = useCan()
+  const api = useWorkspaceApi()
+
+  const internalValue = computed({
+    get() {
+      return !!props.notification.isActive
+    },
+    set(value: boolean) {
+      toggleNotification(value)
+    },
+  })
+
+  const loading = ref(false)
+
+  const toggleNotification = async (value: boolean): Promise<void> => {
+    loading.value = true
+
+    try {
+      const notification = { isActive: value }
+      await api.notifications.updateNotification(props.notification.id, notification)
+      const message = value ? localization.success.activateNotification : localization.success.pauseNotification
+
+      showToast(message, 'success')
+      emit('update')
+    } catch (error) {
+      const defaultMessage = value ? localization.error.activateNotification : localization.error.pauseNotification
+      const message = getApiErrorMessage(error, defaultMessage)
+      showToast(message, 'error')
+
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+</script>
+

package/src/components/NotificationsPageEmptyState.vue

@@ -0,0 +1,41 @@
+<template>
+  <p-empty-state class="workspace-notifications-empty-state">
+    <template #icon>
+      <p-icon icon="BellIcon" class="workspace-notifications-empty-state__icon" />
+    </template>
+
+    <template #heading>
+      Create a notification to begin monitoring your flows
+    </template>
+
+    <template #description>
+      Send an alert when a flow run enters a specific state.
+    </template>
+
+    <template #actions>
+      <p-button v-if="can.create.notification_policy" primary icon-append="PlusIcon" :to="routes.notificationCreate()">
+        Create Notification
+      </p-button>
+      <DocumentationButton :to="localization.docs.notifications" />
+    </template>
+  </p-empty-state>
+</template>
+
+<script lang="ts" setup>
+  import { PEmptyState, PButton, PIcon } from '@prefecthq/prefect-design'
+  import DocumentationButton from '@/components/DocumentationButton.vue'
+  import { useWorkspaceRoutes } from '@/compositions'
+  import { useCan } from '@/compositions/useCan'
+  import { localization } from '@/localization'
+
+  const can = useCan()
+  const routes = useWorkspaceRoutes()
+</script>
+
+
+<style>
+.workspace-notifications-empty-state__icon { @apply
+  w-12
+  h-12
+}
+</style>

package/src/components/NotificationsTable.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="notifications-table">
+    <div class="notifications-table__search">
+      <ResultsCount label="Notification" :count="filtered.length" />
+      <NotificationStatusSelect v-model:selected="selectedStatus" />
+    </div>
+
+    <p-table :data="filtered" :columns="columns" class="notifications-table">
+      <template #notification="{ row: notification }: { row: Notification }">
+        <div class="notifications-table__details" :data-notification-id="notification.id">
+          <BlockDocument v-slot="{ blockDocument }" :block-document-id="notification.blockDocumentId">
+            <NotificationDetails
+              :notification="notification"
+              :block-type="blockDocument.blockType"
+              :data="blockDocument.data"
+            />
+          </BlockDocument>
+        </div>
+      </template>
+
+      <template #action-heading>
+        <span />
+      </template>
+
+      <template #action="{ row }">
+        <div class="notifications-table__actions">
+          <NotificationToggle :notification="row" @update="emits('update')" />
+          <NotificationMenu size="xs" :notification="row" @delete="id => emits('delete', id)" />
+        </div>
+      </template>
+
+      <template #empty-state>
+        <PEmptyResults>
+          <template #message>
+            No notifications
+          </template>
+          <template v-if="hasFilter" #actions>
+            <p-button size="sm" @click="clear">
+              Clear Filters
+            </p-button>
+          </template>
+        </PEmptyResults>
+      </template>
+    </p-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PTable, PEmptyResults, TableColumn } from '@prefecthq/prefect-design'
+  import { ref, computed } from 'vue'
+  import BlockDocument from '@/components/BlockDocument.vue'
+  import NotificationDetails from '@/components/NotificationDetails.vue'
+  import NotificationMenu from '@/components/NotificationMenu.vue'
+  import NotificationStatusSelect from '@/components/NotificationStatusSelect.vue'
+  import NotificationToggle from '@/components/NotificationToggle.vue'
+  import ResultsCount from '@/components/ResultsCount.vue'
+  import { useCan } from '@/compositions'
+  import { Notification, NotificationStatus } from '@/models'
+
+  const props = defineProps<{
+    notifications: Notification[],
+  }>()
+
+  const emits = defineEmits<{
+    (event: 'update'): void,
+    (event: 'delete', value: string): void,
+  }>()
+
+  const selectedStatus = ref<NotificationStatus>('all')
+  const hasFilter = computed(() => selectedStatus.value !== 'all')
+
+  const can = useCan()
+
+  const columns: TableColumn<Notification>[] = [
+    {
+      label: 'Notification',
+    },
+    {
+      label: 'Action',
+      width: '42px',
+      visible: can.update.notification_policy,
+    },
+  ]
+
+  const filtered = computed(() => {
+    if (selectedStatus.value === 'active') {
+      return props.notifications.filter(notification => notification.isActive)
+    }
+
+    if (selectedStatus.value === 'paused') {
+      return props.notifications.filter(notification => !notification.isActive)
+    }
+
+    return props.notifications
+  })
+
+  function clear(): void {
+    selectedStatus.value = 'all'
+  }
+</script>
+
+<style>
+.notifications-table__search { @apply
+  flex
+  justify-between
+  items-center
+  mb-4
+}
+
+.notifications-table__details { @apply
+  whitespace-normal
+}
+
+.notifications-table__actions { @apply
+  flex
+  gap-2
+  items-center
+}
+</style>

package/src/components/PageHeading.vue

@@ -0,0 +1,89 @@
+<template>
+  <header class="page-heading">
+    <div class="page-heading__leading">
+      <div class="page-heading__crumbs">
+        <p-bread-crumbs :class="classes" :crumbs="crumbs" />
+        <slot name="after-crumbs" />
+      </div>
+      <slot />
+    </div>
+
+    <div class="page-heading__trailing">
+      <slot name="actions" />
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+  import { PBreadCrumbs, BreadCrumbs } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import { Size } from '@/types'
+
+  const props = withDefaults(defineProps<{
+    crumbs: BreadCrumbs,
+    size?: Size,
+  }>(), {
+    size: 'xl',
+  })
+
+  const classes = computed(() => ({
+    'page-heading__crumbs--xs': props.size === 'xs',
+    'page-heading__crumbs--sm': props.size === 'sm',
+    'page-heading__crumbs--md': props.size === 'md',
+    'page-heading__crumbs--lg': props.size === 'lg',
+    'page-heading__crumbs--xl': props.size === 'xl',
+  }))
+</script>
+
+<style>
+.page-heading { @apply
+  flex
+  gap-2
+  items-center
+}
+
+.page-heading__leading { @apply
+  flex
+  flex-col
+  gap-2
+  min-w-0
+}
+
+.page-heading__crumbs { @apply
+  flex
+  items-center
+  justify-start
+  gap-2
+  flex-wrap
+}
+
+.page-heading__trailing { @apply
+  flex
+  flex-grow
+  items-center
+  justify-end
+  gap-2
+  min-w-0
+  max-w-full
+}
+
+.page-heading__crumbs--xs { @apply
+  text-xs
+}
+
+.page-heading__crumbs--sm { @apply
+  text-sm
+}
+
+.page-heading__crumbs--md { @apply
+  text-base
+}
+
+.page-heading__crumbs--lg { @apply
+  text-lg
+}
+
+.page-heading__crumbs--xl { @apply
+  text-xl
+}
+</style>

package/src/components/PageHeadingAccountSettings.vue

@@ -0,0 +1,9 @@
+<template>
+  <page-heading class="page-heading-user-settings" :crumbs="crumbs" />
+</template>
+
+<script lang="ts" setup>
+  import PageHeading from '@/components/PageHeading.vue'
+
+  const crumbs = [{ text: 'Account Settings' }]
+</script>

package/src/components/PageHeadingApiKeys.vue

@@ -0,0 +1,14 @@
+<template>
+  <page-heading class="page-heading-api-keys" :crumbs="crumbs">
+    <template #after-crumbs>
+      <!-- Note: This doesn't do anything yet -->
+      <p-button size="sm" icon="PlusIcon" />
+    </template>
+  </page-heading>
+</template>
+
+<script lang="ts" setup>
+  import PageHeading from '@/components/PageHeading.vue'
+
+  const crumbs = [{ text: 'API Keys' }]
+</script>