From 0b12da31bb281c90fa4aeeb067ff2328c705ea56 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@speckle.systems>
Date: Wed, 28 Jul 2021 10:43:38 +0200
Subject: [PATCH] feat(frontent): re-adds onboarding wizard

---
 .../src/components/GettingStartedWizard.vue   | 255 ++++++++++++++++++
 .../src/components/ListItemActivity.vue       |  29 +-
 .../src/components/ListItemStream.vue         |   2 +-
 packages/frontend/src/graphql/user.gql        |  13 -
 packages/frontend/src/views/Streams.vue       | 192 ++-----------
 packages/frontend/src/views/Timeline.vue      |  28 +-
 6 files changed, 316 insertions(+), 203 deletions(-)
 create mode 100644 packages/frontend/src/components/GettingStartedWizard.vue

diff --git a/packages/frontend/src/components/GettingStartedWizard.vue b/packages/frontend/src/components/GettingStartedWizard.vue
new file mode 100644
index 000000000..6c229287d
--- /dev/null
+++ b/packages/frontend/src/components/GettingStartedWizard.vue
@@ -0,0 +1,255 @@
+<template>
+  <div v-if="quickstart > 0" class="ma-3">
+    <div v-if="user" class="ma-5 headline justify-center text-center">
+      Hello {{ user.name.split(' ')[0] }} 👋,
+      <br />
+      It seems you're new here, let's get you set up!
+    </div>
+    <v-stepper v-model="quickstart" flat shaped vertical class="rounded-lg quickstart-stepper mt-5">
+      <v-btn
+        small
+        text
+        class="white--grey"
+        style="position: absolute; top: 5px; right: 5px; z-index: 1002"
+        @click="skip"
+      >
+        Skip
+      </v-btn>
+      <v-stepper-step :complete="quickstart > 1" step="1">Create your first stream</v-stepper-step>
+
+      <v-stepper-content step="1" class="body-2">
+        <p>
+          Streams are the
+          <b>primary way Speckle organizes data</b>
+          . You can see them as a folder, a project or a repository.
+        </p>
+        <p>
+          Streams
+          <b>can be shared with others</b>
+          and can be made publicly visible on the web. Only the owner of a stream can manage its
+          permissions and visibility.
+        </p>
+        <p>
+          In order to use Speckle you first need to create a stream, so
+          <b>go ahead and create your first one</b>
+          !
+        </p>
+      </v-stepper-content>
+
+      <v-stepper-step :complete="quickstart > 2" step="2">Install Speckle Manager</v-stepper-step>
+
+      <v-stepper-content step="2" class="body-2">
+        <p>
+          Speckle Manager is a free
+          <b>desktop application</b>
+          that lets you install connectors for some of the most popular design and analysis
+          software.
+        </p>
+        <p>
+          The connectors
+          <b>exchange</b>
+          geometry and BIM data with Speckle, so that you can access it wherever you want!
+        </p>
+        <v-btn elevation="10" class="my-5" rounded color="primary" @click="downloadManager">
+          <v-icon small class="mr-4">mdi-download</v-icon>
+          Download Manager
+        </v-btn>
+      </v-stepper-content>
+
+      <v-stepper-step :complete="quickstart > 3" step="3">Set up Speckle Manager</v-stepper-step>
+
+      <v-stepper-content step="3">
+        <p>
+          With Speckle Manager installed,
+          <b>log into your account</b>
+          and then
+          <b>install the connectors</b>
+          for the software that you use.
+        </p>
+        <p>
+          <v-btn
+            elevation="10"
+            rounded
+            color="primary"
+            target="_blank"
+            @click="refreshApplications"
+          >
+            Done
+          </v-btn>
+        </p>
+
+        <p v-if="refreshFailied" class="red--text caption">
+          Please install Manager and log into your account to continue.
+        </p>
+
+        <p class="caption">Having issues logging in Manager? Try with the button below:</p>
+        <v-btn small text rounded color="primary" @click="addAccount">
+          <v-icon small class="mr-4">mdi-account-plus</v-icon>
+          Add account to manager
+        </v-btn>
+      </v-stepper-content>
+
+      <v-stepper-step step="4">Send data to Speckle</v-stepper-step>
+      <v-stepper-content step="4">
+        <p>Great progress 🥳!</p>
+        <p>
+          We're almost done here, and just need to send your first set of data to Speckle. By doing
+          so you will also be creating your first
+          <b>commit.</b>
+        </p>
+        <p>
+          Commits are
+          <b>snapshots or versions of your data in time.</b>
+          Every time you send to Speckle, a new commit is created for you.
+        </p>
+        <p>Send data to Speckle now by using one of our connetors!</p>
+        <p>
+          <v-btn
+            elevation="10"
+            class="my-5"
+            rounded
+            color="primary"
+            href="https://speckle.guide/user/connectors.html"
+            target="_blank"
+          >
+            Send Some Data
+          </v-btn>
+        </p>
+      </v-stepper-content>
+    </v-stepper>
+  </div>
+</template>
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  apollo: {
+    user: {
+      query: gql`
+        query {
+          user {
+            id
+            name
+            streams {
+              totalCount
+            }
+            commits {
+              totalCount
+            }
+          }
+        }
+      `,
+      skip() {
+        return !this.loggedIn
+      }
+    },
+    authorizedApps: {
+      query: gql`
+        query {
+          user {
+            id
+            authorizedApps {
+              id
+            }
+          }
+        }
+      `,
+      update: (data) => data.user.authorizedApps
+    },
+    $subscribe: {
+      userStreamAdded: {
+        query: gql`
+          subscription {
+            userStreamAdded
+          }
+        `,
+        result() {
+          this.$apollo.queries.user.refetch()
+        },
+        skip() {
+          return !this.loggedIn
+        }
+      },
+      userStreamRemoved: {
+        query: gql`
+          subscription {
+            userStreamRemoved
+          }
+        `,
+        result() {
+          this.$apollo.queries.user.refetch()
+        },
+        skip() {
+          return !this.loggedIn
+        }
+      }
+    }
+  },
+  data: () => ({
+    streams: [],
+    hasClickedDownload: false,
+    refreshFailied: false,
+    skipped: false
+  }),
+  computed: {
+    loggedIn() {
+      return localStorage.getItem('uuid') !== null
+    },
+    rootUrl() {
+      return window.location.origin
+    },
+    quickstart() {
+      if (!this.user || this.skipped) return 0
+      if (this.user.streams.totalCount === 0) return 1
+      if (this.user.streams.totalCount > 0 && !this.hasManager && !this.hasClickedDownload) return 2
+      if (this.user.streams.totalCount > 0 && !this.hasManager && this.hasClickedDownload) return 3
+      if (this.hasManager && this.user.commits.totalCount === 0) return 4
+      if (this.user.commits.totalCount > 0) return 0
+
+      return 0
+    },
+    hasManager() {
+      if (!this.authorizedApps) return false
+      return this.authorizedApps.findIndex((a) => a.id === 'sdm') !== -1
+    }
+  },
+  watch: {
+    streams(val) {
+      if (val.items.length === 0 && !localStorage.getItem('onboarding')) {
+        this.$router.push('/onboarding')
+      }
+    }
+  },
+  mounted() {
+    this.skipped = localStorage.getItem('wizard')
+  },
+  methods: {
+    skip() {
+      localStorage.setItem('wizard', 'skipped')
+      this.skipped = true
+    },
+    downloadManager() {
+      this.hasClickedDownload = true
+      this.$matomo && this.$matomo.trackPageView(`onboarding/managerdownload`)
+      this.$matomo && this.$matomo.trackEvent('onboarding', 'managerdownload')
+      window.open('https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe', '_blank')
+    },
+    addAccount() {
+      this.$matomo && this.$matomo.trackPageView(`onboarding/accountadd`)
+      this.$matomo && this.$matomo.trackEvent('onboarding', 'accountadd')
+      window.open(`speckle://accounts?add_server_account=${this.rootUrl}`, '_blank')
+    },
+    async refreshApplications() {
+      await this.$apollo.queries.authorizedApps.refetch()
+      if (!this.hasManager) {
+        this.refreshFailied = true
+      } else this.refreshFailied = false
+    }
+  }
+}
+</script>
+<style scoped>
+.quickstart-stepper {
+  box-shadow: none !important;
+}
+</style>
diff --git a/packages/frontend/src/components/ListItemActivity.vue b/packages/frontend/src/components/ListItemActivity.vue
index 5ca1bf803..159cc7280 100644
--- a/packages/frontend/src/components/ListItemActivity.vue
+++ b/packages/frontend/src/components/ListItemActivity.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="list-item-activity">
-    <div v-if="user" class="caption mb-2">
+    <div v-if="user" class="body-2 mb-2">
       <user-avatar :id="user.id" :avatar="user.avatar" :size="30" :name="user.name" />
       &nbsp;
       <a target="_blank" :href="'/profile/' + user.id">{{ user.name }}</a>
@@ -16,6 +16,7 @@
     <v-card
       v-if="activity.actionType.includes('stream_permissions') && stream"
       class="mb-5 ml-10 activity-card"
+      flat
     >
       <v-card-text class="pa-5 body-1">
         <v-chip v-if="targetUser" pill :color="activityInfo.color">
@@ -43,9 +44,11 @@
     <v-card
       v-else-if="activity.resourceType === 'stream' && stream"
       class="mb-5 ml-10 activity-card"
+      flat
     >
       <v-card-text class="pa-5 body-1">
         <a :href="url" class="title">
+          <v-icon color="primary" small>mdi-compare-vertical</v-icon>
           {{ stream.name }}
         </a>
         <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
@@ -95,7 +98,7 @@
     </v-card>
 
     <!-- BRANCHES -->
-    <v-card v-else-if="activity.resourceType === 'branch'" class="mb-5 ml-10 activity-card">
+    <v-card v-else-if="activity.resourceType === 'branch'" class="mb-5 ml-10 activity-card" flat>
       <v-card-text class="pa-5 body-1">
         <v-chip :to="url" :color="activityInfo.color">
           <v-icon small class="mr-2 float-left" light>{{ activityInfo.icon }}</v-icon>
@@ -107,7 +110,7 @@
     </v-card>
 
     <!-- COMMITS -->
-    <v-card v-else-if="activity.resourceType === 'commit'" class="mb-5 ml-10 activity-card">
+    <v-card v-else-if="activity.resourceType === 'commit'" class="mb-5 ml-10 activity-card" flat>
       <v-card-text class="pa-5">
         <div>
           <v-chip :to="url" :color="activityInfo.color">
@@ -115,7 +118,7 @@
             {{ activity.resourceId }}
           </v-chip>
           <span class="mx-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
-          <span v-if="activity.actionType === 'commit_create' && commit">
+          <span v-if="activity.actionType !== 'commit_delete' && commit">
             <v-chip
               :to="`/streams/${activity.streamId}/branches/${commit.branchName}`"
               small
@@ -124,10 +127,12 @@
               <v-icon small class="float-left" light>mdi-source-branch</v-icon>
               {{ commit.branchName }}
             </v-chip>
-            <span class="mx-3 body-2 font-italic">from</span>
-            <source-app-avatar :application-name="commit.sourceApplication" />
+            <span v-if="activity.actionType === 'commit_create'">
+              <span class="mx-3 body-2 font-italic">from</span>
+              <source-app-avatar :application-name="commit.sourceApplication" />
+            </span>
           </span>
-          <span v-if="activity.actionType === 'commit_create' && !commit">[commit deleted]</span>
+          <span v-if="activity.actionType !== 'commit_delete' && !commit">[commit deleted]</span>
         </div>
         <div
           v-if="activityInfo.description"
@@ -294,7 +299,7 @@ export default {
             actionText: 'new stream',
             description: this.activity?.info?.stream?.description
               ? this.truncate(this.activity.info.stream.description, 50)
-              : 'No description provided.'
+              : ''
           }
         case 'stream_update':
           return {
@@ -322,11 +327,11 @@ export default {
           return {
             icon: 'mdi-source-branch-plus',
             captionText: 'created a branch in',
-            actionText: 'new branch',
+            actionText: 'new branch in',
             color: 'success',
             description: this.activity?.info?.branch?.description
               ? this.truncate(this.activity.info.branch.description, 50)
-              : 'No description provided.'
+              : ''
           }
         case 'branch_delete':
           return {
@@ -339,7 +344,7 @@ export default {
           return {
             icon: 'mdi-source-branch-sync',
             captionText: 'updated a branch in',
-            actionText: 'branch updated',
+            actionText: 'branch updated in',
             color: 'primary',
             description: this.updatedDescription()
           }
@@ -355,7 +360,7 @@ export default {
           return {
             icon: 'mdi-timeline-text-outline',
             captionText: 'updated a commit in',
-            actionText: 'commit updated',
+            actionText: 'commit updated in',
             color: 'primary',
             description: this.updatedDescription()
           }
diff --git a/packages/frontend/src/components/ListItemStream.vue b/packages/frontend/src/components/ListItemStream.vue
index 6237117a8..263eedc29 100644
--- a/packages/frontend/src/components/ListItemStream.vue
+++ b/packages/frontend/src/components/ListItemStream.vue
@@ -3,7 +3,7 @@
     <v-card
       :to="'/streams/' + stream.id"
       color=""
-      :elevation="hover ? 5 : 1"
+      :elevation="hover ? 5 : 0"
       style="transition: all 0.2s ease-in-out"
     >
       <img
diff --git a/packages/frontend/src/graphql/user.gql b/packages/frontend/src/graphql/user.gql
index ecab487a9..815adaa70 100644
--- a/packages/frontend/src/graphql/user.gql
+++ b/packages/frontend/src/graphql/user.gql
@@ -16,18 +16,5 @@ query {
     commits {
       totalCount
     }
-    activity {
-      totalCount
-      cursor
-      items {
-        actionType
-        userId
-        resourceId
-        resourceType
-        streamId
-        message
-        time
-      }
-    }
   }
 }
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index c24c15511..b993d5b40 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -26,6 +26,9 @@
       </v-col>
       <v-col cols="12" sm="12" md="8" lg="9" xl="10">
         <v-row>
+          <v-col cols="12">
+            <getting-started-wizard />
+          </v-col>
           <v-col v-if="$apollo.loading">
             <v-card elevation="0" color="transparent">
               <div v-if="$apollo.loading" class="my-5">
@@ -70,127 +73,17 @@
               </infinite-loading>
             </v-row>
           </v-col>
-          <v-col v-if="quickstart > 0">
-            <div v-if="quickstart === 1" class="ma-5 headline">
-              Hello 👋
+          <v-col v-else cols="12">
+            <div class="ma-5 headline justify-center text-center">
+              😿
               <br />
-              It seems you're new here, let's get you set up:
+              Your don't have any streams!
+
+              <br />
+              <span class="subtitle-2 font-italic">
+                Create one now with the big blue button to the side.
+              </span>
             </div>
-            <v-stepper
-              v-model="quickstart"
-              flat
-              shaped
-              vertical
-              class="rounded-lg quickstart-stepper mt-5"
-            >
-              <v-stepper-step :complete="quickstart > 1" step="1">
-                Create your first stream
-              </v-stepper-step>
-
-              <v-stepper-content step="1" class="body-2">
-                <p>
-                  Streams are the
-                  <b>primary way Speckle organizes data</b>
-                  . You can see them as a folder, a project or a repository.
-                </p>
-                <p>
-                  Streams
-                  <b>can be shared with others</b>
-                  and can be made publicly visible on the web. Only the owner of a stream can manage
-                  its permissions and visibility.
-                </p>
-                <p>
-                  In order to use Speckle you first need to create a stream, so
-                  <b>go ahead and create your first one</b>
-                  !
-                </p>
-              </v-stepper-content>
-
-              <v-stepper-step :complete="quickstart > 2" step="2">
-                Install Speckle Manager
-              </v-stepper-step>
-
-              <v-stepper-content step="2" class="body-2">
-                <p>
-                  Speckle Manager is a free
-                  <b>desktop application</b>
-                  that lets you install connectors for some of the most popular design and analysis
-                  software.
-                </p>
-                <p>
-                  The connectors
-                  <b>exchange</b>
-                  geometry and BIM data with Speckle, so that you can access it wherever you want!
-                </p>
-                <v-btn elevation="10" class="my-5" rounded color="primary" @click="downloadManager">
-                  <v-icon small class="mr-4">mdi-download</v-icon>
-                  Download Manager
-                </v-btn>
-              </v-stepper-content>
-
-              <v-stepper-step :complete="quickstart > 3" step="3">
-                Set up Speckle Manager
-              </v-stepper-step>
-
-              <v-stepper-content step="3">
-                <p>
-                  With Speckle Manager installed,
-                  <b>log into your account</b>
-                  and then
-                  <b>install the connectors</b>
-                  for the software that you use.
-                </p>
-                <p>
-                  <v-btn
-                    elevation="10"
-                    rounded
-                    color="primary"
-                    target="_blank"
-                    @click="refreshApplications"
-                  >
-                    Done
-                  </v-btn>
-                </p>
-
-                <p v-if="refreshFailied" class="red--text caption">
-                  Please install Manager and log into your account to continue.
-                </p>
-
-                <p class="caption">Having issues logging in Manager? Try with the button below:</p>
-                <v-btn small text rounded color="primary" @click="addAccount">
-                  <v-icon small class="mr-4">mdi-account-plus</v-icon>
-                  Add account to manager
-                </v-btn>
-              </v-stepper-content>
-
-              <v-stepper-step step="4">Send data to Speckle</v-stepper-step>
-              <v-stepper-content step="4">
-                <p>Great progress 🥳!</p>
-                <p>
-                  We're almost done here, and just need to send your first set of data to Speckle.
-                  By doing so you will also be creating your first
-                  <b>commit.</b>
-                </p>
-                <p>
-                  Commits are
-                  <b>snapshots or versions of your data in time.</b>
-                  Every time you send to Speckle, a new commit is created for you.
-                </p>
-                <p>Send data to Speckle now by using one of our connetors!</p>
-                <p>
-                  <v-btn
-                    elevation="10"
-                    class="my-5"
-                    rounded
-                    color="primary"
-                    href="https://speckle.guide/user/connectors.html"
-                    target="_blank"
-                  >
-                    How to use connectors
-                  </v-btn>
-                </p>
-              </v-stepper-content>
-            </v-stepper>
           </v-col>
         </v-row>
       </v-col>
@@ -200,6 +93,7 @@
 <script>
 import ListItemStream from '../components/ListItemStream'
 import StreamNewDialog from '../components/dialogs/StreamNewDialog'
+import GettingStartedWizard from '../components/GettingStartedWizard'
 import streamsQuery from '../graphql/streams.gql'
 import userQuery from '../graphql/user.gql'
 import InfiniteLoading from 'vue-infinite-loading'
@@ -212,7 +106,8 @@ export default {
     ListItemStream,
     StreamNewDialog,
     InfiniteLoading,
-    ServerInviteDialog
+    ServerInviteDialog,
+    GettingStartedWizard
   },
   apollo: {
     streams: {
@@ -253,43 +148,14 @@ export default {
           return !this.loggedIn
         }
       }
-    },
-    authorizedApps: {
-      query: gql`
-        query {
-          user {
-            id
-            authorizedApps {
-              id
-            }
-          }
-        }
-      `,
-      update: (data) => data.user.authorizedApps
     }
   },
   data: () => ({
     activeTab: 'streams',
     streams: [],
-    newStreamDialog: false,
-    hasClickedDownload: false,
-    refreshFailied: false
+    newStreamDialog: false
   }),
   computed: {
-    quickstart() {
-      if (!this.user) return 0
-      if (this.streams.totalCount === 0) return 1
-      if (this.streams.totalCount > 0 && !this.hasManager && !this.hasClickedDownload) return 2
-      if (this.streams.totalCount > 0 && !this.hasManager && this.hasClickedDownload) return 3
-      if (this.hasManager && this.user.commits.totalCount === 0) return 4
-      if (this.user.commits.totalCount > 0) return 0
-
-      return 0
-    },
-    hasManager() {
-      if (!this.authorizedApps) return false
-      return this.authorizedApps.findIndex((a) => a.id === 'sdm') !== -1
-    },
     recentActivity() {
       let activity = []
 
@@ -309,9 +175,6 @@ export default {
     },
     loggedIn() {
       return localStorage.getItem('uuid') !== null
-    },
-    rootUrl() {
-      return window.location.origin
     }
   },
   watch: {
@@ -325,23 +188,7 @@ export default {
     showServerInviteDialog() {
       this.$refs.serverInviteDialog.show()
     },
-    downloadManager() {
-      this.hasClickedDownload = true
-      this.$matomo && this.$matomo.trackPageView(`onboarding/managerdownload`)
-      this.$matomo && this.$matomo.trackEvent('onboarding', 'managerdownload')
-      window.open('https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe', '_blank')
-    },
-    addAccount() {
-      this.$matomo && this.$matomo.trackPageView(`onboarding/accountadd`)
-      this.$matomo && this.$matomo.trackEvent('onboarding', 'accountadd')
-      window.open(`speckle://accounts?add_server_account=${this.rootUrl}`, '_blank')
-    },
-    async refreshApplications() {
-      await this.$apollo.queries.authorizedApps.refetch()
-      if (!this.hasManager) {
-        this.refreshFailied = true
-      } else this.refreshFailied = false
-    },
+
     infiniteHandler($state) {
       this.$apollo.queries.streams.fetchMore({
         variables: {
@@ -390,8 +237,3 @@ export default {
   text-decoration: underline;
 }
 </style>
-<style scoped>
-.quickstart-stepper {
-  box-shadow: none !important;
-}
-</style>
diff --git a/packages/frontend/src/views/Timeline.vue b/packages/frontend/src/views/Timeline.vue
index aee4f7385..53d27165a 100644
--- a/packages/frontend/src/views/Timeline.vue
+++ b/packages/frontend/src/views/Timeline.vue
@@ -53,6 +53,9 @@
       </v-col>
       <v-col cols="12" sm="12" md="8" lg="9" xl="10">
         <v-row>
+          <v-col cols="12">
+            <getting-started-wizard />
+          </v-col>
           <v-col v-if="$apollo.loading && !timeline">
             <v-card elevation="0" color="transparent">
               <div v-if="$apollo.loading" class="my-5">
@@ -61,7 +64,7 @@
             </v-card>
           </v-col>
 
-          <v-col v-else>
+          <v-col v-else-if="timeline && timeline.items.length > 0">
             <div>
               <v-subheader class="mb-3">Recent activity</v-subheader>
               <div v-if="timeline" key="activity-list">
@@ -81,6 +84,18 @@
               </div>
             </div>
           </v-col>
+          <v-col v-else cols="12">
+            <div class="ma-5 headline justify-center text-center">
+              🎈
+              <br />
+              Your feed is empty!
+
+              <br />
+              <span class="subtitle-2 font-italic">
+                Try creating a stream, sending data etc and your activity willshow up here.
+              </span>
+            </div>
+          </v-col>
         </v-row>
       </v-col>
     </v-row>
@@ -89,14 +104,23 @@
 
 <script>
 import ListItemActivity from '@/components/ListItemActivity'
+import GettingStartedWizard from '../components/GettingStartedWizard'
 import ServerInviteDialog from '@/components/dialogs/ServerInviteDialog.vue'
 import StreamNewDialog from '@/components/dialogs/StreamNewDialog'
 import gql from 'graphql-tag'
 import InfiniteLoading from 'vue-infinite-loading'
+import SpeckleLoading from '../components/SpeckleLoading.vue'
 
 export default {
   name: 'Timeline',
-  components: { ListItemActivity, InfiniteLoading, ServerInviteDialog, StreamNewDialog },
+  components: {
+    ListItemActivity,
+    InfiniteLoading,
+    ServerInviteDialog,
+    StreamNewDialog,
+    GettingStartedWizard,
+    SpeckleLoading
+  },
   props: {
     type: String
   },