@prefecthq/prefect-ui-library/src/compositions/usePaginatedFlowRuns.ts

This library is the Vue and Typescript component library for [Prefect 2](https://github.com/PrefectHQ/prefect) and [Prefect Cloud 2](https://www.prefect.io/cloud/). _The components and utilities in this project are not meant to be used independently_.

import { SubscriptionOptions, UseSubscription, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
import merge from 'lodash.merge'
import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue } from 'vue'
import { useCan } from '@/compositions/useCan'
import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
import { FlowRun, FlowRunsPaginationFilter } from '@/models'
import { WorkspaceFlowRunsApi } from '@/services'
import { Getter } from '@/types/reactivity'

type UsePaginatedFlowRuns = {
  subscription: UseSubscription<WorkspaceFlowRunsApi['getFlowRunsPaginated']>,
  flowRuns: ComputedRef<FlowRun[]>,
  count: ComputedRef<number>,
  limit: ComputedRef<number>,
  pages: ComputedRef<number>,
  page: ComputedRef<number>,
  error: ComputedRef<unknown | null>,
  errored: ComputedRef<boolean>,
}

export function usePaginatedFlowRuns(filter: MaybeRefOrGetter<FlowRunsPaginationFilter | null | undefined> = {}, options?: SubscriptionOptions): UsePaginatedFlowRuns {
  const api = useWorkspaceApi()
  const can = useCan()

  const getter: Getter<[FlowRunsPaginationFilter] | null> = () => {
    if (!can.read.flow_run) {
      return null
    }

    const value = toValue(filter)

    if (!value) {
      return null
    }

    // merge here is important to track changes to `filter` if it is a reactive
    return [merge({}, value)]
  }

  const parameters = toRef(getter)
  const subscription = useSubscriptionWithDependencies(api.flowRuns.getFlowRunsPaginated, parameters, options)

  const flowRuns = computed(() => subscription.response?.results ?? [])
  const pages = computed(() => subscription.response?.pages ?? 0)
  const limit = computed(() => subscription.response?.limit ?? 0)
  const count = computed(() => subscription.response?.count ?? 0)
  const page = computed(() => subscription.response?.page ?? 1)
  const error = computed(() => subscription.error)
  const errored = computed(() => subscription.errored)

  return {
    subscription,
    flowRuns,
    pages,
    page,
    limit,
    count,
    error,
    errored,
  }
}