feat(frontend/subs): adds subs for variuos operations + UI notifications for stream created and commit created

packages/frontend/src/views/Branches.vue

@@ -46,9 +46,7 @@
             <template v-for="item in branches.items">
               <v-list-item
                 :key="item.id"
-                :to="`/streams/${$route.params.streamId}/branches/${encodeURIComponent(
-                  item.name
-                )}`"
+                :to="`/streams/${$route.params.streamId}/branches/${encodeURIComponent(item.name)}`"
               >
                 <v-list-item-content>
                   <v-list-item-title>
@@ -75,6 +73,7 @@
 <script>
 import NewBranchDialog from '../components/dialogs/BranchNewDialog'
 import streamBranchesQuery from '../graphql/streamBranches.gql'
+import gql from 'graphql-tag'
 
 export default {
   name: 'StreamMain',
@@ -103,6 +102,38 @@ export default {
       update(data) {
         return data.stream
       }
+    },
+    $subscribe: {
+      branchCreated: {
+        query: gql`
+          subscription($streamId: String!) {
+            branchCreated(streamId: $streamId)
+          }
+        `,
+        variables() {
+          return {
+            streamId: this.$route.params.streamId
+          }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      },
+      branchDeleted: {
+        query: gql`
+          subscription($streamId: String!) {
+            branchDeleted(streamId: $streamId)
+          }
+        `,
+        variables() {
+          return {
+            streamId: this.$route.params.streamId
+          }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      }
     }
   },
   computed: {

packages/frontend/src/views/Commits.vue

@@ -89,10 +89,27 @@ export default {
       query: branchQuery,
       variables() {
         return {
-          streamId: this.$route.params.streamId,
+          streamId: this.streamId,
           branchName: this.$route.params.branchName
         }
       }
+    },
+    $subscribe: {
+      commitCreated: {
+        query: gql`
+          subscription($streamId: String!) {
+            commitCreated(streamId: $streamId)
+          }
+        `,
+        variables() {
+          return {
+            streamId: this.streamId
+          }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      }
     }
   },
   computed: {
@@ -135,36 +152,11 @@ export default {
       }
       if (name !== this.$route.params.branchName) {
         this.$router.push({
-          path: `/streams/${this.streamId}/branches/${encodeURIComponent(name)}`
+          path: `/streams/${this.streamId}/branches/${encodeURIComponent(name)}/commits`
         })
         return
       }
       this.$apollo.queries.stream.refetch()
-    },
-    editBranch() {
-      this.$refs.commitDialog.open(this.stream.commit, this.stream.id).then((dialog) => {
-        if (!dialog.result) return
-
-        this.$matomo && this.$matomo.trackPageView('branch/update')
-        this.$apollo
-          .mutate({
-            mutation: gql`
-              mutation commitUpdate($myCommit: CommitUpdateInput!) {
-                commitUpdate(commit: $myCommit)
-              }
-            `,
-            variables: {
-              myCommit: { ...dialog.commit }
-            }
-          })
-          .then((data) => {
-            this.$apollo.queries.stream.refetch()
-          })
-          .catch((error) => {
-            // Error
-            console.error(error)
-          })
-      })
     }
   }
 }

packages/frontend/src/views/Frontend.vue

@@ -69,6 +69,24 @@
     </v-app-bar>
     <v-main :style="background">
       <router-view></router-view>
+      <v-snackbar v-model="streamSnackbar" :timeout="5000" color="primary" absolute right top>
+        New stream
+        <i v-if="streamSnackbarInfo.name">{{ streamSnackbarInfo.name }}</i>
+        <span v-else>available</span>
+        <template #action="{ attrs }">
+          <v-btn
+            text
+            v-bind="attrs"
+            :to="'/streams/' + streamSnackbarInfo.id"
+            @click="streamSnackbar = false"
+          >
+            see
+          </v-btn>
+          <v-btn icon v-bind="attrs" @click="streamSnackbar = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </template>
+      </v-snackbar>
     </v-main>
   </v-app>
 </template>
@@ -84,6 +102,8 @@ export default {
     return {
       loggedIn: null,
       search: '',
+      streamSnackbar: false,
+      streamSnackbarInfo: {},
       showMobileMenu: false,
       streams: { items: [] },
       selectedSearchResult: null
@@ -109,6 +129,20 @@ export default {
     },
     user: {
       query: userQuery
+    },
+
+    $subscribe: {
+      userStreamAdded: {
+        query: gql`
+          subscription {
+            userStreamAdded
+          }
+        `,
+        result(streamInfo) {
+          this.streamSnackbar = true
+          this.streamSnackbarInfo = streamInfo.data.userStreamAdded
+        }
+      }
     }
   },
   computed: {

packages/frontend/src/views/Stream.vue

@@ -13,6 +13,25 @@
         <error-block :message="error" />
       </v-col>
     </v-row>
+    <v-snackbar v-model="commitSnackbar" :timeout="5000" color="primary" absolute right top>
+      New commit
+      <i>{{ commitSnackbarInfo.message }}</i>
+      on
+      <i>{{ commitSnackbarInfo.branchName }}</i>
+      <template #action="{ attrs }">
+        <v-btn
+          text
+          v-bind="attrs"
+          :to="'/streams/' + $route.params.streamId + '/commits/' + commitSnackbarInfo.id"
+          @click="commitSnackbar = false"
+        >
+          see
+        </v-btn>
+        <v-btn icon v-bind="attrs" @click="commitSnackbar = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
     <stream-invite-dialog v-if="stream" :show="inviteDialog" :stream-id="stream.id" />
   </v-container>
 </template>
@@ -21,6 +40,7 @@ import SidebarStream from '../components/SidebarStream'
 import ErrorBlock from '../components/ErrorBlock'
 import streamQuery from '../graphql/stream.gql'
 import StreamInviteDialog from '../components/dialogs/StreamInviteDialog'
+import gql from 'graphql-tag'
 
 export default {
   name: 'Stream',
@@ -32,6 +52,8 @@ export default {
   data() {
     return {
       error: '',
+      commitSnackbar: false,
+      commitSnackbarInfo: {},
       inviteDialog: 1,
       shouldOpenInvite: false
     }
@@ -47,6 +69,39 @@ export default {
       error(err) {
         this.error = err.message.replace('GraphQL error: ', '')
       }
+    },
+    $subscribe: {
+      streamUpdated: {
+        query: gql`
+          subscription($id: String!) {
+            streamUpdated(streamId: $id)
+          }
+        `,
+        variables() {
+          return {
+            id: this.$route.params.streamId
+          }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      },
+      commitCreated: {
+        query: gql`
+          subscription($streamId: String!) {
+            commitCreated(streamId: $streamId)
+          }
+        `,
+        variables() {
+          return {
+            streamId: this.$route.params.streamId
+          }
+        },
+        result(commitInfo) {
+          this.commitSnackbar = true
+          this.commitSnackbarInfo = commitInfo.data.commitCreated
+        }
+      }
     }
   },
   computed: {

packages/frontend/src/views/StreamMain.vue

@@ -5,10 +5,7 @@
         <v-skeleton-loader type="card-heading, card-avatar, article"></v-skeleton-loader>
       </v-card>
       <v-card v-else class="mb-4 transparent" rounded="lg" elevation="0">
-        <v-sheet
-          class="px-5 pt-5 align-center justify-center"
-          :class="latestCommit ? '' : 'rounded-b-lg'"
-        >
+        <v-sheet class="px-5 pt-5 align-center justify-center">
           <v-select
             v-if="branches"
             v-model="selectedBranch"
@@ -52,9 +49,9 @@
           <renderer :object-url="latestCommitObjectUrl" :unload-trigger="clearRendererTrigger" />
         </div>
 
-        <v-sheet v-if="latestCommit">
+        <v-sheet :class="latestCommit ? '' : 'rounded-b-lg'">
           <!-- LAST COMMIT -->
-          <v-list two-line class="pa-0">
+          <v-list v-if="latestCommit" two-line class="pa-0">
             <v-list-item :to="'/streams/' + $route.params.streamId + '/commits/' + latestCommit.id">
               <v-list-item-icon>
                 <user-avatar
@@ -110,6 +107,7 @@
               </v-list-item>
               <v-divider />
             </div>
+            <v-divider v-if="!latestCommit" />
             <v-list-item>
               <v-list-item-content>
                 <v-btn
@@ -125,10 +123,7 @@
                   "
                 >
                   <v-icon class="mr-2 float-left">mdi-source-commit</v-icon>
-                  SEE {{ selectedBranch.commits.totalCount > 1 ? 'ALL' : '' }}
-                  {{ selectedBranch.commits.totalCount }} commit{{
-                    selectedBranch.commits.totalCount === 1 ? '' : 's'
-                  }}
+                  {{ commitsPageText }}
                 </v-btn>
               </v-list-item-content>
             </v-list-item>
@@ -251,9 +246,49 @@ export default {
         }
       },
       update: (data) => data.stream.description
+    },
+    $subscribe: {
+      branchCreated: {
+        query: gql`
+          subscription($streamId: String!) {
+            branchCreated(streamId: $streamId)
+          }
+        `,
+        variables() {
+          return {
+            streamId: this.$route.params.streamId
+          }
+        },
+        result() {
+          this.$apollo.queries.branches.refetch()
+        }
+      },
+      branchDeleted: {
+        query: gql`
+          subscription($streamId: String!) {
+            branchDeleted(streamId: $streamId)
+          }
+        `,
+        variables() {
+          return {
+            streamId: this.$route.params.streamId
+          }
+        },
+        result() {
+          this.$apollo.queries.branches.refetch()
+        }
+      }
     }
   },
   computed: {
+    commitsPageText() {
+      if (this.selectedBranch.commits.totalCount > 1)
+        return `SEE ALL ${this.selectedBranch.commits.totalCount} COMMITS`
+
+      if (this.selectedBranch.commits.totalCount === 1) return `SEE 1 COMMIT`
+
+      return `SEE BRANCH DETAILS`
+    },
     branchNames() {
       if (!this.branches) return []
       return this.branches.items.map((b) => b.name)

packages/frontend/src/views/Streams.vue

@@ -127,6 +127,7 @@ import UserAvatar from '../components/UserAvatar'
 import streamsQuery from '../graphql/streams.gql'
 import userQuery from '../graphql/user.gql'
 import InfiniteLoading from 'vue-infinite-loading'
+import gql from 'graphql-tag'
 
 export default {
   name: 'Streams',
@@ -139,6 +140,28 @@ export default {
     },
     user: {
       query: userQuery
+    },
+    $subscribe: {
+      userStreamAdded: {
+        query: gql`
+          subscription {
+            userStreamAdded
+          }
+        `,
+        result() {
+          this.$apollo.queries.streams.refetch()
+        }
+      },
+      userStreamRemoved: {
+        query: gql`
+          subscription {
+            userStreamRemoved
+          }
+        `,
+        result() {
+          this.$apollo.queries.streams.refetch()
+        }
+      }
     }
   },
   data: () => ({