Update backups to use single date picker instead of range

packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte

@@ -1,7 +1,7 @@
 <script>
   import {
     Button,
-    DateRangePicker,
+    DatePicker,
     Divider,
     Layout,
     notifications,
@@ -25,13 +25,13 @@
   import BackupsDefault from "assets/backups-default.png"
   import { BackupTrigger, BackupType } from "constants/backend/backups"
   import { onMount } from "svelte"
+  import dayjs from "dayjs"
 
   let loading = true
   let backupData = null
   let pageInfo = createPaginationStore()
   let filterOpt = null
-  let startDate = null
+  let date = null
-  let endDate = null
   let filters = [
     {
       label: "Manual backup",
@@ -52,9 +52,9 @@
   ]
 
   $: page = $pageInfo.page
-  $: fetchBackups(filterOpt, page, startDate, endDate)
+  $: fetchBackups(filterOpt, page, date)
 
-  let schema = {
+  const schema = {
     type: {
       displayName: "Type",
       width: "auto",
@@ -99,13 +99,13 @@
     })
   }
 
-  async function fetchBackups(filters, page, startDate, endDate) {
+  async function fetchBackups(filters, page, date) {
     const response = await backups.searchBackups({
       appId: $appStore.appId,
       ...filters,
       page,
-      startDate,
+      startDate: date ? dayjs(date).startOf("day") : null,
-      endDate,
+      endDate: date ? dayjs(date).endOf("day") : null,
     })
     pageInfo.fetched(response.hasNextPage, response.nextPage)
 
@@ -165,7 +165,7 @@
   }
 
   onMount(async () => {
-    await fetchBackups(filterOpt, page, startDate, endDate)
+    await fetchBackups(filterOpt, page, date)
     loading = false
   })
 </script>
@@ -207,7 +207,7 @@
         View plans
       </Button>
     </div>
-  {:else if !backupData?.length && !loading && !filterOpt && !startDate}
+  {:else if !backupData?.length && !loading && !filterOpt && !date}
     <div class="center">
       <Layout noPadding gap="S" justifyItems="center">
         <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
@@ -236,19 +236,19 @@
               bind:value={filterOpt}
             />
           </div>
-          <DateRangePicker
+          <DatePicker
-            value={[startDate, endDate]}
+            value={date}
-            label="Date Range"
+            label="Date"
             on:change={e => {
-              startDate = e.detail?.[0]
+              date = e.detail
-              endDate = e.detail?.[1]
             }}
+            enableTime={false}
           />
         </div>
         <div>
-          <Button cta disabled={loading} on:click={createManualBackup}
+          <Button cta disabled={loading} on:click={createManualBackup}>
-            >Create new backup</Button
+            Create new backup
-          >
+          </Button>
         </div>
       </div>
       <div class="table">

packages/client/src/components/app/DateRangePicker.svelte

@@ -1,79 +0,0 @@
-<script>
-  import { Select } from "@budibase/bbui"
-  import { getContext, onDestroy } from "svelte"
-  import dayjs from "dayjs"
-  import utc from "dayjs/plugin/utc"
-
-  dayjs.extend(utc)
-
-  export let dataProvider
-  export let field
-  export let defaultValue
-
-  const component = getContext("component")
-  const { styleable, ActionTypes, getAction } = getContext("sdk")
-  const options = [
-    "Last 1 day",
-    "Last 7 days",
-    "Last 30 days",
-    "Last 3 months",
-    "Last 6 months",
-    "Last 1 year",
-  ]
-  let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
-
-  $: dataProviderId = dataProvider?.id
-  $: addExtension = getAction(
-    dataProviderId,
-    ActionTypes.AddDataProviderQueryExtension
-  )
-  $: removeExtension = getAction(
-    dataProviderId,
-    ActionTypes.RemoveDataProviderQueryExtension
-  )
-  $: queryExtension = getQueryExtension(field, value)
-  $: addExtension?.($component.id, queryExtension)
-
-  const getQueryExtension = (field, value) => {
-    if (!field || !value) {
-      return null
-    }
-
-    let low = dayjs.utc().subtract(1, "year")
-    let high = dayjs.utc().add(1, "day")
-
-    if (value === "Last 1 day") {
-      low = dayjs.utc().subtract(1, "day")
-    } else if (value === "Last 7 days") {
-      low = dayjs.utc().subtract(7, "days")
-    } else if (value === "Last 30 days") {
-      low = dayjs.utc().subtract(30, "days")
-    } else if (value === "Last 3 months") {
-      low = dayjs.utc().subtract(3, "months")
-    } else if (value === "Last 6 months") {
-      low = dayjs.utc().subtract(6, "months")
-    }
-
-    return {
-      range: {
-        [field]: {
-          low: low.format(),
-          high: high.format(),
-        },
-      },
-    }
-  }
-
-  onDestroy(() => {
-    removeExtension?.($component.id)
-  })
-</script>
-
-<div use:styleable={$component.styles}>
-  <Select
-    placeholder={null}
-    {options}
-    {value}
-    on:change={e => (value = e.detail)}
-  />
-</div>

packages/client/src/components/app/index.js

@@ -29,7 +29,6 @@ export { default as image } from "./Image.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as icon } from "./Icon.svelte"
 export { default as backgroundimage } from "./BackgroundImage.svelte"
-export { default as daterangepicker } from "./DateRangePicker.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as spectrumcard } from "./SpectrumCard.svelte"
 export { default as tag } from "./Tag.svelte"