Merge branch 'develop' of github.com:Budibase/budibase into feature/multi-tenants

2021-07-22 14:27:12 +01:00 · 2021-07-22 14:27:12 +01:00 · 5611c8e73e
parent 27b2a13817 b34f6c9a23
commit 5611c8e73e
9 changed files with 189 additions and 279 deletions
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -18,7 +18,7 @@
  export let onSelectOption = () => {}
  export let getOptionLabel = option => option
  export let getOptionValue = option => option
-  export let getOptionIcon = null
+  export let getOptionIcon = () => null
  export let open = false
  export let readonly = false
  export let quiet = false
@ -45,7 +45,7 @@
 >
  {#if fieldIcon}
    <span class="icon-Placeholder-Padding">
-      <img src={fieldIcon} alt="Picker Icon" width="20" height="15" />
+      <img src={fieldIcon} alt="icon" width="20" height="15" />
    </span>
  {/if}

@ -115,7 +115,7 @@
              <span class="icon-Padding">
                <img
                  src={getOptionIcon(option, idx)}
-                  alt="test"
+                  alt="icon"
                  width="20"
                  height="15"
                />
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@ -10,7 +10,7 @@
  export let options = []
  export let getOptionLabel = option => option
  export let getOptionValue = option => option
-  export let getOptionIcon = null
+  export let getOptionIcon = () => null
  export let readonly = false
  export let quiet = false
  export let autoWidth = false
--- a/packages/builder/src/components/deploy/DeployModal.svelte
+++ b/packages/builder/src/components/deploy/DeployModal.svelte
@ -1,8 +1,6 @@
 <script>
  import { onMount, onDestroy } from "svelte"
  import { Button, Modal, notifications, ModalContent } from "@budibase/bbui"
-  import FeedbackIframe from "../feedback/FeedbackIframe.svelte"
-  import { store } from "builderStore"
  import api from "builderStore/api"
  import analytics from "analytics"

@ -19,8 +17,6 @@
  let poll
  let publishModal

-  $: appId = $store.appId
-
  async function deployApp() {
    try {
      const response = await api.post("/api/deploy")
@ -99,9 +95,7 @@
    size="L"
    showConfirmButton={false}
    showCancelButton={false}
-  >
-    <FeedbackIframe on:finished={feedbackModal.hide} />
-  </ModalContent>
+  />
 </Modal>
 <Modal bind:this={publishModal}>
  <ModalContent
--- a/packages/builder/src/components/feedback/FeedbackIframe.svelte
+++ b/packages/builder/src/components/feedback/FeedbackIframe.svelte
@ -1,59 +0,0 @@
-<script>
-  import analytics from "analytics"
-  import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
-
-  const dispatch = createEventDispatcher()
-  const feedbackUrl = "https://feedback.budibase.com"
-
-  let iframe
-
-  // the app @ feedback.budibase.com expects to be loaded
-  // in an iframe, and posts messages back.
-  // this means that we can submit using the Builder's posthog setup
-  window.addEventListener(
-    "message",
-    function (ev) {
-      if (ev.origin !== feedbackUrl) return
-
-      if (ev.data.type === "loaded") {
-        iframe.setAttribute(
-          "style",
-          `height:${ev.data.height}px; width:${ev.data.width}px`
-        )
-      } else if (ev.data.type === "submitted") {
-        analytics.submitFeedback(ev.data.data)
-        $store.highlightFeedbackIcon = false
-        dispatch("finished")
-      }
-    },
-    false
-  )
-</script>
-
-<iframe src={feedbackUrl} title="feedback" bind:this={iframe}>
-  <html lang="html">
-    <style>
-      body {
-        display: flex;
-        height: 100%;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-      }
-    </style>
-    <body>
-      <div>Loading...</div>
-    </body>
-  </html>
-</iframe>
-
-<style>
-  iframe {
-    border-style: none;
-    height: auto;
-    overflow-y: hidden;
-    overflow-x: hidden;
-    min-width: 500px;
-  }
-</style>
--- a/packages/builder/src/components/feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/feedback/FeedbackNavLink.svelte
@ -1,52 +0,0 @@
-<script>
-  import { Icon, Popover } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import { onMount } from "svelte"
-
-  import FeedbackIframe from "./FeedbackIframe.svelte"
-  import analytics from "analytics"
-
-  const FIVE_MINUTES = 300000
-
-  let iconContainer
-  let popover
-
-  onMount(() => {
-    const interval = setInterval(() => {
-      store.update(state => {
-        state.highlightFeedbackIcon = analytics.highlightFeedbackIcon()
-        return state
-      })
-    }, FIVE_MINUTES)
-    return () => clearInterval(interval)
-  })
-</script>
-
-<div class="container" bind:this={iconContainer} on:click={popover.show}>
-  <Icon hoverable name="Feedback" />
-</div>
-<div class="iframe">
-  <Popover bind:this={popover} anchor={iconContainer} align="right">
-    <FeedbackIframe on:finished={popover.hide} />
-  </Popover>
-</div>
-
-<style>
-  .container {
-    cursor: pointer;
-    color: var(--grey-7);
-    margin: 0 12px 0 0;
-    font-weight: 600;
-    font-size: 1rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 24px;
-    width: 24px;
-  }
-
-  .iframe :global(.menu-container) {
-    background-color: white;
-  }
-</style>
--- a/packages/builder/src/components/feedback/NPSFeedbackForm.svelte
+++ b/packages/builder/src/components/feedback/NPSFeedbackForm.svelte
@ -0,0 +1,168 @@
+<script>
+  import analytics from "analytics"
+  import { createEventDispatcher } from "svelte"
+  import { fade, fly } from "svelte/transition"
+  import {
+    ActionButton,
+    ClearButton,
+    RadioGroup,
+    TextArea,
+    ButtonGroup,
+    Button,
+    Heading,
+    Detail,
+    Divider,
+    Layout,
+  } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+
+  let step = 0
+  let ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+  let options = [
+    "Importing / managing data",
+    "Designing",
+    "Automations",
+    "Managing users / groups",
+    "Deployment / hosting",
+    "Documentation",
+  ]
+
+  const dispatch = createEventDispatcher()
+
+  // Data to send off
+  let rating
+  let improvements
+  let comment
+
+  function selectNumber(n) {
+    rating = n
+    step = 1
+  }
+
+  function submitFeedback() {
+    analytics.submitFeedback({
+      rating,
+      improvements,
+      comment,
+    })
+    auth.updateSelf({
+      flags: {
+        feedbackSubmitted: true,
+      },
+    })
+    dispatch("complete")
+  }
+
+  function cancelFeedback() {
+    auth.updateSelf({
+      flags: {
+        feedbackSubmitted: true,
+      },
+    })
+    dispatch("complete")
+  }
+</script>
+
+<div
+  class="position"
+  in:fade={{ duration: 200 }}
+  out:fade|local={{ duration: 200 }}
+>
+  <div
+    class="feedback-frame"
+    in:fly={{ y: 30, duration: 200 }}
+    out:fly|local={{ y: 30, duration: 200 }}
+  >
+    <div class="close">
+      <ClearButton on:click={cancelFeedback} />
+    </div>
+    <Layout gap="XS">
+      {#if step === 0}
+        <Heading size="XS"
+          >How likely are you to recommend Budibase to a colleague?</Heading
+        >
+        <Divider />
+        <div class="ratings">
+          {#each ratings as number}
+            <ActionButton
+              size="L"
+              emphasized
+              selected={number === rating}
+              on:click={() => selectNumber(number)}
+            >
+              {number}
+            </ActionButton>
+          {/each}
+        </div>
+        <div class="footer">
+          <Detail size="S">NOT LIKELY</Detail>
+          <Detail size="S">EXTREMELY LIKELY</Detail>
+        </div>
+      {:else if step === 1}
+        <Heading size="XS">What could be improved most in Budibase?</Heading>
+        <Divider />
+        <RadioGroup bind:value={improvements} {options} />
+        <div class="footer">
+          <Detail size="S">STEP 2 OF 3</Detail>
+          <ButtonGroup>
+            <Button secondary on:click={() => (step -= 1)}>Previous</Button>
+            <Button
+              disabled={!improvements}
+              primary
+              on:click={() => (step += 1)}>Next</Button
+            >
+          </ButtonGroup>
+        </div>
+      {:else}
+        <Heading size="XS">How can we improve your experience?</Heading>
+        <Divider />
+        <TextArea bind:value={comment} placeholder="Add comments" />
+        <div class="footer">
+          <Detail size="S">STEP 3 OF 3</Detail>
+          <ButtonGroup>
+            <Button secondary on:click={() => (step -= 1)}>Previous</Button>
+            <Button disabled={!comment} cta on:click={submitFeedback}
+              >Complete</Button
+            >
+          </ButtonGroup>
+        </div>
+      {/if}
+    </Layout>
+  </div>
+</div>
+
+<style>
+  .feedback-frame :global(textarea) {
+    min-height: 180px !important;
+  }
+
+  .position {
+    position: absolute;
+    right: var(--spacing-l);
+    bottom: calc(5 * var(--spacing-xl));
+  }
+  .feedback-frame {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    min-width: 510px;
+    background: var(--background);
+    border-radius: var(--spectrum-global-dimension-size-50);
+    border: 2px solid var(--spectrum-global-color-blue-400);
+    padding: var(--spacing-xl);
+  }
+  .ratings {
+    display: flex;
+    justify-content: space-between;
+  }
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@ -1,7 +1,6 @@
 export const FIELDS = {
  STRING: {
    name: "Text",
-    icon: "ri-text",
    type: "string",
    constraints: {
      type: "string",
@ -11,7 +10,6 @@ export const FIELDS = {
  },
  LONGFORM: {
    name: "Long Form Text",
-    icon: "ri-file-text-line",
    type: "longform",
    constraints: {
      type: "string",
@ -21,7 +19,6 @@ export const FIELDS = {
  },
  OPTIONS: {
    name: "Options",
-    icon: "ri-list-check-2",
    type: "options",
    constraints: {
      type: "string",
@ -31,7 +28,6 @@ export const FIELDS = {
  },
  NUMBER: {
    name: "Number",
-    icon: "ri-number-1",
    type: "number",
    constraints: {
      type: "number",
@ -41,7 +37,6 @@ export const FIELDS = {
  },
  BOOLEAN: {
    name: "Boolean",
-    icon: "ri-toggle-line",
    type: "boolean",
    constraints: {
      type: "boolean",
@ -50,7 +45,6 @@ export const FIELDS = {
  },
  DATETIME: {
    name: "Date/Time",
-    icon: "ri-calendar-event-fill",
    type: "datetime",
    constraints: {
      type: "string",
@ -64,7 +58,6 @@ export const FIELDS = {
  },
  ATTACHMENT: {
    name: "Attachment",
-    icon: "ri-file-line",
    type: "attachment",
    constraints: {
      type: "array",
@ -73,7 +66,6 @@ export const FIELDS = {
  },
  LINK: {
    name: "Relationship",
-    icon: "ri-link",
    type: "link",
    constraints: {
      type: "array",
@ -82,7 +74,6 @@ export const FIELDS = {
  },
  FORMULA: {
    name: "Formula",
-    icon: "ri-braces-line",
    type: "formula",
    constraints: {
      type: "string",
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -5,7 +5,9 @@
  import DeployModal from "components/deploy/DeployModal.svelte"
  import RevertModal from "components/deploy/RevertModal.svelte"
  import VersionModal from "components/deploy/VersionModal.svelte"
+  import NPSFeedbackForm from "components/feedback/NPSFeedbackForm.svelte"
  import { get } from "builderStore/api"
+  import { auth } from "stores/portal"
  import { isActive, goto, layout } from "@roxi/routify"
  import Logo from "assets/bb-emblem.svg"
  import { capitalise } from "helpers"
@ -18,6 +20,15 @@
    $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
  )

+  let userShouldPostFeedback = false
+
+  function previewApp() {
+    if (!$auth?.user?.flags?.feedbackSubmitted) {
+      userShouldPostFeedback = true
+    }
+    window.open(`/${application}`)
+  }
+
  async function getPackage() {
    const res = await get(`/api/applications/${application}/appPackage`)
    const pkg = await res.json()
@ -83,13 +94,7 @@
      <div class="toprightnav">
        <VersionModal />
        <RevertModal />
-        <Icon
-          name="Play"
-          hoverable
-          on:click={() => {
-            window.open(`/${application}`)
-          }}
-        />
+        <Icon name="Play" hoverable on:click={previewApp} />
        <DeployModal />
      </div>
    </div>
@ -99,6 +104,10 @@
  <p>Something went wrong: {error.message}</p>
 {/await}

+{#if userShouldPostFeedback}
+  <NPSFeedbackForm on:complete={() => (userShouldPostFeedback = false)} />
+{/if}
+
 <style>
  .loading {
    min-height: 100%;
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -1141,147 +1141,6 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

-<<<<<<< HEAD
-=======
-"@budibase/auth@^0.9.66":
-  version "0.9.66"
-  resolved "https://registry.yarnpkg.com/@budibase/auth/-/auth-0.9.66.tgz#543eb6e0cbc0072d8567fdb5ce0f60a601e84f9f"
-  integrity sha512-hLVCzSmXk7X6oYpNQz06wYyXeN/eJP1AWKtfJfvUOCyE1zLDAxxkvk6UTnAZJ6Mj013QNjWfI9ohlncvY1vsmQ==
-  dependencies:
-    aws-sdk "^2.901.0"
-    bcryptjs "^2.4.3"
-    ioredis "^4.27.1"
-    jsonwebtoken "^8.5.1"
-    koa-passport "^4.1.4"
-    lodash "^4.17.21"
-    node-fetch "^2.6.1"
-    passport-google-auth "^1.0.2"
-    passport-google-oauth "^2.0.0"
-    passport-jwt "^4.0.0"
-    passport-local "^1.0.0"
-    sanitize-s3-objectkey "^0.0.1"
-    tar-fs "^2.1.1"
-    uuid "^8.3.2"
-    zlib "^1.0.5"
-
-"@budibase/bbui@^0.9.66":
-  version "0.9.66"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.66.tgz#aba79def0d90c2fcb322ae787c06b47f6c1c3814"
-  integrity sha512-2P7SFbrw5/E8g4eSZ4OBuJOMDQPyjZBTcZkGtMIP2BlGH3Pn6OilYrH9OmHhn0zebzFA4hGoRgrT2TOiMBRCrg==
-  dependencies:
-    "@adobe/spectrum-css-workflow-icons" "^1.2.1"
-    "@spectrum-css/actionbutton" "^1.0.1"
-    "@spectrum-css/actiongroup" "^1.0.1"
-    "@spectrum-css/avatar" "^3.0.2"
-    "@spectrum-css/button" "^3.0.1"
-    "@spectrum-css/buttongroup" "^3.0.2"
-    "@spectrum-css/checkbox" "^3.0.2"
-    "@spectrum-css/dialog" "^3.0.1"
-    "@spectrum-css/divider" "^1.0.1"
-    "@spectrum-css/dropzone" "^3.0.2"
-    "@spectrum-css/fieldgroup" "^3.0.2"
-    "@spectrum-css/fieldlabel" "^3.0.1"
-    "@spectrum-css/icon" "^3.0.1"
-    "@spectrum-css/illustratedmessage" "^3.0.2"
-    "@spectrum-css/inputgroup" "^3.0.2"
-    "@spectrum-css/label" "^2.0.10"
-    "@spectrum-css/link" "^3.1.1"
-    "@spectrum-css/menu" "^3.0.1"
-    "@spectrum-css/modal" "^3.0.1"
-    "@spectrum-css/pagination" "^3.0.3"
-    "@spectrum-css/picker" "^1.0.1"
-    "@spectrum-css/popover" "^3.0.1"
-    "@spectrum-css/progressbar" "^1.0.2"
-    "@spectrum-css/progresscircle" "^1.0.2"
-    "@spectrum-css/radio" "^3.0.2"
-    "@spectrum-css/search" "^3.0.2"
-    "@spectrum-css/sidenav" "^3.0.2"
-    "@spectrum-css/statuslight" "^3.0.2"
-    "@spectrum-css/switch" "^1.0.2"
-    "@spectrum-css/table" "^3.0.1"
-    "@spectrum-css/tabs" "^3.0.1"
-    "@spectrum-css/tags" "^3.0.2"
-    "@spectrum-css/textfield" "^3.0.1"
-    "@spectrum-css/toast" "^3.0.1"
-    "@spectrum-css/tooltip" "^3.0.3"
-    "@spectrum-css/treeview" "^3.0.2"
-    "@spectrum-css/typography" "^3.0.1"
-    "@spectrum-css/underlay" "^2.0.9"
-    "@spectrum-css/vars" "^3.0.1"
-    dayjs "^1.10.4"
-    svelte-flatpickr "^3.1.0"
-    svelte-portal "^1.0.0"
-
-"@budibase/client@^0.9.66":
-  version "0.9.66"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.9.66.tgz#04a0838352169607fc005f9910e7c2d485fdbe06"
-  integrity sha512-2SJWAZjqi5DUdAJBYmyfKuCw1pHmgzdjEHgU0kP5MZpHxcllKcyQCTELRVFRebz74PR9GibjvNNUIexQQElEVQ==
-  dependencies:
-    "@budibase/bbui" "^0.9.66"
-    "@budibase/standard-components" "^0.9.66"
-    "@budibase/string-templates" "^0.9.66"
-    regexparam "^1.3.0"
-    shortid "^2.2.15"
-    svelte-spa-router "^3.0.5"
-
-"@budibase/handlebars-helpers@^0.11.4":
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/@budibase/handlebars-helpers/-/handlebars-helpers-0.11.4.tgz#8acfa2ee84134f7be4b2906e710fce6d25c5d000"
-  integrity sha512-AJNJYlJnxZmn9QJ8tBl8nrm4YxbwHP4AR0pbiVGK+EoOylkNBlUnZ/QDL1VyqM5fTkAE/Z2IZVLKrrG3kxuWLA==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-sort "^0.1.4"
-    define-property "^1.0.0"
-    extend-shallow "^3.0.2"
-    "falsey" "^0.3.2"
-    for-in "^1.0.2"
-    for-own "^1.0.0"
-    get-object "^0.2.0"
-    get-value "^2.0.6"
-    handlebars "^4.0.11"
-    handlebars-utils "^1.0.6"
-    has-value "^1.0.0"
-    helper-date "^1.0.1"
-    helper-markdown "^1.0.0"
-    helper-md "^0.2.2"
-    html-tag "^2.0.0"
-    is-even "^1.0.0"
-    is-glob "^4.0.0"
-    is-number "^4.0.0"
-    kind-of "^6.0.0"
-    logging-helpers "^1.0.0"
-    micromatch "^3.1.4"
-    relative "^3.0.2"
-    striptags "^3.1.0"
-    to-gfm-code-block "^0.1.1"
-    year "^0.2.1"
-
-"@budibase/standard-components@^0.9.66":
-  version "0.9.66"
-  resolved "https://registry.yarnpkg.com/@budibase/standard-components/-/standard-components-0.9.66.tgz#79ee98e0b5b71801360594b59966f203197eb6ae"
-  integrity sha512-iq+ninGbe5GqNRk8qxlgXXH7hgCFJ90+Xw1zhYRtIE//BmeGYHxEJjDTjG+7qSHPvp2ZB4KkLiD/y7/H0zwuEA==
-  dependencies:
-    "@budibase/bbui" "^0.9.66"
-    "@spectrum-css/link" "^3.1.3"
-    "@spectrum-css/page" "^3.0.1"
-    "@spectrum-css/vars" "^3.0.1"
-    apexcharts "^3.22.1"
-    dayjs "^1.10.5"
-    svelte-apexcharts "^1.0.2"
-    svelte-flatpickr "^3.1.0"
-
-"@budibase/string-templates@^0.9.66":
-  version "0.9.66"
-  resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-0.9.66.tgz#700145549f1636cb46f88b94ef23b3a064058b75"
-  integrity sha512-eFFBTTKlRpzNSNwKGOclRkXlrKr5UxV3sCU2QfskPXai4hx9RtD/LyKKSlLshVU1ZjwfTCor9cm7f/hhxRzuRA==
-  dependencies:
-    "@budibase/handlebars-helpers" "^0.11.4"
-    dayjs "^1.10.4"
-    handlebars "^4.7.6"
-    handlebars-utils "^1.0.6"
-    lodash "^4.17.20"
-
->>>>>>> 2258f43bc104946d9960d6c91722defc4a16f554
 "@cnakazawa/watch@^1.0.3":
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"