Merge branch 'master' into chore/lint_imports

lerna.json

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

packages/bbui/src/Link/Link.svelte

@@ -16,10 +16,9 @@
 
   const dispatch = createEventDispatcher()
 
-  const onClick = e => {
+  const onClick = () => {
     if (!disabled) {
       dispatch("click")
-      e.stopPropagation()
     }
   }
 </script>

packages/builder/src/components/deploy/AppActions.svelte

@@ -20,7 +20,12 @@
   import analytics, { Events, EventSource } from "analytics"
   import { API } from "api"
   import { apps } from "stores/portal"
-  import { deploymentStore, store, isOnlyUser } from "builderStore"
+  import {
+    deploymentStore,
+    store,
+    isOnlyUser,
+    sortedScreens,
+  } from "builderStore"
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
   import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
   import { goto } from "@roxi/routify"
@@ -48,7 +53,7 @@
     $store.upgradableVersion &&
     $store.version &&
     $store.upgradableVersion !== $store.version
-  $: canPublish = !publishing && loaded
+  $: canPublish = !publishing && loaded && $sortedScreens.length > 0
   $: lastDeployed = getLastDeployedString($deploymentStore)
 
   const initialiseApp = async () => {
@@ -175,7 +180,12 @@
 
     <div class="app-action-button preview">
       <div class="app-action">
-        <ActionButton quiet icon="PlayCircle" on:click={previewApp}>
+        <ActionButton
+          disabled={$sortedScreens.length === 0}
+          quiet
+          icon="PlayCircle"
+          on:click={previewApp}
+        >
           Preview
         </ActionButton>
       </div>

packages/builder/src/components/integration/RestQueryViewer.svelte

@@ -404,7 +404,7 @@
     datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
     const datasourceUrl = datasource?.config.url
     const qs = query?.fields.queryString
-    breakQs = restUtils.breakQueryString(encodeURI(qs))
+    breakQs = restUtils.breakQueryString(encodeURI(qs ?? ""))
     breakQs = runtimeToReadableMap(mergedBindings, breakQs)
 
     const path = query.fields.path

packages/builder/src/pages/builder/portal/apps/[appId]/ErrorSVG.svelte

@@ -0,0 +1,65 @@
+<xml version="1.0" />
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  enable-background="new 0 0 48 48"
+  height="48px"
+  viewBox="0 0 48 48"
+  width="48px"
+  xml:space="preserve"
+>
+  <g>
+    <g>
+      <path
+        d="M9,42H3c-0.552,0-1-0.449-1-1v-3.5C2,37.224,2.224,37,2.5,37S3,37.224,3,37.5V41h6    c0.276,0,0.5,0.224,0.5,0.5S9.276,42,9,42z"
+      />
+      <path
+        d="M45,42h-6c-0.276,0-0.5-0.224-0.5-0.5S38.724,41,39,41h6V13H3v27c0,0.276-0.224,0.5-0.5,0.5S2,40.276,2,40    V12h44v29C46,41.551,45.552,42,45,42z"
+      />
+      <g>
+        <path
+          d="M45.5,13h-43C2.224,13,2,12.776,2,12.5v-5C2,6.673,2.673,6,3.5,6h41C45.327,6,46,6.673,46,7.5v5     C46,12.776,45.776,13,45.5,13z M3,12h42V7.5C45,7.224,44.775,7,44.5,7h-41C3.225,7,3,7.224,3,7.5V12z"
+        />
+      </g>
+      <g>
+        <g>
+          <path
+            d="M16.5,11c-0.827,0-1.5-0.673-1.5-1.5S15.673,8,16.5,8S18,8.673,18,9.5S17.327,11,16.5,11z M16.5,9      C16.225,9,16,9.224,16,9.5s0.225,0.5,0.5,0.5S17,9.776,17,9.5S16.775,9,16.5,9z"
+          />
+        </g>
+        <g>
+          <path
+            d="M11.5,11c-0.827,0-1.5-0.673-1.5-1.5S10.673,8,11.5,8S13,8.673,13,9.5S12.327,11,11.5,11z M11.5,9      C11.225,9,11,9.224,11,9.5s0.225,0.5,0.5,0.5S12,9.776,12,9.5S11.775,9,11.5,9z"
+          />
+        </g>
+        <g>
+          <path
+            d="M6.5,11C5.673,11,5,10.327,5,9.5S5.673,8,6.5,8S8,8.673,8,9.5S7.327,11,6.5,11z M6.5,9      C6.225,9,6,9.224,6,9.5S6.225,10,6.5,10S7,9.776,7,9.5S6.775,9,6.5,9z"
+          />
+        </g>
+      </g>
+    </g>
+    <g>
+      <g>
+        <path
+          d="M35.696,44H12.304c-0.728,0-1.313-0.284-1.605-0.779c-0.289-0.489-0.259-1.126,0.084-1.749L22.58,19.996     c0.709-1.285,2.132-1.285,2.839,0l11.799,21.477v0c0.343,0.623,0.373,1.26,0.084,1.749C37.01,43.716,36.424,44,35.696,44z M24,20     c-0.176,0-0.379,0.179-0.544,0.478L11.659,41.954c-0.168,0.306-0.205,0.582-0.101,0.758C11.667,42.895,11.938,43,12.304,43     h23.393c0.365,0,0.637-0.105,0.745-0.288c0.104-0.177,0.067-0.453-0.101-0.758v0L24.543,20.478C24.379,20.179,24.176,20,24,20z"
+        />
+      </g>
+      <g>
+        <path
+          d="M24,36L24,36c-0.225,0-0.421-0.15-0.481-0.366C23.456,35.412,22,30.169,22,28c0-1.103,0.897-2,2-2     s2,0.897,2,2c0,2.232-1.457,7.417-1.519,7.636C24.42,35.851,24.224,36,24,36z M24,27c-0.552,0-1,0.449-1,1     c0,1.266,0.569,3.793,1.002,5.531C24.435,31.806,25,29.301,25,28C25,27.449,24.552,27,24,27z"
+        />
+      </g>
+      <g>
+        <path
+          d="M24,41c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S25.103,41,24,41z M24,38c-0.552,0-1,0.449-1,1     s0.448,1,1,1s1-0.449,1-1S24.552,38,24,38z"
+        />
+      </g>
+    </g>
+  </g>
+</svg>
+
+<style>
+  svg {
+    fill: var(--ink);
+  }
+</style>

packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte

@@ -1,8 +1,10 @@
 <script>
   import { params, goto } from "@roxi/routify"
   import { apps, auth, sideBarCollapsed } from "stores/portal"
-  import { ActionButton } from "@budibase/bbui"
+  import { Link, Body, ActionButton } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
+  import { API } from "api"
+  import ErrorSVG from "./ErrorSVG.svelte"
 
   $: app = $apps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
@@ -14,6 +16,18 @@
     }
     return `/${app.devId}`
   }
+
+  let noScreens = false
+
+  // Normally fetched in builder/src/pages/builder/app/[application]/_layout.svelte
+  const fetchScreens = async appId => {
+    if (!appId) return
+
+    const pkg = await API.fetchAppPackage(appId)
+    noScreens = pkg.screens.length === 0
+  }
+
+  $: fetchScreens(app?.devId)
 </script>
 
 <div class="container">
@@ -45,6 +59,7 @@
       </ActionButton>
     {/if}
     <ActionButton
+      disabled={noScreens}
       quiet
       icon="LinkOut"
       on:click={() => window.open(iframeUrl, "_blank")}
@@ -52,7 +67,19 @@
       Fullscreen
     </ActionButton>
   </div>
+  {#if noScreens}
+    <div class="noScreens">
+      <ErrorSVG />
+      <Body>You haven't added any screens to your app yet.</Body>
+      <Body>
+        <Link size="L" href={`/builder/app/${app.devId}/design`}
+          >Click here</Link
+        > to add some.
+      </Body>
+    </div>
+  {:else}
     <iframe src={iframeUrl} title={app.name} />
+  {/if}
 </div>
 
 <style>
@@ -64,6 +91,7 @@
     align-items: stretch;
     padding: 0 var(--spacing-l) var(--spacing-l) var(--spacing-l);
   }
+
   .header {
     display: flex;
     justify-content: flex-start;
@@ -71,9 +99,27 @@
     gap: var(--spacing-xs);
     flex: 0 0 50px;
   }
+
   iframe {
     flex: 1 1 auto;
     border-radius: var(--spacing-s);
     border: 1px solid var(--spectrum-global-color-gray-300);
   }
+
+  .noScreens {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .noScreens :global(svg) {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 10px;
+  }
 </style>

packages/shared-core/src/filters.ts

@@ -9,6 +9,7 @@ import {
   SortDirection,
   SortType,
 } from "@budibase/types"
+import dayjs from "dayjs"
 import { OperatorOptions, SqlNumberTypeRangeMap } from "./constants"
 import { deepGet } from "./helpers"
 
@@ -302,13 +303,20 @@ export const runLuceneQuery = (docs: any[], query?: SearchQuery) => {
       docValue: string | number | null,
       testValue: { low: number; high: number }
     ) => {
+      if (docValue == null || docValue === "") {
+        return true
+      }
+      if (!isNaN(+docValue)) {
+        return +docValue < testValue.low || +docValue > testValue.high
+      }
+      if (dayjs(docValue).isValid()) {
         return (
-        docValue == null ||
+          new Date(docValue).getTime() < new Date(testValue.low).getTime() ||
-        docValue === "" ||
+          new Date(docValue).getTime() > new Date(testValue.high).getTime()
-        +docValue < testValue.low ||
-        +docValue > testValue.high
         )
       }
+      throw "Cannot perform range filter - invalid type."
+    }
   )
 
   // Process an equal match (fails if the value is different)

packages/shared-core/src/tests/filters.test.ts

@@ -0,0 +1,174 @@
+import { SearchQuery, SearchQueryOperators } from "@budibase/types"
+import { runLuceneQuery } from "../filters"
+import { expect, describe, it } from "vitest"
+
+describe("runLuceneQuery", () => {
+  const docs = [
+    {
+      order_id: 1,
+      customer_id: 259,
+      order_status: 4,
+      order_date: "2016-01-01T00:00:00.000Z",
+      required_date: "2016-01-03T00:00:00.000Z",
+      shipped_date: "2016-01-03T00:00:00.000Z",
+      store_id: 1,
+      staff_id: 2,
+      description: "Large box",
+      label: undefined,
+    },
+    {
+      order_id: 2,
+      customer_id: 1212,
+      order_status: 4,
+      order_date: "2016-01-05T00:00:00.000Z",
+      required_date: "2016-01-04T00:00:00.000Z",
+      shipped_date: "2016-01-03T00:00:00.000Z",
+      store_id: 2,
+      staff_id: 6,
+      description: "Small box",
+      label: "FRAGILE",
+    },
+    {
+      order_id: 3,
+      customer_id: 523,
+      order_status: 5,
+      order_date: "2016-01-12T00:00:00.000Z",
+      required_date: "2016-01-05T00:00:00.000Z",
+      shipped_date: "2016-01-03T00:00:00.000Z",
+      store_id: 2,
+      staff_id: 7,
+      description: "Heavy box",
+      label: "HEAVY",
+    },
+  ]
+
+  function buildQuery(
+    filterKey: string,
+    value: { [key: string]: any }
+  ): SearchQuery {
+    const query: SearchQuery = {
+      string: {},
+      fuzzy: {},
+      range: {},
+      equal: {},
+      notEqual: {},
+      empty: {},
+      notEmpty: {},
+      contains: {},
+      notContains: {},
+      oneOf: {},
+      containsAny: {},
+    }
+    query[filterKey as SearchQueryOperators] = value
+    return query
+  }
+
+  it("should return input docs if no search query is provided", () => {
+    expect(runLuceneQuery(docs)).toBe(docs)
+  })
+
+  it("should return matching rows for equal filter", () => {
+    const query = buildQuery("equal", {
+      order_status: 4,
+    })
+    expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([1, 2])
+  })
+
+  it("should return matching row for notEqual filter", () => {
+    const query = buildQuery("notEqual", {
+      order_status: 4,
+    })
+    expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([3])
+  })
+
+  it("should return starts with matching rows for fuzzy and string filters", () => {
+    expect(
+      runLuceneQuery(
+        docs,
+        buildQuery("fuzzy", {
+          description: "sm",
+        })
+      ).map(row => row.description)
+    ).toEqual(["Small box"])
+    expect(
+      runLuceneQuery(
+        docs,
+        buildQuery("string", {
+          description: "SM",
+        })
+      ).map(row => row.description)
+    ).toEqual(["Small box"])
+  })
+
+  it("should return rows within a range filter", () => {
+    const query = buildQuery("range", {
+      customer_id: {
+        low: 500,
+        high: 1000,
+      },
+    })
+    expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([3])
+  })
+
+  it("should return rows with numeric strings within a range filter", () => {
+    const query = buildQuery("range", {
+      customer_id: {
+        low: "500",
+        high: "1000",
+      },
+    })
+    expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([3])
+  })
+
+  it("should return rows with ISO date strings within a range filter", () => {
+    const query = buildQuery("range", {
+      order_date: {
+        low: "2016-01-04T00:00:00.000Z",
+        high: "2016-01-11T00:00:00.000Z",
+      },
+    })
+    expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([2])
+  })
+
+  it("should throw an error is an invalid doc value is passed into a range filter", async () => {
+    const query = buildQuery("range", {
+      order_date: {
+        low: "2016-01-04T00:00:00.000Z",
+        high: "2016-01-11T00:00:00.000Z",
+      },
+    })
+    expect(() =>
+      runLuceneQuery(
+        [
+          {
+            order_id: 4,
+            customer_id: 1758,
+            order_status: 5,
+            order_date: "INVALID",
+            required_date: "2017-03-05T00:00:00.000Z",
+            shipped_date: "2017-03-03T00:00:00.000Z",
+            store_id: 2,
+            staff_id: 7,
+            description: undefined,
+            label: "",
+          },
+        ],
+        query
+      )
+    ).toThrowError("Cannot perform range filter - invalid type.")
+  })
+
+  it("should return rows with matches on empty filter", () => {
+    const query = buildQuery("empty", {
+      label: null,
+    })
+    expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([1])
+  })
+
+  it("should return rows with matches on notEmpty filter", () => {
+    const query = buildQuery("notEmpty", {
+      label: null,
+    })
+    expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([2, 3])
+  })
+})

packages/shared-core/tsconfig.build.json

@@ -24,6 +24,7 @@
     "dist",
     "**/*.spec.ts",
     "**/*.spec.js",
-    "__mocks__"
+    "__mocks__",
+    "src/tests"
   ]
 }