Prettify issue_show and jobs modules

10 files changed, 588 insertions, 594 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index c6ad3aa3e0d..04c1cf021d9 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,281 +1,279 @@
 <script>
-  import Visibility from 'visibilityjs';
-  import { visitUrl } from '../../lib/utils/url_utility';
-  import Poll from '../../lib/utils/poll';
-  import eventHub from '../event_hub';
-  import Service from '../services/index';
-  import Store from '../stores';
-  import titleComponent from './title.vue';
-  import descriptionComponent from './description.vue';
-  import editedComponent from './edited.vue';
-  import formComponent from './form.vue';
-  import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
+import Visibility from 'visibilityjs';
+import { visitUrl } from '../../lib/utils/url_utility';
+import Poll from '../../lib/utils/poll';
+import eventHub from '../event_hub';
+import Service from '../services/index';
+import Store from '../stores';
+import titleComponent from './title.vue';
+import descriptionComponent from './description.vue';
+import editedComponent from './edited.vue';
+import formComponent from './form.vue';
+import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
-  export default {
-    components: {
-      descriptionComponent,
-      titleComponent,
-      editedComponent,
-      formComponent,
-    },
-    mixins: [
-      recaptchaModalImplementor,
-    ],
-    props: {
-      endpoint: {
-        required: true,
-        type: String,
-      },
-      updateEndpoint: {
-        required: true,
-        type: String,
-      },
-      canUpdate: {
-        required: true,
-        type: Boolean,
-      },
-      canDestroy: {
-        required: true,
-        type: Boolean,
-      },
-      showInlineEditButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showDeleteButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      issuableRef: {
-        type: String,
-        required: true,
-      },
-      initialTitleHtml: {
-        type: String,
-        required: true,
-      },
-      initialTitleText: {
-        type: String,
-        required: true,
-      },
-      initialDescriptionHtml: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      initialDescriptionText: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      initialTaskStatus: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedAt: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      issuableTemplates: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      markdownPreviewPath: {
-        type: String,
-        required: true,
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      projectNamespace: {
-        type: String,
-        required: true,
-      },
-      issuableType: {
-        type: String,
-        required: false,
-        default: 'issue',
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+export default {
+  components: {
+    descriptionComponent,
+    titleComponent,
+    editedComponent,
+    formComponent,
+  },
+  mixins: [recaptchaModalImplementor],
+  props: {
+    endpoint: {
+      required: true,
+      type: String,
     },
-    data() {
-      const store = new Store({
-        titleHtml: this.initialTitleHtml,
-        titleText: this.initialTitleText,
-        descriptionHtml: this.initialDescriptionHtml,
-        descriptionText: this.initialDescriptionText,
-        updatedAt: this.updatedAt,
-        updatedByName: this.updatedByName,
-        updatedByPath: this.updatedByPath,
-        taskStatus: this.initialTaskStatus,
-      });
+    updateEndpoint: {
+      required: true,
+      type: String,
+    },
+    canUpdate: {
+      required: true,
+      type: Boolean,
+    },
+    canDestroy: {
+      required: true,
+      type: Boolean,
+    },
+    showInlineEditButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    issuableRef: {
+      type: String,
+      required: true,
+    },
+    initialTitleHtml: {
+      type: String,
+      required: true,
+    },
+    initialTitleText: {
+      type: String,
+      required: true,
+    },
+    initialDescriptionHtml: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialDescriptionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialTaskStatus: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
+    },
+    markdownDocsPath: {
+      type: String,
+      required: true,
+    },
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    const store = new Store({
+      titleHtml: this.initialTitleHtml,
+      titleText: this.initialTitleText,
+      descriptionHtml: this.initialDescriptionHtml,
+      descriptionText: this.initialDescriptionText,
+      updatedAt: this.updatedAt,
+      updatedByName: this.updatedByName,
+      updatedByPath: this.updatedByPath,
+      taskStatus: this.initialTaskStatus,
+    });
 
-      return {
-        store,
-        state: store.state,
-        showForm: false,
-      };
-    },
-    computed: {
-      formState() {
-        return this.store.formState;
-      },
-      hasUpdated() {
-        return !!this.state.updatedAt;
-      },
-      issueChanged() {
-        const descriptionChanged =
-          this.initialDescriptionText !== this.store.formState.description;
-        const titleChanged =
-          this.initialTitleText !== this.store.formState.title;
-        return descriptionChanged || titleChanged;
-      },
+    return {
+      store,
+      state: store.state,
+      showForm: false,
+    };
+  },
+  computed: {
+    formState() {
+      return this.store.formState;
     },
-    created() {
-      this.service = new Service(this.endpoint);
-      this.poll = new Poll({
-        resource: this.service,
-        method: 'getData',
-        successCallback: res => this.store.updateState(res.data),
-        errorCallback(err) {
-          throw new Error(err);
-        },
-      });
+    hasUpdated() {
+      return !!this.state.updatedAt;
+    },
+    issueChanged() {
+      const descriptionChanged = this.initialDescriptionText !== this.store.formState.description;
+      const titleChanged = this.initialTitleText !== this.store.formState.title;
+      return descriptionChanged || titleChanged;
+    },
+  },
+  created() {
+    this.service = new Service(this.endpoint);
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'getData',
+      successCallback: res => this.store.updateState(res.data),
+      errorCallback(err) {
+        throw new Error(err);
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.poll.makeRequest();
+    }
 
+    Visibility.change(() => {
       if (!Visibility.hidden()) {
-        this.poll.makeRequest();
+        this.poll.restart();
+      } else {
+        this.poll.stop();
       }
+    });
 
-      Visibility.change(() => {
-        if (!Visibility.hidden()) {
-          this.poll.restart();
-        } else {
-          this.poll.stop();
-        }
-      });
-
-      window.addEventListener('beforeunload', this.handleBeforeUnloadEvent);
+    window.addEventListener('beforeunload', this.handleBeforeUnloadEvent);
 
-      eventHub.$on('delete.issuable', this.deleteIssuable);
-      eventHub.$on('update.issuable', this.updateIssuable);
-      eventHub.$on('close.form', this.closeForm);
-      eventHub.$on('open.form', this.openForm);
-    },
-    beforeDestroy() {
-      eventHub.$off('delete.issuable', this.deleteIssuable);
-      eventHub.$off('update.issuable', this.updateIssuable);
-      eventHub.$off('close.form', this.closeForm);
-      eventHub.$off('open.form', this.openForm);
-      window.removeEventListener('beforeunload', this.handleBeforeUnloadEvent);
-    },
-    methods: {
-      handleBeforeUnloadEvent(e) {
-        const event = e;
-        if (this.showForm && this.issueChanged) {
-          event.returnValue = 'Are you sure you want to lose your issue information?';
-        }
-        return undefined;
-      },
+    eventHub.$on('delete.issuable', this.deleteIssuable);
+    eventHub.$on('update.issuable', this.updateIssuable);
+    eventHub.$on('close.form', this.closeForm);
+    eventHub.$on('open.form', this.openForm);
+  },
+  beforeDestroy() {
+    eventHub.$off('delete.issuable', this.deleteIssuable);
+    eventHub.$off('update.issuable', this.updateIssuable);
+    eventHub.$off('close.form', this.closeForm);
+    eventHub.$off('open.form', this.openForm);
+    window.removeEventListener('beforeunload', this.handleBeforeUnloadEvent);
+  },
+  methods: {
+    handleBeforeUnloadEvent(e) {
+      const event = e;
+      if (this.showForm && this.issueChanged) {
+        event.returnValue = 'Are you sure you want to lose your issue information?';
+      }
+      return undefined;
+    },
 
-      openForm() {
-        if (!this.showForm) {
-          this.showForm = true;
-          this.store.setFormState({
-            title: this.state.titleText,
-            description: this.state.descriptionText,
-            lockedWarningVisible: false,
-            updateLoading: false,
-          });
-        }
-      },
-      closeForm() {
-        this.showForm = false;
-      },
+    openForm() {
+      if (!this.showForm) {
+        this.showForm = true;
+        this.store.setFormState({
+          title: this.state.titleText,
+          description: this.state.descriptionText,
+          lockedWarningVisible: false,
+          updateLoading: false,
+        });
+      }
+    },
+    closeForm() {
+      this.showForm = false;
+    },
 
-      updateIssuable() {
-        return this.service.updateIssuable(this.store.formState)
-          .then(res => res.data)
-          .then(data => this.checkForSpam(data))
-          .then((data) => {
-            if (window.location.pathname !== data.web_url) {
-              visitUrl(data.web_url);
-            }
+    updateIssuable() {
+      return this.service
+        .updateIssuable(this.store.formState)
+        .then(res => res.data)
+        .then(data => this.checkForSpam(data))
+        .then(data => {
+          if (window.location.pathname !== data.web_url) {
+            visitUrl(data.web_url);
+          }
 
-            return this.service.getData();
-          })
-          .then(res => res.data)
-          .then((data) => {
-            this.store.updateState(data);
+          return this.service.getData();
+        })
+        .then(res => res.data)
+        .then(data => {
+          this.store.updateState(data);
+          eventHub.$emit('close.form');
+        })
+        .catch(error => {
+          if (error && error.name === 'SpamError') {
+            this.openRecaptcha();
+          } else {
             eventHub.$emit('close.form');
-          })
-          .catch((error) => {
-            if (error && error.name === 'SpamError') {
-              this.openRecaptcha();
-            } else {
-              eventHub.$emit('close.form');
-              window.Flash(`Error updating ${this.issuableType}`);
-            }
-          });
-      },
-
-      closeRecaptchaModal() {
-        this.store.setFormState({
-          updateLoading: false,
+            window.Flash(`Error updating ${this.issuableType}`);
+          }
         });
+    },
 
-        this.closeRecaptcha();
-      },
+    closeRecaptchaModal() {
+      this.store.setFormState({
+        updateLoading: false,
+      });
 
-      deleteIssuable() {
-        this.service.deleteIssuable()
-          .then(res => res.data)
-          .then((data) => {
-            // Stop the poll so we don't get 404's with the issuable not existing
-            this.poll.stop();
+      this.closeRecaptcha();
+    },
 
-            visitUrl(data.web_url);
-          })
-          .catch(() => {
-            eventHub.$emit('close.form');
-            window.Flash(`Error deleting ${this.issuableType}`);
-          });
-      },
+    deleteIssuable() {
+      this.service
+        .deleteIssuable()
+        .then(res => res.data)
+        .then(data => {
+          // Stop the poll so we don't get 404's with the issuable not existing
+          this.poll.stop();
+
+          visitUrl(data.web_url);
+        })
+        .catch(() => {
+          eventHub.$emit('close.form');
+          window.Flash(`Error deleting ${this.issuableType}`);
+        });
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 1174177f561..461cb3271b7 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -1,110 +1,105 @@
 <script>
-  import $ from 'jquery';
-  import animateMixin from '../mixins/animate';
-  import TaskList from '../../task_list';
-  import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
+import $ from 'jquery';
+import animateMixin from '../mixins/animate';
+import TaskList from '../../task_list';
+import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
-  export default {
-    mixins: [
-      animateMixin,
-      recaptchaModalImplementor,
-    ],
+export default {
+  mixins: [animateMixin, recaptchaModalImplementor],
 
-    props: {
-      canUpdate: {
-        type: Boolean,
-        required: true,
-      },
-      descriptionHtml: {
-        type: String,
-        required: true,
-      },
-      descriptionText: {
-        type: String,
-        required: true,
-      },
-      taskStatus: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      issuableType: {
-        type: String,
-        required: false,
-        default: 'issue',
-      },
-      updateUrl: {
-        type: String,
-        required: false,
-        default: null,
-      },
+  props: {
+    canUpdate: {
+      type: Boolean,
+      required: true,
     },
-    data() {
-      return {
-        preAnimation: false,
-        pulseAnimation: false,
-      };
+    descriptionHtml: {
+      type: String,
+      required: true,
     },
-    watch: {
-      descriptionHtml() {
-        this.animateChange();
+    descriptionText: {
+      type: String,
+      required: true,
+    },
+    taskStatus: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+    updateUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      preAnimation: false,
+      pulseAnimation: false,
+    };
+  },
+  watch: {
+    descriptionHtml() {
+      this.animateChange();
 
-        this.$nextTick(() => {
-          this.renderGFM();
-        });
-      },
-      taskStatus() {
-        this.updateTaskStatusText();
-      },
+      this.$nextTick(() => {
+        this.renderGFM();
+      });
     },
-    mounted() {
-      this.renderGFM();
+    taskStatus() {
       this.updateTaskStatusText();
     },
-    methods: {
-      renderGFM() {
-        $(this.$refs['gfm-content']).renderGFM();
+  },
+  mounted() {
+    this.renderGFM();
+    this.updateTaskStatusText();
+  },
+  methods: {
+    renderGFM() {
+      $(this.$refs['gfm-content']).renderGFM();
 
-        if (this.canUpdate) {
-          // eslint-disable-next-line no-new
-          new TaskList({
-            dataType: this.issuableType,
-            fieldName: 'description',
-            selector: '.detail-page-description',
-            onSuccess: this.taskListUpdateSuccess.bind(this),
-          });
-        }
-      },
+      if (this.canUpdate) {
+        // eslint-disable-next-line no-new
+        new TaskList({
+          dataType: this.issuableType,
+          fieldName: 'description',
+          selector: '.detail-page-description',
+          onSuccess: this.taskListUpdateSuccess.bind(this),
+        });
+      }
+    },
 
-      taskListUpdateSuccess(data) {
-        try {
-          this.checkForSpam(data);
-          this.closeRecaptcha();
-        } catch (error) {
-          if (error && error.name === 'SpamError') this.openRecaptcha();
-        }
-      },
+    taskListUpdateSuccess(data) {
+      try {
+        this.checkForSpam(data);
+        this.closeRecaptcha();
+      } catch (error) {
+        if (error && error.name === 'SpamError') this.openRecaptcha();
+      }
+    },
 
-      updateTaskStatusText() {
-        const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
-        const $issuableHeader = $('.issuable-meta');
-        const $tasks = $('#task_status', $issuableHeader);
-        const $tasksShort = $('#task_status_short', $issuableHeader);
+    updateTaskStatusText() {
+      const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
+      const $issuableHeader = $('.issuable-meta');
+      const $tasks = $('#task_status', $issuableHeader);
+      const $tasksShort = $('#task_status_short', $issuableHeader);
 
-        if (taskRegexMatches) {
-          $tasks.text(this.taskStatus);
-          $tasksShort.text(
-            `${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ?
-            's' :
-            ''}`,
-          );
-        } else {
-          $tasks.text('');
-          $tasksShort.text('');
-        }
-      },
+      if (taskRegexMatches) {
+        $tasks.text(this.taskStatus);
+        $tasksShort.text(
+          `${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`,
+        );
+      } else {
+        $tasks.text('');
+        $tasksShort.text('');
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index c3d39082714..5dda35d64bb 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -1,64 +1,64 @@
 <script>
-  import { __, sprintf } from '~/locale';
-  import updateMixin from '../mixins/update';
-  import eventHub from '../event_hub';
+import { __, sprintf } from '~/locale';
+import updateMixin from '../mixins/update';
+import eventHub from '../event_hub';
 
-  const issuableTypes = {
-    issue: __('Issue'),
-    epic: __('Epic'),
-  };
+const issuableTypes = {
+  issue: __('Issue'),
+  epic: __('Epic'),
+};
 
-  export default {
-    mixins: [updateMixin],
-    props: {
-      canDestroy: {
-        type: Boolean,
-        required: true,
-      },
-      formState: {
-        type: Object,
-        required: true,
-      },
-      showDeleteButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      issuableType: {
-        type: String,
-        required: true,
-      },
+export default {
+  mixins: [updateMixin],
+  props: {
+    canDestroy: {
+      type: Boolean,
+      required: true,
     },
-    data() {
-      return {
-        deleteLoading: false,
-      };
+    formState: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      isSubmitEnabled() {
-        return this.formState.title.trim() !== '';
-      },
-      shouldShowDeleteButton() {
-        return this.canDestroy && this.showDeleteButton;
-      },
+    showDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    methods: {
-      closeForm() {
-        eventHub.$emit('close.form');
-      },
-      deleteIssuable() {
-        const confirmMessage = sprintf(__('%{issuableType} will be removed! Are you sure?'), {
-          issuableType: issuableTypes[this.issuableType],
-        });
-        // eslint-disable-next-line no-alert
-        if (window.confirm(confirmMessage)) {
-          this.deleteLoading = true;
+    issuableType: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      deleteLoading: false,
+    };
+  },
+  computed: {
+    isSubmitEnabled() {
+      return this.formState.title.trim() !== '';
+    },
+    shouldShowDeleteButton() {
+      return this.canDestroy && this.showDeleteButton;
+    },
+  },
+  methods: {
+    closeForm() {
+      eventHub.$emit('close.form');
+    },
+    deleteIssuable() {
+      const confirmMessage = sprintf(__('%{issuableType} will be removed! Are you sure?'), {
+        issuableType: issuableTypes[this.issuableType],
+      });
+      // eslint-disable-next-line no-alert
+      if (window.confirm(confirmMessage)) {
+        this.deleteLoading = true;
 
-          eventHub.$emit('delete.issuable');
-        }
-      },
+        eventHub.$emit('delete.issuable');
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index 05cd976f196..73ecb26c28d 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -1,33 +1,33 @@
 <script>
-  import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 
-  export default {
-    components: {
-      timeAgoTooltip,
+export default {
+  components: {
+    timeAgoTooltip,
+  },
+  props: {
+    updatedAt: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      updatedAt: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    updatedByName: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasUpdatedBy() {
-        return this.updatedByName && this.updatedByPath;
-      },
+    updatedByPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-  };
+  },
+  computed: {
+    hasUpdatedBy() {
+      return this.updatedByName && this.updatedByPath;
+    },
+  },
+};
 </script>
 
 <template>
@@ -53,4 +53,3 @@
     </span>
   </small>
 </template>
-
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 1a78c59d715..e9e96a985a7 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -1,45 +1,45 @@
 <script>
-  import updateMixin from '../../mixins/update';
-  import markdownField from '../../../vue_shared/components/markdown/field.vue';
+import updateMixin from '../../mixins/update';
+import markdownField from '../../../vue_shared/components/markdown/field.vue';
 
-  export default {
-    components: {
-      markdownField,
+export default {
+  components: {
+    markdownField,
+  },
+  mixins: [updateMixin],
+  props: {
+    formState: {
+      type: Object,
+      required: true,
     },
-    mixins: [updateMixin],
-    props: {
-      formState: {
-        type: Object,
-        required: true,
-      },
-      markdownPreviewPath: {
-        type: String,
-        required: true,
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      this.$refs.textarea.focus();
+    markdownDocsPath: {
+      type: String,
+      required: true,
     },
-  };
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  mounted() {
+    this.$refs.textarea.focus();
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
index e90d9fad94e..e433bf66cfc 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -1,46 +1,46 @@
 <script>
-  import $ from 'jquery';
-  import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
+import $ from 'jquery';
+import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
 
-  export default {
-    props: {
-      formState: {
-        type: Object,
-        required: true,
-      },
-      issuableTemplates: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      projectNamespace: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    formState: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      issuableTemplatesJson() {
-        return JSON.stringify(this.issuableTemplates);
-      },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
-    mounted() {
-      // Create the editor for the template
-      const editor = document.querySelector('.detail-page-description .note-textarea') || {};
-      editor.setValue = (val) => {
-        this.formState.description = val;
-      };
-      editor.getValue = () => this.formState.description;
-
-      this.issuableTemplate = new IssuableTemplateSelectors({
-        $dropdowns: $(this.$refs.toggle),
-        editor,
-      });
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
     },
-  };
+  },
+  computed: {
+    issuableTemplatesJson() {
+      return JSON.stringify(this.issuableTemplates);
+    },
+  },
+  mounted() {
+    // Create the editor for the template
+    const editor = document.querySelector('.detail-page-description .note-textarea') || {};
+    editor.setValue = val => {
+      this.formState.description = val;
+    };
+    editor.getValue = () => this.formState.description;
+
+    this.issuableTemplate = new IssuableTemplateSelectors({
+      $dropdowns: $(this.$refs.toggle),
+      editor,
+    });
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index b7f2b1a6050..11f4153b8d5 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -1,15 +1,15 @@
 <script>
-  import updateMixin from '../../mixins/update';
+import updateMixin from '../../mixins/update';
 
-  export default {
-    mixins: [updateMixin],
-    props: {
-      formState: {
-        type: Object,
-        required: true,
-      },
+export default {
+  mixins: [updateMixin],
+  props: {
+    formState: {
+      type: Object,
+      required: true,
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 03d8d0ec67c..3b430d92912 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -1,79 +1,79 @@
 <script>
-  import lockedWarning from './locked_warning.vue';
-  import titleField from './fields/title.vue';
-  import descriptionField from './fields/description.vue';
-  import editActions from './edit_actions.vue';
-  import descriptionTemplate from './fields/description_template.vue';
+import lockedWarning from './locked_warning.vue';
+import titleField from './fields/title.vue';
+import descriptionField from './fields/description.vue';
+import editActions from './edit_actions.vue';
+import descriptionTemplate from './fields/description_template.vue';
 
-  export default {
-    components: {
-      lockedWarning,
-      titleField,
-      descriptionField,
-      descriptionTemplate,
-      editActions,
+export default {
+  components: {
+    lockedWarning,
+    titleField,
+    descriptionField,
+    descriptionTemplate,
+    editActions,
+  },
+  props: {
+    canDestroy: {
+      type: Boolean,
+      required: true,
     },
-    props: {
-      canDestroy: {
-        type: Boolean,
-        required: true,
-      },
-      formState: {
-        type: Object,
-        required: true,
-      },
-      issuableTemplates: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      issuableType: {
-        type: String,
-        required: true,
-      },
-      markdownPreviewPath: {
-        type: String,
-        required: true,
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      projectNamespace: {
-        type: String,
-        required: true,
-      },
-      showDeleteButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    formState: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      hasIssuableTemplates() {
-        return this.issuableTemplates.length;
-      },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
-  };
+    issuableType: {
+      type: String,
+      required: true,
+    },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
+    },
+    markdownDocsPath: {
+      type: String,
+      required: true,
+    },
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
+    },
+    showDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    hasIssuableTemplates() {
+      return this.issuableTemplates.length;
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
index ad0d40faf32..0682c6f2a35 100644
--- a/app/assets/javascripts/issue_show/components/locked_warning.vue
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -1,11 +1,11 @@
 <script>
-  export default {
-    computed: {
-      currentPath() {
-        return window.location.pathname;
-      },
+export default {
+  computed: {
+    currentPath() {
+      return window.location.pathname;
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index af8b0414266..32044d6da25 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -25,8 +25,10 @@ export default class Store {
   }
 
   stateShouldUpdate(data) {
-    return this.state.titleText !== data.title_text ||
-      this.state.descriptionText !== data.description_text;
+    return (
+      this.state.titleText !== data.title_text ||
+      this.state.descriptionText !== data.description_text
+    );
   }
 
   setFormState(state) {