Modal integration

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

@@ -1,29 +0,0 @@
-<script>
-  import { Table } from "@budibase/bbui"
-  import CapitaliseRenderer from "components/common/renderers/CapitaliseRenderer.svelte"
-
-  export let authConfigs = []
-
-  const schema = {
-    name: "",
-    type: "",
-  }
-</script>
-
-<div>
-  {#if authConfigs && authConfigs.length > 0}
-    <div class="query-list">
-      <Table
-        {schema}
-        data={authConfigs}
-        allowEditColumns={false}
-        allowEditRows={false}
-        allowSelectRows={false}
-        customRenderers={[{ column: "type", component: CapitaliseRenderer }]}
-      />
-    </div>
-  {/if}
-</div>
-
-<style>
-</style>

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte → packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Divider, Heading, ActionButton, Badge, Body } from "@budibase/bbui"
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import RestAuthenticationBuilder from "./RestAuthenticationBuilder.svelte"
+  import RestAuthenticationBuilder from "./auth/RestAuthenticationBuilder.svelte"
 
   export let datasource
 
@@ -42,9 +42,6 @@
   Create an authentication config that can be shared with queries.
 </Body>
 <RestAuthenticationBuilder bind:authConfigs={datasource.config.authConfigs} />
-<div>
-  <ActionButton icon="Add">Add authentication</ActionButton>
-</div>
 
 <style>
   .section-header {

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

@@ -0,0 +1,13 @@
+<script>
+  import { AUTH_TYPE_LABELS } from "./authTypes"
+
+  export let value
+
+  const renderAuthType = () => {
+    return AUTH_TYPE_LABELS.filter(type => type.value === value).map(
+      type => type.label
+    )
+  }
+</script>
+
+{renderAuthType()}

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

@@ -0,0 +1,108 @@
+<script>
+  import {
+    Table,
+    Modal,
+    ModalContent,
+    Layout,
+    ActionButton,
+    Select,
+    Body,
+    Input,
+  } from "@budibase/bbui"
+  import AuthTypeRenderer from "./AuthTypeRenderer.svelte"
+  import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
+
+  export let authConfigs = []
+
+  let modal
+  let currentConfig
+  let isNew = false
+
+  const schema = {
+    name: "",
+    type: "",
+  }
+
+  const openConfigModal = config => {
+    if (!config) {
+      currentConfig = {
+        config: {},
+      }
+      isNew = true
+    } else {
+      currentConfig = { ...config }
+      isNew = false
+    }
+    modal.show()
+  }
+
+  const onConfirm = () => {
+    if (isNew) {
+      authConfigs.push(currentConfig)
+    } else {
+      authConfigs = authConfigs.map(c => {
+        if (c.name === currentConfig.name) {
+          return currentConfig
+        }
+        return c
+      })
+    }
+  }
+
+  const onCancel = () => {
+    currentConfig = {}
+  }
+</script>
+
+<Modal bind:this={modal}>
+  <ModalContent
+    title={isNew ? "Add Authentication" : "Update Authentication"}
+    {onConfirm}
+    {onCancel}
+    confirmText={isNew ? "Add" : "Update"}
+    cancelText="Cancel"
+    size="M"
+  >
+    <Layout gap="S">
+      <Body size="S">
+        The authorization header will be automatically generated when you
+        sendthe request.
+      </Body>
+      <Select
+        label="Type"
+        bind:value={currentConfig.type}
+        options={AUTH_TYPE_LABELS}
+        on:change={({ detail }) => (currentConfig.type = detail)}
+      />
+      {#if currentConfig.type === AUTH_TYPES.BASIC}
+        <Input label="Username" bind:value={currentConfig.config.username} />
+        <Input label="Password" bind:value={currentConfig.config.password} />
+      {/if}
+      {#if currentConfig.type === AUTH_TYPES.BEARER}
+        <Input label="Token" bind:value={currentConfig.config.token} />
+      {/if}
+    </Layout>
+  </ModalContent>
+</Modal>
+
+<Layout gap="S" noPadding>
+  {#if authConfigs && authConfigs.length > 0}
+    <Table
+      on:click={({ detail }) => openConfigModal(detail)}
+      {schema}
+      data={authConfigs}
+      allowEditColumns={false}
+      allowEditRows={false}
+      allowSelectRows={false}
+      customRenderers={[{ column: "type", component: AuthTypeRenderer }]}
+    />
+  {/if}
+  <div>
+    <ActionButton on:click={() => openConfigModal()} con="Add"
+      >Add authentication</ActionButton
+    >
+  </div>
+</Layout>
+
+<style>
+</style>

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js

@@ -0,0 +1,15 @@
+export const AUTH_TYPES = {
+  BEARER: "bearer",
+  BASIC: "basic",
+}
+
+export const AUTH_TYPE_LABELS = [
+  {
+    label: "Bearer Token",
+    value: AUTH_TYPES.BEARER,
+  },
+  {
+    label: "Basic Auth",
+    value: AUTH_TYPES.BASIC,
+  },
+]

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

@@ -12,7 +12,7 @@
   } from "@budibase/bbui"
   import { datasources, integrations, queries, tables } from "stores/backend"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
-  import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte"
+  import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte"
   import PlusConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons"
   import CapitaliseRenderer from "components/common/renderers/CapitaliseRenderer.svelte"