reuse modal for edit and create and add delete function

packages/builder/src/pages/builder/portal/settings/environment/_components/CreateEditVariableModal.svelte

@@ -0,0 +1,89 @@
+<script>
+  import {
+    ModalContent,
+    Button,
+    Input,
+    Checkbox,
+    Heading,
+    notifications,
+  } from "@budibase/bbui"
+  import { environment } from "stores/portal"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let save
+  export let row
+
+  let deleteDialog
+  let name = row?.name || ""
+  let productionValue
+  let developmentValue
+
+  let useProductionValue = true
+
+  const deleteVariable = name => {
+    try {
+      environment.deleteVariable(name)
+      notifications.success("Environment variable deleted")
+    } catch (err) {
+      notifications.error(err.message)
+    }
+  }
+</script>
+
+<ModalContent
+  onConfirm={() =>
+    save({
+      name,
+      production: productionValue,
+      development: developmentValue,
+    })}
+  title={!row ? "Add new environment variable" : "Edit environment variable"}
+>
+  <Input disabled={row} label="Name" bind:value={name} />
+  <div>
+    <Heading size="XS">Production</Heading>
+    <Input
+      type="password"
+      label="Value"
+      on:change={e => {
+        productionValue = e.detail
+        if (useProductionValue) {
+          developmentValue = e.detail
+        }
+      }}
+      value={productionValue}
+    />
+  </div>
+  <div>
+    <Heading size="XS">Development</Heading>
+    <Input
+      type="password"
+      on:change={e => {
+        developmentValue = e.target.value
+      }}
+      disabled={useProductionValue}
+      label="Value"
+      value={useProductionValue ? productionValue : developmentValue}
+    />
+    <Checkbox bind:value={useProductionValue} text="Use production value" />
+  </div>
+
+  <div class="footer" slot="footer">
+    {#if row}
+      <Button on:click={deleteDialog.show} warning>Delete</Button>
+    {/if}
+  </div>
+</ModalContent>
+
+<ConfirmDialog
+  bind:this={deleteDialog}
+  onOk={() => {
+    deleteVariable(row.name)
+  }}
+  okText="Delete Environment Variable"
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete the environment variable
+  <i>{row.name}?</i>
+  This action cannot be undone.
+</ConfirmDialog>

packages/builder/src/pages/builder/portal/settings/environment/_components/EditVariableColumn.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { ActionButton, Modal } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { environment } from "stores/portal"
+  import CreateEditVariableModal from "./CreateEditVariableModal.svelte"
+
+  export let row
+
+  let editVariableModal
+  let deleteDialog
+
+  const save = data => {
+    environment.updateVariable(data)
+    editVariableModal.hide()
+  }
+</script>
+
+<ActionButton size="S" on:click={editVariableModal.show}>Edit</ActionButton>
+
+<Modal bind:this={editVariableModal}>
+  <CreateEditVariableModal {row} {save} />
+</Modal>
+
+<ConfirmDialog
+  bind:this={deleteDialog}
+  onOk={() => {
+    environment.deleteVariable(row.name)
+  }}
+  okText="Delete Environment Variable"
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete the environment variable
+  <i>{row.name}?</i>
+  This action cannot be undone.
+</ConfirmDialog>

packages/builder/src/pages/builder/portal/settings/environment/_components/editVariableModal.svelte

@@ -1,69 +0,0 @@
-<script>
-  import {
-    ActionButton,
-    Button,
-    Modal,
-    ModalContent,
-    Input,
-    Heading,
-    Checkbox,
-  } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-
-  export let row
-
-  let editVariableModal
-  let deleteDialog
-
-  let productionTouched = false
-  let developmentTouched = false
-
-  let productionValue = "******"
-  let developmentValue = "******"
-
-  let useProductionValue
-</script>
-
-<ActionButton size="S" on:click={editVariableModal.show}>Edit</ActionButton>
-
-<Modal bind:this={editVariableModal}>
-  <ModalContent disabled={!productionTouched && !developmentTouched}>
-    <Input label="Name" value={row.name} />
-
-    <div>
-      <Heading size="XS">Production</Heading>
-      <Input
-        on:change={() => (productionTouched = true)}
-        label="Value"
-        bind:value={productionValue}
-      />
-    </div>
-    <div>
-      <Heading size="XS">Development</Heading>
-      <Input
-        disabled={useProductionValue}
-        on:change={() => (developmentTouched = true)}
-        label="Value"
-        bind:value={developmentValue}
-      />
-      <Checkbox bind:value={useProductionValue} text="Use production value" />
-    </div>
-
-    <div class="footer" slot="footer">
-      <Button on:click={deleteDialog.show} warning>Delete</Button>
-    </div>
-  </ModalContent>
-</Modal>
-
-<ConfirmDialog
-  bind:this={deleteDialog}
-  onOk={() => {
-    console.log("delete")
-  }}
-  okText="Delete Environment Variable"
-  title="Confirm Deletion"
->
-  Are you sure you wish to delete the environment variable
-  <i>{row.name}?</i>
-  This action cannot be undone.
-</ConfirmDialog>

packages/builder/src/pages/builder/portal/settings/environment/index.svelte

@@ -6,21 +6,15 @@
     Button,
     Divider,
     Modal,
-    ModalContent,
     Table,
-    Input,
-    Checkbox,
   } from "@budibase/bbui"
-  import { envVars } from "stores/portal"
+  import { environment } from "stores/portal"
   import { onMount } from "svelte"
-  import EditVariableModal from "./_components/editVariableModal.svelte"
+  import CreateEditVariableModal from "./_components/CreateEditVariableModal.svelte"
+  import EditVariableColumn from "./_components/EditVariableColumn.svelte"
 
   let modal
 
-  let useProductionValue = true
-
-  let developmentValue
-  let productionValue
   const schema = {
     name: {
       width: "2fr",
@@ -32,11 +26,16 @@
     },
   }
 
-  const customRenderers = [{ column: "edit", component: EditVariableModal }]
+  const customRenderers = [{ column: "edit", component: EditVariableColumn }]
 
   onMount(async () => {
-    await envVars.load()
+    await environment.loadVariables()
   })
+
+  const save = data => {
+    environment.createVariable(data)
+    modal.hide()
+  }
 </script>
 
 <Layout noPadding>
@@ -50,7 +49,7 @@
   <Layout noPadding>
     <Table
       {schema}
-      data={$envVars}
+      data={$environment}
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
@@ -63,30 +62,7 @@
 </Layout>
 
 <Modal bind:this={modal}>
-  <ModalContent title="Add new environment variable">
+  <CreateEditVariableModal {save} />
-    <Input label="Name" value="" />
-
-    <div>
-      <Heading size="XS">Production</Heading>
-      <Input type="password" label="Value" bind:value={productionValue} />
-    </div>
-    <div>
-      <Heading size="XS">Development</Heading>
-      <Input
-        type="password"
-        disabled={useProductionValue}
-        label="Value"
-        bind:value={developmentValue}
-      />
-      <Checkbox
-        on:change={() => {
-          developmentValue = productionValue
-        }}
-        bind:value={useProductionValue}
-        text="Use production value"
-      />
-    </div>
-  </ModalContent>
 </Modal>
 
 <style>

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

@@ -1,27 +0,0 @@
-import { writable } from "svelte/store"
-import { API } from "api"
-
-export function createEnvVarsStore() {
-  const { subscribe, set, update } = writable([])
-
-  async function load() {
-    // const envVars = await API.fetchEnvVars()
-    let testVars = ["blah", "blah123"]
-    const vars = testVars.map(name => ({ name }))
-    console.log(vars)
-    set(vars)
-  }
-
-  async function create() {
-    const envVar = await API.createEnvVar()
-    update(envVars => [envVar, ...envVars])
-  }
-
-  return {
-    subscribe,
-    load,
-    create,
-  }
-}
-
-export const envVars = createEnvVarsStore()

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

@@ -0,0 +1,38 @@
+import { writable } from "svelte/store"
+import { API } from "api"
+
+export function createEnvironmentStore() {
+  const { subscribe, set, update } = writable([])
+
+  async function loadVariables() {
+    let envVars = []
+    envVars = await API.fetchEnvironmentVariables()
+    const mappedVars = envVars.variables.map(name => ({ name }))
+    set(mappedVars)
+  }
+
+  async function createVariable(data) {
+    console.log(data)
+    await API.createEnvironmentVariable(data)
+    let mappedVar = { name: data.name }
+    update(envVars => [mappedVar, ...envVars])
+  }
+
+  async function deleteVariable(varName) {
+    await API.deleteEnvironmentVariable(varName)
+    update(envVars => envVars.filter(envVar => envVar.name !== varName))
+  }
+
+  async function updateVariable(data) {
+    await API.updateEnvironmentVariable(data)
+  }
+  return {
+    subscribe,
+    loadVariables,
+    createVariable,
+    deleteVariable,
+    updateVariable,
+  }
+}
+
+export const environment = createEnvironmentStore()

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

@@ -11,4 +11,4 @@ export { groups } from "./groups"
 export { plugins } from "./plugins"
 export { backups } from "./backups"
 export { overview } from "./overview"
-export { envVars } from "./envVars"
+export { environment } from "./environment"

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

@@ -1,18 +0,0 @@
-export const buildEnvironmentVariableEndpoints = API => ({
-  /**
-   * Fetches a list of environment variables
-   */
-  fetchVariables: async () => {
-    return await API.get({
-      url: `/api/env/variables`,
-      json: false,
-    })
-  },
-
-  createVariable: async () => {
-    return await API.get({
-      url: `/api/env/variables`,
-      json: false,
-    })
-  },
-})

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

@@ -0,0 +1,30 @@
+export const buildEnvironmentVariableEndpoints = API => ({
+  /**
+   * Fetches a list of environment variables
+   */
+  fetchEnvironmentVariables: async () => {
+    return await API.get({
+      url: `/api/env/variables`,
+      json: false,
+    })
+  },
+
+  createEnvironmentVariable: async data => {
+    return await API.post({
+      url: `/api/env/variables`,
+      body: data,
+    })
+  },
+  deleteEnvironmentVariable: async varName => {
+    return await API.delete({
+      url: `/api/env/variables/${varName}`,
+    })
+  },
+
+  updateEnvironmentVariable: async data => {
+    return await API.patch({
+      url: `/api/env/variables/${data.name}`,
+      body: data,
+    })
+  },
+})

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

@@ -26,7 +26,7 @@ import { buildLicensingEndpoints } from "./licensing"
 import { buildGroupsEndpoints } from "./groups"
 import { buildPluginEndpoints } from "./plugins"
 import { buildBackupsEndpoints } from "./backups"
-
+import { buildEnvironmentVariableEndpoints } from "./environmentVariables"
 const defaultAPIClientConfig = {
   /**
    * Certain definitions can't change at runtime for client apps, such as the
@@ -247,5 +247,6 @@ export const createAPIClient = config => {
     ...buildGroupsEndpoints(API),
     ...buildPluginEndpoints(API),
     ...buildBackupsEndpoints(API),
+    ...buildEnvironmentVariableEndpoints(API),
   }
 }