Merge branch '229889-markdown-not-rendering-in-new-iteration-or-iteration-report' into 'master'

Added description markdown field to iteration

See merge request gitlab-org/gitlab!38937

doc/api/graphql/reference/gitlab_schema.graphql

@@ -7719,6 +7719,11 @@ type Iteration {
   """
   description: String
 
+  """
+  The GitLab Flavored Markdown rendering of `description`
+  """
+  descriptionHtml: String
+
   """
   Timestamp of the iteration due date
   """

doc/api/graphql/reference/gitlab_schema.json

@@ -21244,6 +21244,20 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "descriptionHtml",
+              "description": "The GitLab Flavored Markdown rendering of `description`",
+              "args": [
+
+              ],
+              "type": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              },
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "dueDate",
               "description": "Timestamp of the iteration due date",

doc/api/graphql/reference/index.md

@@ -1167,6 +1167,7 @@ Represents an iteration object.
 | ---   |  ---- | ----------  |
 | `createdAt` | Time! | Timestamp of iteration creation |
 | `description` | String | Description of the iteration |
+| `descriptionHtml` | String | The GitLab Flavored Markdown rendering of `description` |
 | `dueDate` | Time | Timestamp of the iteration due date |
 | `id` | ID! | ID of the iteration |
 | `iid` | ID! | Internal ID of the iteration |

ee/app/assets/javascripts/iterations/components/iteration_report.vue

@@ -69,6 +69,11 @@ export default {
       required: false,
       default: false,
     },
+    previewMarkdownPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -126,6 +131,7 @@ export default {
       :group-path="fullPath"
       :is-editing="true"
       :iteration="iteration"
+      :preview-markdown-path="previewMarkdownPath"
       @updated="isEditing = false"
       @cancel="isEditing = false"
     />
@@ -157,7 +163,7 @@ export default {
         </gl-new-dropdown>
       </div>
       <h3 ref="title" class="page-title">{{ iteration.title }}</h3>
-      <div ref="description" v-text="iteration.description"></div>
+      <div ref="description" v-html="iteration.descriptionHtml"></div>
       <iteration-report-summary :group-path="fullPath" :iteration-id="iteration.id" />
       <iteration-report-tabs :group-path="fullPath" :iteration-id="iteration.id" />
     </template>

ee/app/assets/javascripts/iterations/index.js

@@ -52,7 +52,7 @@ export function initIterationForm() {
 export function initIterationReport() {
   const el = document.querySelector('.js-iteration');
 
-  const { fullPath, iterationIid, editIterationPath } = el.dataset;
+  const { fullPath, iterationIid, editIterationPath, previewMarkdownPath } = el.dataset;
   const canEdit = parseBoolean(el.dataset.canEdit);
 
   return new Vue({
@@ -65,6 +65,7 @@ export function initIterationReport() {
           iterationIid,
           canEdit,
           editIterationPath,
+          previewMarkdownPath,
         },
       });
     },

ee/app/assets/javascripts/iterations/queries/group_iteration.query.graphql

@@ -7,6 +7,7 @@ query GroupIteration($groupPath: ID!, $iid: ID!) {
         iid
         id
         description
+        descriptionHtml
         webPath
         startDate
         dueDate

ee/app/graphql/types/iteration_type.rb

@@ -20,6 +20,7 @@ module Types
 
     field :description, GraphQL::STRING_TYPE, null: true,
           description: 'Description of the iteration'
+    markdown_field :description_html, null: true
 
     field :state, Types::IterationStateEnum, null: false,
           description: 'State of the iteration'

ee/spec/frontend/iterations/components/iteration_report_spec.js

@@ -59,7 +59,7 @@ describe('Iterations tabs', () => {
     const iteration = {
       title: 'June week 1',
       id: 'gid://gitlab/Iteration/2',
-      description: 'The first week of June',
+      descriptionHtml: 'The first week of June',
       startDate: '2020-06-02',
       dueDate: '2020-06-08',
     };
@@ -89,24 +89,7 @@ describe('Iterations tabs', () => {
 
     it('shows title and description', () => {
       expect(findTitle().text()).toContain(iteration.title);
-      expect(findDescription().text()).toContain(iteration.description);
-    });
-
-    it('escapes html in description', async () => {
-      wrapper.setData({
-        namespace: {
-          iteration: {
-            ...iteration,
-            description: `<img src=x onerror=alert(document.domain)>`,
-          },
-        },
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(findDescription().html()).toEqual(
-        '<div>&lt;img src=x onerror=alert(document.domain)&gt;</div>',
-      );
+      expect(findDescription().text()).toContain(iteration.descriptionHtml);
     });
   });
 });