diff options
Diffstat (limited to 'app/assets/javascripts/pages/shared/wikis')
5 files changed, 130 insertions, 144 deletions
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue new file mode 100644 index 00000000000..7c23f60954a --- /dev/null +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue @@ -0,0 +1,92 @@ +<script> +import { GlSkeletonLoader, GlSafeHtmlDirective, GlAlert } from '@gitlab/ui'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; +import axios from '~/lib/utils/axios_utils'; +import { renderGFM } from '../render_gfm_facade'; + +export default { + components: { + GlSkeletonLoader, + GlAlert, + }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + props: { + getWikiContentUrl: { + type: String, + required: true, + }, + }, + data() { + return { + isLoadingContent: false, + loadingContentFailed: false, + content: null, + }; + }, + mounted() { + this.loadWikiContent(); + }, + methods: { + async loadWikiContent() { + this.loadingContentFailed = false; + this.isLoadingContent = true; + + try { + const { + data: { content }, + } = await axios.get(this.getWikiContentUrl, { params: { render_html: true } }); + this.content = content; + + this.$nextTick() + .then(() => { + renderGFM(this.$refs.content); + }) + .catch(() => + createFlash({ + message: this.$options.i18n.renderingContentFailed, + }), + ); + } catch (e) { + this.loadingContentFailed = true; + } finally { + this.isLoadingContent = false; + } + }, + }, + i18n: { + loadingContentFailed: __( + 'The content for this wiki page failed to load. To fix this error, reload the page.', + ), + retryLoadingContent: __('Retry'), + renderingContentFailed: __('The content for this wiki page failed to render.'), + }, +}; +</script> +<template> + <gl-skeleton-loader v-if="isLoadingContent" :width="830" :height="113"> + <rect width="540" height="16" rx="4" /> + <rect y="49" width="701" height="16" rx="4" /> + <rect y="24" width="830" height="16" rx="4" /> + <rect y="73" width="540" height="16" rx="4" /> + </gl-skeleton-loader> + <gl-alert + v-else-if="loadingContentFailed" + :dismissible="false" + variant="danger" + :primary-button-text="$options.i18n.retryLoadingContent" + @primaryAction="loadWikiContent" + > + {{ $options.i18n.loadingContentFailed }} + </gl-alert> + <div + v-else-if="!loadingContentFailed && !isLoadingContent" + ref="content" + data-qa-selector="wiki_page_content" + data-testid="wiki_page_content" + class="js-wiki-page-content md" + v-html="content /* eslint-disable-line vue/no-v-html */" + ></div> +</template> 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 8ef31b9b983..024b3bc9595 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -1,21 +1,11 @@ <script> -import { - GlForm, - GlIcon, - GlLink, - GlButton, - GlSprintf, - GlAlert, - GlModal, - GlModalDirective, -} from '@gitlab/ui'; +import { GlForm, GlIcon, GlLink, GlButton, GlSprintf, GlAlert } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import csrf from '~/lib/utils/csrf'; import { setUrlFragment } from '~/lib/utils/url_utility'; -import { __, s__, sprintf } from '~/locale'; +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, @@ -64,31 +54,6 @@ export default { ), primaryAction: s__('WikiPage|Retry'), }, - useNewEditor: { - primaryLabel: s__('WikiPage|Use the new editor'), - secondaryLabel: s__('WikiPage|Try this later'), - title: s__('WikiPage|Get a richer editing experience'), - text: s__( - "WikiPage|Try the new visual Markdown editor. Read the %{linkStart}documentation%{linkEnd} to learn what's currently supported.", - ), - }, - switchToOldEditor: { - label: s__('WikiPage|Switch me back to the classic editor.'), - helpText: s__( - "WikiPage|This editor is in beta and may not display the page's contents properly. Switching back to the classic editor will discard changes you've made in the new editor.", - ), - modal: { - title: s__('WikiPage|Are you sure you want to switch back to the classic editor?'), - primary: s__('WikiPage|Switch to classic editor'), - cancel: s__('WikiPage|Keep editing'), - text: s__( - "WikiPage|Switching to the classic editor will discard any changes you've made in the new editor.", - ), - }, - }, - feedbackTip: __( - 'Tell us your experiences with the new Markdown editor %{linkStart}in this feedback issue%{linkEnd}.', - ), }, linksHelpText: s__( 'WikiPage|To link to a (new) page, simply type %{linkExample}. More examples are in the %{linkStart}documentation%{linkEnd}.', @@ -108,7 +73,6 @@ export default { editSourceButtonText: s__('WikiPage|Edit source'), editRichTextButtonText: s__('WikiPage|Edit rich text'), }, - contentEditorFeedbackIssue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/332629', components: { GlAlert, GlForm, @@ -116,24 +80,19 @@ export default { GlIcon, GlLink, GlButton, - GlModal, MarkdownField, ContentEditor: () => import( /* webpackChunkName: 'content_editor' */ '~/content_editor/components/content_editor.vue' ), }, - directives: { - GlModalDirective, - }, - mixins: [trackingMixin, glFeatureFlagMixin()], + mixins: [trackingMixin], inject: ['formatOptions', 'pageInfo'], data() { return { title: this.pageInfo.title?.trim() || '', format: this.pageInfo.format || 'markdown', content: this.pageInfo.content || '', - isContentEditorAlertDismissed: false, useContentEditor: false, commitMessage: '', isDirty: false, @@ -194,25 +153,9 @@ export default { isMarkdownFormat() { return this.format === 'markdown'; }, - showContentEditorAlert() { - 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; }, @@ -312,23 +255,6 @@ export default { this.commitMessage = newCommitMessage; }, - initContentEditor() { - this.useContentEditor = true; - }, - - switchToOldEditor() { - this.useContentEditor = false; - }, - - confirmSwitchToOldEditor() { - if (this.contentEditorRenderFailed) { - this.contentEditorRenderFailed = false; - this.switchToOldEditor(); - } else { - this.$refs.confirmSwitchToOldEditorModal.show(); - } - }, - trackContentEditorLoaded() { this.track(CONTENT_EDITOR_LOADED_ACTION); }, @@ -349,10 +275,6 @@ export default { }, }); }, - - dismissContentEditorAlert() { - this.isContentEditorAlertDismissed = true; - }, }, }; </script> @@ -438,10 +360,7 @@ export default { }}</label> </div> <div class="col-sm-10"> - <div - v-if="showSwitchEditingModeButton" - class="gl-display-flex gl-justify-content-end gl-mb-3" - > + <div v-if="isMarkdownFormat" 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" @@ -451,42 +370,6 @@ export default { >{{ toggleEditingModeButtonText }}</gl-button > </div> - <gl-alert - v-if="showContentEditorAlert" - class="gl-mb-6" - variant="info" - data-qa-selector="try_new_editor_container" - :primary-button-text="$options.i18n.contentEditor.useNewEditor.primaryLabel" - :secondary-button-text="$options.i18n.contentEditor.useNewEditor.secondaryLabel" - :dismiss-label="$options.i18n.contentEditor.useNewEditor.secondaryLabel" - :title="$options.i18n.contentEditor.useNewEditor.title" - @primaryAction="initContentEditor" - @secondaryAction="dismissContentEditorAlert" - @dismiss="dismissContentEditorAlert" - > - <gl-sprintf :message="$options.i18n.contentEditor.useNewEditor.text"> - <template - #link="// eslint-disable-next-line vue/no-template-shadow - { content }" - ><gl-link - :href="contentEditorHelpPath" - target="_blank" - data-testid="content-editor-help-link" - >{{ content }}</gl-link - ></template - > - </gl-sprintf> - </gl-alert> - <gl-modal - ref="confirmSwitchToOldEditorModal" - modal-id="confirm-switch-to-old-editor" - :title="$options.i18n.contentEditor.switchToOldEditor.modal.title" - :action-primary="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.primary }" - :action-cancel="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.cancel }" - @primary="switchToOldEditor" - > - {{ $options.i18n.contentEditor.switchToOldEditor.modal.text }} - </gl-modal> <markdown-field v-if="!isContentEditorActive" :markdown-preview-path="pageInfo.markdownPreviewPath" @@ -516,22 +399,7 @@ export default { </textarea> </template> </markdown-field> - <div v-if="isContentEditorActive"> - <gl-alert class="gl-mb-6" variant="tip" :dismissible="false"> - <gl-sprintf :message="$options.i18n.contentEditor.feedbackTip"> - <template - #link="// eslint-disable-next-line vue/no-template-shadow - { content }" - ><gl-link - :href="$options.contentEditorFeedbackIssue" - target="_blank" - data-testid="wiki-markdown-help-link" - >{{ content }}</gl-link - ></template - > - </gl-sprintf> - </gl-alert> <content-editor :render-markdown="renderMarkdown" :uploads-path="pageInfo.uploadsPath" @@ -560,12 +428,6 @@ export default { ></template > </gl-sprintf> - <span v-if="displaySwitchBackToClassicEditorMessage"> - {{ $options.i18n.contentEditor.switchToOldEditor.helpText }} - <gl-button variant="link" @click="confirmSwitchToOldEditor">{{ - $options.i18n.contentEditor.switchToOldEditor.label - }}</gl-button> - </span> </div> </div> </div> diff --git a/app/assets/javascripts/pages/shared/wikis/edit.js b/app/assets/javascripts/pages/shared/wikis/edit.js index beeabfde1a6..02878633916 100644 --- a/app/assets/javascripts/pages/shared/wikis/edit.js +++ b/app/assets/javascripts/pages/shared/wikis/edit.js @@ -3,8 +3,8 @@ import Vue from 'vue'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import csrf from '~/lib/utils/csrf'; import Translate from '~/vue_shared/translate'; -import GLForm from '../../../gl_form'; -import ZenMode from '../../../zen_mode'; +import GLForm from '~/gl_form'; +import ZenMode from '~/zen_mode'; import deleteWikiModal from './components/delete_wiki_modal.vue'; import wikiAlert from './components/wiki_alert.vue'; import wikiForm from './components/wiki_form.vue'; diff --git a/app/assets/javascripts/pages/shared/wikis/render_gfm_facade.js b/app/assets/javascripts/pages/shared/wikis/render_gfm_facade.js new file mode 100644 index 00000000000..90cc2983153 --- /dev/null +++ b/app/assets/javascripts/pages/shared/wikis/render_gfm_facade.js @@ -0,0 +1,5 @@ +import $ from 'jquery'; + +export const renderGFM = (el) => { + return $(el).renderGFM(); +}; diff --git a/app/assets/javascripts/pages/shared/wikis/show.js b/app/assets/javascripts/pages/shared/wikis/show.js new file mode 100644 index 00000000000..9906cb595f8 --- /dev/null +++ b/app/assets/javascripts/pages/shared/wikis/show.js @@ -0,0 +1,27 @@ +import Vue from 'vue'; +import Wikis from './wikis'; +import WikiContent from './components/wiki_content.vue'; + +const mountWikiContentApp = () => { + const el = document.querySelector('.js-async-wiki-page-content'); + + if (el) { + const { getWikiContentUrl } = el.dataset; + + // eslint-disable-next-line no-new + new Vue({ + el, + render(createElement) { + return createElement(WikiContent, { + props: { getWikiContentUrl }, + }); + }, + }); + } +}; + +export const mountApplications = () => { + // eslint-disable-next-line no-new + new Wikis(); + mountWikiContentApp(); +}; |