Activate created branch

Thanks Fabians for helps

speckle_connector/src/preferences/preferences.rb

@@ -10,6 +10,7 @@ module SpeckleConnector
   module Preferences
     include Immutable::ImmutableUtils
     DICT_HANDLER = SketchupModel::Dictionary::SpeckleModelDictionaryHandler
+    DEFAULT_PREFERENCES = "('configSketchup', '{\"DarkTheme\":false}');"
 
     # @param sketchup_model [Sketchup::Model] active model.
     # rubocop:disable Metrics/MethodLength
@@ -17,8 +18,13 @@ module SpeckleConnector
       # Init sqlite database
       db = Sqlite3::Database.new(SPECKLE_CONFIG_DB_PATH)
 
+      # Check configSketchup key is valid or not, otherwise init with default settings
+      if db.exec("SELECT content FROM 'objects' WHERE hash = 'configSketchup'").empty?
+        db.exec("INSERT INTO 'objects' VALUES #{DEFAULT_PREFERENCES}")
+      end
+
       # Select data
-      data = db.exec("SELECT content FROM 'objects' WHERE hash = 'configDUI'").first.first
+      data = db.exec("SELECT content FROM 'objects' WHERE hash = 'configSketchup'").first.first
 
       # Parse string to hash
       data_hash = JSON.parse(data).to_h

ui/src/App.vue

@@ -80,7 +80,7 @@
         </v-menu>
       </v-app-bar>
 
-      <create-stream v-if="accounts().length !== 0"/>
+      <create-stream-dialog v-if="accounts().length !== 0"/>
 
       <v-container v-if="accounts().length !== 0" fluid>
         <router-view :stream-search-query="streamSearchQuery" />
@@ -129,8 +129,8 @@ export default {
   name: 'App',
   components: {
     Login,
-    CreateStream: () => import('@/components/CreateStream'),
-    SettingsDialog: () => import('@/components/SettingsDialog'),
+    CreateStreamDialog: () => import('@/components/dialogs/CreateStreamDialog'),
+    SettingsDialog: () => import('@/components/dialogs/SettingsDialog'),
     GlobalToast: () => import('@/components/GlobalToast')
   },
   props: {

ui/src/components/StreamCard.vue

@@ -60,11 +60,17 @@
     <v-card-text class="d-flex align-center pb-5 mb-5 -mt-2" style="height: 50px">
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
+          <v-slide-x-transition>
+            <div v-show="hover">
+              <create-branch-dialog :stream-name="stream.name" :stream-id="streamId"/>
+            </div>
+          </v-slide-x-transition>
           <v-chip v-if="stream.branches" small v-bind="attrs" class="mr-1" v-on="on">
             <v-icon small class="mr-1 float-left">mdi-source-branch</v-icon>
             {{ branchName }}
           </v-chip>
         </template>
+        <!-- Branch list -->
         <v-list dense>
           <v-list-item
             v-for="(branch, index) in stream.branches.items"
@@ -73,7 +79,7 @@
             @click="switchBranch(branch.name)"
           >
             <v-list-item-title class="text-caption font-weight-regular">
-              <v-icon v-if="branch.name == branchName" small class="mr-1 float-left">
+              <v-icon v-if="branch.name === branchName" small class="mr-1 float-left">
                 mdi-check
               </v-icon>
               <v-icon v-else small class="mr-1 float-left">mdi-source-branch</v-icon>
@@ -171,6 +177,9 @@ global.oneClickSend = function (streamId) {
 
 export default {
   name: 'StreamCard',
+  components: {
+    CreateBranchDialog: () => import('@/components/dialogs/CreateBranchDialog'),
+  },
   props: {
     streamId: {
       type: String,
@@ -261,16 +270,28 @@ export default {
   },
   computed: {
     selectedBranch() {
-      if (this.$apollo.loading) return
-      return this.stream.branches.items.find((branch) => branch.name == this.branchName)
+      if (!this.stream) return
+      return this.stream.branches.items.find((branch) => branch.name === this.branchName)
     },
     selectedCommit() {
-      if (this.$apollo.loading) return
-      if (this.commitId == 'latest') return this.selectedBranch.commits.items[0]
-      return this.selectedBranch.commits.items.find((commit) => commit.id == this.commitId)
+      if (!this.selectedBranch) return
+      if (this.commitId === 'latest') return this.selectedBranch.commits.items[0]
+      return this.selectedBranch.commits.items.find((commit) => commit.id === this.commitId)
     }
   },
   mounted() {
+    bus.$on(`refresh-stream-${this.streamId}`, () => {
+      let oldBranchName = this.branchName
+      let oldCommitId = this.commitId
+      this.$apollo.queries.stream.refetch()
+      this.branchName = oldBranchName
+      this.commitId = oldCommitId
+    })
+    bus.$on(`create-branch-${this.streamId}`, (branchName) => {
+      this.$apollo.queries.stream.refetch()
+      this.branchName = branchName
+      this.commitId = 'latest'
+    })
     bus.$on(`sketchup-objects-${this.streamId}`, async (batches, commitId, totalChildrenCount) => {
       console.log('>>> SpeckleSketchUp: Received objects from sketchup')
 
@@ -376,7 +397,7 @@ export default {
       await this.sleep(2000)
     },
     async createCommit(batches, commitId, totalChildrenCount) {
-      if (batches.length == 0) {
+      if (batches.length === 0) {
         this.loadingSend = false
         this.loadingStage = null
         this.$eventHub.$emit('notification', {

ui/src/components/dialogs/CreateBranchDialog.vue

@@ -0,0 +1,137 @@
+<template>
+  <!-- DIALOG: Create Branch -->
+  <v-dialog v-model="showCreateBranch">
+    <template #activator="{ on: dialog, attrs }">
+      <v-btn
+          v-tooltip="'Create Branch'"
+          icon x-small class="ml-0 mr-1"
+          v-bind="attrs"
+          v-on="{...dialog}"
+      >
+        <v-icon>
+          mdi-plus-circle
+        </v-icon>
+      </v-btn>
+    </template>
+    <v-card>
+      <v-card-title class="text-h5 mb-1">
+        Create a New Branch
+      </v-card-title>
+      <v-card-subtitle class="py-0 my-0 font-italic">
+        under {{ streamName }} stream
+      </v-card-subtitle>
+      <v-container class="px-6" pb-0>
+        <v-text-field
+            v-model="branchName"
+            xxxclass="small-text-field"
+            hide-details
+            dense
+            flat
+            placeholder="Branch Name"
+        />
+        <v-text-field
+            v-model="description"
+            xxxclass="small-text-field"
+            hide-details
+            dense
+            flat
+            placeholder="Description (Optional)"
+        />
+      </v-container>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+            color="blue darken-1"
+            text
+            @click="showCreateBranch = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+            :disabled="branchName === ''"
+            color="blue darken-1"
+            text
+            @click="createBranch"
+        >
+          Create
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import gql from "graphql-tag";
+import {bus} from "@/main";
+
+export default {
+  name: "CreateBranchDialog",
+  props: {
+    streamId: {
+      type: String,
+      default: null
+    },
+    streamName: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      showCreateBranch: false,
+      branchName: "",
+      description: "",
+      defaultDescription: "Stream created from SketchUp",
+      accountToCreateStream: null
+    }
+  },
+  computed: {
+    loggedIn() {
+      return localStorage.getItem('SpeckleSketchup.AuthToken') !== null
+    },
+    accounts() {
+      return JSON.parse(localStorage.getItem('localAccounts'))
+    },
+  },
+  methods: {
+    async createBranch(){
+      let res = await this.$apollo.mutate({
+        mutation: gql`
+            mutation branchCreate($branch: BranchCreateInput!) {
+              branchCreate(branch: $branch)
+            }
+          `,
+        variables: {
+          branch: {
+            streamId: this.streamId,
+            name: this.branchName,
+            description: this.description === '' ? this.defaultDescription : this.description,
+          }
+        }
+      })
+      bus.$emit(`create-branch-${this.streamId}`, this.branchName)
+      this.showCreateBranch = false
+      this.branchName = ""
+      this.description = ""
+      this.$mixpanel.track('Connector Action', { name: 'Create Branch' })
+      return res
+    }
+  }
+}
+</script>
+
+<style>
+
+.v-dialog {
+  max-width: 390px
+}
+
+.v-text-field >>> input {
+  font-size: 0.9em;
+}
+.v-text-field >>> label {
+  font-size: 0.9em;
+}
+
+</style>

ui/src/components/dialogs/CreateStreamDialog.vue

@@ -161,7 +161,7 @@ import {bus} from "@/main";
 import userQuery from "@/graphql/user.gql";
 
 export default {
-  name: "CreateStream",
+  name: "CreateStreamDialog",
   data() {
     return {
       showCreateNewStream: false,
@@ -216,6 +216,7 @@ export default {
       this.showCreateNewStream = false
       this.streamName = ""
       this.description = ""
+      this.$mixpanel.track('Connector Action', { name: 'Create Stream' })
       sketchup.exec({name: "save_stream", data: {stream_id: res["data"]["streamCreate"]}})
       this.refresh()
       return res

ui/src/components/dialogs/SettingsDialog.vue

@@ -122,14 +122,11 @@ export default {
     }
   },
   methods: {
-    combineFacesByMaterialHandler() {
-
-    },
     switchTheme() {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
       sketchup.exec({
         name: "user_preferences_updated",
-        data: {preference_hash: "configDUI", preference: "DarkTheme", value: this.$vuetify.theme.dark}
+        data: {preference_hash: "configSketchup", preference: "DarkTheme", value: this.$vuetify.theme.dark}
       })
       this.$mixpanel.track('Connector Action', { name: 'Toggle Theme' })
     },

ui/src/views/Streams.vue

@@ -73,7 +73,9 @@ export default {
   },
   mounted() {
     bus.$on('refresh-streams', () => {
+      // TODO: We should remember selected branches and commits before refetch
       this.$apollo.queries.streams.refetch()
+      // TODO: We should set previously selected branches and commits after refetch
     })
 
     bus.$on('set-saved-streams', (streamIds) => {