add create store method and tidy up

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -55,11 +55,6 @@
           title: "Plugins",
           href: "/builder/portal/plugins",
         },
-        {
-          title: "Environment",
-          href: "/builder/portal/environment",
-        },
-
         {
           title: "Settings",
           href: "/builder/portal/settings",

packages/builder/src/pages/builder/portal/settings/_layout.svelte

@@ -26,6 +26,11 @@
           url={$url("./organisation")}
           active={$isActive("./organisation")}
         />
+        <SideNavItem
+          text="Environment"
+          url={$url("./environment")}
+          active={$isActive("./environment")}
+        />
         {#if !$admin.cloud}
           <SideNavItem
             text="Version"

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

@@ -4,12 +4,9 @@
     Heading,
     Body,
     Button,
-    Select,
     Divider,
     Modal,
     ModalContent,
-    Search,
-    Page,
     Table,
     Input,
     Checkbox,
@@ -42,7 +39,6 @@
   })
 </script>
 
-<Page narrow>
 <Layout noPadding>
   <Layout gap="XS" noPadding>
     <Heading size="M">Envrironment Variables</Heading>
@@ -65,7 +61,6 @@
     <Button on:click={modal.show} cta>Add Variable</Button>
   </div>
 </Layout>
-</Page>
 
 <Modal bind:this={modal}>
   <ModalContent title="Add new environment variable">

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

@@ -6,16 +6,21 @@ export function createEnvVarsStore() {
 
   async function load() {
     // const envVars = await API.fetchEnvVars()
-
-    let testVars = ['blah', 'blah123']
-    const vars = testVars.map((name) => ({ name }))
+    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,
   }
 }
 

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

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