Merge branch 'remove-design-presentation-presentationContainer-ref' into 'master'

Remove redundant 'presentationContainer' ref

See merge request gitlab-org/gitlab!29467

ee/app/assets/javascripts/design_management/components/design_presentation.vue

@@ -102,8 +102,8 @@ export default {
         this.overlayPosition = {};
       }
 
-      const { presentationContainer } = this.$refs;
-      if (!presentationContainer) return;
+      const { presentationViewport } = this.$refs;
+      if (!presentationViewport) return;
 
       // default to center
       this.overlayPosition = {
@@ -112,10 +112,10 @@ export default {
       };
 
       // if the overlay overflows, then don't center
-      if (this.overlayDimensions.width > presentationContainer.offsetWidth) {
+      if (this.overlayDimensions.width > presentationViewport.offsetWidth) {
         this.overlayPosition.left = '0';
       }
-      if (this.overlayDimensions.height > presentationContainer.offsetHeight) {
+      if (this.overlayDimensions.height > presentationViewport.offsetHeight) {
         this.overlayPosition.top = '0';
       }
     },
@@ -243,12 +243,12 @@ export default {
       this.isDraggingDesign = false;
     },
     isDesignOverflowing() {
-      const { presentationContainer } = this.$refs;
-      if (!presentationContainer) return false;
+      const { presentationViewport } = this.$refs;
+      if (!presentationViewport) return false;
 
       return (
-        presentationContainer.scrollWidth > presentationContainer.offsetWidth ||
-        presentationContainer.scrollHeight > presentationContainer.offsetHeight
+        presentationViewport.scrollWidth > presentationViewport.offsetWidth ||
+        presentationViewport.scrollHeight > presentationViewport.offsetHeight
       );
     },
   },
@@ -269,10 +269,7 @@ export default {
     @touchend="onPresentationMouseup"
     @touchcancel="onPresentationMouseup"
   >
-    <div
-      ref="presentationContainer"
-      class="h-100 w-100 d-flex align-items-center position-relative"
-    >
+    <div class="h-100 w-100 d-flex align-items-center position-relative">
       <design-image
         v-if="image"
         :image="image"

ee/spec/frontend/design_management/components/design_presentation_spec.js

@@ -216,10 +216,8 @@ describe('Design management design presentation component', () => {
     });
 
     it('sets overlay position correctly when overlay is smaller than viewport', () => {
-      jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetWidth', 'get').mockReturnValue(200);
-      jest
-        .spyOn(wrapper.vm.$refs.presentationContainer, 'offsetHeight', 'get')
-        .mockReturnValue(200);
+      jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetWidth', 'get').mockReturnValue(200);
+      jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetHeight', 'get').mockReturnValue(200);
 
       wrapper.vm.setOverlayPosition();
       expect(wrapper.vm.overlayPosition).toEqual({
@@ -229,10 +227,8 @@ describe('Design management design presentation component', () => {
     });
 
     it('sets overlay position correctly when overlay width is larger than viewports', () => {
-      jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetWidth', 'get').mockReturnValue(50);
-      jest
-        .spyOn(wrapper.vm.$refs.presentationContainer, 'offsetHeight', 'get')
-        .mockReturnValue(200);
+      jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetWidth', 'get').mockReturnValue(50);
+      jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetHeight', 'get').mockReturnValue(200);
 
       wrapper.vm.setOverlayPosition();
       expect(wrapper.vm.overlayPosition).toEqual({
@@ -242,8 +238,8 @@ describe('Design management design presentation component', () => {
     });
 
     it('sets overlay position correctly when overlay height is larger than viewports', () => {
-      jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetWidth', 'get').mockReturnValue(200);
-      jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetHeight', 'get').mockReturnValue(50);
+      jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetWidth', 'get').mockReturnValue(200);
+      jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetHeight', 'get').mockReturnValue(50);
 
       wrapper.vm.setOverlayPosition();
       expect(wrapper.vm.overlayPosition).toEqual({
@@ -405,7 +401,7 @@ describe('Design management design presentation component', () => {
     `('sets lastDragPosition when design $scenario', ({ width, height }) => {
       createComponent();
       mockRefDimensions(
-        wrapper.vm.$refs.presentationContainer,
+        wrapper.vm.$refs.presentationViewport,
         { width: 100, height: 100 },
         { width, height },
       );
@@ -424,7 +420,7 @@ describe('Design management design presentation component', () => {
 
       createComponent({}, { lastDragPosition });
       mockRefDimensions(
-        wrapper.vm.$refs.presentationContainer,
+        wrapper.vm.$refs.presentationViewport,
         { width: 100, height: 100 },
         { width: 50, height: 50 },
       );
@@ -451,7 +447,7 @@ describe('Design management design presentation component', () => {
 
       // mock a design that overflows
       mockRefDimensions(
-        wrapper.vm.$refs.presentationContainer,
+        wrapper.vm.$refs.presentationViewport,
         { width: 10, height: 10 },
         { width: 20, height: 20 },
         0,