diff options
Diffstat (limited to 'app/assets/javascripts/design_management')
6 files changed, 53 insertions, 50 deletions
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue index 124780df8a5..a4430b15752 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue @@ -1,7 +1,7 @@ <script> import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { s__ } from '~/locale'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils'; @@ -155,7 +155,7 @@ export default { methods: { onDone({ data: { createNote } }) { if (hasErrors(createNote)) { - createFlash({ message: ADD_DISCUSSION_COMMENT_ERROR }); + createAlert({ message: ADD_DISCUSSION_COMMENT_ERROR }); } this.discussionComment = ''; this.hideForm(); diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue index 4faeba3983b..5a6b220e532 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlModal } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; import $ from 'jquery'; import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; @@ -7,13 +7,23 @@ import Autosave from '~/autosave'; import { isLoggedIn } from '~/lib/utils/common_utils'; import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; export default { name: 'DesignReplyForm', + i18n: { + primaryBtn: s__('DesignManagement|Discard changes'), + cancelBtnCreate: s__('DesignManagement|Continue creating'), + cancelBtnUpdate: s__('DesignManagement|Continue editing'), + cancelCreate: s__('DesignManagement|Are you sure you want to cancel creating this comment?'), + cancelUpdate: s__('DesignManagement|Are you sure you want to cancel editing this comment?'), + newCommentButton: s__('DesignManagement|Comment'), + updateCommentButton: s__('DesignManagement|Save comment'), + }, + markdownDocsPath: helpPagePath('user/markdown'), components: { MarkdownField, GlButton, - GlModal, }, props: { markdownPreviewPath: { @@ -54,29 +64,10 @@ export default { hasValue() { return this.value.trim().length > 0; }, - modalSettings() { - if (this.isNewComment) { - return { - title: s__('DesignManagement|Cancel comment confirmation'), - okTitle: s__('DesignManagement|Discard comment'), - cancelTitle: s__('DesignManagement|Keep comment'), - content: s__('DesignManagement|Are you sure you want to cancel creating this comment?'), - }; - } - return { - title: s__('DesignManagement|Cancel comment update confirmation'), - okTitle: s__('DesignManagement|Cancel changes'), - cancelTitle: s__('DesignManagement|Keep changes'), - content: s__('DesignManagement|Are you sure you want to cancel changes to this comment?'), - }; - }, buttonText() { return this.isNewComment - ? s__('DesignManagement|Comment') - : s__('DesignManagement|Save comment'); - }, - markdownDocsPath() { - return helpPagePath('user/markdown'); + ? this.$options.i18n.newCommentButton + : this.$options.i18n.updateCommentButton; }, shortDiscussionId() { return isGid(this.discussionId) ? getIdFromGraphQLId(this.discussionId) : this.discussionId; @@ -94,12 +85,30 @@ export default { }, cancelComment() { if (this.hasValue && this.formText !== this.value) { - this.$refs.cancelCommentModal.show(); + this.confirmCancelCommentModal(); } else { this.$emit('cancel-form'); } }, - confirmCancelCommentModal() { + async confirmCancelCommentModal() { + const msg = this.isNewComment + ? this.$options.i18n.cancelCreate + : this.$options.i18n.cancelUpdate; + + const cancelBtn = this.isNewComment + ? this.$options.i18n.cancelBtnCreate + : this.$options.i18n.cancelBtnUpdate; + + const confirmed = await confirmAction(msg, { + primaryBtnText: this.$options.i18n.primaryBtn, + cancelBtnText: cancelBtn, + primaryBtnVariant: 'danger', + }); + + if (!confirmed) { + return; + } + this.$emit('cancel-form'); this.autosaveDiscussion.reset(); }, @@ -126,7 +135,7 @@ export default { :markdown-preview-path="markdownPreviewPath" :enable-autocomplete="true" :textarea-value="value" - :markdown-docs-path="markdownDocsPath" + :markdown-docs-path="$options.markdownDocsPath" class="bordered-box" > <template #textarea> @@ -171,15 +180,5 @@ export default { >{{ __('Cancel') }}</gl-button > </div> - <gl-modal - ref="cancelCommentModal" - ok-variant="danger" - :title="modalSettings.title" - :ok-title="modalSettings.okTitle" - :cancel-title="modalSettings.cancelTitle" - modal-id="cancel-comment-modal" - @ok="confirmCancelCommentModal" - >{{ modalSettings.content }} - </gl-modal> </form> </template> diff --git a/app/assets/javascripts/design_management/mixins/all_designs.js b/app/assets/javascripts/design_management/mixins/all_designs.js index e92f8006a0d..b783ec43cd1 100644 --- a/app/assets/javascripts/design_management/mixins/all_designs.js +++ b/app/assets/javascripts/design_management/mixins/all_designs.js @@ -1,6 +1,6 @@ import { propertyOf } from 'lodash'; import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; -import createFlash, { FLASH_TYPES } from '~/flash'; +import { createAlert, VARIANT_WARNING } from '~/flash'; import { s__ } from '~/locale'; import { DESIGNS_ROUTE_NAME } from '../router/constants'; import allVersionsMixin from './all_versions'; @@ -36,7 +36,7 @@ export default { }, result() { if (this.$route.query.version && !this.hasValidVersion) { - createFlash({ + createAlert({ message: s__( 'DesignManagement|Requested design version does not exist. Showing latest version instead', ), @@ -44,11 +44,11 @@ export default { this.$router.replace({ name: DESIGNS_ROUTE_NAME, query: { version: undefined } }); } if (this.designCollection.copyState === 'ERROR') { - createFlash({ + createAlert({ message: s__( 'DesignManagement|There was an error moving your designs. Please upload your designs below.', ), - type: FLASH_TYPES.WARNING, + variant: VARIANT_WARNING, }); } }, diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue index 228ad637b9e..d4c177e2e5f 100644 --- a/app/assets/javascripts/design_management/pages/design/index.vue +++ b/app/assets/javascripts/design_management/pages/design/index.vue @@ -4,7 +4,7 @@ import { isNull } from 'lodash'; import Mousetrap from 'mousetrap'; import { ApolloMutation } from 'vue-apollo'; import { keysFor, ISSUE_CLOSE_DESIGN } from '~/behaviors/shortcuts/keybindings'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -250,7 +250,7 @@ export default { onQueryError(message) { // because we redirect user to /designs (the issue page), // we want to create these flashes on the issue page - createFlash({ message }); + createAlert({ message }); this.$router.push({ name: this.$options.DESIGNS_ROUTE_NAME }); }, onError(message, e) { diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index 07f7a19f7d4..fba73cd4bec 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -133,9 +133,13 @@ export default { return this.designCollection && this.designCollection.copyState === 'IN_PROGRESS'; }, designDropzoneWrapperClass() { - return this.isDesignListEmpty - ? 'col-12' - : 'gl-flex-direction-column col-md-6 col-lg-3 gl-mt-5'; + if (!this.isDesignListEmpty) { + return 'gl-flex-direction-column col-md-6 col-lg-3 gl-mt-5'; + } + if (this.showToolbar) { + return 'col-12 gl-mt-5'; + } + return 'col-12'; }, }, mounted() { diff --git a/app/assets/javascripts/design_management/utils/cache_update.js b/app/assets/javascripts/design_management/utils/cache_update.js index c8f445bfb88..cfec5828c85 100644 --- a/app/assets/javascripts/design_management/utils/cache_update.js +++ b/app/assets/javascripts/design_management/utils/cache_update.js @@ -2,7 +2,7 @@ import produce from 'immer'; import { differenceBy } from 'lodash'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { extractCurrentDiscussion, extractDesign, extractDesigns } from './design_management_utils'; import { ADD_IMAGE_DIFF_NOTE_ERROR, @@ -234,7 +234,7 @@ export const deletePendingTodoFromStore = (store, todoMarkDone, query, queryVari }; const onError = (data, message) => { - createFlash({ message }); + createAlert({ message }); throw new Error(data.errors); }; @@ -283,7 +283,7 @@ export const updateStoreAfterUploadDesign = (store, data, query) => { export const updateDesignsOnStoreAfterReorder = (store, data, query) => { if (hasErrors(data)) { - createFlash({ message: data.errors[0] }); + createAlert({ message: data.errors[0] }); } else { moveDesignInStore(store, data, query); } |