Merge pull request #3533 from Budibase/feature/auto-screen-ui

Fix issue where auto screen UI was duplicating selections

packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js

@@ -4,6 +4,7 @@ export default {
   name: `Create from scratch`,
   id: `createFromScratch`,
   create: () => createScreen(),
+  table: `Create from scratch`,
 }
 
 const createScreen = () => {

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -15,6 +15,7 @@ export default function (tables) {
       name: `${table.name} - New`,
       create: () => createScreen(table),
       id: NEW_ROW_TEMPLATE,
+      table: table.name,
     }
   })
 }

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -17,6 +17,7 @@ export default function (tables) {
       name: `${table.name} - Detail`,
       create: () => createScreen(table),
       id: ROW_DETAIL_TEMPLATE,
+      table: table.name,
     }
   })
 }

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -10,6 +10,7 @@ export default function (tables) {
       name: `${table.name} - List`,
       create: () => createScreen(table),
       id: ROW_LIST_TEMPLATE,
+      table: table.name,
     }
   })
 }

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -21,13 +21,13 @@
   $: autoSelected = selectedScreens?.length > 0 && !blankSelected
   let templates = getTemplates($store, $tables.list)
   const toggleScreenSelection = table => {
-    if (selectedScreens.find(s => s.name.includes(table.name))) {
+    if (selectedScreens.find(s => s.table === table.name)) {
       selectedScreens = selectedScreens.filter(
-        screen => !screen.name.includes(table.name)
+        screen => screen.table !== table.name
       )
     } else {
       let partialTemplates = getTemplates($store, $tables.list).filter(
-        template => template.name.includes(table.name)
+        template => template.table === table.name
       )
       selectedScreens = [...partialTemplates, ...selectedScreens]
     }
@@ -75,9 +75,7 @@
       {#each $tables.list.filter(table => table._id !== "ta_users") as table}
         <div
           class:disabled={blankSelected}
-          class:selected={selectedScreens.find(x =>
+          class:selected={selectedScreens.find(x => x.table === table.name)}
-            x.name.includes(table.name)
-          )}
           on:click={() => toggleScreenSelection(table)}
           class="item"
         >
@@ -87,7 +85,7 @@
           <div
             style="color: var(--spectrum-global-color-green-600); float: right"
           >
-            {#if selectedScreens.find(x => x.name.includes(table.name))}
+            {#if selectedScreens.find(x => x.table === table.name)}
               <div class="checkmark-spacing">
                 <Icon size="S" name="CheckmarkCircleOutline" />
               </div>

packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

@@ -5,6 +5,7 @@
   import { Modal } from "@budibase/bbui"
   import { store, selectedAccessRole, allScreens } from "builderStore"
   import { onDestroy } from "svelte"
+  import analytics, { Events } from "analytics"
 
   let newScreenModal
   let navigationSelectionModal
@@ -21,6 +22,9 @@
     for (let screen of selectedScreens) {
       let test = screen.create()
       createdScreens.push(test)
+      analytics.captureEvent(Events.SCREEN.CREATED, {
+        template: screen.id || screen.name,
+      })
     }
   }