Feat (FE2): CNX-8702 fe2 urls (#320)

* Recreate ApolloProvider whenever account switches

- It is a force-push of reload page whenever user switches account. It doesn't hurt

* Fix FE2 urls and streamWrapper flag argument

ui/src/App.vue

@@ -101,12 +101,12 @@
             </v-container>
             <create-stream-dialog
                 v-if="accounts().length !== 0"
-                :is-f-e2="preferences && preferences.user && preferences.user.fe2"
+                :is-f-e2-terms="preferences && preferences.user && preferences.user.fe2"
                 :account-id="activeAccount().userInfo.id"
                 :server-url="activeAccount().serverInfo.url"
             />
             <v-container v-if="accounts().length !== 0" fluid>
-              <router-view :stream-search-query="streamSearchQuery" />
+              <router-view :stream-search-query="streamSearchQuery"/>
             </v-container>
             <v-container v-else>
               <login/>
@@ -147,7 +147,12 @@ global.loadAccounts = function (accounts) {
   let uuid = localStorage.getItem('uuid')
   if (accounts.length !== 0){
     if (uuid) {
-      global.setSelectedAccount(accounts.find((acct) => acct['userInfo']['id'] === uuid))
+      var account = accounts.find((acct) => acct['userInfo']['id'] === uuid)
+      if (account){
+        global.setSelectedAccount(account)
+      }else{
+        global.setSelectedAccount(accounts.find((acct) => acct['isDefault']))
+      }
     } else {
       global.setSelectedAccount(accounts.find((acct) => acct['isDefault']))
     }
@@ -159,6 +164,7 @@ global.setSelectedAccount = function (account) {
   localStorage.setItem('serverUrl', account['serverInfo']['url'])
   localStorage.setItem('SpeckleSketchup.AuthToken', account['token'])
   localStorage.setItem('uuid', account['userInfo']['id'])
+  localStorage.setItem('frontend2', account['serverInfo']['frontend2'])
   bus.$emit('selected-account-reloaded')
 }
 
@@ -241,6 +247,12 @@ export default {
     switchAccount(account) {
       this.$mixpanel.track('Connector Action', { name: 'Account Select' })
       global.setSelectedAccount(account)
+      
+      // Force pushes to reload page to create ApolloClient from scratch
+      setTimeout(() => {
+        // timeout to wait a bit for potential sketchup.exec in the mean time calls
+        location.reload()
+      }, 200);
     },
     requestRefresh() {
       sketchup.exec({name: 'reload_accounts', data: {}})

ui/src/components/StreamCard.vue

@@ -91,19 +91,19 @@
                 mdi-check
               </v-icon>
               <v-icon v-else small class="mr-1 float-left">mdi-source-branch</v-icon>
-              {{ branch.name }} ({{ branch.commits.totalCount }})
+              {{ branch.name }} ({{ branch && branch.commits ? branch.commits.totalCount : 0 }})
             </v-list-item-title>
           </v-list-item>
         </v-list>
       </v-menu>
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
-          <v-chip v-if="stream.commits" small v-bind="attrs" v-on="on">
+          <v-chip v-if="stream && stream.commits" small v-bind="attrs" v-on="on">
             <v-icon small class="mr-1 float-left">mdi-source-commit</v-icon>
-            {{ selectedBranch.commits.items.length ? commitId : 'no commits' }}
+            {{  selectedBranch.commits.items.length ? commitId : 'no commits' }}
           </v-chip>
         </template>
-        <v-list dense>
+        <v-list v-if="selectedBranch && selectedBranch.commits" dense>
           <v-list-item
             v-for="(commit, index) in selectedBranch.commits.items"
             :key="index"
@@ -361,7 +361,9 @@ export default {
       return new Promise((resolve) => setTimeout(resolve, ms))
     },
     openInWeb() {
-      window.open(`${localStorage.getItem('serverUrl')}/streams/${this.streamId}`)
+      var url = localStorage.getItem('frontend2') === "true" ? `${localStorage.getItem('serverUrl')}/projects/${this.streamId}` : `${localStorage.getItem('serverUrl')}/streams/${this.streamId}`
+      window.open(url)
+      
       this.$mixpanel.track('Connector Action', { name: 'Open In Web' })
     },
     switchBranch(branchName) {
@@ -501,13 +503,12 @@ export default {
           }
         })
         console.log('>>> SpeckleSketchUp: Sent to stream: ' + this.streamId, commit)
+        const url = localStorage.getItem('frontend2') === 'true' ? `${localStorage.getItem('serverUrl')}/projects/${this.streamId}/models/${this.selectedBranch.id}@${res.data.commitCreate}` : `${localStorage.getItem('serverUrl')}/streams/${this.streamId}/commits/${res.data.commitCreate}`
         this.$eventHub.$emit('notification', {
           text: 'Model selection sent!\n',
           action: {
             name: 'View in Web',
-            url: `${localStorage.getItem('serverUrl')}/streams/${this.streamId}/commits/${
-              res.data.commitCreate
-            }`
+            url: url
           }
         })
         this.$apollo.queries.stream.refetch()

ui/src/components/dialogs/CreateStreamDialog.vue

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

ui/src/views/Streams.vue

@@ -17,7 +17,7 @@
     </div>
     <div v-if="allStreamsList" class="mt-5">
       <div v-for="stream in allStreamsList" :key="stream.id">
-        <stream-card :stream-id="stream.id" />
+        <stream-card :stream-id="stream.id"/>
       </div>
       <div class="actions text-center">
         <v-btn
@@ -59,7 +59,10 @@ export default {
     StreamCard: () => import('@/components/StreamCard')
   },
   props: {
-    streamSearchQuery: { type: String, default: null }
+    streamSearchQuery: { 
+      type: String, 
+      default: null 
+    }
   },
   data() {
     return {