From b1714935e1ccd807aec0373ac28daf8492c58e7c Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Tue, 8 Jun 2021 19:05:56 +0100
Subject: [PATCH 1/3] feat(frontend): adds new/edit branch buttons to main
 stream page #239

---
 .../components/dialogs/BranchEditDialog.vue   | 171 +++++++++++-------
 .../components/dialogs/BranchNewDialog.vue    | 102 +++++++----
 packages/frontend/src/views/Branches.vue      |  34 ++--
 packages/frontend/src/views/Commits.vue       |  35 ++--
 packages/frontend/src/views/StreamMain.vue    |  95 +++++++++-
 5 files changed, 291 insertions(+), 146 deletions(-)

diff --git a/packages/frontend/src/components/dialogs/BranchEditDialog.vue b/packages/frontend/src/components/dialogs/BranchEditDialog.vue
index 311070322..4cd650c4d 100644
--- a/packages/frontend/src/components/dialogs/BranchEditDialog.vue
+++ b/packages/frontend/src/components/dialogs/BranchEditDialog.vue
@@ -1,74 +1,64 @@
 <template>
-  <v-card :loading="loading">
-    <template slot="progress">
-      <v-progress-linear indeterminate></v-progress-linear>
-    </template>
-    <div v-if="branch.name !== 'main'">
-      <v-card-title>Edit Branch</v-card-title>
-      <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="updateBranch">
-        <v-card-text>
-          <v-text-field
-            v-model="name"
-            label="Name"
-            :rules="nameRules"
-            validate-on-blur
-            required
-            autofocus
-          ></v-text-field>
-          <v-textarea v-model="description" rows="2" label="Description"></v-textarea>
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" block :disabled="!valid" type="submit">Save</v-btn>
+  <v-dialog v-model="show" width="500" @keydown.esc="cancel">
+    <v-card :loading="loading" class="pa-4">
+      <template slot="progress">
+        <v-progress-linear indeterminate></v-progress-linear>
+      </template>
+      <div v-if="branch && branch.name !== 'main'">
+        <v-card-title>Edit Branch</v-card-title>
+        <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="agree">
+          <v-card-text>
+            <v-text-field
+              v-model="branch.name"
+              label="Name"
+              :rules="nameRules"
+              validate-on-blur
+              required
+              autofocus
+            ></v-text-field>
+            <v-textarea v-model="branch.description" rows="2" label="Description"></v-textarea>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text @click="cancel">Cancel</v-btn>
+            <v-btn color="primary" text :disabled="!valid" type="submit">Save</v-btn>
+          </v-card-actions>
+        </v-form>
+        <v-card-actions class="error--text body-2 pa-2">
+          <v-btn block x-small text color="error" @click="showDelete = true">Delete Branch</v-btn>
+          <v-dialog v-model="showDelete" max-width="500">
+            <v-card>
+              <v-card-title>Are you sure?</v-card-title>
+              <v-card-text>
+                You cannot undo this action. The branch
+                <b>{{ branch.name }}</b>
+                will be permanently deleted.
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn @click="showDelete = false">Cancel</v-btn>
+                <v-btn color="error" text @click="deleteBranch">Delete</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
         </v-card-actions>
-      </v-form>
-      <v-card-actions class="error--text body-2 pa-2">
-        <v-btn block x-small text color="error" @click="showDelete = true">Delete Branch</v-btn>
-        <v-dialog v-model="showDelete" max-width="500">
-          <v-card>
-            <v-card-title>Are you sure?</v-card-title>
-            <v-card-text>
-              You cannot undo this action. The branch
-              <b>{{ name }}</b>
-              will be permanently deleted.
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn @click="showDelete = false">Cancel</v-btn>
-              <v-btn color="error" text @click="deleteBranch">Delete</v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-      </v-card-actions>
-    </div>
-    <div v-else>
-      <v-card-text>You cannot edit the main branch.</v-card-text>
-    </div>
-  </v-card>
+      </div>
+      <div v-else>
+        <v-card-text>You cannot edit the main branch.</v-card-text>
+      </div>
+    </v-card>
+  </v-dialog>
 </template>
 <script>
 import gql from 'graphql-tag'
 
 export default {
-  props: {
-    streamId: {
-      type: String,
-      default: null
-    },
-    branch: {
-      type: Object,
-      default() {
-        return {
-          name: null,
-          description: null
-        }
-      }
-    }
-  },
   data() {
     return {
+      dialog: false,
+      branch: null,
       valid: true,
       loading: false,
-      name: this.branch.name,
       showDelete: false,
       nameRules: [
         (v) => !!v || 'Branches need a name too!',
@@ -78,7 +68,6 @@ export default {
         (v) => (v && v.length <= 100) || 'Name must be less than 100 characters',
         (v) => (v && v.length >= 3) || 'Name must be at least 3 characters'
       ],
-      description: this.branch.description,
       isEdit: false,
       pendingDelete: false,
       allBranchNames: []
@@ -104,13 +93,26 @@ export default {
         }
       },
       update(data) {
-        return data.stream.branches.items
-          .map((b) => b.name)
-          .filter((name) => name !== this.branch.name)
+        return data.stream.branches.items.filter((b) => b.name !== this.branch.name)
+      },
+      skip() {
+        return this.branch == null
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.dialog
+      },
+      set(value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
       }
     }
   },
-  computed: {},
   methods: {
     async deleteBranch() {
       this.loading = true
@@ -132,10 +134,27 @@ export default {
       } catch (e) {
         console.log(e)
       }
-      this.$emit('close', { deleted: true })
+
       this.loading = false
+
+      this.resolve({
+        result: true,
+        deleted: true
+      })
+      this.dialog = false
     },
-    async updateBranch() {
+    open(branch) {
+      this.dialog = true
+      if (this.$refs.form) this.$refs.form.resetValidation()
+
+      this.branch = { ...branch }
+
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    async agree() {
       if (!this.$refs.form.validate()) return
 
       this.loading = true
@@ -150,13 +169,25 @@ export default {
           params: {
             streamId: this.$route.params.streamId,
             id: this.branch.id,
-            name: this.name,
-            description: this.description
+            name: this.branch.name,
+            description: this.branch.description
           }
         }
       })
+
       this.loading = false
-      this.$emit('close', { name: this.name })
+
+      this.resolve({
+        result: true,
+        name: this.branch.name
+      })
+      this.dialog = false
+    },
+    cancel() {
+      this.resolve({
+        result: false
+      })
+      this.dialog = false
     }
   }
 }
diff --git a/packages/frontend/src/components/dialogs/BranchNewDialog.vue b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
index 27a6b48b1..5197b956a 100644
--- a/packages/frontend/src/components/dialogs/BranchNewDialog.vue
+++ b/packages/frontend/src/components/dialogs/BranchNewDialog.vue
@@ -1,44 +1,39 @@
 <template>
-  <v-card :loading="loading">
-    <template slot="progress">
-      <v-progress-linear indeterminate></v-progress-linear>
-    </template>
-    <v-card-title>New Branch</v-card-title>
-    <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="createBranch">
-      <v-card-text>
-        <v-text-field
-          v-model="name"
-          label="Name"
-          :rules="nameRules"
-          validate-on-blur
-          required
-          autofocus
-        ></v-text-field>
-        <v-textarea v-model="description" rows="2" label="Description"></v-textarea>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="primary" text :disabled="!valid" type="submit">Save</v-btn>
-      </v-card-actions>
-    </v-form>
-  </v-card>
+  <v-dialog v-model="show" width="500" @keydown.esc="cancel">
+    <v-card :loading="loading">
+      <template slot="progress">
+        <v-progress-linear indeterminate></v-progress-linear>
+      </template>
+      <v-card-title>New Branch</v-card-title>
+      <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="agree">
+        <v-card-text>
+          <v-text-field
+            v-model="name"
+            label="Name"
+            :rules="nameRules"
+            validate-on-blur
+            required
+            autofocus
+          ></v-text-field>
+          <v-textarea v-model="description" rows="2" label="Description"></v-textarea>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text :disabled="!valid" type="submit">Save</v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
 </template>
 <script>
 import gql from 'graphql-tag'
 
 export default {
-  props: {
-    streamId: {
-      type: String,
-      default: null
-    },
-    branchNames: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
     return {
+      dialog: false,
+      streamId: null,
+      branchNames: [],
       valid: false,
       loading: false,
       name: null,
@@ -58,9 +53,33 @@ export default {
       pendingDelete: false
     }
   },
-  computed: {},
+  computed: {
+    show: {
+      get() {
+        return this.dialog
+      },
+      set(value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
+      }
+    }
+  },
   methods: {
-    async createBranch() {
+    open(streamId, branchNames) {
+      this.dialog = true
+      if (this.$refs.form) this.$refs.form.resetValidation()
+
+      this.branchNames = branchNames
+      this.streamId = streamId
+
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    async agree() {
       if (!this.$refs.form.validate()) return
 
       this.loading = true
@@ -80,8 +99,19 @@ export default {
         }
       })
       this.loading = false
-      this.$emit('close')
+
+      this.resolve({
+        result: true,
+        name: this.name
+      })
+      this.dialog = false
     }
+  },
+  cancel() {
+    this.resolve({
+      result: false
+    })
+    this.dialog = false
   }
 }
 </script>
diff --git a/packages/frontend/src/views/Branches.vue b/packages/frontend/src/views/Branches.vue
index 4f736edcf..20fe2c482 100644
--- a/packages/frontend/src/views/Branches.vue
+++ b/packages/frontend/src/views/Branches.vue
@@ -5,13 +5,8 @@
         <v-skeleton-loader type="article"></v-skeleton-loader>
       </v-card>
       <v-card v-else rounded="lg" class="pa-4 mb-4" elevation="0">
-        <v-dialog v-model="dialogBranch" max-width="500">
-          <new-branch-dialog
-            :branch-names="branches.map((b) => b.name)"
-            :stream-id="$route.params.streamId"
-            @close="closeBranchDialog"
-          />
-        </v-dialog>
+        <branch-new-dialog ref="newBranchDialog" />
+
         <v-card-title>
           <v-icon class="mr-2">mdi-source-branch</v-icon>
           Branches
@@ -24,7 +19,7 @@
             text
             class="px-0"
             small
-            @click="dialogBranch = true"
+            @click="newBranch"
           >
             <v-icon small class="mr-2 float-left">mdi-plus-circle-outline</v-icon>
             New branch
@@ -71,14 +66,14 @@
   </v-row>
 </template>
 <script>
-import NewBranchDialog from '../components/dialogs/BranchNewDialog'
+import BranchNewDialog from '../components/dialogs/BranchNewDialog'
 import streamBranchesQuery from '../graphql/streamBranches.gql'
 import gql from 'graphql-tag'
 
 export default {
   name: 'StreamMain',
   components: {
-    NewBranchDialog
+    BranchNewDialog
   },
   props: {
     userRole: {
@@ -87,9 +82,7 @@ export default {
     }
   },
   data() {
-    return {
-      dialogBranch: false
-    }
+    return {}
   },
   apollo: {
     stream: {
@@ -170,9 +163,18 @@ export default {
     this.$apollo.queries.stream.refetch()
   },
   methods: {
-    closeBranchDialog() {
-      this.dialogBranch = false
-      this.$apollo.queries.stream.refetch()
+    newBranch() {
+      this.$refs.newBranchDialog
+        .open(
+          this.$route.params.streamId,
+          this.branches.map((b) => b.name)
+        )
+        .then((dialog) => {
+          if (!dialog.result) return
+          else {
+            this.$apollo.queries.stream.refetch()
+          }
+        })
     }
   }
 }
diff --git a/packages/frontend/src/views/Commits.vue b/packages/frontend/src/views/Commits.vue
index 620df2d85..05cc99d63 100644
--- a/packages/frontend/src/views/Commits.vue
+++ b/packages/frontend/src/views/Commits.vue
@@ -6,9 +6,8 @@
       </v-col>
       <v-col v-else-if="stream.branch" cols="12">
         <v-card class="pa-4" elevation="0" rounded="lg">
-          <v-dialog v-model="dialogEdit" max-width="500">
-            <branch-edit-dialog :branch="stream.branch" @close="closeEdit" />
-          </v-dialog>
+          <branch-edit-dialog ref="editBranchDialog" />
+
           <v-card-title class="mr-8">
             <v-icon class="mr-2">mdi-source-branch</v-icon>
             <span class="d-inline-block">{{ stream.branch.name }}</span>
@@ -20,7 +19,7 @@
               color="primary"
               text
               class="px-0"
-              @click="dialogEdit = true"
+              @click="editBranch"
             >
               <v-icon small class="mr-2 float-left">mdi-cog-outline</v-icon>
               Edit branch
@@ -144,19 +143,21 @@ export default {
     }
   },
   methods: {
-    closeEdit({ name, deleted }) {
-      this.dialogEdit = false
-      if (deleted) {
-        this.$router.push({ path: `/streams/${this.streamId}` })
-        return
-      }
-      if (name !== this.$route.params.branchName) {
-        this.$router.push({
-          path: `/streams/${this.streamId}/branches/${encodeURIComponent(name)}/commits`
-        })
-        return
-      }
-      this.$apollo.queries.stream.refetch()
+    editBranch() {
+      this.$refs.editBranchDialog.open(this.stream.branch).then((dialog) => {
+        if (!dialog.result) return
+        else if (dialog.deleted) {
+          this.$router.push({ path: `/streams/${this.streamId}` })
+        } else if (dialog.name !== this.$route.params.branchName) {
+          //this.$router.push does not work, refresh entire window
+
+          this.$router.push({
+            path: `/streams/${this.streamId}/branches/${encodeURIComponent(dialog.name)}/commits`
+          })
+        } else {
+          this.$apollo.queries.stream.refetch()
+        }
+      })
     }
   }
 }
diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index eca036bdb..18d64a4d3 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -43,6 +43,49 @@
             <v-icon class="mr-2 float-left">mdi-source-branch</v-icon>
             {{ branches.length }} branch{{ branches.length > 1 ? 'es' : '' }}
           </v-btn>
+
+          <!-- DIALOGS -->
+          <branch-new-dialog ref="newBranchDialog" />
+          <branch-edit-dialog ref="editBranchDialog" />
+
+          <!-- MENU -->
+
+          <v-menu
+            v-if="userRole === 'contributor' || userRole === 'owner'"
+            offset-y
+            class="mx-2 mb-5"
+          >
+            <template #activator="{ on, attrs }">
+              <v-btn
+                style="position: absolute; top: 36px; right: 20px"
+                color="primary"
+                v-bind="attrs"
+                icon
+                v-on="on"
+              >
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="newBranch">
+                <v-list-item-action class="mr-2">
+                  <v-icon>mdi-plus-circle-outline</v-icon>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>New branch</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+
+              <v-list-item v-if="selectedBranch" @click="editBranch">
+                <v-list-item-action class="mr-2">
+                  <v-icon>mdi-cog-outline</v-icon>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>Edit {{ selectedBranch.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </v-sheet>
 
         <div v-if="latestCommit" style="height: 50vh">
@@ -152,7 +195,7 @@
           />
         </v-dialog>
         <v-card-title>
-          Description
+          Stream Description
           <v-spacer />
           <v-btn
             v-if="userRole === 'owner'"
@@ -193,6 +236,8 @@ import streamBranchesQuery from '../graphql/streamBranches.gql'
 import Renderer from '../components/Renderer'
 import UserAvatar from '../components/UserAvatar'
 import ErrorBlock from '../components/ErrorBlock'
+import BranchNewDialog from '../components/dialogs/BranchNewDialog'
+import BranchEditDialog from '../components/dialogs/BranchEditDialog'
 
 export default {
   name: 'StreamMain',
@@ -202,7 +247,9 @@ export default {
     SourceAppAvatar,
     NoDataPlaceholder,
     Renderer,
-    ErrorBlock
+    ErrorBlock,
+    BranchNewDialog,
+    BranchEditDialog
   },
   props: {
     userRole: {
@@ -213,10 +260,11 @@ export default {
   data() {
     return {
       dialogDescription: false,
-      dialogBranch: false,
       selectedBranch: null,
       clearRendererTrigger: 0,
-      error: ''
+      error: '',
+      dialogBranchNew: false,
+      dialogBranchEdit: false
     }
   },
   apollo: {
@@ -337,9 +385,42 @@ export default {
       this.dialogDescription = false
       this.$apollo.queries.description.refetch()
     },
-    closeBranchDialog() {
-      this.dialogBranch = false
-      this.$apollo.queries.branches.refetch()
+    editBranch() {
+      this.$refs.editBranchDialog.open(this.selectedBranch).then((dialog) => {
+        if (!dialog.result) return
+        else if (dialog.deleted) {
+          this.$router.push({ path: `/streams/${this.$route.params.streamId}` })
+        } else if (dialog.name !== this.selectedBranch.name) {
+          //this.$router.push does not work, refresh entire window
+          window.location =
+            window.origin +
+            '/streams/' +
+            this.$route.params.streamId +
+            '/branches/' +
+            encodeURIComponent(dialog.name)
+        } else {
+          this.$apollo.queries.branches.refetch()
+        }
+      })
+    },
+    newBranch() {
+      this.$refs.newBranchDialog
+        .open(
+          this.$route.params.streamId,
+          this.branches.map((b) => b.name)
+        )
+        .then((dialog) => {
+          if (!dialog.result) return
+          else {
+            //this.$router.push does not work, refresh entire window
+            window.location =
+              window.origin +
+              '/streams/' +
+              this.$route.params.streamId +
+              '/branches/' +
+              encodeURIComponent(dialog.name)
+          }
+        })
     },
     selectBranch() {
       if (!this.branches) return

From ad3c2b2261ddf6e57dbc8ea195d358eb4ed62ffc Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Tue, 8 Jun 2021 19:09:46 +0100
Subject: [PATCH 2/3] feat(frontend): hides 'edit branch' when on main

---
 packages/frontend/src/views/StreamMain.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index 18d64a4d3..299f54c4e 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -76,7 +76,10 @@
                 </v-list-item-content>
               </v-list-item>
 
-              <v-list-item v-if="selectedBranch" @click="editBranch">
+              <v-list-item
+                v-if="selectedBranch && selectedBranch.name != 'main'"
+                @click="editBranch"
+              >
                 <v-list-item-action class="mr-2">
                   <v-icon>mdi-cog-outline</v-icon>
                 </v-list-item-action>

From b8b9d2065a54c1cd11849fd3d09bec1ca1b01c28 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Wed, 9 Jun 2021 10:26:04 +0100
Subject: [PATCH 3/3] feat(frontend): adds info box when last commit not on
 main

---
 packages/frontend/src/views/StreamMain.vue | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/frontend/src/views/StreamMain.vue b/packages/frontend/src/views/StreamMain.vue
index 299f54c4e..c4221a66c 100644
--- a/packages/frontend/src/views/StreamMain.vue
+++ b/packages/frontend/src/views/StreamMain.vue
@@ -89,6 +89,36 @@
               </v-list-item>
             </v-list>
           </v-menu>
+          <div
+            v-if="
+              stream &&
+              stream.commit &&
+              stream.commit.branchName != 'main' &&
+              stream.commit.branchName != selectedBranch.name
+            "
+            class="pb-2 caption"
+          >
+            <v-alert color="primary" class="caption" dense text type="info">
+              The last commit of this stream is on the
+              <v-btn
+                text
+                x-small
+                color="primary darken-1"
+                :to="'/streams/' + $route.params.streamId + '/branches/' + stream.commit.branchName"
+              >
+                {{ stream.commit.branchName }}
+              </v-btn>
+              branch, see
+              <v-btn
+                x-small
+                text
+                color="primary  darken-1"
+                :to="'/streams/' + $route.params.streamId + '/commits/' + stream.commit.id"
+              >
+                {{ stream.commit.message }}
+              </v-btn>
+            </v-alert>
+          </div>
         </v-sheet>
 
         <div v-if="latestCommit" style="height: 50vh">
@@ -298,6 +328,26 @@ export default {
       },
       update: (data) => data.stream.description
     },
+    stream: {
+      query: gql`
+        query($id: String!) {
+          stream(id: $id) {
+            id
+            commit {
+              branchName
+              id
+              message
+            }
+          }
+        }
+      `,
+      variables() {
+        return {
+          id: this.$route.params.streamId
+        }
+      }
+      //update: (data) => data.stream.description
+    },
     $subscribe: {
       branchCreated: {
         query: gql`