2020-04-21 15:21:10 +00:00
|
|
|
<script>
|
|
|
|
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
|
|
|
|
|
2020-08-20 09:09:55 +00:00
|
|
|
import { deprecatedCreateFlash as Flash } from '~/flash';
|
2020-04-21 15:21:10 +00:00
|
|
|
import { __, sprintf } from '~/locale';
|
|
|
|
import TitleField from '~/vue_shared/components/form/title.vue';
|
2020-08-26 06:10:34 +00:00
|
|
|
import { redirectTo, joinPaths } from '~/lib/utils/url_utility';
|
2020-04-21 15:21:10 +00:00
|
|
|
import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
|
2020-09-05 00:08:43 +00:00
|
|
|
import { SNIPPET_MARK_EDIT_APP_START } from '~/performance_constants';
|
2020-04-21 15:21:10 +00:00
|
|
|
|
|
|
|
import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
|
|
|
|
import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
|
|
|
|
import { getSnippetMixin } from '../mixins/snippets';
|
2020-06-02 06:08:01 +00:00
|
|
|
import {
|
|
|
|
SNIPPET_CREATE_MUTATION_ERROR,
|
|
|
|
SNIPPET_UPDATE_MUTATION_ERROR,
|
2020-09-05 00:08:43 +00:00
|
|
|
SNIPPET_VISIBILITY_PRIVATE,
|
2020-06-02 06:08:01 +00:00
|
|
|
} from '../constants';
|
2020-09-05 00:08:43 +00:00
|
|
|
import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
|
|
|
|
|
2020-08-12 21:09:54 +00:00
|
|
|
import SnippetBlobActionsEdit from './snippet_blob_actions_edit.vue';
|
2020-04-21 15:21:10 +00:00
|
|
|
import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
|
|
|
|
import SnippetDescriptionEdit from './snippet_description_edit.vue';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
SnippetDescriptionEdit,
|
|
|
|
SnippetVisibilityEdit,
|
2020-08-12 21:09:54 +00:00
|
|
|
SnippetBlobActionsEdit,
|
2020-04-21 15:21:10 +00:00
|
|
|
TitleField,
|
|
|
|
FormFooterActions,
|
|
|
|
GlButton,
|
|
|
|
GlLoadingIcon,
|
|
|
|
},
|
|
|
|
mixins: [getSnippetMixin],
|
2020-09-05 00:08:43 +00:00
|
|
|
apollo: {
|
|
|
|
defaultVisibility: {
|
|
|
|
query: defaultVisibilityQuery,
|
|
|
|
manual: true,
|
|
|
|
result({ data: { selectedLevel } }) {
|
|
|
|
this.selectedLevelDefault = selectedLevel;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
props: {
|
|
|
|
markdownPreviewPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
markdownDocsPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
visibilityHelpLink: {
|
|
|
|
type: String,
|
|
|
|
default: '',
|
|
|
|
required: false,
|
|
|
|
},
|
|
|
|
projectPath: {
|
|
|
|
type: String,
|
|
|
|
default: '',
|
|
|
|
required: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isUpdating: false,
|
|
|
|
newSnippet: false,
|
2020-08-18 18:10:10 +00:00
|
|
|
actions: [],
|
2020-09-05 00:08:43 +00:00
|
|
|
selectedLevelDefault: SNIPPET_VISIBILITY_PRIVATE,
|
2020-04-21 15:21:10 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
2020-08-18 18:10:10 +00:00
|
|
|
hasBlobChanges() {
|
|
|
|
return this.actions.length > 0;
|
2020-07-17 09:09:43 +00:00
|
|
|
},
|
2020-08-18 18:10:10 +00:00
|
|
|
hasValidBlobs() {
|
2020-08-27 15:10:21 +00:00
|
|
|
return this.actions.every(x => x.content);
|
2020-07-17 09:09:43 +00:00
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
updatePrevented() {
|
2020-08-18 18:10:10 +00:00
|
|
|
return this.snippet.title === '' || !this.hasValidBlobs || this.isUpdating;
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
|
|
|
isProjectSnippet() {
|
|
|
|
return Boolean(this.projectPath);
|
|
|
|
},
|
|
|
|
apiData() {
|
|
|
|
return {
|
|
|
|
id: this.snippet.id,
|
|
|
|
title: this.snippet.title,
|
|
|
|
description: this.snippet.description,
|
|
|
|
visibilityLevel: this.snippet.visibilityLevel,
|
2020-08-18 18:10:10 +00:00
|
|
|
blobActions: this.actions,
|
2020-04-21 15:21:10 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
saveButtonLabel() {
|
|
|
|
if (this.newSnippet) {
|
|
|
|
return __('Create snippet');
|
|
|
|
}
|
|
|
|
return this.isUpdating ? __('Saving') : __('Save changes');
|
|
|
|
},
|
|
|
|
cancelButtonHref() {
|
|
|
|
if (this.newSnippet) {
|
2020-08-26 06:10:34 +00:00
|
|
|
return joinPaths('/', gon.relative_url_root, this.projectPath, '-/snippets');
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
return this.snippet.webUrl;
|
|
|
|
},
|
|
|
|
titleFieldId() {
|
|
|
|
return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_title`;
|
|
|
|
},
|
|
|
|
descriptionFieldId() {
|
|
|
|
return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_description`;
|
|
|
|
},
|
2020-09-05 00:08:43 +00:00
|
|
|
newSnippetSchema() {
|
|
|
|
return {
|
|
|
|
title: '',
|
|
|
|
description: '',
|
|
|
|
visibilityLevel: this.selectedLevelDefault,
|
|
|
|
};
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
2020-07-31 21:10:12 +00:00
|
|
|
beforeCreate() {
|
|
|
|
performance.mark(SNIPPET_MARK_EDIT_APP_START);
|
|
|
|
},
|
2020-06-17 15:08:36 +00:00
|
|
|
created() {
|
|
|
|
window.addEventListener('beforeunload', this.onBeforeUnload);
|
|
|
|
},
|
|
|
|
destroyed() {
|
|
|
|
window.removeEventListener('beforeunload', this.onBeforeUnload);
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
methods: {
|
2020-06-17 15:08:36 +00:00
|
|
|
onBeforeUnload(e = {}) {
|
|
|
|
const returnValue = __('Are you sure you want to lose unsaved changes?');
|
|
|
|
|
2020-08-18 18:10:10 +00:00
|
|
|
if (!this.hasBlobChanges || this.isUpdating) return undefined;
|
2020-06-17 15:08:36 +00:00
|
|
|
|
|
|
|
Object.assign(e, { returnValue });
|
|
|
|
return returnValue;
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
flashAPIFailure(err) {
|
2020-06-02 06:08:01 +00:00
|
|
|
const defaultErrorMsg = this.newSnippet
|
|
|
|
? SNIPPET_CREATE_MUTATION_ERROR
|
|
|
|
: SNIPPET_UPDATE_MUTATION_ERROR;
|
|
|
|
Flash(sprintf(defaultErrorMsg, { err }));
|
|
|
|
this.isUpdating = false;
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
|
|
|
onNewSnippetFetched() {
|
|
|
|
this.newSnippet = true;
|
2020-09-05 00:08:43 +00:00
|
|
|
this.snippet = this.newSnippetSchema;
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
|
|
|
onExistingSnippetFetched() {
|
|
|
|
this.newSnippet = false;
|
|
|
|
},
|
|
|
|
onSnippetFetch(snippetRes) {
|
|
|
|
if (snippetRes.data.snippets.edges.length === 0) {
|
|
|
|
this.onNewSnippetFetched();
|
|
|
|
} else {
|
|
|
|
this.onExistingSnippetFetched();
|
|
|
|
}
|
|
|
|
},
|
2020-06-15 12:08:44 +00:00
|
|
|
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,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
handleFormSubmit() {
|
|
|
|
this.isUpdating = true;
|
|
|
|
this.$apollo
|
2020-06-15 12:08:44 +00:00
|
|
|
.mutate(this.newSnippet ? this.createMutation() : this.updateMutation())
|
2020-04-21 15:21:10 +00:00
|
|
|
.then(({ data }) => {
|
|
|
|
const baseObj = this.newSnippet ? data?.createSnippet : data?.updateSnippet;
|
|
|
|
|
|
|
|
const errors = baseObj?.errors;
|
|
|
|
if (errors.length) {
|
|
|
|
this.flashAPIFailure(errors[0]);
|
2020-06-04 09:08:01 +00:00
|
|
|
} else {
|
|
|
|
redirectTo(baseObj.snippet.webUrl);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(e => {
|
|
|
|
this.flashAPIFailure(e);
|
|
|
|
});
|
|
|
|
},
|
2020-08-18 18:10:10 +00:00
|
|
|
updateActions(actions) {
|
|
|
|
this.actions = actions;
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<form
|
|
|
|
class="snippet-form js-requires-input js-quick-submit common-note-form"
|
|
|
|
:data-snippet-type="isProjectSnippet ? 'project' : 'personal'"
|
2020-06-15 12:08:44 +00:00
|
|
|
data-testid="snippet-edit-form"
|
|
|
|
@submit.prevent="handleFormSubmit"
|
2020-04-21 15:21:10 +00:00
|
|
|
>
|
|
|
|
<gl-loading-icon
|
|
|
|
v-if="isLoading"
|
|
|
|
:label="__('Loading snippet')"
|
|
|
|
size="lg"
|
2020-08-21 00:10:44 +00:00
|
|
|
class="loading-animation prepend-top-20 gl-mb-6"
|
2020-04-21 15:21:10 +00:00
|
|
|
/>
|
|
|
|
<template v-else>
|
2020-04-22 09:09:36 +00:00
|
|
|
<title-field
|
|
|
|
:id="titleFieldId"
|
|
|
|
v-model="snippet.title"
|
2020-06-05 06:08:40 +00:00
|
|
|
data-qa-selector="snippet_title_field"
|
2020-04-22 09:09:36 +00:00
|
|
|
required
|
|
|
|
:autofocus="true"
|
|
|
|
/>
|
2020-04-21 15:21:10 +00:00
|
|
|
<snippet-description-edit
|
|
|
|
:id="descriptionFieldId"
|
|
|
|
v-model="snippet.description"
|
|
|
|
:markdown-preview-path="markdownPreviewPath"
|
|
|
|
:markdown-docs-path="markdownDocsPath"
|
|
|
|
/>
|
2020-08-18 18:10:10 +00:00
|
|
|
<snippet-blob-actions-edit :init-blobs="blobs" @actions="updateActions" />
|
2020-07-17 09:09:43 +00:00
|
|
|
|
2020-04-21 15:21:10 +00:00
|
|
|
<snippet-visibility-edit
|
|
|
|
v-model="snippet.visibilityLevel"
|
|
|
|
:help-link="visibilityHelpLink"
|
|
|
|
:is-project-snippet="isProjectSnippet"
|
|
|
|
/>
|
|
|
|
<form-footer-actions>
|
|
|
|
<template #prepend>
|
|
|
|
<gl-button
|
|
|
|
category="primary"
|
2020-06-15 12:08:44 +00:00
|
|
|
type="submit"
|
2020-04-21 15:21:10 +00:00
|
|
|
variant="success"
|
|
|
|
:disabled="updatePrevented"
|
2020-05-19 06:08:03 +00:00
|
|
|
data-qa-selector="submit_button"
|
2020-06-15 12:08:44 +00:00
|
|
|
data-testid="snippet-submit-btn"
|
2020-04-21 15:21:10 +00:00
|
|
|
>{{ saveButtonLabel }}</gl-button
|
|
|
|
>
|
|
|
|
</template>
|
|
|
|
<template #append>
|
2020-06-15 12:08:44 +00:00
|
|
|
<gl-button type="cancel" data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{
|
2020-04-21 15:21:10 +00:00
|
|
|
__('Cancel')
|
|
|
|
}}</gl-button>
|
|
|
|
</template>
|
|
|
|
</form-footer-actions>
|
|
|
|
</template>
|
|
|
|
</form>
|
|
|
|
</template>
|