From 948544de4e4654321dd3b8f590bbb970c789fa91 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 7 Mar 2025 11:00:37 -0700
Subject: [PATCH] Show log in modal on comments when logged out

Changelog: changed
---
 .../diffs/components/diff_comment_cell.vue    |  69 +++++++
 .../components/diff_discussion_reply.vue      |  20 +-
 .../notes/components/noteable_discussion.vue  |  67 ++++++-
 .../components/history_comment.vue            | 171 ++++++++++++------
 locale/gitlab.pot                             |   9 +
 5 files changed, 272 insertions(+), 64 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_comment_cell.vue b/app/assets/javascripts/diffs/components/diff_comment_cell.vue
index 3eae6263eca868..bb98eca05e6a60 100644
--- a/app/assets/javascripts/diffs/components/diff_comment_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_comment_cell.vue
@@ -1,6 +1,9 @@
 <script>
 // eslint-disable-next-line no-restricted-imports
 import { mapActions } from 'vuex';
+import { GlModal, GlButton } from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
 import DiffDiscussionReply from './diff_discussion_reply.vue';
 import DiffDiscussions from './diff_discussions.vue';
 import DiffLineNoteForm from './diff_line_note_form.vue';
@@ -10,6 +13,8 @@ export default {
     DiffDiscussions,
     DiffLineNoteForm,
     DiffDiscussionReply,
+    GlModal,
+    GlButton,
   },
   props: {
     line: {
@@ -41,8 +46,57 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      showLoginModal: false,
+    };
+  },
+  computed: {
+    signInPath() {
+      return window.gon?.signin_path || '/users/sign_in';
+    },
+    modalTitle() {
+      return __('Sign in required');
+    },
+    modalText() {
+      return __('You need to sign in to comment on this merge request.');
+    },
+    signInButtonText() {
+      return __('Sign in');
+    },
+    modalId() {
+      return 'sign-in-modal';
+    },
+  },
   methods: {
     ...mapActions('diffs', ['showCommentForm']),
+
+    showSignInModal() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = true;
+    },
+
+    hideModal() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = false;
+    },
+
+    goToSignIn() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = false;
+      setTimeout(() => {
+        visitUrl(this.signInPath);
+      }, 1);
+    },
   },
 };
 </script>
@@ -60,6 +114,7 @@ export default {
       :has-form="line.hasCommentForm"
       :render-reply-placeholder="Boolean(line.discussions.length)"
       @showNewDiscussionForm="showCommentForm({ lineCode: line.line_code, fileHash: diffFileHash })"
+      @showSignInModal="showSignInModal"
     >
       <template #form>
         <diff-line-note-form
@@ -72,5 +127,19 @@ export default {
         />
       </template>
     </diff-discussion-reply>
+
+    <gl-modal :modal-id="modalId" :visible="showLoginModal" :title="modalTitle" @hide="hideModal">
+      <p>{{ modalText }}</p>
+      <template #modal-footer>
+        <gl-button
+          variant="confirm"
+          category="primary"
+          data-testid="sign-in-button"
+          @click="goToSignIn"
+        >
+          {{ signInButtonText }}
+        </gl-button>
+      </template>
+    </gl-modal>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
index 9b7ee725edb328..a7ab00bd57b36a 100644
--- a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
+++ b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlButton } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
-import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue';
+import { GlButton } from '@gitlab/ui';
 import DiscussionLockedWidget from '~/notes/components/discussion_locked_widget.vue';
+import DiscussionReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import { COMMENT_FORM } from '../../notes/i18n';
 
 import { START_THREAD } from '../i18n';
@@ -15,9 +15,9 @@ export default {
     COMMENT_FORM,
   },
   components: {
-    GlButton,
     DiscussionLockedWidget,
-    NoteSignedOutWidget,
+    DiscussionReplyPlaceholder,
+    GlButton,
   },
   props: {
     hasForm: {
@@ -43,6 +43,14 @@ export default {
       return this.userCanReply && this.getNoteableData.current_user.can_create_note;
     },
   },
+  methods: {
+    handleFocus() {
+      this.$emit('showSignInModal');
+    },
+    showNewDiscussionForm() {
+      this.$emit('showNewDiscussionForm');
+    },
+  },
 };
 </script>
 
@@ -56,11 +64,11 @@ export default {
     <template v-else-if="isLoggedIn">
       <slot v-if="hasForm" name="form"></slot>
       <template v-else-if="renderReplyPlaceholder">
-        <gl-button @click="$emit('showNewDiscussionForm')">
+        <gl-button @click="showNewDiscussionForm">
           {{ $options.i18n.START_THREAD }}
         </gl-button>
       </template>
     </template>
-    <note-signed-out-widget v-else />
+    <discussion-reply-placeholder v-else @focus="handleFocus" />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 557a6612b5a076..4294aa94f3684d 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlModal, GlButton } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapActions, mapGetters } from 'vuex';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
@@ -14,6 +14,7 @@ import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { detectAndConfirmSensitiveTokens } from '~/lib/utils/secret_detection';
 import { FILE_DIFF_POSITION_TYPE, IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
+import { visitUrl } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
@@ -23,20 +24,22 @@ import DiffWithNote from './diff_with_note.vue';
 import DiscussionActions from './discussion_actions.vue';
 import DiscussionNotes from './discussion_notes.vue';
 import NoteForm from './note_form.vue';
-import NoteSignedOutWidget from './note_signed_out_widget.vue';
+import DiscussionReplyPlaceholder from './discussion_reply_placeholder.vue';
 
 export default {
   name: 'NoteableDiscussion',
   components: {
     GlIcon,
+    GlModal,
+    GlButton,
     UserAvatarLink,
     DiffDiscussionHeader,
-    NoteSignedOutWidget,
     NoteForm,
     DraftNote,
     TimelineEntryItem,
     DiscussionNotes,
     DiscussionActions,
+    DiscussionReplyPlaceholder,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -83,6 +86,7 @@ export default {
       isReplying: false,
       isResolving: false,
       resolveAsThread: true,
+      showLoginModal: false,
     };
   },
   computed: {
@@ -198,6 +202,21 @@ export default {
     hasDraft() {
       return Boolean(getDraft(this.autosaveKey));
     },
+    signInPath() {
+      return window.gon?.signin_path || '/users/sign_in';
+    },
+    modalTitle() {
+      return __('Sign in required');
+    },
+    modalText() {
+      return __('You need to sign in to comment on this merge request.');
+    },
+    signInButtonText() {
+      return __('Sign in');
+    },
+    modalId() {
+      return `sign-in-modal-${this.discussion.id}`;
+    },
   },
   created() {
     eventHub.$on('startReplying', this.onStartReplying);
@@ -314,6 +333,30 @@ export default {
         this.showReplyForm();
       }
     },
+    showSignInModal() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = true;
+    },
+    hideModal() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = false;
+    },
+    goToSignIn() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = false;
+      setTimeout(() => {
+        visitUrl(this.signInPath);
+      }, 1);
+    },
   },
 };
 </script>
@@ -363,13 +406,13 @@ export default {
                 >
                   <div class="flash-container !gl-mt-0 gl-mb-2"></div>
                   <discussion-actions
-                    v-if="!isReplying && userCanReply"
+                    v-if="!isReplying"
                     :discussion="discussion"
                     :is-resolving="isResolving"
                     :resolve-button-title="resolveButtonTitle"
                     :resolve-with-issue-path="resolveWithIssuePath"
                     :should-show-jump-to-next-discussion="shouldShowJumpToNextDiscussion"
-                    @showReplyForm="showReplyForm"
+                    @showReplyForm="isLoggedIn ? showReplyForm : showSignInModal"
                     @resolve="resolveHandler"
                   />
                   <note-form
@@ -385,7 +428,6 @@ export default {
                     @handleFormUpdate="saveReply"
                     @cancelForm="cancelReplyForm"
                   />
-                  <note-signed-out-widget v-if="!isLoggedIn" />
                 </li>
               </template>
             </discussion-notes>
@@ -393,5 +435,18 @@ export default {
         </div>
       </div>
     </div>
+    <gl-modal :modal-id="modalId" :visible="showLoginModal" :title="modalTitle" @hide="hideModal">
+      <p>{{ modalText }}</p>
+      <template #modal-footer>
+        <gl-button
+          variant="confirm"
+          category="primary"
+          data-testid="sign-in-button"
+          @click="goToSignIn"
+        >
+          {{ signInButtonText }}
+        </gl-button>
+      </template>
+    </gl-modal>
   </timeline-entry-item>
 </template>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue b/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
index 5533fcae5c3c25..16009cc3ec7f1c 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlModal } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import createNoteMutation from 'ee/security_dashboard/graphql/mutations/note_create.mutation.graphql';
 import destroyNoteMutation from 'ee/security_dashboard/graphql/mutations/note_destroy.mutation.graphql';
@@ -13,12 +13,15 @@ import {
 } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import { visitUrl } from '~/lib/utils/url_utility';
 import HistoryCommentEditor from './history_comment_editor.vue';
 
 export default {
   components: {
     GlButton,
     GlLoadingIcon,
+    GlModal,
     EventItem,
     HistoryCommentEditor,
   },
@@ -48,6 +51,7 @@ export default {
       isSavingComment: false,
       isDeletingComment: false,
       isConfirmingDeletion: false,
+      showLoginModal: false,
     };
   },
 
@@ -75,10 +79,33 @@ export default {
     noteHtml() {
       return this.isSavingComment ? undefined : this.comment.bodyHtml;
     },
+    isLoggedIn() {
+      return isLoggedIn();
+    },
+    signInPath() {
+      return window.gon?.signin_path || '/users/sign_in';
+    },
+    modalTitle() {
+      return __('Sign in required');
+    },
+    modalText() {
+      return __('You need to sign in to comment on this vulnerability.');
+    },
+    signInButtonText() {
+      return __('Sign in');
+    },
+    modalId() {
+      return 'vulnerability-sign-in-modal';
+    },
   },
 
   methods: {
     showCommentInput() {
+      if (!this.isLoggedIn) {
+        this.showSignInModal();
+        return;
+      }
+
       this.isEditingComment = true;
     },
     async insertComment(body) {
@@ -174,63 +201,103 @@ export default {
     cancelDeleteConfirmation() {
       this.isConfirmingDeletion = false;
     },
+    showSignInModal() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = true;
+    },
+    hideModal() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = false;
+    },
+    goToSignIn() {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      this.showLoginModal = false;
+      setTimeout(() => {
+        visitUrl(this.signInPath);
+      }, 1);
+    },
   },
 };
 </script>
 
 <template>
-  <history-comment-editor
-    v-if="isEditingComment"
-    class="discussion-reply-holder gl-px-5 gl-pb-4"
-    :initial-comment="initialComment"
-    :is-saving="isSavingComment"
-    @onSave="saveComment"
-    @onCancel="cancelEditingComment"
-  />
-
-  <event-item
-    v-else-if="comment"
-    :id="comment.id"
-    :author="comment.author"
-    :created-at="comment.updatedAt"
-    :show-action-buttons="canEditComment"
-    :show-right-slot="isConfirmingDeletion"
-    :action-buttons="actionButtons"
-    icon-name="comment"
-    icon-class="timeline-icon"
-    class="gl-border-t gl-border-subtle gl-p-5"
-  >
-    <div v-safe-html="noteHtml" class="md">
-      <gl-loading-icon size="sm" />
+  <div>
+    <history-comment-editor
+      v-if="isEditingComment"
+      class="discussion-reply-holder gl-px-5 gl-pb-4"
+      :initial-comment="initialComment"
+      :is-saving="isSavingComment"
+      @onSave="saveComment"
+      @onCancel="cancelEditingComment"
+    />
+
+    <event-item
+      v-else-if="comment"
+      :id="comment.id"
+      :author="comment.author"
+      :created-at="comment.updatedAt"
+      :show-action-buttons="canEditComment"
+      :show-right-slot="isConfirmingDeletion"
+      :action-buttons="actionButtons"
+      icon-name="comment"
+      icon-class="timeline-icon"
+      class="gl-border-t gl-border-subtle gl-p-5"
+    >
+      <div v-safe-html="noteHtml" class="md">
+        <gl-loading-icon size="sm" />
+      </div>
+
+      <template #right-content>
+        <gl-button
+          variant="danger"
+          :loading="isDeletingComment"
+          data-testid="confirm-delete-button"
+          @click="deleteComment"
+        >
+          {{ __('Delete') }}
+        </gl-button>
+        <gl-button
+          class="gl-ml-3"
+          :disabled="isDeletingComment"
+          data-testid="cancel-delete-button"
+          @click="cancelDeleteConfirmation"
+        >
+          {{ __('Cancel') }}
+        </gl-button>
+      </template>
+    </event-item>
+
+    <div v-else class="discussion-reply-holder gl-px-5 gl-pb-4">
+      <textarea
+        rows="1"
+        :placeholder="s__('vulnerability|Add a comment')"
+        class="reply-placeholder-text-field"
+        data-testid="add-comment-textarea"
+        @focus="showCommentInput"
+      ></textarea>
     </div>
 
-    <template #right-content>
-      <gl-button
-        variant="danger"
-        :loading="isDeletingComment"
-        data-testid="confirm-delete-button"
-        @click="deleteComment"
-      >
-        {{ __('Delete') }}
-      </gl-button>
-      <gl-button
-        class="gl-ml-3"
-        :disabled="isDeletingComment"
-        data-testid="cancel-delete-button"
-        @click="cancelDeleteConfirmation"
-      >
-        {{ __('Cancel') }}
-      </gl-button>
-    </template>
-  </event-item>
-
-  <div v-else class="discussion-reply-holder gl-px-5 gl-pb-4">
-    <textarea
-      rows="1"
-      :placeholder="s__('vulnerability|Add a comment')"
-      class="reply-placeholder-text-field"
-      data-testid="add-comment-textarea"
-      @focus="showCommentInput"
-    ></textarea>
+    <gl-modal :modal-id="modalId" :visible="showLoginModal" :title="modalTitle" @hide="hideModal">
+      <p>{{ modalText }}</p>
+      <template #modal-footer>
+        <gl-button
+          variant="confirm"
+          category="primary"
+          data-testid="sign-in-button"
+          @click="goToSignIn"
+        >
+          {{ signInButtonText }}
+        </gl-button>
+      </template>
+    </gl-modal>
   </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2b6701a2d06d3b..6cc4bc3a57f5d1 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -55325,6 +55325,9 @@ msgstr ""
 msgid "Sign in preview"
 msgstr ""
 
+msgid "Sign in required"
+msgstr ""
+
 msgid "Sign in to GitLab"
 msgstr ""
 
@@ -67794,6 +67797,12 @@ msgstr ""
 msgid "You need to set terms to be enforced"
 msgstr ""
 
+msgid "You need to sign in to comment on this merge request."
+msgstr ""
+
+msgid "You need to sign in to comment on this vulnerability."
+msgstr ""
+
 msgid "You need to specify both an access token and a Host URL."
 msgstr ""
 
-- 
GitLab