From 0e7b8071e1369a715344482e7d839322c1a3a25d Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Tue, 25 May 2021 17:50:14 +0100
Subject: [PATCH 01/45] feat(globals): super wip of drag and drop ui

---
 packages/frontend/package-lock.json           |  13 ++
 packages/frontend/package.json                |   1 +
 .../src/components/GlobalsBuilder.vue         | 118 ++++++++++++++++++
 .../frontend/src/components/GlobalsEntry.vue  |  92 ++++++++++++++
 .../frontend/src/components/SidebarStream.vue |   5 +
 packages/frontend/src/router/index.js         |  10 +-
 packages/frontend/src/views/Globals.vue       |  44 +++++++
 7 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/components/GlobalsBuilder.vue
 create mode 100644 packages/frontend/src/components/GlobalsEntry.vue
 create mode 100644 packages/frontend/src/views/Globals.vue

diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
index 8676d565a..c19d6aabe 100644
--- a/packages/frontend/package-lock.json
+++ b/packages/frontend/package-lock.json
@@ -12945,6 +12945,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -14729,6 +14734,14 @@
         "@seregpie/claw": "^3.0.0"
       }
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "vuetify": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.4.0.tgz",
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index dd18127dc..84c5eddde 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -25,6 +25,7 @@
     "vue-matomo": "^3.14.0-0",
     "vue-router": "^3.4.9",
     "vue-timeago": "^5.1.2",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.3.21",
     "vuetify-image-input": "^19.1.0",
     "vuex": "^3.6.0"
diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
new file mode 100644
index 000000000..8ef42acbe
--- /dev/null
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -0,0 +1,118 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-btn color="primary" small rounded @click="resetGlobals">reset</v-btn>
+    </v-row>
+    <globals-entry v-if="!$apollo.loading" :entries="globalsArray" />
+  </v-container>
+</template>
+
+<script>
+import objectQuery from '../graphql/objectSingle.gql'
+
+export default {
+  name: 'GlobalsBuilder',
+  components: {
+    GlobalsEntry: () => import('../components/GlobalsEntry')
+  },
+  apollo: {
+    object: {
+      query: objectQuery,
+      variables() {
+        return {
+          streamId: this.streamId,
+          id: this.commitId
+        }
+      },
+      update: (data) => {
+        delete data.stream.object.data.__closure
+        return data.stream.object
+      }
+    }
+  },
+  props: {
+    entries: {
+      type: Array,
+      default: null
+    },
+    value: {
+      type: Object,
+      default: null
+    },
+    commitId: {
+      type: String,
+      default: null
+    },
+    streamId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      globalsArray: [],
+      object: null
+    }
+  },
+  watch: {
+    object(newVal, oldVal) {
+      console.log()
+    }
+  },
+  computed: {},
+  mounted() {
+    //?: how to run this only once but after apollo query is finished loading
+    this.globalsArray = this.nestedGlobals(this.object.data)
+  },
+  methods: {
+    nestedGlobals(data) {
+      if (!data) return []
+      let entries = Object.entries(data)
+      let arr = []
+      for (let [key, val] of entries) {
+        if (key.startsWith('__')) continue
+        if (['totalChildrenCount', 'speckle_type', 'id'].includes(key)) continue
+
+        if (Array.isArray(val)) {
+          arr.push({
+            key,
+            value: val,
+            type: 'array'
+          })
+        } else if (typeof val === 'object' && val !== null) {
+          if (val.speckle_type && val.speckle_type === 'reference') {
+            arr.push({
+              key,
+              value: val,
+              globals: this.nestedGlobals(val),
+              type: 'ref_object'
+            })
+          } else {
+            arr.push({
+              key,
+              value: val,
+              globals: this.nestedGlobals(val),
+              type: 'object'
+            })
+          }
+        } else {
+          arr.push({
+            key,
+            value: val,
+            type: 'field'
+          })
+        }
+      }
+
+      return arr
+    },
+    resetGlobals() {
+      if (!this.object.data) return
+
+      this.globalsArray = this.nestedGlobals(this.object.data)
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
new file mode 100644
index 000000000..542a706b5
--- /dev/null
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -0,0 +1,92 @@
+<template>
+  <v-container>
+    <draggable :list="entries" class="dragArea" tag="ul" group="globals" @change="log">
+      <div v-for="(entry, index) in entries" :key="index">
+        <div v-if="!entry.globals">
+          <v-row>
+            <v-col cols="12" sm="3">
+              <v-text-field v-model="entry.key" filled rounded />
+            </v-col>
+            <v-col cols="12" sm="8">
+              <v-text-field v-model="entry.value" />
+            </v-col>
+            <v-col cols="12" sm="1">
+              <v-btn icon x-small @click="fieldToObject(index, entry)">
+                <v-icon>mdi-cube-outline</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </div>
+        <v-card v-if="entry.globals" rounded="lg" class="pa-4 mb-4" elevation="4">
+          <v-row>
+            <v-col>
+              <b>{{ entry.key }}</b>
+            </v-col>
+            <v-col cols="auto">
+              <v-btn icon x-small @click="objectToField(entry)">
+                <v-icon>mdi-compare-horizontal</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+          <globals-entry :entries="entry.globals" />
+        </v-card>
+      </div>
+    </draggable>
+    <div
+      slot="footer"
+      class="btn-group list-group-item"
+      role="group"
+      aria-label="Basic example"
+      key="footer"
+    >
+      <v-btn color="primary" rounded @click="addProp">Add</v-btn>
+    </div>
+  </v-container>
+</template>
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'GlobalsEntry',
+  components: { draggable },
+  props: {
+    entries: {
+      type: Array,
+      default: null
+    },
+    streamId: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {},
+  methods: {
+    log(evt) {
+      window.console.log(evt)
+    },
+    //TODO: do thi with `emit` bc this is bad tsk tsk i was just experimenting soz 🥺
+    addProp() {
+      this.entries.push({
+        key: `placeholder ${~~(Math.random() * 100)}`,
+        type: 'field',
+        value: 'random stuff'
+      })
+    },
+    removeAt(index) {
+      this.entries.splice(index, 1)
+    },
+    fieldToObject(index, entry) {
+      let obj = {
+        key: entry.key,
+        type: 'object',
+        globals: [
+          { key: `placeholder ${~~(Math.random() * 100)}`, type: 'field', value: entry.value }
+        ]
+      }
+      this.entries[index] = obj
+    },
+    objectToField(entry) {}
+  }
+}
+</script>
+<style scoped></style>
diff --git a/packages/frontend/src/components/SidebarStream.vue b/packages/frontend/src/components/SidebarStream.vue
index 4c782f779..975689ccc 100644
--- a/packages/frontend/src/components/SidebarStream.vue
+++ b/packages/frontend/src/components/SidebarStream.vue
@@ -90,6 +90,7 @@
         <v-icon small class="mr-2 float-left">mdi-cog-outline</v-icon>
         Edit
       </v-btn>
+
       <v-dialog v-model="editStreamDialog" max-width="500">
         <stream-edit-dialog
           :stream-id="stream.id"
@@ -101,6 +102,10 @@
       </v-dialog>
     </v-card-text>
 
+    <v-card-text v-show="isHomeRoute">
+      <v-btn :to="`/streams/${stream.id}/globals`">Globals</v-btn>
+    </v-card-text>
+
     <v-card-title v-show="isHomeRoute"><h5>Collaborators</h5></v-card-title>
     <v-card-text v-show="isHomeRoute">
       <v-row no-gutters>
diff --git a/packages/frontend/src/router/index.js b/packages/frontend/src/router/index.js
index d6dd84589..a5d8dc60e 100644
--- a/packages/frontend/src/router/index.js
+++ b/packages/frontend/src/router/index.js
@@ -83,9 +83,17 @@ const routes = [
             },
             component: () => import('../views/StreamMain.vue')
           },
+          {
+            path: 'globals/',
+            name: 'globals',
+            meta: {
+              title: 'Globals | Speckle'
+            },
+            component: () => import('../views/Globals.vue')
+          },
           {
             path: 'branches/',
-            name: 'branchs',
+            name: 'branches',
             meta: {
               title: 'Branches | Speckle'
             },
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
new file mode 100644
index 000000000..5dd74f620
--- /dev/null
+++ b/packages/frontend/src/views/Globals.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-container>
+    <h1>wow globals</h1>
+    <v-row>
+      <v-col>
+        <v-card rounded="lg" class="pa-4 mb-4" elevation="0">
+          <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import branchQuery from '../graphql/branch.gql'
+
+export default {
+  name: 'Globals',
+  components: {
+    GlobalsBuilder: () => import('../components/GlobalsBuilder')
+  },
+  apollo: {
+    stream: {
+      query: branchQuery,
+      variables() {
+        return {
+          streamId: this.streamId,
+          branchName: 'globals' //TODO: handle multipile globals branches
+        }
+      }
+    }
+  },
+  computed: {
+    streamId() {
+      return this.$route.params.streamId
+    },
+    commitId() {
+      return this.stream.branch.commits.items[0].referencedObject
+    }
+  }
+}
+</script>
+
+<style></style>

From deb52d95fbde786117d4e13698addd4e01bb274a Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Wed, 26 May 2021 17:09:40 +0100
Subject: [PATCH 02/45] feat(globals): got the events to work!!

now lets you flip back and forth between field and obj
---
 .../src/components/GlobalsBuilder.vue         | 63 +++++++++++++++----
 .../frontend/src/components/GlobalsEntry.vue  | 60 ++++++++++--------
 packages/frontend/src/views/Globals.vue       |  4 +-
 3 files changed, 85 insertions(+), 42 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 8ef42acbe..760eae025 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,10 +1,18 @@
 <template>
-  <v-container>
+  <v-card rounded="lg" class="pa-4 mb-4" elevation="0">
     <v-row>
       <v-btn color="primary" small rounded @click="resetGlobals">reset</v-btn>
     </v-row>
-    <globals-entry v-if="!$apollo.loading" :entries="globalsArray" />
-  </v-container>
+    <globals-entry
+      v-if="!$apollo.loading"
+      :entries="globalsArray"
+      :path="[]"
+      @add-prop="addProp"
+      @remove-prop="removeProp"
+      @field-to-object="fieldToObject"
+      @object-to-field="objectToField"
+    />
+  </v-card>
 </template>
 
 <script>
@@ -31,14 +39,6 @@ export default {
     }
   },
   props: {
-    entries: {
-      type: Array,
-      default: null
-    },
-    value: {
-      type: Object,
-      default: null
-    },
     commitId: {
       type: String,
       default: null
@@ -54,12 +54,12 @@ export default {
       object: null
     }
   },
+  computed: {},
   watch: {
     object(newVal, oldVal) {
       console.log()
     }
   },
-  computed: {},
   mounted() {
     //?: how to run this only once but after apollo query is finished loading
     this.globalsArray = this.nestedGlobals(this.object.data)
@@ -110,6 +110,45 @@ export default {
       if (!this.object.data) return
 
       this.globalsArray = this.nestedGlobals(this.object.data)
+    },
+    addProp(kwargs) {
+      let globals = this.getNestedGlobals(kwargs.path)
+      globals.push(kwargs.field)
+    },
+    removeProp(kwargs) {
+      let globals = this.getNestedGlobals(kwargs.path)
+      globals.splice(kwargs.index, 1)
+    },
+    fieldToObject(kwargs) {
+      let globals = this.getNestedGlobals(kwargs.path)
+
+      globals.splice(kwargs.index, 1, kwargs.obj)
+    },
+    objectToField(kwargs) {
+      let globals = this.getNestedGlobals(kwargs.path)
+
+      globals.splice(kwargs.index, 1, ...kwargs.fields)
+    },
+    getNestedGlobals(path) {
+      let entry = this.globalsArray
+      if (!path) return entry
+
+      let depth = path.length
+
+      if (depth > 0) {
+        let key = path.shift()
+        entry = entry.find((e) => e.key == key)
+      }
+
+      if (depth > 1) {
+        path.forEach((key) => {
+          entry = entry.globals.find((e) => e.key == key)
+        })
+      }
+
+      if (!Array.isArray(entry)) entry = entry.globals
+
+      return entry
     }
   }
 }
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 542a706b5..b8126a199 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -2,33 +2,31 @@
   <v-container>
     <draggable :list="entries" class="dragArea" tag="ul" group="globals" @change="log">
       <div v-for="(entry, index) in entries" :key="index">
-        <div v-if="!entry.globals">
-          <v-row>
-            <v-col cols="12" sm="3">
-              <v-text-field v-model="entry.key" filled rounded />
-            </v-col>
-            <v-col cols="12" sm="8">
-              <v-text-field v-model="entry.value" />
-            </v-col>
-            <v-col cols="12" sm="1">
-              <v-btn icon x-small @click="fieldToObject(index, entry)">
-                <v-icon>mdi-cube-outline</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-        </div>
+        <v-row v-if="!entry.globals">
+          <v-col cols="12" sm="4">
+            <v-text-field v-model="entry.key" filled rounded />
+          </v-col>
+          <v-col cols="12" sm="7">
+            <v-text-field v-model="entry.value" />
+          </v-col>
+          <v-col cols="12" sm="1">
+            <v-btn icon x-small @click="emitFieldToObject(entry, index)">
+              <v-icon>mdi-cube-outline</v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
         <v-card v-if="entry.globals" rounded="lg" class="pa-4 mb-4" elevation="4">
           <v-row>
             <v-col>
               <b>{{ entry.key }}</b>
             </v-col>
             <v-col cols="auto">
-              <v-btn icon x-small @click="objectToField(entry)">
+              <v-btn icon x-small @click="emitObjectToField(entry, index)">
                 <v-icon>mdi-compare-horizontal</v-icon>
               </v-btn>
             </v-col>
           </v-row>
-          <globals-entry :entries="entry.globals" />
+          <globals-entry :entries="entry.globals" :path="[...path, entry.key]" v-on="$listeners" />
         </v-card>
       </div>
     </draggable>
@@ -39,7 +37,7 @@
       aria-label="Basic example"
       key="footer"
     >
-      <v-btn color="primary" rounded @click="addProp">Add</v-btn>
+      <v-btn color="primary" rounded @click="emitAddProp">Add</v-btn>
     </div>
   </v-container>
 </template>
@@ -54,6 +52,10 @@ export default {
       type: Array,
       default: null
     },
+    path: {
+      type: Array,
+      default: null
+    },
     streamId: {
       type: String,
       default: null
@@ -64,18 +66,19 @@ export default {
     log(evt) {
       window.console.log(evt)
     },
-    //TODO: do thi with `emit` bc this is bad tsk tsk i was just experimenting soz 🥺
-    addProp() {
-      this.entries.push({
+    emitAddProp() {
+      let field = {
         key: `placeholder ${~~(Math.random() * 100)}`,
         type: 'field',
         value: 'random stuff'
-      })
+      }
+      this.$emit('add-prop', { field: field, path: this.path })
     },
-    removeAt(index) {
-      this.entries.splice(index, 1)
+    emitRemoveAt(index) {
+      this.$emit('remove-prop', { path: this.path, index: index })
     },
-    fieldToObject(index, entry) {
+    emitFieldToObject(entry, index) {
+      console.log('in field to obj')
       let obj = {
         key: entry.key,
         type: 'object',
@@ -83,9 +86,12 @@ export default {
           { key: `placeholder ${~~(Math.random() * 100)}`, type: 'field', value: entry.value }
         ]
       }
-      this.entries[index] = obj
+      this.$emit('field-to-object', { obj: obj, path: this.path, index: index })
     },
-    objectToField(entry) {}
+    emitObjectToField(entry, index) {
+      let fields = entry.globals
+      this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
+    }
   }
 }
 </script>
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index 5dd74f620..fc34081e9 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -3,9 +3,7 @@
     <h1>wow globals</h1>
     <v-row>
       <v-col>
-        <v-card rounded="lg" class="pa-4 mb-4" elevation="0">
-          <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
-        </v-card>
+        <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
       </v-col>
     </v-row>
   </v-container>

From f2bc182c847306449e8ff6273d3b8f708da7d3c1 Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Thu, 27 May 2021 08:45:57 +0100
Subject: [PATCH 03/45] =?UTF-8?q?styling=20=F0=9F=92=87=E2=80=8D=E2=99=80?=
 =?UTF-8?q?=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/GlobalsBuilder.vue         |  7 +-
 .../frontend/src/components/GlobalsEntry.vue  | 66 +++++++++++++------
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 8ef42acbe..a661e9738 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container>
-    <v-row>
-      <v-btn color="primary" small rounded @click="resetGlobals">reset</v-btn>
+    <v-row justify="end" class="ma-3">
+      <v-btn color="primary" small  @click="resetGlobals">reset globals</v-btn>
     </v-row>
     <globals-entry v-if="!$apollo.loading" :entries="globalsArray" />
   </v-container>
@@ -115,4 +115,5 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+</style>
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 542a706b5..1764af757 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -3,28 +3,28 @@
     <draggable :list="entries" class="dragArea" tag="ul" group="globals" @change="log">
       <div v-for="(entry, index) in entries" :key="index">
         <div v-if="!entry.globals">
-          <v-row>
-            <v-col cols="12" sm="3">
-              <v-text-field v-model="entry.key" filled rounded />
-            </v-col>
-            <v-col cols="12" sm="8">
-              <v-text-field v-model="entry.value" />
-            </v-col>
-            <v-col cols="12" sm="1">
-              <v-btn icon x-small @click="fieldToObject(index, entry)">
-                <v-icon>mdi-cube-outline</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
+            <v-row align="center">
+              <v-col cols="12" sm="4">
+                <v-text-field class="entry-key" v-model="entry.key" hint="property name" filled dense rounded/>
+              </v-col>
+              <v-col cols="12" sm="7">
+                <v-text-field v-model="entry.value" hint="property value" />
+              </v-col>
+              <v-col cols="12" sm="1">
+                <v-btn icon small @click="fieldToObject(index, entry)">
+                  <v-icon color="primary">mdi-cube-outline</v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
         </div>
-        <v-card v-if="entry.globals" rounded="lg" class="pa-4 mb-4" elevation="4">
-          <v-row>
+        <v-card v-if="entry.globals" rounded="lg" class="pa-3 my-6" elevation="4">
+          <v-row align="center">
             <v-col>
-              <b>{{ entry.key }}</b>
+               <v-card-title>{{ entry.key }}</v-card-title>
             </v-col>
             <v-col cols="auto">
-              <v-btn icon x-small @click="objectToField(entry)">
-                <v-icon>mdi-compare-horizontal</v-icon>
+              <v-btn icon small @click="objectToField(entry)">
+                <v-icon color="primary">mdi-compare-horizontal</v-icon>
               </v-btn>
             </v-col>
           </v-row>
@@ -34,12 +34,14 @@
     </draggable>
     <div
       slot="footer"
-      class="btn-group list-group-item"
+      class="btn-group list-group-item ml-6 mt-3"
       role="group"
       aria-label="Basic example"
       key="footer"
     >
-      <v-btn color="primary" rounded @click="addProp">Add</v-btn>
+      <v-btn color="primary" rounded fab small @click="addProp">
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
     </div>
   </v-container>
 </template>
@@ -89,4 +91,26 @@ export default {
   }
 }
 </script>
-<style scoped></style>
+<style scoped>
+.v-card{
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.v-card__title {
+  font-weight: 500;
+  font-size: large;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.v-text-field{
+font-weight: 300;
+}
+
+.entry-key{
+font-weight: 500;
+position: relative;
+top: 0.6rem;
+}
+
+</style>

From 3aea2ba8661558e536bcf2f846aea82a92060619 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Thu, 27 May 2021 11:24:43 +0100
Subject: [PATCH 04/45] feat(globals): prelim transitions stuff

a bit janky for the mo tho
---
 .../src/components/GlobalsBuilder.vue         |   8 +-
 .../frontend/src/components/GlobalsEntry.vue  | 102 ++++++++++++------
 2 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 6fb09efae..a865bcd26 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -55,11 +55,6 @@ export default {
     }
   },
   computed: {},
-  watch: {
-    object(newVal, oldVal) {
-      console.log()
-    }
-  },
   mounted() {
     //?: how to run this only once but after apollo query is finished loading
     this.globalsArray = this.nestedGlobals(this.object.data)
@@ -154,5 +149,4 @@ export default {
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 7accc16ae..240d85b05 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -1,11 +1,27 @@
 <template>
   <v-container>
-    <draggable :list="entries" class="dragArea" tag="ul" group="globals" @change="log">
-      <div v-for="(entry, index) in entries" :key="index">
-        <div v-if="!entry.globals">
+    <draggable
+      :list="entries"
+      class="dragArea"
+      tag="ul"
+      group="globals"
+      v-bind="dragOptions"
+      @start="drag = true"
+      @end="drag = false"
+    >
+      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+        <div v-for="(entry, index) in entries" :key="index">
+          <div v-if="!entry.globals">
             <v-row align="center">
               <v-col cols="12" sm="4">
-                <v-text-field class="entry-key" v-model="entry.key" hint="property name" filled dense rounded/>
+                <v-text-field
+                  v-model="entry.key"
+                  class="entry-key"
+                  hint="property name"
+                  filled
+                  dense
+                  rounded
+                />
               </v-col>
               <v-col cols="12" sm="7">
                 <v-text-field v-model="entry.value" hint="property value" />
@@ -16,28 +32,33 @@
                 </v-btn>
               </v-col>
             </v-row>
+          </div>
+          <v-card v-if="entry.globals" rounded="lg" class="pa-3 my-6" elevation="4">
+            <v-row align="center">
+              <v-col>
+                <v-card-title>{{ entry.key }}</v-card-title>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn icon small @click="emitObjectToField(entry, index)">
+                  <v-icon color="primary">mdi-compare-horizontal</v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
+            <globals-entry
+              :entries="entry.globals"
+              :path="[...path, entry.key]"
+              v-on="$listeners"
+            />
+          </v-card>
         </div>
-        <v-card v-if="entry.globals" rounded="lg" class="pa-3 my-6" elevation="4">
-          <v-row align="center">
-            <v-col>
-               <v-card-title>{{ entry.key }}</v-card-title>
-            </v-col>
-            <v-col cols="auto">
-              <v-btn icon small @click="emitObjectToField(entry, index)">
-                <v-icon color="primary">mdi-compare-horizontal</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-          <globals-entry :entries="entry.globals" :path="[...path, entry.key]" v-on="$listeners" />
-        </v-card>
-      </div>
+      </transition-group>
     </draggable>
     <div
       slot="footer"
+      key="footer"
       class="btn-group list-group-item ml-6 mt-3"
       role="group"
       aria-label="Basic example"
-      key="footer"
     >
       <v-btn color="primary" rounded fab small @click="emitAddProp">
         <v-icon>mdi-plus</v-icon>
@@ -65,11 +86,21 @@ export default {
       default: null
     }
   },
-  computed: {},
+  data() {
+    return {
+      drag: false
+    }
+  },
+  computed: {
+    dragOptions() {
+      return {
+        animation: 150,
+        disabled: false,
+        ghostClass: 'ghost'
+      }
+    }
+  },
   methods: {
-    log(evt) {
-      window.console.log(evt)
-    },
     emitAddProp() {
       let field = {
         key: `placeholder ${~~(Math.random() * 100)}`,
@@ -100,7 +131,7 @@ export default {
 }
 </script>
 <style scoped>
-.v-card{
+.v-card {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -111,14 +142,25 @@ export default {
   text-transform: uppercase;
 }
 
-.v-text-field{
-font-weight: 300;
+.v-text-field {
+  font-weight: 300;
 }
 
-.entry-key{
-font-weight: 500;
-position: relative;
-top: 0.6rem;
+.entry-key {
+  font-weight: 500;
+  position: relative;
+  top: 0.6rem;
 }
 
+.dragArea {
+  min-height: 50px;
+}
+
+.ghost {
+  opacity: 0.5;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
 </style>

From d6957a2932693faf0ef61d113386eafb92c97e30 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 27 May 2021 14:44:35 +0100
Subject: [PATCH 05/45] fix(frontend): globalicious apollolicious loading fix

+ some subtle todo hints
---
 .../src/components/GlobalsBuilder.vue         | 37 ++++++++++++-------
 packages/frontend/src/views/Globals.vue       | 25 +++++++++----
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index a865bcd26..d2aa2d703 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,17 +1,23 @@
 <template>
-  <v-card rounded="lg" class="pa-4 mb-4" elevation="0">
-    <v-row justify="end">
+  <v-card rounded="lg" class="py-4 px-0 mb-4" elevation="0">
+    <v-card-actions>
+      <v-spacer />
       <v-btn color="primary" small @click="resetGlobals">reset globals</v-btn>
-    </v-row>
-    <globals-entry
-      v-if="!$apollo.loading"
-      :entries="globalsArray"
-      :path="[]"
-      @add-prop="addProp"
-      @remove-prop="removeProp"
-      @field-to-object="fieldToObject"
-      @object-to-field="objectToField"
-    />
+    </v-card-actions>
+    <v-card-text>
+      <globals-entry
+        v-if="!$apollo.loading"
+        :entries="globalsArray"
+        :path="[]"
+        @add-prop="addProp"
+        @remove-prop="removeProp"
+        @field-to-object="fieldToObject"
+        @object-to-field="objectToField"
+      />
+      <div v-else>
+        <v-skeleton-loader type="list-item-three-line" />
+      </div>
+    </v-card-text>
   </v-card>
 </template>
 
@@ -32,8 +38,11 @@ export default {
           id: this.commitId
         }
       },
-      update: (data) => {
+      update(data) {
+        // console.log( data.stream.object.data )
         delete data.stream.object.data.__closure
+
+        this.globalsArray = this.nestedGlobals(data.stream.object.data)
         return data.stream.object
       }
     }
@@ -57,7 +66,7 @@ export default {
   computed: {},
   mounted() {
     //?: how to run this only once but after apollo query is finished loading
-    this.globalsArray = this.nestedGlobals(this.object.data)
+    // this.globalsArray = this.nestedGlobals(this.object.data)
   },
   methods: {
     nestedGlobals(data) {
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index fc34081e9..c36e071d1 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -1,21 +1,30 @@
 <template>
   <v-container>
-    <h1>wow globals</h1>
-    <v-row>
-      <v-col>
-        <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
-      </v-col>
-    </v-row>
+    <div v-if="!commitId && !$apollo.loading">
+      <h1>Empty State</h1>
+      <p>TODO: Help, there's no globals branch and/or no commits on it!</p>
+    </div>
+    <div v-else>
+      <h1>wow globals</h1>
+      <v-row>
+        <v-col>
+          <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
+        </v-col>
+      </v-row>
+      <h1>History</h1>
+      <p>TODO</p>
+    </div>
   </v-container>
 </template>
 
 <script>
 import branchQuery from '../graphql/branch.gql'
+import GlobalsBuilder from '../components/GlobalsBuilder'
 
 export default {
   name: 'Globals',
   components: {
-    GlobalsBuilder: () => import('../components/GlobalsBuilder')
+    GlobalsBuilder
   },
   apollo: {
     stream: {
@@ -33,7 +42,7 @@ export default {
       return this.$route.params.streamId
     },
     commitId() {
-      return this.stream.branch.commits.items[0].referencedObject
+      return this.stream?.branch?.commits?.items[0].referencedObject
     }
   }
 }

From c6b9f7bf9326a2432862e137fa680be2f253139f Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 27 May 2021 14:45:01 +0100
Subject: [PATCH 06/45] chore(frontend): removes console.log because it's evil

---
 packages/frontend/src/components/GlobalsBuilder.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index d2aa2d703..ee67fca45 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -39,9 +39,7 @@ export default {
         }
       },
       update(data) {
-        // console.log( data.stream.object.data )
         delete data.stream.object.data.__closure
-
         this.globalsArray = this.nestedGlobals(data.stream.object.data)
         return data.stream.object
       }

From b22cbc49083f09b97d0e1a50a2038e3059c86b22 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 28 May 2021 17:41:33 +0100
Subject: [PATCH 07/45] feat(globals): fixes and tings

---
 .../src/components/GlobalsBuilder.vue         | 28 ++++++++++++++-
 .../frontend/src/components/GlobalsEntry.vue  | 36 ++++++++++++++-----
 packages/frontend/src/views/Globals.vue       |  9 +++--
 3 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index a865bcd26..227eeeffc 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -54,7 +54,13 @@ export default {
       object: null
     }
   },
-  computed: {},
+  computed: {
+    globalsCommit() {
+      let base = this.globalsToBase(this.globalsArray)
+      console.log(base)
+      return base
+    }
+  },
   mounted() {
     //?: how to run this only once but after apollo query is finished loading
     this.globalsArray = this.nestedGlobals(this.object.data)
@@ -101,6 +107,26 @@ export default {
 
       return arr
     },
+    globalsToBase(arr) {
+      let base = {
+        speckle_type: 'Base',
+        id: null
+      }
+      arr.forEach((entry) => {
+        if (entry.value) return
+
+        if (Array.isArray(entry.value)) base[entry.key] = entry.value
+        else if (entry.value.includes(',')) {
+          base[entry.key] = entry.value
+            .replace(/\s/g, '')
+            .split(',')
+            .map((el) => (isNaN(el) ? el : parseFloat(el)))
+        } else if (entry.type == 'object') {
+          base[entry.key] = this.globalsToBase(entry.globals)
+        }
+      })
+      return base
+    },
     resetGlobals() {
       if (!this.object.data) return
 
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 240d85b05..7c41156d5 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -9,18 +9,21 @@
       @start="drag = true"
       @end="drag = false"
     >
-      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-        <div v-for="(entry, index) in entries" :key="index">
+      <div v-for="(entry, index) in entries" :key="entry.key">
+        <transition type="transition" :name="!drag ? 'flip-list' : null">
           <div v-if="!entry.globals">
             <v-row align="center">
               <v-col cols="12" sm="4">
                 <v-text-field
-                  v-model="entry.key"
+                  ref="keyInput"
+                  :value="entry.key"
+                  :rules="rules.keys(index, entries)"
                   class="entry-key"
                   hint="property name"
                   filled
                   dense
                   rounded
+                  @change="updateKey($event, entry, index)"
                 />
               </v-col>
               <v-col cols="12" sm="7">
@@ -33,7 +36,7 @@
               </v-col>
             </v-row>
           </div>
-          <v-card v-if="entry.globals" rounded="lg" class="pa-3 my-6" elevation="4">
+          <v-card v-else rounded="lg" class="pa-3 my-6" elevation="4">
             <v-row align="center">
               <v-col>
                 <v-card-title>{{ entry.key }}</v-card-title>
@@ -50,8 +53,8 @@
               v-on="$listeners"
             />
           </v-card>
-        </div>
-      </transition-group>
+        </transition>
+      </div>
     </draggable>
     <div
       slot="footer"
@@ -88,7 +91,20 @@ export default {
   },
   data() {
     return {
-      drag: false
+      drag: false,
+      valid: true,
+      rules: {
+        keys(index, entries) {
+          return [
+            (v) => !!v || 'Properties need to have a name!',
+            (v) => {
+              let filtered = entries.filter((_, i) => i != index)
+              if (filtered.findIndex((e) => e.key === v) === -1) return true
+              else return 'A property with this name already exists'
+            }
+          ]
+        }
+      }
     }
   },
   computed: {
@@ -113,7 +129,6 @@ export default {
       this.$emit('remove-prop', { path: this.path, index: index })
     },
     emitFieldToObject(entry, index) {
-      console.log('in field to obj')
       let obj = {
         key: entry.key,
         type: 'object',
@@ -126,6 +141,11 @@ export default {
     emitObjectToField(entry, index) {
       let fields = entry.globals
       this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
+    },
+    updateKey(input, entry, index) {
+      //?: issues with this not working consistently!! sometimes validation returns false positive?
+      if (this.$refs.keyInput[index].validate()) entry.key = input
+      else if (input) entry.key = input + ' 2'
     }
   }
 }
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index fc34081e9..d9f737ecb 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -1,9 +1,14 @@
 <template>
   <v-container>
-    <h1>wow globals</h1>
+    <!-- TODO: dropdown to choose diff globals branches? -->
     <v-row>
       <v-col>
-        <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
+        <globals-builder
+          v-if="stream"
+          :stream-id="streamId"
+          :commit-id="commitId"
+          :user-role="$attrs['user-role']"
+        />
       </v-col>
     </v-row>
   </v-container>

From b9aeac8197776864e2cefb8508371752f378ff27 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 28 May 2021 17:44:18 +0100
Subject: [PATCH 08/45] feat(globals): save dialog sketches

---
 .../src/components/GlobalsBuilder.vue         | 30 ++++++--
 .../components/dialogs/GlobalsSaveDialog.vue  | 68 +++++++++++++++++++
 2 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 227eeeffc..aae5375e2 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,7 +1,20 @@
 <template>
   <v-card rounded="lg" class="pa-4 mb-4" elevation="0">
+    <v-dialog v-model="saveDialog" max-width="500">
+      <globals-save-dialog :stream-id="$route.params.streamId" @close="closeSaveDialog" />
+    </v-dialog>
+    <v-card-title>Globals</v-card-title>
     <v-row justify="end">
-      <v-btn color="primary" small @click="resetGlobals">reset globals</v-btn>
+      <v-btn small @click="resetGlobals">reset globals</v-btn>
+      <v-btn
+        v-if="userRole === 'contributor' || userRole === 'owner'"
+        v-tooltip="'Save your changes with a message'"
+        small
+        color="primary"
+        @click="saveDialog = true"
+      >
+        save
+      </v-btn>
     </v-row>
     <globals-entry
       v-if="!$apollo.loading"
@@ -21,7 +34,8 @@ import objectQuery from '../graphql/objectSingle.gql'
 export default {
   name: 'GlobalsBuilder',
   components: {
-    GlobalsEntry: () => import('../components/GlobalsEntry')
+    GlobalsEntry: () => import('../components/GlobalsEntry'),
+    GlobalsSaveDialog: () => import('../components/dialogs/GlobalsSaveDialog')
   },
   apollo: {
     object: {
@@ -39,6 +53,10 @@ export default {
     }
   },
   props: {
+    userRole: {
+      type: String,
+      default: null
+    },
     commitId: {
       type: String,
       default: null
@@ -51,7 +69,7 @@ export default {
   data() {
     return {
       globalsArray: [],
-      object: null
+      saveDialog: false
     }
   },
   computed: {
@@ -86,7 +104,7 @@ export default {
               key,
               value: val,
               globals: this.nestedGlobals(val),
-              type: 'ref_object'
+              type: 'object' //TODO: handle references
             })
           } else {
             arr.push({
@@ -170,6 +188,10 @@ export default {
       if (!Array.isArray(entry)) entry = entry.globals
 
       return entry
+    },
+    closeSaveDialog() {
+      this.dialogBranch = false
+      this.$apollo.queries.object.refetch()
     }
   }
 }
diff --git a/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue b/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
new file mode 100644
index 000000000..f8435cd67
--- /dev/null
+++ b/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
@@ -0,0 +1,68 @@
+<template>
+  <v-card :loading="loading">
+    <template slot="progress">
+      <v-progress-linear indeterminate></v-progress-linear>
+    </template>
+    <v-card-title>Save Globals</v-card-title>
+    <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="saveGlobals">
+      <v-card-text>
+        <v-text-field
+          v-model="message"
+          label="Message"
+          :rules="nameRules"
+          validate-on-blur
+          required
+          autofocus
+        ></v-text-field>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text :disabled="!valid" type="submit">Save</v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+<script>
+export default {
+  props: {
+    streamId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      valid: false,
+      loading: false,
+      name: null,
+      nameRules: [(v) => (v && v.length >= 3) || 'Message must be at least 3 characters'],
+      message: null
+    }
+  },
+  computed: {},
+  methods: {
+    async saveGlobals() {
+      if (!this.$refs.form.validate()) return
+
+      this.loading = true
+      this.$matomo && this.$matomo.trackPageView('globals/save')
+      // await this.$apollo.mutate({
+      //   mutation: gql`
+      //     mutation branchCreate($params: BranchCreateInput!) {
+      //       branchCreate(branch: $params)
+      //     }
+      //   `,
+      //   variables: {
+      //     params: {
+      //       streamId: this.streamId,
+      //       name: this.name,
+      //       description: this.description
+      //     }
+      //   }
+      // })
+      this.loading = false
+      this.$emit('close')
+    }
+  }
+}
+</script>

From 6d69e90c5ff9d7e4a7f9bd6a34486b096217546b Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Mon, 31 May 2021 10:15:22 +0100
Subject: [PATCH 09/45] Added delete and edit object features

---
 .../src/components/GlobalsBuilder.vue         | 15 ++--
 .../frontend/src/components/GlobalsEntry.vue  | 71 +++++++++++++------
 2 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 6fb09efae..e522fffeb 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,12 +1,18 @@
 <template>
-  <v-card rounded="lg" class="pa-4 mb-4" elevation="0">
-    <v-row justify="end">
-      <v-btn color="primary" small @click="resetGlobals">reset globals</v-btn>
+  <v-card rounded="lg" class="pa-3 mb-3" elevation="0">
+    <v-row class="ma-3">
+      <v-col>
+        <v-switch dense inset color="error" v-model="deleteEntries" :label="`DELETE`"></v-switch>
+      </v-col>
+      <v-col>
+        <v-btn color="primary" small @click="resetGlobals">reset all</v-btn>
+      </v-col>
     </v-row>
     <globals-entry
       v-if="!$apollo.loading"
       :entries="globalsArray"
       :path="[]"
+      :remove="deleteEntries"
       @add-prop="addProp"
       @remove-prop="removeProp"
       @field-to-object="fieldToObject"
@@ -51,7 +57,8 @@ export default {
   data() {
     return {
       globalsArray: [],
-      object: null
+      object: null,
+      deleteEntries: false,
     }
   },
   computed: {},
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 7accc16ae..321e856a1 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -1,34 +1,43 @@
 <template>
   <v-container>
-    <draggable :list="entries" class="dragArea" tag="ul" group="globals" @change="log">
+    <draggable :list="entries" class="dragArea pl-0" tag="ul" group="globals" @change="log">
       <div v-for="(entry, index) in entries" :key="index">
         <div v-if="!entry.globals">
-            <v-row align="center">
-              <v-col cols="12" sm="4">
-                <v-text-field class="entry-key" v-model="entry.key" hint="property name" filled dense rounded/>
-              </v-col>
-              <v-col cols="12" sm="7">
-                <v-text-field v-model="entry.value" hint="property value" />
-              </v-col>
-              <v-col cols="12" sm="1">
-                <v-btn icon small @click="emitFieldToObject(entry, index)">
-                  <v-icon color="primary">mdi-cube-outline</v-icon>
-                </v-btn>
-              </v-col>
-            </v-row>
+            <div class="d-flex align-center" @mouseover="hoverEffect">
+              <v-btn v-if="remove" class="entry-delete mr-5" fab rounded x-small color="error" @click="emitRemoveAt(index)">
+                <v-icon>mdi-minus</v-icon>
+              </v-btn>
+              <v-text-field class="entry-key mr-5" v-model="entry.key" hint="property name" filled dense rounded/>
+              <v-text-field class="entry-value mr-5" v-model="entry.value" hint="property value" />
+              <v-btn v-if="!remove" icon small @click="emitFieldToObject(entry, index)">
+                <v-icon color="primary">mdi-cube-outline</v-icon>
+              </v-btn>
+            </div>
         </div>
         <v-card v-if="entry.globals" rounded="lg" class="pa-3 my-6" elevation="4">
           <v-row align="center">
             <v-col>
-               <v-card-title>{{ entry.key }}</v-card-title>
+               <v-card-title v-if="!editTitle" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
+                 {{ entry.key }}
+                 <v-btn v-if="mouseOver" @click="editTitle = true" icon color="primary">
+                   <v-icon small>mdi-pencil</v-icon>
+                 </v-btn>
+                </v-card-title>
+                <v-card-title v-else>
+                 <v-text-field v-model="entry.key">
+                 </v-text-field>
+                 <v-btn @click="editTitle = false" icon color="primary">
+                   <v-icon small>mdi-check</v-icon>
+                 </v-btn>
+                </v-card-title>
             </v-col>
             <v-col cols="auto">
               <v-btn icon small @click="emitObjectToField(entry, index)">
-                <v-icon color="primary">mdi-compare-horizontal</v-icon>
+                <v-icon color="primary">mdi-arrow-collapse-down</v-icon>
               </v-btn>
             </v-col>
           </v-row>
-          <globals-entry :entries="entry.globals" :path="[...path, entry.key]" v-on="$listeners" />
+          <globals-entry :entries="entry.globals" :path="[...path, entry.key]" :remove="remove" v-on="$listeners" />
         </v-card>
       </div>
     </draggable>
@@ -38,6 +47,7 @@
       role="group"
       aria-label="Basic example"
       key="footer"
+      v-if="!remove"
     >
       <v-btn color="primary" rounded fab small @click="emitAddProp">
         <v-icon>mdi-plus</v-icon>
@@ -63,6 +73,16 @@ export default {
     streamId: {
       type: String,
       default: null
+    },
+    remove:{
+      type: Boolean,
+      default: false
+    }
+  },
+  data(){
+    return {
+      editTitle: false,
+      mouseOver: false,
     }
   },
   computed: {},
@@ -95,6 +115,9 @@ export default {
     emitObjectToField(entry, index) {
       let fields = entry.globals
       this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
+    },
+    hoverEffect(event){
+      console.log('mouse here')
     }
   }
 }
@@ -116,9 +139,17 @@ font-weight: 300;
 }
 
 .entry-key{
-font-weight: 500;
-position: relative;
-top: 0.6rem;
+  font-weight: 500;
+  position: relative;
+  top: 0.6rem;
+}
+
+.entry-value{
+}
+
+.entry-delete{
+  position: relative;
+  top: -0.2rem;
 }
 
 </style>

From f9581c78ebe4ae2d9890b1f757c9dbe9a26de57e Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Mon, 31 May 2021 11:15:12 +0100
Subject: [PATCH 10/45] missing bracket

---
 packages/frontend/src/components/GlobalsEntry.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 1fd734793..58f818efa 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -164,6 +164,7 @@ export default {
     },
     hoverEffect(event){
       console.log('mouse here')
+    },
     updateKey(input, entry, index) {
       //?: issues with this not working consistently!! sometimes validation returns false positive?
       if (this.$refs.keyInput[index].validate()) entry.key = input

From 79e01d60517ca4b0caa20e06cd165afc27d7e61f Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Mon, 31 May 2021 11:50:22 +0100
Subject: [PATCH 11/45] data fix

---
 packages/frontend/src/components/GlobalsBuilder.vue |  5 +++--
 packages/frontend/src/components/GlobalsEntry.vue   | 10 +++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 1cd1da756..b806996a7 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -16,13 +16,14 @@
       >
         save
       </v-btn>
-      <v-switch dense inset color="error" v-model="deleteEntries" :label="`DELETE`"></v-switch>
+      <v-switch class="ml-3" dense inset color="error" v-model="deleteEntries" :label="`DELETE`"></v-switch>
     </v-card-actions>
     <v-card-text>
       <globals-entry
         v-if="!$apollo.loading"
         :entries="globalsArray"
         :path="[]"
+        :remove="deleteEntries"
         @add-prop="addProp"
         @remove-prop="removeProp"
         @field-to-object="fieldToObject"
@@ -78,7 +79,7 @@ export default {
     return {
       globalsArray: [],
       saveDialog: false,
-      deleteEntries: false
+      deleteEntries: false,
     }
   },
   computed: {
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 58f818efa..c6ddc86d8 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -2,7 +2,7 @@
   <v-container>
     <draggable
       :list="entries"
-      class="dragArea"
+      class="dragArea pl-0"
       tag="ul"
       group="globals"
       v-bind="dragOptions"
@@ -59,6 +59,7 @@
             <globals-entry
               :entries="entry.globals"
               :path="[...path, entry.key]"
+              :remove="remove"
               v-on="$listeners"
             />
           </v-card>
@@ -103,14 +104,10 @@ export default {
       default: false
     }
   },
-  data(){
+  data() {
     return {
       editTitle: false,
       mouseOver: false,
-    }
-  },
-  data() {
-    return {
       drag: false,
       valid: true,
       rules: {
@@ -163,7 +160,6 @@ export default {
       this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
     },
     hoverEffect(event){
-      console.log('mouse here')
     },
     updateKey(input, entry, index) {
       //?: issues with this not working consistently!! sometimes validation returns false positive?

From 298aa91b4188d1f1b6f9ca2511dcaae8d0bf3a97 Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Mon, 31 May 2021 11:59:52 +0100
Subject: [PATCH 12/45] minor alignment adjustments

---
 packages/frontend/src/components/GlobalsBuilder.vue | 2 +-
 packages/frontend/src/components/GlobalsEntry.vue   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index b806996a7..eb65d124b 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -5,6 +5,7 @@
     </v-dialog>
     <v-card-title>Globals</v-card-title>
     <v-card-actions>
+      <v-switch class="ml-3" dense inset color="error" v-model="deleteEntries" :label="`DELETE`"></v-switch>
       <v-spacer />
       <v-btn color="primary" small @click="resetGlobals">reset all</v-btn>
       <v-btn
@@ -16,7 +17,6 @@
       >
         save
       </v-btn>
-      <v-switch class="ml-3" dense inset color="error" v-model="deleteEntries" :label="`DELETE`"></v-switch>
     </v-card-actions>
     <v-card-text>
       <globals-entry
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index c6ddc86d8..670ad9e3d 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -51,7 +51,7 @@
                 </v-card-title>
             </v-col>
             <v-col cols="auto">
-              <v-btn icon small @click="emitObjectToField(entry, index)">
+              <v-btn class="mr-3" icon small @click="emitObjectToField(entry, index)">
                 <v-icon color="primary">mdi-arrow-collapse-down</v-icon>
               </v-btn>
             </v-col>
@@ -69,7 +69,7 @@
     <div
       slot="footer"
       key="footer"
-      class="btn-group list-group-item ml-6 mt-3"
+      class="btn-group list-group-item mt-3"
       role="group"
       aria-label="Basic example"
       v-if="!remove"

From 51bd2a9547ec36d40062f5f021eaefb0030ac3b3 Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Tue, 1 Jun 2021 11:09:47 +0100
Subject: [PATCH 13/45] just for fun

---
 packages/frontend/src/components/GlobalsEntry.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 670ad9e3d..99ff8527b 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -135,10 +135,14 @@ export default {
   },
   methods: {
     emitAddProp() {
+      var bimNouns = ['parameter', 'BIM', 'triple O', 'digital twin', 'LOD 9000', 'automation'];
+      var bimAdjs = ['parametric', 'chonky', '3D']
+      var bimExclamations = ['wow','much']
+      var randomPhrase = bimExclamations[Math.floor(Math.random() * bimExclamations.length)] + ' ' + bimAdjs[Math.floor(Math.random() * bimAdjs.length)] + ' ' + bimNouns[Math.floor(Math.random() * bimNouns.length)];
       let field = {
-        key: `placeholder ${~~(Math.random() * 100)}`,
+        key: `parameter ${~~(Math.random() * 100)}`,
         type: 'field',
-        value: 'random stuff'
+        value: randomPhrase
       }
       this.$emit('add-prop', { field: field, path: this.path })
     },

From 12dbb6e697352439b9d999ae423f9a341df818d7 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Tue, 1 Jun 2021 16:42:58 +0100
Subject: [PATCH 14/45] fix(globals): smol edit btn 2 not expand card size

---
 .../frontend/src/components/GlobalsEntry.vue  | 87 +++++++++++--------
 packages/viewer/package-lock.json             |  6 --
 2 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 99ff8527b..3b9f8915b 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -13,20 +13,28 @@
         <transition type="transition" :name="!drag ? 'flip-list' : null">
           <div v-if="!entry.globals">
             <div class="d-flex align-center" @mouseover="hoverEffect">
-              <v-btn v-if="remove" class="entry-delete mr-5" fab rounded x-small color="error" @click="emitRemoveAt(index)">
+              <v-btn
+                v-if="remove"
+                class="entry-delete mr-5"
+                fab
+                rounded
+                x-small
+                color="error"
+                @click="emitRemoveAt(index)"
+              >
                 <v-icon>mdi-minus</v-icon>
               </v-btn>
               <v-text-field
-                  ref="keyInput"
-                  :value="entry.key"
-                  :rules="rules.keys(index, entries)"
-                  class="entry-key mr-5"
-                  hint="property name"
-                  filled
-                  dense
-                  rounded
-                  @change="updateKey($event, entry, index)"
-                />
+                ref="keyInput"
+                :value="entry.key"
+                :rules="rules.keys(index, entries)"
+                class="entry-key mr-5"
+                hint="property name"
+                filled
+                dense
+                rounded
+                @change="updateKey($event, entry, index)"
+              />
               <v-text-field class="entry-value mr-5" v-model="entry.value" hint="property value" />
               <v-btn v-if="!remove" icon small @click="emitFieldToObject(entry, index)">
                 <v-icon color="primary">mdi-cube-outline</v-icon>
@@ -36,25 +44,28 @@
           <v-card v-else rounded="lg" class="pa-3 my-6" elevation="4">
             <v-row align="center">
               <v-col>
-               <v-card-title v-if="!editTitle" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-                 {{ entry.key }}
-                 <v-btn v-if="mouseOver" @click="editTitle = true" icon color="primary">
-                   <v-icon small>mdi-pencil</v-icon>
-                 </v-btn>
+                <v-card-title
+                  v-if="!editTitle"
+                  @mouseenter="mouseOver = true"
+                  @mouseleave="mouseOver = false"
+                >
+                  {{ entry.key }}
+                  <v-btn v-if="mouseOver" icon small color="primary" @click="editTitle = true">
+                    <v-icon small>mdi-pencil</v-icon>
+                  </v-btn>
                 </v-card-title>
                 <v-card-title v-else>
-                 <v-text-field v-model="entry.key">
-                 </v-text-field>
-                 <v-btn @click="editTitle = false" icon color="primary">
-                   <v-icon small>mdi-check</v-icon>
-                 </v-btn>
+                  <v-text-field v-model="entry.key"></v-text-field>
+                  <v-btn @click="editTitle = false" icon color="primary">
+                    <v-icon small>mdi-check</v-icon>
+                  </v-btn>
                 </v-card-title>
-            </v-col>
-            <v-col cols="auto">
-              <v-btn class="mr-3" icon small @click="emitObjectToField(entry, index)">
-                <v-icon color="primary">mdi-arrow-collapse-down</v-icon>
-              </v-btn>
-            </v-col>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn class="mr-3" icon small @click="emitObjectToField(entry, index)">
+                  <v-icon color="primary">mdi-arrow-collapse-down</v-icon>
+                </v-btn>
+              </v-col>
             </v-row>
             <globals-entry
               :entries="entry.globals"
@@ -99,7 +110,7 @@ export default {
       type: String,
       default: null
     },
-    remove:{
+    remove: {
       type: Boolean,
       default: false
     }
@@ -135,10 +146,15 @@ export default {
   },
   methods: {
     emitAddProp() {
-      var bimNouns = ['parameter', 'BIM', 'triple O', 'digital twin', 'LOD 9000', 'automation'];
+      var bimNouns = ['parameter', 'BIM', 'triple O', 'digital twin', 'LOD 9000', 'automation']
       var bimAdjs = ['parametric', 'chonky', '3D']
-      var bimExclamations = ['wow','much']
-      var randomPhrase = bimExclamations[Math.floor(Math.random() * bimExclamations.length)] + ' ' + bimAdjs[Math.floor(Math.random() * bimAdjs.length)] + ' ' + bimNouns[Math.floor(Math.random() * bimNouns.length)];
+      var bimExclamations = ['wow', 'much']
+      var randomPhrase =
+        bimExclamations[Math.floor(Math.random() * bimExclamations.length)] +
+        ' ' +
+        bimAdjs[Math.floor(Math.random() * bimAdjs.length)] +
+        ' ' +
+        bimNouns[Math.floor(Math.random() * bimNouns.length)]
       let field = {
         key: `parameter ${~~(Math.random() * 100)}`,
         type: 'field',
@@ -163,8 +179,6 @@ export default {
       let fields = entry.globals
       this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
     },
-    hoverEffect(event){
-    },
     updateKey(input, entry, index) {
       //?: issues with this not working consistently!! sometimes validation returns false positive?
       if (this.$refs.keyInput[index].validate()) entry.key = input
@@ -189,16 +203,13 @@ export default {
   font-weight: 300;
 }
 
-.entry-key{
+.entry-key {
   font-weight: 500;
   position: relative;
   top: 0.6rem;
 }
 
-.entry-value{
-}
-
-.entry-delete{
+.entry-delete {
   position: relative;
   top: -0.2rem;
 }
diff --git a/packages/viewer/package-lock.json b/packages/viewer/package-lock.json
index 3b3f70de3..08902a3b3 100644
--- a/packages/viewer/package-lock.json
+++ b/packages/viewer/package-lock.json
@@ -2008,12 +2008,6 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
-    "@speckle/objectloader": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@speckle/objectloader/-/objectloader-2.0.3.tgz",
-      "integrity": "sha512-hSyJU0ktZOYbgjDtwrHHXowRu5L0lxoO32N2JPJUjURoy+M1ZpvJVGyT4jKG03HvH30j9rynja0PVjVoW9LdEw==",
-      "dev": true
-    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",

From 1f34d2e499a01ba675c2200d18fa90bff5aa7491 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Thu, 3 Jun 2021 10:34:58 +0100
Subject: [PATCH 15/45] feat(globals): some fixes and save working

---
 .../src/components/GlobalsBuilder.vue         | 86 +++++++++++++------
 .../frontend/src/components/GlobalsEntry.vue  | 52 ++++++++---
 .../components/dialogs/GlobalsSaveDialog.vue  | 56 ++++++++----
 packages/frontend/src/views/Globals.vue       | 14 ++-
 4 files changed, 152 insertions(+), 56 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index eb65d124b..662ce2c62 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,11 +1,23 @@
 <template>
   <v-card rounded="lg" class="pa-3 mb-3" elevation="0">
     <v-dialog v-model="saveDialog" max-width="500">
-      <globals-save-dialog :stream-id="$route.params.streamId" @close="closeSaveDialog" />
+      <globals-save-dialog
+        :branch-name="branchName"
+        :stream-id="$route.params.streamId"
+        :commit-obj="globalsCommit"
+        @close="closeSaveDialog"
+      />
     </v-dialog>
     <v-card-title>Globals</v-card-title>
     <v-card-actions>
-      <v-switch class="ml-3" dense inset color="error" v-model="deleteEntries" :label="`DELETE`"></v-switch>
+      <v-switch
+        v-model="deleteEntries"
+        class="ml-3"
+        dense
+        inset
+        color="error"
+        :label="`DELETE`"
+      ></v-switch>
       <v-spacer />
       <v-btn color="primary" small @click="resetGlobals">reset all</v-btn>
       <v-btn
@@ -51,7 +63,7 @@ export default {
       variables() {
         return {
           streamId: this.streamId,
-          id: this.commitId
+          id: this.newObjectHash ?? this.objectId
         }
       },
       update(data) {
@@ -66,7 +78,11 @@ export default {
       type: String,
       default: null
     },
-    commitId: {
+    branchName: {
+      type: String,
+      default: null
+    },
+    objectId: {
       type: String,
       default: null
     },
@@ -78,21 +94,20 @@ export default {
   data() {
     return {
       globalsArray: [],
+      newObjectHash: null,
       saveDialog: false,
-      deleteEntries: false,
+      deleteEntries: false
     }
   },
   computed: {
     globalsCommit() {
       let base = this.globalsToBase(this.globalsArray)
-      console.log(base)
       return base
+    },
+    validObject() {
+      return this.checkValidKeys(this.globalsArray)
     }
   },
-  mounted() {
-    //?: how to run this only once but after apollo query is finished loading
-    // this.globalsArray = this.nestedGlobals(this.object.data)
-  },
   methods: {
     nestedGlobals(data) {
       if (!data) return []
@@ -102,33 +117,30 @@ export default {
         if (key.startsWith('__')) continue
         if (['totalChildrenCount', 'speckle_type', 'id'].includes(key)) continue
 
-        if (Array.isArray(val)) {
-          arr.push({
-            key,
-            value: val,
-            type: 'array'
-          })
-        } else if (typeof val === 'object' && val !== null) {
+        if (!Array.isArray(val) && typeof val === 'object' && val !== null) {
           if (val.speckle_type && val.speckle_type === 'reference') {
             arr.push({
               key,
               value: val,
               globals: this.nestedGlobals(val),
-              type: 'object' //TODO: handle references
+              type: 'object', //TODO: handle references
+              isValid: true
             })
           } else {
             arr.push({
               key,
               value: val,
               globals: this.nestedGlobals(val),
-              type: 'object'
+              type: 'object',
+              isValid: true
             })
           }
         } else {
           arr.push({
             key,
             value: val,
-            type: 'field'
+            type: 'field',
+            isValid: true
           })
         }
       }
@@ -141,16 +153,20 @@ export default {
         id: null
       }
       arr.forEach((entry) => {
-        if (entry.value) return
+        if (!entry.value && !entry.globals) return
 
         if (Array.isArray(entry.value)) base[entry.key] = entry.value
-        else if (entry.value.includes(',')) {
+        else if (entry.type == 'object') {
+          base[entry.key] = this.globalsToBase(entry.globals)
+        } else if (typeof entry.value === 'string' && entry.value.includes(',')) {
           base[entry.key] = entry.value
             .replace(/\s/g, '')
             .split(',')
             .map((el) => (isNaN(el) ? el : parseFloat(el)))
-        } else if (entry.type == 'object') {
-          base[entry.key] = this.globalsToBase(entry.globals)
+        } else if (typeof entry.value === 'boolean') {
+          base[entry.key] = entry.value
+        } else {
+          base[entry.key] = isNaN(entry.value) ? entry.value : parseFloat(entry.value)
         }
       })
       return base
@@ -162,7 +178,7 @@ export default {
     },
     addProp(kwargs) {
       let globals = this.getNestedGlobals(kwargs.path)
-      globals.push(kwargs.field)
+      globals.splice(globals.length, 0, kwargs.field)
     },
     removeProp(kwargs) {
       let globals = this.getNestedGlobals(kwargs.path)
@@ -199,9 +215,25 @@ export default {
 
       return entry
     },
-    closeSaveDialog() {
-      this.dialogBranch = false
+    closeSaveDialog(hash) {
+      this.newObjectHash = hash
+      this.saveDialog = false
       this.$apollo.queries.object.refetch()
+    },
+    checkValidKeys(arr) {
+      if (!arr) return false
+      let valid = true
+      arr.forEach((o) => {
+        if (o.type == 'object') {
+          valid = this.checkValidKeys(o.globals)
+        }
+
+        if (!valid) return false
+
+        if (!o.isValid) return false
+      })
+
+      return true
     }
   }
 }
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 3b9f8915b..54ef3c42d 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -12,7 +12,7 @@
       <div v-for="(entry, index) in entries" :key="entry.key">
         <transition type="transition" :name="!drag ? 'flip-list' : null">
           <div v-if="!entry.globals">
-            <div class="d-flex align-center" @mouseover="hoverEffect">
+            <div class="d-flex align-center">
               <v-btn
                 v-if="remove"
                 class="entry-delete mr-5"
@@ -34,8 +34,9 @@
                 dense
                 rounded
                 @change="updateKey($event, entry, index)"
+                @update:error="invalidKey($event, entry, index)"
               />
-              <v-text-field class="entry-value mr-5" v-model="entry.value" hint="property value" />
+              <v-text-field v-model="entry.value" class="entry-value mr-5" hint="property value" />
               <v-btn v-if="!remove" icon small @click="emitFieldToObject(entry, index)">
                 <v-icon color="primary">mdi-cube-outline</v-icon>
               </v-btn>
@@ -49,14 +50,30 @@
                   @mouseenter="mouseOver = true"
                   @mouseleave="mouseOver = false"
                 >
+                  <v-btn
+                    v-if="remove"
+                    class="entry-delete mr-5"
+                    fab
+                    rounded
+                    x-small
+                    color="error"
+                    @click="emitRemoveAt(index)"
+                  >
+                    <v-icon>mdi-minus</v-icon>
+                  </v-btn>
                   {{ entry.key }}
                   <v-btn v-if="mouseOver" icon small color="primary" @click="editTitle = true">
                     <v-icon small>mdi-pencil</v-icon>
                   </v-btn>
                 </v-card-title>
                 <v-card-title v-else>
-                  <v-text-field v-model="entry.key"></v-text-field>
-                  <v-btn @click="editTitle = false" icon color="primary">
+                  <v-text-field
+                    ref="keyInput"
+                    :value="entry.key"
+                    :rules="rules.keys(index, entries)"
+                    @change="updateKey($event, entry, index)"
+                  ></v-text-field>
+                  <v-btn icon color="primary" @click="editTitle = false">
                     <v-icon small>mdi-check</v-icon>
                   </v-btn>
                 </v-card-title>
@@ -78,12 +95,12 @@
       </div>
     </draggable>
     <div
+      v-if="!remove"
       slot="footer"
       key="footer"
       class="btn-group list-group-item mt-3"
       role="group"
       aria-label="Basic example"
-      v-if="!remove"
     >
       <v-btn color="primary" rounded fab small @click="emitAddProp">
         <v-icon>mdi-plus</v-icon>
@@ -127,12 +144,19 @@ export default {
             (v) => !!v || 'Properties need to have a name!',
             (v) => {
               let filtered = entries.filter((_, i) => i != index)
-              if (filtered.findIndex((e) => e.key === v) === -1) return true
-              else return 'A property with this name already exists'
+              if (filtered.findIndex((e) => e.key === v) === -1) {
+                // this.entries[index].$set('isValid', true)
+                entries[index].isValid = true
+                return true
+              } else {
+                entries[index].isValid = false
+                return 'A property with this name already exists'
+              }
             }
           ]
         }
-      }
+      },
+      errors: []
     }
   },
   computed: {
@@ -180,9 +204,17 @@ export default {
       this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
     },
     updateKey(input, entry, index) {
-      //?: issues with this not working consistently!! sometimes validation returns false positive?
       if (this.$refs.keyInput[index].validate()) entry.key = input
-      else if (input) entry.key = input + ' 2'
+      else if (input) {
+        console.log(`UPDATE KEY >>> current key: ${entry.key}, event value: ${input}`)
+      }
+    },
+    invalidKey(event, entry, index) {
+      if (!event) return
+      console.log(`validate result: ${this.$refs.keyInput[index].validate()}`)
+      console.log(
+        `INVALID KEY >>> current key: ${entry.key}, field value: ${this.$refs.keyInput[index].value}`
+      )
     }
   }
 }
diff --git a/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue b/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
index f8435cd67..88fcbef50 100644
--- a/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
+++ b/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
@@ -23,11 +23,21 @@
   </v-card>
 </template>
 <script>
+import gql from 'graphql-tag'
+
 export default {
   props: {
     streamId: {
       type: String,
       default: null
+    },
+    commitObj: {
+      type: Object,
+      default: null
+    },
+    branchName: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -46,22 +56,38 @@ export default {
 
       this.loading = true
       this.$matomo && this.$matomo.trackPageView('globals/save')
-      // await this.$apollo.mutate({
-      //   mutation: gql`
-      //     mutation branchCreate($params: BranchCreateInput!) {
-      //       branchCreate(branch: $params)
-      //     }
-      //   `,
-      //   variables: {
-      //     params: {
-      //       streamId: this.streamId,
-      //       name: this.name,
-      //       description: this.description
-      //     }
-      //   }
-      // })
+      let res = await this.$apollo.mutate({
+        mutation: gql`
+          mutation ObjectCreate($params: ObjectCreateInput!) {
+            objectCreate(objectInput: $params)
+          }
+        `,
+        variables: {
+          params: {
+            streamId: this.streamId,
+            objects: [this.commitObj]
+          }
+        }
+      })
+
+      await this.$apollo.mutate({
+        mutation: gql`
+          mutation CommitCreate($commit: CommitCreateInput!) {
+            commitCreate(commit: $commit)
+          }
+        `,
+        variables: {
+          commit: {
+            streamId: this.streamId,
+            branchName: this.branchName,
+            objectId: res.data.objectCreate[0],
+            message: this.message,
+            sourceApplication: 'web'
+          }
+        }
+      })
       this.loading = false
-      this.$emit('close')
+      this.$emit('close', res.data.objectCreate[0])
     }
   }
 }
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index c039d29c7..aeae89797 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <div v-if="!commitId && !$apollo.loading">
+    <div v-if="!objectId && !$apollo.loading">
       <h1>Empty State</h1>
       <p>TODO: Help, there's no globals branch and/or no commits on it!</p>
     </div>
@@ -10,8 +10,9 @@
         <v-col>
           <globals-builder
             v-if="stream"
+            :branch-name="branchName"
             :stream-id="streamId"
-            :commit-id="commitId"
+            :object-id="objectId"
             :user-role="$attrs['user-role']"
           />
         </v-col>
@@ -37,16 +38,21 @@ export default {
       variables() {
         return {
           streamId: this.streamId,
-          branchName: 'globals' //TODO: handle multipile globals branches
+          branchName: this.branchName
         }
       }
     }
   },
+  data() {
+    return {
+      branchName: 'globals' //TODO: handle multipile globals branches
+    }
+  },
   computed: {
     streamId() {
       return this.$route.params.streamId
     },
-    commitId() {
+    objectId() {
       return this.stream?.branch?.commits?.items[0].referencedObject
     }
   }

From 6275304ff5919f2bba97107411b72097aad08e93 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Thu, 3 Jun 2021 11:38:26 +0100
Subject: [PATCH 16/45] feat(globals): hide globals branches from ui

---
 packages/frontend/src/components/SidebarStream.vue |  6 +++++-
 packages/frontend/src/views/Branches.vue           |  8 ++++----
 packages/frontend/src/views/Globals.vue            |  4 +++-
 packages/frontend/src/views/StreamMain.vue         | 12 ++++++------
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/SidebarStream.vue b/packages/frontend/src/components/SidebarStream.vue
index 265173bf4..c25f192bf 100644
--- a/packages/frontend/src/components/SidebarStream.vue
+++ b/packages/frontend/src/components/SidebarStream.vue
@@ -38,7 +38,11 @@
       on
       <router-link
         class="text-decoration-none"
-        :to="`/streams/${stream.id}/branches/${stream.commits.items[0].branchName}`"
+        :to="
+          stream.commits.items[0].branchName.startsWith('globals')
+            ? `/streams/${stream.id}/globals`
+            : `/streams/${stream.id}/branches/${stream.commits.items[0].branchName}`
+        "
       >
         <v-icon small color="primary">mdi-source-branch</v-icon>
         {{ stream.commits.items[0].branchName }}
diff --git a/packages/frontend/src/views/Branches.vue b/packages/frontend/src/views/Branches.vue
index dd4554b83..4f736edcf 100644
--- a/packages/frontend/src/views/Branches.vue
+++ b/packages/frontend/src/views/Branches.vue
@@ -7,7 +7,7 @@
       <v-card v-else rounded="lg" class="pa-4 mb-4" elevation="0">
         <v-dialog v-model="dialogBranch" max-width="500">
           <new-branch-dialog
-            :branch-names="branches.items.map((b) => b.name)"
+            :branch-names="branches.map((b) => b.name)"
             :stream-id="$route.params.streamId"
             @close="closeBranchDialog"
           />
@@ -40,10 +40,10 @@
       </v-card>
 
       <v-card v-if="!$apollo.queries.stream.loading" class="mt-5 pa-4" elevation="0" rounded="lg">
-        <v-subheader class="text-uppercase">Branches ({{ branches.items.length }})</v-subheader>
+        <v-subheader class="text-uppercase">Branches ({{ branches.length }})</v-subheader>
         <v-card-text>
           <v-list two-line color="transparent">
-            <template v-for="item in branches.items">
+            <template v-for="item in branches">
               <v-list-item
                 :key="item.id"
                 :to="`/streams/${$route.params.streamId}/branches/${encodeURIComponent(item.name)}`"
@@ -144,7 +144,7 @@ export default {
   },
   computed: {
     branches() {
-      return this.stream.branches
+      return this.stream.branches.items.filter((b) => !b.name.startsWith('globals'))
     },
     breadcrumbs() {
       return [
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index aeae89797..a6f6d39bb 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -1,11 +1,13 @@
 <template>
   <v-container>
     <div v-if="!objectId && !$apollo.loading">
+      <v-card>
+        <v-card-title>Globals</v-card-title>
+      </v-card>
       <h1>Empty State</h1>
       <p>TODO: Help, there's no globals branch and/or no commits on it!</p>
     </div>
     <div v-else>
-      <h1>wow globals</h1>
       <v-row>
         <v-col>
           <globals-builder
diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index 6c44c9dfe..eca036bdb 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -9,7 +9,7 @@
           <v-select
             v-if="branches"
             v-model="selectedBranch"
-            :items="branches.items"
+            :items="branches"
             item-value="name"
             solo
             flat
@@ -41,7 +41,7 @@
             :to="'/streams/' + $route.params.streamId + '/branches'"
           >
             <v-icon class="mr-2 float-left">mdi-source-branch</v-icon>
-            {{ branches.totalCount }} branch{{ branches.totalCount > 1 ? 'es' : '' }}
+            {{ branches.length }} branch{{ branches.length > 1 ? 'es' : '' }}
           </v-btn>
         </v-sheet>
 
@@ -228,7 +228,7 @@ export default {
         }
       },
       update(data) {
-        return data.stream.branches
+        return data.stream.branches.items.filter((b) => !b.name.startsWith('globals'))
       }
     },
     description: {
@@ -297,7 +297,7 @@ export default {
     },
     branchNames() {
       if (!this.branches) return []
-      return this.branches.items.map((b) => b.name)
+      return this.branches.map((b) => b.name)
     },
     compiledStreamDescription() {
       if (!this.description) return ''
@@ -344,8 +344,8 @@ export default {
     selectBranch() {
       if (!this.branches) return
       let branchName = this.$route.params.branchName ? this.$route.params.branchName : 'main'
-      let index = this.branches.items.findIndex((x) => x.name === branchName)
-      if (index > -1) this.selectedBranch = this.branches.items[index]
+      let index = this.branches.findIndex((x) => x.name === branchName)
+      if (index > -1) this.selectedBranch = this.branches[index]
       else this.error = 'Branch ' + branchName + ' does not exist'
     },
     changeBranch() {

From 88dd8caad85118b575f6815fb3bf70e7a927bda9 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Thu, 3 Jun 2021 15:54:26 +0100
Subject: [PATCH 17/45] feat(globals): tooltips and some ui fixes

---
 .../src/components/GlobalsBuilder.vue         | 23 +++++++++++++++--
 .../frontend/src/components/GlobalsEntry.vue  | 25 ++++++++++++++++---
 .../frontend/src/components/SidebarStream.vue |  8 ++++--
 packages/frontend/src/views/Globals.vue       |  2 +-
 4 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 662ce2c62..75cb92e6e 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -12,6 +12,7 @@
     <v-card-actions>
       <v-switch
         v-model="deleteEntries"
+        v-tooltip="'Toggle delete mode'"
         class="ml-3"
         dense
         inset
@@ -19,18 +20,34 @@
         :label="`DELETE`"
       ></v-switch>
       <v-spacer />
-      <v-btn color="primary" small @click="resetGlobals">reset all</v-btn>
+      <v-btn v-tooltip="'Undo any changes'" color="primary" small @click="resetGlobals">
+        reset all
+      </v-btn>
       <v-btn
         v-if="userRole === 'contributor' || userRole === 'owner'"
         v-tooltip="'Save your changes with a message'"
         small
         color="primary"
-        @click="saveDialog = true"
+        @click="
+          saveDialog = true
+          deleteEntries = false
+        "
       >
         save
       </v-btn>
     </v-card-actions>
     <v-card-text>
+      <v-card-text>
+        These global variables can be used for storing design values, project requirements, notes,
+        or any info you want to keep track of alongside your geometry. These values can be text,
+        numbers, lists, or booleans. Click the box icon next to any field to turn it into a nested
+        group of fields. You can drag and drop fields in and out of groups as you please. Note that
+        field order may not always be preserved.
+      </v-card-text>
+      <v-card-text v-if="!(userRole === 'contributor') && !(userRole === 'owner')">
+        You are free to play around with the globals here, but you do not have the required stream
+        permission to save your changes.
+      </v-card-text>
       <globals-entry
         v-if="!$apollo.loading"
         :entries="globalsArray"
@@ -149,6 +166,7 @@ export default {
     },
     globalsToBase(arr) {
       let base = {
+        // eslint-disable-next-line camelcase
         speckle_type: 'Base',
         id: null
       }
@@ -174,6 +192,7 @@ export default {
     resetGlobals() {
       if (!this.object.data) return
 
+      this.deleteEntries = false
       this.globalsArray = this.nestedGlobals(this.object.data)
     },
     addProp(kwargs) {
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 54ef3c42d..d7d696f06 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -37,7 +37,13 @@
                 @update:error="invalidKey($event, entry, index)"
               />
               <v-text-field v-model="entry.value" class="entry-value mr-5" hint="property value" />
-              <v-btn v-if="!remove" icon small @click="emitFieldToObject(entry, index)">
+              <v-btn
+                v-if="!remove"
+                v-tooltip="'Transform this field into an object'"
+                icon
+                small
+                @click="emitFieldToObject(entry, index)"
+              >
                 <v-icon color="primary">mdi-cube-outline</v-icon>
               </v-btn>
             </div>
@@ -79,7 +85,13 @@
                 </v-card-title>
               </v-col>
               <v-col cols="auto">
-                <v-btn class="mr-3" icon small @click="emitObjectToField(entry, index)">
+                <v-btn
+                  v-tooltip="'Flatten this object into fields'"
+                  class="mr-3"
+                  icon
+                  small
+                  @click="emitObjectToField(entry, index)"
+                >
                   <v-icon color="primary">mdi-arrow-collapse-down</v-icon>
                 </v-btn>
               </v-col>
@@ -102,7 +114,14 @@
       role="group"
       aria-label="Basic example"
     >
-      <v-btn color="primary" rounded fab small @click="emitAddProp">
+      <v-btn
+        v-tooltip="'Add a new field to this object'"
+        color="primary"
+        rounded
+        fab
+        small
+        @click="emitAddProp"
+      >
         <v-icon>mdi-plus</v-icon>
       </v-btn>
     </div>
diff --git a/packages/frontend/src/components/SidebarStream.vue b/packages/frontend/src/components/SidebarStream.vue
index c25f192bf..23888a050 100644
--- a/packages/frontend/src/components/SidebarStream.vue
+++ b/packages/frontend/src/components/SidebarStream.vue
@@ -30,7 +30,11 @@
         small
         color="primary"
         class="pa-2"
-        :to="`/streams/${stream.id}/commits/${stream.commits.items[0].id}`"
+        :to="
+          stream.commits.items[0].branchName.startsWith('globals')
+            ? `/streams/${stream.id}/${stream.commits.items[0].branchName}`
+            : `/streams/${stream.id}/commits/${stream.commits.items[0].id}`
+        "
       >
         <v-icon small class="mr-1">mdi-source-commit</v-icon>
         {{ stream.commits.items[0].id }}
@@ -40,7 +44,7 @@
         class="text-decoration-none"
         :to="
           stream.commits.items[0].branchName.startsWith('globals')
-            ? `/streams/${stream.id}/globals`
+            ? `/streams/${stream.id}/${stream.commits.items[0].branchName}`
             : `/streams/${stream.id}/branches/${stream.commits.items[0].branchName}`
         "
       >
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index a6f6d39bb..8ad2d955c 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -55,7 +55,7 @@ export default {
       return this.$route.params.streamId
     },
     objectId() {
-      return this.stream?.branch?.commits?.items[0].referencedObject
+      return this.stream?.branch?.commits?.items[0]?.referencedObject
     }
   }
 }

From af0dc936913260b0ae6fca71006a88f9bc8d30be Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Thu, 3 Jun 2021 16:05:19 +0100
Subject: [PATCH 18/45] fix(globals): route properly from recent activity

---
 packages/frontend/src/graphql/streams.gql | 1 +
 packages/frontend/src/views/Streams.vue   | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/graphql/streams.gql b/packages/frontend/src/graphql/streams.gql
index 6f4d4051d..a93805e11 100644
--- a/packages/frontend/src/graphql/streams.gql
+++ b/packages/frontend/src/graphql/streams.gql
@@ -24,6 +24,7 @@ query Streams($cursor: String) {
           createdAt
           message
           authorId
+          branchName
           authorName
           authorAvatar
           referencedObject
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index d2fef85dd..d541fefe7 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -39,7 +39,13 @@
                 </v-list-item-avatar>
                 <v-list-item-content>
                   <v-list-item-title class="subtitle-2">
-                    <router-link :to="'streams/' + a.streamId + '/commits/' + a.id">
+                    <router-link
+                      :to="
+                        a.branchName.startsWith('globals')
+                          ? `streams/${a.streamId}/${a.branchName}`
+                          : `streams/${a.streamId}/commits/${a.id}`
+                      "
+                    >
                       {{ a.message }}
                     </router-link>
                   </v-list-item-title>

From d286258ae237f3782ce3bd26e8b54db4d625cbd4 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Thu, 3 Jun 2021 17:42:35 +0100
Subject: [PATCH 19/45] feat(globals): empty state

---
 .../src/components/GlobalsBuilder.vue         | 46 ++++++----
 .../components/dialogs/GlobalsSaveDialog.vue  |  2 +-
 packages/frontend/src/views/Globals.vue       | 85 ++++++++++++++-----
 3 files changed, 91 insertions(+), 42 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 75cb92e6e..4f284340b 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -9,6 +9,17 @@
       />
     </v-dialog>
     <v-card-title>Globals</v-card-title>
+    <v-card-text>
+      These global variables can be used for storing design values, project requirements, notes, or
+      any info you want to keep track of alongside your geometry. These values can be text, numbers,
+      lists, or booleans. Click the box icon next to any field to turn it into a nested group of
+      fields. You can drag and drop fields in and out of groups as you please. Note that field order
+      may not always be preserved.
+    </v-card-text>
+    <v-card-text v-if="!(userRole === 'contributor') && !(userRole === 'owner')">
+      You are free to play around with the globals here, but you do not have the required stream
+      permission to save your changes.
+    </v-card-text>
     <v-card-actions>
       <v-switch
         v-model="deleteEntries"
@@ -37,17 +48,6 @@
       </v-btn>
     </v-card-actions>
     <v-card-text>
-      <v-card-text>
-        These global variables can be used for storing design values, project requirements, notes,
-        or any info you want to keep track of alongside your geometry. These values can be text,
-        numbers, lists, or booleans. Click the box icon next to any field to turn it into a nested
-        group of fields. You can drag and drop fields in and out of groups as you please. Note that
-        field order may not always be preserved.
-      </v-card-text>
-      <v-card-text v-if="!(userRole === 'contributor') && !(userRole === 'owner')">
-        You are free to play around with the globals here, but you do not have the required stream
-        permission to save your changes.
-      </v-card-text>
       <globals-entry
         v-if="!$apollo.loading"
         :entries="globalsArray"
@@ -87,6 +87,9 @@ export default {
         delete data.stream.object.data.__closure
         this.globalsArray = this.nestedGlobals(data.stream.object.data)
         return data.stream.object
+      },
+      skip() {
+        return this.objectId == null
       }
     }
   },
@@ -113,7 +116,10 @@ export default {
       globalsArray: [],
       newObjectHash: null,
       saveDialog: false,
-      deleteEntries: false
+      deleteEntries: false,
+      sample: {
+        text: 'here are some words'
+      }
     }
   },
   computed: {
@@ -125,6 +131,11 @@ export default {
       return this.checkValidKeys(this.globalsArray)
     }
   },
+  mounted() {
+    if (!this.objectId) {
+      this.globalsArray = this.nestedGlobals(this.sample)
+    }
+  },
   methods: {
     nestedGlobals(data) {
       if (!data) return []
@@ -190,10 +201,10 @@ export default {
       return base
     },
     resetGlobals() {
-      if (!this.object.data) return
-
       this.deleteEntries = false
-      this.globalsArray = this.nestedGlobals(this.object.data)
+      this.globalsArray = this.object?.data
+        ? this.nestedGlobals(this.object.data)
+        : this.nestedGlobals(this.sample)
     },
     addProp(kwargs) {
       let globals = this.getNestedGlobals(kwargs.path)
@@ -234,10 +245,9 @@ export default {
 
       return entry
     },
-    closeSaveDialog(hash) {
-      this.newObjectHash = hash
+    closeSaveDialog() {
       this.saveDialog = false
-      this.$apollo.queries.object.refetch()
+      this.$emit('new-commit')
     },
     checkValidKeys(arr) {
       if (!arr) return false
diff --git a/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue b/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
index 88fcbef50..aed0cc3ce 100644
--- a/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
+++ b/packages/frontend/src/components/dialogs/GlobalsSaveDialog.vue
@@ -87,7 +87,7 @@ export default {
         }
       })
       this.loading = false
-      this.$emit('close', res.data.objectCreate[0])
+      this.$emit('close')
     }
   }
 }
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index 8ad2d955c..ebc628450 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -1,31 +1,39 @@
 <template>
   <v-container>
-    <div v-if="!objectId && !$apollo.loading">
-      <v-card>
-        <v-card-title>Globals</v-card-title>
+    <div v-if="!objectId && !$apollo.loading && !revealBuilder">
+      <v-card :loading="loading">
+        <template slot="progress">
+          <v-progress-linear indeterminate></v-progress-linear>
+        </template>
+        <v-card-title>You don't have any globals on this stream!</v-card-title>
+        <v-card-text class="subtitle-1">
+          Globals are useful for storing design values, project requirements, notes, or any info you
+          want to keep track of alongside your geometry. Would you like to create some now?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="primary" @click="createClicked">create globals</v-btn>
+        </v-card-actions>
       </v-card>
-      <h1>Empty State</h1>
-      <p>TODO: Help, there's no globals branch and/or no commits on it!</p>
     </div>
-    <div v-else>
-      <v-row>
-        <v-col>
-          <globals-builder
-            v-if="stream"
-            :branch-name="branchName"
-            :stream-id="streamId"
-            :object-id="objectId"
-            :user-role="$attrs['user-role']"
-          />
-        </v-col>
-      </v-row>
-      <h1>History</h1>
-      <p>TODO</p>
+    <div v-if="objectId || revealBuilder">
+      <globals-builder
+        :branch-name="branchName"
+        :stream-id="streamId"
+        :object-id="objectId"
+        :user-role="$attrs['user-role']"
+        @new-commit="$apollo.queries.branch.refetch()"
+      />
+      <v-card>
+        <v-card-title>History</v-card-title>
+        <v-card-text>TODO</v-card-text>
+      </v-card>
     </div>
   </v-container>
 </template>
 
 <script>
+import gql from 'graphql-tag'
 import branchQuery from '../graphql/branch.gql'
 import GlobalsBuilder from '../components/GlobalsBuilder'
 
@@ -35,19 +43,24 @@ export default {
     GlobalsBuilder
   },
   apollo: {
-    stream: {
+    branch: {
       query: branchQuery,
       variables() {
         return {
           streamId: this.streamId,
           branchName: this.branchName
         }
+      },
+      update(data) {
+        return data.stream.branch
       }
     }
   },
   data() {
     return {
-      branchName: 'globals' //TODO: handle multipile globals branches
+      branchName: 'globals', //TODO: handle multipile globals branches
+      revealBuilder: false,
+      loading: false
     }
   },
   computed: {
@@ -55,10 +68,36 @@ export default {
       return this.$route.params.streamId
     },
     objectId() {
-      return this.stream?.branch?.commits?.items[0]?.referencedObject
+      return this.branch?.commits?.items[0]?.referencedObject
+    }
+  },
+  methods: {
+    async createClicked() {
+      if (!this.branch) {
+        this.loading = true
+        this.$matomo && this.$matomo.trackPageView('branch/create')
+        await this.$apollo.mutate({
+          mutation: gql`
+            mutation branchCreate($params: BranchCreateInput!) {
+              branchCreate(branch: $params)
+            }
+          `,
+          variables: {
+            params: {
+              streamId: this.streamId,
+              name: 'globals',
+              description: 'Stream globals'
+            }
+          }
+        })
+        this.$apollo.queries.branch.refetch()
+        this.loading = false
+      }
+
+      this.revealBuilder = true
     }
   }
 }
 </script>
 
-<style></style>
+<style scoped></style>

From 04cefea84de347a5bdf79559a9aa5d90a74cded3 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 11:54:26 +0100
Subject: [PATCH 20/45] feat(branch): prevent manual creation of `globals`

---
 packages/frontend/src/components/dialogs/BranchNewDialog.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/frontend/src/components/dialogs/BranchNewDialog.vue b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
index 5960c5dee..27a6b48b1 100644
--- a/packages/frontend/src/components/dialogs/BranchNewDialog.vue
+++ b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
@@ -44,6 +44,9 @@ export default {
       name: null,
       nameRules: [
         (v) => !!v || 'Branches need a name too!',
+        (v) =>
+          (v && !v.startsWith('globals')) ||
+          'Globals is a reserved branch name. Please choose a different name.',
         (v) =>
           (v && this.branchNames.findIndex((e) => e === v) === -1) ||
           'A branch with this name already exists',

From 63ecd2737d008d44e953c4aece79797303c9d7c3 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 12:12:38 +0100
Subject: [PATCH 21/45] feat(globals): some clean on validation

---
 .../src/components/GlobalsBuilder.vue         | 36 ++++++-------------
 .../frontend/src/components/GlobalsEntry.vue  | 12 +++----
 packages/frontend/src/views/Globals.vue       |  2 +-
 3 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 4f284340b..407b85ef0 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -38,6 +38,7 @@
         v-if="userRole === 'contributor' || userRole === 'owner'"
         v-tooltip="'Save your changes with a message'"
         small
+        :disabled="!globalsAreValid"
         color="primary"
         @click="
           saveDialog = true
@@ -80,7 +81,7 @@ export default {
       variables() {
         return {
           streamId: this.streamId,
-          id: this.newObjectHash ?? this.objectId
+          id: this.objectId
         }
       },
       update(data) {
@@ -114,7 +115,7 @@ export default {
   data() {
     return {
       globalsArray: [],
-      newObjectHash: null,
+      globalsAreValid: true, //TODO: how to update this if validation fails in child components?
       saveDialog: false,
       deleteEntries: false,
       sample: {
@@ -124,11 +125,10 @@ export default {
   },
   computed: {
     globalsCommit() {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.globalsAreValid = true
       let base = this.globalsToBase(this.globalsArray)
       return base
-    },
-    validObject() {
-      return this.checkValidKeys(this.globalsArray)
     }
   },
   mounted() {
@@ -151,24 +151,21 @@ export default {
               key,
               value: val,
               globals: this.nestedGlobals(val),
-              type: 'object', //TODO: handle references
-              isValid: true
+              type: 'object' //TODO: handle references
             })
           } else {
             arr.push({
               key,
               value: val,
               globals: this.nestedGlobals(val),
-              type: 'object',
-              isValid: true
+              type: 'object'
             })
           }
         } else {
           arr.push({
             key,
             value: val,
-            type: 'field',
-            isValid: true
+            type: 'field'
           })
         }
       }
@@ -184,6 +181,8 @@ export default {
       arr.forEach((entry) => {
         if (!entry.value && !entry.globals) return
 
+        if (arr.filter((e) => e.key == entry.key).length > 1) this.globalsAreValid = false
+
         if (Array.isArray(entry.value)) base[entry.key] = entry.value
         else if (entry.type == 'object') {
           base[entry.key] = this.globalsToBase(entry.globals)
@@ -248,21 +247,6 @@ export default {
     closeSaveDialog() {
       this.saveDialog = false
       this.$emit('new-commit')
-    },
-    checkValidKeys(arr) {
-      if (!arr) return false
-      let valid = true
-      arr.forEach((o) => {
-        if (o.type == 'object') {
-          valid = this.checkValidKeys(o.globals)
-        }
-
-        if (!valid) return false
-
-        if (!o.isValid) return false
-      })
-
-      return true
     }
   }
 }
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index d7d696f06..ab8b56a1c 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -163,14 +163,10 @@ export default {
             (v) => !!v || 'Properties need to have a name!',
             (v) => {
               let filtered = entries.filter((_, i) => i != index)
-              if (filtered.findIndex((e) => e.key === v) === -1) {
-                // this.entries[index].$set('isValid', true)
-                entries[index].isValid = true
-                return true
-              } else {
-                entries[index].isValid = false
-                return 'A property with this name already exists'
-              }
+              return (
+                filtered.findIndex((e) => e.key === v) === -1 ||
+                'A property with this name already exists'
+              )
             }
           ]
         }
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index ebc628450..3b8a24964 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -75,7 +75,7 @@ export default {
     async createClicked() {
       if (!this.branch) {
         this.loading = true
-        this.$matomo && this.$matomo.trackPageView('branch/create')
+        this.$matomo && this.$matomo.trackPageView('globals/branch/create')
         await this.$apollo.mutate({
           mutation: gql`
             mutation branchCreate($params: BranchCreateInput!) {

From 07357a40e5f69af1755750e8fa2aa723600baf9d Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 12:45:50 +0100
Subject: [PATCH 22/45] feat(globals): history!

---
 .../src/components/GlobalsBuilder.vue         |  7 +++++-
 .../src/components/ListItemCommit.vue         |  4 +--
 packages/frontend/src/router/index.js         |  8 ++++++
 packages/frontend/src/views/Globals.vue       | 25 +++++++++++++++----
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 407b85ef0..93a14ae58 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -8,7 +8,8 @@
         @close="closeSaveDialog"
       />
     </v-dialog>
-    <v-card-title>Globals</v-card-title>
+    <v-card-title v-if="commitMessage">{{ commitMessage }}</v-card-title>
+    <v-card-title v-else>Globals</v-card-title>
     <v-card-text>
       These global variables can be used for storing design values, project requirements, notes, or
       any info you want to keep track of alongside your geometry. These values can be text, numbers,
@@ -110,6 +111,10 @@ export default {
     streamId: {
       type: String,
       default: null
+    },
+    commitMessage: {
+      type: String,
+      default: null
     }
   },
   data() {
diff --git a/packages/frontend/src/components/ListItemCommit.vue b/packages/frontend/src/components/ListItemCommit.vue
index c3feae697..7703979e1 100644
--- a/packages/frontend/src/components/ListItemCommit.vue
+++ b/packages/frontend/src/components/ListItemCommit.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-list-item :to="`/streams/${streamId}/commits/${commit.id}`">
+  <v-list-item :to="route ? route : `/streams/${streamId}/commits/${commit.id}`">
     <v-list-item-icon>
       <user-avatar
         :id="commit.authorId"
@@ -36,7 +36,7 @@ import SourceAppAvatar from './SourceAppAvatar'
 
 export default {
   components: { UserAvatar, SourceAppAvatar },
-  props: ['commit', 'streamId'],
+  props: ['commit', 'streamId', 'route'],
   computed: {
     commitDate() {
       if (!this.commit) return null
diff --git a/packages/frontend/src/router/index.js b/packages/frontend/src/router/index.js
index a5d8dc60e..5224ef4f9 100644
--- a/packages/frontend/src/router/index.js
+++ b/packages/frontend/src/router/index.js
@@ -91,6 +91,14 @@ const routes = [
             },
             component: () => import('../views/Globals.vue')
           },
+          {
+            path: 'globals/:commitId',
+            name: 'previous globals',
+            meta: {
+              title: 'Globals | Speckle'
+            },
+            component: () => import('../views/Globals.vue')
+          },
           {
             path: 'branches/',
             name: 'branches',
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index 3b8a24964..840387ba6 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -21,12 +21,21 @@
         :branch-name="branchName"
         :stream-id="streamId"
         :object-id="objectId"
+        :commit-message="commit.message"
         :user-role="$attrs['user-role']"
         @new-commit="$apollo.queries.branch.refetch()"
       />
       <v-card>
         <v-card-title>History</v-card-title>
-        <v-card-text>TODO</v-card-text>
+        <v-card-text>
+          <list-item-commit
+            v-for="item in branch.commits.items"
+            :key="item.id"
+            :route="`/streams/${streamId}/globals/${item.id}`"
+            :commit="item"
+            :stream-id="streamId"
+          />
+        </v-card-text>
       </v-card>
     </div>
   </v-container>
@@ -35,12 +44,12 @@
 <script>
 import gql from 'graphql-tag'
 import branchQuery from '../graphql/branch.gql'
-import GlobalsBuilder from '../components/GlobalsBuilder'
 
 export default {
   name: 'Globals',
   components: {
-    GlobalsBuilder
+    GlobalsBuilder: () => import('../components/GlobalsBuilder'),
+    ListItemCommit: () => import('../components/ListItemCommit')
   },
   apollo: {
     branch: {
@@ -58,7 +67,8 @@ export default {
   },
   data() {
     return {
-      branchName: 'globals', //TODO: handle multipile globals branches
+      branchName: 'globals', //TODO: handle multipile globals branches,
+
       revealBuilder: false,
       loading: false
     }
@@ -67,8 +77,13 @@ export default {
     streamId() {
       return this.$route.params.streamId
     },
+    commit() {
+      return this.$route.params.commitId
+        ? this.branch?.commits?.items?.filter((c) => c.id == this.$route.params.commitId)[0]
+        : this.branch?.commits?.items[0]
+    },
     objectId() {
-      return this.branch?.commits?.items[0]?.referencedObject
+      return this.commit?.referencedObject
     }
   },
   methods: {

From 8a806f9af56c26e1c5d0d9f71a9ec78c697ef4d1 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 12:57:57 +0100
Subject: [PATCH 23/45] fix(globals): go home if editing from history

---
 packages/frontend/src/views/Globals.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index 840387ba6..c5e838a27 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -23,7 +23,7 @@
         :object-id="objectId"
         :commit-message="commit.message"
         :user-role="$attrs['user-role']"
-        @new-commit="$apollo.queries.branch.refetch()"
+        @new-commit="newCommit"
       />
       <v-card>
         <v-card-title>History</v-card-title>
@@ -110,6 +110,10 @@ export default {
       }
 
       this.revealBuilder = true
+    },
+    newCommit() {
+      this.$apollo.queries.branch.refetch()
+      if (this.$route.params.commitId) this.$router.push(`/streams/${this.streamId}/globals`)
     }
   }
 }

From 5cd539ab807356eb6064ec3d585e663f539d6db2 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 14:39:33 +0100
Subject: [PATCH 24/45] fix(globals): null check on new create

---
 packages/frontend/src/views/Globals.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index c5e838a27..774d29901 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -21,7 +21,7 @@
         :branch-name="branchName"
         :stream-id="streamId"
         :object-id="objectId"
-        :commit-message="commit.message"
+        :commit-message="commit ? commit.message : null"
         :user-role="$attrs['user-role']"
         @new-commit="newCommit"
       />

From b883b243a9f8e2e4b9ed0e4b214ab631ba195b3b Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 4 Jun 2021 16:09:27 +0100
Subject: [PATCH 25/45] feat(frontend): globalicious validalicious

---
 .../src/components/GlobalsBuilder.vue         | 20 +++++++++--
 .../frontend/src/components/GlobalsEntry.vue  | 35 +++++++++++++++----
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 93a14ae58..f839ba674 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -68,6 +68,7 @@
 </template>
 
 <script>
+import crs from 'crypto-random-string'
 import objectQuery from '../graphql/objectSingle.gql'
 
 export default {
@@ -154,6 +155,8 @@ export default {
           if (val.speckle_type && val.speckle_type === 'reference') {
             arr.push({
               key,
+              valid: true,
+              id: crs({ length: 10 }),
               value: val,
               globals: this.nestedGlobals(val),
               type: 'object' //TODO: handle references
@@ -161,6 +164,8 @@ export default {
           } else {
             arr.push({
               key,
+              valid: true,
+              id: crs({ length: 10 }),
               value: val,
               globals: this.nestedGlobals(val),
               type: 'object'
@@ -169,6 +174,8 @@ export default {
         } else {
           arr.push({
             key,
+            valid: true,
+            id: crs({ length: 10 }),
             value: val,
             type: 'field'
           })
@@ -183,10 +190,16 @@ export default {
         speckle_type: 'Base',
         id: null
       }
-      arr.forEach((entry) => {
+
+      for (let entry of arr) {
         if (!entry.value && !entry.globals) return
 
-        if (arr.filter((e) => e.key == entry.key).length > 1) this.globalsAreValid = false
+        if (arr.filter((e) => e.key == entry.key).length > 1) {
+
+          // entry.valid = false
+          this.globalsAreValid = false
+        }
+        // if (!entry.valid) this.globalsAreValid = false
 
         if (Array.isArray(entry.value)) base[entry.key] = entry.value
         else if (entry.type == 'object') {
@@ -201,7 +214,8 @@ export default {
         } else {
           base[entry.key] = isNaN(entry.value) ? entry.value : parseFloat(entry.value)
         }
-      })
+      }
+
       return base
     },
     resetGlobals() {
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index ab8b56a1c..1b7565357 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -9,7 +9,7 @@
       @start="drag = true"
       @end="drag = false"
     >
-      <div v-for="(entry, index) in entries" :key="entry.key">
+      <div v-for="(entry, index) in entries" :key="entry.id">
         <transition type="transition" :name="!drag ? 'flip-list' : null">
           <div v-if="!entry.globals">
             <div class="d-flex align-center">
@@ -46,6 +46,8 @@
               >
                 <v-icon color="primary">mdi-cube-outline</v-icon>
               </v-btn>
+              {{ entry.valid }}
+              | {{ entry.id }}
             </div>
           </div>
           <v-card v-else rounded="lg" class="pa-3 my-6" elevation="4">
@@ -94,6 +96,8 @@
                 >
                   <v-icon color="primary">mdi-arrow-collapse-down</v-icon>
                 </v-btn>
+                {{ entry.valid }}
+                | {{ entry.id }}
               </v-col>
             </v-row>
             <globals-entry
@@ -129,6 +133,7 @@
 </template>
 <script>
 import draggable from 'vuedraggable'
+import crs from 'crypto-random-string'
 
 export default {
   name: 'GlobalsEntry',
@@ -149,6 +154,10 @@ export default {
     remove: {
       type: Boolean,
       default: false
+    },
+    invalidIds: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -163,10 +172,11 @@ export default {
             (v) => !!v || 'Properties need to have a name!',
             (v) => {
               let filtered = entries.filter((_, i) => i != index)
-              return (
+              let result =
                 filtered.findIndex((e) => e.key === v) === -1 ||
                 'A property with this name already exists'
-              )
+              entries[index].valid = result === true
+              return result
             }
           ]
         }
@@ -197,7 +207,9 @@ export default {
       let field = {
         key: `parameter ${~~(Math.random() * 100)}`,
         type: 'field',
-        value: randomPhrase
+        value: randomPhrase,
+        valid: true,
+        id: crs({ length: 10 })
       }
       this.$emit('add-prop', { field: field, path: this.path })
     },
@@ -208,8 +220,16 @@ export default {
       let obj = {
         key: entry.key,
         type: 'object',
+        id: entry.id,
+        valid: entry.valid,
         globals: [
-          { key: `placeholder ${~~(Math.random() * 100)}`, type: 'field', value: entry.value }
+          {
+            key: `placeholder ${~~(Math.random() * 100)}`,
+            type: 'field',
+            value: entry.value,
+            id: crs({ length: 10 }),
+            valid: true
+          }
         ]
       }
       this.$emit('field-to-object', { obj: obj, path: this.path, index: index })
@@ -219,7 +239,10 @@ export default {
       this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
     },
     updateKey(input, entry, index) {
-      if (this.$refs.keyInput[index].validate()) entry.key = input
+      entry.key = input
+      if (this.$refs.keyInput[index].validate()) {
+        entry.valid = true
+      }
       else if (input) {
         console.log(`UPDATE KEY >>> current key: ${entry.key}, event value: ${input}`)
       }

From 1cf4d9d8a750ec4b93ecc25d8866e5d269ea0afb Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 4 Jun 2021 16:15:00 +0100
Subject: [PATCH 26/45] feat(frontend): globals button minor tweaks

---
 packages/frontend/src/components/SidebarStream.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/SidebarStream.vue b/packages/frontend/src/components/SidebarStream.vue
index 23888a050..36f67faab 100644
--- a/packages/frontend/src/components/SidebarStream.vue
+++ b/packages/frontend/src/components/SidebarStream.vue
@@ -114,7 +114,7 @@
     </v-card-text>
 
     <v-card-text v-show="isHomeRoute">
-      <v-btn :to="`/streams/${stream.id}/globals`">Globals</v-btn>
+      <v-btn v-tooltip="'Edit stream global variables!'" block small elevation="0" :to="`/streams/${stream.id}/globals`">Globals</v-btn>
     </v-card-text>
 
     <v-card-title v-show="isHomeRoute"><h5>Collaborators</h5></v-card-title>

From 93823a5869b3cc6e3f326fa04ad2ce64223d6be7 Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 17:04:32 +0100
Subject: [PATCH 27/45] feat(globals): clean up validatialicious

---
 .../src/components/GlobalsBuilder.vue         | 24 ++++----
 .../frontend/src/components/GlobalsEntry.vue  | 56 +++++++++----------
 .../frontend/src/components/SidebarStream.vue | 10 +++-
 packages/frontend/src/views/Globals.vue       |  2 +-
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index f839ba674..abd246b09 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -8,8 +8,11 @@
         @close="closeSaveDialog"
       />
     </v-dialog>
-    <v-card-title v-if="commitMessage">{{ commitMessage }}</v-card-title>
-    <v-card-title v-else>Globals</v-card-title>
+    <v-card-title>Globals</v-card-title>
+    <v-card-subtitle v-if="commitMessage">
+      <v-icon dense class="text-subtitle-1">mdi-source-commit</v-icon>
+      {{ commitMessage }}
+    </v-card-subtitle>
     <v-card-text>
       These global variables can be used for storing design values, project requirements, notes, or
       any info you want to keep track of alongside your geometry. These values can be text, numbers,
@@ -121,7 +124,7 @@ export default {
   data() {
     return {
       globalsArray: [],
-      globalsAreValid: true, //TODO: how to update this if validation fails in child components?
+      globalsAreValid: true,
       saveDialog: false,
       deleteEntries: false,
       sample: {
@@ -194,12 +197,7 @@ export default {
       for (let entry of arr) {
         if (!entry.value && !entry.globals) return
 
-        if (arr.filter((e) => e.key == entry.key).length > 1) {
-
-          // entry.valid = false
-          this.globalsAreValid = false
-        }
-        // if (!entry.valid) this.globalsAreValid = false
+        if (!entry.valid) this.globalsAreValid = false
 
         if (Array.isArray(entry.value)) base[entry.key] = entry.value
         else if (entry.type == 'object') {
@@ -249,13 +247,13 @@ export default {
       let depth = path.length
 
       if (depth > 0) {
-        let key = path.shift()
-        entry = entry.find((e) => e.key == key)
+        let id = path.shift()
+        entry = entry.find((e) => e.id == id)
       }
 
       if (depth > 1) {
-        path.forEach((key) => {
-          entry = entry.globals.find((e) => e.key == key)
+        path.forEach((id) => {
+          entry = entry.globals.find((e) => e.id == id)
         })
       }
 
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 1b7565357..5abee900a 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -26,15 +26,20 @@
               </v-btn>
               <v-text-field
                 ref="keyInput"
-                :value="entry.key"
+                v-model="entry.key"
                 :rules="rules.keys(index, entries)"
+                :error-messages="
+                  entry.valid
+                    ? null
+                    : entry.key
+                    ? 'Each property name must be unique'
+                    : 'This property needs a name!'
+                "
                 class="entry-key mr-5"
                 hint="property name"
                 filled
                 dense
                 rounded
-                @change="updateKey($event, entry, index)"
-                @update:error="invalidKey($event, entry, index)"
               />
               <v-text-field v-model="entry.value" class="entry-value mr-5" hint="property value" />
               <v-btn
@@ -46,8 +51,6 @@
               >
                 <v-icon color="primary">mdi-cube-outline</v-icon>
               </v-btn>
-              {{ entry.valid }}
-              | {{ entry.id }}
             </div>
           </div>
           <v-card v-else rounded="lg" class="pa-3 my-6" elevation="4">
@@ -77,9 +80,15 @@
                 <v-card-title v-else>
                   <v-text-field
                     ref="keyInput"
-                    :value="entry.key"
+                    v-model="entry.key"
                     :rules="rules.keys(index, entries)"
-                    @change="updateKey($event, entry, index)"
+                    :error-messages="
+                      entry.valid
+                        ? null
+                        : entry.key
+                        ? 'Each property name must be unique'
+                        : 'This property needs a name!'
+                    "
                   ></v-text-field>
                   <v-btn icon color="primary" @click="editTitle = false">
                     <v-icon small>mdi-check</v-icon>
@@ -96,13 +105,11 @@
                 >
                   <v-icon color="primary">mdi-arrow-collapse-down</v-icon>
                 </v-btn>
-                {{ entry.valid }}
-                | {{ entry.id }}
               </v-col>
             </v-row>
             <globals-entry
               :entries="entry.globals"
-              :path="[...path, entry.key]"
+              :path="[...path, entry.id]"
               :remove="remove"
               v-on="$listeners"
             />
@@ -169,13 +176,16 @@ export default {
       rules: {
         keys(index, entries) {
           return [
-            (v) => !!v || 'Properties need to have a name!',
+            (v) => {
+              let result = !!v || 'Properties need to have a name!'
+              entries[index].valid = result === true
+              return result
+            },
             (v) => {
               let filtered = entries.filter((_, i) => i != index)
               let result =
-                filtered.findIndex((e) => e.key === v) === -1 ||
-                'A property with this name already exists'
-              entries[index].valid = result === true
+                filtered.findIndex((e) => e.key === v) === -1 || 'Each property name must be unique'
+              entries[index].valid = !!v && result === true
               return result
             }
           ]
@@ -224,7 +234,7 @@ export default {
         valid: entry.valid,
         globals: [
           {
-            key: `placeholder ${~~(Math.random() * 100)}`,
+            key: `parameter ${~~(Math.random() * 100)}`,
             type: 'field',
             value: entry.value,
             id: crs({ length: 10 }),
@@ -237,22 +247,6 @@ export default {
     emitObjectToField(entry, index) {
       let fields = entry.globals
       this.$emit('object-to-field', { fields: fields, path: this.path, index: index })
-    },
-    updateKey(input, entry, index) {
-      entry.key = input
-      if (this.$refs.keyInput[index].validate()) {
-        entry.valid = true
-      }
-      else if (input) {
-        console.log(`UPDATE KEY >>> current key: ${entry.key}, event value: ${input}`)
-      }
-    },
-    invalidKey(event, entry, index) {
-      if (!event) return
-      console.log(`validate result: ${this.$refs.keyInput[index].validate()}`)
-      console.log(
-        `INVALID KEY >>> current key: ${entry.key}, field value: ${this.$refs.keyInput[index].value}`
-      )
     }
   }
 }
diff --git a/packages/frontend/src/components/SidebarStream.vue b/packages/frontend/src/components/SidebarStream.vue
index 36f67faab..dd90fe8a3 100644
--- a/packages/frontend/src/components/SidebarStream.vue
+++ b/packages/frontend/src/components/SidebarStream.vue
@@ -114,7 +114,15 @@
     </v-card-text>
 
     <v-card-text v-show="isHomeRoute">
-      <v-btn v-tooltip="'Edit stream global variables!'" block small elevation="0" :to="`/streams/${stream.id}/globals`">Globals</v-btn>
+      <v-btn
+        v-tooltip="'Edit stream global variables!'"
+        block
+        small
+        elevation="0"
+        :to="`/streams/${stream.id}/globals`"
+      >
+        Globals
+      </v-btn>
     </v-card-text>
 
     <v-card-title v-show="isHomeRoute"><h5>Collaborators</h5></v-card-title>
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index 774d29901..3d83b5023 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -25,7 +25,7 @@
         :user-role="$attrs['user-role']"
         @new-commit="newCommit"
       />
-      <v-card>
+      <v-card v-if="branch.commits.items.length">
         <v-card-title>History</v-card-title>
         <v-card-text>
           <list-item-commit

From ee106c6f09fd0e9738ca8344d9f8d1e2a31af0eb Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 17:25:02 +0100
Subject: [PATCH 28/45] =?UTF-8?q?feat(globals):=20more=20tweaks=20?=
 =?UTF-8?q?=F0=9F=96=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/GlobalsBuilder.vue         | 22 ++++++++++++++++++-
 .../frontend/src/components/GlobalsEntry.vue  |  4 ++--
 packages/frontend/src/views/Globals.vue       |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index abd246b09..a7d32a5e1 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -35,6 +35,9 @@
         :label="`DELETE`"
       ></v-switch>
       <v-spacer />
+      <v-btn v-tooltip="'Clear all globals'" color="primary" small @click="clearGlobals">
+        clear
+      </v-btn>
       <v-btn v-tooltip="'Undo any changes'" color="primary" small @click="resetGlobals">
         reset all
       </v-btn>
@@ -128,7 +131,21 @@ export default {
       saveDialog: false,
       deleteEntries: false,
       sample: {
-        text: 'here are some words'
+        Region: 'London',
+        'Project Code': 'GB123456',
+        'Linked Projects': ['GB654321', 'EU424242'],
+        'Project Lead': 'Sir Spockle II',
+        'Pretty Cool?': true,
+        Climate: {
+          'Summer DBT [C]': 35,
+          'Summer WBT [C]': 20,
+          'Winter DBT [C]': -4,
+          'Winter WBT [C]': -4,
+          Enthalpy: {
+            'Summer Enthalpy [kJ/kg]': 56.87,
+            'Winter Enthalpy [kJ/kg]': 2.74
+          }
+        }
       }
     }
   },
@@ -222,6 +239,9 @@ export default {
         ? this.nestedGlobals(this.object.data)
         : this.nestedGlobals(this.sample)
     },
+    clearGlobals() {
+      this.globalsArray = this.nestedGlobals({ placeholder: 'something cool goes here...' })
+    },
     addProp(kwargs) {
       let globals = this.getNestedGlobals(kwargs.path)
       globals.splice(globals.length, 0, kwargs.field)
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 5abee900a..1ff68ab24 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -215,7 +215,7 @@ export default {
         ' ' +
         bimNouns[Math.floor(Math.random() * bimNouns.length)]
       let field = {
-        key: `parameter ${~~(Math.random() * 100)}`,
+        key: `placeholder ${crs({ length: 6 })}`,
         type: 'field',
         value: randomPhrase,
         valid: true,
@@ -234,7 +234,7 @@ export default {
         valid: entry.valid,
         globals: [
           {
-            key: `parameter ${~~(Math.random() * 100)}`,
+            key: `placeholder ${crs({ length: 6 })}`,
             type: 'field',
             value: entry.value,
             id: crs({ length: 10 }),
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index 3d83b5023..d9d1f870a 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -25,7 +25,7 @@
         :user-role="$attrs['user-role']"
         @new-commit="newCommit"
       />
-      <v-card v-if="branch.commits.items.length">
+      <v-card v-if="!$apollo.loading && branch.commits.items.length">
         <v-card-title>History</v-card-title>
         <v-card-text>
           <list-item-commit

From 46ada39e59d566681cccc2ad180b22751dd4f42a Mon Sep 17 00:00:00 2001
From: izzy lyseggen <izzy.lyseggen@gmail.com>
Date: Fri, 4 Jun 2021 17:48:07 +0100
Subject: [PATCH 29/45] feat(frontend): specific globals route frm sidebar

---
 packages/frontend/src/components/SidebarStream.vue | 2 +-
 packages/frontend/src/views/Streams.vue            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/SidebarStream.vue b/packages/frontend/src/components/SidebarStream.vue
index dd90fe8a3..edde19ff4 100644
--- a/packages/frontend/src/components/SidebarStream.vue
+++ b/packages/frontend/src/components/SidebarStream.vue
@@ -32,7 +32,7 @@
         class="pa-2"
         :to="
           stream.commits.items[0].branchName.startsWith('globals')
-            ? `/streams/${stream.id}/${stream.commits.items[0].branchName}`
+            ? `/streams/${stream.id}/${stream.commits.items[0].branchName}/${stream.commits.items[0].id}`
             : `/streams/${stream.id}/commits/${stream.commits.items[0].id}`
         "
       >
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index d541fefe7..5246aad14 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -42,7 +42,7 @@
                     <router-link
                       :to="
                         a.branchName.startsWith('globals')
-                          ? `streams/${a.streamId}/${a.branchName}`
+                          ? `streams/${a.streamId}/${a.branchName}/${a.id}`
                           : `streams/${a.streamId}/commits/${a.id}`
                       "
                     >

From d51ce2165f02e2953a30ca708ee5836d3de8de91 Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Fri, 4 Jun 2021 18:43:34 +0100
Subject: [PATCH 30/45] new words

---
 packages/frontend/src/components/GlobalsBuilder.vue | 4 ++--
 packages/frontend/src/components/GlobalsEntry.vue   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index a7d32a5e1..10e37c24a 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -15,9 +15,9 @@
     </v-card-subtitle>
     <v-card-text>
       These global variables can be used for storing design values, project requirements, notes, or
-      any info you want to keep track of alongside your geometry. These values can be text, numbers,
+      any info you want to keep track of alongside your geometry. Variable values can be text, numbers,
       lists, or booleans. Click the box icon next to any field to turn it into a nested group of
-      fields. You can drag and drop fields in and out of groups as you please. Note that field order
+      fields, and drag and drop fields in and out of groups as you please! Note that field order
       may not always be preserved.
     </v-card-text>
     <v-card-text v-if="!(userRole === 'contributor') && !(userRole === 'owner')">
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 1ff68ab24..687d9fb7a 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -205,9 +205,9 @@ export default {
   },
   methods: {
     emitAddProp() {
-      var bimNouns = ['parameter', 'BIM', 'triple O', 'digital twin', 'LOD 9000', 'automation']
-      var bimAdjs = ['parametric', 'chonky', '3D']
-      var bimExclamations = ['wow', 'much']
+      var bimNouns = ['parameter', 'BIM', 'triple O', 'digital twin', 'LOD 9000', 'automation', 'structure', 'layer', 'interop']
+      var bimAdjs = ['parametric', 'chonky', '3D', 'liminal', 'brutalist', 'postmodern', 'discrete', 'dank']
+      var bimExclamations = ['wow', 'much', 'yes', 'towards a new']
       var randomPhrase =
         bimExclamations[Math.floor(Math.random() * bimExclamations.length)] +
         ' ' +

From 9d254e71423140de00cb3b4b8029fd29d7ca2661 Mon Sep 17 00:00:00 2001
From: Cristian Balas <cristi8@gmail.com>
Date: Mon, 7 Jun 2021 08:08:04 +0300
Subject: [PATCH 31/45] Keep commits of deleted users to other streams, but set
 the user reference to null (#276)

* Keep commits of deleted users to other streams, but set the user reference to null

* fix(server): user deletion fixes; updates tests

includes one failing assert that needs to be fixed

* fix(server): left join on users in commit services to handle null author cases

* fix(server): ditto, caught one more join -> leftJoin case

* test(server): user deletion test wrap-ip

catches all commit/branches with null authors re services

* fix(server): unqualified delete syntax error - thanks JS!

Co-authored-by: Dimitrie Stefanescu <didimitrie@gmail.com>
---
 .../modules/core/graph/resolvers/branches.js  |  4 +-
 .../modules/core/graph/resolvers/users.js     |  4 +-
 .../graph/schemas/branchesAndCommits.graphql  |  2 +-
 ...20210603160000_optional_user_references.js | 44 ++++++++++++++++
 .../server/modules/core/services/commits.js   |  6 +--
 .../server/modules/core/services/users.js     |  8 +--
 .../server/modules/core/tests/users.spec.js   | 51 ++++++++++++++++---
 7 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 packages/server/modules/core/migrations/20210603160000_optional_user_references.js

diff --git a/packages/server/modules/core/graph/resolvers/branches.js b/packages/server/modules/core/graph/resolvers/branches.js
index fa8a98801..4779743a7 100644
--- a/packages/server/modules/core/graph/resolvers/branches.js
+++ b/packages/server/modules/core/graph/resolvers/branches.js
@@ -40,7 +40,9 @@ module.exports = {
   Branch: {
 
     async author( parent, args, context, info ) {
-      return await getUserById( { userId: parent.authorId } )
+      if ( parent.userId )
+        return await getUserById( { userId: parent.authorId } )
+      else return null
     }
 
   },
diff --git a/packages/server/modules/core/graph/resolvers/users.js b/packages/server/modules/core/graph/resolvers/users.js
index 6e3c33b6d..af85ab1d2 100644
--- a/packages/server/modules/core/graph/resolvers/users.js
+++ b/packages/server/modules/core/graph/resolvers/users.js
@@ -40,8 +40,8 @@ module.exports = {
       if ( args.limit  && args.limit > 100 )
         throw new UserInputError( 'Cannot return more than 100 items, please use pagination.' )
 
-      let {cursor, users} = await searchUsers( args.query, args.limit, args.cursor )
-      return {cursor: cursor, items: users}
+      let { cursor, users } = await searchUsers( args.query, args.limit, args.cursor )
+      return { cursor: cursor, items: users }
     },
 
     async userPwdStrength( parent, args, context, info ) {
diff --git a/packages/server/modules/core/graph/schemas/branchesAndCommits.graphql b/packages/server/modules/core/graph/schemas/branchesAndCommits.graphql
index f2f56cc59..89aaa5a68 100644
--- a/packages/server/modules/core/graph/schemas/branchesAndCommits.graphql
+++ b/packages/server/modules/core/graph/schemas/branchesAndCommits.graphql
@@ -12,7 +12,7 @@ extend type User {
 type Branch {
   id: String!
   name: String!
-  author: User!
+  author: User
   description: String
   commits(limit: Int! = 25, cursor: String): CommitCollection
 }
diff --git a/packages/server/modules/core/migrations/20210603160000_optional_user_references.js b/packages/server/modules/core/migrations/20210603160000_optional_user_references.js
new file mode 100644
index 000000000..8d5de7ea2
--- /dev/null
+++ b/packages/server/modules/core/migrations/20210603160000_optional_user_references.js
@@ -0,0 +1,44 @@
+// /* istanbul ignore file */
+exports.up = async ( knex ) => {
+  await knex.raw( 'ALTER TABLE commits ALTER COLUMN "author" DROP NOT NULL;' )
+  await knex.raw( 'ALTER TABLE commits DROP CONSTRAINT commits_author_foreign;' )
+  await knex.raw( `
+    ALTER TABLE commits
+    ADD CONSTRAINT commits_author_foreign 
+    FOREIGN KEY (author) 
+    REFERENCES users(id)
+    ON DELETE SET NULL;
+  ` )
+
+  await knex.raw( 'ALTER TABLE branches DROP CONSTRAINT branches_authorid_foreign;' )
+  await knex.raw( `
+    ALTER TABLE branches
+    ADD CONSTRAINT branches_authorid_foreign 
+    FOREIGN KEY ("authorId") 
+    REFERENCES users(id)
+    ON DELETE SET NULL;
+  ` )
+}
+
+exports.down = async ( knex ) => {
+  // NOTE: 
+  // This migration cannot run backwards: if a user deletes their account, the previous not null 
+  // constraint cannot be satisfied. Therefore, there's no going back (and there isn't really a need either).
+
+  // await knex.raw( 'ALTER TABLE branches DROP CONSTRAINT branches_authorid_foreign;' )
+  // await knex.raw( `
+  //   ALTER TABLE branches
+  //   ADD CONSTRAINT branches_authorid_foreign 
+  //   FOREIGN KEY ("authorId") 
+  //   REFERENCES users(id);
+  // ` )
+
+  // await knex.raw( 'ALTER TABLE commits DROP CONSTRAINT commits_author_foreign;' )
+  // await knex.raw( `
+  //   ALTER TABLE commits
+  //   ADD CONSTRAINT commits_author_foreign 
+  //   FOREIGN KEY (author) 
+  //   REFERENCES users(id);
+  // ` )
+  // await knex.raw( 'ALTER TABLE commits ALTER COLUMN "author" SET NOT NULL;' )
+}
diff --git a/packages/server/modules/core/services/commits.js b/packages/server/modules/core/services/commits.js
index b08b60de0..8af28a67e 100644
--- a/packages/server/modules/core/services/commits.js
+++ b/packages/server/modules/core/services/commits.js
@@ -63,9 +63,9 @@ module.exports = {
     let query = await Commits( )
       .columns( [ { id: 'commits.id' }, 'message', 'referencedObject', 'sourceApplication', 'totalChildrenCount', 'parents', 'commits.createdAt', { branchName: 'branches.name' }, { authorName: 'users.name' }, { authorId: 'users.id' }, { authorAvatar: 'users.avatar' } ] )
       .select( )
-      .join( 'users', 'commits.author', 'users.id' )
       .join( 'branch_commits', 'commits.id', 'branch_commits.commitId' )
       .join( 'branches', 'branches.id', 'branch_commits.branchId' )
+      .leftJoin( 'users', 'commits.author', 'users.id' )
       .where( { 'commits.id': id } )
       .first( )
     return await query
@@ -97,8 +97,8 @@ module.exports = {
       .columns( [ { id: 'commitId' }, 'message', 'referencedObject', 'sourceApplication', 'totalChildrenCount', 'parents',  'commits.createdAt', { branchName: 'branches.name' },{ authorName: 'users.name' }, { authorId: 'users.id' }, { authorAvatar: 'users.avatar' } ] )
       .select( )
       .join( 'commits', 'commits.id', 'branch_commits.commitId' )
-      .join( 'users', 'commits.author', 'users.id' )
       .join( 'branches', 'branches.id', 'branch_commits.branchId' )
+      .leftJoin( 'users', 'commits.author', 'users.id' )
       .where( 'branchId', branchId )
 
     if ( cursor )
@@ -132,9 +132,9 @@ module.exports = {
       .columns( [ { id: 'commits.id' }, 'message', 'referencedObject', 'sourceApplication', 'totalChildrenCount', 'parents', 'commits.createdAt', { branchName: 'branches.name' }, { authorName: 'users.name' }, { authorId: 'users.id' }, { authorAvatar: 'users.avatar' } ] )
       .select( )
       .join( 'commits', 'commits.id', 'stream_commits.commitId' )
-      .join( 'users', 'commits.author', 'users.id' )
       .join( 'branch_commits', 'commits.id', 'branch_commits.commitId' )
       .join( 'branches', 'branches.id', 'branch_commits.branchId' )
+      .leftJoin( 'users', 'commits.author', 'users.id' )
       .where( 'stream_commits.streamId', streamId )
 
 
diff --git a/packages/server/modules/core/services/users.js b/packages/server/modules/core/services/users.js
index bd86ae907..438430794 100644
--- a/packages/server/modules/core/services/users.js
+++ b/packages/server/modules/core/services/users.js
@@ -63,14 +63,16 @@ module.exports = {
 
   async getUserById( { userId } ) {
     let user = await Users( ).where( { id: userId } ).select( '*' ).first( )
-    delete user.passwordDigest
+    if ( user ) 
+      delete user.passwordDigest
     return user
   },
 
   // TODO: deprecate
   async getUser( id ) {
     let user = await Users( ).where( { id: id } ).select( '*' ).first( )
-    delete user.passwordDigest
+    if ( user ) 
+      delete user.passwordDigest
     return user
   },
 
@@ -150,8 +152,6 @@ module.exports = {
     for ( let i in streams.rows ) {
       await deleteStream( { streamId: streams.rows[i].id } )
     }
-    await knex.raw( 'DELETE FROM commits WHERE author = ?', [ id ] )
-    await knex.raw( 'DELETE FROM branches WHERE "authorId" = ?', [ id ] )
     
     return await Users( ).where( { id: id } ).del( )
   }
diff --git a/packages/server/modules/core/tests/users.spec.js b/packages/server/modules/core/tests/users.spec.js
index 02232d4e9..568a75faa 100644
--- a/packages/server/modules/core/tests/users.spec.js
+++ b/packages/server/modules/core/tests/users.spec.js
@@ -15,6 +15,21 @@ const { createUser, findOrCreateUser, getUser, searchUsers, updateUser, deleteUs
 const { createPersonalAccessToken, createAppToken, revokeToken, revokeTokenById, validateToken, getUserTokens } = require( '../services/tokens' )
 const { grantPermissionsStream, createStream, getStream } = require( '../services/streams' )
 
+const {
+  createBranch,
+  getBranchesByStreamId
+} = require( '../services/branches' )
+
+const {
+  createCommitByBranchName,
+  getCommitsByBranchName,
+  getCommitById,
+  getCommitsByStreamId,
+  deleteCommit,
+} = require( '../services/commits' )
+
+const { createObject, createObjects } = require( '../services/objects' )
+
 describe( 'Actors & Tokens @user-services', ( ) => {
   let myTestActor = {
     name: 'Dimitrie Stefanescu',
@@ -110,29 +125,53 @@ describe( 'Actors & Tokens @user-services', ( ) => {
 
     } )
 
+    // Note: deletion is more complicated. 
     it( 'Should delete a user', async ( ) => {
       let soloOwnerStream = { name: 'Test Stream 01', description: 'wonderful test stream', isPublic: true }
       let multiOwnerStream = { name: 'Test Stream 02', description: 'another test stream', isPublic: true }
+
       soloOwnerStream.id = await createStream( { ...soloOwnerStream, ownerId: ballmerUserId } )
       multiOwnerStream.id = await createStream( { ...multiOwnerStream, ownerId: ballmerUserId } )
+      
       await grantPermissionsStream( { streamId: multiOwnerStream.id, userId: myTestActor.id, role: 'stream:owner' } )
       
+      // create a branch for ballmer on the multiowner stream
+      let branch = { name: 'ballmer/dev' }
+      branch.id = await createBranch( { ...branch, streamId: multiOwnerStream.id, authorId: ballmerUserId } )
+
+      let branchSecond = { name: 'steve/jobs' }
+      branchSecond.id = await createBranch( { ...branchSecond, streamId: multiOwnerStream.id, authorId: myTestActor.id } )
+
+      // create an object and a commit around it on the multiowner stream
+      let objId = await createObject( multiOwnerStream.id, { pie: 'in the sky' } )
+      let commitId = await createCommitByBranchName( { streamId: multiOwnerStream.id, branchName: 'ballmer/dev', message: 'breakfast commit', sourceApplication: 'tests', objectId:objId, authorId: ballmerUserId } )
+      
       await deleteUser( ballmerUserId )
 
       if ( await getStream( { streamId: soloOwnerStream.id } ) !== undefined ) {
         assert.fail( 'user stream not deleted' )
       }
+
       let multiOwnerStreamCopy = await getStream( { streamId: multiOwnerStream.id } )
       if ( !multiOwnerStreamCopy || multiOwnerStreamCopy.id != multiOwnerStream.id ) {
         assert.fail( 'shared stream deleted' )
       }
 
-      try {
-        let user = await getUser( ballmerUserId )
-      } catch ( e ) {
-        return
-      }
-      assert.fail( 'user not deleted' )
+      let branches = await getBranchesByStreamId( { streamId: multiOwnerStream.id } )
+      expect( branches.items.length ).to.equal( 3 )
+
+      let branchCommits = await getCommitsByBranchName( { streamId: multiOwnerStream.id, branchName:'ballmer/dev' } )
+      expect( branchCommits.commits.length ).to.equal( 1 )
+
+      let commit = await getCommitById( { id: commitId } )
+      expect( commit ).to.be.not.null
+
+      let commitsByStreamId = await getCommitsByStreamId( { streamId: multiOwnerStream.id } )
+      expect( commitsByStreamId.commits.length ).to.equal( 1 )
+
+      let user = await getUser( ballmerUserId )
+      if ( user )
+        assert.fail( 'user not deleted' )
     } )
 
     it( 'Should get a user', async ( ) => {

From 399e219fa9990b535e4a34248bf1b4b8fc1bbb06 Mon Sep 17 00:00:00 2001
From: cristi8 <cristi8@gmail.com>
Date: Fri, 4 Jun 2021 11:49:20 +0300
Subject: [PATCH 32/45] test

---
 .../server/modules/core/rest/diffDownload.js  | 29 ++++++++++++++++++-
 .../modules/core/rest/speckleObjectsStream.js | 27 +++++++++++++++++
 .../server/modules/core/services/objects.js   |  4 +--
 packages/server/package.json                  |  1 +
 4 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 packages/server/modules/core/rest/speckleObjectsStream.js

diff --git a/packages/server/modules/core/rest/diffDownload.js b/packages/server/modules/core/rest/diffDownload.js
index 5bdc9750b..419b63f67 100644
--- a/packages/server/modules/core/rest/diffDownload.js
+++ b/packages/server/modules/core/rest/diffDownload.js
@@ -8,9 +8,13 @@ const cors = require( 'cors' )
 const { matomoMiddleware } = require( `${appRoot}/logging/matomoHelper` )
 const { contextMiddleware, validateScopes, authorizeResolver } = require( `${appRoot}/modules/shared` )
 const { validatePermissionsReadStream } = require( './authUtils' )
-
+const { SpeckleObjectsStream } = require( './speckleObjectsStream' )
 const { getObjectsStream } = require( '../services/objects' )
 
+const { pipeline } = require( 'stream' )
+
+const fsCapacitor = require( 'fs-capacitor' )
+
 module.exports = ( app ) => {
 
   app.options( '/api/getobjects/:streamId', cors() )
@@ -35,6 +39,29 @@ module.exports = ( app ) => {
 
     const gzip = zlib.createGzip( )
 
+    const fsCapacitorStream = new fsCapacitor.WriteStream()
+
+    fsCapacitorStream.createReadStream().pipe( res )
+
+    pipeline(
+      dbStream,
+      new SpeckleObjectsStream( true ),
+      gzip,
+      fsCapacitorStream,
+      ( err ) => {
+        if ( err ) {
+          console.error( 'Pipeline failed.', err )
+        } else {
+          console.log( 'Pipeline succeeded.' )
+        }
+      }
+    )
+
+    res.on( 'finish', function() {
+      fsCapacitorStream.destroy()
+    } )
+    return
+
     if ( !simpleText ) gzip.write( '[' )
 
     // helper func to flush the gzip buffer
diff --git a/packages/server/modules/core/rest/speckleObjectsStream.js b/packages/server/modules/core/rest/speckleObjectsStream.js
new file mode 100644
index 000000000..6a1f6109b
--- /dev/null
+++ b/packages/server/modules/core/rest/speckleObjectsStream.js
@@ -0,0 +1,27 @@
+const { Transform } = require( 'stream' )
+
+// A stream that converts database objects stream to "{id}\t{data_json}\n" stream or a json stream of obj.data fields
+
+class SpeckleObjectsStream extends Transform {
+  constructor( simpleText ) {
+    super( { writableObjectMode: true } )
+    this.simpleText = simpleText
+  }
+
+  _transform( dbObj, encoding, callback ) {
+    if ( this.simpleText ) {
+      this.push( `${dbObj.data.id}\t${JSON.stringify( dbObj.data )}\n` )
+      
+    } else {
+
+    }
+    callback()
+  }
+
+  _flush( callback ) {
+    callback()
+  }
+
+}
+
+exports.SpeckleObjectsStream = SpeckleObjectsStream
diff --git a/packages/server/modules/core/services/objects.js b/packages/server/modules/core/services/objects.js
index 9c7bcbdce..0d715b5e7 100644
--- a/packages/server/modules/core/services/objects.js
+++ b/packages/server/modules/core/services/objects.js
@@ -203,7 +203,7 @@ module.exports = {
     } )
       .where( knex.raw( 'object_children_closure."streamId" = ? AND parent = ?', [ streamId, objectId ] ) )
       .orderBy( 'objects.id' )
-    return q.stream( )
+    return q.stream( { highWaterMark: 2 } )
   },
 
   async getObjectChildren( { streamId, objectId, limit, depth, select, cursor } ) {
@@ -442,7 +442,7 @@ module.exports = {
       .andWhere( 'streamId', streamId )
       .orderBy( 'id' )
       .select( 'id', 'speckleType', 'totalChildrenCount', 'totalChildrenCountByDepth', 'createdAt', 'data' )
-    return res.stream( )
+    return res.stream( { highWaterMark: 2 } )
   },
 
   async hasObjects( { streamId, objectIds } ) {
diff --git a/packages/server/package.json b/packages/server/package.json
index 19ce60c1c..0c1d6b686 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -33,6 +33,7 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
+    "fs-capacitor": "^6.2.0",
     "graphql": "^14.6.0",
     "graphql-redis-subscriptions": "^2.2.2",
     "graphql-scalars": "^1.6.1",

From 2981dbf0ed3ff3b6fb14c3d6b2316cec7b2a5039 Mon Sep 17 00:00:00 2001
From: cristi8 <cristi8@gmail.com>
Date: Mon, 7 Jun 2021 08:54:03 +0300
Subject: [PATCH 33/45] .

---
 packages/server/modules/core/rest/diffDownload.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/server/modules/core/rest/diffDownload.js b/packages/server/modules/core/rest/diffDownload.js
index 419b63f67..9ec1e3f0f 100644
--- a/packages/server/modules/core/rest/diffDownload.js
+++ b/packages/server/modules/core/rest/diffDownload.js
@@ -13,8 +13,6 @@ const { getObjectsStream } = require( '../services/objects' )
 
 const { pipeline } = require( 'stream' )
 
-const fsCapacitor = require( 'fs-capacitor' )
-
 module.exports = ( app ) => {
 
   app.options( '/api/getobjects/:streamId', cors() )
@@ -39,15 +37,11 @@ module.exports = ( app ) => {
 
     const gzip = zlib.createGzip( )
 
-    const fsCapacitorStream = new fsCapacitor.WriteStream()
-
-    fsCapacitorStream.createReadStream().pipe( res )
-
     pipeline(
       dbStream,
       new SpeckleObjectsStream( true ),
       gzip,
-      fsCapacitorStream,
+      res,
       ( err ) => {
         if ( err ) {
           console.error( 'Pipeline failed.', err )
@@ -57,9 +51,6 @@ module.exports = ( app ) => {
       }
     )
 
-    res.on( 'finish', function() {
-      fsCapacitorStream.destroy()
-    } )
     return
 
     if ( !simpleText ) gzip.write( '[' )

From 0f944ffb6916a69d24ea4d292e80266d7079cf1c Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 7 Jun 2021 09:33:14 +0100
Subject: [PATCH 34/45] fix(frontend): handles null users in avatar display

---
 .../frontend/src/components/UserAvatar.vue    | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/UserAvatar.vue b/packages/frontend/src/components/UserAvatar.vue
index b3a7d5e05..e15ce1a01 100644
--- a/packages/frontend/src/components/UserAvatar.vue
+++ b/packages/frontend/src/components/UserAvatar.vue
@@ -2,12 +2,22 @@
   <div style="display: inline-block">
     <v-menu v-if="loggedIn" offset-x open-on-hover>
       <template #activator="{ on, attrs }">
-        <v-avatar class="ma-1" color="grey lighten-3" :size="size" v-bind="attrs" v-on="on">
+        <v-avatar
+          v-if="user"
+          class="ma-1"
+          color="grey lighten-3"
+          :size="size"
+          v-bind="attrs"
+          v-on="on"
+        >
           <v-img v-if="avatar" :src="avatar" />
           <v-img v-else :src="`https://robohash.org/` + id + `.png?size=40x40`" />
         </v-avatar>
+        <v-avatar v-else class="ma-1" :size="size" v-bind="attrs" v-on="on">
+          <v-img contain src="/logo.svg"></v-img>
+        </v-avatar>
       </template>
-      <v-card style="width: 200px" :to="isSelf ? '/profile' : '/profile/' + id">
+      <v-card v-if="user" style="width: 200px" :to="isSelf ? '/profile' : '/profile/' + id">
         <v-card-text v-if="!$apollo.loading" class="text-center">
           <v-avatar class="my-4" color="grey lighten-3" :size="40">
             <v-img v-if="avatar" :src="avatar" />
@@ -24,6 +34,13 @@
           <br />
         </v-card-text>
       </v-card>
+      <v-card v-else>
+        <v-card-text class="text-xs">
+          <b>Speckle Robo Ghost</b>
+          <br />
+          This user no longer exists.
+        </v-card-text>
+      </v-card>
     </v-menu>
     <v-avatar v-else class="ma-1" color="grey lighten-3" :size="size">
       <v-img v-if="avatar" :src="avatar" />

From 4319d64f864f95bc4af856f88fcc5cb58549358e Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 7 Jun 2021 09:38:01 +0100
Subject: [PATCH 35/45] fix(frontend): minor fix in ghost name change

---
 packages/frontend/src/components/UserAvatar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/UserAvatar.vue b/packages/frontend/src/components/UserAvatar.vue
index e15ce1a01..ed5fca569 100644
--- a/packages/frontend/src/components/UserAvatar.vue
+++ b/packages/frontend/src/components/UserAvatar.vue
@@ -36,7 +36,7 @@
       </v-card>
       <v-card v-else>
         <v-card-text class="text-xs">
-          <b>Speckle Robo Ghost</b>
+          <b>Speckle Ghost</b>
           <br />
           This user no longer exists.
         </v-card-text>

From b4f64f0e1b981171a26bebd3ef39c98b00c2f104 Mon Sep 17 00:00:00 2001
From: cristi8 <cristi8@gmail.com>
Date: Mon, 7 Jun 2021 12:18:37 +0300
Subject: [PATCH 36/45] streaming downloads

---
 .../server/modules/core/rest/diffDownload.js  | 77 ++--------------
 .../server/modules/core/rest/diffUpload.js    |  2 +
 packages/server/modules/core/rest/download.js | 87 ++++---------------
 .../modules/core/rest/speckleObjectsStream.js | 22 +++--
 packages/server/modules/core/rest/upload.js   |  3 -
 5 files changed, 43 insertions(+), 148 deletions(-)

diff --git a/packages/server/modules/core/rest/diffDownload.js b/packages/server/modules/core/rest/diffDownload.js
index 9ec1e3f0f..36e157c7f 100644
--- a/packages/server/modules/core/rest/diffDownload.js
+++ b/packages/server/modules/core/rest/diffDownload.js
@@ -26,88 +26,25 @@ module.exports = ( app ) => {
 
     let simpleText = req.headers.accept === 'text/plain'
 
-    let dbStream = await getObjectsStream( { streamId: req.params.streamId, objectIds: childrenList } )
-
-    let currentChunkSize = 0
-    let maxChunkSize = 50000
-    let chunk = simpleText ? '' : [ ]
-    let isFirstBuffer = true
-
     res.writeHead( 200, { 'Content-Encoding': 'gzip', 'Content-Type': simpleText ? 'text/plain' : 'application/json' } )
 
-    const gzip = zlib.createGzip( )
+    let dbStream = await getObjectsStream( { streamId: req.params.streamId, objectIds: childrenList } )
+    let speckleObjStream = new SpeckleObjectsStream( simpleText )
+    let gzipStream = zlib.createGzip( )
 
     pipeline(
       dbStream,
-      new SpeckleObjectsStream( true ),
-      gzip,
+      speckleObjStream,
+      gzipStream,
       res,
       ( err ) => {
         if ( err ) {
-          console.error( 'Pipeline failed.', err )
+          debug( 'speckle:error' )( `[User ${req.context.userId || '-'}] Error streaming objects from stream ${req.params.streamId}: ${err}` )
         } else {
-          console.log( 'Pipeline succeeded.' )
+          debug( 'speckle:info' )( `[User ${req.context.userId || '-'}] Streamed ${childrenList.length} objects from stream ${req.params.streamId} (size: ${gzipStream.bytesWritten / 1000000} MB)` )
         }
       }
     )
 
-    return
-
-    if ( !simpleText ) gzip.write( '[' )
-
-    // helper func to flush the gzip buffer
-    const writeBuffer = () => {
-      if ( simpleText ) {
-        gzip.write( chunk )
-      } else {
-        if ( !isFirstBuffer ) {
-          gzip.write( ',' )
-        }
-        gzip.write( chunk.join( ',' ) )
-      }
-      gzip.flush( )
-      chunk = simpleText ? '' : [ ]
-      isFirstBuffer = false
-    }
-
-    let k = 0
-    let requestDropped = false
-    dbStream.on( 'data', row => {
-      try {
-        let data = JSON.stringify( row.data )
-        currentChunkSize += Buffer.byteLength( data, 'utf8' )
-        if ( simpleText ) {
-          chunk += `${row.data.id}\t${data}\n`
-        } else {
-          chunk.push( data )
-        }
-        if ( currentChunkSize >= maxChunkSize ) {
-          currentChunkSize = 0
-          writeBuffer()
-        }
-        k++
-      } catch ( e ) {
-        requestDropped = true
-        debug( 'speckle:error' )( `'Failed to find object, or object is corrupted.' ${req.params.objectId}` )
-        return
-      }
-    } )
-
-    dbStream.on( 'error', err => {
-      debug( 'speckle:error' )( `Error in streaming object children for ${req.params.objectId}: ${err}` )
-      requestDropped = true
-      return
-    } )
-
-    dbStream.on( 'end', ( ) => {
-      if ( currentChunkSize !== 0 ) {
-        writeBuffer()
-      }
-      if ( !simpleText ) gzip.write( ']' )
-      gzip.end( )
-    } )
-
-    // 🚬
-    gzip.pipe( res )
   } )
 }
diff --git a/packages/server/modules/core/rest/diffUpload.js b/packages/server/modules/core/rest/diffUpload.js
index 00b72e0fa..c1a437a0a 100644
--- a/packages/server/modules/core/rest/diffUpload.js
+++ b/packages/server/modules/core/rest/diffUpload.js
@@ -19,6 +19,8 @@ module.exports = ( app ) => {
     
     let objectList = JSON.parse( req.body.objects )
 
+    debug( 'speckle:info' )( `[User ${req.context.userId || '-'}] Diffing ${objectList.length} objects for stream ${req.params.streamId}` )
+
     let response = await hasObjects( { streamId: req.params.streamId, objectIds: objectList } )
     // console.log(response)
     res.writeHead( 200, { 'Content-Encoding': 'gzip', 'Content-Type': 'application/json' } )
diff --git a/packages/server/modules/core/rest/download.js b/packages/server/modules/core/rest/download.js
index 96437fd80..d17bba6a4 100644
--- a/packages/server/modules/core/rest/download.js
+++ b/packages/server/modules/core/rest/download.js
@@ -10,6 +10,8 @@ const { contextMiddleware } = require( `${appRoot}/modules/shared` )
 const { validatePermissionsReadStream } = require( './authUtils' )
 
 const { getObject, getObjectChildrenStream } = require( '../services/objects' )
+const { SpeckleObjectsStream } = require( './speckleObjectsStream' )
+const { pipeline } = require( 'stream' )
 
 module.exports = ( app ) => {
 
@@ -28,85 +30,30 @@ module.exports = ( app ) => {
       return res.status( 404 ).send( `Failed to find object ${req.params.objectId}.` )
     }
 
-    obj = obj.data
-
     let simpleText = req.headers.accept === 'text/plain'
 
-    let dbStream = await getObjectChildrenStream( { streamId: req.params.streamId, objectId: req.params.objectId } )
-
-    let currentChunkSize = 0
-    let maxChunkSize = 50000
-    let chunk = simpleText ? '' : [ ]
-    let isFirst = true
-
-
     res.writeHead( 200, { 'Content-Encoding': 'gzip', 'Content-Type': simpleText ? 'text/plain' : 'application/json' } )
 
-    const gzip = zlib.createGzip( )
+    let dbStream = await getObjectChildrenStream( { streamId: req.params.streamId, objectId: req.params.objectId } )
+    let speckleObjStream = new SpeckleObjectsStream( simpleText )
+    let gzipStream = zlib.createGzip( )
 
-    if ( !simpleText ) gzip.write( '[' )
+    speckleObjStream.write( obj )
 
-    // helper func to flush the gzip buffer
-    const writeBuffer = ( addStartingComma ) => {
-      if ( simpleText ) {
-        gzip.write( chunk )
-      } else {
-        if ( addStartingComma ) {
-          gzip.write( ',' )
-        }
-        gzip.write( chunk.join( ',' ) )
-      }
-      gzip.flush( )
-      chunk = simpleText ? '' : [ ]
-    }
-
-    var objString = JSON.stringify( obj )
-    if ( simpleText ) {
-      chunk += `${obj.id}\t${objString}\n`
-    } else {
-      chunk.push( objString )
-    }
-    writeBuffer( false )
-
-    let k = 0
-    let requestDropped = false
-    dbStream.on( 'data', row => {
-      try {
-        let data = JSON.stringify( row.data )
-        currentChunkSize += Buffer.byteLength( data, 'utf8' )
-        if ( simpleText ) {
-          chunk += `${row.data.id}\t${data}\n`
+    pipeline(
+      dbStream,
+      speckleObjStream,
+      gzipStream,
+      res,
+      ( err ) => {
+        if ( err ) {
+          debug( 'speckle:error' )( `[User ${req.context.userId || '-'}] Error downloading object ${req.params.objectId} from stream ${req.params.streamId}: ${err}` )
         } else {
-          chunk.push( data )
+          debug( 'speckle:info' )( `[User ${req.context.userId || '-'}] Downloaded object ${req.params.objectId} from stream ${req.params.streamId} (size: ${gzipStream.bytesWritten / 1000000} MB)` )
         }
-        if ( currentChunkSize >= maxChunkSize ) {
-          currentChunkSize = 0
-          writeBuffer( true )
-        }
-        k++
-      } catch ( e ) {
-        requestDropped = true
-        debug( 'speckle:error' )( `'Failed to find object, or object is corrupted.' ${req.params.objectId}` )
-        return
       }
-    } )
+    )
 
-    dbStream.on( 'error', err => {
-      debug( 'speckle:error' )( `Error in streaming object children for ${req.params.objectId}: ${err}` )
-      requestDropped = true
-      return
-    } )
-
-    dbStream.on( 'end', ( ) => {
-      if ( currentChunkSize !== 0 ) {
-        writeBuffer( true )
-      }
-      if ( !simpleText ) gzip.write( ']' )
-      gzip.end( )
-    } )
-
-    // 🚬
-    gzip.pipe( res )
   } )
 
   app.options( '/objects/:streamId/:objectId/single', cors() )
@@ -122,6 +69,8 @@ module.exports = ( app ) => {
       return res.status( 404 ).send( `Failed to find object ${req.params.objectId}.` )
     }
 
+    debug( 'speckle:info' )( `[User ${req.context.userId || '-'}] Downloaded single object ${req.params.objectId} from stream ${req.params.streamId}` )
+
     res.send( obj.data )
   } )
 }
diff --git a/packages/server/modules/core/rest/speckleObjectsStream.js b/packages/server/modules/core/rest/speckleObjectsStream.js
index 6a1f6109b..95ff22d03 100644
--- a/packages/server/modules/core/rest/speckleObjectsStream.js
+++ b/packages/server/modules/core/rest/speckleObjectsStream.js
@@ -6,19 +6,29 @@ class SpeckleObjectsStream extends Transform {
   constructor( simpleText ) {
     super( { writableObjectMode: true } )
     this.simpleText = simpleText
+
+    if ( !this.simpleText ) this.push( '[' )
+    this.isFirstObject = true
   }
 
   _transform( dbObj, encoding, callback ) {
-    if ( this.simpleText ) {
-      this.push( `${dbObj.data.id}\t${JSON.stringify( dbObj.data )}\n` )
-      
-    } else {
-
+    try {
+      if ( this.simpleText ) {
+        this.push( `${dbObj.data.id}\t${JSON.stringify( dbObj.data )}\n` )
+      } else {
+        // JSON output
+        if ( !this.isFirstObject ) this.push( ',' )
+        this.push( JSON.stringify( dbObj.data ) )
+        this.isFirstObject = false
+      }
+      callback()
+    } catch ( e ) {
+      callback( e )
     }
-    callback()
   }
 
   _flush( callback ) {
+    if ( !this.simpleText ) this.push( ']' )
     callback()
   }
 
diff --git a/packages/server/modules/core/rest/upload.js b/packages/server/modules/core/rest/upload.js
index 994658b1a..1baae71ba 100644
--- a/packages/server/modules/core/rest/upload.js
+++ b/packages/server/modules/core/rest/upload.js
@@ -18,8 +18,6 @@ module.exports = ( app ) => {
       return res.status( hasStreamAccess.status ).end()
     }
 
-    debug( 'speckle:upload-endpoint' )( 'Upload started' )
-
     let busboy = new Busboy( { headers: req.headers } )
     let totalProcessed = 0
     let last = {}
@@ -94,7 +92,6 @@ module.exports = ( app ) => {
 
       await Promise.all( promises )
 
-      debug( 'speckle:upload-endpoint' )( 'Upload ended' )
       res.status( 201 ).end( )
     } )
 

From aa395da29a48e18b31722b376bd415bdbb930303 Mon Sep 17 00:00:00 2001
From: cristi8 <cristi8@gmail.com>
Date: Mon, 7 Jun 2021 12:20:03 +0300
Subject: [PATCH 37/45] Removed temp dependency

---
 packages/server/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/server/package.json b/packages/server/package.json
index 0c1d6b686..19ce60c1c 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -33,7 +33,6 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
-    "fs-capacitor": "^6.2.0",
     "graphql": "^14.6.0",
     "graphql-redis-subscriptions": "^2.2.2",
     "graphql-scalars": "^1.6.1",

From 1768b7d4e5509883f9c55e67e4f64aaecdc26120 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 8 Jun 2021 18:42:42 +0100
Subject: [PATCH 38/45] fix(server): sanitises invite messages & adds tests

---
 .../modules/serverinvites/services/index.js   |  16 +++
 .../serverinvites/tests/serverInvites.spec.js |  40 ++++--
 packages/server/package-lock.json             | 117 ++++++++++++++++++
 packages/server/package.json                  |   1 +
 4 files changed, 166 insertions(+), 8 deletions(-)

diff --git a/packages/server/modules/serverinvites/services/index.js b/packages/server/modules/serverinvites/services/index.js
index ac97bbd4a..f0d5c5390 100644
--- a/packages/server/modules/serverinvites/services/index.js
+++ b/packages/server/modules/serverinvites/services/index.js
@@ -2,6 +2,7 @@
 const appRoot = require( 'app-root-path' )
 const crs = require( 'crypto-random-string' )
 const knex = require( `${appRoot}/db/knex` )
+const sanitizeHtml = require( 'sanitize-html' )
 
 const { getUserByEmail, getUserById } = require( `${appRoot}/modules/core/services/users` )
 
@@ -19,6 +20,15 @@ module.exports = {
 
     if ( existingUser ) throw new Error( 'This email is already associated with an account on this server!' )
 
+    if ( message ) {
+      
+      if ( message.length >= 1024 ) {
+        throw new Error( 'Personal message too long.' )
+      }
+
+      message = module.exports.sanitizeMessage( message )
+    }
+
     // check if email is already invited
     let existingInvite = await module.exports.getInviteByEmail( { email } )
     if ( existingInvite ) throw new Error( 'Already invited!' )
@@ -126,5 +136,11 @@ This email was sent from ${serverInfo.name} at ${process.env.CANONICAL_URL}, dep
 
     await Invites().where( { id: id } ).update( { used: true } )
     return true
+  },
+
+  async sanitizeMessage( message ) {
+    return sanitizeHtml( message, {
+      allowedTags: [ 'b', 'i', 'em', 'strong' ],
+    } )
   }
 }
diff --git a/packages/server/modules/serverinvites/tests/serverInvites.spec.js b/packages/server/modules/serverinvites/tests/serverInvites.spec.js
index 1bed94c85..9b9f354c5 100644
--- a/packages/server/modules/serverinvites/tests/serverInvites.spec.js
+++ b/packages/server/modules/serverinvites/tests/serverInvites.spec.js
@@ -4,6 +4,7 @@ const chai = require( 'chai' )
 const request = require( 'supertest' )
 const assert = require( 'assert' )
 const appRoot = require( 'app-root-path' )
+const { async } = require( 'crypto-random-string' )
 const { init, startHttp } = require( `${appRoot}/app` )
 
 const expect = chai.expect
@@ -11,9 +12,8 @@ const expect = chai.expect
 const knex = require( `${appRoot}/db/knex` )
 const { createUser } = require( `${appRoot}/modules/core/services/users` )
 
-const { createAndSendInvite, getInviteById, getInviteByEmail, validateInvite, useInvite } = require( `${appRoot}/modules/serverinvites/services` )
+const { createAndSendInvite, getInviteById, getInviteByEmail, validateInvite, useInvite, sanitizeMessage } = require( `${appRoot}/modules/serverinvites/services` )
 const { createStream, getStream, getStreamUsers, getUserStreams } = require( `${appRoot}/modules/core/services/streams` )
-const { createPersonalAccessToken } = require( `${appRoot}/modules/core/services/tokens` )
 
 const serverAddress = `http://localhost:${process.env.PORT || 3000}`
 
@@ -55,30 +55,51 @@ describe( 'Server Invites @server-invites', ( ) => {
 
       try {
         await createAndSendInvite( { email:'cat@speckle.systems', inviterId: actor.id, message: 'Hey, join!' } )
-        assert.fail()
       } catch ( e ) {
-      // pass
+        return
       }
+      assert.fail( 'should not allow multiple invites for the same email' )
     } )
 
     it( 'should not allow self invites', async() => {
 
       try {
         await createAndSendInvite( { email: 'didimitrie-100@gmail.com', inviterId: actor.id } )
-        assert.fail()
       } catch ( e ) {
-      // pass
+        return
       }
+      assert.fail( 'should not allow self invites' )
     } )
 
     it( 'should not allow invites from no user', async() => {
 
       try {
         await createAndSendInvite( { email: 'didimitrie233-100@gmail.com', inviterId: 'fake' } )
-        assert.fail()
       } catch ( e ) {
-      // pass
+        return
       }
+      assert.fail( 'should not allow invites from no user' )
+    } )
+
+    it( 'should not allow invites with a too long message', async() => {
+      
+      try {
+        let inviteId = await createAndSendInvite( {
+          email: '123456@gmail.com',
+          inviterId: actor.id,
+          message: longInviteMessage
+        } )
+      } catch ( e ){
+        return
+      }
+      
+      assert.fail( 'created invite with too long message' )
+    } )
+
+    it( 'should sanitize invite messages', async() => {
+      let clean = await sanitizeMessage( 'Click on my <b><a href="https://spam.com">spam link please</a></b>!' )
+      const includesLink = clean.includes( '<a' )
+      expect( includesLink ).to.be.false
     } )
 
     it( 'should get an invite by id', async() => {
@@ -220,3 +241,6 @@ function sendRequest( auth, obj, address = serverAddress ) {
   return chai.request( address ).post( '/graphql' ).set( 'Authorization', auth ).send( obj )
 
 }
+
+const longInviteMessage =
+  'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.'
diff --git a/packages/server/package-lock.json b/packages/server/package-lock.json
index 603e828bb..846ed5e9d 100644
--- a/packages/server/package-lock.json
+++ b/packages/server/package-lock.json
@@ -4498,6 +4498,11 @@
 			"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
 			"dev": true
 		},
+		"deepmerge": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+			"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+		},
 		"default-require-extensions": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.0.tgz",
@@ -4666,6 +4671,39 @@
 				"esutils": "^2.0.2"
 			}
 		},
+		"dom-serializer": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+			"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+			"requires": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			}
+		},
+		"domelementtype": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+			"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+		},
+		"domhandler": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+			"integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+			"requires": {
+				"domelementtype": "^2.2.0"
+			}
+		},
+		"domutils": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
+			"integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
+			"requires": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			}
+		},
 		"dot-prop": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
@@ -4798,6 +4836,11 @@
 				"ansi-colors": "^4.1.1"
 			}
 		},
+		"entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+		},
 		"env-paths": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.0.tgz",
@@ -6794,6 +6837,17 @@
 			"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
 			"dev": true
 		},
+		"htmlparser2": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+			"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+			"requires": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.0.0",
+				"domutils": "^2.5.2",
+				"entities": "^2.0.0"
+			}
+		},
 		"http-cache-semantics": {
 			"version": "3.8.1",
 			"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
@@ -7834,6 +7888,11 @@
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
 			"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
 		},
+		"klona": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+			"integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA=="
+		},
 		"knex": {
 			"version": "0.21.15",
 			"resolved": "https://registry.npmjs.org/knex/-/knex-0.21.15.tgz",
@@ -8830,6 +8889,11 @@
 			"integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
 			"optional": true
 		},
+		"nanoid": {
+			"version": "3.1.23",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
+			"integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw=="
+		},
 		"nanomatch": {
 			"version": "1.2.13",
 			"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -9776,6 +9840,11 @@
 				"protocols": "^1.4.0"
 			}
 		},
+		"parse-srcset": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+			"integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE="
+		},
 		"parse-url": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-5.0.2.tgz",
@@ -10073,6 +10142,23 @@
 			"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
 			"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
 		},
+		"postcss": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
+			"integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
+			"requires": {
+				"colorette": "^1.2.2",
+				"nanoid": "^3.1.23",
+				"source-map-js": "^0.6.2"
+			},
+			"dependencies": {
+				"colorette": {
+					"version": "1.2.2",
+					"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+					"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+				}
+			}
+		},
 		"postgres-array": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
@@ -10863,6 +10949,32 @@
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
 		},
+		"sanitize-html": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.4.0.tgz",
+			"integrity": "sha512-Y1OgkUiTPMqwZNRLPERSEi39iOebn2XJLbeiGOBhaJD/yLqtLGu6GE5w7evx177LeGgSE+4p4e107LMiydOf6A==",
+			"requires": {
+				"deepmerge": "^4.2.2",
+				"escape-string-regexp": "^4.0.0",
+				"htmlparser2": "^6.0.0",
+				"is-plain-object": "^5.0.0",
+				"klona": "^2.0.3",
+				"parse-srcset": "^1.0.2",
+				"postcss": "^8.0.2"
+			},
+			"dependencies": {
+				"escape-string-regexp": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+					"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+				},
+				"is-plain-object": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+				}
+			}
+		},
 		"sax": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -11245,6 +11357,11 @@
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
 			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
 		},
+		"source-map-js": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+			"integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug=="
+		},
 		"source-map-resolve": {
 			"version": "0.5.3",
 			"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
diff --git a/packages/server/package.json b/packages/server/package.json
index 19ce60c1c..a0e8ca964 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -60,6 +60,7 @@
     "pg-query-stream": "^3.4.2",
     "prom-client": "^13.1.0",
     "redis": "^3.1.1",
+    "sanitize-html": "^2.4.0",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {

From bd0e3999a62b2d6aa71be1388906eae04345a61d Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 8 Jun 2021 18:55:15 +0100
Subject: [PATCH 39/45] fix(frontend): sanitizes (using dompurify) invite
 messages. closes #264

---
 .../components/dialogs/ServerInviteDialog.vue  | 18 +++++++++++++++++-
 .../components/dialogs/StreamInviteDialog.vue  | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/dialogs/ServerInviteDialog.vue b/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
index d04b7ccbb..189fc4e08 100644
--- a/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
+++ b/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
@@ -20,7 +20,11 @@
               :rules="validation.emailRules"
               label="email"
             ></v-text-field>
-            <v-text-field v-model="message" label="message"></v-text-field>
+            <v-text-field
+              v-model="message"
+              :rules="validation.messageRules"
+              label="message"
+            ></v-text-field>
             <v-card-actions>
               <v-btn block color="primary" type="submit">Send invite</v-btn>
             </v-card-actions>
@@ -32,6 +36,7 @@
 </template>
 <script>
 import gql from 'graphql-tag'
+import DOMPurify from 'dompurify'
 
 export default {
   name: 'ServerInviteDialog',
@@ -48,6 +53,17 @@ export default {
         emailRules: [
           (v) => !!v || 'E-mail is required',
           (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid'
+        ],
+        messageRules: [
+          (v) => {
+            if (v.length >= 1024) return 'Message too long!'
+            return true
+          },
+          (v) => {
+            let pure = DOMPurify.sanitize(v)
+            if (pure !== v) return 'No crazy hacks please.'
+            else return true
+          }
         ]
       }
     }
diff --git a/packages/frontend/src/components/dialogs/StreamInviteDialog.vue b/packages/frontend/src/components/dialogs/StreamInviteDialog.vue
index c5b7ba657..526367242 100644
--- a/packages/frontend/src/components/dialogs/StreamInviteDialog.vue
+++ b/packages/frontend/src/components/dialogs/StreamInviteDialog.vue
@@ -21,7 +21,11 @@
               :rules="validation.emailRules"
               label="email"
             ></v-text-field>
-            <v-text-field v-model="message" label="message"></v-text-field>
+            <v-text-field
+              v-model="message"
+              :rules="validation.messageRules"
+              label="message"
+            ></v-text-field>
             <v-card-actions>
               <v-btn block color="primary" type="submit">Send invite</v-btn>
             </v-card-actions>
@@ -33,6 +37,7 @@
 </template>
 <script>
 import gql from 'graphql-tag'
+import DOMPurify from 'dompurify'
 
 export default {
   name: 'StreamInviteDialog',
@@ -55,6 +60,17 @@ export default {
         emailRules: [
           (v) => !!v || 'E-mail is required',
           (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid'
+        ],
+        messageRules: [
+          (v) => {
+            if (v.length >= 1024) return 'Message too long!'
+            return true
+          },
+          (v) => {
+            let pure = DOMPurify.sanitize(v)
+            if (pure !== v) return 'No crazy hacks please.'
+            else return true
+          }
         ]
       }
     }

From b1714935e1ccd807aec0373ac28daf8492c58e7c Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Tue, 8 Jun 2021 19:05:56 +0100
Subject: [PATCH 40/45] feat(frontend): adds new/edit branch buttons to main
 stream page #239

---
 .../components/dialogs/BranchEditDialog.vue   | 171 +++++++++++-------
 .../components/dialogs/BranchNewDialog.vue    | 102 +++++++----
 packages/frontend/src/views/Branches.vue      |  34 ++--
 packages/frontend/src/views/Commits.vue       |  35 ++--
 packages/frontend/src/views/StreamMain.vue    |  95 +++++++++-
 5 files changed, 291 insertions(+), 146 deletions(-)

diff --git a/packages/frontend/src/components/dialogs/BranchEditDialog.vue b/packages/frontend/src/components/dialogs/BranchEditDialog.vue
index 311070322..4cd650c4d 100644
--- a/packages/frontend/src/components/dialogs/BranchEditDialog.vue
+++ b/packages/frontend/src/components/dialogs/BranchEditDialog.vue
@@ -1,74 +1,64 @@
 <template>
-  <v-card :loading="loading">
-    <template slot="progress">
-      <v-progress-linear indeterminate></v-progress-linear>
-    </template>
-    <div v-if="branch.name !== 'main'">
-      <v-card-title>Edit Branch</v-card-title>
-      <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="updateBranch">
-        <v-card-text>
-          <v-text-field
-            v-model="name"
-            label="Name"
-            :rules="nameRules"
-            validate-on-blur
-            required
-            autofocus
-          ></v-text-field>
-          <v-textarea v-model="description" rows="2" label="Description"></v-textarea>
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" block :disabled="!valid" type="submit">Save</v-btn>
+  <v-dialog v-model="show" width="500" @keydown.esc="cancel">
+    <v-card :loading="loading" class="pa-4">
+      <template slot="progress">
+        <v-progress-linear indeterminate></v-progress-linear>
+      </template>
+      <div v-if="branch && branch.name !== 'main'">
+        <v-card-title>Edit Branch</v-card-title>
+        <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="agree">
+          <v-card-text>
+            <v-text-field
+              v-model="branch.name"
+              label="Name"
+              :rules="nameRules"
+              validate-on-blur
+              required
+              autofocus
+            ></v-text-field>
+            <v-textarea v-model="branch.description" rows="2" label="Description"></v-textarea>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text @click="cancel">Cancel</v-btn>
+            <v-btn color="primary" text :disabled="!valid" type="submit">Save</v-btn>
+          </v-card-actions>
+        </v-form>
+        <v-card-actions class="error--text body-2 pa-2">
+          <v-btn block x-small text color="error" @click="showDelete = true">Delete Branch</v-btn>
+          <v-dialog v-model="showDelete" max-width="500">
+            <v-card>
+              <v-card-title>Are you sure?</v-card-title>
+              <v-card-text>
+                You cannot undo this action. The branch
+                <b>{{ branch.name }}</b>
+                will be permanently deleted.
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn @click="showDelete = false">Cancel</v-btn>
+                <v-btn color="error" text @click="deleteBranch">Delete</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
         </v-card-actions>
-      </v-form>
-      <v-card-actions class="error--text body-2 pa-2">
-        <v-btn block x-small text color="error" @click="showDelete = true">Delete Branch</v-btn>
-        <v-dialog v-model="showDelete" max-width="500">
-          <v-card>
-            <v-card-title>Are you sure?</v-card-title>
-            <v-card-text>
-              You cannot undo this action. The branch
-              <b>{{ name }}</b>
-              will be permanently deleted.
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn @click="showDelete = false">Cancel</v-btn>
-              <v-btn color="error" text @click="deleteBranch">Delete</v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-      </v-card-actions>
-    </div>
-    <div v-else>
-      <v-card-text>You cannot edit the main branch.</v-card-text>
-    </div>
-  </v-card>
+      </div>
+      <div v-else>
+        <v-card-text>You cannot edit the main branch.</v-card-text>
+      </div>
+    </v-card>
+  </v-dialog>
 </template>
 <script>
 import gql from 'graphql-tag'
 
 export default {
-  props: {
-    streamId: {
-      type: String,
-      default: null
-    },
-    branch: {
-      type: Object,
-      default() {
-        return {
-          name: null,
-          description: null
-        }
-      }
-    }
-  },
   data() {
     return {
+      dialog: false,
+      branch: null,
       valid: true,
       loading: false,
-      name: this.branch.name,
       showDelete: false,
       nameRules: [
         (v) => !!v || 'Branches need a name too!',
@@ -78,7 +68,6 @@ export default {
         (v) => (v && v.length <= 100) || 'Name must be less than 100 characters',
         (v) => (v && v.length >= 3) || 'Name must be at least 3 characters'
       ],
-      description: this.branch.description,
       isEdit: false,
       pendingDelete: false,
       allBranchNames: []
@@ -104,13 +93,26 @@ export default {
         }
       },
       update(data) {
-        return data.stream.branches.items
-          .map((b) => b.name)
-          .filter((name) => name !== this.branch.name)
+        return data.stream.branches.items.filter((b) => b.name !== this.branch.name)
+      },
+      skip() {
+        return this.branch == null
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.dialog
+      },
+      set(value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
       }
     }
   },
-  computed: {},
   methods: {
     async deleteBranch() {
       this.loading = true
@@ -132,10 +134,27 @@ export default {
       } catch (e) {
         console.log(e)
       }
-      this.$emit('close', { deleted: true })
+
       this.loading = false
+
+      this.resolve({
+        result: true,
+        deleted: true
+      })
+      this.dialog = false
     },
-    async updateBranch() {
+    open(branch) {
+      this.dialog = true
+      if (this.$refs.form) this.$refs.form.resetValidation()
+
+      this.branch = { ...branch }
+
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    async agree() {
       if (!this.$refs.form.validate()) return
 
       this.loading = true
@@ -150,13 +169,25 @@ export default {
           params: {
             streamId: this.$route.params.streamId,
             id: this.branch.id,
-            name: this.name,
-            description: this.description
+            name: this.branch.name,
+            description: this.branch.description
           }
         }
       })
+
       this.loading = false
-      this.$emit('close', { name: this.name })
+
+      this.resolve({
+        result: true,
+        name: this.branch.name
+      })
+      this.dialog = false
+    },
+    cancel() {
+      this.resolve({
+        result: false
+      })
+      this.dialog = false
     }
   }
 }
diff --git a/packages/frontend/src/components/dialogs/BranchNewDialog.vue b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
index 27a6b48b1..5197b956a 100644
--- a/packages/frontend/src/components/dialogs/BranchNewDialog.vue
+++ b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
@@ -1,44 +1,39 @@
 <template>
-  <v-card :loading="loading">
-    <template slot="progress">
-      <v-progress-linear indeterminate></v-progress-linear>
-    </template>
-    <v-card-title>New Branch</v-card-title>
-    <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="createBranch">
-      <v-card-text>
-        <v-text-field
-          v-model="name"
-          label="Name"
-          :rules="nameRules"
-          validate-on-blur
-          required
-          autofocus
-        ></v-text-field>
-        <v-textarea v-model="description" rows="2" label="Description"></v-textarea>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="primary" text :disabled="!valid" type="submit">Save</v-btn>
-      </v-card-actions>
-    </v-form>
-  </v-card>
+  <v-dialog v-model="show" width="500" @keydown.esc="cancel">
+    <v-card :loading="loading">
+      <template slot="progress">
+        <v-progress-linear indeterminate></v-progress-linear>
+      </template>
+      <v-card-title>New Branch</v-card-title>
+      <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="agree">
+        <v-card-text>
+          <v-text-field
+            v-model="name"
+            label="Name"
+            :rules="nameRules"
+            validate-on-blur
+            required
+            autofocus
+          ></v-text-field>
+          <v-textarea v-model="description" rows="2" label="Description"></v-textarea>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text :disabled="!valid" type="submit">Save</v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
 </template>
 <script>
 import gql from 'graphql-tag'
 
 export default {
-  props: {
-    streamId: {
-      type: String,
-      default: null
-    },
-    branchNames: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
     return {
+      dialog: false,
+      streamId: null,
+      branchNames: [],
       valid: false,
       loading: false,
       name: null,
@@ -58,9 +53,33 @@ export default {
       pendingDelete: false
     }
   },
-  computed: {},
+  computed: {
+    show: {
+      get() {
+        return this.dialog
+      },
+      set(value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
+      }
+    }
+  },
   methods: {
-    async createBranch() {
+    open(streamId, branchNames) {
+      this.dialog = true
+      if (this.$refs.form) this.$refs.form.resetValidation()
+
+      this.branchNames = branchNames
+      this.streamId = streamId
+
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    async agree() {
       if (!this.$refs.form.validate()) return
 
       this.loading = true
@@ -80,8 +99,19 @@ export default {
         }
       })
       this.loading = false
-      this.$emit('close')
+
+      this.resolve({
+        result: true,
+        name: this.name
+      })
+      this.dialog = false
     }
+  },
+  cancel() {
+    this.resolve({
+      result: false
+    })
+    this.dialog = false
   }
 }
 </script>
diff --git a/packages/frontend/src/views/Branches.vue b/packages/frontend/src/views/Branches.vue
index 4f736edcf..20fe2c482 100644
--- a/packages/frontend/src/views/Branches.vue
+++ b/packages/frontend/src/views/Branches.vue
@@ -5,13 +5,8 @@
         <v-skeleton-loader type="article"></v-skeleton-loader>
       </v-card>
       <v-card v-else rounded="lg" class="pa-4 mb-4" elevation="0">
-        <v-dialog v-model="dialogBranch" max-width="500">
-          <new-branch-dialog
-            :branch-names="branches.map((b) => b.name)"
-            :stream-id="$route.params.streamId"
-            @close="closeBranchDialog"
-          />
-        </v-dialog>
+        <branch-new-dialog ref="newBranchDialog" />
+
         <v-card-title>
           <v-icon class="mr-2">mdi-source-branch</v-icon>
           Branches
@@ -24,7 +19,7 @@
             text
             class="px-0"
             small
-            @click="dialogBranch = true"
+            @click="newBranch"
           >
             <v-icon small class="mr-2 float-left">mdi-plus-circle-outline</v-icon>
             New branch
@@ -71,14 +66,14 @@
   </v-row>
 </template>
 <script>
-import NewBranchDialog from '../components/dialogs/BranchNewDialog'
+import BranchNewDialog from '../components/dialogs/BranchNewDialog'
 import streamBranchesQuery from '../graphql/streamBranches.gql'
 import gql from 'graphql-tag'
 
 export default {
   name: 'StreamMain',
   components: {
-    NewBranchDialog
+    BranchNewDialog
   },
   props: {
     userRole: {
@@ -87,9 +82,7 @@ export default {
     }
   },
   data() {
-    return {
-      dialogBranch: false
-    }
+    return {}
   },
   apollo: {
     stream: {
@@ -170,9 +163,18 @@ export default {
     this.$apollo.queries.stream.refetch()
   },
   methods: {
-    closeBranchDialog() {
-      this.dialogBranch = false
-      this.$apollo.queries.stream.refetch()
+    newBranch() {
+      this.$refs.newBranchDialog
+        .open(
+          this.$route.params.streamId,
+          this.branches.map((b) => b.name)
+        )
+        .then((dialog) => {
+          if (!dialog.result) return
+          else {
+            this.$apollo.queries.stream.refetch()
+          }
+        })
     }
   }
 }
diff --git a/packages/frontend/src/views/Commits.vue b/packages/frontend/src/views/Commits.vue
index 620df2d85..05cc99d63 100644
--- a/packages/frontend/src/views/Commits.vue
+++ b/packages/frontend/src/views/Commits.vue
@@ -6,9 +6,8 @@
       </v-col>
       <v-col v-else-if="stream.branch" cols="12">
         <v-card class="pa-4" elevation="0" rounded="lg">
-          <v-dialog v-model="dialogEdit" max-width="500">
-            <branch-edit-dialog :branch="stream.branch" @close="closeEdit" />
-          </v-dialog>
+          <branch-edit-dialog ref="editBranchDialog" />
+
           <v-card-title class="mr-8">
             <v-icon class="mr-2">mdi-source-branch</v-icon>
             <span class="d-inline-block">{{ stream.branch.name }}</span>
@@ -20,7 +19,7 @@
               color="primary"
               text
               class="px-0"
-              @click="dialogEdit = true"
+              @click="editBranch"
             >
               <v-icon small class="mr-2 float-left">mdi-cog-outline</v-icon>
               Edit branch
@@ -144,19 +143,21 @@ export default {
     }
   },
   methods: {
-    closeEdit({ name, deleted }) {
-      this.dialogEdit = false
-      if (deleted) {
-        this.$router.push({ path: `/streams/${this.streamId}` })
-        return
-      }
-      if (name !== this.$route.params.branchName) {
-        this.$router.push({
-          path: `/streams/${this.streamId}/branches/${encodeURIComponent(name)}/commits`
-        })
-        return
-      }
-      this.$apollo.queries.stream.refetch()
+    editBranch() {
+      this.$refs.editBranchDialog.open(this.stream.branch).then((dialog) => {
+        if (!dialog.result) return
+        else if (dialog.deleted) {
+          this.$router.push({ path: `/streams/${this.streamId}` })
+        } else if (dialog.name !== this.$route.params.branchName) {
+          //this.$router.push does not work, refresh entire window
+
+          this.$router.push({
+            path: `/streams/${this.streamId}/branches/${encodeURIComponent(dialog.name)}/commits`
+          })
+        } else {
+          this.$apollo.queries.stream.refetch()
+        }
+      })
     }
   }
 }
diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index eca036bdb..18d64a4d3 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -43,6 +43,49 @@
             <v-icon class="mr-2 float-left">mdi-source-branch</v-icon>
             {{ branches.length }} branch{{ branches.length > 1 ? 'es' : '' }}
           </v-btn>
+
+          <!-- DIALOGS -->
+          <branch-new-dialog ref="newBranchDialog" />
+          <branch-edit-dialog ref="editBranchDialog" />
+
+          <!-- MENU -->
+
+          <v-menu
+            v-if="userRole === 'contributor' || userRole === 'owner'"
+            offset-y
+            class="mx-2 mb-5"
+          >
+            <template #activator="{ on, attrs }">
+              <v-btn
+                style="position: absolute; top: 36px; right: 20px"
+                color="primary"
+                v-bind="attrs"
+                icon
+                v-on="on"
+              >
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="newBranch">
+                <v-list-item-action class="mr-2">
+                  <v-icon>mdi-plus-circle-outline</v-icon>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>New branch</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+
+              <v-list-item v-if="selectedBranch" @click="editBranch">
+                <v-list-item-action class="mr-2">
+                  <v-icon>mdi-cog-outline</v-icon>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>Edit {{ selectedBranch.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </v-sheet>
 
         <div v-if="latestCommit" style="height: 50vh">
@@ -152,7 +195,7 @@
           />
         </v-dialog>
         <v-card-title>
-          Description
+          Stream Description
           <v-spacer />
           <v-btn
             v-if="userRole === 'owner'"
@@ -193,6 +236,8 @@ import streamBranchesQuery from '../graphql/streamBranches.gql'
 import Renderer from '../components/Renderer'
 import UserAvatar from '../components/UserAvatar'
 import ErrorBlock from '../components/ErrorBlock'
+import BranchNewDialog from '../components/dialogs/BranchNewDialog'
+import BranchEditDialog from '../components/dialogs/BranchEditDialog'
 
 export default {
   name: 'StreamMain',
@@ -202,7 +247,9 @@ export default {
     SourceAppAvatar,
     NoDataPlaceholder,
     Renderer,
-    ErrorBlock
+    ErrorBlock,
+    BranchNewDialog,
+    BranchEditDialog
   },
   props: {
     userRole: {
@@ -213,10 +260,11 @@ export default {
   data() {
     return {
       dialogDescription: false,
-      dialogBranch: false,
       selectedBranch: null,
       clearRendererTrigger: 0,
-      error: ''
+      error: '',
+      dialogBranchNew: false,
+      dialogBranchEdit: false
     }
   },
   apollo: {
@@ -337,9 +385,42 @@ export default {
       this.dialogDescription = false
       this.$apollo.queries.description.refetch()
     },
-    closeBranchDialog() {
-      this.dialogBranch = false
-      this.$apollo.queries.branches.refetch()
+    editBranch() {
+      this.$refs.editBranchDialog.open(this.selectedBranch).then((dialog) => {
+        if (!dialog.result) return
+        else if (dialog.deleted) {
+          this.$router.push({ path: `/streams/${this.$route.params.streamId}` })
+        } else if (dialog.name !== this.selectedBranch.name) {
+          //this.$router.push does not work, refresh entire window
+          window.location =
+            window.origin +
+            '/streams/' +
+            this.$route.params.streamId +
+            '/branches/' +
+            encodeURIComponent(dialog.name)
+        } else {
+          this.$apollo.queries.branches.refetch()
+        }
+      })
+    },
+    newBranch() {
+      this.$refs.newBranchDialog
+        .open(
+          this.$route.params.streamId,
+          this.branches.map((b) => b.name)
+        )
+        .then((dialog) => {
+          if (!dialog.result) return
+          else {
+            //this.$router.push does not work, refresh entire window
+            window.location =
+              window.origin +
+              '/streams/' +
+              this.$route.params.streamId +
+              '/branches/' +
+              encodeURIComponent(dialog.name)
+          }
+        })
     },
     selectBranch() {
       if (!this.branches) return

From ad3c2b2261ddf6e57dbc8ea195d358eb4ed62ffc Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Tue, 8 Jun 2021 19:09:46 +0100
Subject: [PATCH 41/45] feat(frontend): hides 'edit branch' when on main

---
 packages/frontend/src/views/StreamMain.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index 18d64a4d3..299f54c4e 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -76,7 +76,10 @@
                 </v-list-item-content>
               </v-list-item>
 
-              <v-list-item v-if="selectedBranch" @click="editBranch">
+              <v-list-item
+                v-if="selectedBranch && selectedBranch.name != 'main'"
+                @click="editBranch"
+              >
                 <v-list-item-action class="mr-2">
                   <v-icon>mdi-cog-outline</v-icon>
                 </v-list-item-action>

From b8b9d2065a54c1cd11849fd3d09bec1ca1b01c28 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Wed, 9 Jun 2021 10:26:04 +0100
Subject: [PATCH 42/45] feat(frontend): adds info box when last commit not on
 main

---
 packages/frontend/src/views/StreamMain.vue | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index 299f54c4e..c4221a66c 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -89,6 +89,36 @@
               </v-list-item>
             </v-list>
           </v-menu>
+          <div
+            v-if="
+              stream &&
+              stream.commit &&
+              stream.commit.branchName != 'main' &&
+              stream.commit.branchName != selectedBranch.name
+            "
+            class="pb-2 caption"
+          >
+            <v-alert color="primary" class="caption" dense text type="info">
+              The last commit of this stream is on the
+              <v-btn
+                text
+                x-small
+                color="primary darken-1"
+                :to="'/streams/' + $route.params.streamId + '/branches/' + stream.commit.branchName"
+              >
+                {{ stream.commit.branchName }}
+              </v-btn>
+              branch, see
+              <v-btn
+                x-small
+                text
+                color="primary  darken-1"
+                :to="'/streams/' + $route.params.streamId + '/commits/' + stream.commit.id"
+              >
+                {{ stream.commit.message }}
+              </v-btn>
+            </v-alert>
+          </div>
         </v-sheet>
 
         <div v-if="latestCommit" style="height: 50vh">
@@ -298,6 +328,26 @@ export default {
       },
       update: (data) => data.stream.description
     },
+    stream: {
+      query: gql`
+        query($id: String!) {
+          stream(id: $id) {
+            id
+            commit {
+              branchName
+              id
+              message
+            }
+          }
+        }
+      `,
+      variables() {
+        return {
+          id: this.$route.params.streamId
+        }
+      }
+      //update: (data) => data.stream.description
+    },
     $subscribe: {
       branchCreated: {
         query: gql`

From 29413d6894853b587c78b613efc490782b6431fb Mon Sep 17 00:00:00 2001
From: Alan Rynne <alan@speckle.systems>
Date: Wed, 9 Jun 2021 16:32:50 +0200
Subject: [PATCH 43/45] fix(viewer): Adds box conversion to buffer geometry

---
 packages/viewer/src/modules/Converter.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/viewer/src/modules/Converter.js b/packages/viewer/src/modules/Converter.js
index 9880fe69e..7be19f4bd 100644
--- a/packages/viewer/src/modules/Converter.js
+++ b/packages/viewer/src/modules/Converter.js
@@ -363,6 +363,20 @@ export default class Coverter {
     return new ObjectWrapper( geometry, obj, 'line' )
   }
 
+  async BoxToBufferGeometry( object, scale = true ){
+    let conversionFactor = scale ? getConversionFactor( object.units ) : 1
+
+    var move = this.PointToVector3( object.basePlane.origin )
+    var width = ( object.xSize.end - object.xSize.start ) * conversionFactor
+    var depth = ( object.ySize.end - object.ySize.start ) * conversionFactor
+    var height = ( object.zSize.end - object.zSize.start ) * conversionFactor
+
+    var box = new THREE.BoxBufferGeometry( width,height,depth,1,1,1 )
+    box.applyMatrix4( new THREE.Matrix4().setPosition( move ) )
+    
+    return new ObjectWrapper( box, object )
+  }
+
   async PolycurveToBufferGeometry( object, scale = true ) {
     let obj = {}
     Object.assign( obj, object )

From 8f1645ba178e64bbb0afa86bad817a19888b6050 Mon Sep 17 00:00:00 2001
From: Alan Rynne <alan@speckle.systems>
Date: Wed, 9 Jun 2021 17:04:39 +0200
Subject: [PATCH 44/45] fix(viewer): Force bbox to not render

---
 packages/viewer/src/modules/Converter.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/viewer/src/modules/Converter.js b/packages/viewer/src/modules/Converter.js
index 7be19f4bd..0f9ac268a 100644
--- a/packages/viewer/src/modules/Converter.js
+++ b/packages/viewer/src/modules/Converter.js
@@ -91,6 +91,7 @@ export default class Coverter {
     // Last attempt: iterate through all object keys and see if we can display anything!
     // traverses the object in case there's any sub-objects we can convert.
     for ( let prop in target ) {
+      if ( prop === 'bbox' ) continue
       if ( typeof target[prop] !== 'object' ) continue
       let childPromise = this.traverseAndConvert( target[prop], callback, scale )
       childrenConversionPromisses.push( childPromise )

From 5058ed3862b7b6c31bb91686a46db0c4535a2e72 Mon Sep 17 00:00:00 2001
From: Cristian Balas <cristi8@gmail.com>
Date: Wed, 9 Jun 2021 18:50:33 +0300
Subject: [PATCH 45/45] CI: Also deploy to new k8s cluster (#286)

---
 .circleci/config.yml             | 18 +++++---
 .circleci/deploy_in_new_setup.sh | 73 ++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100755 .circleci/deploy_in_new_setup.sh

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 44ec98450..ed8076483 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -33,7 +33,7 @@ workflows:
           context: main-builds
           filters:
             branches:
-              only: cristi/ci-test
+              only: cristi/ci-k8s-tor
 
 jobs:
   test_server:
@@ -90,13 +90,21 @@ jobs:
           command: env SPECKLE_SERVER_PACKAGE=preview-service ./.circleci/build.sh
       - run:
           name: Deploy
-          command: ./.circleci/deploy.sh
+          command: |
+            ./.circleci/deploy.sh
+            if [[ "$CIRCLE_TAG" =~ ^v.* ]]; then
+              env K8S_CLUSTER=TOR1 K8S_NAMESPACE=${K8S_NAMESPACE_TOR1_1_RELEASE} ./.circleci/deploy_in_new_setup.sh
+            else
+              env K8S_CLUSTER=TOR1 K8S_NAMESPACE=${K8S_NAMESPACE_TOR1_1_LATEST} ./.circleci/deploy_in_new_setup.sh
+            fi
       - run:
           name: Test deployment
           command: |
             ./utils/test-deployment/install_prerequisites.sh
-            SPECKLE_SERVER=https://latest.speckle.dev
             if [[ "$CIRCLE_TAG" =~ ^v.* ]]; then
-              SPECKLE_SERVER=https://speckle.xyz
+              ./utils/test-deployment/run_tests.py https://speckle.xyz
+              ./utils/test-deployment/run_tests.py ${SPECKLE_URL_TOR1_1_RELEASE}
+            else
+              ./utils/test-deployment/run_tests.py https://latest.speckle.dev
+              ./utils/test-deployment/run_tests.py ${SPECKLE_URL_TOR1_1_LATEST}
             fi
-            ./utils/test-deployment/run_tests.py $SPECKLE_SERVER
diff --git a/.circleci/deploy_in_new_setup.sh b/.circleci/deploy_in_new_setup.sh
new file mode 100755
index 000000000..b0b4a20c0
--- /dev/null
+++ b/.circleci/deploy_in_new_setup.sh
@@ -0,0 +1,73 @@
+#!/bin/bash
+
+set -e
+
+K8S_CLUSTER_CERTIFICATE_VARIABLE=K8S_${K8S_CLUSTER}_CERTIFICATE
+K8S_CLUSTER_CERTIFICATE=${!K8S_CLUSTER_CERTIFICATE_VARIABLE}
+
+K8S_TOKEN_VARIABLE=K8S_${K8S_CLUSTER}_TOKEN
+K8S_TOKEN=${!K8S_TOKEN_VARIABLE}
+
+K8S_SERVER_VARIABLE=K8S_${K8S_CLUSTER}_SERVER
+K8S_SERVER=${!K8S_SERVER_VARIABLE}
+
+# K8S_NAMESPACE
+
+IMAGE_VERSION_TAG=$CIRCLE_SHA1
+
+if [[ "$CIRCLE_TAG" =~ ^v.* ]]; then
+    IMAGE_VERSION_TAG=$CIRCLE_TAG
+fi
+
+echo "$K8S_CLUSTER_CERTIFICATE" | base64 --decode > k8s_cert.crt
+
+# Update deployments
+./kubectl \
+  --kubeconfig=/dev/null \
+  --server=$K8S_SERVER \
+  --certificate-authority=k8s_cert.crt \
+  --token=$K8S_TOKEN \
+  --namespace=$K8S_NAMESPACE \
+  set image deployment/speckle-frontend main=$DOCKER_IMAGE_TAG-frontend:$IMAGE_VERSION_TAG
+
+./kubectl \
+  --kubeconfig=/dev/null \
+  --server=$K8S_SERVER \
+  --certificate-authority=k8s_cert.crt \
+  --token=$K8S_TOKEN \
+  --namespace=$K8S_NAMESPACE \
+  set image deployment/speckle-server main=$DOCKER_IMAGE_TAG-server:$IMAGE_VERSION_TAG
+
+./kubectl \
+  --kubeconfig=/dev/null \
+  --server=$K8S_SERVER \
+  --certificate-authority=k8s_cert.crt \
+  --token=$K8S_TOKEN \
+  --namespace=$K8S_NAMESPACE \
+  set image deployment/speckle-preview-service main=$DOCKER_IMAGE_TAG-preview-service:$IMAGE_VERSION_TAG
+
+
+# Wait for rollout to complete
+./kubectl \
+  --kubeconfig=/dev/null \
+  --server=$K8S_SERVER \
+  --certificate-authority=k8s_cert.crt \
+  --token=$K8S_TOKEN \
+  --namespace=$K8S_NAMESPACE \
+  rollout status -w deployment/speckle-frontend --timeout=3m
+
+./kubectl \
+  --kubeconfig=/dev/null \
+  --server=$K8S_SERVER \
+  --certificate-authority=k8s_cert.crt \
+  --token=$K8S_TOKEN \
+  --namespace=$K8S_NAMESPACE \
+  rollout status -w deployment/speckle-server --timeout=3m
+
+./kubectl \
+  --kubeconfig=/dev/null \
+  --server=$K8S_SERVER \
+  --certificate-authority=k8s_cert.crt \
+  --token=$K8S_TOKEN \
+  --namespace=$K8S_NAMESPACE \
+  rollout status -w deployment/speckle-preview-service --timeout=3m