Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

app/assets/javascripts/batch_comments/components/review_bar.vue

@@ -5,26 +5,22 @@ import { mapGetters as mapVuexGetters } from 'vuex';
 import { GlButton, GlTooltipDirective as GlTooltip, GlModal } from '@gitlab/ui';
 import { __ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SET_REVIEW_BAR_RENDERED } from '~/batch_comments/stores/modules/batch_comments/mutation_types';
 import { useBatchComments } from '~/batch_comments/store';
 import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
 import PreviewDropdown from './preview_dropdown.vue';
 import SubmitDropdown from './submit_dropdown.vue';
-import SubmitDrawer from './submit_drawer.vue';
 
 export default {
   components: {
     GlModal,
     GlButton,
     PreviewDropdown,
     SubmitDropdown,
-    SubmitDrawer,
   },
   directives: {
     GlTooltip,
   },
-  mixins: [glFeatureFlagsMixin()],
   data() {
     return {
       discarding: false,
@@ -68,26 +64,24 @@ export default {
   },
 };
 </script>
+
 <template>
   <nav class="review-bar-component js-review-bar" data-testid="review_bar_component">
     <div class="review-bar-content gl-flex gl-justify-end" data-testid="review-bar-content">
-      <submit-drawer v-if="glFeatures.improvedReviewExperience" />
-      <template v-else>
-        <gl-button
-          v-gl-tooltip
-          icon="remove"
-          variant="danger"
-          category="tertiary"
-          class="gl-mr-3"
-          :title="__('Discard review')"
-          :aria-label="__('Discard review')"
-          :loading="discarding"
-          data-testid="discard-review-btn"
-          @click="showDiscardModal = true"
-        />
-        <preview-dropdown />
-        <submit-dropdown />
-      </template>
+      <gl-button
+        v-gl-tooltip
+        icon="remove"
+        variant="danger"
+        category="tertiary"
+        class="gl-mr-3"
+        :title="__('Discard review')"
+        :aria-label="__('Discard review')"
+        :loading="discarding"
+        data-testid="discard-review-btn"
+        @click="showDiscardModal = true"
+      />
+      <preview-dropdown />
+      <submit-dropdown />
     </div>
     <gl-modal
       v-model="showDiscardModal"

app/assets/javascripts/batch_comments/components/review_drawer.vue

@@ -0,0 +1,74 @@
+<script>
+// eslint-disable-next-line no-restricted-imports
+import { mapActions as mapVuexActions } from 'vuex';
+import { mapActions, mapState } from 'pinia';
+import { GlDrawer } from '@gitlab/ui';
+import PreviewItem from '~/batch_comments/components/preview_item.vue';
+import { useBatchComments } from '~/batch_comments/store';
+import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
+import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
+
+export default {
+  name: 'ReviewDrawer',
+  components: { GlDrawer, PreviewItem },
+  computed: {
+    ...mapState(useBatchComments, ['sortedDrafts', 'draftsCount', 'drawerOpened']),
+    getDrawerHeaderHeight() {
+      if (!this.drawerOpened) return '0';
+
+      return getContentWrapperHeight();
+    },
+  },
+  methods: {
+    ...mapVuexActions('diffs', ['goToFile']),
+    ...mapActions(useBatchComments, ['scrollToDraft', 'setDrawerOpened']),
+    async onClickDraft(draft) {
+      if (this.viewDiffsFileByFile) {
+        await this.goToFile({ path: draft.file_path });
+      }
+
+      if (draft.position && !this.isOnLatestDiff(draft)) {
+        const url = new URL(setUrlParams({ commit_id: draft.position.head_sha }));
+        url.hash = `note_${draft.id}`;
+        visitUrl(url.toString());
+      } else {
+        await this.scrollToDraft(draft);
+      }
+    },
+  },
+  DRAWER_Z_INDEX,
+};
+</script>
+
+<template>
+  <gl-drawer
+    :header-height="getDrawerHeaderHeight"
+    :z-index="$options.DRAWER_Z_INDEX"
+    :open="drawerOpened"
+    class="merge-request-review-drawer"
+    data-testid="review-drawer-toggle"
+    @close="setDrawerOpened(false)"
+  >
+    <template #title>
+      <h4 class="gl-m-0">{{ __('Submit your review') }}</h4>
+    </template>
+    <div>
+      <h5 class="h6 gl-mb-5 gl-mt-0" data-testid="reviewer-drawer-heading">
+        <template v-if="draftsCount > 0">
+          {{ n__('%d pending comment', '%d pending comments', draftsCount) }}
+        </template>
+        <template v-else>
+          {{ __('No pending comments') }}
+        </template>
+      </h5>
+      <preview-item
+        v-for="draft in sortedDrafts"
+        :key="draft.id"
+        :draft="draft"
+        class="gl-mb-3 gl-block"
+        @click="onClickDraft"
+      />
+    </div>
+  </gl-drawer>
+</template>

app/assets/javascripts/batch_comments/components/submit_drawer.vue

@@ -0,0 +1,33 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { mapActions, mapState } from 'pinia';
+import { useBatchComments } from '~/batch_comments/store';
+import DraftsCount from './drafts_count.vue';
+
+export default {
+  name: 'SubmitReviewButton',
+  components: {
+    GlButton,
+    DraftsCount,
+  },
+  computed: {
+    ...mapState(useBatchComments, ['draftsCount', 'draftsCount', 'isReviewer']),
+  },
+  methods: {
+    ...mapActions(useBatchComments, ['setDrawerOpened']),
+  },
+};
+</script>
+
+<template>
+  <div v-if="draftsCount > 0 || isReviewer">
+    <gl-button variant="confirm" data-testid="review-drawer-toggle" @click="setDrawerOpened(true)">
+      {{ __('Your review') }}
+      <drafts-count
+        v-if="draftsCount > 0"
+        variant="info"
+        data-testid="reviewer-drawer-drafts-count-badge"
+      />
+    </gl-button>
+  </div>
+</template>

app/assets/javascripts/batch_comments/components/submit_review_button.vue

@@ -37,7 +37,7 @@ export const initReviewBar = () => {
       ...mapActions(useBatchComments, ['fetchDrafts']),
     },
     render(createElement) {
-      if (this.draftsCount === 0) return null;
+      if (window.gon?.features?.improvedReviewExperience || this.draftsCount === 0) return null;
 
       return createElement('review-bar');
     },

app/assets/javascripts/batch_comments/index.js

@@ -192,3 +192,7 @@ export function discardDrafts() {
       }),
     );
 }
+
+export function setDrawerOpened(opened) {
+  this.drawerOpened = opened;
+}

app/assets/javascripts/batch_comments/store/actions.js

@@ -19,6 +19,9 @@ export const useBatchComments = defineStore('batchComments', {
       shouldAnimateReviewButton: false,
       reviewBarRendered: false,
       isMergeRequest: false,
+      drawerOpened: false,
+      // TODO: this gets populated from the sidebar_reviewers.vue, we should have a separate store for this
+      isReviewer: false,
     };
   },
   actions: {

app/assets/javascripts/batch_comments/store/index.js

@@ -201,7 +201,7 @@ export default {
 
         <slot name="action-buttons" :is-collapsible="isCollapsible"></slot>
 
-        <div v-if="isCollapsible" class="gl-border-l gl-ml-3 gl-pl-3">
+        <div v-if="isCollapsible" class="gl-border-l gl-ml-3 gl-border-l-section gl-pl-3">
           <gl-button
             data-testid="report-section-expand-button"
             category="tertiary"

app/assets/javascripts/ci/reports/components/report_section.vue

@@ -1,8 +1,7 @@
 <script>
 import { GlAlert, GlButton } from '@gitlab/ui';
-// eslint-disable-next-line no-restricted-imports
-import { mapState } from 'vuex';
-
+import { mapState } from 'pinia';
+import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
 import { EVT_EXPAND_ALL_FILES } from '../constants';
 import eventHub from '../event_hub';
 
@@ -24,7 +23,7 @@ export default {
     };
   },
   computed: {
-    ...mapState('diffs', ['diffFiles']),
+    ...mapState(useLegacyDiffs, ['diffFiles']),
     shouldDisplay() {
       return !this.isDismissed && this.diffFiles.length > 1;
     },

app/assets/javascripts/diffs/components/collapsed_files_warning.vue

@@ -1,7 +1,6 @@
 <script>
 import { GlTooltipDirective, GlIcon, GlLink, GlButtonGroup, GlButton, GlSprintf } from '@gitlab/ui';
-// eslint-disable-next-line no-restricted-imports
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { mapActions, mapState } from 'pinia';
 import { __ } from '~/locale';
 import { setUrlParams } from '~/lib/utils/url_utility';
 import {
@@ -12,6 +11,7 @@ import {
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
 import { sanitize } from '~/lib/dompurify';
 import FileBrowserToggle from '~/diffs/components/file_browser_toggle.vue';
+import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
 import CompareDropdownLayout from './compare_dropdown_layout.vue';
 
 export default {
@@ -35,11 +35,13 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('diffs', [
+    ...mapState(useLegacyDiffs, [
+      'commit',
+      'startVersion',
+      'latestVersionPath',
       'diffCompareDropdownTargetVersions',
       'diffCompareDropdownSourceVersions',
     ]),
-    ...mapState('diffs', ['commit', 'startVersion', 'latestVersionPath']),
     hasSourceVersions() {
       return this.diffCompareDropdownSourceVersions.length > 0;
     },
@@ -92,7 +94,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions('diffs', ['moveToNeighboringCommit']),
+    ...mapActions(useLegacyDiffs, ['moveToNeighboringCommit']),
   },
 };
 </script>