feat: display whether the branch is protected with an icon (only work…

…s under gitlab and github)

td.server/src/controllers/threatmodelcontroller.js

@@ -54,7 +54,11 @@ const branches = (req, res) => responseWrapper.sendResponseAsync(async () => {
     const headers = branchesResp[1];
     const pageLinks = branchesResp[2];
 
-    const branchNames = branches.map((x) => x.name);
+    const branchNames = branches.map((x) => ({
+        name: x.name,
+        // Protected branches are not so easy to determine from the API on Bitbucket
+        protected: x.protected||false
+    }));
 
     const pagination = getPagination(headers, pageLinks, repoInfo.page);
 

td.vue/src/components/AddBranchDialog.vue

@@ -8,7 +8,7 @@
         :title="modalTitle"
         visible
         centered
-        @hide="closeAddBranchDialog"
+        @hide="closeDialog"
         hide-footer
     >
         <form @submit.prevent="addBranch">
@@ -34,7 +34,7 @@
             <b-row>
                 <b-col lg="12" class="pb-2">
                     <b-form-group id="input-group-2" :label="$t('branch.refBranch')" label-for="refBranch">
-                        <b-form-select id="refBranch" v-model="refBranch" :options="branches" size="md"
+                        <b-form-select id="refBranch" v-model="refBranch" :options="branchNames" size="md"
                                        required/>
                     </b-form-group>
                 </b-col>
@@ -51,7 +51,7 @@
             >
                 <b-button variant="primary" type="submit" @click="addBranch" class="m-1">{{ $t('branch.add') }}</b-button>
             </b-overlay>
-            <b-button variant="secondary" @click="closeAddBranchDialog" class="m-1">{{ $t('branch.cancel') }}</b-button>
+            <b-button variant="secondary" @click="closeDialog" class="m-1">{{ $t('branch.cancel') }}</b-button>
         </div>
     </b-modal>
 </template>
@@ -61,7 +61,15 @@ import branchActions from '@/store/actions/branch.js';
 export default {
     name: 'AddBranchModal',
     props: {
-        branches: Array,
+        branches: {
+            type: Array,
+            validator: (value) => {
+                return value.every((branch) => {
+                    return typeof branch === 'string' || (branch.value && typeof branch.value === 'string');
+                });
+            },
+            required: true
+        }
     },
     data() {
         return {
@@ -73,25 +81,30 @@ export default {
             wait: false
         };
     },
+    computed: {
+        branchNames() {
+            return this.branches.map(branch => branch.value || branch);
+        }
+    },
     mounted() {
-        this.refBranch = this.branches.slice(-1)[0];
+        this.refBranch = this.branchNames.slice(-1)[0];
     },
     watch: {
         branches: function (newBranches) {
             if (newBranches.length > 0) {
-                this.refBranch = newBranches[0];
+                this.refBranch = this.branchNames.slice(-1)[0];
             }
         }
     },
     methods: {
-        closeAddBranchDialog() {
-            this.$emit('close-add-branch-dialog');
+        closeDialog() {
+            this.$emit('close-dialog');
         },
         validate() {
             if (this.newBranchName === '') {
                 this.branchNameError = this.$t('branch.nameRequired');
                 this.isError = false;
-            } else if (this.branches.includes(this.newBranchName)) {
+            } else if (this.branchNames.includes(this.newBranchName)) {
                 this.branchNameError = this.$t('branch.nameExists');
                 this.isError = false;
             } else {
@@ -107,17 +120,18 @@ export default {
                 return;
             }
             this.$store.dispatch(branchActions.create, {branchName: this.newBranchName, refBranch: this.refBranch});
+
             // sometimes the branch is not immediately available, so we wait for it (only for 30 seconds)
             for (let i = 0; i < 30; i++) {
                 await this.$store.dispatch(branchActions.fetch, 1);
-                if (this.branches.includes(this.newBranchName)) {
+                if (this.branchNames.includes(this.newBranchName)) {
                     break;
                 }
                 await new Promise(resolve => setTimeout(resolve, 1000));
             }
 
             this.wait = false;
-            this.closeAddBranchDialog();
+            this.closeDialog();
         }
     }
 };

td.vue/src/components/SelectionPage.vue

@@ -49,7 +49,16 @@
                         :key="idx"
                         href="javascript:void(0)"
                         @click="onItemClick(item)">
-                        {{ isGoogleProvider ? item.name : item }}
+                        <span v-if="typeof item === 'string'">{{ item }}</span>
+                        <span v-else class="d-flex justify-content-between align-items-center">
+                            {{ item.value }}
+                            <font-awesome-icon
+                                v-if="item.icon"
+                                :icon="item.icon"
+                                v-b-tooltip.hover
+                                :title="$t(item.iconTooltip) || ''"
+                            ></font-awesome-icon>
+                        </span>
                     </b-list-group-item>
                 </b-list-group>
             </b-col>
@@ -59,7 +68,7 @@
             <b-col md=6 offset=3>
                 <div class="pagination">
                     <button @click="paginate(--pageRef)" :disabled="!pagePrev">Previous</button>
-                    <button class="btn" data-toggle="buttons" :disabled="true">{{pageRef}}</button>
+                    <button class="btn" data-toggle="buttons" :disabled="true">{{ pageRef }}</button>
                     <button @click="paginate(++pageRef)" :disabled="!pageNext">Next</button>
                 </div>
             </b-col>
@@ -91,7 +100,15 @@ export default {
             default: ''
         },
         items: {
-            required: true
+            required: true,
+            type: Array,
+            validator: (value) => {
+                return value.every((item) => {
+                    return typeof item === 'string' || (item.value && typeof item.value === 'string')
+                        && (!item.icon || typeof item.icon === 'string')
+                        && (!item.iconTooltip || (typeof item.iconTooltip === 'string' && item.icon));
+                });
+            }
         },
         page: {
             required: false,
@@ -123,7 +140,8 @@ export default {
         onEmptyStateClick: {
             required: false,
             type: Function,
-            default: () => {}
+            default: () => {
+            }
         },
         showBackItem: {
             required: false,
@@ -133,7 +151,8 @@ export default {
         onBackClick: {
             required: false,
             type: Function,
-            default: () => {}
+            default: () => {
+            }
         },
         isGoogleProvider: {
             required: false,
@@ -143,11 +162,14 @@ export default {
     },
     computed: {
         displayedItems: function () {
-            if (!this.filter) { return this.items; }
+            if (!this.filter) {
+                return this.items;
+            }
             if (this.$props.isGoogleProvider) {
                 return this.items.filter(x => x.name.toLowerCase().includes(this.filter.toLowerCase()));
             } else {
-                return this.items.filter(x => x.toLowerCase().includes(this.filter.toLowerCase()));
+                console.log(this.items);
+                return this.items.filter(x => (x.value || x).toLowerCase().includes(this.filter.toLowerCase()));
             }
         }
     }

td.vue/src/i18n/ar.js

@@ -85,6 +85,7 @@ const ara = {
         from: 'من القائمة أدناه أو',
         or: 'أو',
         chooseRepo: 'اختيار مستودع آخر',
+        protectedBranch: 'فرع محمي',
         nameRequired: 'اسم الفرع مطلوب',
         nameExists: 'اسم الفرع موجود بالفعل',
         refBranch: 'الفرع المرجعي',

td.vue/src/i18n/de.js

@@ -86,6 +86,7 @@ const deu = {
         chooseRepo: 'ein anderes Repository auswählen',
         or: 'oder',
         addNew: 'füge einen neuen Branch hinzu',
+        protectedBranch: 'Geschützter Branch',
         nameRequired: 'Branch Name ist erforderlich',
         nameExists: 'Branch Name existiert bereits',
         refBranch: 'Referenz Branch',

td.vue/src/i18n/el.js

@@ -86,6 +86,7 @@ const ell = {
         chooseRepo: 'επιλέξτε ένα άλλο αποθετήριο',
         or: 'ή',
         addNew: 'να προσθέσετε έναν νέο κλάδο',
+        protectedBranch: 'Προστατευμένος κλάδος',
         nameRequired: 'Το όνομα του κλάδου είναι υποχρεωτικό',
         nameExists: 'Το όνομα του κλάδου υπάρχει ήδη σε αυτό το αποθετήριο',
         refBranch: 'Κλάδος αναφοράς (Ref Branch)',

td.vue/src/i18n/en.js

@@ -86,6 +86,7 @@ const eng = {
         chooseRepo: 'choose another repo',
         or: 'or',
         addNew: 'add a new branch',
+        protectedBranch: 'Protected branch',
         refBranch: 'Reference branch',
         nameRequired: 'Branch name is required',
         nameExists: 'Branch name already exists',

td.vue/src/i18n/es.js

@@ -85,6 +85,7 @@ const spa = {
         from: 'de la lista a continuación o',
         chooseRepo: 'elija otro repositorio',
         addNew: 'o añadir una nueva rama',
+        protectedBranch: 'Rama protegida',
         nameRequired: 'El nombre de la rama es obligatorio',
         nameExists: 'El nombre de la rama ya existe',
         refBranch: 'Rama de referencia',

td.vue/src/i18n/fi.js

@@ -86,6 +86,7 @@ const fin = {
         chooseRepo: 'valitse toinen arkisto',
         or: 'or',
         addNew: 'lisätä uusi haara',
+        protectedBranch: 'Suojattu haara',
         nameRequired: 'Haaran nimi vaaditaan',
         nameExists: 'Haara on jo olemassa',
         refBranch: 'Viitehaara',

td.vue/src/i18n/fr.js

@@ -86,6 +86,7 @@ const fra = {
         chooseRepo: 'choisir un autre projet',
         or: 'ou',
         addNew: 'ajouter une nouvelle branche',
+        protectedBranch: 'Branche protégée',
         nameRequired: 'Le nom de la branche est requis',
         nameExists: 'Le nom de la branche existe déjà',
         refBranch: 'branche de référence',

td.vue/src/i18n/hi.js

@@ -86,6 +86,7 @@ const hin = {
         chooseRepo: 'एक और रेपो चुनें',
         or: 'या',
         addNew: 'नई शाखा जोड़ें',
+        protectedBranch: 'संरक्षित शाखा',
         nameRequired: 'एक नाम आवश्यक है',
         nameExists: 'एक शाखा इस नाम से पहले ही मौजूद है',
         refBranch: 'आधार शाखा',

td.vue/src/i18n/id.js

@@ -86,6 +86,7 @@ const id = {
         chooseRepo: 'pilih repo lain',
         or: 'atau',
         addNew: 'tambahkan cabang baru',
+        protectedBranch: 'Cabang dilindungi',
         nameRequired: 'Nama cabang diperlukan',
         nameExists: 'Nama cabang sudah ada',
         refBranch: 'Cabang Referensi',

td.vue/src/i18n/ja.js

@@ -82,6 +82,7 @@ const jpn = {
         chooseRepo: 'リポジトリの切り替え',
         or: 'または',
         addNew: '新しいブランチを追加します。',
+        protectedBranch: '保護されたブランチ',
         nameRequired: 'ブランチ名が必要です。',
         nameExists: 'ブランチ名が既に存在します。',
         refBranch: 'リファレンスブランチ',

td.vue/src/i18n/ms.js

@@ -86,6 +86,7 @@ const ms = {
         chooseRepo: 'pilih repo lain',
         or: 'atau',
         addNew: 'tambah cawangan baru',
+        protectedBranch: 'Cawangan Dilindungi',
         nameRequired: 'Nama cawangan diperlukan',
         nameExists: 'Nama cawangan sudah wujud',
         refBranch: 'Cawangan Rujukan',

td.vue/src/i18n/pt.js

@@ -86,6 +86,7 @@ const por = {
         chooseRepo: 'escolher outro repositório',
         or: 'ou',
         addNew: 'adicionar um novo branch',
+        protectedBranch: 'Branch protegida',
         nameRequired: 'Nome da branch é obrigatório',
         nameExists: 'Nome da branch já existe',
         refBranch: 'Branch de referência',

td.vue/src/i18n/ru.js

@@ -86,6 +86,7 @@ const rus = {
         chooseRepo: 'choose another repo',
         or: 'or',
         addNew: 'add a new branch',
+        protectedBranch: 'Protected branch',
         nameRequired: 'Branch name is required',
         nameExists: 'Branch name already exists',
         refBranch: 'Reference branch',

td.vue/src/i18n/uk.js

@@ -86,6 +86,7 @@ const ukr = {
         chooseRepo: 'choose another repo',
         or: 'or',
         addNew: 'add a new branch',
+        protectedBranch: 'Protected branch',
         nameRequired: 'Branch name is required',
         nameExists: 'Branch name already exists',
         refBranch: 'Reference branch',

td.vue/src/i18n/zh.js

@@ -86,6 +86,7 @@ const zho = {
         chooseRepo: '选择另一个源',
         or: '或者',
         addNew: '添加新分支',
+        protectedBranch: '受保护的分支',
         nameRequired: '分支名称是必需的',
         nameExists: '分支名称已存在',
         refBranch: '参考分支',

td.vue/src/plugins/fontawesome-vue.js

@@ -31,10 +31,10 @@ import {
     faPrint,
     faProjectDiagram,
     faDiagramProject,
+    faLock
 } from '@fortawesome/free-solid-svg-icons';
 
 import {faBitbucket, faGithub, faGitlab, faVuejs, faGoogle, faGoogleDrive} from '@fortawesome/free-brands-svg-icons';
-
 // Add icons to the library for use
 library.add(
     faSignOutAlt,
@@ -69,7 +69,8 @@ library.add(
     faProjectDiagram,
     faDiagramProject,
     faGoogle,
-    faGoogleDrive
+    faGoogleDrive,
+    faLock
 );
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);

td.vue/src/views/git/BranchAccess.vue

@@ -25,7 +25,7 @@
         <add-branch-modal
             v-if="showNewBranchDialog"
             :branches="branches"
-            @close-add-branch-dialog="toggleNewBranchDialog()"/>
+            @close-dialog="toggleNewBranchDialog()"/>
     </td-selection-page>
 </template>
 
@@ -51,7 +51,16 @@ export default {
         };
     },
     computed: mapState({
-        branches: (state) => state.branch.all,
+        branches: (state) => state.branch.all.map((branch) => {
+            if(branch['protected']){
+                return {
+                    value: branch.name,
+                    icon: 'lock',
+                    iconTooltip: 'branch.protectedBranch',
+                };
+            }
+            return branch.name;
+        }),
         provider: (state) => state.provider.selected,
         providerType: (state) => getProviderType(state.provider.selected),
         providerUri: (state) => state.provider.providerUri,