Feat (FE2): Support fe2 terminology and urls

speckle_connector/src/preferences/preferences.rb

@@ -12,9 +12,9 @@ module SpeckleConnector
     include Immutable::ImmutableUtils
     DICT_HANDLER = SketchupModel::Dictionary::SpeckleModelDictionaryHandler
     # rubocop:disable Layout/LineLength
-    DEFAULT_CONFIG = "('configSketchup', '{\"dark_theme\":false, \"diffing\":false, \"register_speckle_entity\":false}');"
+    DEFAULT_CONFIG = "('configSketchup', '{\"dark_theme\":false, \"diffing\":false, \"register_speckle_entity\":false}, \"fe2\":false');"
     # rubocop:enable Layout/LineLength
-    DEFAULT_PREFERENCES = '{"dark_theme":false, "diffing":false, "register_speckle_entity": false}'
+    DEFAULT_PREFERENCES = '{"dark_theme":false, "diffing":false, "register_speckle_entity": false, "fe2": false}'
 
     # @param sketchup_model [Sketchup::Model] active model.
     def self.read_preferences(sketchup_model)
@@ -35,7 +35,9 @@ module SpeckleConnector
       return false if row_data.empty?
 
       data = JSON.parse(row_data.first.first)
-      return false if data['dark_theme'].nil? || data['diffing'].nil? || data['register_speckle_entity'].nil?
+      if data['dark_theme'].nil? || data['fe2'].nil? || data['diffing'].nil? || data['register_speckle_entity'].nil?
+        return false
+      end
 
       true
     end
@@ -65,11 +67,13 @@ module SpeckleConnector
       data_hash = JSON.parse(row_data).to_h
       # Get current theme value
       dark_theme = data_hash['dark_theme']
+      fe2 = data_hash['fe2']
       diffing = data_hash['diffing']
       register_speckle_entity = data_hash['register_speckle_entity']
 
       {
         dark_theme: dark_theme,
+        fe2: fe2,
         diffing: diffing,
         register_speckle_entity: register_speckle_entity
       }.freeze

ui/src/App.vue

@@ -15,7 +15,7 @@
         >
           <v-tabs-slider class="mx-sm-1"></v-tabs-slider>
           <v-tab href="#streams">
-            {{"Streams"}}
+            {{ streamsText }}
           </v-tab>
           <v-tab href="#mapper">
             {{"Mapper"}}
@@ -88,7 +88,7 @@
               <v-text-field
                   v-model="streamSearchQuery"
                   prepend-inner-icon="mdi-magnify"
-                  label="Search streams"
+                  :label="searchText"
                   background-color="background"
                   hide-details
                   clearable
@@ -101,6 +101,7 @@
             </v-container>
             <create-stream-dialog
                 v-if="accounts().length !== 0"
+                :is-f-e2="preferences && preferences.user && preferences.user.fe2"
                 :account-id="activeAccount().userInfo.id"
                 :server-url="activeAccount().serverInfo.url"
             />
@@ -115,7 +116,7 @@
         </v-tab-item>
         <v-tab-item :key="2" value="mapper">
           <v-card flat>
-            <mapper></mapper>
+            <mapper :stream-text="streamText" :branch-text="branchText"></mapper>
           </v-card>
         </v-tab-item>
       </v-tabs-items>
@@ -174,7 +175,7 @@ export default {
     size: {
       type: Number,
       default: 42
-    },
+    }
   },
   data() {
     return {
@@ -183,7 +184,11 @@ export default {
       createStreamByIdDialog: false,
       createStreamByIdText: "",
       preferences: {},
-      tab: "streams"
+      tab: "streams",
+      searchText: '',
+      streamsText: 'Streams',
+      streamText: 'Stream',
+      branchText: 'Branch'
     }
   },
   computed: {
@@ -209,8 +214,11 @@ export default {
     })
 
     bus.$on('update-preferences', async (preferences) => {
-      let prefs = JSON.parse(preferences)
-      this.preferences = prefs
+      this.preferences = JSON.parse(preferences)
+      this.searchText = this.preferences.user.fe2 ? 'Search projects' : 'Search streams'
+      this.streamsText = this.preferences.user.fe2 ? 'Projects' : 'Streams'
+      this.streamText = this.preferences.user.fe2 ? 'Project' : 'Stream'
+      this.branchText = this.preferences.user.fe2 ? 'Model' : 'Branch'
       this.$vuetify.theme.dark = this.preferences.user.dark_theme
     })
 

ui/src/components/Mapper.vue

@@ -89,7 +89,7 @@
           </v-container>
         </v-expansion-panel-header>
         <v-expansion-panel-content>
-          <mapper-source :source-state="this.sourceState"/>
+          <mapper-source :stream-text="streamText" :branch-text="branchText" :source-state="this.sourceState"/>
         </v-expansion-panel-content>
       </v-expansion-panel>
 
@@ -300,6 +300,16 @@ global.mappedEntitiesUpdated = function (mappedEntities) {
 
 export default {
   name: "Mapper",
+  props: {
+    streamText: {
+      type: String,
+      default: ''
+    },
+    branchText: {
+      type: String,
+      default: ''
+    }
+  },
   components: {
     MapperSource: () => import('@/components/MapperSource.vue'),
     GlobalToast: () => import('@/components/GlobalToast'),

ui/src/components/MapperSource.vue

@@ -2,7 +2,7 @@
   <v-container class="pa-0">
     <v-autocomplete
         v-model="sourceStreamId"
-        label="Stream"
+        :label="streamText"
         :items="allStreamsList"
         item-text="name"
         item-value="id"
@@ -12,7 +12,7 @@
     <v-autocomplete
         v-model="sourceBranchId"
         class="pt-0 mb-n5"
-        label="Branch"
+        :label="branchText"
         :items="allBranchesList"
         :disabled="sourceStreamId === null"
         item-text="name"
@@ -63,6 +63,14 @@ export default {
   props: {
     streamSearchQuery: { type: String, default: null },
     sourceState: { type: String, default: 'Not Set' },
+    streamText: {
+      type: String,
+      default: ''
+    },
+    branchText: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {

ui/src/components/StreamCard.vue

@@ -13,7 +13,7 @@
       <v-toolbar-title class="ml-0" style="position: relative; left: -10px">
         <!-- Uncomment when pinning is in place and add style="position: relative; left: -10px" to the element above :)  -->
         <v-btn
-          v-tooltip="'Pin this stream - it will be saved to this file.'"
+          v-tooltip="`Pin this ${streamText.toLowerCase()} - it will be saved to this file.`"
           icon
           x-small
           @click="toggleSavedStream"
@@ -66,7 +66,11 @@
         <template #activator="{ on, attrs }">
           <v-slide-x-transition>
             <div v-show="hover">
-              <create-branch-dialog :stream-name="stream.name" :stream-id="streamId"/>
+              <create-branch-dialog
+                  :is-f-e2="preferences && preferences.user && preferences.user.fe2"
+                  :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">
@@ -133,7 +137,7 @@
               hide-details
               dense
               flat
-              placeholder="Write your commit message here"
+              :placeholder="`Write your ${commitText.toLowerCase()} message here`"
             />
           </div>
         </v-slide-y-transition>
@@ -204,7 +208,11 @@ export default {
       commitId: 'latest',
       commitMessage: null,
       invalid: false,
-      diffing: false
+      diffing: false,
+      streamText: '',
+      branchText: '',
+      commitText: '',
+      preferences: {}
     }
   },
   apollo: {
@@ -286,6 +294,16 @@ export default {
     }
   },
   mounted() {
+    bus.$on('update-preferences', async (preferences) => {
+      const pref = JSON.parse(preferences)
+      this.preferences = pref
+      this.streamText = pref.user.fe2 ? 'Project' : 'Stream'
+      this.branchText = pref.user.fe2 ? 'Model' : 'Branch'
+      this.commitText = pref.user.fe2 ? 'Version' : 'Commit'
+    })
+    // Collect preferences to render UI according to it
+    sketchup.exec({name: "collect_preferences", data: {}})
+
     bus.$on(`deactivate-diffing-${this.streamId}`, () => {
       this.diffing = false
     })

ui/src/components/dialogs/CreateBranchDialog.vue

@@ -3,7 +3,7 @@
   <v-dialog v-model="showCreateBranch">
     <template #activator="{ on: dialog, attrs }">
       <v-btn
-          v-tooltip="'Create Branch'"
+          v-tooltip="`Create ${isFE2 ? 'Model' : 'Branch'}`"
           icon x-small class="ml-0 mr-1"
           v-bind="attrs"
           v-on="{...dialog}"
@@ -15,10 +15,10 @@
     </template>
     <v-card>
       <v-card-title class="text-h5 mb-1">
-        Create a New Branch
+        {{ `Create a New ${isFE2 ? 'Model' : 'Branch'}` }}
       </v-card-title>
       <v-card-subtitle class="py-0 my-0 font-italic">
-        under {{ streamName }} stream
+        {{ `under ${streamName} ${isFE2 ? 'project' : 'stream'}` }}
       </v-card-subtitle>
       <v-container class="px-6" pb-0>
         <v-text-field
@@ -27,7 +27,7 @@
             hide-details
             dense
             flat
-            placeholder="Branch Name"
+            :placeholder="`${isFE2 ? 'Model' : 'Branch'} Name`"
         />
         <v-text-field
             v-model="description"
@@ -75,6 +75,14 @@ export default {
     streamName: {
       type: String,
       default: null
+    },
+    isFE2: {
+      type: Boolean,
+      default: false
+    },
+    branchTooltipName: {
+      type: String,
+      default: ''
     }
   },
   data() {

ui/src/components/dialogs/CreateStreamDialog.vue

@@ -16,13 +16,14 @@
                   left
               >
                 mdi-plus-circle
-              </v-icon>Create New Stream
+              </v-icon>
+              {{ `Create New ${isFE2 ? 'Project': 'Stream'}` }}
             </v-btn>
           </template>
 
           <v-card>
             <v-card-title class="text-h5">
-              Create a New Stream
+              {{ `Create a New ${isFE2 ? 'Project' : 'Stream'}` }}
             </v-card-title>
             <v-container class="px-6" pb-0>
               <!--
@@ -55,7 +56,7 @@
                   hide-details
                   dense
                   flat
-                  placeholder="Stream Name (Optional)"
+                  :placeholder="`${isFE2 ? 'Project' : 'Stream'} Name (Optional)`"
               />
               <v-text-field
                   v-model="description"
@@ -67,7 +68,7 @@
               />
               <v-switch
                   v-model="privateStream"
-                  :label="'Private Stream'"
+                  :label="`Private ${isFE2 ? 'Project' : 'Stream'}`"
               ></v-switch>
             </v-container>
 
@@ -169,6 +170,10 @@ export default {
     serverUrl: {
       type: String,
       default: null
+    },
+    isFE2: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -200,7 +205,7 @@ export default {
     },
     async getStream(){
       try {
-        const streamWrapper = new StreamWrapper(this.createStreamByIdText, this.accountId, this.serverUrl)
+        const streamWrapper = new StreamWrapper(this.createStreamByIdText, this.accountId, this.serverUrl, this.isFE2)
         let res = await this.$apollo.query({
           query: gql`
             query Stream($id: String!){

ui/src/components/dialogs/SettingsDialog.vue

@@ -16,14 +16,25 @@
         Settings
       </v-card-title>
       <v-container class="px-6" pb-0>
-        <!-- Switch Theme -->
+
+        <!-- User preferences -->
         <div class="sm1 mt-3">User Preferences</div>
         <v-divider class="mb-2"/>
+
+        <!-- Switch Theme -->
         <v-btn icon small class="mx-1" @click="switchTheme">
           <v-icon>mdi-theme-light-dark</v-icon>
         </v-btn>
         <span>Color Mode</span>
 
+        <!-- FE2 -->
+        <v-switch
+            :input-value="fe2"
+            class="pt-3 mt-n2 mb-n7"
+            :label="'FE2'"
+            @change="fe2Handler"
+        />
+
         <!-- Register objects as Speckle Entity on send/receive -->
         <v-switch
             :input-value="registerSpeckleEntity"
@@ -133,6 +144,7 @@ export default {
       includeComponentAttributes: this.preferences.model.include_component_entity_attributes,
       mergeCoplanarFaces: this.preferences.model.merge_coplanar_faces,
       diffing: this.preferences.user.diffing,
+      fe2: this.preferences.user.fe2,
       registerSpeckleEntity: this.preferences.user.register_speckle_entity
     }
   },
@@ -147,6 +159,7 @@ export default {
         this.includeComponentAttributes = newValue.model.include_component_entity_attributes
         this.mergeCoplanarFaces = newValue.model.merge_coplanar_faces
         this.diffing = newValue.user.diffing
+        this.fe2 = newValue.user.fe2
         this.registerSpeckleEntity = newValue.user.register_speckle_entity
       },
       deep: true,
@@ -161,6 +174,15 @@ export default {
     }
   },
   methods: {
+    fe2Handler(newValue){
+      this.fe2 = !!newValue
+      sketchup.exec({
+        name: "user_preferences_updated",
+        data: {preference_hash: "configSketchup", preference: "fe2", value: this.fe2}
+      })
+      this.$mixpanel.track('Connector Action', { name: 'Toggle FE2' })
+      sketchup.exec({name: "collect_preferences", data: {}})
+    },
     diffingHandler(newValue){
       this.diffing = !!newValue
       sketchup.exec({

ui/src/utils/streamWrapper.js

@@ -1,7 +1,11 @@
 require('url')
 
 export class StreamWrapper {
-    constructor(streamIdOrUrl, accountId, serverUrl) {
+    constructor(streamIdOrUrl, accountId, serverUrl, isFE2) {
+        this.isFE2 = isFE2
+        this.streamsKey = this.isFE2 ? 'projects/': 'streams/'
+        this.branchesKey = this.isFE2 ? 'models/': 'branches/'
+        this.commitsKey = this.isFE2 ? 'versions/': 'commits/'
         this.originalOutput = streamIdOrUrl
         try {
             this.streamWrapperFromUrl(streamIdOrUrl)
@@ -18,7 +22,7 @@ export class StreamWrapper {
         this.segments = this.url.pathname.split('/').map((segment) => segment + '/')
         this.serverUrl = this.url.origin
 
-        if (this.segments.length >= 4 && this.segments[3]?.toLowerCase() === "branches/"){
+        if (this.segments.length >= 4 && this.segments[3]?.toLowerCase() === this.branchesKey){
             this.streamId = this.segments[2].replace("/", "")
             if (this.segments.length > 5)
             {
@@ -32,7 +36,7 @@ export class StreamWrapper {
         } else {
             switch (this.segments.length){
                 case 3: // ie http://speckle.server/streams/8fecc9aa6d
-                    if (this.segments[1].toLowerCase() === "streams/")
+                    if (this.segments[1].toLowerCase() === this.streamsKey)
                         this.streamId = this.segments[2].replace("/", "");
                     else
                         throw new Error(`Cannot parse ${this.originalOutput} into a stream wrapper class`);
@@ -48,7 +52,7 @@ export class StreamWrapper {
                     break;
                 case 5: // ie http://speckle.server/streams/8fecc9aa6d/commits/76a23d7179
                     switch (this.segments[3].toLowerCase()){
-                        case "commits/":
+                        case this.commitsKey:
                             this.streamId = this.segments[2].replace("/", "");
                             this.commitId = this.segments[4].replace("/", "");
                             break;
@@ -57,7 +61,7 @@ export class StreamWrapper {
                             this.branchName = this.segments[3].replace("/", "");
                             this.commitId = this.segments[4].replace("/", "");
                             break;
-                        case "branches/":
+                        case this.branchesKey:
                             this.streamId = this.segments[2].replace("/", "");
                             this.branchName = this.segments[4].replace("/", "");
                             break;

ui/src/views/Streams.vue

@@ -27,7 +27,7 @@
           elevation="0"
           @click="showMore"
         >
-          More Streams
+          {{ `More ${streamsText}` }}
         </v-btn>
       </div>
     </div>
@@ -64,7 +64,8 @@ export default {
   data() {
     return {
       showMoreEnabled: true,
-      savedStreams: []
+      savedStreams: [],
+      streamsText: ''
     }
   },
   computed: {
@@ -80,6 +81,14 @@ export default {
     }
   },
   mounted() {
+    bus.$on('update-preferences', async (preferences) => {
+      const pref = JSON.parse(preferences)
+      this.streamsText = pref.user.fe2 ? 'Projects' : 'Streams'
+    })
+
+    // Collect preferences to render UI according to it
+    sketchup.exec({name: "collect_preferences", data: {}})
+
     bus.$on("deactivate-diffing-except", (exceptedStreamId) => {
       this.savedStreams.forEach((streamId) => {
         if (streamId !== exceptedStreamId){