diff options
Diffstat (limited to 'app/assets/javascripts/static_site_editor/pages')
-rw-r--r-- | app/assets/javascripts/static_site_editor/pages/home.vue | 52 | ||||
-rw-r--r-- | app/assets/javascripts/static_site_editor/pages/success.vue | 81 |
2 files changed, 89 insertions, 44 deletions
diff --git a/app/assets/javascripts/static_site_editor/pages/home.vue b/app/assets/javascripts/static_site_editor/pages/home.vue index eef2bd88f0e..27bd1c99ae2 100644 --- a/app/assets/javascripts/static_site_editor/pages/home.vue +++ b/app/assets/javascripts/static_site_editor/pages/home.vue @@ -1,13 +1,16 @@ <script> +import { deprecatedCreateFlash as createFlash } from '~/flash'; +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'; import sourceContentQuery from '../graphql/queries/source_content.query.graphql'; +import hasSubmittedChangesMutation from '../graphql/mutations/has_submitted_changes.mutation.graphql'; import submitContentChangesMutation from '../graphql/mutations/submit_content_changes.mutation.graphql'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; -import Tracking from '~/tracking'; import { LOAD_CONTENT_ERROR, TRACKING_ACTION_INITIALIZE_EDITOR } from '../constants'; import { SUCCESS_ROUTE } from '../router/constants'; @@ -15,6 +18,7 @@ export default { components: { SkeletonLoader, EditArea, + EditMetaModal, InvalidContentMessage, SubmitChangesError, }, @@ -48,6 +52,7 @@ export default { data() { return { content: null, + images: null, submitChangesError: null, isSavingChanges: false, }; @@ -64,15 +69,34 @@ 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.images = images; + this.isSavingChanges = true; + this.$refs.editMetaModal.show(); + }, + onSubmit(mergeRequestMeta) { + // eslint-disable-next-line promise/catch-or-return + this.$apollo + .mutate({ + mutation: hasSubmittedChangesMutation, + variables: { + input: { + hasSubmittedChanges: true, + }, + }, + }) + .finally(() => { + this.$router.push(SUCCESS_ROUTE); + }); this.$apollo .mutate({ @@ -83,13 +107,11 @@ export default { username: this.appData.username, sourcePath: this.appData.sourcePath, content: this.content, - images, + images: this.images, + mergeRequestMeta, }, }, }) - .then(() => { - this.$router.push(SUCCESS_ROUTE); - }) .catch(e => { this.submitChangesError = e.message; }) @@ -107,7 +129,7 @@ export default { <submit-changes-error v-if="submitChangesError" :error="submitChangesError" - @retry="submitChanges" + @retry="onSubmit" @dismiss="onDismissError" /> <edit-area @@ -116,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> diff --git a/app/assets/javascripts/static_site_editor/pages/success.vue b/app/assets/javascripts/static_site_editor/pages/success.vue index f0d597d7c9b..1ee1a3b0edf 100644 --- a/app/assets/javascripts/static_site_editor/pages/success.vue +++ b/app/assets/javascripts/static_site_editor/pages/success.vue @@ -1,5 +1,5 @@ <script> -import { GlEmptyState, GlButton } from '@gitlab/ui'; +import { GlButton, GlEmptyState, GlLoadingIcon } from '@gitlab/ui'; import { s__, __, sprintf } from '~/locale'; import savedContentMetaQuery from '../graphql/queries/saved_content_meta.query.graphql'; @@ -8,8 +8,9 @@ import { HOME_ROUTE } from '../router/constants'; export default { components: { - GlEmptyState, GlButton, + GlEmptyState, + GlLoadingIcon, }, props: { mergeRequestsIllustrationPath: { @@ -33,7 +34,7 @@ export default { }, }, created() { - if (!this.savedContentMeta) { + if (!this.appData.hasSubmittedChanges) { this.$router.push(HOME_ROUTE); } }, @@ -50,40 +51,56 @@ export default { assignMergeRequestInstruction: s__( 'StaticSiteEditor|3. Assign a person to review and accept the merge request.', ), + submittingTitle: s__('StaticSiteEditor|Creating your merge request'), + submittingNotePrimary: s__( + 'StaticSiteEditor|You can set an assignee to get your changes reviewed and deployed once your merge request is created.', + ), + submittingNoteSecondary: s__( + 'StaticSiteEditor|A link to view the merge request will appear once ready.', + ), }; </script> <template> - <div - v-if="savedContentMeta" - class="container gl-flex-grow-1 gl-display-flex gl-flex-direction-column" - > - <div class="gl-fixed gl-left-0 gl-right-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"> + <div> + <div class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"> <div class="container gl-py-4"> - <gl-button - v-if="appData.returnUrl" - ref="returnToSiteButton" - class="gl-mr-5" - :href="appData.returnUrl" - >{{ $options.returnToSiteBtnText }}</gl-button - > - <strong> - {{ updatedFileDescription }} - </strong> + <div class="gl-display-flex"> + <gl-button + v-if="appData.returnUrl" + ref="returnToSiteButton" + class="gl-mr-5 gl-align-self-start" + :href="appData.returnUrl" + >{{ $options.returnToSiteBtnText }}</gl-button + > + <strong class="gl-mt-2"> + {{ updatedFileDescription }} + </strong> + </div> </div> </div> - <gl-empty-state - class="gl-my-9" - :primary-button-text="$options.primaryButtonText" - :title="$options.title" - :primary-button-link="savedContentMeta.mergeRequest.url" - :svg-path="mergeRequestsIllustrationPath" - > - <template #description> - <p>{{ $options.mergeRequestInstructionsHeading }}</p> - <p>{{ $options.addTitleInstruction }}</p> - <p>{{ $options.addDescriptionInstruction }}</p> - <p>{{ $options.assignMergeRequestInstruction }}</p> - </template> - </gl-empty-state> + <div class="container"> + <gl-empty-state + class="gl-my-7" + :title="savedContentMeta ? $options.title : $options.submittingTitle" + :primary-button-text="savedContentMeta && $options.primaryButtonText" + :primary-button-link="savedContentMeta && savedContentMeta.mergeRequest.url" + :svg-path="mergeRequestsIllustrationPath" + :svg-height="146" + > + <template #description> + <div v-if="savedContentMeta"> + <p>{{ $options.mergeRequestInstructionsHeading }}</p> + <p>{{ $options.addTitleInstruction }}</p> + <p>{{ $options.addDescriptionInstruction }}</p> + <p>{{ $options.assignMergeRequestInstruction }}</p> + </div> + <div v-else> + <p>{{ $options.submittingNotePrimary }}</p> + <p>{{ $options.submittingNoteSecondary }}</p> + <gl-loading-icon size="xl" /> + </div> + </template> + </gl-empty-state> + </div> </div> </template> |