[ci skip] Fix more rules

app/assets/javascripts/notebook/cells/markdown.vue

@@ -91,18 +91,21 @@
 <template>
   <div class="cell text-cell">
     <prompt />
-    <div class="markdown" v-html="markdown"></div>
+    <div
+      class="markdown"
+      v-html="markdown">
+    </div>
   </div>
 </template>
 <style>
-.markdown .katex {
-  display: block;
-  text-align: center;
-}
-.markdown .inline-katex .katex {
-  display: inline;
-  text-align: initial;
-}
+  .markdown .katex {
+    display: block;
+    text-align: center;
+  }
+  .markdown .inline-katex .katex {
+    display: inline;
+    text-align: initial;
+  }
 </style>

app/assets/javascripts/notebook/cells/output/html.vue

 <script>
-import Prompt from '../prompt.vue';
-export default {
-  props: {
-    rawCode: {
-      type: String,
-      required: true,
+  import Prompt from '../prompt.vue';
+  export default {
+    components: {
+      prompt: Prompt,
     },
-  },
-  components: {
-    prompt: Prompt,
-  },
-};
+    props: {
+      rawCode: {
+        type: String,
+        required: true,
+      },
+    },
+  };
 </script>
 <template>

app/assets/javascripts/notebook/cells/output/image.vue

 <script>
-import Prompt from '../prompt.vue';
-export default {
-  props: {
-    outputType: {
-      type: String,
-      required: true,
+  import Prompt from '../prompt.vue';
+  export default {
+    components: {
+      prompt: Prompt,
     },
-    rawCode: {
-      type: String,
-      required: true,
+    props: {
+      outputType: {
+        type: String,
+        required: true,
+      },
+      rawCode: {
+        type: String,
+        required: true,
+      },
     },
-  },
-  components: {
-    prompt: Prompt,
-  },
-};
+  };
 </script>
 <template>
   <div class="output">
     <prompt />
-    <img
-      :src="'data:' + outputType + ';base64,' + rawCode" />
+    <img :src="'data:' + outputType + ';base64,' + rawCode" />
   </div>
 </template>

app/assets/javascripts/notebook/cells/output/index.vue

 <script>
-import CodeCell from '../code/index.vue';
-import Html from './html.vue';
-import Image from './image.vue';
-export default {
-  props: {
-    codeCssClass: {
-      type: String,
-      required: false,
-      default: '',
+  import CodeCell from '../code/index.vue';
+  import Html from './html.vue';
+  import Image from './image.vue';
+  export default {
+    components: {
+      'code-cell': CodeCell,
+      'html-output': Html,
+      'image-output': Image,
     },
-    count: {
-      type: Number,
-      required: false,
-      default: 0,
+    props: {
+      codeCssClass: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      count: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
+      output: {
+        type: Object,
+        requred: true,
+        default: () => ({}),
+      },
     },
-    output: {
-      type: Object,
-      requred: true,
+    data() {
+      return {
+        outputType: '',
+      };
     },
-  },
-  components: {
-    'code-cell': CodeCell,
-    'html-output': Html,
-    'image-output': Image,
-  },
-  data() {
-    return {
-      outputType: '',
-    };
-  },
-  computed: {
-    componentName() {
-      if (this.output.text) {
-        return 'code-cell';
-      } else if (this.output.data['image/png']) {
-        this.outputType = 'image/png';
-        return 'image-output';
-      } else if (this.output.data['text/html']) {
-        this.outputType = 'text/html';
-        return 'html-output';
-      } else if (this.output.data['image/svg+xml']) {
-        this.outputType = 'image/svg+xml';
-        return 'html-output';
-      }
-      this.outputType = 'text/plain';
-      return 'code-cell';
-    },
-    rawCode() {
-      if (this.output.text) {
-        return this.output.text.join('');
-      }
-      return this.dataForType(this.outputType);
+    computed: {
+      componentName() {
+        if (this.output.text) {
+          return 'code-cell';
+        } else if (this.output.data['image/png']) {
+          this.outputType = 'image/png';
+          return 'image-output';
+        } else if (this.output.data['text/html']) {
+          this.outputType = 'text/html';
+          return 'html-output';
+        } else if (this.output.data['image/svg+xml']) {
+          this.outputType = 'image/svg+xml';
+          return 'html-output';
+        }
+        this.outputType = 'text/plain';
+        return 'code-cell';
+      },
+      rawCode() {
+        if (this.output.text) {
+          return this.output.text.join('');
+        }
+        return this.dataForType(this.outputType);
+      },
     },
-  },
-  methods: {
-    dataForType(type) {
-      let data = this.output.data[type];
-      if (typeof data === 'object') {
-        data = data.join('');
-      }
-      return data;
+    methods: {
+      dataForType(type) {
+        let data = this.output.data[type];
+        if (typeof data === 'object') {
+          data = data.join('');
+        }
+        return data;
+      },
     },
-  },
-};
+  };
 </script>
 <template>
-  <component :is="componentName"
+  <component
+    :is="componentName"
     type="output"
-    :outputType="outputType"
+    :output-type="outputType"
     :count="count"
     :raw-code="rawCode"
-    :code-css-class="codeCssClass" />
+    :code-css-class="codeCssClass"
+  />
 </template>

app/assets/javascripts/notebook/cells/prompt.vue

@@ -4,10 +4,17 @@
       type: {
         type: String,
         required: false,
+        default: '',
       },
       count: {
         type: Number,
         required: false,
+        default: 0,
+      },
+    },
+    computed: {
+      hasKeys() {
+        return this.type !== '' && this.count;
       },
     },
   };
@@ -15,16 +22,16 @@
 <template>
   <div class="prompt">
-    <span v-if="type && count">
+    <span v-if="hasKeys">
       {{ type }} [{{ count }}]:
     </span>
   </div>
 </template>
 <style scoped>
-.prompt {
-  padding: 0 10px;
-  min-width: 7em;
-  font-family: monospace;
-}
+  .prompt {
+    padding: 0 10px;
+    min-width: 7em;
+    font-family: monospace;
+  }
 </style>

app/assets/javascripts/notebook/index.vue

@@ -20,11 +20,6 @@
         default: '',
       },
     },
-    methods: {
-      cellType(type) {
-        return `${type}-cell`;
-      },
-    },
     computed: {
       cells() {
         if (this.notebook.worksheets) {
@@ -45,6 +40,11 @@
         return Object.keys(this.notebook).length;
       },
     },
+    methods: {
+      cellType(type) {
+        return `${type}-cell`;
+      },
+    },
   };
 </script>

app/assets/javascripts/notes/components/comment_form.vue

@@ -15,7 +15,17 @@
   import issuableStateMixin from '../mixins/issuable_state';
   export default {
-    name: 'commentForm',
+    name: 'CommentForm',
+    components: {
+      issueWarning,
+      noteSignedOutWidget,
+      discussionLockedWidget,
+      markdownField,
+      userAvatarLink,
+    },
+    mixins: [
+      issuableStateMixin,
+    ],
     data() {
       return {
         note: '',
@@ -27,21 +37,6 @@
         isSubmitButtonDisabled: true,
       };
     },
-    components: {
-      issueWarning,
-      noteSignedOutWidget,
-      discussionLockedWidget,
-      markdownField,
-      userAvatarLink,
-    },
-    watch: {
-      note(newNote) {
-        this.setIsSubmitButtonDisabled(newNote, this.isSubmitting);
-      },
-      isSubmitting(newValue) {
-        this.setIsSubmitButtonDisabled(this.note, newValue);
-      },
-    },
     computed: {
       ...mapGetters([
         'getCurrentUserLastNote',
@@ -99,6 +94,23 @@
         return this.getNoteableData.create_note_path;
       },
     },
+    watch: {
+      note(newNote) {
+        this.setIsSubmitButtonDisabled(newNote, this.isSubmitting);
+      },
+      isSubmitting(newValue) {
+        this.setIsSubmitButtonDisabled(this.note, newValue);
+      },
+    },
+    mounted() {
+      // jQuery is needed here because it is a custom event being dispatched with jQuery.
+      $(document).on('issuable:change', (e, isClosed) => {
+        this.issueState = isClosed ? constants.CLOSED : constants.REOPENED;
+      });
+
+      this.initAutoSave();
+      this.initTaskList();
+    },
     methods: {
       ...mapActions([
         'saveNote',
@@ -231,18 +243,6 @@ Please check your network connection and try again.`;
         });
       },
     },
-    mixins: [
-      issuableStateMixin,
-    ],
-    mounted() {
-      // jQuery is needed here because it is a custom event being dispatched with jQuery.
-      $(document).on('issuable:change', (e, isClosed) => {
-        this.issueState = isClosed ? constants.CLOSED : constants.REOPENED;
-      });
-
-      this.initAutoSave();
-      this.initTaskList();
-    },
   };
 </script>
@@ -266,7 +266,7 @@ Please check your network connection and try again.`;
               :img-src="author.avatar_url"
               :img-alt="author.name"
               :img-size="40"
-              />
+            />
           </div>
           <div class="timeline-content timeline-content-form">
             <form
@@ -310,7 +310,7 @@ Please check your network connection and try again.`;
                     :disabled="isSubmitButtonDisabled"
                     class="btn btn-create comment-btn js-comment-button js-comment-submit-button"
                     type="submit">
-                    {{commentButtonTitle}}
+                    {{ commentButtonTitle }}
                   </button>
                   <button
                     :disabled="isSubmitButtonDisabled"
@@ -352,7 +352,7 @@ Please check your network connection and try again.`;
                         <i
                           aria-hidden="true"
                           class="fa fa-check icon">
-                          </i>
+                        </i>
                         <div class="description">
                           <strong>Start discussion</strong>
                           <p>
@@ -370,7 +370,7 @@ Please check your network connection and try again.`;
                   :class="actionButtonClassNames"
                   :disabled="isSubmitting"
                   class="btn btn-comment btn-comment-and-close js-action-button">
-                  {{issueActionButtonTitle}}
+                  {{ issueActionButtonTitle }}
                 </button>
                 <button
                   type="button"

app/assets/javascripts/notes/components/discussion_locked_widget.vue

@@ -3,12 +3,12 @@
   import Issuable from '~/vue_shared/mixins/issuable';
   export default {
-    mixins: [
-      Issuable,
-    ],
     components: {
       Icon,
     },
+    mixins: [
+      Issuable,
+    ],
   };
 </script>
@@ -18,9 +18,11 @@
       <icon
         name="lock"
         :size="16"
-        class="icon">
-      </icon>
-      <span>This {{ issuableDisplayName }} is locked. Only <b>project members</b> can comment.</span>
-     </span>
+        class="icon"
+      />
+      <span>
+        This {{ issuableDisplayName }} is locked. Only <b>project members</b> can comment.
+      </span>
+    </span>
   </div>
 </template>

app/assets/javascripts/notes/components/note_actions.vue

@@ -9,7 +9,13 @@
   import tooltip from '~/vue_shared/directives/tooltip';
   export default {
-    name: 'noteActions',
+    name: 'NoteActions',
+    directives: {
+      tooltip,
+    },
+    components: {
+      loadingIcon,
+    },
     props: {
       authorId: {
         type: Number,
@@ -41,12 +47,6 @@
         required: true,
       },
     },
-    directives: {
-      tooltip,
-    },
-    components: {
-      loadingIcon,
-    },
     computed: {
       ...mapGetters([
         'getUserDataByProp',
@@ -98,20 +98,21 @@
         data-placement="bottom"
         data-container="body"
         href="#"
-        title="Add reaction">
-          <loading-icon :inline="true" />
-          <span
-            v-html="emojiSmiling"
-            class="link-highlight award-control-icon-neutral">
-          </span>
-          <span
-            v-html="emojiSmiley"
-            class="link-highlight award-control-icon-positive">
-          </span>
-          <span
-            v-html="emojiSmile"
-            class="link-highlight award-control-icon-super-positive">
-          </span>
+        title="Add reaction"
+      >
+        <loading-icon :inline="true" />
+        <span
+          v-html="emojiSmiling"
+          class="link-highlight award-control-icon-neutral">
+        </span>
+        <span
+          v-html="emojiSmiley"
+          class="link-highlight award-control-icon-positive">
+        </span>
+        <span
+          v-html="emojiSmile"
+          class="link-highlight award-control-icon-super-positive">
+        </span>
       </a>
     </div>
     <div
@@ -127,7 +128,8 @@
         data-placement="bottom">
           <span
             v-html="editSvg"
-            class="link-highlight"></span>
+            class="link-highlight">
+          </span>
       </button>
     </div>
     <div
@@ -143,7 +145,8 @@
         data-placement="bottom">
           <span
             class="icon"
-            v-html="ellipsisSvg"></span>
+            v-html="ellipsisSvg">
+          </span>
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">

app/assets/javascripts/notes/components/note_attachment.vue

 <script>
   export default {
-    name: 'noteAttachment',
+    name: 'NoteAttachment',
     props: {
       attachment: {
         type: Object,
@@ -19,7 +19,8 @@
       rel="noopener noreferrer">
       <img
         :src="attachment.url"
-        class="note-image-attach" />
+        class="note-image-attach"
+      />
     </a>
     <div class="attachment">
       <a
@@ -29,8 +30,9 @@
         rel="noopener noreferrer">
         <i
           class="fa fa-paperclip"
-          aria-hidden="true"></i>
-        {{attachment.filename}}
+          aria-hidden="true">
+        </i>
+        {{ attachment.filename }}
       </a>
     </div>
   </div>

app/assets/javascripts/notes/components/note_awards_list.vue

@@ -8,6 +8,9 @@
   import tooltip from '../../vue_shared/directives/tooltip';
   export default {
+    directives: {
+      tooltip,
+    },
     props: {
       awards: {
         type: Array,
@@ -26,9 +29,6 @@
         required: true,
       },
     },
-    directives: {
-      tooltip,
-    },
     computed: {
       ...mapGetters([
         'getUserData',
@@ -73,6 +73,11 @@
         return this.getUserData.id;
       },
     },
+    created() {
+      this.emojiSmiling = emojiSmiling;
+      this.emojiSmile = emojiSmile;
+      this.emojiSmiley = emojiSmiley;
+    },
     methods: {
       ...mapActions([
         'toggleAwardRequest',
@@ -168,11 +173,6 @@
           .catch(() => Flash('Something went wrong on our end.'));
       },
     },
-    created() {
-      this.emojiSmiling = emojiSmiling;
-      this.emojiSmile = emojiSmile;
-      this.emojiSmiley = emojiSmiley;
-    },
   };
 </script>
@@ -191,7 +191,7 @@
         type="button">
         <span v-html="getAwardHTML(awardName)"></span>
         <span class="award-control-text js-counter">
-          {{awardList.length}}
+          {{ awardList.length }}
         </span>
       </button>
       <div

app/assets/javascripts/notes/components/note_body.vue

@@ -7,6 +7,15 @@
   import autosave from '../mixins/autosave';
   export default {
+    components: {
+      noteEditedText,
+      noteAwardsList,
+      noteAttachment,
+      noteForm,
+    },
+    mixins: [
+      autosave,
+    ],
     props: {
       note: {
         type: Object,
@@ -22,40 +31,11 @@
         default: false,
       },
     },
-    mixins: [
-      autosave,
-    ],
-    components: {
-      noteEditedText,
-      noteAwardsList,
-      noteAttachment,
-      noteForm,
-    },
     computed: {
       noteBody() {
         return this.note.note;
       },
     },
-    methods: {
-      renderGFM() {
-        $(this.$refs['note-body']).renderGFM();
-      },
-      initTaskList() {
-        if (this.canEdit) {
-          this.taskList = new TaskList({
-            dataType: 'note',
-            fieldName: 'note',
-            selector: '.notes',
-          });
-        }
-      },
-      handleFormUpdate(note, parentElement, callback) {
-        this.$emit('handleFormUpdate', note, parentElement, callback);
-      },
-      formCancelHandler(shouldConfirm, isDirty) {
-        this.$emit('cancelFormEdition', shouldConfirm, isDirty);
-      },
-    },
     mounted() {
       this.renderGFM();
       this.initTaskList();
@@ -76,6 +56,26 @@
         }
       }
     },
+    methods: {
+      renderGFM() {
+        $(this.$refs['note-body']).renderGFM();
+      },
+      initTaskList() {
+        if (this.canEdit) {
+          this.taskList = new TaskList({
+            dataType: 'note',
+            fieldName: 'note',
+            selector: '.notes',
+          });
+        }
+      },
+      handleFormUpdate(note, parentElement, callback) {
+        this.$emit('handleFormUpdate', note, parentElement, callback);
+      },
+      formCancelHandler(shouldConfirm, isDirty) {
+        this.$emit('cancelFormEdition', shouldConfirm, isDirty);
+      },
+    },
   };
 </script>
@@ -95,7 +95,7 @@
       :is-editing="isEditing"
       :note-body="noteBody"
       :note-id="note.id"
-      />
+    />
     <textarea
       v-if="canEdit"
       v-model="note.note"
@@ -106,17 +106,17 @@
       :edited-at="note.last_edited_at"
       :edited-by="note.last_edited_by"
       action-text="Edited"
-      />
+    />
     <note-awards-list
       v-if="note.award_emoji.length"
       :note-id="note.id"
       :note-author-id="note.author.id"
       :awards="note.award_emoji"
       :toggle-award-path="note.toggle_award_path"
-      />
+    />
     <note-attachment
       v-if="note.attachment"
       :attachment="note.attachment"
-      />
+    />
   </div>
 </template>

app/assets/javascripts/notes/components/note_edited_text.vue

@@ -2,7 +2,10 @@
   import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
   export default {
-    name: 'editedNoteText',
+    name: 'EditedNoteText',
+    components: {
+      timeAgoTooltip,
+    },
     props: {
       actionText: {
         type: String,
@@ -15,6 +18,7 @@
       editedBy: {
         type: Object,
         required: false,
+        default: () => ({}),
       },
       className: {
         type: String,
@@ -22,25 +26,22 @@
         default: 'edited-text',
       },
     },
-    components: {
-      timeAgoTooltip,
-    },
   };
 </script>
 <template>
   <div :class="className">
-    {{actionText}}
+    {{ actionText }}
     <time-ago-tooltip
       :time="editedAt"
       tooltip-placement="bottom"
-      />
+    />
     <template v-if="editedBy">
       by
       <a
         :href="editedBy.path"
         class="js-vue-author author_link">
-        {{editedBy.name}}
+        {{ editedBy.name }}
       </a>
     </template>
   </div>

app/assets/javascripts/notes/components/note_form.vue

@@ -6,7 +6,14 @@
   import issuableStateMixin from '../mixins/issuable_state';
   export default {
-    name: 'issueNoteForm',
+    name: 'IssueNoteForm',
+    components: {
+      issueWarning,
+      markdownField,
+    },
+    mixins: [
+      issuableStateMixin,
+    ],
     props: {
       noteBody: {
         type: String,
@@ -16,6 +23,7 @@
       noteId: {
         type: Number,
         required: false,
+        default: 0,
       },
       saveButtonTitle: {
         type: String,
@@ -39,10 +47,6 @@
         isSubmitting: false,
       };
     },
-    components: {
-      issueWarning,
-      markdownField,
-    },
     computed: {
       ...mapGetters([
         'getDiscussionLastNote',
@@ -70,6 +74,18 @@
         return !this.note.length || this.isSubmitting;
       },
     },
+    watch: {
+      noteBody() {
+        if (this.note === this.noteBody) {
+          this.note = this.noteBody;
+        } else {
+          this.conflictWhileEditing = true;
+        }
+      },
+    },
+    mounted() {
+      this.$refs.textarea.focus();
+    },
     methods: {
       handleUpdate() {
         this.isSubmitting = true;
@@ -94,26 +110,13 @@
         this.$emit('cancelFormEdition', shouldConfirm, this.noteBody !== this.note);
       },
     },
-    mixins: [
-      issuableStateMixin,
-    ],
-    mounted() {
-      this.$refs.textarea.focus();
-    },
-    watch: {
-      noteBody() {
-        if (this.note === this.noteBody) {
-          this.note = this.noteBody;
-        } else {
-          this.conflictWhileEditing = true;
-        }
-      },
-    },
   };
 </script>
 <template>
-  <div ref="editNoteForm" class="note-edit-form current-note-edit-form">
+  <div
+    ref="editNoteForm"
+    class="note-edit-form current-note-edit-form">
     <div
       v-if="conflictWhileEditing"
       class="js-conflict-edit-warning alert alert-danger">
@@ -121,12 +124,13 @@
       <a
         :href="noteHash"
         target="_blank"
-        rel="noopener noreferrer">updated comment</a>
-        to ensure information is not lost.
+        rel="noopener noreferrer">
+        updated comment
+      </a>
+      to ensure information is not lost.
     </div>
     <div class="flash-container timeline-content"></div>
-    <form
-      class="edit-note common-note-form js-quick-submit gfm-form">
+    <form class="edit-note common-note-form js-quick-submit gfm-form">
       <issue-warning
         v-if="hasWarning(getNoteableData)"
@@ -160,7 +164,7 @@
           @click="handleUpdate()"
           :disabled="isDisabled"
           class="js-vue-issue-save btn btn-save">
-          {{saveButtonTitle}}
+          {{ saveButtonTitle }}
         </button>
         <button
           @click="cancelHandler()"

app/assets/javascripts/notes/components/note_header.vue

@@ -3,6 +3,9 @@
   import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
   export default {
+    components: {
+      timeAgoTooltip,
+    },
     props: {
       author: {
         type: Object,
@@ -37,9 +40,6 @@
         isExpanded: true,
       };
     },
-    components: {
-      timeAgoTooltip,
-    },
     computed: {
       toggleChevronClass() {
         return this.isExpanded ? 'fa-chevron-up' : 'fa-chevron-down';
@@ -67,16 +67,16 @@
   <div class="note-header-info">
     <a :href="author.path">
       <span class="note-header-author-name">
-        {{author.name}}
+        {{ author.name }}
       </span>
       <span class="note-headline-light">
-        @{{author.username}}
+        @{{ author.username }}
       </span>
     </a>
     <span class="note-headline-light">
       <span class="note-headline-meta">
         <template v-if="actionText">
-          {{actionText}}
+          {{ actionText }}
         </template>
         <span
           v-if="actionTextHtml"
@@ -90,12 +90,13 @@
           <time-ago-tooltip
             :time="createdAt"
             tooltip-placement="bottom"
-            />
+          />
         </a>
         <i
           class="fa fa-spinner fa-spin editing-spinner"
           aria-label="Comment is being updated"
-          aria-hidden="true">
+          aria-hidden="true"
+        >
         </i>
       </span>
     </span>
@@ -106,12 +107,12 @@
         @click="handleToggle"
         class="note-action-button discussion-toggle-button js-vue-toggle-button"
         type="button">
-          <i
-            :class="toggleChevronClass"
-            class="fa"
-            aria-hidden="true">
-          </i>
-          Toggle discussion
+        <i
+          :class="toggleChevronClass"
+          class="fa"
+          aria-hidden="true">
+        </i>
+        Toggle discussion
       </button>
     </div>
   </div>

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -13,17 +13,6 @@
   import autosave from '../mixins/autosave';
   export default {
-    props: {
-      note: {
-        type: Object,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        isReplying: false,
-      };
-    },
     components: {
       noteableNote,
       userAvatarLink,
@@ -37,6 +26,17 @@
     mixins: [
       autosave,
     ],
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        isReplying: false,
+      };
+    },
     computed: {
       ...mapGetters([
         'getNoteableData',
@@ -72,6 +72,20 @@
         return null;
       },
     },
+    mounted() {
+      if (this.isReplying) {
+        this.initAutoSave();
+      }
+    },
+    updated() {
+      if (this.isReplying) {
+        if (!this.autosave) {
+          this.initAutoSave();
+        } else {
+          this.setAutoSave();
+        }
+      }
+    },
     methods: {
       ...mapActions([
         'saveNote',
@@ -139,20 +153,6 @@ Please check your network connection and try again.`;
           });
       },
     },
-    mounted() {
-      if (this.isReplying) {
-        this.initAutoSave();
-      }
-    },
-    updated() {
-      if (this.isReplying) {
-        if (!this.autosave) {
-          this.initAutoSave();
-        } else {
-          this.setAutoSave();
-        }
-      }
-    },
   };
 </script>
@@ -165,7 +165,7 @@ Please check your network connection and try again.`;
           :img-src="author.avatar_url"
           :img-alt="author.name"
           :img-size="40"
-          />
+        />
       </div>
       <div class="timeline-content">
         <div class="discussion">
@@ -185,42 +185,43 @@ Please check your network connection and try again.`;
               :edited-by="lastUpdatedBy"
               action-text="Last updated"
               class-name="discussion-headline-light js-discussion-headline"
-              />
-            </div>
+            />
           </div>
-          <div
-            v-if="note.expanded"
-            class="discussion-body">
-            <div class="panel panel-default">
-              <div class="discussion-notes">
-                <ul class="notes">
-                  <component
-                    v-for="note in note.notes"
-                    :is="componentName(note)"
-                    :note="componentData(note)"
-                    :key="note.id"
-                    />
-                </ul>
-                <div
-                  :class="{ 'is-replying': isReplying }"
-                  class="discussion-reply-holder">
-                  <button
-                    v-if="canReply && !isReplying"
-                    @click="showReplyForm"
-                    type="button"
-                    class="js-vue-discussion-reply btn btn-text-field"
-                    title="Add a reply">Reply...</button>
-                  <note-form
-                    v-if="isReplying"
-                    save-button-title="Comment"
-                    :discussion="note"
-                    :is-editing="false"
-                    @handleFormUpdate="saveReply"
-                    @cancelFormEdition="cancelReplyForm"
-                    ref="noteForm"
-                    />
-                  <note-signed-out-widget v-if="!canReply" />
-                </div>
+        </div>
+        <div
+          v-if="note.expanded"
+          class="discussion-body">
+          <div class="panel panel-default">
+            <div class="discussion-notes">
+              <ul class="notes">
+                <component
+                  v-for="note in note.notes"
+                  :is="componentName(note)"
+                  :note="componentData(note)"
+                  :key="note.id"
+                />
+              </ul>
+              <div
+                :class="{ 'is-replying': isReplying }"
+                class="discussion-reply-holder">
+                <button
+                  v-if="canReply && !isReplying"
+                  @click="showReplyForm"
+                  type="button"
+                  class="js-vue-discussion-reply btn btn-text-field"
+                  title="Add a reply">
+                  Reply...
+                </button>
+                <note-form
+                  v-if="isReplying"
+                  save-button-title="Comment"
+                  :discussion="note"
+                  :is-editing="false"
+                  @handleFormUpdate="saveReply"
+                  @cancelFormEdition="cancelReplyForm"
+                  ref="noteForm"
+                />
+                <note-signed-out-widget v-if="!canReply" />
               </div>
             </div>
           </div>

app/assets/javascripts/notes/components/noteable_note.vue

@@ -9,6 +9,12 @@
   import eventHub from '../event_hub';
   export default {
+    components: {
+      userAvatarLink,
+      noteHeader,
+      noteActions,
+      noteBody,
+    },
     props: {
       note: {
         type: Object,
@@ -22,12 +28,6 @@
         isRequesting: false,
       };
     },
-    components: {
-      userAvatarLink,
-      noteHeader,
-      noteActions,
-      noteBody,
-    },
     computed: {
       ...mapGetters([
         'targetNoteHash',
@@ -51,6 +51,16 @@
         return `note_${this.note.id}`;
       },
     },
+
+    created() {
+      eventHub.$on('enterEditMode', ({ noteId }) => {
+        if (noteId === this.note.id) {
+          this.isEditing = true;
+          this.scrollToNoteIfNeeded($(this.$el));
+        }
+      });
+    },
+
     methods: {
       ...mapActions([
         'deleteNote',
@@ -126,14 +136,6 @@
         this.$refs.noteBody.$refs.noteForm.note = noteText;
       },
     },
-    created() {
-      eventHub.$on('enterEditMode', ({ noteId }) => {
-        if (noteId === this.note.id) {
-          this.isEditing = true;
-          this.scrollToNoteIfNeeded($(this.$el));
-        }
-      });
-    },
   };
 </script>
@@ -150,7 +152,7 @@
           :img-src="author.avatar_url"
           :img-alt="author.name"
           :img-size="40"
-          />
+        />
       </div>
       <div class="timeline-content">
         <div class="note-header">
@@ -159,7 +161,7 @@
             :created-at="note.created_at"
             :note-id="note.id"
             action-text="commented"
-            />
+          />
           <note-actions
             :author-id="author.id"
             :note-id="note.id"
@@ -170,7 +172,7 @@
             :report-abuse-path="note.report_abuse_path"
             @handleEdit="editHandler"
             @handleDelete="deleteHandler"
-            />
+          />
         </div>
         <note-body
           :note="note"
@@ -179,7 +181,7 @@
           @handleFormUpdate="formUpdateHandler"
           @cancelFormEdition="formCancelHandler"
           ref="noteBody"
-          />
+        />
       </div>
     </div>
   </li>

app/assets/javascripts/notes/components/notes_app.vue

@@ -13,7 +13,16 @@
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   export default {
-    name: 'notesApp',
+    name: 'NotesApp',
+    components: {
+      noteableNote,
+      noteableDiscussion,
+      systemNote,
+      commentForm,
+      loadingIcon,
+      placeholderNote,
+      placeholderSystemNote,
+    },
     props: {
       noteableData: {
         type: Object,
@@ -26,7 +35,7 @@
       userData: {
         type: Object,
         required: false,
-        default: {},
+        default: () => ({}),
       },
     },
     store,
@@ -35,21 +44,30 @@
         isLoading: true,
       };
     },
-    components: {
-      noteableNote,
-      noteableDiscussion,
-      systemNote,
-      commentForm,
-      loadingIcon,
-      placeholderNote,
-      placeholderSystemNote,
-    },
     computed: {
       ...mapGetters([
         'notes',
         'getNotesDataByProp',
       ]),
     },
+    created() {
+      this.setNotesData(this.notesData);
+      this.setNoteableData(this.noteableData);
+      this.setUserData(this.userData);
+    },
+    mounted() {
+      this.fetchNotes();
+
+      const parentElement = this.$el.parentElement;
+
+      if (parentElement &&
+        parentElement.classList.contains('js-vue-notes-event')) {
+        parentElement.addEventListener('toggleAward', (event) => {
+          const { awardName, noteId } = event.detail;
+          this.actionToggleAward({ awardName, noteId });
+        });
+      }
+    },
     methods: {
       ...mapActions({
         actionFetchNotes: 'fetchNotes',
@@ -105,24 +123,6 @@
         }
       },
     },
-    created() {
-      this.setNotesData(this.notesData);
-      this.setNoteableData(this.noteableData);
-      this.setUserData(this.userData);
-    },
-    mounted() {
-      this.fetchNotes();
-
-      const parentElement = this.$el.parentElement;
-
-      if (parentElement &&
-        parentElement.classList.contains('js-vue-notes-event')) {
-        parentElement.addEventListener('toggleAward', (event) => {
-          const { awardName, noteId } = event.detail;
-          this.actionToggleAward({ awardName, noteId });
-        });
-      }
-    },
   };
 </script>
@@ -144,7 +144,7 @@
         :is="getComponentName(note)"
         :note="getComponentData(note)"
         :key="note.id"
-        />
+      />
     </ul>
     <comment-form />

app/assets/javascripts/pdf/index.vue

@@ -5,6 +5,7 @@
   import page from './page/index.vue';
   export default {
+    components: { page },
     props: {
       pdf: {
         type: [String, Uint8Array],
@@ -17,8 +18,6 @@
         pages: [],
       };
     },
-    components: { page },
-    watch: { pdf: 'load' },
     computed: {
       document() {
         return typeof this.pdf === 'string' ? this.pdf : { data: this.pdf };
@@ -27,6 +26,11 @@
         return this.pdf && this.pdf.length > 0;
       },
     },
+    watch: { pdf: 'load' },
+    mounted() {
+      pdfjsLib.PDFJS.workerSrc = workerSrc;
+      if (this.hasPDF) this.load();
+    },
     methods: {
       load() {
         this.pages = [];
@@ -47,20 +51,20 @@
         return Promise.all(pagePromises);
       },
     },
-    mounted() {
-      pdfjsLib.PDFJS.workerSrc = workerSrc;
-      if (this.hasPDF) this.load();
-    },
   };
 </script>
 <template>
-  <div class="pdf-viewer" v-if="hasPDF">
-    <page v-for="(page, index) in pages"
+  <div
+    class="pdf-viewer"
+    v-if="hasPDF">
+    <page
+      v-for="(page, index) in pages"
       :key="index"
       :v-if="!loading"
       :page="page"
-      :number="index + 1" />
+      :number="index + 1"
+    />
   </div>
 </template>

app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue

@@ -32,6 +32,20 @@
         return !!(this.customInputEnabled || !this.intervalIsPreset);
       },
     },
+    watch: {
+      cronInterval() {
+        // updates field validation state when model changes, as
+        // glFieldError only updates on input.
+        this.$nextTick(() => {
+          gl.pipelineScheduleFieldErrors.updateFormValidityState();
+        });
+      },
+    },
+    created() {
+      if (this.intervalIsPreset) {
+        this.enableCustomInput = false;
+      }
+    },
     methods: {
       toggleCustomInput(shouldEnable) {
         this.customInputEnabled = shouldEnable;
@@ -43,20 +57,6 @@
         }
       },
     },
-    created() {
-      if (this.intervalIsPreset) {
-        this.enableCustomInput = false;
-      }
-    },
-    watch: {
-      cronInterval() {
-        // updates field validation state when model changes, as
-        // glFieldError only updates on input.
-        this.$nextTick(() => {
-          gl.pipelineScheduleFieldErrors.updateFormValidityState();
-        });
-      },
-    },
   };
 </script>
@@ -78,7 +78,12 @@
       </label>
       <span class="cron-syntax-link-wrap">
-        (<a :href="cronSyntaxUrl" target="_blank">{{ __('Cron syntax') }}</a>)
+        (<a
+          :href="cronSyntaxUrl"
+          target="_blank"
+        >
+          {{ __('Cron syntax') }}
+        </a>)
       </span>
     </div>
@@ -93,7 +98,10 @@
         @click="toggleCustomInput(false)"
       />
-      <label class="label-light" for="every-day">
+      <label
+        class="label-light"
+        for="every-day"
+      >
         {{ __('Every day (at 4:00am)') }}
       </label>
     </div>
@@ -109,7 +117,10 @@
         @click="toggleCustomInput(false)"
       />
-      <label class="label-light" for="every-week">
+      <label
+        class="label-light"
+        for="every-week"
+      >
         {{ __('Every week (Sundays at 4:00am)') }}
       </label>
     </div>
@@ -125,7 +136,10 @@
         @click="toggleCustomInput(false)"
       />
-      <label class="label-light" for="every-month">
+      <label
+        class="label-light"
+        for="every-month"
+      >
         {{ __('Every month (on the 1st at 4:00am)') }}
       </label>
     </div>