From 431a22aaf04b7501ade31dc5d887b71d0358c558 Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Thu, 9 Dec 2021 11:39:44 +0000
Subject: [PATCH] Modal integration

---
 .../RestAuthenticationBuilder.svelte          |  29 -----
 .../{ => rest}/RestExtraConfigForm.svelte     |   5 +-
 .../rest/auth/AuthTypeRenderer.svelte         |  13 +++
 .../auth/RestAuthenticationBuilder.svelte     | 108 ++++++++++++++++++
 .../rest/auth/authTypes.js                    |  15 +++
 .../[selectedDatasource]/index.svelte         |   2 +-
 6 files changed, 138 insertions(+), 34 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestAuthenticationBuilder.svelte
 rename packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/{ => rest}/RestExtraConfigForm.svelte (89%)
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/AuthTypeRenderer.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationBuilder.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestAuthenticationBuilder.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestAuthenticationBuilder.svelte
deleted file mode 100644
index 129acad852..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestAuthenticationBuilder.svelte
+++ /dev/null
@@ -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>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
similarity index 89%
rename from packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte
rename to packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
index c63872a1ef..c77f2900b0 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte
+++ b/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 {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/AuthTypeRenderer.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/AuthTypeRenderer.svelte
new file mode 100644
index 0000000000..ad8a2e1ad6
--- /dev/null
+++ b/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()}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationBuilder.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationBuilder.svelte
new file mode 100644
index 0000000000..4d932869e7
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js
new file mode 100644
index 0000000000..854391d6ce
--- /dev/null
+++ b/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,
+  },
+]
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
index 0e046e26f7..87ff9691f8 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/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"