full cypress suite for custom views

packages/builder/cypress/integration/createView.spec.js

@@ -0,0 +1,85 @@
+context('Create a View', () => {
+    before(() => {
+        cy.visit('localhost:4001/_builder')
+        cy.createApp('View App', 'View App Description')
+        cy.createTable('data')
+        cy.addColumn('data', 'group', 'Plain Text')
+        cy.addColumn('data', 'age', 'Number')
+        cy.addColumn('data', 'rating', 'Number')
+
+        cy.addRecord(["Students", 25, 1])
+        cy.addRecord(["Students", 20, 3])
+        cy.addRecord(["Students", 18, 6])
+        cy.addRecord(["Students", 25, 2])
+        cy.addRecord(["Teachers", 49, 5])
+        cy.addRecord(["Teachers", 36, 3])
+    })
+
+
+    it('creates a stats view based on age', () => {
+      cy.contains("Create New View").click()
+      cy.get("[placeholder='View Name']").type("Test View")
+      cy.contains("Save View").click()
+      cy.get("thead th").should(($headers) => {
+        expect($headers).to.have.length(7)
+        const headers = $headers.map((i, header) => Cypress.$(header).text())
+        expect(headers.get()).to.deep.eq([
+          "group",
+          "sum",
+          "min",
+          "max",
+          "sumsqr",
+          "count",
+          "avg",
+        ])
+      })
+      cy.get("tbody td").should(($values) => {
+        const values = $values.map((i, value) => Cypress.$(value).text())
+        expect(values.get()).to.deep.eq([
+          "null",
+          "173",
+          "18",
+          "49",
+          "5671",
+          "6",
+          "28.833333333333332"
+        ])
+      })
+    })
+
+    it('groups the stats view by group', () => {
+      cy.contains("Group By").click()
+      cy.get("select").select("group")
+      cy.contains("Save").click()
+      cy.contains("Students").should("be.visible")
+      cy.contains("Teachers").should("be.visible")
+
+      cy.get("tbody tr").first().find("td").should(($values) => {
+        const values = $values.map((i, value) => Cypress.$(value).text())
+        expect(values.get()).to.deep.eq([
+          "Students",
+          "88",
+          "18",
+          "25",
+          "1974",
+          "4",
+          "22"
+        ])
+      })
+    })
+
+    it('renames a view', () => {
+      cy.contains("[data-cy=model-nav-item]", "Test View").find(".ri-more-line").click()
+      cy.contains("Edit").click()
+      cy.get("[placeholder='View Name']").type(" Updated")
+      cy.contains("Save").click()
+      cy.contains("Test View Updated").should("be.visible")
+    })
+
+    it('deletes a view', () => {
+      cy.contains("[data-cy=model-nav-item]", "Test View Updated").find(".ri-more-line").click()
+      cy.contains("Delete").click()
+      cy.get(".content").contains("button", "Delete").click()
+      cy.contains("TestView Updated").should("not.be.visible")
+    })
+})

packages/builder/package.json

@@ -57,7 +57,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.24.0",
+    "@budibase/bbui": "^1.24.1",
     "@budibase/client": "^0.1.17",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",

packages/builder/src/builderStore/store/backend.js

@@ -118,10 +118,6 @@ export const getBackendUiStore = () => {
         }),
       delete: async view => {
         await api.delete(`/api/views/${view}`)
-        store.update(state => {
-          store.actions.models.select(state.models[0])
-          return state
-        })
         await store.actions.models.fetch()
       },
       save: async view => {

packages/builder/src/components/database/DataTable/ModelDataTable.svelte

@@ -176,6 +176,7 @@
 
   .popovers {
     display: flex;
+    gap: var(--spacing-l);
   }
 
   .no-data {

packages/builder/src/components/database/DataTable/Table.svelte

@@ -105,15 +105,6 @@
     vertical-align: middle;
   }
 
-  .edit-header {
-    width: 100px;
-    cursor: default;
-  }
-
-  .edit-header:hover {
-    color: var(--ink);
-  }
-
   th:hover {
     color: var(--blue);
     cursor: pointer;
@@ -142,6 +133,7 @@
 
   .popovers {
     display: flex;
+    gap: var(--spacing-l);
   }
 
   .no-data {

packages/builder/src/components/database/DataTable/ViewDataTable.svelte

@@ -21,7 +21,7 @@
 
   let COLUMNS = [
     {
-      name: "Group",
+      name: "group",
       key: "key",
     },
     {
@@ -54,9 +54,10 @@
 
   let data = []
 
-  $: !view.name.startsWith("all_") && fetchViewData(view)
+  $: ({ name, groupBy } = view)
+  $: !name.startsWith("all_") && fetchViewData(name, groupBy)
 
-  async function fetchViewData({ name, groupBy }) {
+  async function fetchViewData(name, groupBy) {
     let QUERY_VIEW_URL = `/api/views/${name}?stats=true`
     if (groupBy) {
       QUERY_VIEW_URL += `&group=${groupBy}`

packages/builder/src/components/database/DataTable/modals/DeleteView.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import ActionButton from "components/common/ActionButton.svelte"
   import { notifier } from "builderStore/store/notifications"
   import { store, backendUiStore } from "builderStore"
@@ -25,7 +26,8 @@
       alert
       on:click={async () => {
         await backendUiStore.actions.views.delete(viewName)
-        notifier.danger('View deleted')
+        notifier.danger(`View ${viewName} deleted.`)
+        $goto(`./backend`)
         onClosed()
       }}>
       Delete

packages/builder/src/components/database/DataTable/popovers/Calculate.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { Popover, TextButton, Button, Icon, Input, Select } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
@@ -33,10 +33,10 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button text small on:click={dropdown.show}>
+  <TextButton text small on:click={dropdown.show} active={!!view.field}>
     <Icon name="calculate" />
     Calculate
-  </Button>
+  </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <h5>Calculate</h5>

packages/builder/src/components/database/DataTable/popovers/Column.svelte

@@ -1,6 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { DropdownMenu, TextButton as Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 

packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { Popover, TextButton, Button, Icon, Input, Select } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
@@ -29,17 +29,17 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button text small on:click={dropdown.show}>
+  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
-    <Icon name="calculate" />
+    <Icon name="group" />
     Group By
-  </Button>
+  </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <h5>Group By</h5>
   <div class="input-group-row">
     <p>Group By</p>
     <Select secondary thin bind:value={view.groupBy}>
-      <option value={false}>Remove Group By</option>
+      <option value={false}/>
       {#each fields as field}
         <option value={field}>{field}</option>
       {/each}

packages/builder/src/components/database/DataTable/popovers/Row.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { DropdownMenu, Button, Icon } from "@budibase/bbui"
+  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
 
   let anchor

packages/builder/src/components/database/DataTable/popovers/View.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { Popover, TextButton, Button, Icon, Input, Select } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
@@ -33,10 +33,10 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button text small on:click={dropdown.show}>
+  <TextButton text small on:click={dropdown.show}>
     <Icon name="addrow" />
     Create New View
-  </Button>
+  </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <h5>Create View</h5>

packages/builder/src/components/nav/ModelNavigator/EditView.svelte

@@ -54,7 +54,7 @@
   {#if editing}
     <h5>Edit View</h5>
     <div class="container">
-      <Input placeholder="Table Name" thin bind:value={view.name} />
+      <Input placeholder="View Name" thin bind:value={view.name} />
     </div>
     <footer>
       <div class="button-margin-3">

packages/builder/src/components/nav/ModelNavigator/ListItem.svelte

@@ -6,7 +6,7 @@
   export let indented
 </script>
 
-<div class:indented class:selected on:click class={className}>
+<div data-cy="model-nav-item" class:indented class:selected on:click class={className}>
   <i class={icon} />
   <span>{title}</span>
   <slot />

packages/builder/yarn.lock

@@ -775,10 +775,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.24.0":
+"@budibase/bbui@^1.24.1":
-  version "1.24.0"
+  version "1.24.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.24.0.tgz#8e41d808c2b73fe63d39ad8120ee3ef2a6ce5893"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.24.1.tgz#d1c527990c3dcdef78080abfe6aaeef6e8fb2d66"
-  integrity sha512-mARLxLASvqIo33xyYnm8YE+bIR3ncuG1KhSUaxXmFIchsdhVWQUDUX3adE23LU9HR6g+tnvsKtnw5N43grydTw==
+  integrity sha512-yZE4Uk6EB3MoIUd2oNN50u8KOXRX65yRFv49gN0T6iCjTjEAdEk8JtsQR9AL3VWn3EdPz5xOkrGsIvNtxqaAFw==
   dependencies:
     sirv-cli "^0.4.6"