Prettify blob behaviors and cycle_analytics modules

12 files changed, 214 insertions, 201 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 88570160f26..82b0f523d2e 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -1,28 +1,28 @@
 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
-  import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
+import Icon from '~/vue_shared/components/icon.vue';
+import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
 
-  export default {
-    components: {
-      Icon,
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    documentationLink: {
+      type: String,
+      required: true,
     },
-    props: {
-      documentationLink: {
-        type: String,
-        required: true,
-      },
+  },
+  computed: {
+    iconCycleAnalyticsSplash() {
+      return iconCycleAnalyticsSplash;
     },
-    computed: {
-      iconCycleAnalyticsSplash() {
-        return iconCycleAnalyticsSplash;
-      },
+  },
+  methods: {
+    dismissOverviewDialog() {
+      this.$emit('dismiss-overview-dialog');
     },
-    methods: {
-      dismissOverviewDialog() {
-        this.$emit('dismiss-overview-dialog');
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="landing content-block">
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
index b626b187651..f6a7d9962eb 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
@@ -1,17 +1,17 @@
 <script>
-  import tooltip from '../../vue_shared/directives/tooltip';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: true,
     },
-    props: {
-      count: {
-        type: Number,
-        required: true,
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <span
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
index a71dcf78103..429fef176c3 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
@@ -1,25 +1,25 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      limitWarning,
-      totalTime,
+export default {
+  components: {
+    userAvatarImage,
+    limitWarning,
+    totalTime,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index 312fe75dde4..56e851fa528 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -1,25 +1,25 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      limitWarning,
-      totalTime,
+export default {
+  components: {
+    userAvatarImage,
+    limitWarning,
+    totalTime,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
@@ -73,4 +73,3 @@
     </ul>
   </div>
 </template>
-
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
index cee294b4ac2..54b9da4983a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
@@ -1,31 +1,31 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import iconCommit from '../svg/icon_commit.svg';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import iconCommit from '../svg/icon_commit.svg';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      totalTime,
-      limitWarning,
+export default {
+  components: {
+    userAvatarImage,
+    totalTime,
+    limitWarning,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-    computed: {
-      iconCommit() {
-        return iconCommit;
-      },
+  },
+  computed: {
+    iconCommit() {
+      return iconCommit;
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
@@ -74,4 +74,3 @@
     </ul>
   </div>
 </template>
-
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index d4735d030fc..f9c80d237d7 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -1,27 +1,27 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      totalTime,
-      limitWarning,
-      icon,
+export default {
+  components: {
+    userAvatarImage,
+    totalTime,
+    limitWarning,
+    icon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 22637485c01..e83b66eef86 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -1,33 +1,33 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import iconBranch from '../svg/icon_branch.svg';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import iconBranch from '../svg/icon_branch.svg';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      totalTime,
-      limitWarning,
-      icon,
+export default {
+  components: {
+    userAvatarImage,
+    totalTime,
+    limitWarning,
+    icon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-    computed: {
-      iconBranch() {
-        return iconBranch;
-      },
+  },
+  computed: {
+    iconBranch() {
+      return iconBranch;
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index a0796f299e7..a8196dc879a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -1,35 +1,35 @@
 <script>
-  import iconBuildStatus from '../svg/icon_build_status.svg';
-  import iconBranch from '../svg/icon_branch.svg';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import iconBuildStatus from '../svg/icon_build_status.svg';
+import iconBranch from '../svg/icon_branch.svg';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      totalTime,
-      limitWarning,
-      icon,
+export default {
+  components: {
+    totalTime,
+    limitWarning,
+    icon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-    computed: {
-      iconBuildStatus() {
-        return iconBuildStatus;
-      },
-      iconBranch() {
-        return iconBranch;
-      },
+  },
+  computed: {
+    iconBuildStatus() {
+      return iconBuildStatus;
     },
-  };
+    iconBranch() {
+      return iconBranch;
+    },
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
index 7758bf0cb3f..4db50134208 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
@@ -1,18 +1,18 @@
 <script>
-  export default {
-    props: {
-      time: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
+export default {
+  props: {
+    time: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
-    computed: {
-      hasData() {
-        return Object.keys(this.time).length;
-      },
+  },
+  computed: {
+    hasData() {
+      return Object.keys(this.time).length;
     },
-  };
+  },
+};
 </script>
 <template>
   <span class="total-time">
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 1c43fc3cdc7..4de425b48e7 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -18,7 +18,8 @@ Vue.use(Translate);
 export default () => {
   const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
 
-  new Vue({ // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new Vue({
     el: '#cycle-analytics',
     name: 'CycleAnalytics',
     components: {
@@ -66,14 +67,17 @@ export default () => {
         const $dropdown = $('.js-ca-dropdown');
         const $label = $dropdown.find('.dropdown-label');
 
-        $dropdown.find('li a').off('click').on('click', (e) => {
-          e.preventDefault();
-          const $target = $(e.currentTarget);
-          this.startDate = $target.data('value');
+        $dropdown
+          .find('li a')
+          .off('click')
+          .on('click', e => {
+            e.preventDefault();
+            const $target = $(e.currentTarget);
+            this.startDate = $target.data('value');
 
-          $label.text($target.text().trim());
-          this.fetchCycleAnalyticsData({ startDate: this.startDate });
-        });
+            $label.text($target.text().trim());
+            this.fetchCycleAnalyticsData({ startDate: this.startDate });
+          });
       },
       fetchCycleAnalyticsData(options) {
         const fetchOptions = options || { startDate: this.startDate };
@@ -82,7 +86,7 @@ export default () => {
 
         this.service
           .fetchCycleAnalyticsData(fetchOptions)
-          .then((response) => {
+          .then(response => {
             this.store.setCycleAnalyticsData(response);
             this.selectDefaultStage();
             this.initDropdown();
@@ -115,7 +119,7 @@ export default () => {
             stage,
             startDate: this.startDate,
           })
-          .then((response) => {
+          .then(response => {
             this.isEmptyStage = !response.events.length;
             this.store.setStageEvents(response.events, stage);
             this.isLoadingStage = false;
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
index 4cf416c50e5..a0426301a0a 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
@@ -18,10 +18,7 @@ export default class CycleAnalyticsService {
   }
 
   fetchStageData(options) {
-    const {
-      stage,
-      startDate,
-    } = options;
+    const { stage, startDate } = options;
 
     return this.axios
       .get(`events/${stage.name}.json`, {
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
index a8cd8c20f8f..18fb57c8b4f 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -5,13 +5,27 @@ import { dasherize } from '../lib/utils/text_utility';
 import DEFAULT_EVENT_OBJECTS from './default_event_objects';
 
 const EMPTY_STAGE_TEXTS = {
-  issue: __('The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.'),
-  plan: __('The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.'),
-  code: __('The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.'),
-  test: __('The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.'),
-  review: __('The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.'),
-  staging: __('The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.'),
-  production: __('The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.'),
+  issue: __(
+    'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
+  ),
+  plan: __(
+    'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
+  ),
+  code: __(
+    'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
+  ),
+  test: __(
+    'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
+  ),
+  review: __(
+    'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
+  ),
+  staging: __(
+    'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
+  ),
+  production: __(
+    'The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.',
+  ),
 };
 
 export default {
@@ -31,11 +45,11 @@ export default {
     newData.stages = data.stats || [];
     newData.summary = data.summary || [];
 
-    newData.summary.forEach((item) => {
+    newData.summary.forEach(item => {
       item.value = item.value || '-';
     });
 
-    newData.stages.forEach((item) => {
+    newData.stages.forEach(item => {
       const stageSlug = dasherize(item.name.toLowerCase());
       item.active = false;
       item.isUserAllowed = data.permissions[stageSlug];
@@ -53,7 +67,7 @@ export default {
     this.state.hasError = state;
   },
   deactivateAllStages() {
-    this.state.stages.forEach((stage) => {
+    this.state.stages.forEach(stage => {
       stage.active = false;
     });
   },
@@ -67,7 +81,7 @@ export default {
   decorateEvents(events, stage) {
     const newEvents = [];
 
-    events.forEach((item) => {
+    events.forEach(item => {
       if (!item) return;
 
       const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);