Update all API usages in builder components directory

packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte

@@ -1,7 +1,8 @@
 <script>
-  import api from "builderStore/api"
+  import { API } from "api"
   import Table from "./Table.svelte"
   import { tables } from "stores/backend"
+  import { notifications } from "@budibase/bbui"
 
   export let tableId
   export let rowId
@@ -27,9 +28,15 @@
   }
 
   async function fetchData(tableId, rowId) {
-    const QUERY_VIEW_URL = `/api/${tableId}/${rowId}/enrich`
-    const response = await api.get(QUERY_VIEW_URL)
-    row = await response.json()
+    try {
+      row = await API.fetchRelationshipData({
+        tableId,
+        rowId,
+      })
+    } catch (error) {
+      row = null
+      notifications.error("Error fetching relationship data")
+    }
   }
 </script>
 

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -2,7 +2,7 @@
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
   import { Table, Modal, Heading, notifications, Layout } from "@budibase/bbui"
-  import api from "builderStore/api"
+  import { API } "api"
   import Spinner from "components/common/Spinner.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
   import CreateEditRow from "./modals/CreateEditRow.svelte"
@@ -88,12 +88,17 @@
   }
 
   const deleteRows = async () => {
-    await api.delete(`/api/${tableId}/rows`, {
-      rows: selectedRows,
+    try {
+      await API.deleteRows({
+        tableId,
+        rows: selectedRows
       })
       data = data.filter(row => !selectedRows.includes(row))
       notifications.success(`Successfully deleted ${selectedRows.length} rows`)
       selectedRows = []
+    } catch (error) {
+      notifications.error("Error deleting rows")
+    }
   }
 
   const editRow = row => {

packages/builder/src/components/backend/DataTable/ViewDataTable.svelte

@@ -1,5 +1,5 @@
 <script>
-  import api from "builderStore/api"
+  import { API } from "api"
   import { tables } from "stores/backend"
 
   import Table from "./Table.svelte"
@@ -9,6 +9,7 @@
   import ExportButton from "./buttons/ExportButton.svelte"
   import ManageAccessButton from "./buttons/ManageAccessButton.svelte"
   import HideAutocolumnButton from "./buttons/HideAutocolumnButton.svelte"
+  import { notifications } from "@budibase/bbui"
 
   export let view = {}
 
@@ -20,33 +21,31 @@
   $: name = view.name
 
   // Fetch rows for specified view
-  $: {
-    loading = true
-    fetchViewData(name, view.field, view.groupBy, view.calculation)
-  }
+  $: fetchViewData(name, view.field, view.groupBy, view.calculation)
 
   async function fetchViewData(name, field, groupBy, calculation) {
+    loading = true
     const _tables = $tables.list
     const allTableViews = _tables.map(table => table.views)
     const thisView = allTableViews.filter(
       views => views != null && views[name] != null
     )[0]
 
-    // don't fetch view data if the view no longer exists
+    // Don't fetch view data if the view no longer exists
     if (!thisView) {
+      loading = false
       return
     }
-    const params = new URLSearchParams()
-    if (calculation) {
-      params.set("field", field)
-      params.set("calculation", calculation)
+    try {
+      data = await API.fetchViewData({
+        name,
+        calculation,
+        field,
+        groupBy,
+      })
+    } catch (error) {
+      notifications.error("Error fetching view data")
     }
-    if (groupBy) {
-      params.set("group", groupBy)
-    }
-    const QUERY_VIEW_URL = `/api/views/${name}?${params}`
-    const response = await api.get(QUERY_VIEW_URL)
-    data = await response.json()
     loading = false
   }
 </script>

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

@@ -1,7 +1,7 @@
 <script>
   import { ModalContent, Select, Input, Button } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import api from "builderStore/api"
+  import { API } from "api"
   import { notifications } from "@budibase/bbui"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
   import { roles } from "stores/backend"
@@ -24,8 +24,12 @@
     !builtInRoles.includes(selectedRole.name)
 
   const fetchBasePermissions = async () => {
-    const permissionsResponse = await api.get("/api/permission/builtin")
-    basePermissions = await permissionsResponse.json()
+    try {
+      basePermissions = await API.getBasePermissions()
+    } catch (error) {
+      notifications.error("Error fetching base permission options")
+      basePermissions = []
+    }
   }
 
   // Changes the selected role
@@ -68,23 +72,23 @@
     }
 
     // Save/create the role
-    const response = await roles.save(selectedRole)
-    if (response.status === 200) {
-      notifications.success("Role saved successfully.")
-    } else {
-      notifications.error("Error saving role.")
+    try {
+      await roles.save(selectedRole)
+      notifications.success("Role saved successfully")
+    } catch (error) {
+      notifications.error("Error saving role")
       return false
     }
   }
 
   // Deletes the selected role
   const deleteRole = async () => {
-    const response = await roles.delete(selectedRole)
-    if (response.status === 200) {
+    try {
+      await roles.delete(selectedRole)
       changeRole()
-      notifications.success("Role deleted successfully.")
-    } else {
-      notifications.error("Error deleting role.")
+      notifications.success("Role deleted successfully")
+    } catch (error) {
+      notifications.error("Error deleting role")
     }
   }
 

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

@@ -1,7 +1,7 @@
 <script>
   import { Select, ModalContent, notifications } from "@budibase/bbui"
   import download from "downloadjs"
-  import { get } from "builderStore/api"
+  import { API } from "api"
 
   const FORMATS = [
     {
@@ -19,17 +19,14 @@
   let exportFormat = FORMATS[0].key
 
   async function exportView() {
-    const uri = encodeURIComponent(view)
-    const response = await get(
-      `/api/views/export?view=${uri}&format=${exportFormat}`
-    )
-    if (response.status === 200) {
-      const data = await response.text()
+    try {
+      const data = await API.exportView({
+        viewName: view,
+        format: exportFormat,
+      })
       download(data, `export.${exportFormat}`)
-    } else {
-      notifications.error(
-        `Unable to export ${exportFormat.toUpperCase()} data.`
-      )
+    } catch (error) {
+      notifications.error(`Unable to export ${exportFormat.toUpperCase()} data`)
     }
   }
 </script>

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

@@ -1,7 +1,7 @@
 <script>
   import { ModalContent, Label, notifications, Body } from "@budibase/bbui"
   import TableDataImport from "../../TableNavigator/TableDataImport.svelte"
-  import api from "builderStore/api"
+  import { API } from "api"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -12,15 +12,17 @@
   $: valid = dataImport?.csvString != null && dataImport?.valid
 
   async function importData() {
-    const response = await api.post(`/api/tables/${tableId}/import`, {
-      dataImport,
+    try {
+      await API.importTableData({
+        tableId,
+        data: dataImport,
       })
-    if (response.status !== 200) {
-      const error = await response.text()
-      notifications.error(`Unable to import data - ${error}`)
-    } else {
-      notifications.success("Rows successfully imported.")
+      notifications.success("Rows successfully imported")
+    } catch (error) {
+      notifications.error("Unable to import data")
     }
+
+    // Always refresh rows just to be sure
     dispatch("updaterows")
   }
 </script>

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

@@ -1,7 +1,7 @@
 <script>
-  import { Body } from "@budibase/bbui"
+  import { Body, notifications } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import api from "builderStore/api"
+  import { API } from "api"
   import ICONS from "../icons"
 
   export let integration = {}
@@ -9,14 +9,17 @@
   const INTERNAL = "BUDIBASE"
 
   async function fetchIntegrations() {
-    const response = await api.get("/api/integrations")
-    const json = await response.json()
-
+    let otherIntegrations
+    try {
+      otherIntegrations = await API.getIntegrations()
+    } catch (error) {
+      otherIntegrations = {}
+      notifications.error("Error getting integrations")
+    }
     integrations = {
       [INTERNAL]: { datasource: {}, name: "INTERNAL/CSV" },
-      ...json,
+      ...otherIntegrations,
     }
-    return json
   }
 
   function selectIntegration(integrationType) {

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

@@ -1,8 +1,15 @@
 <script>
-  import { ModalContent, Modal, Body, Layout, Detail } from "@budibase/bbui"
+  import {
+    ModalContent,
+    Modal,
+    Body,
+    Layout,
+    Detail,
+    notifications,
+  } from "@budibase/bbui"
   import { onMount } from "svelte"
   import ICONS from "../icons"
-  import api from "builderStore/api"
+  import { API } from "api"
   import { IntegrationNames, IntegrationTypes } from "constants/backend"
   import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
   import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
@@ -11,7 +18,7 @@
   import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte"
 
   export let modal
-  let integrations = []
+  let integrations = {}
   let integration = {}
   let internalTableModal
   let externalDatasourceModal
@@ -64,13 +71,20 @@
   }
 
   async function fetchIntegrations() {
-    const response = await api.get("/api/integrations")
-    const json = await response.json()
-    integrations = {
+    let newIntegrations = {
       [IntegrationTypes.INTERNAL]: { datasource: {}, name: "INTERNAL/CSV" },
-      ...json,
     }
-    return json
+    try {
+      const integrationList = await API.getIntegrations()
+      newIntegrations = {
+        ...newIntegrations,
+        ...integrationList,
+      }
+      return newIntegrations
+    } catch (error) {
+      notifications.error("Error fetching integrations")
+    }
+    integrations = newIntegrations
   }
 </script>
 

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Select, InlineAlert, notifications } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import api from "builderStore/api"
+  import { API } from "api"
 
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
@@ -50,14 +50,13 @@
   }
 
   async function validateCSV() {
-    const response = await api.post("/api/tables/csv/validate", {
+    try {
+      const parseResult = await API.validateTableCSV({
         csvString,
         schema: schema || {},
         tableId: existingTableId,
       })
-
-    const parseResult = await response.json()
-    schema = parseResult && parseResult.schema
+      schema = parseResult?.schema
       fields = Object.keys(schema || {}).filter(
         key => schema[key].type !== "omit"
       )
@@ -67,11 +66,10 @@
         primaryDisplay = fields[0]
       }
 
-    if (response.status !== 200) {
-      notifications.error("CSV Invalid, please try another CSV file")
-      return []
-    }
       hasValidated = true
+    } catch (error) {
+      notifications.error("CSV Invalid, please try another CSV file")
+    }
   }
 
   async function handleFile(evt) {

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

@@ -27,4 +27,13 @@ export const buildBuilderEndpoints = API => ({
       url: "/api/dev/version",
     })
   },
+
+  /**
+   * Gets the base permissions for roles.
+   */
+  getBasePermissions: async () => {
+    return await API.get({
+      url: "/api/permission/builtin",
+    })
+  },
 })

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

@@ -77,6 +77,9 @@ export const createAPIClient = config => {
     json = true,
     external = false,
   }) => {
+    // Ensure we don't do JSON processing if sending a GET request
+    json = json && method !== "GET"
+
     // Build headers
     let headers = { Accept: "application/json" }
     if (!external) {
@@ -115,7 +118,11 @@ export const createAPIClient = config => {
     // Handle response
     if (response.status >= 200 && response.status < 400) {
       try {
+        if (config?.parseResponse) {
+          return await config.parseResponse(response)
+        } else {
           return await response.json()
+        }
       } catch (error) {
         return null
       }

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

@@ -3,10 +3,14 @@ export const buildRelationshipEndpoints = API => ({
    * Fetches related rows for a certain field of a certain row.
    */
   fetchRelationshipData: async ({ tableId, rowId, fieldName }) => {
-    if (!tableId || !rowId || !fieldName) {
+    if (!tableId || !rowId) {
       return []
     }
     const response = await API.get({ url: `/api/${tableId}/${rowId}/enrich` })
+    if (!fieldName) {
+      return response || []
+    } else {
       return response[fieldName] || []
+    }
   },
 })

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

@@ -40,4 +40,18 @@ export const buildRowEndpoints = API => ({
       },
     })
   },
+
+  /**
+   * Deletes multiple rows from a table.
+   * @param tableId the table ID to delete the rows from
+   * @param rows the array of rows to delete
+   */
+  deleteRows: async ({ tableId, rows }) => {
+    return await API.delete({
+      url: `/api/${tableId}/rows`,
+      body: {
+        rows,
+      },
+    })
+  },
 })

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

@@ -48,4 +48,35 @@ export const buildTableEndpoints = API => ({
       },
     })
   },
+
+  /**
+   * Imports data into an existing table
+   * @param tableId the table ID to import to
+   * @param data the data import object
+   */
+  importTableData: async ({ tableId, data }) => {
+    return await API.post({
+      url: `/api/tables/${tableId}/import`,
+      body: {
+        dataImport: data,
+      },
+    })
+  },
+
+  /**
+   * Validates a candidate CSV to be imported for a certain table.
+   * @param tableId the table ID to import to
+   * @param csvString the CSV contents as a string
+   * @param schema the proposed schema
+   */
+  validateTableCSV: async ({ tableId, csvString, schema }) => {
+    return await API.post({
+      url: "/api/tables/csv/validate",
+      body: {
+        csvString,
+        schema,
+        tableId,
+      },
+    })
+  },
 })

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

@@ -16,4 +16,19 @@ export const buildViewEndpoints = API => ({
       : `/api/views/${name}`
     return await API.get({ url: QUERY_VIEW_URL })
   },
+
+  /**
+   * Exports a view for download
+   * @param viewName the view to export
+   * @param format the format to download
+   */
+  exportView: async ({ viewName, format }) => {
+    const safeViewName = encodeURIComponent(viewName)
+    return await API.get({
+      url: `/api/views/export?view=${safeViewName}&format=${format}`,
+      parseResponse: async response => {
+        return await response.text()
+      },
+    })
+  },
 })