Automatic merge of gitlab-org/gitlab-ce master

app/assets/javascripts/clusters/clusters_bundle.js

@@ -262,7 +262,7 @@ export default class Clusters {
     this.store.updateAppProperty(appId, 'requestReason', null);
     this.store.updateAppProperty(appId, 'statusReason', null);
 
-    this.service.installApplication(appId, data.params).catch(() => {
+    return this.service.installApplication(appId, data.params).catch(() => {
       this.store.updateAppProperty(appId, 'requestStatus', REQUEST_FAILURE);
       this.store.updateAppProperty(
         appId,

app/assets/javascripts/commit/image_file.js

@@ -71,29 +71,39 @@ export default class ImageFile {
   // eslint-disable-next-line class-methods-use-this
   initDraggable($el, padding, callback) {
     var dragging = false;
-    var $body = $('body');
-    var $offsetEl = $el.parent();
-
-    $el.off('mousedown').on('mousedown', function() {
+    const $body = $('body');
+    const $offsetEl = $el.parent();
+    const dragStart = function() {
       dragging = true;
       $body.css('user-select', 'none');
-    });
-
-    $body
-      .off('mouseup')
-      .off('mousemove')
-      .on('mouseup', function() {
+    };
+    const dragStop = function() {
       dragging = false;
       $body.css('user-select', '');
-      })
-      .on('mousemove', function(e) {
-        var left;
+    };
+    const dragMove = function(e) {
+      const moveX = e.pageX || e.touches[0].pageX;
+      const left = moveX - ($offsetEl.offset().left + padding);
       if (!dragging) return;
 
-        left = e.pageX - ($offsetEl.offset().left + padding);
-
       callback(e, left);
-      });
+    };
+
+    $el
+      .off('mousedown')
+      .off('touchstart')
+      .on('mousedown', dragStart)
+      .on('touchstart', dragStart);
+
+    $body
+      .off('mouseup')
+      .off('mousemove')
+      .off('touchend')
+      .off('touchmove')
+      .on('mouseup', dragStop)
+      .on('touchend', dragStop)
+      .on('mousemove', dragMove)
+      .on('touchmove', dragMove);
   }
 
   prepareFrames(view) {

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue

@@ -40,12 +40,15 @@ export default {
   },
   beforeDestroy() {
     document.body.removeEventListener('mouseup', this.stopDrag);
-    this.$refs.dragger.removeEventListener('mousedown', this.startDrag);
+    document.body.removeEventListener('touchend', this.stopDrag);
+    document.body.removeEventListener('mousemove', this.dragMove);
+    document.body.removeEventListener('touchmove', this.dragMove);
   },
   methods: {
     dragMove(e) {
       if (!this.dragging) return;
-      const left = e.pageX - this.$refs.dragTrack.getBoundingClientRect().left;
+      const moveX = e.pageX || e.touches[0].pageX;
+      const left = moveX - this.$refs.dragTrack.getBoundingClientRect().left;
       const dragTrackWidth =
         this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
 
@@ -60,11 +63,13 @@ export default {
       this.dragging = true;
       document.body.style.userSelect = 'none';
       document.body.addEventListener('mousemove', this.dragMove);
+      document.body.addEventListener('touchmove', this.dragMove);
     },
     stopDrag() {
       this.dragging = false;
       document.body.style.userSelect = '';
       document.body.removeEventListener('mousemove', this.dragMove);
+      document.body.removeEventListener('touchmove', this.dragMove);
     },
     prepareOnionSkin() {
       if (this.onionOldImgInfo && this.onionNewImgInfo) {
@@ -82,6 +87,7 @@ export default {
           this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
 
         document.body.addEventListener('mouseup', this.stopDrag);
+        document.body.addEventListener('touchend', this.stopDrag);
       }
     },
     onionNewImgLoaded(imgInfo) {
@@ -140,7 +146,14 @@ export default {
       </div>
       <div class="controls">
         <div class="transparent"></div>
-        <div ref="dragTrack" class="drag-track" @mousedown="startDrag" @mouseup="stopDrag">
+        <div
+          ref="dragTrack"
+          class="drag-track"
+          @mousedown="startDrag"
+          @mouseup="stopDrag"
+          @touchstart="startDrag"
+          @touchend="stopDrag"
+        >
           <div ref="dragger" :style="{ left: onionDraggerPixelPos }" class="dragger"></div>
         </div>
         <div class="opaque"></div>

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue

@@ -46,6 +46,8 @@ export default {
     window.removeEventListener('resize', this.resizeThrottled, false);
     document.body.removeEventListener('mouseup', this.stopDrag);
     document.body.removeEventListener('mousemove', this.dragMove);
+    document.body.removeEventListener('touchend', this.stopDrag);
+    document.body.removeEventListener('touchmove', this.dragMove);
   },
   mounted() {
     window.addEventListener('resize', this.resize, false);
@@ -54,7 +56,8 @@ export default {
     dragMove(e) {
       if (!this.dragging) return;
 
-      let leftValue = e.pageX - this.$refs.swipeFrame.getBoundingClientRect().left;
+      const moveX = e.pageX || e.touches[0].pageX;
+      let leftValue = moveX - this.$refs.swipeFrame.getBoundingClientRect().left;
       const spaceLeft = 20;
       const { clientWidth } = this.$refs.swipeFrame;
       if (leftValue <= 0) {
@@ -69,10 +72,12 @@ export default {
     startDrag() {
       this.dragging = true;
       document.body.addEventListener('mousemove', this.dragMove);
+      document.body.addEventListener('touchmove', this.dragMove);
     },
     stopDrag() {
       this.dragging = false;
       document.body.removeEventListener('mousemove', this.dragMove);
+      document.body.removeEventListener('touchmove', this.dragMove);
     },
     prepareSwipe() {
       if (this.swipeOldImgInfo && this.swipeNewImgInfo) {
@@ -83,6 +88,7 @@ export default {
           Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
 
         document.body.addEventListener('mouseup', this.stopDrag);
+        document.body.addEventListener('touchend', this.stopDrag);
       }
     },
     swipeNewImgLoaded(imgInfo) {
@@ -143,6 +149,8 @@ export default {
         class="swipe-bar"
         @mousedown="startDrag"
         @mouseup="stopDrag"
+        @touchstart="startDrag"
+        @touchend="stopDrag"
       >
         <span class="top-handle"></span> <span class="bottom-handle"></span>
       </span>

app/assets/stylesheets/framework/buttons.scss

@@ -139,6 +139,7 @@
   @include btn-white;
 
   color: $gl-text-color;
+  white-space: nowrap;
 
   &:focus:active {
     outline: 0;

changelogs/unreleased/58981-migrate-clusters-tests-to-jest.yml

+---
+title: Migrate clusters tests to jest
+merge_request: 27013
+author:
+type: other

changelogs/unreleased/60006-add-touch-events-to-image-diff-26971.yml

+---
+title: "Make touch events work on image diff swipe view and onion skin"
+merge_request: 26971
+author: ftab
+type: added

changelogs/unreleased/60116-fix-button-wrapping.yml

+---
+title: Add to white-space nowrap to all buttons
+merge_request: 27069
+author:
+type: fixed

spec/javascripts/clusters/clusters_bundle_spec.js → spec/frontend/clusters/clusters_bundle_spec.js

@@ -5,19 +5,41 @@ import {
   APPLICATION_STATUS,
   INGRESS_DOMAIN_SUFFIX,
 } from '~/clusters/constants';
-import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { loadHTMLFixture } from 'helpers/fixtures';
+import { setTestTimeout } from 'helpers/timeout';
+import $ from 'jquery';
 
 describe('Clusters', () => {
+  setTestTimeout(500);
+
   let cluster;
-  preloadFixtures('clusters/show_cluster.html');
+  let mock;
+
+  const mockGetClusterStatusRequest = () => {
+    const { statusPath } = document.querySelector('.js-edit-cluster-form').dataset;
+
+    mock = new MockAdapter(axios);
+
+    mock.onGet(statusPath).reply(200);
+  };
+
+  beforeEach(() => {
+    loadHTMLFixture('clusters/show_cluster.html');
+  });
+
+  beforeEach(() => {
+    mockGetClusterStatusRequest();
+  });
 
   beforeEach(() => {
-    loadFixtures('clusters/show_cluster.html');
     cluster = new Clusters();
   });
 
   afterEach(() => {
     cluster.destroy();
+    mock.restore();
   });
 
   describe('toggle', () => {
@@ -29,16 +51,13 @@ describe('Clusters', () => {
         '.js-cluster-enable-toggle-area .js-project-feature-toggle-input',
       );
 
-      toggleButton.click();
-
-      getSetTimeoutPromise()
-        .then(() => {
+      $(toggleInput).one('trigger-change', () => {
         expect(toggleButton.classList).not.toContain('is-checked');
-
         expect(toggleInput.getAttribute('value')).toEqual('false');
-        })
-        .then(done)
-        .catch(done.fail);
+        done();
+      });
+
+      toggleButton.click();
     });
   });
 
@@ -197,7 +216,7 @@ describe('Clusters', () => {
 
   describe('installApplication', () => {
     it('tries to install helm', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.helm.requestStatus).toEqual(null);
 
@@ -209,7 +228,7 @@ describe('Clusters', () => {
     });
 
     it('tries to install ingress', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.ingress.requestStatus).toEqual(null);
 
@@ -221,7 +240,7 @@ describe('Clusters', () => {
     });
 
     it('tries to install runner', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.runner.requestStatus).toEqual(null);
 
@@ -233,7 +252,7 @@ describe('Clusters', () => {
     });
 
     it('tries to install jupyter', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.jupyter.requestStatus).toEqual(null);
       cluster.installApplication({
@@ -248,35 +267,32 @@ describe('Clusters', () => {
       });
     });
 
-    it('sets error request status when the request fails', done => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(
-        Promise.reject(new Error('STUBBED ERROR')),
-      );
+    it('sets error request status when the request fails', () => {
+      jest
+        .spyOn(cluster.service, 'installApplication')
+        .mockRejectedValueOnce(new Error('STUBBED ERROR'));
 
       expect(cluster.store.state.applications.helm.requestStatus).toEqual(null);
 
-      cluster.installApplication({ id: 'helm' });
+      const promise = cluster.installApplication({ id: 'helm' });
 
       expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_SUBMITTED);
       expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
       expect(cluster.service.installApplication).toHaveBeenCalled();
 
-      getSetTimeoutPromise()
-        .then(() => {
+      return promise.then(() => {
         expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_FAILURE);
         expect(cluster.store.state.applications.helm.requestReason).toBeDefined();
-        })
-        .then(done)
-        .catch(done.fail);
+      });
     });
   });
 
   describe('handleSuccess', () => {
     beforeEach(() => {
-      spyOn(cluster.store, 'updateStateFromServer');
-      spyOn(cluster, 'toggleIngressDomainHelpText');
-      spyOn(cluster, 'checkForNewInstalls');
-      spyOn(cluster, 'updateContainer');
+      jest.spyOn(cluster.store, 'updateStateFromServer').mockReturnThis();
+      jest.spyOn(cluster, 'toggleIngressDomainHelpText').mockReturnThis();
+      jest.spyOn(cluster, 'checkForNewInstalls').mockReturnThis();
+      jest.spyOn(cluster, 'updateContainer').mockReturnThis();
 
       cluster.handleSuccess({ data: {} });
     });

spec/javascripts/clusters/components/application_row_spec.js → spec/frontend/clusters/components/application_row_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import eventHub from '~/clusters/event_hub';
 import { APPLICATION_STATUS, REQUEST_SUBMITTED, REQUEST_FAILURE } from '~/clusters/constants';
 import applicationRow from '~/clusters/components/application_row.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
 
 describe('Application Row', () => {
@@ -160,7 +160,7 @@ describe('Application Row', () => {
     });
 
     it('clicking install button emits event', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLABLE,
@@ -176,7 +176,7 @@ describe('Application Row', () => {
     });
 
     it('clicking install button when installApplicationRequestParams are provided emits event', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLABLE,
@@ -193,7 +193,7 @@ describe('Application Row', () => {
     });
 
     it('clicking disabled install button emits nothing', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLING,
@@ -255,7 +255,7 @@ describe('Application Row', () => {
     });
 
     it('clicking upgrade button emits event', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.UPDATE_ERRORED,
@@ -271,7 +271,7 @@ describe('Application Row', () => {
     });
 
     it('clicking disabled upgrade button emits nothing', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.UPDATING,

spec/javascripts/clusters/components/applications_spec.js → spec/frontend/clusters/components/applications_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import applications from '~/clusters/components/applications.vue';
 import { CLUSTER_TYPE } from '~/clusters/constants';
 import eventHub from '~/clusters/event_hub';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import { APPLICATIONS_MOCK_STATE } from '../services/mock_data';
 
 describe('Applications', () => {
@@ -314,7 +314,7 @@ describe('Applications', () => {
         });
 
         it('emits event when clicking Save changes button', () => {
-          spyOn(eventHub, '$emit');
+          jest.spyOn(eventHub, '$emit');
           vm = mountComponent(Applications, props);
 
           const saveButton = vm.$el.querySelector('.js-knative-save-domain-button');