diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 13:37:47 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 13:37:47 +0000 |
commit | aee0a117a889461ce8ced6fcf73207fe017f1d99 (patch) | |
tree | 891d9ef189227a8445d83f35c1b0fc99573f4380 /app/assets/javascripts/pages/shared/wikis | |
parent | 8d46af3258650d305f53b819eabf7ab18d22f59e (diff) | |
download | gitlab-ce-aee0a117a889461ce8ced6fcf73207fe017f1d99.tar.gz |
Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/pages/shared/wikis')
-rw-r--r-- | app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue | 70 |
1 files changed, 58 insertions, 12 deletions
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue index 6f19a9f4379..b29e9455755 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -15,6 +15,7 @@ import { setUrlFragment } from '~/lib/utils/url_utility'; import { __, s__, sprintf } from '~/locale'; import Tracking from '~/tracking'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { CONTENT_EDITOR_LOADED_ACTION, SAVED_USING_CONTENT_EDITOR_ACTION, @@ -46,7 +47,7 @@ export default { newPage: s__( 'WikiPage|Tip: You can specify the full path for the new file. We will automatically create any missing directories.', ), - moreInformation: s__('WikiPage|More Information.'), + learnMore: s__('WikiPage|Learn more.'), }, }, format: { @@ -104,6 +105,8 @@ export default { newPage: s__('WikiPage|Create page'), }, cancel: s__('WikiPage|Cancel'), + editSourceButtonText: s__('WikiPage|Edit source'), + editRichTextButtonText: s__('WikiPage|Edit rich text'), }, contentEditorFeedbackIssue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/332629', components: { @@ -123,7 +126,7 @@ export default { directives: { GlModalDirective, }, - mixins: [trackingMixin], + mixins: [trackingMixin, glFeatureFlagMixin()], inject: ['formatOptions', 'pageInfo'], data() { return { @@ -131,7 +134,6 @@ export default { format: this.pageInfo.format || 'markdown', content: this.pageInfo.content || '', isContentEditorAlertDismissed: false, - isContentEditorLoading: true, useContentEditor: false, commitMessage: '', isDirty: false, @@ -164,6 +166,11 @@ export default { linkExample() { return MARKDOWN_LINK_TEXT[this.format]; }, + toggleEditingModeButtonText() { + return this.isContentEditorActive + ? this.$options.i18n.editSourceButtonText + : this.$options.i18n.editRichTextButtonText; + }, submitButtonText() { return this.pageInfo.persisted ? this.$options.i18n.submitButton.existingPage @@ -188,7 +195,23 @@ export default { return this.format === 'markdown'; }, showContentEditorAlert() { - return this.isMarkdownFormat && !this.useContentEditor && !this.isContentEditorAlertDismissed; + return ( + !this.glFeatures.wikiSwitchBetweenContentEditorRawMarkdown && + this.isMarkdownFormat && + !this.useContentEditor && + !this.isContentEditorAlertDismissed + ); + }, + showSwitchEditingModeButton() { + return this.glFeatures.wikiSwitchBetweenContentEditorRawMarkdown && this.isMarkdownFormat; + }, + displayWikiSpecificMarkdownHelp() { + return !this.isContentEditorActive; + }, + displaySwitchBackToClassicEditorMessage() { + return ( + !this.glFeatures.wikiSwitchBetweenContentEditorRawMarkdown && this.isContentEditorActive + ); }, disableSubmitButton() { return this.noContent || !this.title || this.contentEditorRenderFailed; @@ -212,6 +235,14 @@ export default { .then(({ data }) => data.body); }, + toggleEditingMode() { + if (this.useContentEditor) { + this.content = this.contentEditor.getSerializedContent(); + } + + this.useContentEditor = !this.useContentEditor; + }, + async handleFormSubmit(e) { e.preventDefault(); @@ -311,8 +342,11 @@ export default { trackWikiFormat() { this.track(WIKI_FORMAT_UPDATED_ACTION, { label: WIKI_FORMAT_LABEL, - value: this.format, - extra: { project_path: this.pageInfo.path, old_format: this.pageInfo.format }, + extra: { + project_path: this.pageInfo.path, + old_format: this.pageInfo.format, + value: this.format, + }, }); }, @@ -371,10 +405,9 @@ export default { <span class="gl-display-inline-block gl-max-w-full gl-mt-2 gl-text-gray-600"> <gl-icon class="gl-mr-n1" name="bulb" /> {{ titleHelpText }} - <gl-link :href="helpPath" target="_blank" - ><gl-icon name="question-o" /> - {{ $options.i18n.title.helpText.moreInformation }}</gl-link - > + <gl-link :href="helpPath" target="_blank"> + {{ $options.i18n.title.helpText.learnMore }} + </gl-link> </span> </div> </div> @@ -405,6 +438,19 @@ export default { }}</label> </div> <div class="col-sm-10"> + <div + v-if="showSwitchEditingModeButton" + class="gl-display-flex gl-justify-content-end gl-mb-3" + > + <gl-button + data-testid="toggle-editing-mode-button" + data-qa-selector="editing_mode_button" + :data-qa-mode="toggleEditingModeButtonText" + variant="link" + @click="toggleEditingMode" + >{{ toggleEditingModeButtonText }}</gl-button + > + </div> <gl-alert v-if="showContentEditorAlert" class="gl-mb-6" @@ -498,7 +544,7 @@ export default { <div class="error-alert"></div> <div class="form-text gl-text-gray-600"> - <gl-sprintf v-if="!isContentEditorActive" :message="$options.i18n.linksHelpText"> + <gl-sprintf v-if="displayWikiSpecificMarkdownHelp" :message="$options.i18n.linksHelpText"> <template #linkExample ><code>{{ linkExample }}</code></template > @@ -513,7 +559,7 @@ export default { ></template > </gl-sprintf> - <span v-else> + <span v-if="displaySwitchBackToClassicEditorMessage"> {{ $options.i18n.contentEditor.switchToOldEditor.helpText }} <gl-button variant="link" @click="confirmSwitchToOldEditor">{{ $options.i18n.contentEditor.switchToOldEditor.label |