diff options
Diffstat (limited to 'app/assets/javascripts/design_management/components')
4 files changed, 128 insertions, 35 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 10976202d06..7fefbab977d 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 @@ -7,6 +7,7 @@ import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vu import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue'; +import { isLoggedIn } from '~/lib/utils/common_utils'; import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants'; import createNoteMutation from '../../graphql/mutations/create_note.mutation.graphql'; import toggleResolveDiscussionMutation from '../../graphql/mutations/toggle_resolve_discussion.mutation.graphql'; @@ -17,6 +18,7 @@ import { hasErrors } from '../../utils/cache_update'; import { extractDesign } from '../../utils/design_management_utils'; import { ADD_DISCUSSION_COMMENT_ERROR } from '../../utils/error_messages'; import DesignNote from './design_note.vue'; +import DesignNoteSignedOut from './design_note_signed_out.vue'; import DesignReplyForm from './design_reply_form.vue'; import ToggleRepliesWidget from './toggle_replies_widget.vue'; @@ -24,6 +26,7 @@ export default { components: { ApolloMutation, DesignNote, + DesignNoteSignedOut, ReplyPlaceholder, DesignReplyForm, GlIcon, @@ -55,6 +58,14 @@ export default { required: false, default: '', }, + registerPath: { + type: String, + required: true, + }, + signInPath: { + type: String, + required: true, + }, resolvedDiscussionsExpanded: { type: Boolean, required: true, @@ -93,6 +104,7 @@ export default { isResolving: false, shouldChangeResolvedStatus: false, areRepliesCollapsed: this.discussion.resolved, + isLoggedIn: isLoggedIn(), }; }, computed: { @@ -226,7 +238,7 @@ export default { :class="{ 'gl-bg-blue-50': isDiscussionActive }" @error="$emit('update-note-error', $event)" > - <template v-if="discussion.resolvable" #resolve-discussion> + <template v-if="isLoggedIn && discussion.resolvable" #resolve-discussion> <button v-gl-tooltip :class="{ 'is-active': discussion.resolved }" @@ -269,38 +281,47 @@ export default { :class="{ 'gl-bg-blue-50': isDiscussionActive }" @error="$emit('update-note-error', $event)" /> - <li v-show="isReplyPlaceholderVisible" class="reply-wrapper discussion-reply-holder"> - <reply-placeholder - v-if="!isFormVisible" - class="qa-discussion-reply" - :placeholder-text="__('Reply…')" - @focus="showForm" - /> - <apollo-mutation - v-else - #default="{ mutate, loading }" - :mutation="$options.createNoteMutation" - :variables="{ - input: mutationPayload, - }" - @done="onDone" - @error="onCreateNoteError" - > - <design-reply-form - v-model="discussionComment" - :is-saving="loading" - :markdown-preview-path="markdownPreviewPath" - @submit-form="mutate" - @cancel-form="hideForm" + <li + v-show="isReplyPlaceholderVisible" + class="reply-wrapper discussion-reply-holder" + :class="{ 'gl-bg-gray-10': !isLoggedIn }" + > + <template v-if="!isLoggedIn"> + <design-note-signed-out :register-path="registerPath" :sign-in-path="signInPath" /> + </template> + <template v-else> + <reply-placeholder + v-if="!isFormVisible" + class="qa-discussion-reply" + :placeholder-text="__('Reply…')" + @focus="showForm" + /> + <apollo-mutation + v-else + #default="{ mutate, loading }" + :mutation="$options.createNoteMutation" + :variables="{ + input: mutationPayload, + }" + @done="onDone" + @error="onCreateNoteError" > - <template v-if="discussion.resolvable" #resolve-checkbox> - <label data-testid="resolve-checkbox"> - <input v-model="shouldChangeResolvedStatus" type="checkbox" /> - {{ resolveCheckboxText }} - </label> - </template> - </design-reply-form> - </apollo-mutation> + <design-reply-form + v-model="discussionComment" + :is-saving="loading" + :markdown-preview-path="markdownPreviewPath" + @submit-form="mutate" + @cancel-form="hideForm" + > + <template v-if="discussion.resolvable" #resolve-checkbox> + <label data-testid="resolve-checkbox"> + <input v-model="shouldChangeResolvedStatus" type="checkbox" /> + {{ resolveCheckboxText }} + </label> + </template> + </design-reply-form> + </apollo-mutation> + </template> </li> </ul> </div> diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue new file mode 100644 index 00000000000..f0812e62bba --- /dev/null +++ b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue @@ -0,0 +1,50 @@ +<script> +import { GlSprintf, GlLink } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { + GlSprintf, + GlLink, + }, + props: { + registerPath: { + type: String, + required: true, + }, + signInPath: { + type: String, + required: true, + }, + isAddDiscussion: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + signedOutText() { + return this.isAddDiscussion + ? __( + 'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to start a new discussion.', + ) + : __( + 'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to reply.', + ); + }, + }, +}; +</script> + +<template> + <div class="disabled-comment text-center"> + <gl-sprintf :message="signedOutText"> + <template #registerLink="{ content }"> + <gl-link :href="registerPath">{{ content }}</gl-link> + </template> + <template #signInLink="{ content }"> + <gl-link :href="signInPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </div> +</template> diff --git a/app/assets/javascripts/design_management/components/design_presentation.vue b/app/assets/javascripts/design_management/components/design_presentation.vue index 11d2f3b2e37..5116bacefa5 100644 --- a/app/assets/javascripts/design_management/components/design_presentation.vue +++ b/app/assets/javascripts/design_management/components/design_presentation.vue @@ -1,5 +1,6 @@ <script> import { throttle } from 'lodash'; +import { isLoggedIn } from '~/lib/utils/common_utils'; import DesignOverlay from './design_overlay.vue'; import DesignImage from './image.vue'; @@ -54,6 +55,7 @@ export default { initialLoad: true, lastDragPosition: null, isDraggingDesign: false, + isLoggedIn: isLoggedIn(), }; }, computed: { @@ -311,7 +313,7 @@ export default { :position="overlayPosition" :notes="discussionStartingNotes" :current-comment-form="currentCommentForm" - :disable-commenting="isDraggingDesign" + :disable-commenting="!isLoggedIn || isDraggingDesign" :resolved-discussions-expanded="resolvedDiscussionsExpanded" @openCommentForm="openCommentForm" @closeCommentForm="closeCommentForm" diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index ced76eb4843..6d0ed3b08a3 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -1,7 +1,7 @@ <script> import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui'; import Cookies from 'js-cookie'; -import { parseBoolean } from '~/lib/utils/common_utils'; +import { parseBoolean, isLoggedIn } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; import Participants from '~/sidebar/components/participants/participants.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -9,11 +9,13 @@ import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants'; import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql'; import { extractDiscussions, extractParticipants } from '../utils/design_management_utils'; import DesignDiscussion from './design_notes/design_discussion.vue'; +import DesignNoteSignedOut from './design_notes/design_note_signed_out.vue'; import DesignTodoButton from './design_todo_button.vue'; export default { components: { DesignDiscussion, + DesignNoteSignedOut, Participants, GlCollapse, GlButton, @@ -28,6 +30,12 @@ export default { issueIid: { default: '', }, + registerPath: { + default: '', + }, + signInPath: { + default: '', + }, }, props: { design: { @@ -47,6 +55,7 @@ export default { return { isResolvedCommentsPopoverHidden: parseBoolean(Cookies.get(this.$options.cookieKey)), discussionWithOpenForm: '', + isLoggedIn: isLoggedIn(), }; }, computed: { @@ -134,12 +143,19 @@ export default { class="gl-mb-4" /> <h2 - v-if="unresolvedDiscussions.length === 0" + v-if="isLoggedIn && unresolvedDiscussions.length === 0" class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" data-testid="new-discussion-disclaimer" > {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }} </h2> + <design-note-signed-out + v-if="!isLoggedIn" + class="gl-mb-4" + :register-path="registerPath" + :sign-in-path="signInPath" + :is-add-discussion="true" + /> <design-discussion v-for="discussion in unresolvedDiscussions" :key="discussion.id" @@ -147,6 +163,8 @@ export default { :design-id="$route.params.id" :noteable-id="design.id" :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" :resolved-discussions-expanded="resolvedDiscussionsExpanded" :discussion-with-open-form="discussionWithOpenForm" data-testid="unresolved-discussion" @@ -197,6 +215,8 @@ export default { :design-id="$route.params.id" :noteable-id="design.id" :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" :resolved-discussions-expanded="resolvedDiscussionsExpanded" :discussion-with-open-form="discussionWithOpenForm" data-testid="resolved-discussion" |