Merge branch 'prettify-all-the-things-2' into 'master'

Prettify all the things (part 2)

See merge request gitlab-org/gitlab-ce!22250

app/assets/javascripts/issue_show/components/description.vue

 <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>

app/assets/javascripts/issue_show/components/edit_actions.vue

 <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>

app/assets/javascripts/issue_show/components/edited.vue

 <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>
-

app/assets/javascripts/issue_show/components/fields/description.vue

 <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>

app/assets/javascripts/issue_show/components/fields/description_template.vue

 <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>

app/assets/javascripts/issue_show/components/fields/title.vue

 <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>

app/assets/javascripts/issue_show/components/form.vue

 <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>

app/assets/javascripts/issue_show/components/locked_warning.vue

 <script>
-  export default {
-    computed: {
-      currentPath() {
-        return window.location.pathname;
-      },
+export default {
+  computed: {
+    currentPath() {
+      return window.location.pathname;
     },
-  };
+  },
+};
 </script>
 
 <template>

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) {

app/assets/javascripts/jobs/components/artifacts_block.vue

 <script>
-  import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-  import timeagoMixin from '~/vue_shared/mixins/timeago';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 
-  export default {
-    components: {
-      TimeagoTooltip,
+export default {
+  components: {
+    TimeagoTooltip,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    artifact: {
+      type: Object,
+      required: true,
     },
-    mixins: [
-      timeagoMixin,
-    ],
-    props: {
-      artifact: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    isExpired() {
+      return this.artifact.expired;
     },
-    computed: {
-      isExpired() {
-        return this.artifact.expired;
-      },
-      // Only when the key is `false` we can render this block
-      willExpire() {
-        return this.artifact.expired === false;
-      },
+    // Only when the key is `false` we can render this block
+    willExpire() {
+      return this.artifact.expired === false;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="block">

app/assets/javascripts/jobs/components/commit_block.vue

 <script>
-  import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
-  export default {
-    components: {
-      ClipboardButton,
+export default {
+  components: {
+    ClipboardButton,
+  },
+  props: {
+    commit: {
+      type: Object,
+      required: true,
     },
-    props: {
-      commit: {
-        type: Object,
-        required: true,
-      },
-      mergeRequest: {
-        type: Object,
-        required: false,
-        default: null,
-      },
-      isLastBlock: {
-        type: Boolean,
-        required: true,
-      },
+    mergeRequest: {
+      type: Object,
+      required: false,
+      default: null,
     },
-  };
+    isLastBlock: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <div

app/assets/javascripts/jobs/components/empty_state.vue

 <script>
-  export default {
-    props: {
-      illustrationPath: {
-        type: String,
-        required: true,
-      },
-      illustrationSizeClass: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      content: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      action: {
-        type: Object,
-        required: false,
-        default: null,
-        validator(value) {
-          return (
-            value === null ||
-            (Object.prototype.hasOwnProperty.call(value, 'path') &&
-              Object.prototype.hasOwnProperty.call(value, 'method') &&
-              Object.prototype.hasOwnProperty.call(value, 'button_title'))
-          );
-        },
+export default {
+  props: {
+    illustrationPath: {
+      type: String,
+      required: true,
+    },
+    illustrationSizeClass: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    content: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    action: {
+      type: Object,
+      required: false,
+      default: null,
+      validator(value) {
+        return (
+          value === null ||
+          (Object.prototype.hasOwnProperty.call(value, 'path') &&
+            Object.prototype.hasOwnProperty.call(value, 'method') &&
+            Object.prototype.hasOwnProperty.call(value, 'button_title'))
+        );
       },
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="row empty-state">

app/assets/javascripts/jobs/components/environments_block.vue

 <script>
-  import _ from 'underscore';
-  import CiIcon from '~/vue_shared/components/ci_icon.vue';
-  import { sprintf, __ } from '../../locale';
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import { sprintf, __ } from '../../locale';
 
-  export default {
-    components: {
-      CiIcon,
+export default {
+  components: {
+    CiIcon,
+  },
+  props: {
+    deploymentStatus: {
+      type: Object,
+      required: true,
     },
-    props: {
-      deploymentStatus: {
-        type: Object,
-        required: true,
-      },
-      iconStatus: {
-        type: Object,
-        required: true,
-      },
+    iconStatus: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      environment() {
-        let environmentText;
-        switch (this.deploymentStatus.status) {
-          case 'last':
+  },
+  computed: {
+    environment() {
+      let environmentText;
+      switch (this.deploymentStatus.status) {
+        case 'last':
+          environmentText = sprintf(
+            __('This job is the most recent deployment to %{link}.'),
+            { link: this.environmentLink },
+            false,
+          );
+          break;
+        case 'out_of_date':
+          if (this.hasLastDeployment) {
             environmentText = sprintf(
-              __('This job is the most recent deployment to %{link}.'),
-              { link: this.environmentLink },
+              __(
+                'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
+              ),
+              {
+                environmentLink: this.environmentLink,
+                deploymentLink: this.deploymentLink(`#${this.lastDeployment.iid}`),
+              },
               false,
             );
-            break;
-          case 'out_of_date':
-            if (this.hasLastDeployment) {
-              environmentText = sprintf(
-                __(
-                  'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
-                ),
-                {
-                  environmentLink: this.environmentLink,
-                  deploymentLink: this.deploymentLink(`#${this.lastDeployment.iid}`),
-                },
-                false,
-              );
-            } else {
-              environmentText = sprintf(
-                __('This job is an out-of-date deployment to %{environmentLink}.'),
-                { environmentLink: this.environmentLink },
-                false,
-              );
-            }
-
-            break;
-          case 'failed':
+          } else {
             environmentText = sprintf(
-              __('The deployment of this job to %{environmentLink} did not succeed.'),
+              __('This job is an out-of-date deployment to %{environmentLink}.'),
               { environmentLink: this.environmentLink },
               false,
             );
-            break;
-          case 'creating':
-            if (this.hasLastDeployment) {
-              environmentText = sprintf(
-                __(
-                  'This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}.',
-                ),
-                {
-                  environmentLink: this.environmentLink,
-                  deploymentLink: this.deploymentLink(__('latest deployment')),
-                },
-                false,
-              );
-            } else {
-              environmentText = sprintf(
-                __('This job is creating a deployment to %{environmentLink}.'),
-                { environmentLink: this.environmentLink },
-                false,
-              );
-            }
-            break;
-          default:
-            break;
-        }
-        return environmentText;
-      },
-      environmentLink() {
-        if (this.hasEnvironment) {
-          return sprintf(
-            '%{startLink}%{name}%{endLink}',
-            {
-              startLink: `<a href="${
-                this.deploymentStatus.environment.environment_path
-              }" class="js-environment-link">`,
-              name: _.escape(this.deploymentStatus.environment.name),
-              endLink: '</a>',
-            },
+          }
+
+          break;
+        case 'failed':
+          environmentText = sprintf(
+            __('The deployment of this job to %{environmentLink} did not succeed.'),
+            { environmentLink: this.environmentLink },
             false,
           );
-        }
-        return '';
-      },
-      hasLastDeployment() {
-        return this.hasEnvironment && this.deploymentStatus.environment.last_deployment;
-      },
-      lastDeployment() {
-        return this.hasLastDeployment ? this.deploymentStatus.environment.last_deployment : {};
-      },
-      hasEnvironment() {
-        return !_.isEmpty(this.deploymentStatus.environment);
-      },
-      lastDeploymentPath() {
-        return !_.isEmpty(this.lastDeployment.deployable) ? this.lastDeployment.deployable.build_path : '';
-      },
+          break;
+        case 'creating':
+          if (this.hasLastDeployment) {
+            environmentText = sprintf(
+              __(
+                'This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}.',
+              ),
+              {
+                environmentLink: this.environmentLink,
+                deploymentLink: this.deploymentLink(__('latest deployment')),
+              },
+              false,
+            );
+          } else {
+            environmentText = sprintf(
+              __('This job is creating a deployment to %{environmentLink}.'),
+              { environmentLink: this.environmentLink },
+              false,
+            );
+          }
+          break;
+        default:
+          break;
+      }
+      return environmentText;
     },
-    methods: {
-      deploymentLink(name) {
+    environmentLink() {
+      if (this.hasEnvironment) {
         return sprintf(
           '%{startLink}%{name}%{endLink}',
           {
-            startLink: `<a href="${this.lastDeploymentPath}" class="js-job-deployment-link">`,
-            name,
+            startLink: `<a href="${
+              this.deploymentStatus.environment.environment_path
+            }" class="js-environment-link">`,
+            name: _.escape(this.deploymentStatus.environment.name),
             endLink: '</a>',
           },
           false,
         );
-      },
+      }
+      return '';
+    },
+    hasLastDeployment() {
+      return this.hasEnvironment && this.deploymentStatus.environment.last_deployment;
+    },
+    lastDeployment() {
+      return this.hasLastDeployment ? this.deploymentStatus.environment.last_deployment : {};
+    },
+    hasEnvironment() {
+      return !_.isEmpty(this.deploymentStatus.environment);
+    },
+    lastDeploymentPath() {
+      return !_.isEmpty(this.lastDeployment.deployable)
+        ? this.lastDeployment.deployable.build_path
+        : '';
+    },
+  },
+  methods: {
+    deploymentLink(name) {
+      return sprintf(
+        '%{startLink}%{name}%{endLink}',
+        {
+          startLink: `<a href="${this.lastDeploymentPath}" class="js-job-deployment-link">`,
+          name,
+          endLink: '</a>',
+        },
+        false,
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="prepend-top-default js-environment-container">

app/assets/javascripts/jobs/components/erased_block.vue

 <script>
-  import _ from 'underscore';
-  import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import _ from 'underscore';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
-  export default {
-    components: {
-      TimeagoTooltip,
+export default {
+  components: {
+    TimeagoTooltip,
+  },
+  props: {
+    user: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
-    props: {
-      user: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      erasedAt: {
-        type: String,
-        required: true,
-      },
+    erasedAt: {
+      type: String,
+      required: true,
     },
-    computed: {
-      isErasedByUser() {
-        return !_.isEmpty(this.user);
-      },
+  },
+  computed: {
+    isErasedByUser() {
+      return !_.isEmpty(this.user);
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="prepend-top-default js-build-erased">

app/assets/javascripts/jobs/components/job_log.vue

 <script>
-  export default {
-    name: 'JobLog',
-    props: {
-      trace: {
-        type: String,
-        required: true,
-      },
-      isComplete: {
-        type: Boolean,
-        required: true,
-      },
+export default {
+  name: 'JobLog',
+  props: {
+    trace: {
+      type: String,
+      required: true,
     },
-  };
+    isComplete: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <pre class="build-trace">

app/assets/javascripts/jobs/components/job_log_controllers.vue

 <script>
-  import { polyfillSticky } from '~/lib/utils/sticky';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import { numberToHumanSize } from '~/lib/utils/number_utils';
-  import { sprintf } from '~/locale';
+import { polyfillSticky } from '~/lib/utils/sticky';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { sprintf } from '~/locale';
 
-  export default {
-    components: {
-      Icon,
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    erasePath: {
+      type: String,
+      required: false,
+      default: null,
     },
-    directives: {
-      tooltip,
+    size: {
+      type: Number,
+      required: true,
     },
-    props: {
-      erasePath: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      size: {
-        type: Number,
-        required: true,
-      },
-      rawPath: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      isScrollTopDisabled: {
-        type: Boolean,
-        required: true,
-      },
-      isScrollBottomDisabled: {
-        type: Boolean,
-        required: true,
-      },
-      isScrollingDown: {
-        type: Boolean,
-        required: true,
-      },
-      isTraceSizeVisible: {
-        type: Boolean,
-        required: true,
-      },
+    rawPath: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      jobLogSize() {
-        return sprintf('Showing last %{size} of log -', {
-          size: numberToHumanSize(this.size),
-        });
-      },
+    isScrollTopDisabled: {
+      type: Boolean,
+      required: true,
     },
-    mounted() {
-      polyfillSticky(this.$el);
+    isScrollBottomDisabled: {
+      type: Boolean,
+      required: true,
     },
-    methods: {
-      handleScrollToTop() {
-        this.$emit('scrollJobLogTop');
-      },
-      handleScrollToBottom() {
-        this.$emit('scrollJobLogBottom');
-      },
+    isScrollingDown: {
+      type: Boolean,
+      required: true,
     },
-
-  };
+    isTraceSizeVisible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    jobLogSize() {
+      return sprintf('Showing last %{size} of log -', {
+        size: numberToHumanSize(this.size),
+      });
+    },
+  },
+  mounted() {
+    polyfillSticky(this.$el);
+  },
+  methods: {
+    handleScrollToTop() {
+      this.$emit('scrollJobLogTop');
+    },
+    handleScrollToBottom() {
+      this.$emit('scrollJobLogBottom');
+    },
+  },
+};
 </script>
 <template>
   <div class="top-bar">

app/assets/javascripts/jobs/components/jobs_container.vue

 <script>
-  import _ from 'underscore';
-  import CiIcon from '~/vue_shared/components/ci_icon.vue';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 
-  export default {
-    components: {
-      CiIcon,
-      Icon,
+export default {
+  components: {
+    CiIcon,
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    jobs: {
+      type: Array,
+      required: true,
     },
-    directives: {
-      tooltip,
+    jobId: {
+      type: Number,
+      required: true,
     },
-    props: {
-      jobs: {
-        type: Array,
-        required: true,
-      },
-      jobId: {
-        type: Number,
-        required: true,
-      },
+  },
+  methods: {
+    isJobActive(currentJobId) {
+      return this.jobId === currentJobId;
     },
-    methods: {
-      isJobActive(currentJobId) {
-        return this.jobId === currentJobId;
-      },
-      tooltipText(job) {
-        return `${_.escape(job.name)} - ${job.status.tooltip}`;
-      },
+    tooltipText(job) {
+      return `${_.escape(job.name)} - ${job.status.tooltip}`;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="js-jobs-container builds-container">

app/assets/javascripts/jobs/components/sidebar.vue

 <script>
-  import _ from 'underscore';
-  import { mapActions, mapState } from 'vuex';
-  import timeagoMixin from '~/vue_shared/mixins/timeago';
-  import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import DetailRow from './sidebar_detail_row.vue';
-  import ArtifactsBlock from './artifacts_block.vue';
-  import TriggerBlock from './trigger_block.vue';
-  import CommitBlock from './commit_block.vue';
-  import StagesDropdown from './stages_dropdown.vue';
-  import JobsContainer from './jobs_container.vue';
+import _ from 'underscore';
+import { mapActions, mapState } from 'vuex';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import DetailRow from './sidebar_detail_row.vue';
+import ArtifactsBlock from './artifacts_block.vue';
+import TriggerBlock from './trigger_block.vue';
+import CommitBlock from './commit_block.vue';
+import StagesDropdown from './stages_dropdown.vue';
+import JobsContainer from './jobs_container.vue';
 
-  export default {
-    name: 'JobSidebar',
-    components: {
-      ArtifactsBlock,
-      CommitBlock,
-      DetailRow,
-      Icon,
-      TriggerBlock,
-      StagesDropdown,
-      JobsContainer,
+export default {
+  name: 'JobSidebar',
+  components: {
+    ArtifactsBlock,
+    CommitBlock,
+    DetailRow,
+    Icon,
+    TriggerBlock,
+    StagesDropdown,
+    JobsContainer,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    runnerHelpUrl: {
+      type: String,
+      required: false,
+      default: '',
     },
-    mixins: [timeagoMixin],
-    props: {
-      runnerHelpUrl: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      terminalPath: {
-        type: String,
-        required: false,
-        default: null,
-      },
+    terminalPath: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      ...mapState(['job', 'isLoading', 'stages', 'jobs']),
-      coverage() {
-        return `${this.job.coverage}%`;
-      },
-      duration() {
-        return timeIntervalInWords(this.job.duration);
-      },
-      queued() {
-        return timeIntervalInWords(this.job.queued);
-      },
-      runnerId() {
-        return `${this.job.runner.description} (#${this.job.runner.id})`;
-      },
-      retryButtonClass() {
-        let className =
-          'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
-        className +=
-          this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
-        return className;
-      },
-      hasTimeout() {
-        return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null;
-      },
-      timeout() {
-        if (this.job.metadata == null) {
-          return '';
-        }
+  },
+  computed: {
+    ...mapState(['job', 'isLoading', 'stages', 'jobs']),
+    coverage() {
+      return `${this.job.coverage}%`;
+    },
+    duration() {
+      return timeIntervalInWords(this.job.duration);
+    },
+    queued() {
+      return timeIntervalInWords(this.job.queued);
+    },
+    runnerId() {
+      return `${this.job.runner.description} (#${this.job.runner.id})`;
+    },
+    retryButtonClass() {
+      let className =
+        'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
+      className +=
+        this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
+      return className;
+    },
+    hasTimeout() {
+      return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null;
+    },
+    timeout() {
+      if (this.job.metadata == null) {
+        return '';
+      }
 
-        let t = this.job.metadata.timeout_human_readable;
-        if (this.job.metadata.timeout_source !== '') {
-          t += ` (from ${this.job.metadata.timeout_source})`;
-        }
+      let t = this.job.metadata.timeout_human_readable;
+      if (this.job.metadata.timeout_source !== '') {
+        t += ` (from ${this.job.metadata.timeout_source})`;
+      }
 
-        return t;
-      },
-      renderBlock() {
-        return (
-          this.job.merge_request ||
-          this.job.duration ||
-          this.job.finished_data ||
-          this.job.erased_at ||
-          this.job.queued ||
-          this.job.runner ||
-          this.job.coverage ||
-          this.job.tags.length ||
-          this.job.cancel_path
-        );
-      },
-      hasArtifact() {
-        return !_.isEmpty(this.job.artifact);
-      },
-      hasTriggers() {
-        return !_.isEmpty(this.job.trigger);
-      },
-      hasStages() {
-        return (
-          (this.job &&
-            this.job.pipeline &&
-            this.job.pipeline.stages &&
-            this.job.pipeline.stages.length > 0) ||
-          false
-        );
-      },
-      commit() {
-        return this.job.pipeline.commit || {};
-      },
+      return t;
+    },
+    renderBlock() {
+      return (
+        this.job.merge_request ||
+        this.job.duration ||
+        this.job.finished_data ||
+        this.job.erased_at ||
+        this.job.queued ||
+        this.job.runner ||
+        this.job.coverage ||
+        this.job.tags.length ||
+        this.job.cancel_path
+      );
+    },
+    hasArtifact() {
+      return !_.isEmpty(this.job.artifact);
+    },
+    hasTriggers() {
+      return !_.isEmpty(this.job.trigger);
+    },
+    hasStages() {
+      return (
+        (this.job &&
+          this.job.pipeline &&
+          this.job.pipeline.stages &&
+          this.job.pipeline.stages.length > 0) ||
+        false
+      );
     },
-    methods: {
-      ...mapActions(['fetchJobsForStage']),
+    commit() {
+      return this.job.pipeline.commit || {};
     },
-  };
+  },
+  methods: {
+    ...mapActions(['fetchJobsForStage']),
+  },
+};
 </script>
 <template>
   <aside

app/assets/javascripts/jobs/components/sidebar_detail_row.vue

 <script>
-  export default {
-    name: 'SidebarDetailRow',
-    props: {
-      title: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      value: {
-        type: String,
-        required: true,
-      },
-      helpUrl: {
-        type: String,
-        required: false,
-        default: '',
-      },
+export default {
+  name: 'SidebarDetailRow',
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasTitle() {
-        return this.title.length > 0;
-      },
-      hasHelpURL() {
-        return this.helpUrl.length > 0;
-      },
+    value: {
+      type: String,
+      required: true,
     },
-  };
+    helpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    hasTitle() {
+      return this.title.length > 0;
+    },
+    hasHelpURL() {
+      return this.helpUrl.length > 0;
+    },
+  },
+};
 </script>
 <template>
   <p class="build-detail-row">

app/assets/javascripts/jobs/components/stages_dropdown.vue

 <script>
-  import _ from 'underscore';
-  import CiIcon from '~/vue_shared/components/ci_icon.vue';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import { __ } from '~/locale';
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
 
-  export default {
-    components: {
-      CiIcon,
-      Icon,
+export default {
+  components: {
+    CiIcon,
+    Icon,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
     },
-    props: {
-      pipeline: {
-        type: Object,
-        required: true,
-      },
-      stages: {
-        type: Array,
-        required: true,
-      },
+    stages: {
+      type: Array,
+      required: true,
     },
-    data() {
-      return {
-        selectedStage: this.stages.length > 0 ? this.stages[0].name : __('More'),
-      };
+  },
+  data() {
+    return {
+      selectedStage: this.stages.length > 0 ? this.stages[0].name : __('More'),
+    };
+  },
+  computed: {
+    hasRef() {
+      return !_.isEmpty(this.pipeline.ref);
     },
-    computed: {
-      hasRef() {
-        return !_.isEmpty(this.pipeline.ref);
-      },
+  },
+  watch: {
+    // When the component is initially mounted it may start with an empty stages array.
+    // Once the prop is updated, we set the first stage as the selected one
+    stages(newVal) {
+      if (newVal.length) {
+        this.selectedStage = newVal[0].name;
+      }
     },
-    watch: {
-      // When the component is initially mounted it may start with an empty stages array.
-      // Once the prop is updated, we set the first stage as the selected one
-      stages(newVal) {
-        if (newVal.length) {
-          this.selectedStage = newVal[0].name;
-        }
-      },
+  },
+  methods: {
+    onStageClick(stage) {
+      this.$emit('requestSidebarStageDropdown', stage);
+      this.selectedStage = stage.name;
     },
-    methods: {
-      onStageClick(stage) {
-        this.$emit('requestSidebarStageDropdown', stage);
-        this.selectedStage = stage.name;
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="block-last dropdown">

app/assets/javascripts/jobs/components/trigger_block.vue

 <script>
-  export default {
-    props: {
-      trigger: {
-        type: Object,
-        required: true,
-      },
+export default {
+  props: {
+    trigger: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        areVariablesVisible: false,
-      };
+  },
+  data() {
+    return {
+      areVariablesVisible: false,
+    };
+  },
+  computed: {
+    hasVariables() {
+      return this.trigger.variables && this.trigger.variables.length > 0;
     },
-    computed: {
-      hasVariables() {
-        return this.trigger.variables && this.trigger.variables.length > 0;
-      },
+  },
+  methods: {
+    revealVariables() {
+      this.areVariablesVisible = true;
     },
-    methods: {
-      revealVariables() {
-        this.areVariablesVisible = true;
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>

app/assets/javascripts/jobs/store/index.js

@@ -7,9 +7,10 @@ import mutations from './mutations';
 
 Vue.use(Vuex);
 
-export default () => new Vuex.Store({
-  actions,
-  mutations,
-  getters,
-  state: state(),
-});
+export default () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    getters,
+    state: state(),
+  });

app/assets/javascripts/lib/utils/ajax_cache.js

@@ -4,7 +4,7 @@ import Cache from './cache';
 class AjaxCache extends Cache {
   constructor() {
     super();
-    this.pendingRequests = { };
+    this.pendingRequests = {};
   }
 
   override(endpoint, data) {
@@ -19,12 +19,13 @@ class AjaxCache extends Cache {
     let pendingRequest = this.pendingRequests[endpoint];
 
     if (!pendingRequest) {
-      pendingRequest = axios.get(endpoint)
+      pendingRequest = axios
+        .get(endpoint)
         .then(({ data }) => {
           this.internalStorage[endpoint] = data;
           delete this.pendingRequests[endpoint];
         })
-        .catch((e) => {
+        .catch(e => {
           const error = new Error(`${endpoint}: ${e.message}`);
           error.textStatus = e.message;
 

app/assets/javascripts/lib/utils/axios_utils.js

@@ -7,7 +7,7 @@ axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // Maintain a global counter for active requests
 // see: spec/support/wait_for_requests.rb
-axios.interceptors.request.use((config) => {
+axios.interceptors.request.use(config => {
   window.activeVueResources = window.activeVueResources || 0;
   window.activeVueResources += 1;
 
@@ -15,15 +15,18 @@ axios.interceptors.request.use((config) => {
 });
 
 // Remove the global counter
-axios.interceptors.response.use((config) => {
-  window.activeVueResources -= 1;
-
-  return config;
-}, (e) => {
-  window.activeVueResources -= 1;
-
-  return Promise.reject(e);
-});
+axios.interceptors.response.use(
+  config => {
+    window.activeVueResources -= 1;
+
+    return config;
+  },
+  e => {
+    window.activeVueResources -= 1;
+
+    return Promise.reject(e);
+  },
+);
 
 export default axios;
 

app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js

@@ -93,9 +93,13 @@ export default class LinkedTabs {
 
     const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
 
-    window.history.replaceState({
-      url: newState,
-    }, document.title, newState);
+    window.history.replaceState(
+      {
+        url: newState,
+      },
+      document.title,
+      newState,
+    );
     return newState;
   }
 

app/assets/javascripts/lib/utils/cache.js

 export default class Cache {
   constructor() {
-    this.internalStorage = { };
+    this.internalStorage = {};
   }
 
   get(key) {

app/assets/javascripts/lib/utils/datefix.js

-
-export const pad = (val, len = 2) => (`0${val}`).slice(-len);
+export const pad = (val, len = 2) => `0${val}`.slice(-len);
 
 /**
  * Formats dates in Pickaday
  * @param {String} dateString Date in yyyy-mm-dd format
  * @return {Date} UTC format
  */
-export const parsePikadayDate = (dateString) => {
+export const parsePikadayDate = dateString => {
   const parts = dateString.split('-');
   const year = parseInt(parts[0], 10);
   const month = parseInt(parts[1] - 1, 10);
@@ -20,7 +19,7 @@ export const parsePikadayDate = (dateString) => {
  * @param {Date} date UTC format
  * @return {String} Date formated in yyyy-mm-dd
  */
-export const pikadayToString = (date) => {
+export const pikadayToString = date => {
   const day = pad(date.getDate());
   const month = pad(date.getMonth() + 1);
   const year = date.getFullYear();

app/assets/javascripts/lib/utils/notify.js

@@ -8,7 +8,7 @@ function notificationGranted(message, opts, onclick) {
     return notification.close();
   }, 8000);
 
-  return notification.onclick = onclick || notification.close;
+  return (notification.onclick = onclick || notification.close);
 }
 
 function notifyPermissions() {
@@ -21,7 +21,7 @@ function notifyMe(message, body, icon, onclick) {
   var opts;
   opts = {
     body: body,
-    icon: icon
+    icon: icon,
   };
   // Let's check if the browser supports notifications
   if (!('Notification' in window)) {

app/assets/javascripts/lib/utils/pretty_time.js

@@ -27,10 +27,10 @@ export function parseSeconds(seconds, { daysPerWeek = 5, hoursPerDay = 8 } = {})
 
   let unorderedMinutes = Math.abs(seconds / MINUTES_PER_HOUR);
 
-  return _.mapObject(timePeriodConstraints, (minutesPerPeriod) => {
+  return _.mapObject(timePeriodConstraints, minutesPerPeriod => {
     const periodCount = Math.floor(unorderedMinutes / minutesPerPeriod);
 
-    unorderedMinutes -= (periodCount * minutesPerPeriod);
+    unorderedMinutes -= periodCount * minutesPerPeriod;
 
     return periodCount;
   });
@@ -42,10 +42,14 @@ export function parseSeconds(seconds, { daysPerWeek = 5, hoursPerDay = 8 } = {})
 */
 
 export function stringifyTime(timeObject) {
-  const reducedTime = _.reduce(timeObject, (memo, unitValue, unitName) => {
-    const isNonZero = !!unitValue;
-    return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
-  }, '').trim();
+  const reducedTime = _.reduce(
+    timeObject,
+    (memo, unitValue, unitName) => {
+      const isNonZero = !!unitValue;
+      return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
+    },
+    '',
+  ).trim();
   return reducedTime.length ? reducedTime : '0m';
 }
 
@@ -55,7 +59,5 @@ export function stringifyTime(timeObject) {
 */
 
 export function abbreviateTime(timeStr) {
-  return timeStr.split(' ')
-    .filter(unitStr => unitStr.charAt(0) !== '0')[0];
+  return timeStr.split(' ').filter(unitStr => unitStr.charAt(0) !== '0')[0];
 }
-

app/assets/javascripts/lib/utils/regexp.js

@@ -5,6 +5,7 @@
 
 // Inspired by https://github.com/mishoo/UglifyJS/blob/2bc1d02363db3798d5df41fb5059a19edca9b7eb/lib/parse-js.js#L203
 // Unicode 6.1
-const unicodeLetters = '\\u0041-\\u005A\\u0061-\\u007A\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5\\u03F7-\\u0481\\u048A-\\u0527\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA\\u05F0-\\u05F2\\u0620-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA\\u07F4\\u07F5\\u07FA\\u0800-\\u0815\\u081A\\u0824\\u0828\\u0840-\\u0858\\u08A0\\u08A2-\\u08AC\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971-\\u0977\\u0979-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0CF1\\u0CF2\\u0D05-\\u0D0C\\u0D0E-\\u0D10\\u0D12-\\u0D3A\\u0D3D\\u0D4E\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6\\u0EDC-\\u0EDF\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8C\\u1000-\\u102A\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081\\u108E\\u10A0-\\u10C5\\u10C7\\u10CD\\u10D0-\\u10FA\\u10FC-\\u1248\\u124A-\\u124D\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C\\u166F-\\u167F\\u1681-\\u169A\\u16A0-\\u16EA\\u16EE-\\u16F0\\u1700-\\u170C\\u170E-\\u1711\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u18B0-\\u18F5\\u1900-\\u191C\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19AB\\u19C1-\\u19C7\\u1A00-\\u1A16\\u1A20-\\u1A54\\u1AA7\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF\\u1BBA-\\u1BE5\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1CE9-\\u1CEC\\u1CEE-\\u1CF1\\u1CF5\\u1CF6\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F\\u2090-\\u209C\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2160-\\u2188\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2CE4\\u2CEB-\\u2CEE\\u2CF2\\u2CF3\\u2D00-\\u2D25\\u2D27\\u2D2D\\u2D30-\\u2D67\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005-\\u3007\\u3021-\\u3029\\u3031-\\u3035\\u3038-\\u303C\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D\\u3131-\\u318E\\u31A0-\\u31BA\\u31F0-\\u31FF\\u3400-\\u4DB5\\u4E00-\\u9FCC\\uA000-\\uA48C\\uA4D0-\\uA4FD\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B\\uA640-\\uA66E\\uA67F-\\uA697\\uA6A0-\\uA6EF\\uA717-\\uA71F\\uA722-\\uA788\\uA78B-\\uA78E\\uA790-\\uA793\\uA7A0-\\uA7AA\\uA7F8-\\uA801\\uA803-\\uA805\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA8F2-\\uA8F7\\uA8FB\\uA90A-\\uA925\\uA930-\\uA946\\uA960-\\uA97C\\uA984-\\uA9B2\\uA9CF\\uAA00-\\uAA28\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAA60-\\uAA76\\uAA7A\\uAA80-\\uAAAF\\uAAB1\\uAAB5\\uAAB6\\uAAB9-\\uAABD\\uAAC0\\uAAC2\\uAADB-\\uAADD\\uAAE0-\\uAAEA\\uAAF2-\\uAAF4\\uAB01-\\uAB06\\uAB09-\\uAB0E\\uAB11-\\uAB16\\uAB20-\\uAB26\\uAB28-\\uAB2E\\uABC0-\\uABE2\\uAC00-\\uD7A3\\uD7B0-\\uD7C6\\uD7CB-\\uD7FB\\uF900-\\uFA6D\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC';
+const unicodeLetters =
+  '\\u0041-\\u005A\\u0061-\\u007A\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5\\u03F7-\\u0481\\u048A-\\u0527\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA\\u05F0-\\u05F2\\u0620-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA\\u07F4\\u07F5\\u07FA\\u0800-\\u0815\\u081A\\u0824\\u0828\\u0840-\\u0858\\u08A0\\u08A2-\\u08AC\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971-\\u0977\\u0979-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0CF1\\u0CF2\\u0D05-\\u0D0C\\u0D0E-\\u0D10\\u0D12-\\u0D3A\\u0D3D\\u0D4E\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6\\u0EDC-\\u0EDF\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8C\\u1000-\\u102A\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081\\u108E\\u10A0-\\u10C5\\u10C7\\u10CD\\u10D0-\\u10FA\\u10FC-\\u1248\\u124A-\\u124D\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C\\u166F-\\u167F\\u1681-\\u169A\\u16A0-\\u16EA\\u16EE-\\u16F0\\u1700-\\u170C\\u170E-\\u1711\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u18B0-\\u18F5\\u1900-\\u191C\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19AB\\u19C1-\\u19C7\\u1A00-\\u1A16\\u1A20-\\u1A54\\u1AA7\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF\\u1BBA-\\u1BE5\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1CE9-\\u1CEC\\u1CEE-\\u1CF1\\u1CF5\\u1CF6\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F\\u2090-\\u209C\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2160-\\u2188\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2CE4\\u2CEB-\\u2CEE\\u2CF2\\u2CF3\\u2D00-\\u2D25\\u2D27\\u2D2D\\u2D30-\\u2D67\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005-\\u3007\\u3021-\\u3029\\u3031-\\u3035\\u3038-\\u303C\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D\\u3131-\\u318E\\u31A0-\\u31BA\\u31F0-\\u31FF\\u3400-\\u4DB5\\u4E00-\\u9FCC\\uA000-\\uA48C\\uA4D0-\\uA4FD\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B\\uA640-\\uA66E\\uA67F-\\uA697\\uA6A0-\\uA6EF\\uA717-\\uA71F\\uA722-\\uA788\\uA78B-\\uA78E\\uA790-\\uA793\\uA7A0-\\uA7AA\\uA7F8-\\uA801\\uA803-\\uA805\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA8F2-\\uA8F7\\uA8FB\\uA90A-\\uA925\\uA930-\\uA946\\uA960-\\uA97C\\uA984-\\uA9B2\\uA9CF\\uAA00-\\uAA28\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAA60-\\uAA76\\uAA7A\\uAA80-\\uAAAF\\uAAB1\\uAAB5\\uAAB6\\uAAB9-\\uAABD\\uAAC0\\uAAC2\\uAADB-\\uAADD\\uAAE0-\\uAAEA\\uAAF2-\\uAAF4\\uAB01-\\uAB06\\uAB09-\\uAB0E\\uAB11-\\uAB16\\uAB20-\\uAB26\\uAB28-\\uAB2E\\uABC0-\\uABE2\\uAC00-\\uD7A3\\uD7B0-\\uD7C6\\uD7CB-\\uD7FB\\uF900-\\uFA6D\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC';
 
 export default { unicodeLetters };

app/assets/javascripts/lib/utils/simple_poll.js

@@ -2,7 +2,7 @@ export default (fn, interval = 2000, timeout = 60000) => {
   const startTime = Date.now();
 
   return new Promise((resolve, reject) => {
-    const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+    const stop = arg => (arg instanceof Error ? reject(arg) : resolve(arg));
     const next = () => {
       if (Date.now() - startTime < timeout) {
         setTimeout(fn.bind(null, next, stop), interval);

app/assets/javascripts/lib/utils/sticky.js

@@ -24,7 +24,11 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
   } else if (top > stickyTop && el.classList.contains('is-stuck')) {
     el.classList.remove('is-stuck');
 
-    if (insertPlaceholder && el.nextElementSibling && el.nextElementSibling.classList.contains('sticky-placeholder')) {
+    if (
+      insertPlaceholder &&
+      el.nextElementSibling &&
+      el.nextElementSibling.classList.contains('sticky-placeholder')
+    ) {
       el.nextElementSibling.remove();
     }
   }
@@ -42,11 +46,19 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
 export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
   if (!el) return;
 
-  if (typeof CSS === 'undefined' || !(CSS.supports('(position: -webkit-sticky) or (position: sticky)'))) return;
+  if (
+    typeof CSS === 'undefined' ||
+    !CSS.supports('(position: -webkit-sticky) or (position: sticky)')
+  )
+    return;
 
-  document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder), {
-    passive: true,
-  });
+  document.addEventListener(
+    'scroll',
+    () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder),
+    {
+      passive: true,
+    },
+  );
 };
 
 /**
@@ -55,6 +67,6 @@ export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
  * - If the current environment supports `position: sticky`, do nothing.
  * - Can receive an iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement.
  */
-export const polyfillSticky = (el) => {
+export const polyfillSticky = el => {
   StickyFill.add(el);
 };

app/assets/javascripts/lib/utils/text_markdown.js

@@ -8,12 +8,18 @@ function selectedText(text, textarea) {
 
 function lineBefore(text, textarea) {
   var split;
-  split = text.substring(0, textarea.selectionStart).trim().split('\n');
+  split = text
+    .substring(0, textarea.selectionStart)
+    .trim()
+    .split('\n');
   return split[split.length - 1];
 }
 
 function lineAfter(text, textarea) {
-  return text.substring(textarea.selectionEnd).trim().split('\n')[0];
+  return text
+    .substring(textarea.selectionEnd)
+    .trim()
+    .split('\n')[0];
 }
 
 function blockTagText(text, textArea, blockTag, selected) {
@@ -27,7 +33,7 @@ function blockTagText(text, textArea, blockTag, selected) {
     }
     return selected;
   } else {
-    return blockTag + "\n" + selected + "\n" + blockTag;
+    return blockTag + '\n' + selected + '\n' + blockTag;
   }
 }
 
@@ -58,7 +64,14 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) {
 }
 
 export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }) {
-  var textToInsert, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine, currentLineEmpty, lastNewLine;
+  var textToInsert,
+    inserted,
+    selectedSplit,
+    startChar,
+    removedLastNewLine,
+    removedFirstNewLine,
+    currentLineEmpty,
+    lastNewLine;
   removedLastNewLine = false;
   removedFirstNewLine = false;
   currentLineEmpty = false;
@@ -94,21 +107,23 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr
     if (blockTag != null && blockTag !== '') {
       textToInsert = blockTagText(text, textArea, blockTag, selected);
     } else {
-      textToInsert = selectedSplit.map(function(val) {
-        if (tag.indexOf(textPlaceholder) > -1) {
-          return tag.replace(textPlaceholder, val);
-        }
-        if (val.indexOf(tag) === 0) {
-          return "" + (val.replace(tag, ''));
-        } else {
-          return "" + tag + val;
-        }
-      }).join('\n');
+      textToInsert = selectedSplit
+        .map(function(val) {
+          if (tag.indexOf(textPlaceholder) > -1) {
+            return tag.replace(textPlaceholder, val);
+          }
+          if (val.indexOf(tag) === 0) {
+            return '' + val.replace(tag, '');
+          } else {
+            return '' + tag + val;
+          }
+        })
+        .join('\n');
     }
   } else if (tag.indexOf(textPlaceholder) > -1) {
     textToInsert = tag.replace(textPlaceholder, selected);
   } else {
-    textToInsert = "" + startChar + tag + selected + (wrap ? tag : ' ');
+    textToInsert = '' + startChar + tag + selected + (wrap ? tag : ' ');
   }
 
   if (removedFirstNewLine) {
@@ -120,7 +135,13 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr
   }
 
   insertText(textArea, textToInsert);
-  return moveCursor({ textArea, tag: tag.replace(textPlaceholder, selected), wrap, removedLastNewLine, select });
+  return moveCursor({
+    textArea,
+    tag: tag.replace(textPlaceholder, selected),
+    wrap,
+    removedLastNewLine,
+    select,
+  });
 }
 
 function updateText({ textArea, tag, blockTag, wrap, select }) {
@@ -138,15 +159,18 @@ function replaceRange(s, start, end, substitute) {
 }
 
 export function addMarkdownListeners(form) {
-  return $('.js-md', form).off('click').on('click', function() {
-    const $this = $(this);
-    return updateText({
-      textArea: $this.closest('.md-area').find('textarea'),
-      tag: $this.data('mdTag'),
-      blockTag: $this.data('mdBlock'),
-      wrap: !$this.data('mdPrepend'),
-      select: $this.data('mdSelect') });
-  });
+  return $('.js-md', form)
+    .off('click')
+    .on('click', function() {
+      const $this = $(this);
+      return updateText({
+        textArea: $this.closest('.md-area').find('textarea'),
+        tag: $this.data('mdTag'),
+        blockTag: $this.data('mdBlock'),
+        wrap: !$this.data('mdPrepend'),
+        select: $this.data('mdSelect'),
+      });
+    });
 }
 
 export function removeMarkdownListeners(form) {

app/assets/javascripts/lib/utils/text_utility.js

@@ -8,7 +8,7 @@
  * @returns {String}
  */
 export const addDelimiter = text =>
-  (text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : text);
+  text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : text;
 
 /**
  * Returns '99+' for numbers bigger than 99.
@@ -94,9 +94,7 @@ export function capitalizeFirstCharacter(text) {
  * @return {String}
  */
 export function getFirstCharacterCapitalized(text) {
-  return text
-    ? text.charAt(0).toUpperCase()
-    : '';
+  return text ? text.charAt(0).toUpperCase() : '';
 }
 
 /**
@@ -136,10 +134,9 @@ export const convertToSentenceCase = string => {
  * e.g. HelloWorld => Hello World
  *
  * @param {*} string
-*/
-export const splitCamelCase = string => (
+ */
+export const splitCamelCase = string =>
   string
-  .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
-  .replace(/([a-z\d])([A-Z])/g, '$1 $2')
-  .trim()
-);
+    .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
+    .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+    .trim();

app/assets/javascripts/lib/utils/tick_formats.js

@@ -26,7 +26,7 @@ initDateFormats();
 
   see also https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#tickFormat
   */
-export const dateTickFormat = (date) => {
+export const dateTickFormat = date => {
   if (date.getDate() !== 1) {
     return dateTimeFormats.dayFormat.format(date);
   }

app/assets/javascripts/lib/utils/users_cache.js

@@ -7,21 +7,20 @@ class UsersCache extends Cache {
       return Promise.resolve(this.get(username));
     }
 
-    return Api.users('', { username })
-      .then(({ data }) => {
-        if (!data.length) {
-          throw new Error(`User "${username}" could not be found!`);
-        }
+    return Api.users('', { username }).then(({ data }) => {
+      if (!data.length) {
+        throw new Error(`User "${username}" could not be found!`);
+      }
 
-        if (data.length > 1) {
-          throw new Error(`Expected username "${username}" to be unique!`);
-        }
+      if (data.length > 1) {
+        throw new Error(`Expected username "${username}" to be unique!`);
+      }
 
-        const user = data[0];
-        this.internalStorage[username] = user;
-        return user;
-      });
-      // missing catch is intentional, error handling depends on use case
+      const user = data[0];
+      this.internalStorage[username] = user;
+      return user;
+    });
+    // missing catch is intentional, error handling depends on use case
   }
 }
 

app/assets/javascripts/merge_conflicts/components/diff_file_editor.js

@@ -6,7 +6,7 @@ import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.diffFileEditor = Vue.extend({
@@ -35,10 +35,10 @@ import { __ } from '~/locale';
     computed: {
       classObject() {
         return {
-          'saved': this.saved,
-          'is-loading': this.loading
+          saved: this.saved,
+          'is-loading': this.loading,
         };
-      }
+      },
     },
     watch: {
       ['file.showEditor'](val) {
@@ -49,7 +49,7 @@ import { __ } from '~/locale';
         }
 
         this.loadEditor();
-      }
+      },
     },
     mounted() {
       if (this.file.loadEditor) {
@@ -60,7 +60,8 @@ import { __ } from '~/locale';
       loadEditor() {
         this.loading = true;
 
-        axios.get(this.file.content_path)
+        axios
+          .get(this.file.content_path)
           .then(({ data }) => {
             const content = this.$el.querySelector('pre');
             const fileContent = document.createTextNode(data.content);
@@ -101,7 +102,7 @@ import { __ } from '~/locale';
       },
       acceptDiscardConfirmation(file) {
         this.onAcceptDiscardConfirmation(file);
-      }
-    }
+      },
+    },
   });
 })(window.gl || (window.gl = {}));

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js

@@ -4,7 +4,7 @@ import Vue from 'vue';
 import actionsMixin from '../mixins/line_conflict_actions';
 import utilsMixin from '../mixins/line_conflict_utils';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.parallelConflictLines = Vue.extend({

app/assets/javascripts/merge_conflicts/merge_conflict_store.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   const diffViewType = Cookies.get('diff_view');
@@ -17,11 +17,11 @@ import Cookies from 'js-cookie';
   const DEFAULT_RESOLVE_MODE = INTERACTIVE_RESOLVE_MODE;
   const VIEW_TYPES = {
     INLINE: 'inline',
-    PARALLEL: 'parallel'
+    PARALLEL: 'parallel',
   };
   const CONFLICT_TYPES = {
     TEXT: 'text',
-    TEXT_EDITOR: 'text-editor'
+    TEXT_EDITOR: 'text-editor',
   };
 
   global.mergeConflicts.mergeConflictsStore = {
@@ -31,7 +31,7 @@ import Cookies from 'js-cookie';
       isSubmitting: false,
       isParallel: diffViewType === VIEW_TYPES.PARALLEL,
       diffViewType: diffViewType,
-      conflictsData: {}
+      conflictsData: {},
     },
 
     setConflictsData(data) {
@@ -47,7 +47,7 @@ import Cookies from 'js-cookie';
     },
 
     decorateFiles(files) {
-      files.forEach((file) => {
+      files.forEach(file => {
         file.content = '';
         file.resolutionData = {};
         file.promptDiscardConfirmation = false;
@@ -72,7 +72,7 @@ import Cookies from 'js-cookie';
     setInlineLine(file) {
       file.inlineLines = [];
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         let currentLineType = 'new';
         const { conflict, lines, id } = section;
 
@@ -80,7 +80,7 @@ import Cookies from 'js-cookie';
           file.inlineLines.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if ((type === 'new' || type === 'old') && currentLineType !== type) {
@@ -102,7 +102,7 @@ import Cookies from 'js-cookie';
       file.parallelLines = [];
       const linesObj = { left: [], right: [] };
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         const { conflict, lines, id } = section;
 
         if (conflict) {
@@ -110,7 +110,7 @@ import Cookies from 'js-cookie';
           linesObj.right.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if (conflict) {
@@ -131,10 +131,7 @@ import Cookies from 'js-cookie';
       });
 
       for (let i = 0, len = linesObj.left.length; i < len; i += 1) {
-        file.parallelLines.push([
-          linesObj.right[i],
-          linesObj.left[i]
-        ]);
+        file.parallelLines.push([linesObj.right[i], linesObj.left[i]]);
       }
     },
 
@@ -159,9 +156,9 @@ import Cookies from 'js-cookie';
       const { files } = this.state.conflictsData;
       let count = 0;
 
-      files.forEach((file) => {
+      files.forEach(file => {
         if (file.type === CONFLICT_TYPES.TEXT) {
-          file.sections.forEach((section) => {
+          file.sections.forEach(section => {
             if (section.conflict) {
               count += 1;
             }
@@ -198,7 +195,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isHead: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -229,7 +226,7 @@ import Cookies from 'js-cookie';
         section: isHead ? 'head' : 'origin',
         richText: rich_text,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -243,7 +240,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isOrigin: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -290,14 +287,14 @@ import Cookies from 'js-cookie';
     },
 
     restoreFileLinesState(file) {
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.hasConflict || line.isHeader) {
           line.isSelected = false;
           line.isUnselected = false;
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const isLeftMatch = left.hasConflict || left.isHeader;
@@ -354,7 +351,7 @@ import Cookies from 'js-cookie';
       const initial = 'Commit to source branch';
       const inProgress = 'Committing...';
 
-      return this.state ? this.state.isSubmitting ? inProgress : initial : initial;
+      return this.state ? (this.state.isSubmitting ? inProgress : initial) : initial;
     },
 
     getCommitData() {
@@ -362,13 +359,13 @@ import Cookies from 'js-cookie';
 
       commitData = {
         commit_message: this.state.conflictsData.commitMessage,
-        files: []
+        files: [],
       };
 
-      this.state.conflictsData.files.forEach((file) => {
+      this.state.conflictsData.files.forEach(file => {
         const addFile = {
           old_path: file.old_path,
-          new_path: file.new_path
+          new_path: file.new_path,
         };
 
         if (file.type === CONFLICT_TYPES.TEXT) {
@@ -391,13 +388,13 @@ import Cookies from 'js-cookie';
     handleSelected(file, sectionId, selection) {
       Vue.set(file.resolutionData, sectionId, selection);
 
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.id === sectionId && (line.hasConflict || line.isHeader)) {
           this.markLine(line, selection);
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const hasSameId = right.id === sectionId || left.id === sectionId;
@@ -430,6 +427,6 @@ import Cookies from 'js-cookie';
 
     fileTextTypePresent() {
       return this.state.conflictsData.files.some(f => f.type === CONFLICT_TYPES.TEXT);
-    }
+    },
   };
 })(window.gl || (window.gl = {}));

app/assets/javascripts/monitoring/components/graph.vue

@@ -148,7 +148,7 @@ export default {
       point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
       point.x += 7;
 
-      this.seriesUnderMouse = this.timeSeries.filter((series) => {
+      this.seriesUnderMouse = this.timeSeries.filter(series => {
         const mouseX = series.timeSeriesScaleX.invert(point.x);
         let minDistance = Infinity;
 
@@ -221,21 +221,18 @@ export default {
         .scale(axisYScale)
         .ticks(measurements.yTicks);
 
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.x-axis')
         .call(xAxis);
 
       const width = this.graphWidth;
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.y-axis')
         .call(yAxis)
         .selectAll('.tick')
         .each(function createTickLines(d, i) {
           if (i > 0) {
-            d3
-              .select(this)
+            d3.select(this)
               .select('line')
               .attr('x2', width)
               .attr('class', 'axis-tick');

app/assets/javascripts/monitoring/components/graph/axis.vue

@@ -38,38 +38,25 @@ export default {
   computed: {
     textTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 || 0;
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 || 0;
 
       return `translate(15, ${yCoordinate}) rotate(-90)`;
     },
 
     rectTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 +
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 +
           this.yLabelWidth / 2 || 0;
 
       return `translate(0, ${yCoordinate}) rotate(-90)`;
     },
 
     xPosition() {
-      return (
-        (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 -
-          this.margin.right || 0
-      );
+      return (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 - this.margin.right || 0;
     },
 
     yPosition() {
-      return (
-        this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset || 0
-      );
+      return this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset || 0;
     },
 
     yAxisLabelSentenceCase() {

app/assets/javascripts/monitoring/components/graph/flag.vue

@@ -92,7 +92,8 @@ export default {
   methods: {
     seriesMetricValue(seriesIndex, series) {
       const indexFromCoordinates = this.currentCoordinates[series.metricTag]
-      ? this.currentCoordinates[series.metricTag].currentDataIndex : 0;
+        ? this.currentCoordinates[series.metricTag].currentDataIndex
+        : 0;
       const index = this.deploymentFlagData
         ? this.deploymentFlagData.seriesIndex
         : indexFromCoordinates;

app/assets/javascripts/monitoring/components/graph/track_info.vue

@@ -26,4 +26,3 @@ export default {
     {{ summaryMetrics }}
   </span>
 </template>
-

app/assets/javascripts/monitoring/components/graph/track_line.vue

@@ -33,4 +33,3 @@ export default {
     </svg>
   </td>
 </template>
-

app/assets/javascripts/monitoring/mixins/monitoring_mixins.js

@@ -6,7 +6,7 @@ const mixins = {
       if (!this.reducedDeploymentData) return false;
 
       let dataFound = false;
-      this.reducedDeploymentData = this.reducedDeploymentData.map((d) => {
+      this.reducedDeploymentData = this.reducedDeploymentData.map(d => {
         const deployment = d;
         if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
           dataFound = d.xPos + 1;
@@ -61,7 +61,7 @@ const mixins = {
 
       this.currentCoordinates = {};
 
-      this.seriesUnderMouse.forEach((series) => {
+      this.seriesUnderMouse.forEach(series => {
         const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
         const currentData = series.values[currentDataIndex];
         const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));

app/assets/javascripts/monitoring/services/monitoring_service.js

@@ -8,18 +8,20 @@ const MAX_REQUESTS = 3;
 function backOffRequest(makeRequestCallback) {
   let requestCounter = 0;
   return backOff((next, stop) => {
-    makeRequestCallback().then((resp) => {
-      if (resp.status === statusCodes.NO_CONTENT) {
-        requestCounter += 1;
-        if (requestCounter < MAX_REQUESTS) {
-          next();
+    makeRequestCallback()
+      .then(resp => {
+        if (resp.status === statusCodes.NO_CONTENT) {
+          requestCounter += 1;
+          if (requestCounter < MAX_REQUESTS) {
+            next();
+          } else {
+            stop(new Error('Failed to connect to the prometheus server'));
+          }
         } else {
-          stop(new Error('Failed to connect to the prometheus server'));
+          stop(resp);
         }
-      } else {
-        stop(resp);
-      }
-    }).catch(stop);
+      })
+      .catch(stop);
   });
 }
 
@@ -33,7 +35,7 @@ export default class MonitoringService {
   getGraphsData() {
     return backOffRequest(() => axios.get(this.metricsEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.data) {
           throw new Error(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
         }
@@ -47,22 +49,27 @@ export default class MonitoringService {
     }
     return backOffRequest(() => axios.get(this.deploymentEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.deployments) {
-          throw new Error(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
+          throw new Error(
+            s__('Metrics|Unexpected deployment data response from prometheus endpoint'),
+          );
         }
         return response.deployments;
       });
   }
 
   getEnvironmentsData() {
-    return axios.get(this.environmentsEndpoint)
-    .then(resp => resp.data)
-    .then((response) => {
-      if (!response || !response.environments) {
-        throw new Error(s__('Metrics|There was an error fetching the environments data, please try again'));
-      }
-      return response.environments;
-    });
+    return axios
+      .get(this.environmentsEndpoint)
+      .then(resp => resp.data)
+      .then(response => {
+        if (!response || !response.environments) {
+          throw new Error(
+            s__('Metrics|There was an error fetching the environments data, please try again'),
+          );
+        }
+        return response.environments;
+      });
   }
 }

app/assets/javascripts/monitoring/utils/measurements.js

 export default {
-  small: { // Covers both xs and sm screen sizes
+  small: {
+    // Covers both xs and sm screen sizes
     margin: {
       top: 40,
       right: 40,
@@ -18,7 +19,8 @@ export default {
     },
     axisLabelLineOffset: -20,
   },
-  large: { // This covers both md and lg screen sizes
+  large: {
+    // This covers both md and lg screen sizes
     margin: {
       top: 80,
       right: 80,

app/assets/javascripts/monitoring/utils/multiple_time_series.js

@@ -66,7 +66,8 @@ function queryTimeSeries(query, graphDrawData, lineStyle) {
   // offset the same amount as the original data
   const [minX, maxX] = graphDrawData.xDom;
   const offset = d3.timeMinute(minX) - Number(minX);
-  const datesWithoutGaps = d3.timeSecond.every(60)
+  const datesWithoutGaps = d3.timeSecond
+    .every(60)
     .range(d3.timeMinute.offset(minX, -1), maxX)
     .map(d => d - offset);
 
@@ -208,9 +209,7 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
 
   const timeSeries = queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];
-    return series.concat(
-      queryTimeSeries(query, graphDrawData, lineStyle),
-    );
+    return series.concat(queryTimeSeries(query, graphDrawData, lineStyle));
   }, []);
 
   return {

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

 <script>
-  import Prism from '../../lib/highlight';
-  import Prompt from '../prompt.vue';
+import Prism from '../../lib/highlight';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    props: {
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      rawCode: {
-        type: String,
-        required: true,
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      code() {
-        return this.rawCode;
-      },
-      promptType() {
-        const type = this.type.split('put')[0];
-
-        return type.charAt(0).toUpperCase() + type.slice(1);
-      },
+    type: {
+      type: String,
+      required: true,
+    },
+    rawCode: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      Prism.highlightElement(this.$refs.code);
+  },
+  computed: {
+    code() {
+      return this.rawCode;
+    },
+    promptType() {
+      const type = this.type.split('put')[0];
+
+      return type.charAt(0).toUpperCase() + type.slice(1);
     },
-  };
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  },
+};
 </script>
 
 <template>

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

 <script>
-  /* global katex */
-  import marked from 'marked';
-  import sanitize from 'sanitize-html';
-  import Prompt from './prompt.vue';
+/* global katex */
+import marked from 'marked';
+import sanitize from 'sanitize-html';
+import Prompt from './prompt.vue';
 
-  const renderer = new marked.Renderer();
+const renderer = new marked.Renderer();
 
-  /*
+/*
     Regex to match KaTex blocks.
 
     Supports the following:
@@ -17,7 +17,7 @@
 
     The matched text then goes through the KaTex renderer & then outputs the HTML
   */
-  const katexRegexString = `(
+const katexRegexString = `(
     ^\\\\begin{[a-zA-Z]+}\\s
     |
     ^\\$\\$
@@ -32,66 +32,69 @@
     |
     \\$
   )
-  `.replace(/\s/g, '').trim();
+  `
+  .replace(/\s/g, '')
+  .trim();
 
-  renderer.paragraph = (t) => {
-    let text = t;
-    let inline = false;
+renderer.paragraph = t => {
+  let text = t;
+  let inline = false;
 
-    if (typeof katex !== 'undefined') {
-      const katexString = text.replace(/&amp;/g, '&')
-        .replace(/&=&/g, '\\space=\\space')
-        .replace(/<(\/?)em>/g, '_');
-      const regex = new RegExp(katexRegexString, 'gi');
-      const matchLocation = katexString.search(regex);
-      const numberOfMatches = katexString.match(regex);
+  if (typeof katex !== 'undefined') {
+    const katexString = text
+      .replace(/&amp;/g, '&')
+      .replace(/&=&/g, '\\space=\\space')
+      .replace(/<(\/?)em>/g, '_');
+    const regex = new RegExp(katexRegexString, 'gi');
+    const matchLocation = katexString.search(regex);
+    const numberOfMatches = katexString.match(regex);
 
-      if (numberOfMatches && numberOfMatches.length !== 0) {
-        if (matchLocation > 0) {
-          let matches = regex.exec(katexString);
-          inline = true;
+    if (numberOfMatches && numberOfMatches.length !== 0) {
+      if (matchLocation > 0) {
+        let matches = regex.exec(katexString);
+        inline = true;
 
-          while (matches !== null) {
-            const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
-            text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
-            matches = regex.exec(katexString);
-          }
-        } else {
-          const matches = regex.exec(katexString);
-          text = katex.renderToString(matches[2]);
+        while (matches !== null) {
+          const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
+          text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
+          matches = regex.exec(katexString);
         }
+      } else {
+        const matches = regex.exec(katexString);
+        text = katex.renderToString(matches[2]);
       }
     }
+  }
 
-    return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
-  };
+  return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
+};
 
-  marked.setOptions({
-    sanitize: true,
-    renderer,
-  });
+marked.setOptions({
+  sanitize: true,
+  renderer,
+});
 
-  export default {
-    components: {
-      prompt: Prompt,
-    },
-    props: {
-      cell: {
-        type: Object,
-        required: true,
-      },
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    cell: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      markdown() {
-        return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), {
-          allowedTags: false,
-          allowedAttributes: {
-            '*': ['class'],
-          },
-        });
-      },
+  },
+  computed: {
+    markdown() {
+      return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), {
+        allowedTags: false,
+        allowedAttributes: {
+          '*': ['class'],
+        },
+      });
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -105,13 +108,13 @@
 </template>
 
 <style>
-  .markdown .katex {
-    display: block;
-    text-align: center;
-  }
+.markdown .katex {
+  display: block;
+  text-align: center;
+}
 
-  .markdown .inline-katex .katex {
-    display: inline;
-    text-align: initial;
-  }
+.markdown .inline-katex .katex {
+  display: inline;
+  text-align: initial;
+}
 </style>

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

 <script>
-  import sanitize from 'sanitize-html';
-  import Prompt from '../prompt.vue';
+import sanitize from 'sanitize-html';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    rawCode: {
+      type: String,
+      required: true,
     },
-    props: {
-      rawCode: {
-        type: String,
-        required: true,
-      },
+  },
+  computed: {
+    sanitizedOutput() {
+      return sanitize(this.rawCode, {
+        allowedTags: sanitize.defaults.allowedTags.concat(['img', 'svg']),
+        allowedAttributes: {
+          img: ['src'],
+        },
+      });
     },
-    computed: {
-      sanitizedOutput() {
-        return sanitize(this.rawCode, {
-          allowedTags: sanitize.defaults.allowedTags.concat([
-            'img', 'svg',
-          ]),
-          allowedAttributes: {
-            img: ['src'],
-          },
-        });
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>

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

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

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

 <script>
-  export default {
-    props: {
-      type: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
+export default {
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasKeys() {
-        return this.type !== '' && this.count;
-      },
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-  };
+  },
+  computed: {
+    hasKeys() {
+      return this.type !== '' && this.count;
+    },
+  },
+};
 </script>
 
 <template>
@@ -29,9 +29,9 @@
 </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

 <script>
-  import {
-    MarkdownCell,
-    CodeCell,
-  } from './cells';
+import { MarkdownCell, CodeCell } from './cells';
 
-  export default {
-    components: {
-      'code-cell': CodeCell,
-      'markdown-cell': MarkdownCell,
+export default {
+  components: {
+    'code-cell': CodeCell,
+    'markdown-cell': MarkdownCell,
+  },
+  props: {
+    notebook: {
+      type: Object,
+      required: true,
     },
-    props: {
-      notebook: {
-        type: Object,
-        required: true,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      cells() {
-        if (this.notebook.worksheets) {
-          const data = {
-            cells: [],
-          };
+  },
+  computed: {
+    cells() {
+      if (this.notebook.worksheets) {
+        const data = {
+          cells: [],
+        };
 
-          return this.notebook.worksheets.reduce((cellData, sheet) => {
-            const cellDataCopy = cellData;
-            cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
-            return cellDataCopy;
-          }, data).cells;
-        }
+        return this.notebook.worksheets.reduce((cellData, sheet) => {
+          const cellDataCopy = cellData;
+          cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
+          return cellDataCopy;
+        }, data).cells;
+      }
 
-        return this.notebook.cells;
-      },
-      hasNotebook() {
-        return Object.keys(this.notebook).length;
-      },
+      return this.notebook.cells;
     },
-    methods: {
-      cellType(type) {
-        return `${type}-cell`;
-      },
+    hasNotebook() {
+      return Object.keys(this.notebook).length;
     },
-  };
+  },
+  methods: {
+    cellType(type) {
+      return `${type}-cell`;
+    },
+  },
+};
 </script>
 
 <template>