rough implementation

hosting/docker-compose.dev.yaml

@@ -37,7 +37,7 @@ services:
       - "host.docker.internal:host-gateway"
 
   couchdb-service:
-    # platform: linux/amd64
+    platform: linux/amd64
     container_name: budi-couchdb-dev
     restart: on-failure
     image: ibmcom/couchdb3

hosting/nginx.dev.conf.hbs

@@ -63,7 +63,7 @@ http {
     }
 
     location /builder {
-      proxy_pass      http://{{ address }}:3000;
+      proxy_pass      http://{{ address }}:4001;
       rewrite ^/builder(.*)$ /builder/$1 break;
     }
 

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -1,7 +1,15 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles, flags } from "stores/backend"
-  import { Icon, ActionGroup, Tabs, Tab, notifications } from "@budibase/bbui"
+  import {
+    Button,
+    Icon,
+    ActionGroup,
+    Tabs,
+    Tab,
+    notifications,
+    Banner,
+  } from "@budibase/bbui"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
   import DeployNavigation from "components/deploy/DeployNavigation.svelte"
@@ -58,6 +66,11 @@
     })
   }
 
+  async function newDesignUi() {
+    await flags.toggleUiFeature("design_ui")
+    window.location.reload()
+  }
+
   onMount(async () => {
     if (!hasSynced && application) {
       try {
@@ -79,6 +92,10 @@
   <div class="loading" />
 {:then _}
   <div class="root">
+    <Banner>
+      Wanna try the new UI?
+      <Button on:click={newDesignUi}>Try the all new Budibase Design UI</Button>
+    </Banner>
     <div class="top-nav">
       <div class="topleftnav">
         <button class="home-logo">

packages/builder/src/stores/backend/flags.js

@@ -16,6 +16,9 @@ export function createFlagsStore() {
       })
       await actions.fetch()
     },
+    toggleUiFeature: async feature => {
+      await API.toggleUiFeature({ value: feature })
+    },
   }
 
   return {

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

@@ -22,4 +22,9 @@ export const buildFlagEndpoints = API => ({
       },
     })
   },
+  toggleUiFeature: async ({ value }) => {
+    return await API.post({
+      url: `/api/ui/feature/${value}`,
+    })
+  },
 })

packages/server/src/api/controllers/application.ts

@@ -226,7 +226,11 @@ export const fetchAppPackage = async (ctx: any) => {
     application,
     screens,
     layouts,
-    clientLibPath: clientLibraryPath(ctx.params.appId, application.version),
+    clientLibPath: clientLibraryPath(
+      ctx.params.appId,
+      application.version,
+      ctx
+    ),
   }
 }
 

packages/server/src/api/controllers/static/index.js

@@ -16,6 +16,7 @@ const { upload } = require("../../../utilities/fileSystem")
 const { attachmentsRelativeURL } = require("../../../utilities")
 const { DocumentTypes } = require("../../../db/utils")
 const { getAppDB, getAppId } = require("@budibase/backend-core/context")
+const { setCookie, clearCookie } = require("@budibase/backend-core/utils")
 const AWS = require("aws-sdk")
 const AWS_REGION = env.AWS_REGION ? env.AWS_REGION : "eu-west-1"
 
@@ -38,18 +39,37 @@ async function prepareUpload({ s3Key, bucket, metadata, file }) {
   }
 }
 
-exports.serveBuilder = async function (ctx) {
+exports.toggleBetaUiFeature = async function (ctx) {
-  // TODO: read from cookie, redis (prob best) or DB
+  const cookieName = `beta:${ctx.params.feature}`
-  // Maybe use the flags abstraction
-  const showNewUi = true
-  // const cdnUrl = "cdn.budi.live"
 
-  // serve the new UI directly from S3
+  if (ctx.cookies.get(cookieName)) {
-  if (showNewUi) {
+    clearCookie(ctx, cookieName)
-    await send(ctx)
+    ctx.body = {
+      message: `${ctx.params.feature} disabled`,
+    }
+    return
   }
 
-  let builderPath = resolve(TOP_LEVEL_PATH, "builder")
+  setCookie(ctx, {}, cookieName)
+
+  ctx.body = {
+    message: `${ctx.params.feature} enabled`,
+  }
+}
+
+exports.serveBuilder = async function (ctx) {
+  const newUiCookie = ctx.cookies.get("beta:design_ui")
+  // When user uses the builder, they should be able to switch to the new UI through a button in a banner
+  // When in the new UI, they should be able to switch back with a button in a banner
+  // Maybe use the flags abstraction
+  // COS
+  // - Users who click the button get the latest version of the new UI
+  //
+  let uiPath = "builder"
+  if (newUiCookie) {
+    uiPath = "newbuilder"
+  }
+  let builderPath = resolve(TOP_LEVEL_PATH, uiPath)
   await send(ctx, ctx.file, { root: builderPath })
 }
 
@@ -97,6 +117,13 @@ exports.serveApp = async function (ctx) {
 }
 
 exports.serveClientLibrary = async function (ctx) {
+  const newUiCookie = ctx.cookies.get("beta:design_ui")
+  if (newUiCookie) {
+    return send(ctx, "budibase-client.js", {
+      root: join(TOP_LEVEL_PATH, "newbuilder"),
+    })
+  }
+
   return send(ctx, "budibase-client.js", {
     root: join(NODE_MODULES_PATH, "@budibase", "client", "dist"),
   })

packages/server/src/api/routes/static.ts

@@ -38,6 +38,7 @@ router
   // TODO: for now this builder endpoint is not authorized/secured, will need to be
   .get("/builder/:file*", controller.serveBuilder)
   .post("/api/attachments/process", authorized(BUILDER), controller.uploadFile)
+  .post("/api/ui/feature/:feature", controller.toggleBetaUiFeature)
   .post(
     "/api/attachments/:tableId/upload",
     paramResource("tableId"),