Set predefined Viewer role when creating new project [SCI-10326]

app/javascript/vue/projects/modals/new.vue

@@ -31,12 +31,12 @@
             </div>
             <div class="mt-6" :class="{'hidden': !visible}">
               <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
-              <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
+              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" type="submit">
+            <button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole">
               {{ i18n.t('projects.index.modal_new_project.create') }}
             </button>
           </div>
@@ -63,19 +63,32 @@ export default {
   components: {
     SelectDropdown,
   },
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        [this.defaultRole] = this.userRoles.find((role) => role[1] === 'Viewer');
+      } else {
+        this.defaultRole = null;
+      }
+    }
+  },
+  mounted() {
+    this.fetchUserRoles();
+  },
   data() {
     return {
       name: '',
       visible: false,
       defaultRole: null,
       error: null,
-      disableSubmit: false
+      disableSubmit: false,
+      userRoles: []
     };
   },
   methods: {
-    submit() {
+    async submit() {
       this.disableSubmit = true;
-      axios.post(this.createUrl, {
+      await axios.post(this.createUrl, {
         project: {
           name: this.name,
           visibility: (this.visible ? 'visible' : 'hidden'),
@@ -93,6 +106,14 @@ export default {
     changeRole(role) {
       this.defaultRole = role;
     },
+    fetchUserRoles() {
+      if (this.userRolesUrl) {
+        axios.get(this.userRolesUrl)
+          .then((response) => {
+            this.userRoles = response.data.data;
+          });
+      }
+    }
   },
 };
 </script>

app/serializers/lists/project_and_folder_serializer.rb

@@ -64,6 +64,8 @@ module Lists
           count: object.comments.count,
           count_unseen: count_unseen_comments(object, @user)
         }
+      else
+        {}
       end
     end
 
@@ -96,7 +98,7 @@ module Lists
 
     def permissions
       {
-        create_comments: can_create_project_comments?(object)
+        create_comments: comment_addable?(object)
       }
     end