Adding a warning for missing ENCRYPTION_KEY variable to the portal.

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

@@ -9,6 +9,7 @@
     Table,
     Tags,
     Tag,
+    InlineAlert,
   } from "@budibase/bbui"
   import { environment, licensing, auth, admin } from "stores/portal"
   import { onMount } from "svelte"
@@ -30,7 +31,10 @@
 
   const customRenderers = [{ column: "edit", component: EditVariableColumn }]
 
+  $: encryptionKeyAvailable = $environment.status?.encryptionKeyAvailable
+
   onMount(async () => {
+    await environment.checkStatus()
     await environment.loadVariables()
   })
 
@@ -55,11 +59,18 @@
     >
   </Layout>
   {#if $licensing.environmentVariablesEnabled}
+    {#if encryptionKeyAvailable === false}
+      <InlineAlert
+        message="Your Budibase installation does not have a key for encryption, please update your app service's environment variables to contain an 'ENCRYPTION_KEY' value."
+        header="No encryption key found"
+        type="error"
+      />
+    {/if}
     <Divider size="S" />
     <Layout noPadding>
       <Table
         {schema}
-        data={$environment}
+        data={$environment.variables}
         allowEditColumns={false}
         allowEditRows={false}
         allowSelectRows={false}
@@ -70,7 +81,7 @@
       <Button on:click={modal.show} cta>Add Variable</Button>
     </div>
   {:else}
-    <div>
+    <div class="buttons">
       <Button
         primary
         disabled={!$auth.accountPortalAccess && $admin.cloud}
@@ -103,4 +114,10 @@
     justify-content: flex-start;
     gap: var(--spacing-m);
   }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+  }
 </style>

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

@@ -2,25 +2,46 @@ import { writable } from "svelte/store"
 import { API } from "api"
 
 export function createEnvironmentStore() {
-  const { subscribe, set, update } = writable([])
+  const { subscribe, update } = writable({
+    variables: [],
+    status: {},
+  })
+
+  async function checkStatus() {
+    const status = await API.checkEnvironmentVariableStatus()
+    console.log(status)
+    update(store => {
+      store.status = status
+      return store
+    })
+  }
 
   async function loadVariables() {
-    let envVars = []
-    envVars = await API.fetchEnvironmentVariables()
+    const envVars = await API.fetchEnvironmentVariables()
     const mappedVars = envVars.variables.map(name => ({ name }))
-    set(mappedVars)
+    update(store => {
+      store.variables = mappedVars
+      return store
+    })
   }
 
   async function createVariable(data) {
-    console.log(data)
     await API.createEnvironmentVariable(data)
     let mappedVar = { name: data.name }
-    update(envVars => [mappedVar, ...envVars])
+    update(store => {
+      store.variables = [mappedVar, ...store.variables]
+      return store
+    })
   }
 
   async function deleteVariable(varName) {
     await API.deleteEnvironmentVariable(varName)
-    update(envVars => envVars.filter(envVar => envVar.name !== varName))
+    update(store => {
+      store.variables = store.variables.filter(
+        envVar => envVar.name !== varName
+      )
+      return store
+    })
   }
 
   async function updateVariable(data) {
@@ -29,6 +50,7 @@ export function createEnvironmentStore() {
 
   return {
     subscribe,
+    checkStatus,
     loadVariables,
     createVariable,
     deleteVariable,

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

@@ -1,4 +1,10 @@
 export const buildEnvironmentVariableEndpoints = API => ({
+  checkEnvironmentVariableStatus: async () => {
+    return await API.get({
+      url: `/api/env/variables/status`,
+    })
+  },
+
   /**
    * Fetches a list of environment variables
    */

packages/types/src/api/web/app/backup.ts

@@ -12,6 +12,11 @@ export interface CreateAppBackupRequest {
   name: string
 }
 
+export interface CreateAppBackupResponse {
+  backupId: string
+  message: string
+}
+
 export interface UpdateAppBackupRequest {
   name: string
 }

packages/types/src/api/web/global/environmentVariables.ts

@@ -1,3 +1,7 @@
+export interface StatusEnvironmentVariableResponse {
+  encryptionKeyAvailable: boolean
+}
+
 export interface CreateEnvironmentVariableRequest {
   name: string
   production: string