Add latest changes from gitlab-org/gitlab@master
This commit is contained in:
parent
bf10fcacaa
commit
699bb48eda
|
@ -1,13 +1,16 @@
|
|||
<script>
|
||||
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
|
||||
import { helpPagePath } from '~/helpers/help_page_helper';
|
||||
import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
|
||||
import glFeaturesFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
|
||||
import updateMixin from '../../mixins/update';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MarkdownField,
|
||||
MarkdownEditor,
|
||||
},
|
||||
mixins: [updateMixin],
|
||||
mixins: [updateMixin, glFeaturesFlagMixin()],
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
|
@ -51,7 +54,26 @@ export default {
|
|||
<template>
|
||||
<div class="common-note-form">
|
||||
<label class="sr-only" for="issue-description">{{ __('Description') }}</label>
|
||||
<markdown-editor
|
||||
v-if="glFeatures.contentEditorOnIssues"
|
||||
class="gl-mt-3"
|
||||
:value="value"
|
||||
:render-markdown-path="markdownPreviewPath"
|
||||
:markdown-docs-path="markdownDocsPath"
|
||||
:form-field-aria-label="__('Description')"
|
||||
:form-field-placeholder="__('Write a comment or drag your files here…')"
|
||||
form-field-id="issue-description"
|
||||
form-field-name="issue-description"
|
||||
:quick-actions-docs-path="quickActionsDocsPath"
|
||||
:enable-autocomplete="enableAutocomplete"
|
||||
supports-quick-actions
|
||||
init-on-autofocus
|
||||
@input="$emit('input', $event)"
|
||||
@keydown.meta.enter="updateIssuable"
|
||||
@keydown.ctrl.enter="updateIssuable"
|
||||
/>
|
||||
<markdown-field
|
||||
v-else
|
||||
:markdown-preview-path="markdownPreviewPath"
|
||||
:markdown-docs-path="markdownDocsPath"
|
||||
:quick-actions-docs-path="quickActionsDocsPath"
|
||||
|
|
|
@ -60,6 +60,7 @@ export function initIncidentApp(issueData = {}) {
|
|||
projectId,
|
||||
slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
|
||||
uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable),
|
||||
contentEditorOnIssues: gon.features.contentEditorOnIssues,
|
||||
},
|
||||
render(createElement) {
|
||||
return createElement(IssueApp, {
|
||||
|
|
|
@ -29,6 +29,11 @@ export default {
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
quickActionsDocsPath: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
uploadsPath: {
|
||||
type: String,
|
||||
required: false,
|
||||
|
@ -72,6 +77,11 @@ export default {
|
|||
required: false,
|
||||
default: false,
|
||||
},
|
||||
supportsQuickActions: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -159,6 +169,7 @@ export default {
|
|||
:enable-autocomplete="enableAutocomplete"
|
||||
:textarea-value="value"
|
||||
:markdown-docs-path="markdownDocsPath"
|
||||
:quick-actions-docs-path="quickActionsDocsPath"
|
||||
:uploads-path="uploadsPath"
|
||||
:enable-preview="enablePreview"
|
||||
class="bordered-box"
|
||||
|
@ -171,7 +182,7 @@ export default {
|
|||
:name="formFieldName"
|
||||
class="note-textarea js-gfm-input js-autosize markdown-area"
|
||||
dir="auto"
|
||||
data-supports-quick-actions="false"
|
||||
:data-supports-quick-actions="supportsQuickActions"
|
||||
data-qa-selector="markdown_editor_form_field"
|
||||
:aria-label="formFieldAriaLabel"
|
||||
:placeholder="formFieldPlaceholder"
|
||||
|
|
|
@ -42,6 +42,8 @@ class Projects::IssuesController < Projects::ApplicationController
|
|||
|
||||
before_action do
|
||||
push_frontend_feature_flag(:incident_timeline, project)
|
||||
push_frontend_feature_flag(:preserve_unchanged_markdown, project)
|
||||
push_frontend_feature_flag(:content_editor_on_issues, project)
|
||||
end
|
||||
|
||||
before_action only: [:index, :show] do
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
name: content_editor_on_issues
|
||||
introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/98703
|
||||
rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/375172
|
||||
milestone: '15.5'
|
||||
type: development
|
||||
group: group::editor
|
||||
default_enabled: false
|
|
@ -2,13 +2,15 @@ import { shallowMount } from '@vue/test-utils';
|
|||
import DescriptionField from '~/issues/show/components/fields/description.vue';
|
||||
import eventHub from '~/issues/show/event_hub';
|
||||
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
|
||||
import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
|
||||
|
||||
describe('Description field component', () => {
|
||||
let wrapper;
|
||||
|
||||
const findTextarea = () => wrapper.findComponent({ ref: 'textarea' });
|
||||
const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor);
|
||||
|
||||
const mountComponent = (description = 'test') =>
|
||||
const mountComponent = ({ description = 'test', contentEditorOnIssues = false } = {}) =>
|
||||
shallowMount(DescriptionField, {
|
||||
attachTo: document.body,
|
||||
propsData: {
|
||||
|
@ -17,6 +19,11 @@ describe('Description field component', () => {
|
|||
quickActionsDocsPath: '/',
|
||||
value: description,
|
||||
},
|
||||
provide: {
|
||||
glFeatures: {
|
||||
contentEditorOnIssues,
|
||||
},
|
||||
},
|
||||
stubs: {
|
||||
MarkdownField,
|
||||
},
|
||||
|
@ -40,7 +47,7 @@ describe('Description field component', () => {
|
|||
it('renders markdown field with a markdown description', () => {
|
||||
const markdown = '**test**';
|
||||
|
||||
wrapper = mountComponent(markdown);
|
||||
wrapper = mountComponent({ description: markdown });
|
||||
|
||||
expect(findTextarea().element.value).toBe(markdown);
|
||||
});
|
||||
|
@ -66,4 +73,52 @@ describe('Description field component', () => {
|
|||
|
||||
expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
|
||||
});
|
||||
|
||||
describe('when contentEditorOnIssues feature flag is on', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mountComponent({ contentEditorOnIssues: true });
|
||||
});
|
||||
|
||||
it('uses the MarkdownEditor component to edit markdown', () => {
|
||||
expect(findMarkdownEditor().props()).toEqual(
|
||||
expect.objectContaining({
|
||||
value: 'test',
|
||||
renderMarkdownPath: '/',
|
||||
markdownDocsPath: '/',
|
||||
quickActionsDocsPath: expect.any(String),
|
||||
initOnAutofocus: true,
|
||||
supportsQuickActions: true,
|
||||
enableAutocomplete: true,
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('triggers update with meta+enter', () => {
|
||||
findMarkdownEditor().vm.$emit('keydown', {
|
||||
type: 'keydown',
|
||||
keyCode: 13,
|
||||
metaKey: true,
|
||||
});
|
||||
|
||||
expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
|
||||
});
|
||||
|
||||
it('triggers update with ctrl+enter', () => {
|
||||
findMarkdownEditor().vm.$emit('keydown', {
|
||||
type: 'keydown',
|
||||
keyCode: 13,
|
||||
ctrlKey: true,
|
||||
});
|
||||
|
||||
expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
|
||||
});
|
||||
|
||||
it('emits input event when MarkdownEditor emits input event', () => {
|
||||
const markdown = 'markdown';
|
||||
|
||||
findMarkdownEditor().vm.$emit('input', markdown);
|
||||
|
||||
expect(wrapper.emitted('input')).toEqual([[markdown]]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -18,6 +18,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
|
|||
const value = 'test markdown';
|
||||
const renderMarkdownPath = '/api/markdown';
|
||||
const markdownDocsPath = '/help/markdown';
|
||||
const quickActionsDocsPath = '/help/quickactions';
|
||||
const enableAutocomplete = true;
|
||||
const enablePreview = false;
|
||||
const formFieldId = 'markdown_field';
|
||||
|
@ -33,6 +34,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
|
|||
value,
|
||||
renderMarkdownPath,
|
||||
markdownDocsPath,
|
||||
quickActionsDocsPath,
|
||||
enableAutocomplete,
|
||||
enablePreview,
|
||||
formFieldId,
|
||||
|
@ -63,11 +65,12 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
|
|||
});
|
||||
|
||||
it('displays markdown field by default', () => {
|
||||
buildWrapper();
|
||||
buildWrapper({ propsData: { supportsQuickActions: true } });
|
||||
|
||||
expect(findMarkdownField().props()).toEqual(
|
||||
expect.objectContaining({
|
||||
markdownPreviewPath: renderMarkdownPath,
|
||||
quickActionsDocsPath,
|
||||
canAttachFile: true,
|
||||
enableAutocomplete,
|
||||
textareaValue: value,
|
||||
|
|
Loading…
Reference in New Issue