Merge branch 'develop' of github.com:Budibase/budibase into feature/query-variables

.github/workflows/deploy-cloud.yaml

@@ -0,0 +1,41 @@
+name: Budibase Cloud Deploy
+
+on:
+ workflow_dispatch:
+  inputs:
+    version:
+      description: Budibase release version. For example - 1.0.0
+      required: false
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Pull values.yaml from budibase-infra
+        run: | 
+          curl -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \                                                                                [c3a7a9d12]
+          -H 'Accept: application/vnd.github.v3.raw' \
+          -o values.production.yaml \
+          -L https://api.github.com/repos/budibase/budibase-infra/contents/kubernetes/values.yaml
+      
+      - name: Get the latest budibase release version if not specifically set
+        if: ${{ !github.event.inputs.version }}
+        id: version
+        run: | 
+           sudo apt-get install -y jq 
+           release_version=$(cat lerna.json | jq -r '.version')
+           echo "::set-output name=release_version::$release_version"
+
+      - uses: peymanmortazavi/eks-helm-deploy@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: eu-west-1
+          cluster-name: budibase-eks-production
+          config-files: values.production.yaml
+          namespace: budibase
+          values: appVersion=v${{ github.event.inputs.version || github.steps.version.outputs.release_version }}
+          name: budibase-prod

.github/workflows/release-charts.yml

@@ -1,42 +0,0 @@
-name: Budibase Release Helm Charts
-
-on:
- workflow_dispatch:
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - run: yarn
-      - run: yarn bootstrap
-
-      - name: 'Get Previous tag'
-        id: previoustag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
-      
-      - name: Install Helm
-        uses: azure/setup-helm@v1
-        with:
-          version: v3.4.0
-
-      # - run: yarn release:helm
-      #   env:
-      #     BUDIBASE_RELEASE_VERSION: ${{ steps.previoustag.outputs.tag }}
-
-      - name: Configure Git
-        run: |
-          git config user.name "Budibase Helm Bot"
-          git config user.email "<>"
-      
-      - name: Run chart-releaser
-        uses: helm/chart-releaser-action@v1.2.1
-        env:
-          CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/release-selfhost.yml

@@ -1,45 +1,60 @@
-name: Budibase Release Docker Selfhost
+name: Budibase Release Selfhost
 
 on:
  workflow_dispatch:
 
-env:
-  POSTHOG_TOKEN: ${{ secrets.POSTHOG_TOKEN }}
-  INTERCOM_TOKEN: ${{ secrets.INTERCOM_TOKEN }}
-  POSTHOG_URL: ${{ secrets.POSTHOG_URL }}
-
 jobs:
   release:
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - run: yarn
-      - run: yarn bootstrap
 
-      - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v1
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: eu-west-1
-
-      - name: 'Get Previous tag'
-        id: previoustag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
-
-      - name: Build/release Docker images (Self Host)
+      - name: Tag and release Docker images (Self Host)
         run: | 
           docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
-          yarn build
-          yarn build:docker:selfhost
+
+          # Get latest release version
+          sudo apt-get install -y jq 
+          release_version=$(cat lerna.json | jq -r '.version')
+          echo "::set-output name=release_version::$release_version"
+          release_tag=v$release_version
+
+          # Pull apps and worker images
+          docker pull budibase/apps:$release_tag
+          docker pull budibase/worker:$release_tag
+
+          # Tag apps and worker images
+          docker tag budibase/apps:$release_tag $SELF_HOST_TAG
+          docker tag budibase/worker:$release_tag $SELF_HOST_TAG
+          
+          # Push images
+          docker push --all-tags budibase/apps
+          docker push --all-tags budibase/worker
         env:
           DOCKER_USER: ${{ secrets.DOCKER_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKER_API_KEY }}
-          BUDIBASE_RELEASE_VERSION: ${{ steps.previoustag.outputs.tag }}
-          
+          SELF_HOST_TAG: latest
+      
+      - name: Setup Helm 
+        uses: azure/setup-helm@v1
+        id: helm-install
+        
+      # - name: Build and release helm chart
+      #   run: | 
+      #     git config user.name "Budibase Helm Bot"
+      #     git config user.email "<>"
+      #     helm package charts/budibase
+      #     git checkout gh-pages
+      #     mv budibase-${{ github.steps.version.outputs.release_version }}.tgz docs
+      #     git add -A
+      #     git commit -m "Helm Release: ${{ github.steps.version.outputs.release_version }}"
+      #     git push
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      # - name: Perform github release
+      #   run: | 
+      #     echo release
+      #   env:
+      #     GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/release.yml

@@ -57,4 +57,25 @@ jobs:
           DOCKER_PASSWORD: ${{ secrets.DOCKER_API_KEY }}
           BUDIBASE_RELEASE_VERSION: ${{ steps.previoustag.outputs.tag }}
       
-      # Release to pre-prod environment
+      # - name: Pull values.yaml from budibase-infra
+      #   run: | 
+      #     curl -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \                                                                                [c3a7a9d12]
+      #     -H 'Accept: application/vnd.github.v3.raw' \
+      #     -o values.preprod.yaml \
+      #     -L https://api.github.com/repos/budibase/budibase-infra/contents/kubernetes/values.preprod.yaml
+
+      # - name: Deploy to Preprod Environment
+      #   uses: deliverybot/helm@v1
+      #   with:
+      #     release: budibase-preprod
+      #     namespace: budibase
+      #     chart: charts/budibase
+      #     token: ${{ github.token }}
+      #     values: |
+      #       appVersion: ${{ steps.previoustag.outputs.tag }}
+      #     value-files: >-
+      #     [
+      #       "values.preprod.yaml"
+      #     ]
+      #   env:
+      #     KUBECONFIG_FILE: '${{ secrets.PREPROD_KUBECONFIG }}'

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.22",
+  "version": "1.0.23",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",

packages/bbui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",

packages/bbui/src/Layout/Layout.svelte

@@ -63,6 +63,9 @@
   .gap-L {
     grid-gap: var(--spectrum-alias-grid-gutter-medium);
   }
+  .gap-XL {
+    grid-gap: var(--spectrum-alias-grid-gutter-large);
+  }
   .horizontal.gap-S :global(*) + :global(*) {
     margin-left: var(--spectrum-alias-grid-gutter-xsmall);
   }

packages/bbui/src/Typography/Detail.svelte

@@ -13,3 +13,9 @@
 >
   <slot />
 </p>
+
+<style>
+  p {
+    font-weight: 600;
+  }
+</style>

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.0.22",
-    "@budibase/client": "^1.0.22",
+    "@budibase/bbui": "^1.0.23",
+    "@budibase/client": "^1.0.23",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^1.0.22",
+    "@budibase/string-templates": "^1.0.23",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",

packages/builder/src/components/start/AppRow.svelte

@@ -63,12 +63,13 @@
 </div>
 <div>
   <Button
+    size="S"
     disabled={app.lockedOther}
     on:click={() => editApp(app)}
-    size="S"
-    quiet
-    secondary>Open</Button
+    secondary
   >
+    Open
+  </Button>
   <ActionMenu align="right">
     <Icon hoverable slot="control" name="More" />
     {#if app.deployed}
@@ -91,7 +92,7 @@
       <MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
       <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
     {/if}
-    <MenuItem on:click={() => editIcon(app)} icon="Brush">Edit Icon</MenuItem>
+    <MenuItem on:click={() => editIcon(app)} icon="Brush">Edit icon</MenuItem>
   </ActionMenu>
 </div>
 

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -4,10 +4,11 @@
 
   export let app
   let modal
-  $: selectedIcon = app?.icon?.name
+  $: selectedIcon = app?.icon?.name || "Apps"
   $: selectedColor = app?.icon?.color
 
   let iconsList = [
+    "Apps",
     "Actions",
     "ConversionFunnel",
     "App",
@@ -31,7 +32,6 @@
     "GraphDonut",
     "GraphBarHorizontal",
     "Demographic",
-    "Apps",
   ]
   export const show = () => {
     modal.show()
@@ -68,13 +68,13 @@
   >
     <div class="scrollable-icons">
       <div class="title-spacing">
-        <Label>Select an Icon</Label>
+        <Label>Select an icon</Label>
       </div>
       <div class="grid">
         {#each iconsList as item}
           <div
             class="icon-item"
-            style="color: {item === selectedIcon ? selectedColor : ''}"
+            class:selected={item === selectedIcon}
             on:click={() => (selectedIcon = item)}
           >
             <Icon name={item} />
@@ -84,7 +84,7 @@
     </div>
     <div class="color-selection">
       <div>
-        <Label>Select a Color</Label>
+        <Label>Select a color</Label>
       </div>
       <div class="color-selection-item">
         <ColorPicker
@@ -124,4 +124,7 @@
   .icon-item {
     cursor: pointer;
   }
+  .icon-item.selected {
+    color: var(--spectrum-global-color-blue-600);
+  }
 </style>

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -4,7 +4,6 @@
     Layout,
     Detail,
     Button,
-    ButtonGroup,
     Input,
     Select,
     Modal,
@@ -43,6 +42,7 @@
   let cloud = $admin.cloud
   let appName = ""
   let creatingFromTemplate = false
+
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
   $: filteredApps = enrichedApps.filter(app =>
     app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -280,99 +280,104 @@
 </script>
 
 <Page wide>
-  <Layout noPadding>
+  <Layout noPadding gap="XL">
     <div class="title">
-      <Heading size="S">Welcome to Budibase</Heading>
+      <Layout noPadding gap="XS">
+        <Heading size="M">Welcome to Budibase</Heading>
+        <Body size="S">
+          Manage your apps and get a head start with templates
+        </Body>
+      </Layout>
 
-      <ButtonGroup>
+      <div class="buttons">
         {#if cloud}
-          <Button secondary on:click={initiateAppsExport}>Export apps</Button>
+          <Button icon="Export" quiet secondary on:click={initiateAppsExport}>
+            Export apps
+          </Button>
         {/if}
-        <Button icon="Import" quiet secondary on:click={initiateAppImport}
-          >Import app</Button
-        >
-        <Button icon="Add" cta on:click={initiateAppCreation}>Create app</Button
-        >
-      </ButtonGroup>
+        <Button icon="Import" quiet secondary on:click={initiateAppImport}>
+          Import app
+        </Button>
+        <Button icon="Add" cta on:click={initiateAppCreation}>
+          Create app
+        </Button>
+      </div>
     </div>
 
-    <div class="title-text">
-      <Body size="S">Manage your apps and get a head start with templates</Body>
-    </div>
-    <Detail>Quick Start Templates</Detail>
-    <div class="grid">
-      {#each $templates as item}
-        <div
-          on:click={() => {
-            template = item
-            creationModal.show()
-            creatingApp = true
-          }}
-          class="template-card"
-        >
-          <div class="card-body">
-            <div style="color: {item.background}" class="iconAlign">
-              <svg
-                width="26px"
-                height="26px"
-                class="spectrum-Icon"
-                style="color:{item.background};"
-                focusable="false"
-              >
-                <use xlink:href="#spectrum-icon-18-{item.icon}" />
-              </svg>
-            </div>
-            <div class="iconAlign">
-              <Body weight="900" size="S">{item.name}</Body>
-              <div style="font-size: 10px;">
-                <Body size="S">{item.category.toUpperCase()}</Body>
+    <Layout noPadding gap="S">
+      <Detail size="L">Quick start templates</Detail>
+      <div class="grid">
+        {#each $templates as item}
+          <div
+            on:click={() => {
+              template = item
+              creationModal.show()
+              creatingApp = true
+            }}
+            class="template-card"
+          >
+            <div class="card-body">
+              <div style="color: {item.background}" class="iconAlign">
+                <svg
+                  width="26px"
+                  height="26px"
+                  class="spectrum-Icon"
+                  style="color:{item.background};"
+                  focusable="false"
+                >
+                  <use xlink:href="#spectrum-icon-18-{item.icon}" />
+                </svg>
+              </div>
+              <div class="iconAlign">
+                <Body weight="900" size="S">{item.name}</Body>
+                <div style="font-size: 10px;">
+                  <Body size="S">{item.category.toUpperCase()}</Body>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      {/each}
-    </div>
-    {#if loaded && enrichedApps.length}
-      <div class="title">
-        <Detail>My Apps</Detail>
-      </div>
-      <div class="filter">
-        <div class="select">
-          <Select
-            quiet
-            autoWidth
-            bind:value={sortBy}
-            placeholder={null}
-            options={[
-              { label: "Sort by name", value: "name" },
-              { label: "Sort by recently updated", value: "updated" },
-              { label: "Sort by status", value: "status" },
-            ]}
-          />
-          <div class="desktop-search">
-            <Search quiet placeholder="Search" bind:value={searchTerm} />
-          </div>
-        </div>
-      </div>
-      <div class="mobile-search">
-        <Search placeholder="Search" bind:value={searchTerm} />
-      </div>
-      <div class="appTable">
-        {#each filteredApps as app (app.appId)}
-          <AppRow
-            {releaseLock}
-            {editIcon}
-            {app}
-            {unpublishApp}
-            {viewApp}
-            {editApp}
-            {exportApp}
-            {deleteApp}
-            {updateApp}
-          />
         {/each}
       </div>
+    </Layout>
+
+    {#if loaded && enrichedApps.length}
+      <Layout noPadding gap="S">
+        <div class="title">
+          <Detail size="L">My apps</Detail>
+          <div class="filter">
+            <Select
+              quiet
+              autoWidth
+              bind:value={sortBy}
+              placeholder={null}
+              options={[
+                { label: "Sort by name", value: "name" },
+                { label: "Sort by recently updated", value: "updated" },
+                { label: "Sort by status", value: "status" },
+              ]}
+            />
+            <Search placeholder="Search" bind:value={searchTerm} />
+          </div>
+        </div>
+
+        <div class="appTable">
+          {#each filteredApps as app (app.appId)}
+            <AppRow
+              {releaseLock}
+              {editIcon}
+              {app}
+              {unpublishApp}
+              {viewApp}
+              {editApp}
+              {exportApp}
+              {deleteApp}
+              {updateApp}
+            />
+          {/each}
+        </div>
+      </Layout>
     {/if}
+
     {#if !enrichedApps.length && !creatingApp && loaded}
       <div class="empty-wrapper">
         <Modal inline>
@@ -380,6 +385,7 @@
         </Modal>
       </div>
     {/if}
+
     {#if creatingFromTemplate}
       <div class="empty-wrapper">
         <p>Creating your Budibase app from your selected template...</p>
@@ -427,68 +433,61 @@
 <ChooseIconModal app={selectedApp} bind:this={iconModal} />
 
 <style>
-  .title,
-  .filter {
+  .title {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 5px;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
   }
-
-  @media only screen and (max-width: 560px) {
-    .title {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-    .grid {
-      grid-template-columns: repeat(2, 1fr);
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
+  }
+  @media (max-width: 640px) {
+    .buttons {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
     }
   }
 
-  .iconAlign {
-    padding: 0 0 0 var(--spacing-m);
-    display: inline-block;
+  .filter {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+
+  .grid {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
   }
   .template-card {
     height: 80px;
-    width: 270px;
     border-radius: var(--border-radius-s);
-    margin-bottom: var(--spacing-m);
     border: 1px solid var(--spectrum-global-color-gray-300);
     cursor: pointer;
     display: flex;
   }
 
-  .title-text {
-    margin-top: calc(var(--spacing-xl) * -1);
+  .template-card:hover {
+    background: var(--spectrum-alias-background-color-tertiary);
   }
-
   .card-body {
     display: flex;
     align-items: center;
     padding: 12px;
   }
-
-  .grid {
-    display: grid;
-    grid-gap: 5px;
-    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-  }
-
-  @media (min-width: 200px) {
-  }
-
-  .select {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-gap: 30px;
-  }
-  .filter :global(.spectrum-ActionGroup) {
-    flex-wrap: nowrap;
-  }
-  .mobile-search {
-    display: none;
+  .iconAlign {
+    padding: 0 0 0 var(--spacing-m);
+    display: inline-block;
   }
 
   .appTable {
@@ -511,6 +510,12 @@
   .appTable :global(> div) {
     border-bottom: var(--border-light);
   }
+  @media (max-width: 640px) {
+    .appTable {
+      grid-template-columns: 1fr auto;
+    }
+  }
+
   .empty-wrapper {
     flex: 1 1 auto;
     height: 100%;
@@ -519,20 +524,4 @@
     justify-content: center;
     align-items: center;
   }
-
-  @media (max-width: 640px) {
-    .appTable {
-      grid-template-columns: 1fr auto;
-    }
-    .desktop-search {
-      display: none;
-    }
-    .mobile-search {
-      display: block;
-    }
-  }
-
-  .template-card:hover {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
 </style>

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^1.0.22",
+    "@budibase/bbui": "^1.0.23",
     "@budibase/standard-components": "^0.9.139",
-    "@budibase/string-templates": "^1.0.22",
+    "@budibase/string-templates": "^1.0.23",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Budibase Web Server",
   "main": "src/index.ts",
   "repository": {
@@ -69,10 +69,9 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@apidevtools/swagger-parser": "^10.0.3",
-    "@budibase/auth": "^1.0.22",
-    "@budibase/client": "^1.0.22",
-    "@budibase/string-templates": "^1.0.22",
+    "@budibase/auth": "^1.0.23",
+    "@budibase/client": "^1.0.23",
+    "@budibase/string-templates": "^1.0.23",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",

packages/string-templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",

packages/worker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -29,8 +29,8 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@budibase/auth": "^1.0.22",
-    "@budibase/string-templates": "^1.0.22",
+    "@budibase/auth": "^1.0.23",
+    "@budibase/string-templates": "^1.0.23",
     "@koa/router": "^8.0.0",
     "@sentry/node": "^6.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",