Merge branch 'new-design-ui' of github.com:Budibase/budibase into new-design-ui

4 years ago · ccfa350118
6 changed files with 55 additions and 0 deletions
--- a/packages/builder/src/components/beta/BetaTab.svelte
+++ b/packages/builder/src/components/beta/BetaTab.svelte
@ -0,0 +1,26 @@
+<script>
+  import { Body, Button, Layout, Heading } from "@budibase/bbui"
+  import { flags } from "stores/backend"
+
+  function openFeedbackApp() {
+    window.open(`https://bb.budibase.app/betauifeedback`)
+  }
+
+  async function revertToOldBuilder() {
+    await flags.toggleUiFeature("design_ui")
+    window.location.reload()
+  }
+</script>
+
+<Layout>
+  <Heading size="M">Beta Builder</Heading>
+  <Body>
+    Your account has been given access to the budibase beta program. We would
+    love to hear what you think and get your feedback and suggestions on the new
+    Design UI.
+  </Body>
+  <Button cta on:click={openFeedbackApp}>Give Feedback</Button>
+  <Button secondary on:click={revertToOldBuilder}
+    >Revert back to old builder</Button
+  >
+</Layout>
--- a/packages/builder/src/pages/builder/app/[application]/beta/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/beta/_layout.svelte
@ -0,0 +1,8 @@
+<script>
+  import { Layout } from "@budibase/bbui"
+</script>
+
+<!-- routify:options index=5 -->
+<Layout gap="S" justifyItems="center">
+  <slot />
+</Layout>
--- a/packages/builder/src/pages/builder/app/[application]/beta/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/beta/index.svelte
@ -0,0 +1,5 @@
+<script>
+  import BetaTab from "components/beta/BetaTab.svelte"
+</script>
+
+<BetaTab />
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@ -27,6 +27,7 @@
  import AppLockModal from "components/common/AppLockModal.svelte"
  import EditableIcon from "components/common/EditableIcon.svelte"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import BetaTab from "components/beta/BetaTab.svelte"
  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
  import { onDestroy, onMount } from "svelte"

@ -313,6 +314,9 @@
          <Tab title="Settings">
            <SettingsTab app={selectedApp} />
          </Tab>
+          <Tab title="Beta">
+            <BetaTab />
+          </Tab>
        </Tabs>
      </div>
      <ConfirmDialog
--- a/packages/builder/src/stores/backend/flags.js
+++ b/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 {
--- a/packages/frontend-core/src/api/flags.js
+++ b/packages/frontend-core/src/api/flags.js
@ -22,4 +22,13 @@ export const buildFlagEndpoints = API => ({
      },
    })
  },
+  /**
+   * Allows us to experimentally toggle a beta UI feature through a cookie.
+   * @param value the feature to toggle
+   */
+  toggleUiFeature: async ({ value }) => {
+    return await API.post({
+      url: `/api/beta/${value}`,
+    })
+  },
 })