diff options
Diffstat (limited to 'app/assets/javascripts/snippets')
8 files changed, 78 insertions, 36 deletions
diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue index e8d6c005435..a6651515e47 100644 --- a/app/assets/javascripts/snippets/components/edit.vue +++ b/app/assets/javascripts/snippets/components/edit.vue @@ -11,7 +11,11 @@ import FormFooterActions from '~/vue_shared/components/form/form_footer_actions. import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql'; import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql'; import { getSnippetMixin } from '../mixins/snippets'; -import { SNIPPET_VISIBILITY_PRIVATE } from '../constants'; +import { + SNIPPET_VISIBILITY_PRIVATE, + SNIPPET_CREATE_MUTATION_ERROR, + SNIPPET_UPDATE_MUTATION_ERROR, +} from '../constants'; import SnippetBlobEdit from './snippet_blob_edit.vue'; import SnippetVisibilityEdit from './snippet_visibility_edit.vue'; import SnippetDescriptionEdit from './snippet_description_edit.vue'; @@ -98,7 +102,11 @@ export default { this.fileName = newName; }, flashAPIFailure(err) { - Flash(sprintf(__("Can't update snippet: %{err}"), { err })); + const defaultErrorMsg = this.newSnippet + ? SNIPPET_CREATE_MUTATION_ERROR + : SNIPPET_UPDATE_MUTATION_ERROR; + Flash(sprintf(defaultErrorMsg, { err })); + this.isUpdating = false; }, onNewSnippetFetched() { this.newSnippet = true; @@ -129,29 +137,45 @@ export default { this.onExistingSnippetFetched(); } }, + getAttachedFiles() { + const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]')); + return fileInputs.map(node => node.value); + }, + createMutation() { + return { + mutation: CreateSnippetMutation, + variables: { + input: { + ...this.apiData, + uploadedFiles: this.getAttachedFiles(), + projectPath: this.projectPath, + }, + }, + }; + }, + updateMutation() { + return { + mutation: UpdateSnippetMutation, + variables: { + input: this.apiData, + }, + }; + }, handleFormSubmit() { this.isUpdating = true; this.$apollo - .mutate({ - mutation: this.newSnippet ? CreateSnippetMutation : UpdateSnippetMutation, - variables: { - input: { - ...this.apiData, - projectPath: this.newSnippet ? this.projectPath : undefined, - }, - }, - }) + .mutate(this.newSnippet ? this.createMutation() : this.updateMutation()) .then(({ data }) => { const baseObj = this.newSnippet ? data?.createSnippet : data?.updateSnippet; const errors = baseObj?.errors; if (errors.length) { this.flashAPIFailure(errors[0]); + } else { + redirectTo(baseObj.snippet.webUrl); } - redirectTo(baseObj.snippet.webUrl); }) .catch(e => { - this.isUpdating = false; this.flashAPIFailure(e); }); }, @@ -168,6 +192,8 @@ export default { <form class="snippet-form js-requires-input js-quick-submit common-note-form" :data-snippet-type="isProjectSnippet ? 'project' : 'personal'" + data-testid="snippet-edit-form" + @submit.prevent="handleFormSubmit" > <gl-loading-icon v-if="isLoading" @@ -179,7 +205,7 @@ export default { <title-field :id="titleFieldId" v-model="snippet.title" - data-qa-selector="snippet_title" + data-qa-selector="snippet_title_field" required :autofocus="true" /> @@ -203,17 +229,17 @@ export default { <form-footer-actions> <template #prepend> <gl-button - type="submit" category="primary" + type="submit" variant="success" :disabled="updatePrevented" data-qa-selector="submit_button" - @click="handleFormSubmit" + data-testid="snippet-submit-btn" >{{ saveButtonLabel }}</gl-button > </template> <template #append> - <gl-button data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{ + <gl-button type="cancel" data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{ __('Cancel') }}</gl-button> </template> diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue index dd03902417d..62c29b0c7cd 100644 --- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue +++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue @@ -35,7 +35,7 @@ export default { <div class="file-holder snippet"> <blob-header-edit :value="fileName" - data-qa-selector="snippet_file_name" + data-qa-selector="file_name_field" @input="$emit('name-change', $event)" /> <gl-loading-icon diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue index 6b218b21e56..7472aff3318 100644 --- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue +++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue @@ -74,6 +74,9 @@ export default { canBeCloned() { return this.snippet.sshUrlToRepo || this.snippet.httpUrlToRepo; }, + hasRenderError() { + return Boolean(this.viewer.renderError); + }, }, methods: { switchViewer(newViewer) { @@ -92,7 +95,12 @@ export default { <div> <blob-embeddable v-if="embeddable" class="mb-3" :url="snippet.webUrl" /> <article class="file-holder snippet-file-content"> - <blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer"> + <blob-header + :blob="blob" + :active-viewer-type="viewer.type" + :has-render-error="hasRenderError" + @viewer-changed="switchViewer" + > <template #actions> <clone-dropdown-button v-if="canBeCloned" diff --git a/app/assets/javascripts/snippets/components/snippet_description_edit.vue b/app/assets/javascripts/snippets/components/snippet_description_edit.vue index 0fe539a5de7..737845d09b8 100644 --- a/app/assets/javascripts/snippets/components/snippet_description_edit.vue +++ b/app/assets/javascripts/snippets/components/snippet_description_edit.vue @@ -30,7 +30,7 @@ export default { </script> <template> <div class="form-group js-description-input"> - <label>{{ s__('Snippets|Description (optional)') }}</label> + <label for="snippet-description">{{ s__('Snippets|Description (optional)') }}</label> <div class="js-collapsible-input"> <div class="js-collapsed" :class="{ 'd-none': value }"> <gl-form-input @@ -46,22 +46,26 @@ export default { <markdown-field class="js-expanded" :class="{ 'd-none': !value }" + :add-spacing-classes="false" :markdown-preview-path="markdownPreviewPath" :markdown-docs-path="markdownDocsPath" > - <textarea - slot="textarea" - class="note-textarea js-gfm-input js-autosize markdown-area" - dir="auto" - data-qa-selector="snippet_description_field" - data-supports-quick-actions="false" - :value="value" - :aria-label="__('Description')" - :placeholder="__('Write a comment or drag your files here…')" - v-bind="$attrs" - @input="$emit('input', $event.target.value)" - > - </textarea> + <template #textarea> + <textarea + id="snippet-description" + ref="textarea" + :value="value" + class="note-textarea js-gfm-input js-autosize markdown-area" + dir="auto" + data-qa-selector="snippet_description_field" + data-supports-quick-actions="false" + :aria-label="__('Description')" + :placeholder="__('Write a comment or drag your files here…')" + v-bind="$attrs" + @input="$emit('input', $event.target.value)" + > + </textarea> + </template> </markdown-field> </div> </div> diff --git a/app/assets/javascripts/snippets/components/snippet_description_view.vue b/app/assets/javascripts/snippets/components/snippet_description_view.vue index 72afcc30be6..a5107f09fc7 100644 --- a/app/assets/javascripts/snippets/components/snippet_description_view.vue +++ b/app/assets/javascripts/snippets/components/snippet_description_view.vue @@ -15,7 +15,7 @@ export default { }; </script> <template> - <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_field"> + <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_content"> <div class="md js-snippet-description" v-html="description"></div> </markdown-field-view> </template> diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue index c0967e9093c..2a06296cb15 100644 --- a/app/assets/javascripts/snippets/components/snippet_header.vue +++ b/app/assets/javascripts/snippets/components/snippet_header.vue @@ -163,7 +163,8 @@ export default { <div class="detail-page-header"> <div class="detail-page-header-body"> <div - class="snippet-box qa-snippet-box has-tooltip d-flex align-items-center append-right-5 mb-1" + class="snippet-box has-tooltip d-flex align-items-center append-right-5 mb-1" + data-qa-selector="snippet_container" :title="snippetVisibilityLevelDescription" data-container="body" > diff --git a/app/assets/javascripts/snippets/components/snippet_title.vue b/app/assets/javascripts/snippets/components/snippet_title.vue index 5267c3748ca..2cf7a1e267b 100644 --- a/app/assets/javascripts/snippets/components/snippet_title.vue +++ b/app/assets/javascripts/snippets/components/snippet_title.vue @@ -20,7 +20,7 @@ export default { </script> <template> <div class="snippet-header limited-header-width"> - <h2 class="snippet-title prepend-top-0 mb-3" data-qa-selector="snippet_title"> + <h2 class="snippet-title gl-mt-0 mb-3" data-qa-selector="snippet_title_content"> {{ snippet.title }} </h2> diff --git a/app/assets/javascripts/snippets/constants.js b/app/assets/javascripts/snippets/constants.js index 7fd5e5b8ee4..b3abc73557c 100644 --- a/app/assets/javascripts/snippets/constants.js +++ b/app/assets/javascripts/snippets/constants.js @@ -22,3 +22,6 @@ export const SNIPPET_VISIBILITY = { description: __('The snippet can be accessed without any authentication.'), }, }; + +export const SNIPPET_CREATE_MUTATION_ERROR = __("Can't create snippet: %{err}"); +export const SNIPPET_UPDATE_MUTATION_ERROR = __("Can't update snippet: %{err}"); |