Merge branch 'cngo-move-labels-code' into 'master'

Move labels code to ~/labels and organise

See merge request gitlab-org/gitlab!76269

app/assets/javascripts/labels/delete_label_modal.js

-import Vue from 'vue';
-import DeleteLabelModal from '~/vue_shared/components/delete_label_modal.vue';
-
-const mountDeleteLabelModal = (optionalProps) =>
-  new Vue({
-    render(h) {
-      return h(DeleteLabelModal, {
-        props: {
-          selector: '.js-delete-label-modal-button',
-          ...optionalProps,
-        },
-      });
-    },
-  }).$mount();
-
-export default (optionalProps = {}) => mountDeleteLabelModal(optionalProps);

app/assets/javascripts/labels/index.js

+import $ from 'jquery';
+import Vue from 'vue';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
+import Translate from '~/vue_shared/translate';
+import DeleteLabelModal from './components/delete_label_modal.vue';
+import PromoteLabelModal from './components/promote_label_modal.vue';
+import eventHub from './event_hub';
+import GroupLabelSubscription from './group_label_subscription';
+import LabelManager from './label_manager';
+import ProjectLabelSubscription from './project_label_subscription';
+
+export function initDeleteLabelModal(optionalProps = {}) {
+  new Vue({
+    render(h) {
+      return h(DeleteLabelModal, {
+        props: {
+          selector: '.js-delete-label-modal-button',
+          ...optionalProps,
+        },
+      });
+    },
+  }).$mount();
+}
+
+export function initLabels() {
+  if ($('.prioritized-labels').length) {
+    new LabelManager(); // eslint-disable-line no-new
+  }
+  $('.label-subscription').each((i, el) => {
+    const $el = $(el);
+
+    if ($el.find('.dropdown-group-label').length) {
+      new GroupLabelSubscription($el); // eslint-disable-line no-new
+    } else {
+      new ProjectLabelSubscription($el); // eslint-disable-line no-new
+    }
+  });
+}
+
+export function initLabelIndex() {
+  Vue.use(Translate);
+
+  initLabels();
+  initDeleteLabelModal();
+
+  const onRequestFinished = ({ labelUrl, successful }) => {
+    const button = document.querySelector(
+      `.js-promote-project-label-button[data-url="${labelUrl}"]`,
+    );
+
+    if (!successful) {
+      button.removeAttribute('disabled');
+    }
+  };
+
+  const onRequestStarted = (labelUrl) => {
+    const button = document.querySelector(
+      `.js-promote-project-label-button[data-url="${labelUrl}"]`,
+    );
+    button.setAttribute('disabled', '');
+    eventHub.$once('promoteLabelModal.requestFinished', onRequestFinished);
+  };
+
+  const promoteLabelButtons = document.querySelectorAll('.js-promote-project-label-button');
+
+  return new Vue({
+    el: '#js-promote-label-modal',
+    data() {
+      return {
+        modalProps: {
+          labelTitle: '',
+          labelColor: '',
+          labelTextColor: '',
+          url: '',
+          groupName: '',
+        },
+      };
+    },
+    mounted() {
+      eventHub.$on('promoteLabelModal.props', this.setModalProps);
+      eventHub.$emit('promoteLabelModal.mounted');
+
+      promoteLabelButtons.forEach((button) => {
+        button.removeAttribute('disabled');
+        button.addEventListener('click', () => {
+          this.$root.$emit(BV_SHOW_MODAL, 'promote-label-modal');
+          eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
+
+          this.setModalProps({
+            labelTitle: button.dataset.labelTitle,
+            labelColor: button.dataset.labelColor,
+            labelTextColor: button.dataset.labelTextColor,
+            url: button.dataset.url,
+            groupName: button.dataset.groupName,
+          });
+        });
+      });
+    },
+    beforeDestroy() {
+      eventHub.$off('promoteLabelModal.props', this.setModalProps);
+    },
+    methods: {
+      setModalProps(modalProps) {
+        this.modalProps = modalProps;
+      },
+    },
+    render(createElement) {
+      return createElement(PromoteLabelModal, {
+        props: this.modalProps,
+      });
+    },
+  });
+}
+
+export function initAdminLabels() {
+  const pagination = document.querySelector('.labels .gl-pagination');
+  const emptyState = document.querySelector('.labels .nothing-here-block.hidden');
+
+  function removeLabelSuccessCallback() {
+    this.closest('li').classList.add('gl-display-none!');
+
+    const labelsCount = document.querySelectorAll(
+      'ul.manage-labels-list li:not(.gl-display-none\\!)',
+    ).length;
+
+    // display the empty state if there are no more labels
+    if (labelsCount < 1 && !pagination && emptyState) {
+      emptyState.classList.remove('hidden');
+    }
+  }
+
+  document.querySelectorAll('.js-remove-label').forEach((row) => {
+    row.addEventListener('ajax:success', removeLabelSuccessCallback);
+  });
+}

app/assets/javascripts/labels/init_labels.js

-import $ from 'jquery';
-import GroupLabelSubscription from './group_label_subscription';
-import LabelManager from './label_manager';
-import ProjectLabelSubscription from './project_label_subscription';
-
-export default () => {
-  if ($('.prioritized-labels').length) {
-    new LabelManager(); // eslint-disable-line no-new
-  }
-  $('.label-subscription').each((i, el) => {
-    const $el = $(el);
-
-    if ($el.find('.dropdown-group-label').length) {
-      new GroupLabelSubscription($el); // eslint-disable-line no-new
-    } else {
-      new ProjectLabelSubscription($el); // eslint-disable-line no-new
-    }
-  });
-};

app/assets/javascripts/labels/labels_select.js

@@ -9,7 +9,7 @@ import { isScopedLabel } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { sprintf, __ } from '~/locale';
-import CreateLabelDropdown from './create_label';
+import CreateLabelDropdown from './create_label_dropdown';
 
 export default class LabelsSelect {
   constructor(els, options = {}) {

app/assets/javascripts/pages/admin/labels/index/index.js

-function initLabels() {
-  const pagination = document.querySelector('.labels .gl-pagination');
-  const emptyState = document.querySelector('.labels .nothing-here-block.hidden');
+import { initAdminLabels } from '~/labels';
 
-  function removeLabelSuccessCallback() {
-    this.closest('li').classList.add('gl-display-none!');
-
-    const labelsCount = document.querySelectorAll(
-      'ul.manage-labels-list li:not(.gl-display-none\\!)',
-    ).length;
-
-    // display the empty state if there are no more labels
-    if (labelsCount < 1 && !pagination && emptyState) {
-      emptyState.classList.remove('hidden');
-    }
-  }
-
-  document.querySelectorAll('.js-remove-label').forEach((row) => {
-    row.addEventListener('ajax:success', removeLabelSuccessCallback);
-  });
-}
-
-initLabels();
+initAdminLabels();

app/assets/javascripts/pages/groups/labels/index/index.js

-import initDeleteLabelModal from '~/labels/delete_label_modal';
-import initLabels from '~/labels/init_labels';
+import { initDeleteLabelModal, initLabels } from '~/labels';
 
 initLabels();
 initDeleteLabelModal();

app/assets/javascripts/pages/projects/labels/index/index.js

-import Vue from 'vue';
-import initDeleteLabelModal from '~/labels/delete_label_modal';
-import initLabels from '~/labels/init_labels';
-import { BV_SHOW_MODAL } from '~/lib/utils/constants';
-import Translate from '~/vue_shared/translate';
-import PromoteLabelModal from '../components/promote_label_modal.vue';
-import eventHub from '../event_hub';
+import { initLabelIndex } from '~/labels';
 
-Vue.use(Translate);
-
-const initLabelIndex = () => {
-  initLabels();
-  initDeleteLabelModal();
-
-  const onRequestFinished = ({ labelUrl, successful }) => {
-    const button = document.querySelector(
-      `.js-promote-project-label-button[data-url="${labelUrl}"]`,
-    );
-
-    if (!successful) {
-      button.removeAttribute('disabled');
-    }
-  };
-
-  const onRequestStarted = (labelUrl) => {
-    const button = document.querySelector(
-      `.js-promote-project-label-button[data-url="${labelUrl}"]`,
-    );
-    button.setAttribute('disabled', '');
-    eventHub.$once('promoteLabelModal.requestFinished', onRequestFinished);
-  };
-
-  const promoteLabelButtons = document.querySelectorAll('.js-promote-project-label-button');
-
-  return new Vue({
-    el: '#js-promote-label-modal',
-    data() {
-      return {
-        modalProps: {
-          labelTitle: '',
-          labelColor: '',
-          labelTextColor: '',
-          url: '',
-          groupName: '',
-        },
-      };
-    },
-    mounted() {
-      eventHub.$on('promoteLabelModal.props', this.setModalProps);
-      eventHub.$emit('promoteLabelModal.mounted');
-
-      promoteLabelButtons.forEach((button) => {
-        button.removeAttribute('disabled');
-        button.addEventListener('click', () => {
-          this.$root.$emit(BV_SHOW_MODAL, 'promote-label-modal');
-          eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
-
-          this.setModalProps({
-            labelTitle: button.dataset.labelTitle,
-            labelColor: button.dataset.labelColor,
-            labelTextColor: button.dataset.labelTextColor,
-            url: button.dataset.url,
-            groupName: button.dataset.groupName,
-          });
-        });
-      });
-    },
-    beforeDestroy() {
-      eventHub.$off('promoteLabelModal.props', this.setModalProps);
-    },
-    methods: {
-      setModalProps(modalProps) {
-        this.modalProps = modalProps;
-      },
-    },
-    render(createElement) {
-      return createElement(PromoteLabelModal, {
-        props: this.modalProps,
-      });
-    },
-  });
-};
 initLabelIndex();

spec/frontend/vue_shared/components/delete_label_modal_spec.js → spec/frontend/labels/components/delete_label_modal_spec.js

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
 import { TEST_HOST } from 'helpers/test_constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import DeleteLabelModal from '~/vue_shared/components/delete_label_modal.vue';
+import DeleteLabelModal from '~/labels/components/delete_label_modal.vue';
 
 const MOCK_MODAL_DATA = {
   labelName: 'label 1',
@@ -11,7 +11,7 @@ const MOCK_MODAL_DATA = {
   destroyPath: `${TEST_HOST}/1`,
 };
 
-describe('vue_shared/components/delete_label_modal', () => {
+describe('~/labels/components/delete_label_modal', () => {
   let wrapper;
 
   const createComponent = () => {

spec/frontend/pages/labels/components/promote_label_modal_spec.js → spec/frontend/labels/components/promote_label_modal_spec.js

@@ -2,8 +2,8 @@ import Vue from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
-import promoteLabelModal from '~/pages/projects/labels/components/promote_label_modal.vue';
-import eventHub from '~/pages/projects/labels/event_hub';
+import promoteLabelModal from '~/labels/components/promote_label_modal.vue';
+import eventHub from '~/labels/event_hub';
 
 describe('Promote label modal', () => {
   let vm;

spec/frontend/labels/delete_label_modal_spec.js

 import { TEST_HOST } from 'helpers/test_constants';
-import initDeleteLabelModal from '~/labels/delete_label_modal';
+import { initDeleteLabelModal } from '~/labels';
 
 describe('DeleteLabelModal', () => {
   const buttons = [