diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-08 18:08:17 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-08 18:08:17 +0300 |
commit | 1ec1bec4ee7ef7cb2e6faa7af625950f6d7aa290 (patch) | |
tree | 515047b93cfb054156b99c612684eb9a4c45330d /app/assets/javascripts/static_site_editor | |
parent | 2f5c5b1081fe544ecb9a71d8adf88e00f01f3732 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/static_site_editor')
4 files changed, 160 insertions, 16 deletions
diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue new file mode 100644 index 00000000000..927b52dc72a --- /dev/null +++ b/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue @@ -0,0 +1,67 @@ +<script> +import { GlForm, GlFormGroup, GlFormInput, GlFormTextarea } from '@gitlab/ui'; + +export default { + components: { + GlForm, + GlFormGroup, + GlFormInput, + GlFormTextarea, + }, + props: { + title: { + type: String, + required: true, + }, + description: { + type: String, + required: true, + }, + }, + data() { + return { + editable: { + title: this.title, + description: this.description, + }, + }; + }, + methods: { + getId(type, key) { + return `sse-merge-request-meta-${type}-${key}`; + }, + onUpdate() { + this.$emit('updateSettings', { ...this.editable }); + }, + }, +}; +</script> + +<template> + <gl-form> + <gl-form-group + key="title" + :label="__('Brief title about the change')" + :label-for="getId('control', 'title')" + > + <gl-form-input + :id="getId('control', 'title')" + v-model.lazy="editable.title" + type="text" + @input="onUpdate" + /> + </gl-form-group> + + <gl-form-group + key="description" + :label="__('Goal of the changes and what reviewers should be aware of')" + :label-for="getId('control', 'description')" + > + <gl-form-textarea + :id="getId('control', 'description')" + v-model.lazy="editable.description" + @input="onUpdate" + /> + </gl-form-group> + </gl-form> +</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue new file mode 100644 index 00000000000..aa4c0eb7f1c --- /dev/null +++ b/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue @@ -0,0 +1,69 @@ +<script> +import { GlModal } from '@gitlab/ui'; +import { __, s__, sprintf } from '~/locale'; + +import EditMetaControls from './edit_meta_controls.vue'; + +export default { + components: { + GlModal, + EditMetaControls, + }, + props: { + sourcePath: { + type: String, + required: true, + }, + }, + data() { + return { + mergeRequestMeta: { + title: sprintf(s__(`StaticSiteEditor|Update %{sourcePath} file`), { + sourcePath: this.sourcePath, + }), + description: s__('StaticSiteEditor|Copy update'), + }, + }; + }, + computed: { + disabled() { + return this.mergeRequestMeta.title === ''; + }, + primaryProps() { + return { + text: __('Submit changes'), + attributes: [{ variant: 'success' }, { disabled: this.disabled }], + }; + }, + }, + methods: { + hide() { + this.$refs.modal.hide(); + }, + show() { + this.$refs.modal.show(); + }, + onUpdateSettings(mergeRequestMeta) { + this.mergeRequestMeta = { ...mergeRequestMeta }; + }, + }, +}; +</script> + +<template> + <gl-modal + ref="modal" + modal-id="edit-meta-modal" + :title="__('Submit your changes')" + :action-primary="primaryProps" + size="sm" + @primary="() => $emit('primary', mergeRequestMeta)" + @hide="() => $emit('hide')" + > + <edit-meta-controls + :title="mergeRequestMeta.title" + :description="mergeRequestMeta.description" + @updateSettings="onUpdateSettings" + /> + </gl-modal> +</template> diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue index 5f00f9f22f3..3bb5a0b8fd5 100644 --- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue +++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue @@ -50,7 +50,7 @@ export default { :loading="savingChanges" @click="$emit('submit')" > - {{ __('Submit changes') }} + {{ __('Submit changes...') }} </gl-button> </div> </div> diff --git a/app/assets/javascripts/static_site_editor/pages/home.vue b/app/assets/javascripts/static_site_editor/pages/home.vue index d48917e8f36..27bd1c99ae2 100644 --- a/app/assets/javascripts/static_site_editor/pages/home.vue +++ b/app/assets/javascripts/static_site_editor/pages/home.vue @@ -1,10 +1,10 @@ <script> import { deprecatedCreateFlash as createFlash } from '~/flash'; -import { s__, sprintf } from '~/locale'; import Tracking from '~/tracking'; import SkeletonLoader from '../components/skeleton_loader.vue'; import EditArea from '../components/edit_area.vue'; +import EditMetaModal from '../components/edit_meta_modal.vue'; import InvalidContentMessage from '../components/invalid_content_message.vue'; import SubmitChangesError from '../components/submit_changes_error.vue'; import appDataQuery from '../graphql/queries/app_data.query.graphql'; @@ -18,6 +18,7 @@ export default { components: { SkeletonLoader, EditArea, + EditMetaModal, InvalidContentMessage, SubmitChangesError, }, @@ -51,6 +52,7 @@ export default { data() { return { content: null, + images: null, submitChangesError: null, isSavingChanges: false, }; @@ -67,16 +69,21 @@ export default { Tracking.event(document.body.dataset.page, TRACKING_ACTION_INITIALIZE_EDITOR); }, methods: { + onHideModal() { + this.isSavingChanges = false; + this.$refs.editMetaModal.hide(); + }, onDismissError() { this.submitChangesError = null; }, - onSubmit({ content, images }) { + onPrepareSubmit({ content, images }) { this.content = content; - this.submitChanges(images); - }, - submitChanges(images) { - this.isSavingChanges = true; + this.images = images; + this.isSavingChanges = true; + this.$refs.editMetaModal.show(); + }, + onSubmit(mergeRequestMeta) { // eslint-disable-next-line promise/catch-or-return this.$apollo .mutate({ @@ -100,13 +107,8 @@ export default { username: this.appData.username, sourcePath: this.appData.sourcePath, content: this.content, - images, - mergeRequestMeta: { - title: sprintf(s__(`StaticSiteEditor|Update %{sourcePath} file`), { - sourcePath: this.appData.sourcePath, - }), - description: s__('StaticSiteEditor|Copy update'), - }, + images: this.images, + mergeRequestMeta, }, }, }) @@ -127,7 +129,7 @@ export default { <submit-changes-error v-if="submitChangesError" :error="submitChangesError" - @retry="submitChanges" + @retry="onSubmit" @dismiss="onDismissError" /> <edit-area @@ -136,7 +138,13 @@ export default { :content="sourceContent.content" :saving-changes="isSavingChanges" :return-url="appData.returnUrl" - @submit="onSubmit" + @submit="onPrepareSubmit" + /> + <edit-meta-modal + ref="editMetaModal" + :source-path="appData.sourcePath" + @primary="onSubmit" + @hide="onHideModal" /> </template> |