From ee664acb356f8123f4f6b00b73c1e1cf0866c7fb Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Thu, 20 Oct 2022 09:40:42 +0000 Subject: Add latest changes from gitlab-org/gitlab@15-5-stable-ee --- .../pages/shared/wikis/components/wiki_form.vue | 221 +++++++++------------ 1 file changed, 91 insertions(+), 130 deletions(-) (limited to 'app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue') 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 9acc1cb62a1..7b9656de362 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -8,21 +8,19 @@ import { GlFormGroup, GlFormInput, GlFormSelect, - GlSegmentedControl, } from '@gitlab/ui'; -import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; -import axios from '~/lib/utils/axios_utils'; +import { getDraft, clearDraft, updateDraft } from '~/lib/utils/autosave'; import csrf from '~/lib/utils/csrf'; 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 MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue'; import { - CONTENT_EDITOR_LOADED_ACTION, SAVED_USING_CONTENT_EDITOR_ACTION, WIKI_CONTENT_EDITOR_TRACKING_LABEL, WIKI_FORMAT_LABEL, WIKI_FORMAT_UPDATED_ACTION, + CONTENT_EDITOR_LOADED_ACTION, } from '../constants'; const trackingMixin = Tracking.mixin({ @@ -36,6 +34,29 @@ const MARKDOWN_LINK_TEXT = { org: '[[page-slug]]', }; +function getPagePath(pageInfo) { + return pageInfo.persisted ? pageInfo.path : pageInfo.createPath; +} + +const autosaveKey = (pageInfo, field) => { + const path = pageInfo.persisted ? pageInfo.path : pageInfo.createPath; + + return `${path}/${field}`; +}; + +const titleAutosaveKey = (pageInfo) => autosaveKey(pageInfo, 'title'); +const formatAutosaveKey = (pageInfo) => autosaveKey(pageInfo, 'format'); +const contentAutosaveKey = (pageInfo) => autosaveKey(pageInfo, 'content'); +const commitAutosaveKey = (pageInfo) => autosaveKey(pageInfo, 'commit'); + +const getTitle = (pageInfo) => getDraft(titleAutosaveKey(pageInfo)) || pageInfo.title?.trim() || ''; +const getFormat = (pageInfo) => + getDraft(formatAutosaveKey(pageInfo)) || pageInfo.format || 'markdown'; +const getContent = (pageInfo) => getDraft(contentAutosaveKey(pageInfo)) || pageInfo.content || ''; +const getCommitMessage = (pageInfo) => + getDraft(commitAutosaveKey(pageInfo)) || pageInfo.commitMessage || ''; +const getIsFormDirty = (pageInfo) => Boolean(getDraft(titleAutosaveKey(pageInfo))); + export default { i18n: { title: { @@ -74,10 +95,6 @@ export default { }, cancel: s__('WikiPage|Cancel'), }, - switchEditingControlOptions: [ - { text: s__('Wiki Page|Source'), value: 'source' }, - { text: s__('Wiki Page|Rich text'), value: 'richText' }, - ], components: { GlIcon, GlForm, @@ -87,26 +104,21 @@ export default { GlSprintf, GlLink, GlButton, - GlSegmentedControl, - MarkdownField, - LocalStorageSync, - ContentEditor: () => - import( - /* webpackChunkName: 'content_editor' */ '~/content_editor/components/content_editor.vue' - ), + MarkdownEditor, }, mixins: [trackingMixin], inject: ['formatOptions', 'pageInfo'], data() { return { editingMode: 'source', - title: this.pageInfo.title?.trim() || '', - format: this.pageInfo.format || 'markdown', - content: this.pageInfo.content || '', - commitMessage: '', - isDirty: false, + title: getTitle(this.pageInfo), + format: getFormat(this.pageInfo), + content: getContent(this.pageInfo), + commitMessage: getCommitMessage(this.pageInfo), contentEditorEmpty: false, + isContentEditorActive: false, switchEditingControlDisabled: false, + isFormDirty: getIsFormDirty(this.pageInfo), }; }, computed: { @@ -117,7 +129,7 @@ export default { return csrf.token; }, formAction() { - return this.pageInfo.persisted ? this.pageInfo.path : this.pageInfo.createPath; + return getPagePath(this.pageInfo); }, helpPath() { return setUrlFragment( @@ -162,15 +174,9 @@ export default { disableSubmitButton() { return this.noContent || !this.title; }, - isContentEditorActive() { - return this.isMarkdownFormat && this.useContentEditor; - }, - useContentEditor() { - return this.editingMode === 'richText'; - }, }, mounted() { - this.updateCommitMessage(); + if (!this.commitMessage) this.updateCommitMessage(); window.addEventListener('beforeunload', this.onPageUnload); }, @@ -178,51 +184,45 @@ export default { window.removeEventListener('beforeunload', this.onPageUnload); }, methods: { - renderMarkdown(content) { - return axios - .post(this.pageInfo.markdownPreviewPath, { text: content }) - .then(({ data }) => data.body); - }, - - setEditingMode(editingMode) { - this.editingMode = editingMode; - }, - async handleFormSubmit(e) { - e.preventDefault(); + this.isFormDirty = false; - if (this.useContentEditor) { - this.trackFormSubmit(); - } + e.preventDefault(); + this.trackFormSubmit(); this.trackWikiFormat(); // Wait until form field values are refreshed await this.$nextTick(); e.target.submit(); + }, - this.isDirty = false; + updateDrafts() { + updateDraft(titleAutosaveKey(this.pageInfo), this.title); + updateDraft(formatAutosaveKey(this.pageInfo), this.format); + updateDraft(contentAutosaveKey(this.pageInfo), this.content); + updateDraft(commitAutosaveKey(this.pageInfo), this.commitMessage); }, - handleContentChange() { - this.isDirty = true; + clearDrafts() { + clearDraft(titleAutosaveKey(this.pageInfo)); + clearDraft(formatAutosaveKey(this.pageInfo)); + clearDraft(contentAutosaveKey(this.pageInfo)); + clearDraft(commitAutosaveKey(this.pageInfo)); }, - handleContentEditorChange({ empty, markdown, changed }) { + handleContentEditorChange({ empty, markdown }) { this.contentEditorEmpty = empty; - this.isDirty = changed; this.content = markdown; }, - onPageUnload(event) { - if (!this.isDirty) return undefined; - - event.preventDefault(); - - // eslint-disable-next-line no-param-reassign - event.returnValue = ''; - return ''; + onPageUnload() { + if (this.isFormDirty) { + this.updateDrafts(); + } else { + this.clearDrafts(); + } }, updateCommitMessage() { @@ -235,8 +235,13 @@ export default { this.commitMessage = newCommitMessage; }, - trackContentEditorLoaded() { - this.track(CONTENT_EDITOR_LOADED_ACTION); + notifyContentEditorActive() { + this.isContentEditorActive = true; + this.trackContentEditorLoaded(); + }, + + notifyContentEditorInactive() { + this.isContentEditorActive = false; }, trackFormSubmit() { @@ -256,12 +261,12 @@ export default { }); }, - enableSwitchEditingControl() { - this.switchEditingControlDisabled = false; + trackContentEditorLoaded() { + this.track(CONTENT_EDITOR_LOADED_ACTION); }, - disableSwitchEditingControl() { - this.switchEditingControlDisabled = true; + submitFormWithShortcut() { + this.$refs.form.submit(); }, }, }; @@ -269,10 +274,12 @@ export default { -- cgit v1.2.3