diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-20 18:40:28 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-20 18:40:28 +0300 |
commit | b595cb0c1dec83de5bdee18284abe86614bed33b (patch) | |
tree | 8c3d4540f193c5ff98019352f554e921b3a41a72 /app/assets/javascripts/pages/shared/wikis/components | |
parent | 2f9104a328fc8a4bddeaa4627b595166d24671d0 (diff) |
Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42
Diffstat (limited to 'app/assets/javascripts/pages/shared/wikis/components')
-rw-r--r-- | app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue | 286 |
2 files changed, 155 insertions, 133 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 index 7c23f60954a..e92f386a29e 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue @@ -3,6 +3,7 @@ import { GlSkeletonLoader, GlSafeHtmlDirective, GlAlert } from '@gitlab/ui'; import createFlash from '~/flash'; import { __ } from '~/locale'; import axios from '~/lib/utils/axios_utils'; +import { handleLocationHash } from '~/lib/utils/common_utils'; import { renderGFM } from '../render_gfm_facade'; export default { @@ -43,6 +44,7 @@ export default { this.$nextTick() .then(() => { renderGFM(this.$refs.content); + handleLocationHash(); }) .catch(() => createFlash({ 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 024b3bc9595..3c22844434d 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -1,5 +1,16 @@ <script> -import { GlForm, GlIcon, GlLink, GlButton, GlSprintf, GlAlert } from '@gitlab/ui'; +import { + GlForm, + GlIcon, + GlLink, + GlButton, + GlSprintf, + GlAlert, + GlFormGroup, + GlFormInput, + GlFormSelect, +} from '@gitlab/ui'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import axios from '~/lib/utils/axios_utils'; import csrf from '~/lib/utils/csrf'; import { setUrlFragment } from '~/lib/utils/url_utility'; @@ -75,12 +86,16 @@ export default { }, components: { GlAlert, + GlIcon, GlForm, + GlFormGroup, + GlFormInput, + GlFormSelect, GlSprintf, - GlIcon, GlLink, GlButton, MarkdownField, + LocalStorageSync, ContentEditor: () => import( /* webpackChunkName: 'content_editor' */ '~/content_editor/components/content_editor.vue' @@ -186,6 +201,10 @@ export default { this.useContentEditor = !this.useContentEditor; }, + setUseContentEditor(value) { + this.useContentEditor = value; + }, + async handleFormSubmit(e) { e.preventDefault(); @@ -305,150 +324,151 @@ export default { name="wiki[last_commit_sha]" :value="pageInfo.lastCommitSha" /> - <div class="form-group row"> - <div class="col-sm-2 col-form-label"> - <label class="control-label-full-width" for="wiki_title">{{ - $options.i18n.title.label - }}</label> - </div> - <div class="col-sm-10"> - <input - id="wiki_title" - v-model="title" - name="wiki[title]" - type="text" - class="form-control" - data-qa-selector="wiki_title_textbox" - :required="true" - :autofocus="!pageInfo.persisted" - :placeholder="$options.i18n.title.placeholder" - @input="updateCommitMessage" - /> - <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"> - {{ $options.i18n.title.helpText.learnMore }} - </gl-link> - </span> - </div> - </div> - <div class="form-group row"> - <div class="col-sm-2 col-form-label"> - <label class="control-label-full-width" for="wiki_format">{{ - $options.i18n.format.label - }}</label> + + <div class="row"> + <div class="col-sm-9"> + <gl-form-group :label="$options.i18n.title.label" label-for="wiki_title"> + <template #description> + <gl-icon class="gl-mr-n1" name="bulb" /> + {{ titleHelpText }} + <gl-link :href="helpPath" target="_blank"> + {{ $options.i18n.title.helpText.learnMore }} + </gl-link> + </template> + + <gl-form-input + id="wiki_title" + v-model="title" + name="wiki[title]" + type="text" + class="form-control" + data-qa-selector="wiki_title_textbox" + :required="true" + :autofocus="!pageInfo.persisted" + :placeholder="$options.i18n.title.placeholder" + @input="updateCommitMessage" + /> + </gl-form-group> </div> - <div class="col-sm-10"> - <select - id="wiki_format" - v-model="format" - class="form-control" - name="wiki[format]" - :disabled="isContentEditorActive" - > - <option v-for="(key, label) of formatOptions" :key="key" :value="key"> - {{ label }} - </option> - </select> + + <div class="col-sm-3 row-sm-10"> + <gl-form-group :label="$options.i18n.format.label" label-for="wiki_format"> + <gl-form-select + id="wiki_format" + v-model="format" + name="wiki[format]" + :disabled="isContentEditorActive" + class="form-control" + :value="formatOptions.Markdown" + > + <option v-for="(key, label) of formatOptions" :key="key" :value="key"> + {{ label }} + </option> + </gl-form-select> + </gl-form-group> </div> </div> - <div class="form-group row" data-testid="wiki-form-content-fieldset"> - <div class="col-sm-2 col-form-label"> - <label class="control-label-full-width" for="wiki_content">{{ - $options.i18n.content.label - }}</label> - </div> - <div class="col-sm-10"> - <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" - :data-qa-mode="toggleEditingModeButtonText" - variant="link" - @click="toggleEditingMode" - >{{ toggleEditingModeButtonText }}</gl-button - > - </div> - <markdown-field - v-if="!isContentEditorActive" - :markdown-preview-path="pageInfo.markdownPreviewPath" - :can-attach-file="true" - :enable-autocomplete="true" - :textarea-value="content" - :markdown-docs-path="pageInfo.markdownHelpPath" - :uploads-path="pageInfo.uploadsPath" - :enable-preview="isMarkdownFormat" - class="bordered-box" - > - <template #textarea> - <textarea - id="wiki_content" - ref="textarea" - v-model="content" - name="wiki[content]" - class="note-textarea js-gfm-input js-autosize markdown-area" - dir="auto" - data-supports-quick-actions="false" - data-qa-selector="wiki_content_textarea" - :autofocus="pageInfo.persisted" - :aria-label="$options.i18n.content.label" - :placeholder="$options.i18n.content.placeholder" - @input="handleContentChange" + + <div class="row" data-testid="wiki-form-content-fieldset"> + <div class="col-sm-12 row-sm-5"> + <gl-form-group> + <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" + :data-qa-mode="toggleEditingModeButtonText" + variant="link" + @click="toggleEditingMode" + >{{ toggleEditingModeButtonText }}</gl-button > - </textarea> - </template> - </markdown-field> - <div v-if="isContentEditorActive"> - <content-editor - :render-markdown="renderMarkdown" - :uploads-path="pageInfo.uploadsPath" - @initialized="loadInitialContent" - @change="handleContentEditorChange" + </div> + <local-storage-sync + storage-key="gl-wiki-content-editor-enabled" + :value="useContentEditor" + @input="setUseContentEditor" /> - <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" /> - </div> + <markdown-field + v-if="!isContentEditorActive" + :markdown-preview-path="pageInfo.markdownPreviewPath" + :can-attach-file="true" + :enable-autocomplete="true" + :textarea-value="content" + :markdown-docs-path="pageInfo.markdownHelpPath" + :uploads-path="pageInfo.uploadsPath" + :enable-preview="isMarkdownFormat" + class="bordered-box" + > + <template #textarea> + <textarea + id="wiki_content" + ref="textarea" + v-model="content" + name="wiki[content]" + class="note-textarea js-gfm-input js-autosize markdown-area" + dir="auto" + data-supports-quick-actions="false" + data-qa-selector="wiki_content_textarea" + :autofocus="pageInfo.persisted" + :aria-label="$options.i18n.content.label" + :placeholder="$options.i18n.content.placeholder" + @input="handleContentChange" + > + </textarea> + </template> + </markdown-field> + <div v-if="isContentEditorActive"> + <content-editor + :render-markdown="renderMarkdown" + :uploads-path="pageInfo.uploadsPath" + @initialized="loadInitialContent" + @change="handleContentEditorChange" + /> + <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" /> + </div> - <div class="clearfix"></div> - <div class="error-alert"></div> + <div class="clearfix"></div> + <div class="error-alert"></div> - <div class="form-text gl-text-gray-600"> - <gl-sprintf v-if="displayWikiSpecificMarkdownHelp" :message="$options.i18n.linksHelpText"> - <template #linkExample - ><code>{{ linkExample }}</code></template + <div class="form-text gl-text-gray-600"> + <gl-sprintf + v-if="displayWikiSpecificMarkdownHelp" + :message="$options.i18n.linksHelpText" > - <template - #link="// eslint-disable-next-line vue/no-template-shadow + <template #linkExample> + <code>{{ linkExample }}</code> + </template> + <template + #link="// eslint-disable-next-line vue/no-template-shadow { content }" - ><gl-link - :href="wikiSpecificMarkdownHelpPath" - target="_blank" - data-testid="wiki-markdown-help-link" - >{{ content }}</gl-link - ></template - > - </gl-sprintf> - </div> + ><gl-link + :href="wikiSpecificMarkdownHelpPath" + target="_blank" + data-testid="wiki-markdown-help-link" + >{{ content }}</gl-link + ></template + > + </gl-sprintf> + </div> + </gl-form-group> </div> </div> - <div class="form-group row"> - <div class="col-sm-2 col-form-label"> - <label class="control-label-full-width" for="wiki_message">{{ - $options.i18n.commitMessage.label - }}</label> - </div> - <div class="col-sm-10"> - <input - id="wiki_message" - v-model.trim="commitMessage" - name="wiki[message]" - type="text" - class="form-control" - data-qa-selector="wiki_message_textbox" - :placeholder="$options.i18n.commitMessage.label" - /> + + <div class="row"> + <div class="col-sm-12 row-sm-5"> + <gl-form-group :label="$options.i18n.commitMessage.label" label-for="wiki_message"> + <gl-form-input + id="wiki_message" + v-model.trim="commitMessage" + name="wiki[message]" + type="text" + class="form-control" + data-qa-selector="wiki_message_textbox" + :placeholder="$options.i18n.commitMessage.label" + /> + </gl-form-group> </div> </div> + <div class="form-actions"> <gl-button category="primary" |