Removed debugging statements and updated event data for screen create workflows

packages/builder/src/analytics/constants.js

@@ -22,6 +22,7 @@ export const Events = {
   },
   SCREEN: {
     CREATED: "Screen Created",
+    CREATE_ROLE_UPDATED: "Changed Role On Screen Creation"
   },
   AUTOMATION: {
     CREATED: "Automation Created",

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

@@ -1,10 +1,11 @@
 <script>
   import { store, selectedAccessRole } from "builderStore"
-  import { ModalContent, Layout, Select } from "@budibase/bbui"
+  import { ModalContent, Layout, Select, Divider } from "@budibase/bbui"
   import { tables, datasources, roles } from "stores/backend"
   import getTemplates from "builderStore/store/screenTemplates"
   import ICONS from "../../backend/DatasourceNavigator/icons"
   import { IntegrationNames } from "constants"
+  import analytics, { Events } from "analytics"
 
   export let onCancel
   export let onConfirm
@@ -12,14 +13,21 @@
   let selectedScreens = []
   let screenAccessRole = $selectedAccessRole + ""
 
-  const toggleScreenSelection = table => {
+  const toggleScreenSelection = (table, datasource) => {
     if (selectedScreens.find(s => s.table === table.name)) {
       selectedScreens = selectedScreens.filter(
         screen => screen.table !== table.name
       )
     } else {
-      let partialTemplates = getTemplates($store, $tables.list).filter(
-        template => template.table === table.name
+      let partialTemplates = getTemplates($store, $tables.list).reduce(
+        (acc, template) => {
+          if (template.table === table.name) {
+            template.datasource = datasource.name
+            acc.push(template)
+          }
+          return acc
+        },
+        []
       )
       selectedScreens = [...partialTemplates, ...selectedScreens]
     }
@@ -33,15 +41,11 @@
   }
 
   $: filteredSources = $datasources.list.reduce((acc, datasource) => {
-    acc["restSources"] = !acc["restSources"] ? [] : acc["restSources"]
-    acc["otherSources"] = !acc["otherSources"] ? [] : acc["otherSources"]
-    if (datasource.source === IntegrationNames.REST) {
-      acc["restSources"].push(datasource)
-    } else {
-      acc["otherSources"].push(datasource)
+    if (datasource.source !== IntegrationNames.REST && datasource["entities"]) {
+      acc.push(datasource)
     }
     return acc
-  }, {})
+  }, [])
 </script>
 
 <ModalContent
@@ -54,7 +58,7 @@
   size="L"
 >
   <Layout noPadding gap="XS">
-    {#each filteredSources.otherSources as datasource}
+    {#each filteredSources as datasource}
       <div class="data-source-header">
         <div class="datasource-icon">
           <svelte:component
@@ -72,7 +76,7 @@
           <div
             class="data-source-entry"
             class:selected={selectedScreens.find(x => x.table === table.name)}
-            on:click={() => toggleScreenSelection(table)}
+            on:click={() => toggleScreenSelection(table, datasource)}
           >
             <svg
               width="16px"
@@ -95,7 +99,7 @@
               x => x.table === datasource.entities[table_key].name
             )}
             on:click={() =>
-              toggleScreenSelection(datasource.entities[table_key])}
+              toggleScreenSelection(datasource.entities[table_key], datasource)}
           >
             <svg
               width="16px"
@@ -111,8 +115,16 @@
         {/each}
       {/if}
     {/each}
+    <div>
+      <Divider size="S" />
+    </div>
     <Select
       bind:value={screenAccessRole}
+      on:change={() => {
+        analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
+          screenAccessRole,
+        })
+      }}
       label="Screen access"
       getOptionLabel={role => role.name}
       getOptionValue={role => role._id}

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

@@ -4,6 +4,7 @@
   import { selectedAccessRole, allScreens } from "builderStore"
   import { get } from "svelte/store"
   import { roles } from "stores/backend"
+  import analytics, { Events } from "analytics"
 
   export let onConfirm
   export let onCancel
@@ -53,7 +54,6 @@
   cancelText={"Back"}
   disabled={!screenAccessRole || !screenUrl || routeError || !touched}
 >
-  <!-- <Input label="Name" bind:value={screenName} /> -->
   <Input
     label="URL"
     error={routeError}
@@ -62,6 +62,11 @@
   />
   <Select
     bind:value={screenAccessRole}
+    on:change={() => {
+      analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
+        screenAccessRole,
+      })
+    }}
     label="Screen access"
     getOptionLabel={role => role.name}
     getOptionValue={role => role._id}
@@ -69,6 +74,3 @@
     options={$roles}
   />
 </ModalContent>
-
-<style>
-</style>

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

@@ -11,7 +11,6 @@
   import { tables } from "stores/backend"
 
   let pendingScreen
-  let showProgressCircle = false
 
   // Modal refs
   let newScreenModal
@@ -24,7 +23,6 @@
 
     // Reset state when showing modal again
     pendingScreen = null
-    showProgressCircle = false
   }
 
   // Creates an array of screens, checking and sanitising their URLs
@@ -32,7 +30,6 @@
     if (!screens?.length) {
       return
     }
-    showProgressCircle = true
 
     try {
       for (let screen of screens) {
@@ -61,6 +58,8 @@
         if (screen.template) {
           analytics.captureEvent(Events.SCREEN.CREATED, {
             template: screen.template,
+            datasource: screen.datasource,
+            screenAccessRole,
           })
         }
 
@@ -75,8 +74,6 @@
     } catch (error) {
       notifications.error("Error creating screens")
     }
-
-    showProgressCircle = false
   }
 
   // Checks if any screens exist in the store with the given route and
@@ -119,12 +116,14 @@
 
   // Handler for DatasourceModal
   const confirmScreenDatasources = async ({ templates, screenAccessRole }) => {
-    console.log("selected ", screenAccessRole)
-    console.log("global ", $selectedAccessRole)
     // // Handle template selection
     if (templates?.length > 1) {
       // Autoscreens, so create immediately
-      const screens = templates.map(template => template.create())
+      const screens = templates.map(template => {
+        let screenTemplate = template.create()
+        screenTemplate.datasource = template.datasource
+        return screenTemplate
+      })
       await createScreens({ screens, screenAccessRole })
     }
   }