diff options
Diffstat (limited to 'app/assets/javascripts')
9 files changed, 73 insertions, 20 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue index 1a586bd1e91..bc4df04cb30 100644 --- a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue +++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue @@ -159,8 +159,10 @@ export default { </div> <div class="gl-display-table-cell gl-pr-3 gl-vertical-align-middle"> - <div class="right-arrow"> - <i class="right-arrow-head"></i> + <div class="right-arrow gl-relative gl-w-full gl-bg-gray-400"> + <i + class="right-arrow-head gl-absolute gl-border-solid gl-border-gray-400 gl-display-inline-block gl-p-2" + ></i> </div> </div> diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue index beb3497e250..92f3c3fb8fa 100644 --- a/app/assets/javascripts/content_editor/components/content_editor.vue +++ b/app/assets/javascripts/content_editor/components/content_editor.vue @@ -90,6 +90,11 @@ export default { required: false, default: () => ({}), }, + disableAttachments: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -223,7 +228,11 @@ export default { class="md-area gl-border-none! gl-shadow-none!" :class="{ 'is-focused': focused }" > - <formatting-toolbar ref="toolbar" @enableMarkdownEditor="$emit('enableMarkdownEditor')" /> + <formatting-toolbar + ref="toolbar" + :hide-attachment-button="disableAttachments" + @enableMarkdownEditor="$emit('enableMarkdownEditor')" + /> <div v-if="showPlaceholder" class="gl-absolute gl-text-gray-400 gl-px-5 gl-pt-4"> {{ placeholder }} </div> diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue index fac259cf6a1..89d7a2c958c 100644 --- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue +++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue @@ -16,6 +16,13 @@ export default { ToolbarMoreDropdown, EditorModeSwitcher, }, + props: { + hideAttachmentButton: { + type: Boolean, + default: false, + required: false, + }, + }, methods: { trackToolbarControlExecution({ contentType, value }) { trackUIControl({ property: contentType, value }); @@ -114,6 +121,7 @@ export default { /> <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" /> <toolbar-attachment-button + v-if="!hideAttachmentButton" data-testid="attachment" @execute="trackToolbarControlExecution" /> diff --git a/app/assets/javascripts/pages/admin/topics/edit/index.js b/app/assets/javascripts/pages/admin/topics/edit/index.js index b2cbd52fb27..901fd9193a5 100644 --- a/app/assets/javascripts/pages/admin/topics/edit/index.js +++ b/app/assets/javascripts/pages/admin/topics/edit/index.js @@ -1,11 +1,10 @@ -import $ from 'jquery'; -import GLForm from '~/gl_form'; import initFilePickers from '~/file_pickers'; import ZenMode from '~/zen_mode'; import { initRemoveAvatar } from '~/admin/topics'; +import { mountMarkdownEditor } from '~/vue_shared/components/markdown/mount_markdown_editor'; -new GLForm($('.js-project-topic-form')); // eslint-disable-line no-new initFilePickers(); new ZenMode(); // eslint-disable-line no-new initRemoveAvatar(); +mountMarkdownEditor(); diff --git a/app/assets/javascripts/pages/admin/topics/new/index.js b/app/assets/javascripts/pages/admin/topics/new/index.js index c4e05bbd092..fc9ca4fd4e6 100644 --- a/app/assets/javascripts/pages/admin/topics/new/index.js +++ b/app/assets/javascripts/pages/admin/topics/new/index.js @@ -1,8 +1,7 @@ -import $ from 'jquery'; -import GLForm from '~/gl_form'; import initFilePickers from '~/file_pickers'; import ZenMode from '~/zen_mode'; +import { mountMarkdownEditor } from '~/vue_shared/components/markdown/mount_markdown_editor'; -new GLForm($('.js-project-topic-form')); // eslint-disable-line no-new initFilePickers(); new ZenMode(); // eslint-disable-line no-new +mountMarkdownEditor(); diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue index 936938f3032..4258332ed6e 100644 --- a/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue +++ b/app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue @@ -1,5 +1,6 @@ <script> import { createAlert } from '~/alert'; +import { joinPaths } from '~/lib/utils/url_utility'; import commitReferencesQuery from '../graphql/queries/commit_references.query.graphql'; import containingBranchesQuery from '../graphql/queries/commit_containing_branches.query.graphql'; import containingTagsQuery from '../graphql/queries/commit_containing_tags.query.graphql'; @@ -64,6 +65,10 @@ export default { commitSha: this.commitSha, }; }, + commitsUrlPart() { + const urlPart = joinPaths(gon.relative_url_root || '', `/${this.fullPath}`, `/-/commits/`); + return urlPart; + }, }, methods: { async fetchContainingRefs({ query, namespace }) { @@ -106,6 +111,7 @@ export default { :tipping-refs="tippingBranches" :containing-refs="containingBranches" :namespace="$options.i18n.branches" + :url-part="commitsUrlPart" @[$options.fetchContainingRefsEvent]="fetchContainingBranches" /> <refs-list @@ -115,6 +121,7 @@ export default { :tipping-refs="tippingTags" :containing-refs="containingTags" :namespace="$options.i18n.tags" + :url-part="commitsUrlPart" @[$options.fetchContainingRefsEvent]="fetchContainingTags" /> </div> diff --git a/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue b/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue index 602fa26efa7..7e21040a3b1 100644 --- a/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue +++ b/app/assets/javascripts/projects/commit_box/info/components/refs_list.vue @@ -12,6 +12,10 @@ export default { GlIcon, }, props: { + urlPart: { + type: String, + required: true, + }, containingRefs: { type: Array, required: false, @@ -66,9 +70,14 @@ export default { <template> <div class="gl-pt-4"> <span data-testid="title" class="gl-mr-2">{{ namespace }}</span> - <gl-badge v-for="ref in tippingRefs" :key="ref" class="gl-mt-2 gl-mr-2" size="sm">{{ - ref - }}</gl-badge> + <gl-badge + v-for="ref in tippingRefs" + :key="ref" + :href="`${urlPart}${ref}`" + class="gl-mt-2 gl-mr-2" + size="sm" + >{{ ref }}</gl-badge + > <gl-button v-if="hasContainingRefs" class="gl-mr-2 gl-font-sm!" @@ -82,9 +91,14 @@ export default { <gl-collapse :visible="isContainingRefsVisible"> <gl-skeleton-loader v-if="isLoadingRefs" :lines="1" /> <template v-else> - <gl-badge v-for="ref in containingRefs" :key="ref" class="gl-mt-3 gl-mr-2" size="sm">{{ - ref - }}</gl-badge> + <gl-badge + v-for="ref in containingRefs" + :key="ref" + :href="`${urlPart}${ref}`" + class="gl-mt-3 gl-mr-2" + size="sm" + >{{ ref }}</gl-badge + > </template> </gl-collapse> </div> diff --git a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue index d9d4056e997..9fd606d775d 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue @@ -95,6 +95,11 @@ export default { required: false, default: false, }, + disableAttachments: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -111,6 +116,9 @@ export default { // Match textarea focus behavior return this.autofocus && !this.autofocused ? 'end' : false; }, + markdownFieldRestrictedToolBarItems() { + return this.disableAttachments ? ['attach-file'] : []; + }, }, watch: { value(val) { @@ -231,7 +239,7 @@ export default { v-bind="$attrs" data-testid="markdown-field" :markdown-preview-path="renderMarkdownPath" - can-attach-file + :can-attach-file="!disableAttachments" :textarea-value="markdown" :uploads-path="uploadsPath" :enable-autocomplete="enableAutocomplete" @@ -240,6 +248,7 @@ export default { :quick-actions-docs-path="quickActionsDocsPath" :show-content-editor-switcher="enableContentEditor" :drawio-enabled="drawioEnabled" + :restricted-tool-bar-items="markdownFieldRestrictedToolBarItems" :remove-border="true" @enableContentEditor="onEditingModeChange('contentEditor')" @handleSuggestDismissed="() => $emit('handleSuggestDismissed')" @@ -256,8 +265,7 @@ export default { :disabled="disabled" @input="updateMarkdownFromMarkdownField" @keydown="$emit('keydown', $event)" - > - </textarea> + ></textarea> </template> </markdown-field> <div v-else> @@ -273,6 +281,7 @@ export default { :enable-autocomplete="enableAutocomplete" :autocomplete-data-sources="autocompleteDataSources" :editable="!disabled" + :disable-attachments="disableAttachments" @initialized="setEditorAsAutofocused" @change="updateMarkdownFromContentEditor" @keydown="$emit('keydown', $event)" diff --git a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js index ac4f06a665d..8ff14220eab 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js +++ b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import { queryToObject, objectToQuery } from '~/lib/utils/url_utility'; +import { parseBoolean } from '~/lib/utils/common_utils'; import { CLEAR_AUTOSAVE_ENTRY_EVENT } from '../../constants'; import MarkdownEditor from './markdown_editor.vue'; import eventHub from './eventhub'; @@ -67,6 +68,9 @@ export function mountMarkdownEditor() { newIssuePath, } = el.dataset; + const supportsQuickActions = parseBoolean(el.dataset.supportsQuickActions ?? true); + const enableAutocomplete = parseBoolean(el.dataset.enableAutocomplete ?? true); + const disableAttachments = parseBoolean(el.dataset.disableAttachments ?? false); const hiddenInput = el.querySelector('input[type="hidden"]'); const formFieldName = hiddenInput.getAttribute('name'); const formFieldId = hiddenInput.getAttribute('id'); @@ -102,9 +106,11 @@ export function mountMarkdownEditor() { 'data-qa-selector': qaSelector, }, autosaveKey, - enableAutocomplete: true, + enableAutocomplete, autocompleteDataSources: gl.GfmAutoComplete?.dataSources, - supportsQuickActions: true, + supportsQuickActions, + disableAttachments, + autofocus: true, }, }); }, |