clean up formatting in vue templates

app/assets/javascripts/boards/components/board_form.vue

 <template>
-        <!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) -->
   <popup-dialog
     v-show="currentPage"
     :title="title"
@@ -9,7 +8,7 @@
     @toggle="cancel"
     @submit="submit"
   >
-    <p v-if="currentPage === 'delete'">
+    <p v-if="isDeleteForm">
       Are you sure you want to delete this board?
     </p>
     <form
@@ -20,7 +19,10 @@
         v-if="!readonly"
         class="append-bottom-20"
       >
-        <label class="form-section-title label-light" for="board-new-name">
+        <label
+          class="form-section-title label-light"
+          for="board-new-name"
+        >
           Board name
         </label>
         <input
@@ -48,13 +50,11 @@
             {{ expandButtonText }}
           </button>
         </div>
-        <div v-if="!collapseScope || expanded">
         <p class="light append-bottom-10">
           Board scope affects which issues are displayed for anyone who visits this board
         </p>
-
-          <form-block
-          >
+        <div v-if="!collapseScope || expanded">
+          <form-block>
             <div
               v-if="board.milestone"
               slot="currentValue"
@@ -66,7 +66,7 @@
               :milestone-path="milestonePath"
               v-model="board.milestone_id"
               title="Milestone"
-              defaultText="Any milestone"
+              default-text="Any milestone"
               :can-edit="canAdminBoard"
             />
           </form-block>
@@ -98,18 +98,13 @@
             />
           </form-block>
 
-          <form-block
-            title="Weight"
-            defaultText="Any weight"
-            field-name="'board_filter[weight]'"
-            :can-edit="canAdminBoard"
-          >
+          <form-block>
             <board-weight-select
               :board="board"
               :weights="weightsArray"
               v-model="board.weight"
               title="Weight"
-              defaultText="Any weight"
+              default-text="Any weight"
               :can-edit="canAdminBoard"
             />
           </form-block>
@@ -198,29 +193,38 @@ export default Vue.extend({
     UserSelect,
   },
   computed: {
+    isNewForm() {
+      return this.currentPage === 'new';
+    },
+    isDeleteForm() {
+      return this.currentPage === 'delete';
+    },
+    isEditForm() {
+      return this.currentPage === 'edit';
+    },
     buttonText() {
-      if (this.currentPage === 'new') {
+      if (this.isNewForm) {
         return 'Create';
       }
 
-      if (this.currentPage === 'delete') {
+      if (this.isDeleteForm) {
         return 'Delete';
       }
 
       return 'Save';
     },
     buttonKind() {
-      if (this.currentPage === 'delete') {
+      if (this.isDeleteForm) {
         return 'danger';
       }
       return 'info';
     },
     title() {
-      if (this.currentPage === 'new') {
+      if (this.isNewForm) {
         return 'Create new board';
       }
 
-      if (this.currentPage === 'delete') {
+      if (this.isDeleteForm) {
         return 'Delete board';
       }
 
@@ -237,7 +241,7 @@ export default Vue.extend({
       return this.expanded ? 'Collapse' : 'Expand';
     },
     collapseScope() {
-      return this.currentPage === 'new';
+      return this.isNewForm;
     },
     readonly() {
       return !this.canAdminBoard;
@@ -248,10 +252,10 @@ export default Vue.extend({
   },
   methods: {
     submit() {
-      if (this.currentPage === 'delete') {
+      if (this.isDeleteForm) {
         this.submitDisabled = true;
         this.$http.delete(this.boardPath)
-          .then(({redirect_to}) => {
+          .then(() => {
             gl.utils.visitUrl(Store.rootPath);
           })
           .catch(() => {
@@ -272,17 +276,21 @@ export default Vue.extend({
     cancel() {
       Store.state.currentPage = '';
     },
-  },
-  mounted() {
-    if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
+    resetFormState() {
+      if (this.currentBoard && Object.keys(this.currentBoard).length && this.isEditForm) {
         Store.updateBoardConfig(this.currentBoard);
-    } else {
+      } else if (this.isNewForm) {
+        // Clear the form when we open the "New board" modal
         Store.updateBoardConfig();
       }
 
       if (!this.board.labels) {
         this.board.labels = [];
       }
+    },
+  },
+  mounted() {
+    this.resetFormState();
 
     if (this.$refs.name) {
       this.$refs.name.focus();

app/assets/javascripts/boards/components/labels_select.vue

@@ -2,7 +2,6 @@
   <div class="block labels">
     <div class="title append-bottom-10">
       Labels
-      <i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" data-hidden="true" style="display: none;"></i>
       <a
         v-if="canEdit"
         class="edit-link pull-right"
@@ -12,7 +11,10 @@
       </a>
     </div>
     <div class="value issuable-show-labels">
-      <span v-if="board.labels.length === 0" class="no-value">
+      <span
+        v-if="board.labels.length === 0"
+        class="no-value"
+      >
         Any label
       </span>
       <a
@@ -22,15 +24,20 @@
       >
         <span
           class="label color-label has-tooltip"
-          :style="`background-color: ${label.color}; color: ${label.textColor};`"
+          :style="`
+            background-color: ${label.color};
+            color: ${label.textColor};
+          `"
           title=""
         >
           {{ label.title }}
         </span>
       </a>
     </div>
-    <div class="selectbox" style="display: none">
-
+    <div
+      class="selectbox"
+      style="display: none"
+    >
       <input
         type="hidden"
         name="label_id[]"
@@ -38,34 +45,46 @@
         :key="labelId"
         :value="labelId"
       >
-
       <div class="dropdown">
         <button
+          v-bind:data-labels="labelsPath"
           class="dropdown-menu-toggle wide js-label-select js-multiselect js-board-config-modal"
           data-field-name="label_id[]"
-          v-bind:data-labels="labelsPath"
           data-toggle="dropdown"
           type="button"
         >
           <span class="dropdown-toggle-text">
             Label
-          </span> <i aria-hidden="true" class="fa fa-chevron-down" data-hidden="true"></i>
+          </span>
+          <i
+            aria-hidden="true"
+            class="fa fa-chevron-down"
+            data-hidden="true"
+          />
         </button>
         <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
           <div class="dropdown-input">
             <input
               autocomplete="off"
-              class="dropdown-input-field" id=""
+              class="dropdown-input-field"
               placeholder="Search"
               type="search"
-              value=""
             >
-            <i aria-hidden="true" class="fa fa-search dropdown-input-search" data-hidden="true"></i>
-            <i aria-hidden="true" class="fa fa-times dropdown-input-clear js-dropdown-input-clear" data-hidden="true" role="button"></i>
+            <i
+              aria-hidden="true"
+              class="fa fa-search dropdown-input-search"
+              data-hidden="true"
+            />
+            <i
+              aria-hidden="true"
+              class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+              data-hidden="true"
+              role="button"
+            />
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading">
-            <i aria-hidden="true" class="fa fa-spinner fa-spin" data-hidden="true"></i>
+            <loading-icon />
           </div>
         </div>
       </div>
@@ -111,12 +130,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      isOpen: false,
-      loading: true,
-    };
-  },
   components: {
     loadingIcon,
   },
@@ -125,17 +138,6 @@ export default {
       return this.selected.map(label => label.id).join(',');
     },
   },
-  methods: {
-    open() {
-      this.isOpen = true;
-    },
-    close() {
-      this.isOpen = false;
-    },
-    toggle() {
-      this.isOpen = !this.isOpen;
-    },
-  },
   mounted() {
     new LabelsSelect();
   },

app/assets/javascripts/boards/components/user_select.vue

 <template>
-  <div class="block" :class="wrapperClass">
+  <div
+    class="block"
+    :class="wrapperClass"
+  >
     <div class="title append-bottom-10">
       {{ label }}
       <a
@@ -25,7 +28,6 @@
           <div class="bold author">
             {{ selected.name }}
           </div>
-
           <div class="username">
             @{{ selected.username }}
           </div>
@@ -36,8 +38,10 @@
       </div>
     </div>
 
-    <div class="selectbox" style="display: none">
-
+    <div
+      class="selectbox"
+      style="display: none"
+    >
       <div class="dropdown">
         <button
           class="dropdown-menu-toggle wide js-user-search js-author-search js-save-user-data js-board-config-modal"
@@ -55,23 +59,36 @@
         >
           <span class="dropdown-toggle-text">
             {{ placeholderText }}
-          </span> <i aria-hidden="true" class="fa fa-chevron-down" data-hidden="true"></i>
+          </span>
+          <i
+            aria-hidden="true"
+            class="fa fa-chevron-down"
+            data-hidden="true"
+          />
         </button>
         <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
           <div class="dropdown-input">
             <input
               autocomplete="off"
-              class="dropdown-input-field" id=""
+              class="dropdown-input-field"
               placeholder="Search"
               type="search"
-              value=""
             >
-            <i aria-hidden="true" class="fa fa-search dropdown-input-search" data-hidden="true"></i>
-            <i aria-hidden="true" class="fa fa-times dropdown-input-clear js-dropdown-input-clear" data-hidden="true" role="button"></i>
+            <i
+              aria-hidden="true"
+              class="fa fa-search dropdown-input-search"
+              data-hidden="true"
+            />
+            <i
+              aria-hidden="true"
+              class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+              data-hidden="true"
+              role="button"
+            />
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading">
-            <i aria-hidden="true" class="fa fa-spinner fa-spin" data-hidden="true"></i>
+            <loading-icon />
           </div>
         </div>
       </div>
@@ -81,6 +98,7 @@
 
 <script>
 import UsersSelect from '~/users_select';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
 export default {
@@ -134,6 +152,7 @@ export default {
     },
   },
   components: {
+    loadingIcon,
     UserAvatarImage,
   },
   computed: {

app/assets/javascripts/boards/components/weight_select.vue

@@ -37,7 +37,8 @@
             @click.prevent.stop="selectWeight(weight)">
             <i
               class="fa fa-check"
-              v-if="weight === value"></i>
+              v-if="weight === value"
+            />
             {{ weight }}
           </a>
         </li>
@@ -62,7 +63,7 @@ export default {
       required: true,
     },
     value: {
-      type: Number,
+      type: [Number, String],
       required: false,
     },
     defaultText: {
@@ -94,7 +95,7 @@ export default {
   computed: {
     weight() {
       if (parseInt(this.board.weight, 10) === 0) {
-        return 'No weight';
+        return 'No Weight';
       }
       return this.board.weight || 'Any weight';
     },

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

@@ -39,7 +39,7 @@ class FilteredSearchVisualTokens {
 
   static createVisualTokenElementHTML(canEdit = true) {
     return `
-      <div class="selectable" role="button" ${canEdit ? '' : 'style="display: none;"'}>
+      <div class="selectable ${canEdit ? '' : 'hidden'}" role="button">
         <div class="name"></div>
         <div class="value-container">
           <div class="value"></div>

app/assets/javascripts/vue_shared/components/loading_icon.vue

@@ -18,6 +18,12 @@
         required: false,
         default: false,
       },
+
+      class: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
 
     computed: {
@@ -25,7 +31,7 @@
         return this.inline ? 'span' : 'div';
       },
       cssClass() {
-        return `fa-${this.size}x`;
+        return `fa-${this.size}x ${this.class}`;
       },
     },
   };

app/assets/javascripts/vue_shared/components/popup_dialog.vue

@@ -60,7 +60,9 @@ export default {
       <div class="modal-content">
         <div class="modal-header">
           <slot name="header">
-            <h4 class="modal-title pull-left">{{this.title}}</h4>
+            <h4 class="modal-title pull-left">
+              {{this.title}}
+            </h4>
             <button
               type="button"
               class="close pull-right"
@@ -83,13 +85,15 @@ export default {
               class="btn pull-left"
               :disabled="submitDisabled"
               :class="btnKindClass"
-              @click="emitSubmit(true)">
+              @click="emitSubmit(true)"
+            >
                 {{primaryButtonLabel}}
             </button>
             <button
               type="button"
               class="btn btn-default pull-right"
-              @click="close">
+              @click="close"
+            >
                 Cancel
             </button>
           </div>
@@ -101,6 +105,6 @@ export default {
   <div
     class="modal-backdrop fade in"
     @click="close"
-  ></div>
+  />
 </div>
 </template>