move template tags below script

see https://gitlab.com/gitlab-org/gitlab-ee/issues/3612

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

@@ -54,7 +54,7 @@
           Board scope affects which issues are displayed for anyone who visits this board
         </p>
         <div v-if="!collapseScope || expanded">
-          <form-block>
+          <div class="list-item">
             <div
               v-if="board.milestone"
               slot="currentValue"
@@ -69,9 +69,9 @@
               default-text="Any milestone"
               :can-edit="canAdminBoard"
             />
-          </form-block>
+          </div>
 
-          <form-block>
+          <div class="list-item">
             <board-labels-select
               :board="board"
               :selected="board.labels"
@@ -80,9 +80,9 @@
               :can-edit="canAdminBoard"
               :labels-path="labelsPath"
             />
-          </form-block>
+          </div>
 
-          <form-block>
+          <div class="list-item">
             <user-select
               any-user-text="Any assignee"
               :board="board"
@@ -96,9 +96,9 @@
               :group-id="groupId"
               wrapper-class="assignee"
             />
-          </form-block>
+          </div>
 
-          <form-block>
+          <div class="list-item">
             <board-weight-select
               :board="board"
               :weights="weightsArray"
@@ -107,7 +107,7 @@
               default-text="Any weight"
               :can-edit="canAdminBoard"
             />
-          </form-block>
+          </div>
         </div>
       </div>
     </form>
@@ -123,7 +123,6 @@
 
 import Vue from 'vue';
 import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
-import FormBlock from './form_block.vue';
 import BoardMilestoneSelect from './milestone_select.vue';
 import BoardWeightSelect from './weight_select.vue';
 import BoardLabelsSelect from './labels_select.vue';
@@ -188,7 +187,6 @@ export default Vue.extend({
     BoardLabelsSelect,
     BoardMilestoneSelect,
     BoardWeightSelect,
-    FormBlock,
     PopupDialog,
     UserSelect,
   },

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

-<template>
-  <div class="list-item">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import eventHub from '../eventhub';
-
-export default {
-  data() {
-    return {
-      editing: false,
-    };
-  },
-  methods: {
-    toggleEditing() {
-      eventHub.$emit('toggle');
-    },
-  },
-};
-</script>

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

+<script>
+/* global LabelsSelect */
+
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import eventHub from '../eventhub';
+
+export default {
+  props: {
+    board: {
+      type: Object,
+      required: true,
+    },
+    labelsPath: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: Array,
+      required: false,
+    },
+    defaultText: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    selected: {
+      type: Array,
+      required: true,
+    },
+  },
+  components: {
+    loadingIcon,
+  },
+  computed: {
+    labelIds() {
+      return this.selected.map(label => label.id).join(',');
+    },
+  },
+  mounted() {
+    new LabelsSelect();
+  },
+};
+</script>
+
 <template>
   <div class="block labels">
     <div class="title append-bottom-10">
@@ -91,55 +143,3 @@
     </div>
   </div>
 </template>
-
-<script>
-/* global LabelsSelect */
-
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-import eventHub from '../eventhub';
-
-export default {
-  props: {
-    board: {
-      type: Object,
-      required: true,
-    },
-    labelsPath: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: Array,
-      required: false,
-    },
-    defaultText: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    canEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    selected: {
-      type: Array,
-      required: true,
-    },
-  },
-  components: {
-    loadingIcon,
-  },
-  computed: {
-    labelIds() {
-      return this.selected.map(label => label.id).join(',');
-    },
-  },
-  mounted() {
-    new LabelsSelect();
-  },
-};
-</script>

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

-<template>
-  <div class="dropdown milestone" :class="{ open: isOpen }">
-    <div class="title append-bottom-10">
-      {{ title }}
-      <a
-        v-if="canEdit"
-        class="edit-link pull-right"
-        href="#"
-        @click.prevent="toggle"
-      >
-        Edit
-      </a>
-    </div>
-    <div
-      class="dropdown-menu dropdown-menu-wide"
-    >
-      <ul
-        ref="list"
-      >
-        <li
-          v-for="milestone in extraMilestones"
-          :key="milestone.id"
-        >
-          <a
-            href="#"
-            @click.prevent.stop="selectMilestone(milestone)">
-            <i
-              class="fa fa-check"
-              v-if="milestone.id === value"></i>
-            {{ milestone.title }}
-          </a>
-        </li>
-        <li class="divider"></li>
-        <li v-if="loading">
-          <loading-icon />
-        </li>
-        <li
-          v-else
-          v-for="milestone in milestones"
-          :key="milestone.id"
-          class="dropdown-menu-item"
-        >
-          <a
-            href="#"
-            @click.prevent.stop="selectMilestone(milestone)">
-            <i
-              class="fa fa-check"
-              v-if="milestone.id === value"></i>
-            {{ milestone.title }}
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="value">
-      {{ milestoneTitle }}
-    </div>
-  </div>
-</template>
-
 <script>
 /* global BoardService */
 
@@ -136,3 +77,62 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="dropdown milestone" :class="{ open: isOpen }">
+    <div class="title append-bottom-10">
+      {{ title }}
+      <a
+        v-if="canEdit"
+        class="edit-link pull-right"
+        href="#"
+        @click.prevent="toggle"
+      >
+        Edit
+      </a>
+    </div>
+    <div
+      class="dropdown-menu dropdown-menu-wide"
+    >
+      <ul
+        ref="list"
+      >
+        <li
+          v-for="milestone in extraMilestones"
+          :key="milestone.id"
+        >
+          <a
+            href="#"
+            @click.prevent.stop="selectMilestone(milestone)">
+            <i
+              class="fa fa-check"
+              v-if="milestone.id === value"></i>
+            {{ milestone.title }}
+          </a>
+        </li>
+        <li class="divider"></li>
+        <li v-if="loading">
+          <loading-icon />
+        </li>
+        <li
+          v-else
+          v-for="milestone in milestones"
+          :key="milestone.id"
+          class="dropdown-menu-item"
+        >
+          <a
+            href="#"
+            @click.prevent.stop="selectMilestone(milestone)">
+            <i
+              class="fa fa-check"
+              v-if="milestone.id === value"></i>
+            {{ milestone.title }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="value">
+      {{ milestoneTitle }}
+    </div>
+  </div>
+</template>

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

+<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 {
+  props: {
+    anyUserText: {
+      type: String,
+      required: false,
+      default: 'Any user',
+    },
+    board: {
+      type: Object,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fieldName: {
+      type: String,
+      required: true,
+    },
+    groupId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    placeholderText: {
+      type: String,
+      required: false,
+      default: 'Select user',
+    },
+    projectId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    selected: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    wrapperClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  components: {
+    loadingIcon,
+    UserAvatarImage,
+  },
+  computed: {
+    hasValue() {
+      return this.selected.id;
+    },
+  },
+  watch: {
+    board: {
+      handler() {
+        this.$nextTick(() => {
+          new UsersSelect();
+        });
+      },
+      deep: true,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      new UsersSelect();
+    });
+  },
+};
+</script>
+
 <template>
   <div
     class="block"
@@ -95,85 +177,3 @@
     </div>
   </div>
 </template>
-
-<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 {
-  props: {
-    anyUserText: {
-      type: String,
-      required: false,
-      default: 'Any user',
-    },
-    board: {
-      type: Object,
-      required: true,
-    },
-    canEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    fieldName: {
-      type: String,
-      required: true,
-    },
-    groupId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    placeholderText: {
-      type: String,
-      required: false,
-      default: 'Select user',
-    },
-    projectId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    selected: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    wrapperClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  components: {
-    loadingIcon,
-    UserAvatarImage,
-  },
-  computed: {
-    hasValue() {
-      return this.selected.id;
-    },
-  },
-  watch: {
-    board: {
-      handler() {
-        this.$nextTick(() => {
-          new UsersSelect();
-        });
-      },
-      deep: true,
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      new UsersSelect();
-    });
-  },
-};
-</script>

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

-<template>
-  <div class="dropdown weight" :class="{ open: isOpen }">
-    <div class="title append-bottom-10">
-      {{ title }}
-      <a
-        v-if="canEdit"
-        class="edit-link pull-right"
-        href="#"
-        @click.prevent="toggle"
-      >
-        Edit
-      </a>
-    </div>
-    <div
-      class="dropdown-menu dropdown-menu-wide"
-    >
-      <ul
-        ref="list"
-      >
-        <li>
-          <a
-            href="#"
-            @click.prevent.stop="selectWeight(null)"
-          >
-            <i
-              class="fa fa-check"
-              v-if="!value"></i>
-            Any weight
-          </a>
-        </li>
-        <li
-          v-for="weight in weights"
-          :key="weight.id"
-        >
-          <a
-            href="#"
-            @click.prevent.stop="selectWeight(weight)">
-            <i
-              class="fa fa-check"
-              v-if="weight === value"
-            />
-            {{ weight }}
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="value">
-      {{ weight }}
-    </div>
-  </div>
-</template>
-
 <script>
 /* global BoardService */
 
@@ -117,3 +65,55 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="dropdown weight" :class="{ open: isOpen }">
+    <div class="title append-bottom-10">
+      {{ title }}
+      <a
+        v-if="canEdit"
+        class="edit-link pull-right"
+        href="#"
+        @click.prevent="toggle"
+      >
+        Edit
+      </a>
+    </div>
+    <div
+      class="dropdown-menu dropdown-menu-wide"
+    >
+      <ul
+        ref="list"
+      >
+        <li>
+          <a
+            href="#"
+            @click.prevent.stop="selectWeight(null)"
+          >
+            <i
+              class="fa fa-check"
+              v-if="!value"></i>
+            Any weight
+          </a>
+        </li>
+        <li
+          v-for="weight in weights"
+          :key="weight.id"
+        >
+          <a
+            href="#"
+            @click.prevent.stop="selectWeight(weight)">
+            <i
+              class="fa fa-check"
+              v-if="weight === value"
+            />
+            {{ weight }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="value">
+      {{ weight }}
+    </div>
+  </div>
+</template>
\ No newline at end of file