Commit fdbc7176 authored by Stan Hu's avatar Stan Hu Committed by Phil Hughes

Fix Markdown not rendering on releases page

Previously Markdown that appeared in the releases page would only be
shown in the tags page but not in the summary page. We fix this by
adding a reference to GitLab Markdown in the description block and
ensuring the Vue component renders Markdown.

Closes https://gitlab.com/gitlab-org/gitlab/issues/39483
parent c0ba849e
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import $ from 'jquery';
import { slugify } from '~/lib/utils/text_utility'; import { slugify } from '~/lib/utils/text_utility';
import { getLocationHash } from '~/lib/utils/url_utility'; import { getLocationHash } from '~/lib/utils/url_utility';
import { scrollToElement } from '~/lib/utils/common_utils'; import { scrollToElement } from '~/lib/utils/common_utils';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import '~/behaviors/markdown/render_gfm';
import EvidenceBlock from './evidence_block.vue'; import EvidenceBlock from './evidence_block.vue';
import ReleaseBlockAssets from './release_block_assets.vue'; import ReleaseBlockAssets from './release_block_assets.vue';
import ReleaseBlockFooter from './release_block_footer.vue'; import ReleaseBlockFooter from './release_block_footer.vue';
...@@ -65,7 +67,10 @@ export default { ...@@ -65,7 +67,10 @@ export default {
return Boolean(this.glFeatures.releaseIssueSummary && !_.isEmpty(this.release.milestones)); return Boolean(this.glFeatures.releaseIssueSummary && !_.isEmpty(this.release.milestones));
}, },
}, },
mounted() { mounted() {
this.renderGFM();
const hash = getLocationHash(); const hash = getLocationHash();
if (hash && slugify(hash) === this.id) { if (hash && slugify(hash) === this.id) {
this.isHighlighted = true; this.isHighlighted = true;
...@@ -76,6 +81,11 @@ export default { ...@@ -76,6 +81,11 @@ export default {
scrollToElement(this.$el); scrollToElement(this.$el);
} }
}, },
methods: {
renderGFM() {
$(this.$refs['gfm-content']).renderGFM();
},
},
}; };
</script> </script>
<template> <template>
...@@ -91,7 +101,7 @@ export default { ...@@ -91,7 +101,7 @@ export default {
<release-block-assets v-if="shouldRenderAssets" :assets="assets" /> <release-block-assets v-if="shouldRenderAssets" :assets="assets" />
<evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" /> <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" />
<div class="card-text prepend-top-default"> <div ref="gfm-content" class="card-text prepend-top-default">
<div v-html="release.description_html"></div> <div v-html="release.description_html"></div>
</div> </div>
</div> </div>
......
---
title: Fix Markdown not rendering on releases page
merge_request: 23370
author:
type: fixed
import $ from 'jquery';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { first } from 'underscore'; import { first } from 'underscore';
import EvidenceBlock from '~/releases/list/components/evidence_block.vue'; import EvidenceBlock from '~/releases/list/components/evidence_block.vue';
...@@ -43,6 +44,7 @@ describe('Release block', () => { ...@@ -43,6 +44,7 @@ describe('Release block', () => {
const editButton = () => wrapper.find('.js-edit-button'); const editButton = () => wrapper.find('.js-edit-button');
beforeEach(() => { beforeEach(() => {
jest.spyOn($.fn, 'renderGFM');
releaseClone = JSON.parse(JSON.stringify(release)); releaseClone = JSON.parse(JSON.stringify(release));
}); });
...@@ -66,6 +68,11 @@ describe('Release block', () => { ...@@ -66,6 +68,11 @@ describe('Release block', () => {
expect(wrapper.text()).toContain(release.name); expect(wrapper.text()).toContain(release.name);
}); });
it('renders release description', () => {
expect(wrapper.vm.$refs['gfm-content']).toBeDefined();
expect($.fn.renderGFM).toHaveBeenCalledTimes(1);
});
it('renders release date', () => { it('renders release date', () => {
expect(wrapper.text()).toContain(timeagoMixin.methods.timeFormatted(release.released_at)); expect(wrapper.text()).toContain(timeagoMixin.methods.timeFormatted(release.released_at));
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment