Refactor all backend stores and their usages to use new core API and handle errors

packages/builder/src/builderStore/api.js

@@ -5,7 +5,6 @@ import {
 } from "@budibase/frontend-core"
 import { store } from "./index"
 import { get } from "svelte/store"
-import { notifications } from "@budibase/bbui"
 
 export const API = createAPIClient({
   attachHeaders: headers => {
@@ -25,11 +24,6 @@ export const API = createAPIClient({
       return
     }
 
-    // Show a notification for any errors
-    if (message) {
-      notifications.error(`Error fetching ${url}: ${message}`)
-    }
-
     // Log all errors to console
     console.error(`HTTP ${status} on ${method}:${url}:\n\t${message}`)
 

packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte

@@ -38,9 +38,13 @@
     })
 
   function saveView() {
+    try {
       views.save(view)
-    notifications.success(`View ${view.name} saved.`)
+      notifications.success(`View ${view.name} saved`)
       analytics.captureEvent(Events.VIEW.ADDED_CALCULATE, { field: view.field })
+    } catch (error) {
+      notifications.error("Error saving view")
+    }
   }
 </script>
 

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -122,7 +122,7 @@
       })
       dispatch("updatecolumns")
     } catch (err) {
-      notifications.error(err)
+      notifications.error("Error saving column")
     }
   }
 
@@ -131,6 +131,7 @@
   }
 
   function deleteColumn() {
+    try {
       field.name = deleteColName
       if (field.name === $tables.selected.primaryDisplay) {
         notifications.error("You cannot delete the display column")
@@ -140,9 +141,12 @@
         confirmDeleteDialog.hide()
         hide()
         deletion = false
-    }
         dispatch("updatecolumns")
       }
+    } catch (error) {
+      notifications.error("Error deleting column")
+    }
+  }
 
   function handleTypeChange(event) {
     // remove any extra fields that may not be related to this type

packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte

@@ -12,9 +12,10 @@
 
   function saveView() {
     if (views.includes(name)) {
-      notifications.error(`View exists with name ${name}.`)
+      notifications.error(`View exists with name ${name}`)
       return
     }
+    try {
       viewsStore.save({
         name,
         tableId: $tables.selected._id,
@@ -23,6 +24,9 @@
       notifications.success(`View ${name} created`)
       analytics.captureEvent(Events.VIEW.CREATED, { name })
       $goto(`../../view/${name}`)
+    } catch (error) {
+      notifications.error("Error creating view")
+    }
   }
 </script>
 

packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte

@@ -72,11 +72,15 @@
   $: schema = viewTable && viewTable.schema ? viewTable.schema : {}
 
   function saveView() {
+    try {
       views.save(view)
-    notifications.success(`View ${view.name} saved.`)
+      notifications.success(`View ${view.name} saved`)
       analytics.captureEvent(Events.VIEW.ADDED_FILTER, {
         filters: JSON.stringify(view.filters),
       })
+    } catch (error) {
+      notifcations.error("Error saving view")
+    }
   }
 
   function removeFilter(idx) {

packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte

@@ -19,8 +19,12 @@
       .map(([key]) => key)
 
   function saveView() {
+    try {
       views.save(view)
-    notifications.success(`View ${view.name} saved.`)
+      notifications.success(`View ${view.name} saved`)
+    } catch (error) {
+      notifications.error("Error saving view")
+    }
   }
 </script>
 

packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte

@@ -14,6 +14,7 @@
   export let permissions
 
   async function changePermission(level, role) {
+    try {
       await permissionsStore.save({
         level,
         role,
@@ -22,7 +23,10 @@
 
       // Show updated permissions in UI: REMOVE
       permissions = await permissionsStore.forResource(resourceId)
-    notifications.success("Updated permissions.")
+      notifications.success("Updated permissions")
+    } catch (error) {
+      notifications.error("Error updating permissions")
+    }
   }
 </script>
 

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -10,6 +10,7 @@
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import { customQueryIconText, customQueryIconColor } from "helpers/data/utils"
   import ICONS from "./icons"
+  import { notifications } from "@budibase/bbui"
 
   let openDataSources = []
   $: enrichedDataSources = Array.isArray($datasources.list)
@@ -64,8 +65,12 @@
   }
 
   onMount(() => {
+    try {
       datasources.fetch()
       queries.fetch()
+    } catch (error) {
+      notifications.error("Error fetching datasources and queries")
+    }
   })
 
   const containsActiveEntity = datasource => {

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/CreateExternalTableModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { ModalContent, Body, Input } from "@budibase/bbui"
+  import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
   import { tables, datasources } from "stores/backend"
   import { goto } from "@roxi/routify"
 
@@ -29,10 +29,14 @@
   }
 
   async function saveTable() {
+    try {
       submitted = true
       const table = await tables.save(buildDefaultTable(name, datasource._id))
       await datasources.fetch()
       $goto(`../../table/${table._id}`)
+    } catch (error) {
+      notifications.error("Error saving table")
+    }
   }
 </script>
 

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte

@@ -90,8 +90,8 @@
       await datasources.updateSchema(datasource)
       notifications.success(`Datasource ${name} tables updated successfully.`)
       await tables.fetch()
-    } catch (err) {
+    } catch (error) {
-      notifications.error(`Error updating datasource schema: ${err}`)
+      notifications.error("Error updating datasource schema")
     }
   }
 

packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte

@@ -62,9 +62,13 @@
       externalDatasourceModal.hide()
       internalTableModal.show()
     } else if (integration.type === IntegrationTypes.REST) {
-      // skip modal for rest, create straight away
+      try {
+        // Skip modal for rest, create straight away
         const resp = await createRestDatasource(integration)
         $goto(`./datasource/${resp._id}`)
+      } catch (error) {
+        notifications.error("Error creating datasource")
+      }
     } else {
       externalDatasourceModal.show()
     }

packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte

@@ -20,7 +20,7 @@
       $goto(`./datasource/${resp._id}`)
       notifications.success(`Datasource updated successfully.`)
     } catch (err) {
-      notifications.error(`Error saving datasource: ${err}`)
+      notifications.error("Error saving datasource")
     }
   }
 

packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte

@@ -79,8 +79,8 @@
       })
 
       return true
-    } catch (err) {
+    } catch (error) {
-      notifications.error(`Error importing: ${err}`)
+      notifications.error("Error importing queries")
       return false
     }
   }

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -12,6 +12,7 @@
   let updateDatasourceDialog
 
   async function deleteDatasource() {
+    try {
       let wasSelectedSource = $datasources.selected
       if (!wasSelectedSource && $queries.selected) {
         const queryId = $queries.selected
@@ -22,7 +23,7 @@
       const wasSelectedTable = $tables.selected
       await datasources.delete(datasource)
       notifications.success("Datasource deleted")
-    // navigate to first index page if the source you are deleting is selected
+      // Navigate to first index page if the source you are deleting is selected
       const entities = Object.values(datasource?.entities || {})
       if (
         wasSelectedSource === datasource._id ||
@@ -31,6 +32,9 @@
       ) {
         $goto("./datasource")
       }
+    } catch (error) {
+      notifications.error("Error deleting datasource")
+    }
   }
 </script>
 

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -10,6 +10,7 @@
   let confirmDeleteDialog
 
   async function deleteQuery() {
+    try {
       const wasSelectedQuery = $queries.selected
       // need to calculate this before the query is deleted
       const navigateToDatasource = wasSelectedQuery === query._id
@@ -22,14 +23,17 @@
         $goto(`./datasource/${query.datasourceId}`)
       }
       notifications.success("Query deleted")
+    } catch (error) {
+      notifications.error("Error deleting query")
+    }
   }
 
   async function duplicateQuery() {
     try {
       const newQuery = await queries.duplicate(query)
       onClickQuery(newQuery)
-    } catch (e) {
+    } catch (error) {
-      notifications.error(e.message)
+      notifications.error("Error duplicating query")
     }
   }
 </script>

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -49,8 +49,8 @@
       if (wasSelectedTable && wasSelectedTable._id === table._id) {
         $goto("./table")
       }
-    } catch (err) {
+    } catch (error) {
-      notifications.error(err)
+      notifications.error("Error deleting table")
     }
   }
 

packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte

@@ -27,11 +27,15 @@
   }
 
   async function deleteView() {
+    try {
       const name = view.name
       const id = view.tableId
       await views.delete(name)
       notifications.success("View deleted")
       $goto(`./table/${id}`)
+    } catch (error) {
+      notifications.error("Error deleting view")
+    }
   }
 </script>
 

packages/builder/src/components/integration/AccessLevelSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Label, Select } from "@budibase/bbui"
+  import { Label, notifications, Select } from "@budibase/bbui"
   import { permissions, roles } from "stores/backend"
   import { onMount } from "svelte"
   import { Roles } from "constants/backend"
@@ -13,6 +13,7 @@
   let roleId, loaded
 
   async function updateRole(role, id) {
+    try {
       roleId = role
       const queryId = query?._id || id
       if (roleId && queryId) {
@@ -24,6 +25,9 @@
           })
         }
       }
+    } catch (error) {
+      notifications.error("Error updating role")
+    }
   }
 
   onMount(async () => {

packages/builder/src/components/integration/QueryViewer.svelte

@@ -71,9 +71,9 @@
       }
       data = response.rows
       fields = response.schema
-      notifications.success("Query executed successfully.")
+      notifications.success("Query executed successfully")
-    } catch (err) {
+    } catch (error) {
-      notifications.error(err)
+      notifications.error("Error previewing query")
     }
   }
 
@@ -83,9 +83,8 @@
       saveId = _id
       notifications.success(`Query saved successfully.`)
       $goto(`../${_id}`)
-    } catch (err) {
+    } catch (error) {
-      console.error(err)
+      notifications.error("Error creating query")
-      notifications.error(`Error creating query. ${err.message}`)
     }
   }
 </script>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

@@ -112,14 +112,13 @@
       const { _id } = await queries.save(toSave.datasourceId, toSave)
       saveId = _id
       query = getSelectedQuery()
-      notifications.success(`Request saved successfully.`)
+      notifications.success(`Request saved successfully`)
-
       if (dynamicVariables) {
         datasource.config.dynamicVariables = rebuildVariables(saveId)
         datasource = await datasources.save(datasource)
       }
     } catch (err) {
-      notifications.error(`Error saving query. ${err.message}`)
+      notifications.error(`Error saving query`)
     }
   }
 
@@ -127,14 +126,14 @@
     try {
       response = await queries.preview(buildQuery(query))
       if (response.rows.length === 0) {
-        notifications.info("Request did not return any data.")
+        notifications.info("Request did not return any data")
       } else {
         response.info = response.info || { code: 200 }
         schema = response.schema
-        notifications.success("Request sent successfully.")
+        notifications.success("Request sent successfully")
       }
-    } catch (err) {
+    } catch (error) {
-      notifications.error(err)
+      notifications.error("Error running query")
     }
   }
 
@@ -226,10 +225,24 @@
     )
   }
 
+  const updateFlag = async (flag, value) => {
+    try {
+      await flags.updateFlag(flag, value)
+    } catch (error) {
+      notifications.error("Error updating flag")
+    }
+  }
+
   onMount(async () => {
     query = getSelectedQuery()
-    // clear any unsaved changes to the datasource
+
+    try {
+      // Clear any unsaved changes to the datasource
       await datasources.init()
+    } catch (error) {
+      notifications.error("Error getting datasources")
+    }
+
     datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
     const datasourceUrl = datasource?.config.url
     const qs = query?.fields.queryString
@@ -393,8 +406,7 @@
                     window.open(
                       "https://docs.budibase.com/building-apps/data/transformers"
                     )}
-                  on:change={() =>
+                  on:change={() => updateFlag("queryTransformerBanner", true)}
-                    flags.updateFlag("queryTransformerBanner", true)}
                 >
                   Add a JavaScript function to transform the query result.
                 </Banner>

packages/builder/src/stores/backend/datasources.js

@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
 import { queries, tables, views } from "./"
-import api from "../../builderStore/api"
+import { API } from "api"
 
 export const INITIAL_DATASOURCE_VALUES = {
   list: [],
@@ -13,23 +13,20 @@ export function createDatasourcesStore() {
   const { subscribe, update, set } = store
 
   async function updateDatasource(response) {
-    if (response.status !== 200) {
+    const { datasource, error } = response
-      throw new Error(await response.text())
-    }
-
-    const { datasource, error } = await response.json()
     update(state => {
       const currentIdx = state.list.findIndex(ds => ds._id === datasource._id)
-
       const sources = state.list
-
       if (currentIdx >= 0) {
         sources.splice(currentIdx, 1, datasource)
       } else {
         sources.push(datasource)
       }
-
+      return {
-      return { list: sources, selected: datasource._id, schemaError: error }
+        list: sources,
+        selected: datasource._id,
+        schemaError: error,
+      }
     })
     return datasource
   }
@@ -38,25 +35,25 @@ export function createDatasourcesStore() {
     subscribe,
     update,
     init: async () => {
-      const response = await api.get(`/api/datasources`)
+      const datasources = await API.getDatasources()
-      const json = await response.json()
+      set({
-      set({ list: json, selected: null })
+        list: datasources,
+        selected: null,
+      })
     },
     fetch: async () => {
-      const response = await api.get(`/api/datasources`)
+      const datasources = await API.getDatasources()
-      const json = await response.json()
 
       // Clear selected if it no longer exists, otherwise keep it
       const selected = get(store).selected
       let nextSelected = null
-      if (selected && json.find(source => source._id === selected)) {
+      if (selected && datasources.find(source => source._id === selected)) {
         nextSelected = selected
       }
 
-      update(state => ({ ...state, list: json, selected: nextSelected }))
+      update(state => ({ ...state, list: datasources, selected: nextSelected }))
-      return json
     },
-    select: async datasourceId => {
+    select: datasourceId => {
       update(state => ({ ...state, selected: datasourceId }))
       queries.unselect()
       tables.unselect()
@@ -66,37 +63,33 @@ export function createDatasourcesStore() {
       update(state => ({ ...state, selected: null }))
     },
     updateSchema: async datasource => {
-      let url = `/api/datasources/${datasource._id}/schema`
+      const response = await API.buildDatasourceSchema(datasource?._id)
-
+      return await updateDatasource(response)
-      const response = await api.post(url)
-      return updateDatasource(response)
     },
     save: async (body, fetchSchema = false) => {
       let response
       if (body._id) {
-        response = await api.put(`/api/datasources/${body._id}`, body)
+        response = await API.updateDatasource(body)
       } else {
-        response = await api.post("/api/datasources", {
+        response = await API.createDatasource({
           datasource: body,
           fetchSchema,
         })
       }
-
       return updateDatasource(response)
     },
     delete: async datasource => {
-      const response = await api.delete(
+      await API.deleteDatasource({
-        `/api/datasources/${datasource._id}/${datasource._rev}`
+        datasourceId: datasource?._id,
-      )
+        datasourceRev: datasource?._rev,
+      })
       update(state => {
         const sources = state.list.filter(
           existing => existing._id !== datasource._id
         )
         return { list: sources, selected: null }
       })
-
       await queries.fetch()
-      return response
     },
     removeSchemaError: () => {
       update(state => {

packages/builder/src/stores/backend/flags.js

@@ -1,37 +1,27 @@
 import { writable } from "svelte/store"
-import api from "builderStore/api"
+import { API } from "api"
 
 export function createFlagsStore() {
   const { subscribe, set } = writable({})
 
-  return {
+  const actions = {
-    subscribe,
     fetch: async () => {
-      const { doc, response } = await getFlags()
+      const flags = await API.getFlags()
-      set(doc)
+      set(flags)
-      return response
     },
     updateFlag: async (flag, value) => {
-      const response = await api.post("/api/users/flags", {
+      await API.updateFlag({
         flag,
         value,
       })
-      if (response.status === 200) {
+      await actions.fetch()
-        const { doc } = await getFlags()
-        set(doc)
-      }
-      return response
     },
   }
-}
 
-async function getFlags() {
+  return {
-  const response = await api.get("/api/users/flags")
+    subscribe,
-  let doc = {}
+    ...actions,
-  if (response.status === 200) {
-    doc = await response.json()
   }
-  return { doc, response }
 }
 
 export const flags = createFlagsStore()

packages/builder/src/stores/backend/integrations.js

@@ -7,12 +7,8 @@ const createIntegrationsStore = () => {
   return {
     ...store,
     init: async () => {
-      try {
       const integrations = await API.getIntegrations()
       store.set(integrations)
-      } catch (error) {
-        store.set(null)
-      }
     },
   }
 }

packages/builder/src/stores/backend/permissions.js

@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import api from "builderStore/api"
+import { API } from "api"
 
 export function createPermissionStore() {
   const { subscribe } = writable([])
@@ -7,14 +7,14 @@ export function createPermissionStore() {
   return {
     subscribe,
     save: async ({ level, role, resource }) => {
-      const response = await api.post(
+      return await API.updatePermissionForResource({
-        `/api/permission/${role}/${resource}/${level}`
+        resourceId: resource,
-      )
+        roleId: role,
-      return await response.json()
+        level,
+      })
     },
     forResource: async resourceId => {
-      const response = await api.get(`/api/permission/${resourceId}`)
+      return await API.getPermissionForResource(resourceId)
-      return await response.json()
     },
   }
 }

packages/builder/src/stores/backend/queries.js

@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
 import { datasources, integrations, tables, views } from "./"
-import api from "builderStore/api"
+import { API } from "api"
 import { duplicateName } from "../../helpers/duplicate"
 
 const sortQueries = queryList => {
@@ -15,23 +15,26 @@ export function createQueriesStore() {
 
   const actions = {
     init: async () => {
-      const response = await api.get(`/api/queries`)
+      const queries = await API.getQueries()
-      const json = await response.json()
+      set({
-      set({ list: json, selected: null })
+        list: queries,
+        selected: null,
+      })
     },
     fetch: async () => {
-      const response = await api.get(`/api/queries`)
+      const queries = await API.getQueries()
-      const json = await response.json()
+      sortQueries(queries)
-      sortQueries(json)
+      update(state => ({
-      update(state => ({ ...state, list: json }))
+        ...state,
-      return json
+        list: queries,
+      }))
     },
     save: async (datasourceId, query) => {
       const _integrations = get(integrations)
       const dataSource = get(datasources).list.filter(
         ds => ds._id === datasourceId
       )
-      // check if readable attribute is found
+      // Check if readable attribute is found
       if (dataSource.length !== 0) {
         const integration = _integrations[dataSource[0].source]
         const readable = integration.query[query.queryVerb].readable
@@ -40,34 +43,28 @@ export function createQueriesStore() {
         }
       }
       query.datasourceId = datasourceId
-      const response = await api.post(`/api/queries`, query)
+      const savedQuery = await API.saveQuery(query)
-      if (response.status !== 200) {
-        throw new Error("Failed saving query.")
-      }
-      const json = await response.json()
       update(state => {
-        const currentIdx = state.list.findIndex(query => query._id === json._id)
+        const idx = state.list.findIndex(query => query._id === savedQuery._id)
-
         const queries = state.list
-
+        if (idx >= 0) {
-        if (currentIdx >= 0) {
+          queries.splice(idx, 1, savedQuery)
-          queries.splice(currentIdx, 1, json)
         } else {
-          queries.push(json)
+          queries.push(savedQuery)
         }
         sortQueries(queries)
-        return { list: queries, selected: json._id }
+        return {
-      })
+          list: queries,
-      return json
+          selected: savedQuery._id,
-    },
-    import: async body => {
-      const response = await api.post(`/api/queries/import`, body)
-
-      if (response.status !== 200) {
-        throw new Error(response.message)
         }
-
+      })
-      return response.json()
+      return savedQuery
+    },
+    import: async (data, datasourceId) => {
+      return await API.importQueries({
+        datasourceId,
+        data,
+      })
     },
     select: query => {
       update(state => ({ ...state, selected: query._id }))
@@ -79,48 +76,37 @@ export function createQueriesStore() {
       update(state => ({ ...state, selected: null }))
     },
     preview: async query => {
-      const response = await api.post("/api/queries/preview", {
+      const parameters = query.parameters.reduce(
-        fields: query.fields,
-        queryVerb: query.queryVerb,
-        transformer: query.transformer,
-        parameters: query.parameters.reduce(
         (acc, next) => ({
           ...acc,
           [next.name]: next.default,
         }),
         {}
-        ),
+      )
-        datasourceId: query.datasourceId,
+      const result = await API.previewQuery({
-        queryId: query._id || undefined,
+        ...query,
+        parameters,
       })
-
-      if (response.status !== 200) {
-        const error = await response.text()
-        throw `Query error: ${error}`
-      }
-
-      const json = await response.json()
       // Assume all the fields are strings and create a basic schema from the
       // unique fields returned by the server
       const schema = {}
-      for (let field of json.schemaFields) {
+      for (let field of result.schemaFields) {
         schema[field] = "string"
       }
-      return { ...json, schema, rows: json.rows || [] }
+      return { ...result, schema, rows: result.rows || [] }
     },
     delete: async query => {
-      const response = await api.delete(
+      await API.deleteQuery({
-        `/api/queries/${query._id}/${query._rev}`
+        queryId: query?._id,
-      )
+        queryRev: query?._rev,
+      })
       update(state => {
         state.list = state.list.filter(existing => existing._id !== query._id)
         if (state.selected === query._id) {
           state.selected = null
         }
-
         return state
       })
-      return response
     },
     duplicate: async query => {
       let list = get(store).list

packages/builder/src/stores/backend/roles.js

@@ -1,30 +1,32 @@
 import { writable } from "svelte/store"
-import api from "builderStore/api"
+import { API } from "api"
 
 export function createRolesStore() {
   const { subscribe, update, set } = writable([])
 
-  return {
+  const actions = {
-    subscribe,
     fetch: async () => {
-      set(await getRoles())
+      const roles = await API.getRoles()
+      set(roles)
     },
     delete: async role => {
-      const response = await api.delete(`/api/roles/${role._id}/${role._rev}`)
+      await API.deleteRole({
+        roleId: role?._id,
+        roleRev: role?._rev,
+      })
       update(state => state.filter(existing => existing._id !== role._id))
-      return response
     },
     save: async role => {
-      const response = await api.post("/api/roles", role)
+      const savedRole = await API.saveRole(role)
-      set(await getRoles())
+      await actions.fetch()
-      return response
+      return savedRole
     },
   }
+
+  return {
+    subscribe,
+    ...actions,
+  }
 }
 
-async function getRoles() {
-  const response = await api.get("/api/roles")
-  return await response.json()
-}
-
 export const roles = createRolesStore()

packages/builder/src/stores/backend/tables.js

@@ -1,7 +1,7 @@
 import { get, writable } from "svelte/store"
 import { datasources, queries, views } from "./"
 import { cloneDeep } from "lodash/fp"
-import api from "builderStore/api"
+import { API } from "api"
 import { SWITCHABLE_TYPES } from "../../constants/backend"
 
 export function createTablesStore() {
@@ -9,10 +9,11 @@ export function createTablesStore() {
   const { subscribe, update, set } = store
 
   async function fetch() {
-    const tablesResponse = await api.get(`/api/tables`)
+    const tables = await API.getTables()
-    const tables = await tablesResponse.json()
+    update(state => ({
-    update(state => ({ ...state, list: tables }))
+      ...state,
-    return tables
+      list: tables,
+    }))
   }
 
   async function select(table) {
@@ -38,16 +39,16 @@ export function createTablesStore() {
     const oldTable = get(store).list.filter(t => t._id === table._id)[0]
 
     const fieldNames = []
-    // update any renamed schema keys to reflect their names
+    // Update any renamed schema keys to reflect their names
     for (let key of Object.keys(updatedTable.schema)) {
-      // if field name has been seen before remove it
+      // If field name has been seen before remove it
       if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
         delete updatedTable.schema[key]
         continue
       }
       const field = updatedTable.schema[key]
       const oldField = oldTable?.schema[key]
-      // if the type has changed then revert back to the old field
+      // If the type has changed then revert back to the old field
       if (
         oldField != null &&
         oldField?.type !== field.type &&
@@ -55,21 +56,17 @@ export function createTablesStore() {
       ) {
         updatedTable.schema[key] = oldField
       }
-      // field has been renamed
+      // Field has been renamed
       if (field.name && field.name !== key) {
         updatedTable.schema[field.name] = field
         updatedTable._rename = { old: key, updated: field.name }
         delete updatedTable.schema[key]
       }
-      // finally record this field has been used
+      // Finally record this field has been used
       fieldNames.push(key.toLowerCase())
     }
 
-    const response = await api.post(`/api/tables`, updatedTable)
+    const savedTable = await API.saveTable(updatedTable)
-    if (response.status !== 200) {
-      throw (await response.json()).message
-    }
-    const savedTable = await response.json()
     await fetch()
     if (table.type === "external") {
       await datasources.fetch()
@@ -91,21 +88,18 @@ export function createTablesStore() {
     },
     save,
     init: async () => {
-      const response = await api.get("/api/tables")
+      const tables = await API.getTables()
-      const json = await response.json()
       set({
-        list: json,
+        list: tables,
         selected: {},
         draft: {},
       })
     },
     delete: async table => {
-      const response = await api.delete(
+      await API.deleteTable({
-        `/api/tables/${table._id}/${table._rev}`
+        tableId: table?._id,
-      )
+        tableRev: table?._rev,
-      if (response.status !== 200) {
+      })
-        throw (await response.json()).message
-      }
       update(state => ({
         ...state,
         list: state.list.filter(existing => existing._id !== table._id),
@@ -156,12 +150,16 @@ export function createTablesStore() {
         await promise
       }
     },
-    deleteField: field => {
+    deleteField: async field => {
+      let promise
       update(state => {
         delete state.draft.schema[field.name]
-        save(state.draft)
+        promise = save(state.draft)
         return state
       })
+      if (promise) {
+        await promise
+      }
     },
   }
 }

packages/builder/src/stores/backend/views.js

@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
 import { tables, datasources, queries } from "./"
-import api from "builderStore/api"
+import { API } from "api"
 
 export function createViewsStore() {
   const { subscribe, update } = writable({
@@ -11,7 +11,7 @@ export function createViewsStore() {
   return {
     subscribe,
     update,
-    select: async view => {
+    select: view => {
       update(state => ({
         ...state,
         selected: view,
@@ -27,16 +27,14 @@ export function createViewsStore() {
       }))
     },
     delete: async view => {
-      await api.delete(`/api/views/${view}`)
+      await API.deleteView(view)
       await tables.fetch()
     },
     save: async view => {
-      const response = await api.post(`/api/views`, view)
+      const savedView = await API.saveView(view)
-      const json = await response.json()
-
       const viewMeta = {
         name: view.name,
-        ...json,
+        ...savedView,
       }
 
       const viewTable = get(tables).list.find(

packages/builder/src/stores/portal/email.js

@@ -1,5 +1,6 @@
 import { writable } from "svelte/store"
-import api from "builderStore/api"
+import { API } from "api"
+import { notifications } from "@budibase/bbui"
 
 export function createEmailStore() {
   const store = writable({})
@@ -8,34 +9,35 @@ export function createEmailStore() {
     subscribe: store.subscribe,
     templates: {
       fetch: async () => {
-        // fetch the email template definitions
+        try {
-        const response = await api.get(`/api/global/template/definitions`)
+          // fetch the email template definitions and templates
-        const definitions = await response.json()
+          const definitions = await API.getEmailTemplateDefinitions()
-
+          const templates = await API.getEmailTemplates()
-        // fetch the email templates themselves
-        const templatesResponse = await api.get(`/api/global/template/email`)
-        const templates = await templatesResponse.json()
-
           store.set({
             definitions,
             templates,
           })
+        } catch (error) {
+          notifications.error("Error fetching email templates")
+          store.set({})
+        }
       },
       save: async template => {
+        try {
           // Save your template config
-        const response = await api.post(`/api/global/template`, template)
+          const savedTemplate = await API.saveEmailTemplate(template)
-        const json = await response.json()
+          template._rev = savedTemplate._rev
-        if (response.status !== 200) throw new Error(json.message)
+          template._id = savedTemplate._id
-        template._rev = json._rev
-        template._id = json._id
-
           store.update(state => {
             const currentIdx = state.templates.findIndex(
-            template => template.purpose === json.purpose
+              template => template.purpose === savedTemplate.purpose
             )
             state.templates.splice(currentIdx, 1, template)
             return state
           })
+        } catch (error) {
+          notifications.error("Error saving email template")
+        }
       },
     },
   }

packages/frontend-core/src/api/datasources.js

@@ -0,0 +1,57 @@
+export const buildDatasourceEndpoints = API => ({
+  /**
+   * Gets a list of datasources.
+   */
+  getDatasources: async () => {
+    return await API.get({
+      url: "/api/datasources",
+    })
+  },
+
+  /**
+   * Prompts the server to build the schema for a datasource.
+   * @param datasourceId the datasource ID to build the schema for
+   */
+  buildDatasourceSchema: async datasourceId => {
+    return await API.post({
+      url: `/api/datasources/${datasourceId}/schema`,
+    })
+  },
+
+  /**
+   * Creates a datasource
+   * @param datasource the datasource to create
+   * @param fetchSchema whether to fetch the schema or not
+   */
+  createDatasource: async ({ datasource, fetchSchema }) => {
+    return await API.post({
+      url: "/api/datasources",
+      body: {
+        datasource,
+        fetchSchema,
+      },
+    })
+  },
+
+  /**
+   * Updates a datasource
+   * @param datasource the datasource to update
+   */
+  updateDatasource: async datasource => {
+    return await API.put({
+      url: `/api/datasources/${datasource._id}`,
+      body: datasource,
+    })
+  },
+
+  /**
+   * Deletes a datasource.
+   * @param datasourceId the ID of the ddtasource to delete
+   * @param datasourceRev the rev of the datasource to delete
+   */
+  deleteDatasource: async ({ datasourceId, datasourceRev }) => {
+    return await API.delete({
+      url: `/api/datasources/${datasourceId}/${datasourceRev}`,
+    })
+  },
+})

packages/frontend-core/src/api/flags.js

@@ -0,0 +1,25 @@
+export const buildFlagEndpoints = API => ({
+  /**
+   * Gets the current user flags object.
+   */
+  getFlags: async () => {
+    return await API.get({
+      url: "/api/users/flags",
+    })
+  },
+
+  /**
+   * Updates a flag for the current user.
+   * @param flag the flag to update
+   * @param value the value to set the flag to
+   */
+  updateFlag: async ({ flag, value }) => {
+    return await API.post({
+      url: "/api/users/flags",
+      body: {
+        flag,
+        value,
+      },
+    })
+  },
+})

packages/frontend-core/src/api/index.js

@@ -4,13 +4,18 @@ import { buildAppEndpoints } from "./app"
 import { buildAttachmentEndpoints } from "./attachments"
 import { buildAuthEndpoints } from "./auth"
 import { buildAutomationEndpoints } from "./automations"
+import { buildDatasourceEndpoints } from "./datasources"
+import { buildFlagEndpoints } from "./flags"
 import { buildHostingEndpoints } from "./hosting"
+import { buildPermissionsEndpoints } from "./permissions"
 import { buildQueryEndpoints } from "./queries"
 import { buildRelationshipEndpoints } from "./relationships"
+import { buildRoleEndpoints } from "./roles"
 import { buildRouteEndpoints } from "./routes"
 import { buildRowEndpoints } from "./rows"
 import { buildScreenEndpoints } from "./screens"
 import { buildTableEndpoints } from "./tables"
+import { buildTemplateEndpoints } from "./templates"
 import { buildViewEndpoints } from "./views"
 
 const defaultAPIClientConfig = {
@@ -184,13 +189,18 @@ export const createAPIClient = config => {
     ...buildAttachmentEndpoints(API),
     ...buildAuthEndpoints(API),
     ...buildAutomationEndpoints(API),
+    ...buildDatasourceEndpoints(API),
+    ...buildFlagEndpoints(API),
     ...buildHostingEndpoints(API),
+    ...buildPermissionsEndpoints(API),
     ...buildQueryEndpoints(API),
     ...buildRelationshipEndpoints(API),
+    ...buildRoleEndpoints(API),
     ...buildRouteEndpoints(API),
     ...buildRowEndpoints(API),
     ...buildScreenEndpoints(API),
     ...buildTableEndpoints(API),
+    ...buildTemplateEndpoints(API),
     ...buildViewEndpoints(API),
   }
 

packages/frontend-core/src/api/permissions.js

@@ -0,0 +1,24 @@
+export const buildPermissionsEndpoints = API => ({
+  /**
+   * Gets the permission required to access a specific resource
+   * @param resourceId the resource ID to check
+   */
+  getPermissionForResource: async resourceId => {
+    return await API.get({
+      url: `/api/permission/${resourceId}`,
+    })
+  },
+
+  /**
+   * Updates the permissions for a certain resource
+   * @param resourceId the ID of the resource to update
+   * @param roleId the ID of the role to update the permissions of
+   * @param level the level to assign the role for this resource
+   * @return {Promise<*>}
+   */
+  updatePermissionForResource: async ({ resourceId, roleId, level }) => {
+    return await API.post({
+      url: `/api/permission/${roleId}/${resourceId}/${level}`,
+    })
+  },
+})

packages/frontend-core/src/api/queries.js

@@ -1,6 +1,9 @@
 export const buildQueryEndpoints = API => ({
   /**
    * Executes a query against an external data connector.
+   * @param queryId the ID of the query to execute
+   * @param pagination pagination info for the query
+   * @param parameters parameters for the query
    */
   executeQuery: async ({ queryId, pagination, parameters }) => {
     return await API.post({
@@ -14,6 +17,7 @@ export const buildQueryEndpoints = API => ({
 
   /**
    * Fetches the definition of an external query.
+   * @param queryId the ID of thr query to fetch the definition of
    */
   fetchQueryDefinition: async queryId => {
     return await API.get({
@@ -21,4 +25,61 @@ export const buildQueryEndpoints = API => ({
       cache: true,
     })
   },
+
+  /**
+   * Gets a list of queries
+   */
+  getQueries: async () => {
+    return await API.get({
+      url: "/api/queries",
+    })
+  },
+
+  /**
+   * Saves a query.
+   * @param query the query to save
+   */
+  saveQuery: async query => {
+    return await API.post({
+      url: "/api/queries",
+      body: query,
+    })
+  },
+
+  /**
+   * Deletes a query
+   * @param queryId the ID of the query to delete
+   * @param queryRev the rev of the query to delete
+   */
+  deleteQuery: async ({ queryId, queryRev }) => {
+    return await API.delete({
+      url: `/api/queries/${queryId}/${queryRev}`,
+    })
+  },
+
+  /**
+   * Imports a set of queries into a certain datasource
+   * @param datasourceId the datasource ID to import queries into
+   * @param data the data string of the content to import
+   */
+  importQueries: async ({ datasourceId, data }) => {
+    return await API.post({
+      url: "/api/queries/import",
+      body: {
+        datasourceId,
+        data,
+      },
+    })
+  },
+
+  /**
+   * Runs a query with test parameters to see the result.
+   * @param query the query to run
+   */
+  previewQuery: async query => {
+    return await API.post({
+      url: "/api/queries/preview",
+      body: query,
+    })
+  },
 })

packages/frontend-core/src/api/roles.js

@@ -0,0 +1,32 @@
+export const buildRoleEndpoints = API => ({
+  /**
+   * Deletes a role.
+   * @param roleId the ID of the role to delete
+   * @param roleRev the rev of the role to delete
+   */
+  deleteRole: async ({ roleId, roleRev }) => {
+    return await API.delete({
+      url: `/api/roles/${roleId}/${roleRev}`,
+    })
+  },
+
+  /**
+   * Saves a role.
+   * @param role the role to save
+   */
+  saveRole: async role => {
+    return await API.post({
+      url: "/api/roles",
+      body: role,
+    })
+  },
+
+  /**
+   * Gets a list of roles.
+   */
+  getRoles: async () => {
+    return await API.get({
+      url: "/api/roles",
+    })
+  },
+})

packages/frontend-core/src/api/tables.js

@@ -79,4 +79,35 @@ export const buildTableEndpoints = API => ({
       },
     })
   },
+
+  /**
+   * Gets a list o tables.
+   */
+  getTables: async () => {
+    return await API.get({
+      url: "/api/tables",
+    })
+  },
+
+  /**
+   * Saves a table.
+   * @param table the table to save
+   */
+  saveTable: async table => {
+    return await API.post({
+      url: "/api/tables",
+      body: table,
+    })
+  },
+
+  /**
+   * Deletes a table.
+   * @param tableId the ID of the table to delete
+   * @param tableRev the rev of the table to delete
+   */
+  deleteTable: async ({ tableId, tableRev }) => {
+    return await API.delete({
+      url: `/api/tables/${tableId}/${tableRev}`,
+    })
+  },
 })

packages/frontend-core/src/api/templates.js

@@ -0,0 +1,28 @@
+export const buildTemplateEndpoints = API => ({
+  /**
+   * Gets the list of email template definitions.
+   */
+  getEmailTemplateDefinitions: async () => {
+    return await API.get({ url: "/api/global/template/definitions" })
+  },
+
+  /**
+   * Gets the list of email templates.
+   */
+  getEmailTemplates: async () => {
+    return await API.get({ url: "/api/global/template/email" })
+  },
+
+  /**
+   * Saves an email template.
+   * @param template the template to save
+   */
+  saveEmailTemplate: async template => {
+    return await API.post({
+      url: "/api/global/template",
+      body: {
+        template,
+      },
+    })
+  },
+})

packages/frontend-core/src/api/views.js

@@ -1,6 +1,10 @@
 export const buildViewEndpoints = API => ({
   /**
-   * Fetches all rows in a view.
+   * Fetches all rows in a view
+   * @param name the name of the view
+   * @param field the field to perform the calculation on
+   * @param groupBy the field to group by
+   * @param calculation the calculation to perform
    */
   fetchViewData: async ({ name, field, groupBy, calculation }) => {
     const params = new URLSearchParams()
@@ -9,7 +13,7 @@ export const buildViewEndpoints = API => ({
       params.set("calculation", calculation)
     }
     if (groupBy) {
-      params.set("group", groupBy ? "true" : "false")
+      params.set("group", groupBy)
     }
     const QUERY_VIEW_URL = field
       ? `/api/views/${name}?${params}`
@@ -31,4 +35,25 @@ export const buildViewEndpoints = API => ({
       },
     })
   },
+
+  /**
+   * Saves a view.
+   * @param view the view to save
+   */
+  saveView: async view => {
+    return await API.post({
+      url: "/api/views",
+      body: view,
+    })
+  },
+
+  /**
+   * Deletes a view.
+   * @param viewName the name of the view to delete
+   */
+  deleteView: async viewName => {
+    return await API.delete({
+      url: `/api/views/${viewName}`,
+    })
+  },
 })