From d5bdcb54e3c52eabb97c2cbacc45f189a1410bb4 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 8 May 2021 21:45:17 +0100
Subject: [PATCH] improvement(frontend): various improvements

profile page alignment issues; adds latest commit in stream sidebar to reduce confusion when no
commits on main, and there are other commits on other branches; removes two unused components; adds
latest commit to stream query.
---
 .../frontend/src/components/FeedCommit.vue    | 86 ------------------
 .../frontend/src/components/FeedStream.vue    | 89 -------------------
 .../frontend/src/components/SidebarStream.vue | 28 +++++-
 .../src/components/UserAuthorisedApps.vue     |  8 +-
 packages/frontend/src/graphql/stream.gql      |  7 +-
 packages/frontend/src/router/index.js         |  8 --
 packages/frontend/src/views/Profile.vue       | 12 ++-
 packages/frontend/src/views/StreamMain.vue    |  6 +-
 8 files changed, 46 insertions(+), 198 deletions(-)
 delete mode 100644 packages/frontend/src/components/FeedCommit.vue
 delete mode 100644 packages/frontend/src/components/FeedStream.vue

diff --git a/packages/frontend/src/components/FeedCommit.vue b/packages/frontend/src/components/FeedCommit.vue
deleted file mode 100644
index 19e995a52..000000000
--- a/packages/frontend/src/components/FeedCommit.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <div>
-    <div class="text-center py-3" style="position: absolute">
-      <user-avatar :id="user.id" :avatar="user.avatar" :name="user.name" :size="30" />
-    </div>
-    <div class="ml-12">
-      <v-row class="caption py-3">
-        <v-col class="pb-2">
-          <v-icon small>mdi-source-commit</v-icon>
-          &nbsp; You have
-          <strong>
-            <span v-if="commit.items">{{ commit.items.length }} new commits</span>
-            <span v-else>a new commit</span>
-          </strong>
-          in
-          <strong>
-            <router-link :to="'streams/' + commit.streamId">
-              {{ commit.streamName }}
-            </router-link>
-          </strong>
-          &nbsp;
-          <timeago :datetime="commit.createdAt"></timeago>
-        </v-col>
-      </v-row>
-
-      <v-card class="mb-3" elevation="0" rounded="lg">
-        <v-card-title v-if="!commit.items" class="subtitle-2">
-          <router-link :to="`streams/${commit.streamId}/commits/${commit.id}`">
-            {{ commit.message }}
-          </router-link>
-        </v-card-title>
-        <v-expansion-panels v-else multiple :value="expando" flat>
-          <v-expansion-panel>
-            <v-expansion-panel-header class="pl-4">
-              <span class="subtitle-2">
-                {{ commit.message }}
-              </span>
-            </v-expansion-panel-header>
-            <v-expansion-panel-content>
-              <v-list dense>
-                <v-list-item
-                  v-for="(item, i) in commit.items"
-                  :key="i"
-                  :to="`streams/${item.streamId}/commits/${item.id}`"
-                >
-                  <v-list-item-content>
-                    <v-list-item-title>{{ item.message }}</v-list-item-title>
-                  </v-list-item-content>
-                  <v-list-item-icon class="caption">
-                    <timeago :datetime="item.createdAt"></timeago>
-                  </v-list-item-icon>
-                </v-list-item>
-              </v-list>
-            </v-expansion-panel-content>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-card>
-    </div>
-  </div>
-</template>
-<script>
-import UserAvatar from './UserAvatar'
-
-export default {
-  components: { UserAvatar },
-  props: {
-    commit: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
-    user: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      expando: [0]
-    }
-  }
-}
-</script>
diff --git a/packages/frontend/src/components/FeedStream.vue b/packages/frontend/src/components/FeedStream.vue
deleted file mode 100644
index e44940b3d..000000000
--- a/packages/frontend/src/components/FeedStream.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="pt-4">
-    <div class="text-center" style="position: absolute">
-      <user-avatar :id="user.id" :avatar="user.avatar" :name="user.name" :size="30" />
-    </div>
-    <div class="ml-12">
-      <v-row class="caption">
-        <v-col cols="12" class="pb-2 mb-3">
-          <v-icon small>mdi-compare-vertical</v-icon>
-          &nbsp; You have a
-          <strong>new stream</strong>
-          &nbsp;
-          <timeago :datetime="stream.createdAt"></timeago>
-        </v-col>
-      </v-row>
-      <v-card class="mb-3" elevation="0" rounded="lg">
-        <v-row justify-center>
-          <v-col cols="12">
-            <v-card-title class="subtitle-2">
-              <router-link :to="'streams/' + stream.id" class="mr-4">
-                {{ stream.name }}
-              </router-link>
-              <div class="caption">
-                <v-icon
-                  v-tooltip="
-                    stream.branches.totalCount +
-                    ' branch' +
-                    (stream.branches.totalCount === 1 ? '' : 'es')
-                  "
-                  small
-                >
-                  mdi-source-branch
-                </v-icon>
-                <span class="mr-2">{{ stream.branches.totalCount }}</span>
-                <v-icon
-                  v-tooltip="
-                    stream.commits.totalCount +
-                    ' commit' +
-                    (stream.commits.totalCount === 1 ? '' : 's')
-                  "
-                  small
-                >
-                  mdi-source-commit
-                </v-icon>
-                <span class="mr-2">{{ stream.commits.totalCount }}</span>
-                <v-icon
-                  v-tooltip="
-                    stream.collaborators.length +
-                    ' collaborator' +
-                    (stream.collaborators.length === 1 ? '' : 's')
-                  "
-                  small
-                >
-                  mdi-account-outline
-                </v-icon>
-                <span class="mr-2 pr-2">{{ stream.collaborators.length }}</span>
-              </div>
-            </v-card-title>
-          </v-col>
-        </v-row>
-      </v-card>
-    </div>
-  </div>
-</template>
-<script>
-import UserAvatar from './UserAvatar'
-
-export default {
-  components: { UserAvatar },
-  props: {
-    stream: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
-    user: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
-    isFeed: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
diff --git a/packages/frontend/src/components/SidebarStream.vue b/packages/frontend/src/components/SidebarStream.vue
index c8dabc2d1..112fd3688 100644
--- a/packages/frontend/src/components/SidebarStream.vue
+++ b/packages/frontend/src/components/SidebarStream.vue
@@ -21,11 +21,35 @@
       </v-btn>
     </v-card-title>
     <v-divider class="mx-4"></v-divider>
+    <v-card-text v-if="isHomeRoute && stream.commits.items.length !== 0">
+      <p class="mb-2">
+        Latest update:
+        <timeago :datetime="stream.commits.items[0].createdAt"></timeago>
+      </p>
+      <v-chip
+        small
+        color="primary"
+        class="pa-2"
+        :to="`/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 }}
+      </v-chip>
+      on
+      <router-link
+        class="text-decoration-none"
+        :to="`/streams/${stream.id}/branches/${stream.commits.items[0].branchName}`"
+      >
+        <v-icon small color="primary">mdi-source-branch</v-icon>
+        {{ stream.commits.items[0].branchName }}
+      </router-link>
+    </v-card-text>
+    <v-divider class="mx-4"></v-divider>
     <v-card-text>
-      <p>
+      <!--       <p>
         Updated
         <timeago v-tooltip="formatDate(stream.updatedAt)" :datetime="stream.updatedAt"></timeago>
-      </p>
+      </p> -->
       <p>
         Created
         <timeago v-tooltip="formatDate(stream.createdAt)" :datetime="stream.createdAt"></timeago>
diff --git a/packages/frontend/src/components/UserAuthorisedApps.vue b/packages/frontend/src/components/UserAuthorisedApps.vue
index d9729fac5..9cd84a224 100644
--- a/packages/frontend/src/components/UserAuthorisedApps.vue
+++ b/packages/frontend/src/components/UserAuthorisedApps.vue
@@ -13,7 +13,7 @@
       </v-btn>
     </v-card-text>
     <v-card-text v-if="$apollo.loading">Loading...</v-card-text>
-    <div v-if="authorizedApps && authorizedApps.length !== 0">
+    <v-card-text v-if="authorizedApps && authorizedApps.length !== 0">
       <v-row>
         <v-col
           v-for="app in authorizedApps"
@@ -31,7 +31,7 @@
                 </v-icon>
                 {{ app.name }}
               </h3>
-              <p>
+              <p class="text-truncate">
                 {{ app.description }}
                 <span v-show="app.id === 'spklwebapp'" class="caption">
                   (This is the app your're currently using!)
@@ -62,7 +62,7 @@
           </v-card-actions>
         </v-card>
       </v-dialog>
-    </div>
+    </v-card-text>
   </v-card>
 </template>
 <script>
@@ -93,7 +93,7 @@ export default {
           }
         }
       `,
-      update: (data) => data.user.authorizedApps
+      update: (data) => data.user.authorizedApps.filter(app => app.id !== 'spklwebapp')
     }
   },
   computed: {
diff --git a/packages/frontend/src/graphql/stream.gql b/packages/frontend/src/graphql/stream.gql
index e5e712d68..45eda3f7a 100644
--- a/packages/frontend/src/graphql/stream.gql
+++ b/packages/frontend/src/graphql/stream.gql
@@ -16,8 +16,13 @@ query Stream($id: String!) {
     branches {
       totalCount
     }
-    commits {
+    commits(limit: 1) {
       totalCount
+      items {
+        id
+        branchName
+        createdAt
+      }
     }
   }
 }
diff --git a/packages/frontend/src/router/index.js b/packages/frontend/src/router/index.js
index 5130b2eec..e1962c7bb 100644
--- a/packages/frontend/src/router/index.js
+++ b/packages/frontend/src/router/index.js
@@ -67,14 +67,6 @@ const routes = [
         },
         component: () => import('../views/Streams.vue')
       },
-      // {
-      //   path: 'streams',
-      //   name: 'streams',
-      //   meta: {
-      //     title: 'Streams | Speckle'
-      //   },
-      //   component: () => import('../views/Streams.vue')
-      // },
       {
         path: 'streams/:streamId',
         // name: 'streams',
diff --git a/packages/frontend/src/views/Profile.vue b/packages/frontend/src/views/Profile.vue
index 99c448617..955b346ea 100644
--- a/packages/frontend/src/views/Profile.vue
+++ b/packages/frontend/src/views/Profile.vue
@@ -8,7 +8,7 @@
       </v-col>
       <v-col cols="12" sm="12" md="8" lg="9" xl="8" class="pt-10">
         <user-authorised-apps />
-        <v-alert type="info" class="my-5 mt-10">
+        <v-alert type="info" class="my-5 mt-10 mx-4">
           Heads up! The sections below are intended for developers.
         </v-alert>
         <v-card color="transparent" class="elevation-0 mt-3">
@@ -20,8 +20,14 @@
             </v-btn>
           </v-card-title>
         </v-card>
-        <user-access-tokens />
-        <user-apps />
+        <v-card color="transparent" flat>
+          <v-card-text>
+            <user-access-tokens />
+          </v-card-text>
+          <v-card-text>
+            <user-apps />
+          </v-card-text>
+        </v-card>
       </v-col>
     </v-row>
   </v-container>
diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index 0f1105521..6c44c9dfe 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -133,11 +133,7 @@
             </v-list-item>
           </v-list>
         </v-sheet>
-
-        <no-data-placeholder
-          v-if="!latestCommit"
-          :message="`No data here! Here's how to get started:`"
-        />
+        <no-data-placeholder v-if="!latestCommit" :message="`This branch has no commits.`" />
       </v-card>
 
       <v-card