Add latest changes from gitlab-org/gitlab@master

3 files changed, 42 insertions, 6 deletions

diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue
index c9273f97bed..af3d4453a6a 100644
--- a/app/assets/javascripts/design_management/components/design_scaler.vue
+++ b/app/assets/javascripts/design_management/components/design_scaler.vue
@@ -1,16 +1,21 @@
 <script>
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 
-const SCALE_STEP_SIZE = 0.2;
 const DEFAULT_SCALE = 1;
 const MIN_SCALE = 1;
-const MAX_SCALE = 2;
+const ZOOM_LEVELS = 5;
 
 export default {
   components: {
     GlButtonGroup,
     GlButton,
   },
+  props: {
+    maxScale: {
+      type: Number,
+      required: true,
+    },
+  },
   data() {
     return {
       scale: DEFAULT_SCALE,
@@ -24,7 +29,10 @@ export default {
       return this.scale === DEFAULT_SCALE;
     },
     disableIncrease() {
-      return this.scale >= MAX_SCALE;
+      return this.scale >= this.maxScale;
+    },
+    stepSize() {
+      return (this.maxScale - MIN_SCALE) / ZOOM_LEVELS;
     },
   },
   methods: {
@@ -37,10 +45,10 @@ export default {
       this.$emit('scale', this.scale);
     },
     incrementScale() {
-      this.setScale(this.scale + SCALE_STEP_SIZE);
+      this.setScale(Math.min(this.scale + this.stepSize, this.maxScale));
     },
     decrementScale() {
-      this.setScale(this.scale - SCALE_STEP_SIZE);
+      this.setScale(Math.max(this.scale - this.stepSize, MIN_SCALE));
     },
     resetScale() {
       this.setScale(DEFAULT_SCALE);
diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue
index 8ab94cd2c4b..5354c7756f5 100644
--- a/app/assets/javascripts/design_management/components/image.vue
+++ b/app/assets/javascripts/design_management/components/image.vue
@@ -57,6 +57,7 @@ export default {
   methods: {
     onImgLoad() {
       requestIdleCallback(this.setBaseImageSize, { timeout: 1000 });
+      requestIdleCallback(this.setImageNaturalScale, { timeout: 1000 });
       performanceMarkAndMeasure({
         measures: [
           {
@@ -79,6 +80,27 @@ export default {
       };
       this.onResize({ width: this.baseImageSize.width, height: this.baseImageSize.height });
     },
+    setImageNaturalScale() {
+      const { contentImg } = this.$refs;
+
+      if (!contentImg) {
+        return;
+      }
+
+      const { naturalHeight, naturalWidth } = contentImg;
+
+      // In case image 404s
+      if (naturalHeight === 0 || naturalWidth === 0) {
+        return;
+      }
+
+      const { height, width } = this.baseImageSize;
+
+      this.$parent.$emit(
+        'setMaxScale',
+        Math.round(((height + width) / (naturalHeight + naturalWidth)) * 100) / 100,
+      );
+    },
     onResize({ width, height }) {
       this.$emit('resize', { width, height });
     },
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index c2e2fc4feae..38ea5406c02 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -46,6 +46,7 @@ import {
 import { trackDesignDetailView, servicePingDesignDetailView } from '../../utils/tracking';
 
 const DEFAULT_SCALE = 1;
+const DEFAULT_MAX_SCALE = 2;
 
 export default {
   components: {
@@ -96,6 +97,7 @@ export default {
       scale: DEFAULT_SCALE,
       resolvedDiscussionsExpanded: false,
       prevCurrentUserTodos: null,
+      maxScale: DEFAULT_MAX_SCALE,
     };
   },
   apollo: {
@@ -328,6 +330,9 @@ export default {
     toggleResolvedComments() {
       this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded;
     },
+    setMaxScale(event) {
+      this.maxScale = 1 / event;
+    },
   },
   createImageDiffNoteMutation,
   DESIGNS_ROUTE_NAME,
@@ -376,12 +381,13 @@ export default {
           @openCommentForm="openCommentForm"
           @closeCommentForm="closeCommentForm"
           @moveNote="onMoveNote"
+          @setMaxScale="setMaxScale"
         />
 
         <div
           class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
         >
-          <design-scaler @scale="scale = $event" />
+          <design-scaler :max-scale="maxScale" @scale="scale = $event" />
         </div>
       </div>
       <design-sidebar