Fixing issues discussed in #8460 around backup UI.

packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte

@@ -10,7 +10,7 @@
   } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import CreateRestoreModal from "./CreateRestoreModal.svelte"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
 
   export let row
 
@@ -49,6 +49,10 @@
   async function downloadExport() {
     window.open(`/api/apps/${row.appId}/backups/${row._id}/file`, "_blank")
   }
+
+  onMount(() => {
+    name = row.name
+  })
 </script>
 
 <div class="cell">
@@ -62,7 +66,7 @@
       <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
       <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
     {/if}
-    <MenuItem on:click={updateDialog.show} icon="Edit">Update</MenuItem>
+    <MenuItem on:click={updateDialog.show} icon="Edit">Rename</MenuItem>
   </ActionMenu>
 </div>
 
@@ -100,7 +104,7 @@
   title="Update Backup"
   warning={false}
 >
-  <Input onlabel="Backup name" placeholder={row.name} bind:value={name} />
+  <Input onlabel="Backup name" bind:value={name} />
 </ConfirmDialog>
 
 <style>

packages/builder/src/components/portal/overview/backups/BackupsTab.svelte

@@ -21,13 +21,14 @@
   import AppSizeRenderer from "./AppSizeRenderer.svelte"
   import CreateBackupModal from "./CreateBackupModal.svelte"
   import ActionsRenderer from "./ActionsRenderer.svelte"
-  import DateRenderer from "./DateRenderer.svelte"
+  import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
   import UserRenderer from "./UserRenderer.svelte"
   import StatusRenderer from "./StatusRenderer.svelte"
   import TypeRenderer from "./TypeRenderer.svelte"
+  import NameRenderer from "./NameRenderer.svelte"
   import BackupsDefault from "assets/backups-default.png"
+  import { BackupTrigger, BackupType } from "constants/backend/backups"
   import { onMount } from "svelte"
-
   export let app
 
   let backupData = null
@@ -36,30 +37,34 @@
   let filterOpt = null
   let startDate = null
   let endDate = null
-  let filters = getFilters()
   let loaded = false
+  let filters = [
+    {
+      label: "Manual backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.MANUAL },
+    },
+    {
+      label: "Published backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.PUBLISH },
+    },
+    {
+      label: "Scheduled backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.SCHEDULED },
+    },
+    {
+      label: "Pre-restore backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.RESTORING },
+    },
+    {
+      label: "Manual restore",
+      value: { type: BackupType.RESTORE, trigger: BackupTrigger.MANUAL },
+    },
+  ]
+
   $: page = $pageInfo.page
   $: fetchBackups(filterOpt, page, startDate, endDate)
 
-  function getFilters() {
-    const options = []
-    let types = ["backup"]
-    let triggers = ["manual", "publish", "scheduled", "restoring"]
-    for (let type of types) {
-      for (let trigger of triggers) {
-        let label = `${trigger} ${type}`
-        label = label.charAt(0).toUpperCase() + label?.slice(1)
-        options.push({ label, value: { type, trigger } })
-      }
-    }
-    options.push({
-      label: `Manual restore`,
-      value: { type: "restore", trigger: "manual" },
-    })
-    return options
-  }
-
-  const schema = {
+  let schema = {
     type: {
       displayName: "Type",
       width: "auto",
@@ -97,6 +102,7 @@
     { column: "createdBy", component: UserRenderer },
     { column: "status", component: StatusRenderer },
     { column: "type", component: TypeRenderer },
+    { column: "name", component: NameRenderer },
   ]
 
   function flattenBackups(backups) {
@@ -260,7 +266,7 @@
           >
         </div>
       </div>
-      <div>
+      <div class="table">
         <Table
           {schema}
           disableSorting
@@ -308,7 +314,7 @@
   }
 
   .select {
-    flex-basis: 150px;
+    flex-basis: 100px;
   }
 
   .pagination {
@@ -342,4 +348,8 @@
     display: flex;
     gap: var(--spacing-m);
   }
+
+  .table {
+    overflow-x: scroll;
+  }
 </style>

packages/builder/src/components/portal/overview/backups/DateRenderer.svelte

@@ -1,22 +0,0 @@
-<script>
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import dayjs from "dayjs"
-  import relativeTime from "dayjs/plugin/relativeTime"
-  dayjs.extend(relativeTime)
-
-  export let value
-  $: timeSince = dayjs(value).fromNow()
-</script>
-
-<div class="cell">
-  {timeSince} - <DateTimeRenderer {value} />
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>

packages/builder/src/components/portal/overview/backups/NameRenderer.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { truncate } from "lodash"
+
+  export let value
+  $: truncatedValue = truncate(value, { length: 12 })
+</script>
+
+{truncatedValue}

packages/builder/src/components/portal/overview/backups/TypeRenderer.svelte

@@ -1,13 +1,29 @@
 <script>
+  import { BackupTrigger } from "constants/backend/backups"
   export let row
 
-  $: baseTrig = row?.trigger || "manual"
+  $: trigger = row?.trigger || "manual"
   $: type = row?.type || "backup"
-  $: trigger = baseTrig.charAt(0).toUpperCase() + baseTrig.slice(1)
+
+  function printTrigger(trig) {
+    let final = "undefined"
+    switch (trig) {
+      case BackupTrigger.PUBLISH:
+        final = "published"
+        break
+      case BackupTrigger.RESTORING:
+        final = "pre-restore"
+        break
+      default:
+        final = trig
+        break
+    }
+    return final.charAt(0).toUpperCase() + final.slice(1)
+  }
 </script>
 
 <div class="cell">
-  {trigger}
+  {printTrigger(trigger)}
   {type}
 </div>
 

packages/builder/src/constants/backend/backups.js

@@ -0,0 +1,11 @@
+export const BackupTrigger = {
+  MANUAL: "manual",
+  PUBLISH: "publish",
+  RESTORING: "restoring",
+  SCHEDULED: "scheduled",
+}
+
+export const BackupType = {
+  BACKUP: "backup",
+  RESTORE: "restore",
+}

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -383,10 +383,5 @@
     .user-dropdown {
       flex: 0 1 0;
     }
-
-    /* Reduce BBUI page padding */
-    .content :global(> *) {
-      padding: calc(var(--spacing-xl) * 1.5) !important;
-    }
   }
 </style>

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -391,11 +391,7 @@
       gap: var(--spacing-l);
     }
   }
-  @media (max-width: 640px) {
-    .overview-wrap :global(.content > *) {
-      padding: calc(var(--spacing-xl) * 1.5) !important;
-    }
-  }
+
   .app-title {
     display: flex;
     gap: var(--spacing-m);