From f5c9e22d422479c7d97a471b4fcb6e0f6ba29922 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 20 Oct 2022 11:46:04 +0100
Subject: [PATCH] fix paging and add deletion

---
 packages/bbui/src/Table/CellRenderer.svelte   |  1 +
 packages/bbui/src/Table/Table.svelte          |  1 +
 .../overview/backups/ActionsRenderer.svelte   | 50 +++++++++++++++++--
 .../backups/AutomationsRenderer.svelte        |  2 +-
 .../portal/overview/backups/BackupsTab.svelte | 40 ++++++++++++---
 .../backups/DatasourceRenderer.svelte         |  2 +-
 .../overview/backups/DaysRenderer.svelte      |  1 -
 .../overview/backups/ScreensRenderer.svelte   |  2 +-
 packages/builder/src/stores/portal/backups.js | 40 +++++++--------
 packages/frontend-core/src/api/backups.js     | 16 ++++--
 10 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index 246323244a..5004401d91 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -56,6 +56,7 @@
       {schema}
       value={cellValue}
       on:clickrelationship
+      on:buttonclick
     >
       <slot />
     </svelte:component>
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 01a2ca4835..7745c3c407 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -387,6 +387,7 @@
                   schema={schema[field]}
                   value={deepGet(row, field)}
                   on:clickrelationship
+                  on:buttonclick
                 >
                   <slot />
                 </CellRenderer>
diff --git a/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte b/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
index 094a27bb1e..fa7b330a34 100644
--- a/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
@@ -1,20 +1,64 @@
 <script>
   import { ActionButton, ActionMenu, MenuItem, Icon } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { createEventDispatcher } from "svelte"
 
-  export let value
+  export let row
+
+  let deleteDialog
+  let restoreDialog
+  let editDialog
+  const dispatch = createEventDispatcher()
+
+  const onClickRestore = () => {
+    dispatch("buttonclick", {
+      type: "backupRestore",
+      backupId: row._id,
+    })
+  }
+
+  const onClickDelete = () => {
+    dispatch("buttonclick", {
+      type: "backupDelete",
+      backupId: row._id,
+    })
+  }
 </script>
 
 <div class="cell">
-  <ActionButton>Restore</ActionButton>
+  <ActionButton on:click={restoreDialog.show}>Restore</ActionButton>
   <ActionMenu>
     <div slot="control">
       <Icon size="M" hoverable name="MoreSmallList" />
     </div>
 
-    <MenuItem icon="Delete">Delete</MenuItem>
+    <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
+    <MenuItem on:click={editDialog.show} icon="Edit">Edit</MenuItem>
   </ActionMenu>
 </div>
 
+<ConfirmDialog
+  bind:this={deleteDialog}
+  okText="Delete Backup"
+  onOk={onClickDelete}
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete the backup
+  <i>{row.name}</i>
+  This action cannot be undone.
+</ConfirmDialog>
+
+<ConfirmDialog
+  bind:this={restoreDialog}
+  okText="Restore Backup"
+  onOk={onClickRestore}
+  title="Confirm Restore"
+  warning={false}
+>
+  Are you sure you wish to restore this backup
+  <i>{row.name}</i>. This action cannot be undone.
+</ConfirmDialog>
+
 <style>
   .cell {
     display: flex;
diff --git a/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte b/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte
index eb8eda6b6d..08ea5fb118 100644
--- a/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/AutomationsRenderer.svelte
@@ -6,7 +6,7 @@
 
 <div class="cell">
   <Icon name="JourneyVoyager" />
-  <div>{value?.length}</div>
+  <div>{value || 0}</div>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
index e9412f7400..41cb2a1546 100644
--- a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
+++ b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
@@ -3,14 +3,15 @@
     ActionButton,
     DatePicker,
     Layout,
+    Modal,
     notifications,
     Pagination,
     Select,
     Table,
-    Modal,
   } from "@budibase/bbui"
   import { backups } from "stores/portal"
   import { createPaginationStore } from "helpers/pagination"
+
   import DatasourceRenderer from "./DatasourceRenderer.svelte"
   import ScreensRenderer from "./ScreensRenderer.svelte"
   import AutomationsRenderer from "./AutomationsRenderer.svelte"
@@ -27,9 +28,8 @@
   let trigger = null
   let pageInfo = createPaginationStore()
   $: page = $pageInfo.page
-  $: console.log(page)
 
-  $: fetchBackups(app.instance._id, trigger, page)
+  $: fetchBackups(trigger, page)
 
   const triggers = {
     PUBLISH: "Publish",
@@ -83,10 +83,9 @@
       return {
         ...backup,
         days: getDaysBetween(backup.createdAt),
-        //...Object.assign(...backup?.contents),
+        ...backup?.contents,
       }
     })
-
     return flattened
   }
 
@@ -94,15 +93,18 @@
     const now = new Date()
     const backupDate = new Date(date)
     backupDate.setDate(backupDate.getDate() - 1)
-    console.log(backupDate)
     const oneDay = 24 * 60 * 60 * 1000
     return now > backupDate
       ? Math.round(Math.abs((now - backupDate) / oneDay))
       : 0
   }
 
-  async function fetchBackups(appId, trigger, page) {
-    const response = await backups.searchBackups(appId, trigger, page)
+  async function fetchBackups(trigger, page) {
+    const response = await backups.searchBackups({
+      appId: app.instance._id,
+      trigger,
+      page,
+    })
     pageInfo.fetched(response.hasNextPage, response.nextPage)
 
     // flatten so we have an easier structure to use for the table schema
@@ -120,6 +122,26 @@
       notifications.error("Unable to create backup")
     }
   }
+
+  function selectBackup({ detail }) {
+    console.log(detail)
+  }
+  async function deleteBackup(backupId) {
+    await backups.deleteBackup({ appId: app.instance._id, backupId })
+    await fetchBackups(app.instance._id, trigger, page)
+  }
+  async function restoreBackup(backupId) {
+    console.log(backupId)
+    //backups.restoreBackup(app.instance._id, backupId)
+  }
+
+  async function handleButtonClick({ detail }) {
+    if (detail.type === "backupDelete") {
+      deleteBackup(detail.backupId)
+    } else if (detail.type === "backupRestore") {
+      restoreBackup(detail.backupId)
+    }
+  }
 </script>
 
 <div class="root">
@@ -145,6 +167,7 @@
     {#if backupData}
       <div>
         <Table
+          on:click={selectBackup}
           {schema}
           allowSelectRows={false}
           allowEditColumns={false}
@@ -153,6 +176,7 @@
           {customRenderers}
           placeholderText="No backups found"
           border={false}
+          on:buttonclick={handleButtonClick}
         />
         <div class="pagination">
           <Pagination
diff --git a/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte b/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte
index d815c6f412..e69fa2f625 100644
--- a/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte
@@ -6,7 +6,7 @@
 
 <div class="cell">
   <Icon name="Data" />
-  <div>{value?.length}</div>
+  <div>{value || 0}</div>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte b/packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte
index c6fe631663..ba05a1e64b 100644
--- a/packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/DaysRenderer.svelte
@@ -1,6 +1,5 @@
 <script>
   export let value
-  $: console.log(value)
 </script>
 
 <div class="cell">
diff --git a/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte b/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte
index f192ee98f1..e97f140da7 100644
--- a/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/ScreensRenderer.svelte
@@ -6,7 +6,7 @@
 
 <div class="cell">
   <Icon name="WebPage" />
-  <div>{value?.length}</div>
+  <div>{value || 0}</div>
 </div>
 
 <style>
diff --git a/packages/builder/src/stores/portal/backups.js b/packages/builder/src/stores/portal/backups.js
index 9038f64aba..ef3631374b 100644
--- a/packages/builder/src/stores/portal/backups.js
+++ b/packages/builder/src/stores/portal/backups.js
@@ -2,38 +2,38 @@ import { writable } from "svelte/store"
 import { API } from "api"
 
 export function createBackupsStore() {
-  const { subscribe, set } = writable([])
+  const store = writable({})
 
-  async function load() {
-    set([
-      {
-        trigger: "PUBLISH",
-        name: "A Backup",
-        date: "1665407451",
-        userId: "Peter Clement",
-        contents: [
-          { datasources: ["datasource1", "datasource2"] },
-          { screens: ["screen1", "screen2"] },
-          { automations: ["automation1", "automation2"] },
-        ],
-      },
-    ])
+  function selectBackup(backupId) {
+    store.update(state => {
+      state.selectedBackup = backupId
+      return state
+    })
   }
 
-  async function searchBackups(appId, trigger, page) {
+  async function searchBackups({ appId, trigger, page } = {}) {
     return API.searchBackups({ appId, trigger, page })
   }
 
+  async function restoreBackup({ appId, backupId }) {
+    return API.restoreBackup({ appId, backupId })
+  }
+
+  async function deleteBackup({ appId, backupId }) {
+    return API.deleteBackup({ appId, backupId })
+  }
+
   async function createManualBackup(appId, name) {
-    let resp = API.createManualBackup(appId, name)
-    return resp
+    return API.createManualBackup(appId, name)
   }
 
   return {
-    subscribe,
-    load,
     createManualBackup,
     searchBackups,
+    selectBackup,
+    deleteBackup,
+    restoreBackup,
+    subscribe: store.subscribe,
   }
 }
 
diff --git a/packages/frontend-core/src/api/backups.js b/packages/frontend-core/src/api/backups.js
index ae81bdcfc2..2e7e4cf399 100644
--- a/packages/frontend-core/src/api/backups.js
+++ b/packages/frontend-core/src/api/backups.js
@@ -2,13 +2,11 @@ export const buildBackupsEndpoints = API => ({
   /**
    * Gets a list of users in the current tenant.
    */
-  searchBackups: async ({ appId, trigger, page }) => {
-    console.log(page)
+  searchBackups: async ({ appId, page }) => {
     return await API.post({
       url: `/api/apps/${appId}/backups/search`,
       body: {
         page,
-        trigger,
       },
     })
   },
@@ -19,4 +17,16 @@ export const buildBackupsEndpoints = API => ({
       body: { name },
     })
   },
+
+  deleteBackup: async ({ appId, backupId }) => {
+    return await API.delete({
+      url: `/api/apps/${appId}/backups/${backupId}`,
+    })
+  },
+
+  updateBackup: async ({ appId, backupId }) => {
+    return await API.patch({
+      url: `/api/apps/${appId}/backups/${backupId}}`,
+    })
+  },
 })