Merge branch 'reduce-ce-ee-disrepancies-in-js' into 'master'

Harmonize CE and EE JS code

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

app/assets/javascripts/api.js

@@ -9,7 +9,7 @@ const Api = {
   projectsPath: '/api/:version/projects.json',
   projectPath: '/api/:version/projects/:id',
   projectLabelsPath: '/:namespace_path/:project_path/labels',
-  groupLabelsPath: '/groups/:namespace_path/labels',
+  groupLabelsPath: '/groups/:namespace_path/-/labels',
   licensePath: '/api/:version/templates/licenses/:key',
   gitignorePath: '/api/:version/templates/gitignores/:key',
   gitlabCiYmlPath: '/api/:version/templates/gitlab_ci_ymls/:key',
@@ -32,7 +32,7 @@ const Api = {
   },
 
   // Return groups list. Filtered by query
-  groups(query, options, callback) {
+  groups(query, options, callback = $.noop) {
     const url = Api.buildUrl(Api.groupsPath);
     return axios.get(url, {
       params: Object.assign({

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

@@ -7,7 +7,6 @@
     mixins: [
       pipelinesMixin,
     ],
-
     props: {
       endpoint: {
         type: String,

app/assets/javascripts/cycle_analytics/components/stage_review_component.vue

@@ -37,7 +37,7 @@
       >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
+          <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
           <h5 class="item-title merge-merquest-title">
             <a :href="mergeRequest.url">
               {{ mergeRequest.title }}

app/assets/javascripts/diff_notes/diff_notes_bundle.js

@@ -71,7 +71,7 @@ export default () => {
     el: '#resolve-count-app',
     components: {
       'resolve-count': ResolveCount
-    }
+    },
   });
 
   $(window).trigger('resize.nav');

app/assets/javascripts/filtered_search/filtered_search_dropdown.js

@@ -111,6 +111,9 @@ export default class FilteredSearchDropdown {
 
     if (hook) {
       const data = hook.list.data || [];
+
+      if (!data) return;
+
       const results = data.map((o) => {
         const updated = o;
         updated.droplab_hidden = false;

app/assets/javascripts/gl_dropdown.js

@@ -607,7 +607,20 @@ GitLabDropdown = (function() {
   };
 
   GitLabDropdown.prototype.renderItem = function(data, group, index) {
-    var field, fieldName, html, selected, text, url, value;
+    var field, fieldName, html, selected, text, url, value, rowHidden;
+
+    if (!this.options.renderRow) {
+      value = this.options.id ? this.options.id(data) : data.id;
+
+      if (value) {
+        value = value.toString().replace(/'/g, '\\\'');
+      }
+    }
+
+    // Hide element
+    if (this.options.hideRow && this.options.hideRow(value)) {
+      rowHidden = true;
+    }
     if (group == null) {
       group = false;
     }
@@ -616,6 +629,7 @@ GitLabDropdown = (function() {
       index = false;
     }
     html = document.createElement('li');
+
     if (data === 'divider' || data === 'separator') {
       html.className = data;
       return html;
@@ -631,11 +645,9 @@ GitLabDropdown = (function() {
       html = this.options.renderRow.call(this.options, data, this);
     } else {
       if (!selected) {
-        value = this.options.id ? this.options.id(data) : data.id;
         fieldName = this.options.fieldName;
 
         if (value) {
-          value = value.toString().replace(/'/g, '\\\'');
           field = this.dropdown.parent().find(`input[name='${fieldName}'][value='${value}']`);
           if (field.length) {
             selected = true;

app/assets/javascripts/groups/components/item_stats_value.vue

@@ -30,11 +30,11 @@
         default: 'bottom',
       },
       /**
-      * value could either be number or string
-      * as `memberCount` is always passed as string
-      * while `subgroupCount` & `projectCount`
-      * are always number
-      */
+       * value could either be number or string
+       * as `memberCount` is always passed as string
+       * while `subgroupCount` & `projectCount`
+       * are always number
+       */
       value: {
         type: [Number, String],
         required: false,

app/assets/javascripts/labels_select.js

@@ -316,9 +316,9 @@ export default class LabelsSelect {
         },
         multiSelect: $dropdown.hasClass('js-multiselect'),
         vue: $dropdown.hasClass('js-issue-board-sidebar'),
-        clicked: function(options) {
-          const { $el, e, isMarking } = options;
-          const label = options.selectedObj;
+        clicked: function (clickEvent) {
+          const { $el, e, isMarking } = clickEvent;
+          const label = clickEvent.selectedObj;
 
           var isIssueIndex, isMRIndex, page, boardsModel;
           var fadeOutLoader = () => {

app/assets/javascripts/pages/projects/project.js

@@ -50,7 +50,7 @@ export default class Project {
     Project.projectSelectDropdown();
   }
 
-  static projectSelectDropdown () {
+  static projectSelectDropdown() {
     projectSelect();
     $('.project-item-select').on('click', e => Project.changeProject($(e.currentTarget).val()));
   }

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

@@ -7,7 +7,6 @@
       jobComponent,
       dropdownJobComponent,
     },
-
     props: {
       title: {
         type: String,

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

@@ -223,7 +223,8 @@
     <div class="table-section section-10 commit-link">
       <div
         class="table-mobile-header"
-        role="rowheader">
+        role="rowheader"
+      >
         Status
       </div>
       <div class="table-mobile-content">

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

@@ -50,9 +50,7 @@
 
     computed: {
       dropdownClass() {
-        return this.dropdownContent.length > 0 ?
-          'js-builds-dropdown-container' :
-          'js-builds-dropdown-loading';
+        return this.dropdownContent.length > 0 ? 'js-builds-dropdown-container' : 'js-builds-dropdown-loading';
       },
 
       triggerButtonClass() {

app/assets/javascripts/project_find_file.js

@@ -73,7 +73,7 @@ export default class ProjectFindFile {
   // find file
   }
 
-    // files pathes load
+  // files pathes load
   load(url) {
     axios.get(url)
       .then(({ data }) => {
@@ -85,7 +85,7 @@ export default class ProjectFindFile {
       .catch(() => flash(__('An error occurred while loading filenames')));
   }
 
-    // render result
+  // render result
   renderList(filePaths, searchText) {
     var blobItemUrl, filePath, html, i, j, len, matches, results;
     this.element.find(".tree-table > tbody").empty();

app/assets/javascripts/render_gfm.js

 import renderMath from './render_math';
 import renderMermaid from './render_mermaid';
 import syntaxHighlight from './syntax_highlight';
+
 // Render Gitlab flavoured Markdown
 //
 // Delegates to syntax highlight and render math & mermaid diagrams.

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

 <script>
-  import Flash from '../../../flash';
+  import Flash from '~/flash';
   import editForm from './edit_form.vue';
   import issuableMixin from '../../../vue_shared/mixins/issuable';
   import Icon from '../../../vue_shared/components/icon.vue';
@@ -53,8 +53,7 @@
           discussion_locked: locked,
         })
         .then(() => location.reload())
-        .catch(() => Flash(this.__(`Something went wrong trying to
-  change the locked state of this ${this.issuableDisplayName}`)));
+        .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName}`)));
       },
     },
   };

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -107,7 +107,8 @@
       <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
         <div
           class="accept-merge-holder clearfix
-js-toggle-container accept-action media space-children">
+js-toggle-container accept-action media space-children"
+        >
           <button
             type="button"
             class="btn btn-sm btn-reopen btn-success"

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -96,9 +96,7 @@ export default {
             cb.call(null, data);
           }
         })
-        .catch(() => {
-          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
-        });
+        .catch(() => new Flash('Something went wrong. Please try again.'));
     },
     initPolling() {
       this.pollingInterval = new SmartInterval({
@@ -146,9 +144,7 @@ export default {
             Project.initRefSwitcher();
           }
         })
-        .catch(() => {
-          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
-        });
+        .catch(() => new Flash('Something went wrong. Please try again.'));
     },
     handleNotification(data) {
       if (data.ci_status === this.mr.ciStatus) return;

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -4,7 +4,6 @@ import { stateKey } from './state_maps';
 import { formatDate } from '../../lib/utils/datetime_utility';
 
 export default class MergeRequestStore {
-
   constructor(data) {
     this.sha = data.diff_head_sha;
     this.gitlabLogo = data.gitlabLogo;
@@ -169,5 +168,4 @@ export default class MergeRequestStore {
 
     return timeagoInstance.format(date);
   }
-
 }

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -6,12 +6,12 @@
   import userAvatarImage from './user_avatar/user_avatar_image.vue';
 
   /**
-  * Renders header component for job and pipeline page based on UI mockups
-  *
-  * Used in:
-  * - job show page
-  * - pipeline show page
-  */
+   * Renders header component for job and pipeline page based on UI mockups
+   *
+   * Used in:
+   * - job show page
+   * - pipeline show page
+   */
   export default {
     components: {
       ciIconBadge,
@@ -118,7 +118,8 @@
 
     <section
       class="header-action-buttons"
-      v-if="actions.length">
+      v-if="actions.length"
+    >
       <template
         v-for="(action, i) in actions"
       >

app/assets/javascripts/vue_shared/components/loading_button.vue

 <script>
   /* eslint-disable vue/require-default-prop */
-
   /* This is a re-usable vue component for rendering a button
     that will probably be sending off ajax requests and need
     to show the loading status by setting the `loading` option.

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -65,7 +65,8 @@
       </li>
       <li
         class="md-header-tab"
-        :class="{ active: previewMarkdown }">
+        :class="{ active: previewMarkdown }"
+      >
         <a
           class="js-preview-link"
           href="#md-preview-holder"

app/assets/javascripts/vue_shared/components/table_pagination.vue

@@ -13,6 +13,12 @@
     props: {
       /**
         This function will take the information given by the pagination component
+
+        Here is an example `change` method:
+
+        change(pagenum) {
+          gl.utils.visitUrl(`?page=${pagenum}`);
+        },
       */
       change: {
         type: Function,