Add latest changes from gitlab-org/gitlab@14-7-stable-eev14.7.0-rc42

5 files changed, 131 insertions, 36 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"
diff --git a/app/assets/javascripts/design_management/index.js b/app/assets/javascripts/design_management/index.js
index 11666587265..4ae76050aa5 100644
--- a/app/assets/javascripts/design_management/index.js
+++ b/app/assets/javascripts/design_management/index.js
@@ -8,7 +8,7 @@ import createRouter from './router';
 
 export default () => {
   const el = document.querySelector('.js-design-management');
-  const { issueIid, projectPath, issuePath } = el.dataset;
+  const { issueIid, projectPath, issuePath, registerPath, signInPath } = el.dataset;
   const router = createRouter(issuePath);
 
   apolloProvider.clients.defaultClient.cache.writeQuery({
@@ -29,6 +29,8 @@ export default () => {
     provide: {
       projectPath,
       issueIid,
+      registerPath,
+      signInPath,
     },
     mounted() {
       performanceMarkAndMeasure({