Merge branch 'fl-prettify-pipeline' into 'master'

Prettifies pipeline's javascript code

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

app/assets/javascripts/pipelines/components/blank_state.vue

 <script>
-  export default {
-    name: 'PipelinesSvgState',
-    props: {
-      svgPath: {
-        type: String,
-        required: true,
-      },
+export default {
+  name: 'PipelinesSvgState',
+  props: {
+    svgPath: {
+      type: String,
+      required: true,
+    },
 
-      message: {
-        type: String,
-        required: true,
-      },
+    message: {
+      type: String,
+      required: true,
     },
-  };
+  },
+};
 </script>
 
 <template>

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

 <script>
-  export default {
-    name: 'PipelinesEmptyState',
-    props: {
-      helpPagePath: {
-        type: String,
-        required: true,
-      },
-      emptyStateSvgPath: {
-        type: String,
-        required: true,
-      },
-      canSetCi: {
-        type: Boolean,
-        required: true,
-      },
+export default {
+  name: 'PipelinesEmptyState',
+  props: {
+    helpPagePath: {
+      type: String,
+      required: true,
     },
-  };
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    canSetCi: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <div class="row empty-state js-empty-state">

app/assets/javascripts/pipelines/components/graph/action_component.vue

@@ -41,7 +41,6 @@ export default {
       type: String,
       required: true,
     },
-
   },
   data() {
     return {
@@ -67,7 +66,8 @@ export default {
 
       this.isDisabled = true;
 
-      axios.post(`${this.link}.json`)
+      axios
+        .post(`${this.link}.json`)
         .then(() => {
           this.isDisabled = false;
           this.$emit('pipelineActionRequestComplete');

app/assets/javascripts/pipelines/components/graph/job_name_component.vue

 <script>
-  import ciIcon from '../../../vue_shared/components/ci_icon.vue';
+import ciIcon from '../../../vue_shared/components/ci_icon.vue';
 
-  /**
-   * Component that renders both the CI icon status and the job name.
-   * Used in
-   *  - Badge component
-   *  - Dropdown badge components
-   */
-  export default {
-    components: {
-      ciIcon,
+/**
+ * Component that renders both the CI icon status and the job name.
+ * Used in
+ *  - Badge component
+ *  - Dropdown badge components
+ */
+export default {
+  components: {
+    ciIcon,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
     },
-    props: {
-      name: {
-        type: String,
-        required: true,
-      },
 
-      status: {
-        type: Object,
-        required: true,
-      },
+    status: {
+      type: Object,
+      required: true,
     },
-  };
+  },
+};
 </script>
 <template>
   <span class="ci-job-name-component">

app/assets/javascripts/pipelines/components/header_component.vue

 <script>
-  import ciHeader from '../../vue_shared/components/header_ci_component.vue';
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import ciHeader from '../../vue_shared/components/header_ci_component.vue';
+import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
-  export default {
-    name: 'PipelineHeaderSection',
-    components: {
-      ciHeader,
-      loadingIcon,
+export default {
+  name: 'PipelineHeaderSection',
+  components: {
+    ciHeader,
+    loadingIcon,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
     },
-    props: {
-      pipeline: {
-        type: Object,
-        required: true,
-      },
-      isLoading: {
-        type: Boolean,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        actions: this.getActions(),
-      };
+    isLoading: {
+      type: Boolean,
+      required: true,
     },
+  },
+  data() {
+    return {
+      actions: this.getActions(),
+    };
+  },
 
-    computed: {
-      status() {
-        return this.pipeline.details && this.pipeline.details.status;
-      },
-      shouldRenderContent() {
-        return !this.isLoading && Object.keys(this.pipeline).length;
-      },
+  computed: {
+    status() {
+      return this.pipeline.details && this.pipeline.details.status;
+    },
+    shouldRenderContent() {
+      return !this.isLoading && Object.keys(this.pipeline).length;
     },
+  },
 
-    watch: {
-      pipeline() {
-        this.actions = this.getActions();
-      },
+  watch: {
+    pipeline() {
+      this.actions = this.getActions();
     },
+  },
 
-    methods: {
-      postAction(action) {
-        const index = this.actions.indexOf(action);
+  methods: {
+    postAction(action) {
+      const index = this.actions.indexOf(action);
 
-        this.$set(this.actions[index], 'isLoading', true);
+      this.$set(this.actions[index], 'isLoading', true);
 
-        eventHub.$emit('headerPostAction', action);
-      },
+      eventHub.$emit('headerPostAction', action);
+    },
 
-      getActions() {
-        const actions = [];
+    getActions() {
+      const actions = [];
 
-        if (this.pipeline.retry_path) {
-          actions.push({
-            label: 'Retry',
-            path: this.pipeline.retry_path,
-            cssClass: 'js-retry-button btn btn-inverted-secondary',
-            type: 'button',
-            isLoading: false,
-          });
-        }
+      if (this.pipeline.retry_path) {
+        actions.push({
+          label: 'Retry',
+          path: this.pipeline.retry_path,
+          cssClass: 'js-retry-button btn btn-inverted-secondary',
+          type: 'button',
+          isLoading: false,
+        });
+      }
 
-        if (this.pipeline.cancel_path) {
-          actions.push({
-            label: 'Cancel running',
-            path: this.pipeline.cancel_path,
-            cssClass: 'js-btn-cancel-pipeline btn btn-danger',
-            type: 'button',
-            isLoading: false,
-          });
-        }
+      if (this.pipeline.cancel_path) {
+        actions.push({
+          label: 'Cancel running',
+          path: this.pipeline.cancel_path,
+          cssClass: 'js-btn-cancel-pipeline btn btn-danger',
+          type: 'button',
+          isLoading: false,
+        });
+      }
 
-        return actions;
-      },
+      return actions;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="pipeline-header-container">

app/assets/javascripts/pipelines/components/nav_controls.vue

 <script>
-  import LoadingButton from '../../vue_shared/components/loading_button.vue';
+import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
-  export default {
-    name: 'PipelineNavControls',
-    components: {
-      LoadingButton,
+export default {
+  name: 'PipelineNavControls',
+  components: {
+    LoadingButton,
+  },
+  props: {
+    newPipelinePath: {
+      type: String,
+      required: false,
+      default: null,
     },
-    props: {
-      newPipelinePath: {
-        type: String,
-        required: false,
-        default: null,
-      },
 
-      resetCachePath: {
-        type: String,
-        required: false,
-        default: null,
-      },
+    resetCachePath: {
+      type: String,
+      required: false,
+      default: null,
+    },
 
-      ciLintPath: {
-        type: String,
-        required: false,
-        default: null,
-      },
+    ciLintPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
 
-      isResetCacheButtonLoading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    isResetCacheButtonLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    methods: {
-      onClickResetCache() {
-        this.$emit('resetRunnersCache', this.resetCachePath);
-      },
+  },
+  methods: {
+    onClickResetCache() {
+      this.$emit('resetRunnersCache', this.resetCachePath);
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="nav-controls">

app/assets/javascripts/pipelines/components/pipeline_url.vue

 <script>
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import popover from '../../vue_shared/directives/popover';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import popover from '../../vue_shared/directives/popover';
 
-  export default {
-    components: {
-      userAvatarLink,
+export default {
+  components: {
+    userAvatarLink,
+  },
+  directives: {
+    tooltip,
+    popover,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
-      popover,
+    autoDevopsHelpPath: {
+      type: String,
+      required: true,
     },
-    props: {
-      pipeline: {
-        type: Object,
-        required: true,
-      },
-      autoDevopsHelpPath: {
-        type: String,
-        required: true,
-      },
+  },
+  computed: {
+    user() {
+      return this.pipeline.user;
     },
-    computed: {
-      user() {
-        return this.pipeline.user;
-      },
-      popoverOptions() {
-        return {
-          html: true,
-          trigger: 'focus',
-          placement: 'top',
-          title: `<div class="autodevops-title">
+    popoverOptions() {
+      return {
+        html: true,
+        trigger: 'focus',
+        placement: 'top',
+        title: `<div class="autodevops-title">
             This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b>
           </div>`,
-          content: `<a
+        content: `<a
             class="autodevops-link"
             href="${this.autoDevopsHelpPath}"
             target="_blank"
             rel="noopener noreferrer nofollow">
             Learn more about Auto DevOps
           </a>`,
-        };
-      },
+      };
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">

app/assets/javascripts/pipelines/components/pipelines_actions.vue

 <script>
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import icon from '../../vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import icon from '../../vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    loadingIcon,
+    icon,
+  },
+  props: {
+    actions: {
+      type: Array,
+      required: true,
     },
-    components: {
-      loadingIcon,
-      icon,
-    },
-    props: {
-      actions: {
-        type: Array,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        isLoading: false,
-      };
-    },
-    methods: {
-      onClickAction(endpoint) {
-        this.isLoading = true;
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    onClickAction(endpoint) {
+      this.isLoading = true;
 
-        eventHub.$emit('postAction', endpoint);
-      },
+      eventHub.$emit('postAction', endpoint);
+    },
 
-      isActionDisabled(action) {
-        if (action.playable === undefined) {
-          return false;
-        }
+    isActionDisabled(action) {
+      if (action.playable === undefined) {
+        return false;
+      }
 
-        return !action.playable;
-      },
+      return !action.playable;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="btn-group">

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

 <script>
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import icon from '../../vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    icon,
+  },
+  props: {
+    artifacts: {
+      type: Array,
+      required: true,
     },
-    components: {
-      icon,
-    },
-    props: {
-      artifacts: {
-        type: Array,
-        required: true,
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div

app/assets/javascripts/pipelines/components/pipelines_table.vue

 <script>
-  import Modal from '~/vue_shared/components/gl_modal.vue';
-  import { s__, sprintf } from '~/locale';
-  import PipelinesTableRowComponent from './pipelines_table_row.vue';
-  import eventHub from '../event_hub';
+import Modal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+import PipelinesTableRowComponent from './pipelines_table_row.vue';
+import eventHub from '../event_hub';
 
-  /**
-   * Pipelines Table Component.
-   *
-   * Given an array of objects, renders a table.
-   */
-  export default {
-    components: {
-      PipelinesTableRowComponent,
-      Modal,
+/**
+ * Pipelines Table Component.
+ *
+ * Given an array of objects, renders a table.
+ */
+export default {
+  components: {
+    PipelinesTableRowComponent,
+    Modal,
+  },
+  props: {
+    pipelines: {
+      type: Array,
+      required: true,
     },
-    props: {
-      pipelines: {
-        type: Array,
-        required: true,
-      },
-      updateGraphDropdown: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      autoDevopsHelpPath: {
-        type: String,
-        required: true,
-      },
-      viewType: {
-        type: String,
-        required: true,
-      },
+    updateGraphDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    data() {
-      return {
-        pipelineId: '',
-        endpoint: '',
-        cancelingPipeline: null,
-      };
+    autoDevopsHelpPath: {
+      type: String,
+      required: true,
     },
-    computed: {
-      modalTitle() {
-        return sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
+    viewType: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      pipelineId: '',
+      endpoint: '',
+      cancelingPipeline: null,
+    };
+  },
+  computed: {
+    modalTitle() {
+      return sprintf(
+        s__('Pipeline|Stop pipeline #%{pipelineId}?'),
+        {
           pipelineId: `${this.pipelineId}`,
-        }, false);
-      },
-      modalText() {
-        return sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), {
-          pipelineId: `<strong>#${this.pipelineId}</strong>`,
-        }, false);
-      },
+        },
+        false,
+      );
     },
-    created() {
-      eventHub.$on('openConfirmationModal', this.setModalData);
+    modalText() {
+      return sprintf(
+        s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'),
+        {
+          pipelineId: `<strong>#${this.pipelineId}</strong>`,
+        },
+        false,
+      );
     },
-    beforeDestroy() {
-      eventHub.$off('openConfirmationModal', this.setModalData);
+  },
+  created() {
+    eventHub.$on('openConfirmationModal', this.setModalData);
+  },
+  beforeDestroy() {
+    eventHub.$off('openConfirmationModal', this.setModalData);
+  },
+  methods: {
+    setModalData(data) {
+      this.pipelineId = data.pipelineId;
+      this.endpoint = data.endpoint;
     },
-    methods: {
-      setModalData(data) {
-        this.pipelineId = data.pipelineId;
-        this.endpoint = data.endpoint;
-      },
-      onSubmit() {
-        eventHub.$emit('postAction', this.endpoint);
-        this.cancelingPipeline = this.pipelineId;
-      },
+    onSubmit() {
+      eventHub.$emit('postAction', this.endpoint);
+      this.cancelingPipeline = this.pipelineId;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="ci-table">

app/assets/javascripts/pipelines/components/time_ago.vue

 <script>
-  import iconTimerSvg from 'icons/_icon_timer.svg';
-  import '../../lib/utils/datetime_utility';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import timeagoMixin from '../../vue_shared/mixins/timeago';
+import iconTimerSvg from 'icons/_icon_timer.svg';
+import '../../lib/utils/datetime_utility';
+import tooltip from '../../vue_shared/directives/tooltip';
+import timeagoMixin from '../../vue_shared/mixins/timeago';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    finishedTime: {
+      type: String,
+      required: true,
     },
-    mixins: [
-      timeagoMixin,
-    ],
-    props: {
-      finishedTime: {
-        type: String,
-        required: true,
-      },
-      duration: {
-        type: Number,
-        required: true,
-      },
+    duration: {
+      type: Number,
+      required: true,
     },
-    data() {
-      return {
-        iconTimerSvg,
-      };
+  },
+  data() {
+    return {
+      iconTimerSvg,
+    };
+  },
+  computed: {
+    hasDuration() {
+      return this.duration > 0;
     },
-    computed: {
-      hasDuration() {
-        return this.duration > 0;
-      },
-      hasFinishedTime() {
-        return this.finishedTime !== '';
-      },
-      durationFormated() {
-        const date = new Date(this.duration * 1000);
+    hasFinishedTime() {
+      return this.finishedTime !== '';
+    },
+    durationFormated() {
+      const date = new Date(this.duration * 1000);
 
-        let hh = date.getUTCHours();
-        let mm = date.getUTCMinutes();
-        let ss = date.getSeconds();
+      let hh = date.getUTCHours();
+      let mm = date.getUTCMinutes();
+      let ss = date.getSeconds();
 
-        // left pad
-        if (hh < 10) {
-          hh = `0${hh}`;
-        }
-        if (mm < 10) {
-          mm = `0${mm}`;
-        }
-        if (ss < 10) {
-          ss = `0${ss}`;
-        }
+      // left pad
+      if (hh < 10) {
+        hh = `0${hh}`;
+      }
+      if (mm < 10) {
+        mm = `0${mm}`;
+      }
+      if (ss < 10) {
+        ss = `0${ss}`;
+      }
 
-        return `${hh}:${mm}:${ss}`;
-      },
+      return `${hh}:${mm}:${ss}`;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="table-section section-15 pipelines-time-ago">

app/assets/javascripts/pipelines/mixins/pipelines.js

@@ -75,8 +75,7 @@ export default {
       // Stop polling
       this.poll.stop();
       // Update the table
-      return this.getPipelines()
-        .then(() => this.poll.restart());
+      return this.getPipelines().then(() => this.poll.restart());
     },
     fetchPipelines() {
       if (!this.isMakingRequest) {
@@ -86,9 +85,10 @@ export default {
       }
     },
     getPipelines() {
-      return this.service.getPipelines(this.requestData)
+      return this.service
+        .getPipelines(this.requestData)
         .then(response => this.successCallback(response))
-        .catch((error) => this.errorCallback(error));
+        .catch(error => this.errorCallback(error));
     },
     setCommonData(pipelines) {
       this.store.storePipelines(pipelines);
@@ -118,7 +118,8 @@ export default {
       }
     },
     postAction(endpoint) {
-      this.service.postAction(endpoint)
+      this.service
+        .postAction(endpoint)
         .then(() => this.fetchPipelines())
         .catch(() => Flash(__('An error occurred while making the request.')));
     },

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -31,7 +31,8 @@ export default () => {
       requestRefreshPipelineGraph() {
         // When an action is clicked
         // (wether in the dropdown or in the main nodes, we refresh the big graph)
-        this.mediator.refreshPipeline()
+        this.mediator
+          .refreshPipeline()
           .catch(() => Flash(__('An error occurred while making the request.')));
       },
     },

app/assets/javascripts/pipelines/pipeline_details_mediator.js

@@ -52,7 +52,8 @@ export default class pipelinesMediator {
   refreshPipeline() {
     this.poll.stop();
 
-    return this.service.getPipeline()
+    return this.service
+      .getPipeline()
       .then(response => this.successCallback(response))
       .catch(() => this.errorCallback())
       .finally(() => this.poll.restart());