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

Resolve "Add point of interest discussions to designs"

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

6 files changed, 31 insertions, 4 deletions

diff --git a/app/assets/javascripts/behaviors/preview_markdown.js b/app/assets/javascripts/behaviors/preview_markdown.js
index 35874140bf9..b2571fb840c 100644
--- a/app/assets/javascripts/behaviors/preview_markdown.js
+++ b/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);
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index fc6a45b957e..6a4a834337a 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/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,
diff --git a/doc/user/project/issues/design_management.md b/doc/user/project/issues/design_management.md
index 2327fa84998..bffbcb544e3 100644
--- a/doc/user/project/issues/design_management.md
+++ b/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)
diff --git a/doc/user/project/issues/img/adding_note_to_design_1.png b/doc/user/project/issues/img/adding_note_to_design_1.png
new file mode 100644
index 00000000000..dcc23b4d034
--- /dev/null
+++ b/doc/user/project/issues/img/adding_note_to_design_1.png
diff --git a/doc/user/project/issues/img/adding_note_to_design_2.png b/doc/user/project/issues/img/adding_note_to_design_2.png
new file mode 100644
index 00000000000..c6a868bfb51
--- /dev/null
+++ b/doc/user/project/issues/img/adding_note_to_design_2.png
diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js
index e4d62b044ca..8b6f7802b15 100644
--- a/spec/frontend/test_setup.js
+++ b/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);
+  },
+});