Merge branch '9489-designs-annotations' into 'master'

Resolve "Add point of interest discussions to designs"

See merge request gitlab-org/gitlab-ce!31276

app/assets/javascripts/behaviors/preview_markdown.js

@@ -36,6 +36,10 @@ MarkdownPreview.prototype.showPreview = function($form) {
 
   mdText = $form.find('textarea.markdown-area').val();
 
+  if (mdText === undefined) {
+    return;
+  }
+
   if (mdText.trim().length === 0) {
     preview.text(this.emptyMessage);
     this.hideReferencedUsers($form);

app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue

@@ -27,7 +27,6 @@ export default {
     return {
       width: 0,
       height: 0,
-      isLoaded: false,
     };
   },
   computed: {
@@ -63,8 +62,6 @@ export default {
         this.height = contentImg.naturalHeight;
 
         this.$nextTick(() => {
-          this.isLoaded = true;
-
           this.$emit('imgLoaded', {
             width: this.width,
             height: this.height,

doc/user/project/issues/design_management.md

@@ -3,7 +3,7 @@
 > [Introduced](https://gitlab.com/groups/gitlab-org/-/epics/660) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.2.
 
 CAUTION: **Warning:**
-This an __alpha__ feature and is subject to change at any time without
+This an **alpha** feature and is subject to change at any time without
 prior notice.
 
 ## Overview
@@ -56,3 +56,14 @@ of the design, and will replace the previous version.
 
 Images on the Design Management page can be enlarged by clicking on them.
 
+## Adding annotations to designs
+
+When a design image is displayed, you can add annotations to it by clicking on
+the image. A badge is added to the image and a form is displayed to start a new
+discussion. For example:
+
+![Starting a new discussion on design](img/adding_note_to_design_1.png)
+
+When submitted, the form saves a badge linked to the discussion on the image. Different discussions have different badge numbers. For example:
+
+![Discussions on design annotations](img/adding_note_to_design_2.png)

spec/frontend/test_setup.js

@@ -75,3 +75,18 @@ global.MutationObserver = () => ({
   disconnect: () => {},
   observe: () => {},
 });
+
+Object.assign(global, {
+  requestIdleCallback(cb) {
+    const start = Date.now();
+    return setTimeout(() => {
+      cb({
+        didTimeout: false,
+        timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
+      });
+    });
+  },
+  cancelIdleCallback(id) {
+    clearTimeout(id);
+  },
+});