Merge branch 'mg-refactor-due-date-select' into 'master'

Remove DueDateSelect reference from pages where it is not needed

See merge request gitlab-org/gitlab!61449

app/assets/javascripts/behaviors/date_picker.js

+import $ from 'jquery';
+import Pikaday from 'pikaday';
+import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility';
+
+export default function initDatePickers() {
+  $('.datepicker').each(function initPikaday() {
+    const $datePicker = $(this);
+    const datePickerVal = $datePicker.val();
+
+    const calendar = new Pikaday({
+      field: $datePicker.get(0),
+      theme: 'gitlab-theme animate-picker',
+      format: 'yyyy-mm-dd',
+      container: $datePicker.parent().get(0),
+      parse: (dateString) => parsePikadayDate(dateString),
+      toString: (date) => pikadayToString(date),
+      onSelect(dateText) {
+        $datePicker.val(calendar.toString(dateText));
+      },
+      firstDay: gon.first_day_of_week,
+    });
+
+    calendar.setDate(parsePikadayDate(datePickerVal));
+
+    $datePicker.data('pikaday', calendar);
+  });
+
+  $('.js-clear-due-date,.js-clear-start-date').on('click', (e) => {
+    e.preventDefault();
+    const calendar = $(e.target).siblings('.datepicker').data('pikaday');
+    calendar.setDate(null);
+  });
+}

app/assets/javascripts/due_date_select.js

@@ -2,6 +2,7 @@
 import dateFormat from 'dateformat';
 import $ from 'jquery';
 import Pikaday from 'pikaday';
+import initDatePicker from '~/behaviors/date_picker';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { __ } from '~/locale';
 import boardsStore from './boards/stores/boards_store';
@@ -168,40 +169,10 @@ class DueDateSelect {
 
 export default class DueDateSelectors {
   constructor() {
-    this.initMilestoneDatePicker();
+    initDatePicker();
     this.initIssuableSelect();
   }
   // eslint-disable-next-line class-methods-use-this
-  initMilestoneDatePicker() {
-    $('.datepicker').each(function initPikadayMilestone() {
-      const $datePicker = $(this);
-      const datePickerVal = $datePicker.val();
-
-      const calendar = new Pikaday({
-        field: $datePicker.get(0),
-        theme: 'gitlab-theme animate-picker',
-        format: 'yyyy-mm-dd',
-        container: $datePicker.parent().get(0),
-        parse: (dateString) => parsePikadayDate(dateString),
-        toString: (date) => pikadayToString(date),
-        onSelect(dateText) {
-          $datePicker.val(calendar.toString(dateText));
-        },
-        firstDay: gon.first_day_of_week,
-      });
-
-      calendar.setDate(parsePikadayDate(datePickerVal));
-
-      $datePicker.data('pikaday', calendar);
-    });
-
-    $('.js-clear-due-date,.js-clear-start-date').on('click', (e) => {
-      e.preventDefault();
-      const calendar = $(e.target).siblings('.datepicker').data('pikaday');
-      calendar.setDate(null);
-    });
-  }
-  // eslint-disable-next-line class-methods-use-this
   initIssuableSelect() {
     const $loading = $('.js-issuable-update .due_date')
       .find('.block-loading')

app/assets/javascripts/init_issuable_sidebar.js

 /* eslint-disable no-new */
 
 import { mountSidebarLabels, getSidebarOptions } from '~/sidebar/mount_sidebar';
-import DueDateSelectors from './due_date_select';
 import IssuableContext from './issuable_context';
 import LabelsSelect from './labels_select';
 import MilestoneSelect from './milestone_select';
@@ -19,7 +18,6 @@ export default () => {
   });
   new LabelsSelect();
   new IssuableContext(sidebarOptions.currentUser);
-  new DueDateSelectors();
   Sidebar.initialize();
 
   mountSidebarLabels();

app/assets/javascripts/pages/groups/milestones/edit/index.js

-import initForm from '../../../../shared/milestones/form';
+import initForm from '~/shared/milestones/form';
 
 initForm();

app/assets/javascripts/pages/groups/milestones/new/index.js

-import initForm from '../../../../shared/milestones/form';
+import initForm from '~/shared/milestones/form';
 
 initForm();

app/assets/javascripts/pages/groups/settings/repository/show/index.js

-import DueDateSelectors from '~/due_date_select';
+import initDatePicker from '~/behaviors/date_picker';
 import initSettingsPanels from '~/settings_panels';
 
 // Initialize expandable settings panels
 initSettingsPanels();
 
-new DueDateSelectors(); // eslint-disable-line no-new
+// Used for deploy tokens "expires at" field
+initDatePicker();

app/assets/javascripts/pages/projects/milestones/new/index.js

-import initForm from '../../../../shared/milestones/form';
+import initForm from '~/shared/milestones/form';
 
 initForm();

app/assets/javascripts/pages/projects/settings/repository/form.js

 /* eslint-disable no-new */
 
+import initDatePicker from '~/behaviors/date_picker';
 import initDeployKeys from '~/deploy_keys';
-import DueDateSelectors from '~/due_date_select';
 import fileUpload from '~/lib/utils/file_upload';
 import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
 import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
@@ -16,6 +16,6 @@ export default () => {
   initSettingsPanels();
   new ProtectedBranchCreate({ hasLicense: false });
   new ProtectedBranchEditList();
-  new DueDateSelectors();
+  initDatePicker(); // Used for deploy token "expires at" field
   fileUpload('.js-choose-file', '.js-object-map-input');
 };

app/assets/javascripts/shared/milestones/form.js

 import $ from 'jquery';
-import DueDateSelectors from '../../due_date_select';
+import initDatePicker from '~/behaviors/date_picker';
 import GLForm from '../../gl_form';
 import ZenMode from '../../zen_mode';
 
 export default (initGFM = true) => {
   new ZenMode(); // eslint-disable-line no-new
-  new DueDateSelectors(); // eslint-disable-line no-new
+  initDatePicker();
+
   // eslint-disable-next-line no-new
   new GLForm($('.milestone-form'), {
     emojis: true,

ee/app/assets/javascripts/iterations/components/iteration_form.vue

 <script>
 import { GlButton, GlForm, GlFormInput } from '@gitlab/ui';
-import DueDateSelectors from '~/due_date_select';
+import initDatePicker from '~/behaviors/date_picker';
 import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -65,8 +65,8 @@ export default {
     },
   },
   mounted() {
-    // eslint-disable-next-line no-new
-    new DueDateSelectors();
+    // TODO: utilize GlDatepicker instead of relying on this jQuery behavior
+    initDatePicker();
   },
   methods: {
     save() {

ee/app/assets/javascripts/pages/projects/settings/repository/show/index.js

@@ -3,8 +3,8 @@ import ProtectedBranchEditList from 'ee/protected_branches/protected_branch_edit
 import ProtectedTagCreate from 'ee/protected_tags/protected_tag_create';
 import ProtectedTagEditList from 'ee/protected_tags/protected_tag_edit_list';
 
+import initDatePicker from '~/behaviors/date_picker';
 import initDeployKeys from '~/deploy_keys';
-import DueDateSelectors from '~/due_date_select';
 import fileUpload from '~/lib/utils/file_upload';
 import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
 import CEProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
@@ -39,7 +39,7 @@ if (document.querySelector('.js-protected-refs-for-users')) {
 const pushPullContainer = document.querySelector('.js-mirror-settings');
 if (pushPullContainer) new EEMirrorRepos(pushPullContainer).init();
 
-new DueDateSelectors();
+initDatePicker(); // Used for deploy token "expires at" field
 
 fileUpload('.js-choose-file', '.js-object-map-input');
 

spec/frontend/behaviors/date_picker_spec.js

+import * as Pikaday from 'pikaday';
+import initDatePickers from '~/behaviors/date_picker';
+import * as utils from '~/lib/utils/datetime_utility';
+
+jest.mock('pikaday');
+jest.mock('~/lib/utils/datetime_utility');
+
+describe('date_picker behavior', () => {
+  let pikadayMock;
+  let parseMock;
+
+  beforeEach(() => {
+    pikadayMock = jest.spyOn(Pikaday, 'default');
+    parseMock = jest.spyOn(utils, 'parsePikadayDate');
+    setFixtures(`
+      <div>
+        <input class="datepicker" value="2020-10-01" />
+      </div>
+      <div>
+        <input class="datepicker" value="" />
+      </div>`);
+  });
+
+  it('Instantiates Pickaday for every instance of a .datepicker class', () => {
+    initDatePickers();
+
+    expect(pikadayMock.mock.calls.length).toEqual(2);
+    expect(parseMock.mock.calls).toEqual([['2020-10-01'], ['']]);
+  });
+});