@prefecthq/prefect-ui-library 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@prefecthq/prefect-ui-library",
-    "version": "3.0.2",
+    "version": "3.0.4",
     "private": false,
     "repository": {
         "type": "git",
@@ -76,7 +76,7 @@
         "vue-tsc": "^2.0.17"
     },
     "peerDependencies": {
-        "@prefecthq/prefect-design": "^2.10.4",
+        "@prefecthq/prefect-design": "^2.10.5",
         "@prefecthq/vue-charts": "^2.0.3",
         "@prefecthq/vue-compositions": "^1.11.4",
         "vee-validate": "^4.7.0",

package/src/components/BlockDocumentsTable.vue

@@ -58,13 +58,13 @@
       </template>
     </p-table>
 
-    <p-pager v-if="pages > 1" v-model:page="page" :pages="pages" />
+    <p-pager v-if="pages > 1" v-model:limit="limit" v-model:page="page" :pages="pages" />
   </div>
 </template>
 
 <script lang="ts" setup>
   import { media, TableColumn, PEmptyResults } from '@prefecthq/prefect-design'
-  import { NumberRouteParam, useDebouncedRef, useRouteQueryParam } from '@prefecthq/vue-compositions'
+  import { NumberRouteParam, useDebouncedRef, useLocalStorage, useRouteQueryParam } from '@prefecthq/vue-compositions'
   import merge from 'lodash.merge'
   import { computed, ref, ComputedRef } from 'vue'
   import BlockSchemaCapabilities from '@/components/BlockSchemaCapabilities.vue'
@@ -113,7 +113,9 @@
   const searchTerm = ref('')
   const searchTermDebounced = useDebouncedRef(searchTerm, 500)
 
-  const { filter } = useBlockDocumentsFilterFromRoute({
+  const { value: limit } = useLocalStorage('block-documents-table-limit', 10)
+
+  const { filter: routeFilter } = useBlockDocumentsFilterFromRoute({
     blockSchemas: {
       blockCapabilities: capabilities,
     },
@@ -123,11 +125,11 @@
     blockTypes: {
       slug: blockTypes,
     },
-    limit: 50,
+    limit,
     sort: 'BLOCK_TYPE_AND_NAME_ASC',
   })
 
-  const { blockDocuments, total, pages, subscriptions } = useBlockDocuments(() => merge({}, props.filter, filter), {
+  const { blockDocuments, total, pages, subscriptions } = useBlockDocuments(() => merge({}, props.filter, routeFilter), {
     page,
   })
 

package/src/components/DeploymentList.vue

@@ -114,13 +114,13 @@
       </template>
     </p-table>
 
-    <p-pager v-if="pages > 1" v-model:page="page" :pages="pages" />
+    <p-pager v-if="pages > 1" v-model:limit="limit" v-model:page="page" :pages="pages" />
   </p-content>
 </template>
 
 <script lang="ts" setup>
   import { TableColumn, media } from '@prefecthq/prefect-design'
-  import { NumberRouteParam, useDebouncedRef, useRouteQueryParam } from '@prefecthq/vue-compositions'
+  import { NumberRouteParam, useDebouncedRef, useLocalStorage, useRouteQueryParam } from '@prefecthq/vue-compositions'
   import { secondsInWeek } from 'date-fns/constants'
   import { snakeCase } from 'lodash'
   import merge from 'lodash.merge'
@@ -160,12 +160,13 @@
 
   const nameLike = ref<string>()
   const nameLikeDebounced = useDebouncedRef(nameLike, 1200)
+  const { value: limit } = useLocalStorage('deployment-list-limit', 10)
 
   const { filter, clear, isCustomFilter } = useDeploymentsFilterFromRoute(merge({}, props.filter, {
     deployments: {
       flowOrDeploymentNameLike: nameLikeDebounced,
     },
-    limit: 50,
+    limit,
   }), props.prefix)
 
   const page = useRouteQueryParam('page', NumberRouteParam, 1)

package/src/components/FlowList.vue

@@ -81,13 +81,13 @@
       </template>
     </p-table>
 
-    <p-pager v-if="pages > 1" v-model:page="page" :pages="pages" />
+    <p-pager v-if="pages > 1" v-model:page="page" v-model:limit="limit" :pages="pages" />
   </p-content>
 </template>
 
 <script lang="ts" setup>
   import { ColumnClassesMethod, TableColumn } from '@prefecthq/prefect-design'
-  import { NumberRouteParam, useDebouncedRef, useRouteQueryParam, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { NumberRouteParam, useDebouncedRef, useLocalStorage, useRouteQueryParam, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
   import { secondsInWeek } from 'date-fns/constants'
   import merge from 'lodash.merge'
   import { computed, ref, toRef } from 'vue'
@@ -121,13 +121,14 @@
   const can = useCan()
   const routes = useWorkspaceRoutes()
 
+  const { value: limit } = useLocalStorage('flow-list-limit', 10)
   const flowNameLike = ref<string>()
   const flowNameLikeDebounced = useDebouncedRef(flowNameLike, 1200)
   const { filter, clear, isCustomFilter } = useFlowsFilterFromRoute(merge({}, props.filter, {
     flows: {
       nameLike: flowNameLikeDebounced,
     },
-    limit: 50,
+    limit,
   }))
 
   const page = useRouteQueryParam('page', NumberRouteParam, 1)

package/src/components/VariablesTable.vue

@@ -68,13 +68,13 @@
       </template>
     </p-table>
 
-    <p-pager v-if="variables.length" v-model:page="page" :pages="pages" />
+    <p-pager v-if="variables.length" v-model:limit="limit" v-model:page="page" :pages="pages" />
   </p-content>
 </template>
 
 <script lang="ts" setup>
   import { PTable, PEmptyResults, TableColumn, ClassValue } from '@prefecthq/prefect-design'
-  import { useDebouncedRef, useSubscription } from '@prefecthq/vue-compositions'
+  import { useDebouncedRef, useLocalStorage, useSubscription } from '@prefecthq/vue-compositions'
   import merge from 'lodash.merge'
   import { computed, ref } from 'vue'
   import { VariablesDeleteButton, VariableMenu, ResultsCount, SearchInput, SelectedCount, VariableTagsInput } from '@/components'
@@ -101,6 +101,7 @@
     return (page.value - 1) * DEFAULT_LIMIT
   })
   const pages = computed(() => Math.ceil((variablesCount.value ?? DEFAULT_LIMIT) / DEFAULT_LIMIT))
+  const { value: limit } = useLocalStorage('variables-table-limit', 10)
 
   const { filter, isCustomFilter, clear } = useVariablesFilter(merge({}, props.filter, {
     variables: {

package/src/maps/savedSearchFilter.ts

@@ -58,8 +58,8 @@ export const mapSavedSearchFilterToTaskRunsFilter: MapFunction<SavedSearchFilter
       state: {
         name: stateNames,
       },
-      expectedStartTimeAfter: startDate,
-      expectedStartTimeBefore: endDate,
+      startTimeAfter: startDate,
+      startTimeBefore: endDate,
     },
   }
 }