Integrate query with datasource auth

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationBuilder.svelte

@@ -34,7 +34,7 @@
     }
   }
 
-  const onDelete = () => {
+  const onRemove = () => {
     configs = configs.filter(c => {
       return c._id !== currentConfig._id
     })
@@ -42,7 +42,7 @@
 </script>
 
 <Modal bind:this={modal}>
-  <RestAuthenticationModal {configs} {currentConfig} {onConfirm} {onDelete} />
+  <RestAuthenticationModal {configs} {currentConfig} {onConfirm} {onRemove} />
 </Modal>
 
 <Layout gap="S" noPadding>

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationModal.svelte

@@ -6,7 +6,7 @@
   export let configs
   export let currentConfig
   export let onConfirm
-  export let onDelete
+  export let onRemove
 
   let form = {
     basic: {},
@@ -59,6 +59,10 @@
       type: form.type,
     }
 
+    if (currentConfig) {
+      newConfig._id = currentConfig._id
+    }
+
     if (form.type === AUTH_TYPES.BASIC) {
       newConfig.config = {
         ...form.basic,
@@ -158,8 +162,8 @@
   cancelText={"Cancel"}
   size="M"
   showSecondaryButton={!!currentConfig}
-  secondaryButtonText={"Delete"}
-  secondaryAction={onDelete}
+  secondaryButtonText={"Remove"}
+  secondaryAction={onRemove}
   secondaryButtonWarning={true}
 >
   <Layout gap="S">

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

@@ -50,6 +50,7 @@
   let saveId
   let response, schema, isGet
   let datasourceType, integrationInfo, queryConfig, responseSuccess
+  let authConfigId
 
   $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
   $: datasourceType = datasource?.source
@@ -60,6 +61,7 @@
   $: isGet = query?.queryVerb === "read"
   $: responseSuccess =
     response?.info?.code >= 200 && response?.info?.code <= 206
+  $: authConfigs = buildAuthConfigs(datasource)
 
   function getSelectedQuery() {
     return cloneDeep(
@@ -91,6 +93,16 @@
     return qs.length > 0 ? `${newUrl}?${qs}` : newUrl
   }
 
+  const buildAuthConfigs = datasource => {
+    if (datasource?.config?.authConfigs) {
+      return datasource.config.authConfigs.map(c => ({
+        label: c.name,
+        value: c._id,
+      }))
+    }
+    return []
+  }
+
   function learnMoreBanner() {
     window.open("https://docs.budibase.com/building-apps/data/transformers")
   }
@@ -100,6 +112,7 @@
     const queryString = buildQueryString(breakQs)
     newQuery.fields.path = url.split("?")[0]
     newQuery.fields.queryString = queryString
+    newQuery.fields.authConfigId = authConfigId
     newQuery.schema = fieldsToSchema(schema)
     newQuery.parameters = keyValueToQueryParameters(bindings)
     return newQuery
@@ -132,6 +145,22 @@
     }
   }
 
+  const getAuthConfigId = () => {
+    let id = query.fields.authConfigId
+    if (id) {
+      // find the matching config on the datasource
+      const matchedConfig = datasource?.config?.authConfigs?.filter(
+        c => c._id === authConfigId
+      )[0]
+      // clear the id if the config is not found (deleted)
+      // i.e. just show 'None' in the dropdown
+      if (!matchedConfig) {
+        id = undefined
+      }
+    }
+    return id
+  }
+
   onMount(() => {
     query = getSelectedQuery()
     const qs = query?.fields.queryString
@@ -139,6 +168,7 @@
     url = buildUrl(query.fields.path, breakQs)
     schema = schemaToFields(query.schema)
     bindings = queryParametersToKeyValue(query.parameters)
+    authConfigId = getAuthConfigId()
     if (query && !query.transformer) {
       query.transformer = "return data"
     }
@@ -238,6 +268,19 @@
               />
             </Layout>
           </Tab>
+          <div class="auth-container">
+            <div />
+            <!-- spacer -->
+            <div class="auth-select">
+              <Select
+                label="Auth"
+                labelPosition="left"
+                placeholder="None"
+                bind:value={authConfigId}
+                options={authConfigs}
+              />
+            </div>
+          </div>
         </Tabs>
       </Layout>
     </div>
@@ -384,4 +427,12 @@
     margin-top: var(--spacing-xl);
     justify-content: center;
   }
+  .auth-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .auth-select {
+    width: 200px;
+  }
 </style>

packages/server/src/integrations/rest.ts

@@ -190,18 +190,22 @@ module RestModule {
         const authConfig = this.config.authConfigs.filter(
           c => c._id === authConfigId
         )[0]
-        let config
-        switch (authConfig.type) {
-          case AuthType.BASIC:
-            config = authConfig.config as BasicAuthConfig
-            headers.Authorization = `Basic ${Buffer.from(
-              `${config.username}:${config.password}`
-            ).toString("base64")}`
-            break
-          case AuthType.BEARER:
-            config = authConfig.config as BearerAuthConfig
-            headers.Authorization = `Bearer ${config.token}`
-            break
+        // check the config still exists before proceeding
+        // if not - do nothing
+        if (authConfig) {
+          let config
+          switch (authConfig.type) {
+            case AuthType.BASIC:
+              config = authConfig.config as BasicAuthConfig
+              headers.Authorization = `Basic ${Buffer.from(
+                `${config.username}:${config.password}`
+              ).toString("base64")}`
+              break
+            case AuthType.BEARER:
+              config = authConfig.config as BearerAuthConfig
+              headers.Authorization = `Bearer ${config.token}`
+              break
+          }
         }
       }
 
@@ -242,7 +246,8 @@ module RestModule {
       }
 
       this.startTimeMs = performance.now()
-      const response = await fetch(this.getUrl(path, queryString), input)
+      const url = this.getUrl(path, queryString)
+      const response = await fetch(url, input)
       return await this.parseResponse(response)
     }