app/assets/javascripts/organizations/mock_projects.js

@@ -7,6 +7,7 @@
 export const organizationProjects = [
   {
     id: 'gid://gitlab/Project/8',
+    fullPath: 'project/8',
     nameWithNamespace: 'Twitter / Typeahead.Js',
     organizationEditPath: '/-/organizations/default/projects/twitter/Typeahead.Js/edit',
     webUrl: 'http://127.0.0.1:3000/twitter/Typeahead.Js',
@@ -40,6 +41,7 @@ export const organizationProjects = [
   },
   {
     id: 'gid://gitlab/Project/7',
+    fullPath: 'project/7',
     nameWithNamespace: 'Flightjs / Flight',
     organizationEditPath: '/-/organizations/default/projects/flightjs/Flight/edit',
     webUrl: 'http://127.0.0.1:3000/flightjs/Flight',
@@ -73,6 +75,7 @@ export const organizationProjects = [
   },
   {
     id: 'gid://gitlab/Project/6',
+    fullPath: 'project/6',
     nameWithNamespace: 'Jashkenas / Underscore',
     organizationEditPath: '/-/organizations/default/projects/jashkenas/Underscore/edit',
     webUrl: 'http://127.0.0.1:3000/jashkenas/Underscore',
@@ -106,6 +109,7 @@ export const organizationProjects = [
   },
   {
     id: 'gid://gitlab/Project/5',
+    fullPath: 'project/5',
     nameWithNamespace: 'Commit451 / Lab Coat',
     organizationEditPath: '/-/organizations/default/projects/Commit451/lab-coat/edit',
     webUrl: 'http://127.0.0.1:3000/Commit451/lab-coat',
@@ -139,6 +143,7 @@ export const organizationProjects = [
   },
   {
     id: 'gid://gitlab/Project/1',
+    fullPath: 'project/1',
     nameWithNamespace: 'Toolbox / Gitlab Smoke Tests',
     organizationEditPath: '/-/organizations/default/projects/toolbox/gitlab-smoke-tests/edit',
     webUrl: 'http://127.0.0.1:3000/toolbox/gitlab-smoke-tests',

app/assets/javascripts/organizations/shared/components/organizations_view.vue

@@ -34,6 +34,24 @@ export default {
     nodes() {
       return this.organizations.nodes || [];
     },
+    emptyStateProps() {
+      const baseProps = {
+        svgHeight: 144,
+        svgPath: this.organizationsEmptyStateSvgPath,
+        title: this.$options.i18n.emptyStateTitle,
+        description: this.$options.i18n.emptyStateDescription,
+      };
+
+      if (gon.features?.allowOrganizationCreation) {
+        return {
+          ...baseProps,
+          primaryButtonLink: this.newOrganizationUrl,
+          primaryButtonText: this.$options.i18n.emptyStateButtonText,
+        };
+      }
+
+      return baseProps;
+    },
   },
 };
 </script>
@@ -47,13 +65,5 @@ export default {
     @prev="$emit('prev', $event)"
     @next="$emit('next', $event)"
   />
-  <gl-empty-state
-    v-else
-    :svg-height="144"
-    :svg-path="organizationsEmptyStateSvgPath"
-    :title="$options.i18n.emptyStateTitle"
-    :description="$options.i18n.emptyStateDescription"
-    :primary-button-link="newOrganizationUrl"
-    :primary-button-text="$options.i18n.emptyStateButtonText"
-  />
+  <gl-empty-state v-else v-bind="emptyStateProps" />
 </template>

app/assets/javascripts/organizations/shared/graphql/fragments/base_project.fragment.graphql

 fragment BaseProject on Project {
   id
+  fullPath
   archived
   nameWithNamespace
   organizationEditPath

app/assets/javascripts/pages/projects/merge_requests/rapid_diffs/index.js

+import { initMrPage } from '~/pages/projects/merge_requests/page';
+
+initMrPage();

app/assets/javascripts/pages/projects/show/index.js

 import Vue from 'vue';
 import { addShortcutsExtension } from '~/behaviors/shortcuts';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
+import { initFindFileShortcut } from '~/projects/behaviors';
 import initClustersDeprecationAlert from '~/projects/clusters_deprecation_alert';
 import leaveByUrl from '~/namespaces/leave_by_url';
 import initTerraformNotification from '~/projects/terraform_notification';
@@ -82,3 +83,4 @@ const initCodeDropdown = () => {
 
 initCodeDropdown();
 initSourceCodeDropdowns();
+initFindFileShortcut();

app/assets/javascripts/pages/projects/tree/show/index.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import initTree from 'ee_else_ce/repository';
 import { addShortcutsExtension } from '~/behaviors/shortcuts';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
+import { initFindFileShortcut } from '~/projects/behaviors';
 import NewCommitForm from '~/new_commit_form';
 import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
 
@@ -9,3 +10,4 @@ new NewCommitForm($('.js-create-dir-form')); // eslint-disable-line no-new
 initTree();
 initAmbiguousRefModal();
 addShortcutsExtension(ShortcutsNavigation);
+initFindFileShortcut();

app/assets/javascripts/projects/behaviors.js

+import Shortcuts from '~/behaviors/shortcuts/shortcuts';
+
+export const initFindFileShortcut = () => {
+  const findFileButton = document.querySelector('.shortcuts-find-file');
+  if (!findFileButton) return;
+  findFileButton.addEventListener('click', Shortcuts.focusSearchFile);
+};

app/assets/javascripts/releases/components/evidence_block.vue

@@ -76,7 +76,7 @@ export default {
           <gl-icon name="external-link" class="gl-ml-2 gl-flex-shrink-0 gl-flex-grow-0" />
         </gl-link>
 
-        <expand-button>
+        <expand-button class="gl-ml-4">
           <template #short>
             <span class="js-short monospace">{{ shortSha(index) }}</span>
           </template>

app/assets/javascripts/releases/components/release_block_assets.vue

@@ -102,7 +102,7 @@ export default {
     <gl-button
       data-testid="accordion-button"
       variant="link"
-      class="gl-font-weight-bold"
+      class="gl-font-weight-bold gl-text-black-normal!"
       @click="toggleAssetsExpansion"
     >
       <gl-icon

app/assets/javascripts/releases/components/release_block_footer.vue

@@ -85,36 +85,37 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <div
-      v-if="commit"
-      class="gl-float-left gl-mr-5 gl-display-flex gl-align-items-center js-commit-info"
-    >
-      <gl-icon ref="commitIcon" name="commit" class="gl-mr-2" />
+  <div class="gl-display-flex gl-gap-5">
+    <div v-if="commit" class="gl-display-flex gl-align-items-center js-commit-info">
+      <gl-icon ref="commitIcon" name="commit" class="gl-mr-2 gl-text-gray-700" />
       <div v-gl-tooltip.bottom :title="commit.title">
-        <gl-link v-if="commitPath" :href="commitPath">
+        <gl-link
+          v-if="commitPath"
+          :href="commitPath"
+          class="gl-font-sm gl-font-monospace gl-mr-0 gl-text-gray-700"
+        >
           {{ commit.shortId }}
         </gl-link>
         <span v-else>{{ commit.shortId }}</span>
       </div>
     </div>
 
-    <div
-      v-if="tagName"
-      class="gl-float-left gl-mr-5 gl-display-flex gl-align-items-center js-tag-info"
-    >
-      <gl-icon name="tag" class="gl-mr-2" />
+    <div v-if="tagName" class="gl-display-flex gl-align-items-center js-tag-info">
+      <gl-icon name="tag" class="gl-mr-2 gl-text-gray-700" />
       <div v-gl-tooltip.bottom :title="__('Tag')">
-        <gl-link v-if="tagPath" :href="tagPath">
+        <gl-link
+          v-if="tagPath"
+          :href="tagPath"
+          class="gl-font-sm gl-font-monospace gl-mr-0 gl-text-gray-700"
+        >
           {{ tagName }}
         </gl-link>
         <span v-else>{{ tagName }}</span>
       </div>
     </div>
-
     <div
       v-if="timeAt || author"
-      class="gl-float-left gl-display-flex gl-align-items-center js-author-date-info"
+      class="gl-display-flex gl-align-items-center js-author-date-info gl-font-sm"
     >
       <span class="gl-text-secondary">{{ createdTime }}&nbsp;</span>
       <template v-if="timeAt">
@@ -130,11 +131,10 @@ export default {
       <div v-if="author" class="gl-display-flex">
         <span class="gl-text-secondary">{{ __('by') }}&nbsp;</span>
         <user-avatar-link
-          class="gl-my-n1 gl-display-flex"
           :link-href="author.webUrl"
           :img-src="author.avatarUrl"
           :img-alt="userImageAltDescription"
-          :img-size="24"
+          :img-size="16"
           :tooltip-text="author.username"
           tooltip-placement="bottom"
         />

app/assets/javascripts/releases/components/release_block_header.vue

@@ -6,7 +6,7 @@ import { BACK_URL_PARAM } from '~/releases/constants';
 
 export default {
   i18n: {
-    editButton: __('Edit this release'),
+    editButton: __('Edit release'),
     historical: __('Historical release'),
     historicalTooltip: __(
       'This release was created with a date in the past. Evidence collection at the moment of the release is unavailable.',
@@ -49,12 +49,12 @@ export default {
 
 <template>
   <div class="card-header d-flex gl-align-items-center bg-white pr-0">
-    <h2 class="card-title my-2 mr-auto">
-      <gl-link v-if="selfLink" :href="selfLink">
+    <h2 class="card-title gl-my-2 mr-auto gl-font-size-h2">
+      <gl-link v-if="selfLink" class="gl-text-black-normal" :href="selfLink">
         {{ release.name }}
       </gl-link>
       <template v-else>
-        {{ release.name }}
+        <span class="gl-text-black-normal">{{ release.name }}</span>
         <gl-icon
           v-gl-tooltip
           name="lock"
@@ -80,14 +80,13 @@ export default {
     </h2>
     <gl-button
       v-if="editLink"
-      v-gl-tooltip
       category="primary"
+      size="small"
       variant="default"
-      icon="pencil"
       class="gl-mr-3 js-edit-button gl-ml-3 gl-pb-3"
-      :title="$options.i18n.editButton"
-      :aria-label="$options.i18n.editButton"
       :href="editLink"
-    />
+    >
+      {{ $options.i18n.editButton }}
+    </gl-button>
   </div>
 </template>

app/assets/javascripts/repository/components/blob_controls.vue

@@ -4,13 +4,14 @@ import { __ } from '~/locale';
 import { createAlert } from '~/alert';
 import getRefMixin from '~/repository/mixins/get_ref';
 import initSourcegraph from '~/sourcegraph';
+import Shortcuts from '~/behaviors/shortcuts/shortcuts';
 import { addShortcutsExtension } from '~/behaviors/shortcuts';
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
 import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob';
 import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import {
   keysFor,
-  GO_TO_PROJECT_FIND_FILE,
+  START_SEARCH_PROJECT_FILE,
   PROJECT_FILES_GO_TO_PERMALINK,
 } from '~/behaviors/shortcuts/keybindings';
 import { sanitize } from '~/lib/dompurify';
@@ -98,10 +99,10 @@ export default {
       return !this.blobInfo.storedExternally && this.blobInfo.externalStorage !== 'lfs';
     },
     findFileShortcutKey() {
-      return keysFor(GO_TO_PROJECT_FIND_FILE)[0];
+      return keysFor(START_SEARCH_PROJECT_FILE)[0];
     },
     findFileTooltip() {
-      const { description } = GO_TO_PROJECT_FIND_FILE;
+      const { description } = START_SEARCH_PROJECT_FILE;
       const key = this.findFileShortcutKey;
       return shouldDisableShortcuts()
         ? null
@@ -150,6 +151,9 @@ export default {
         document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
       );
     },
+    handleFindFile() {
+      Shortcuts.focusSearchFile();
+    },
   },
 };
 </script>
@@ -160,8 +164,8 @@ export default {
       v-gl-tooltip.html="findFileTooltip"
       :aria-keyshortcuts="findFileShortcutKey"
       data-testid="find"
-      :href="blobInfo.findFilePath"
       :class="$options.buttonClassList"
+      @click="handleFindFile"
     >
       {{ $options.i18n.findFile }}
     </gl-button>

app/assets/javascripts/repository/components/fork_info.vue

@@ -214,9 +214,13 @@ export default {
         return this.$options.i18n.unknown;
       }
       if (this.hasBehindAheadMessage) {
-        return sprintf(this.$options.i18n.behindAhead, {
-          messages: this.behindAheadMessage,
-        });
+        return sprintf(
+          this.$options.i18n.behindAhead,
+          {
+            messages: this.behindAheadMessage,
+          },
+          false,
+        );
       }
       return this.$options.i18n.upToDate;
     },

app/assets/javascripts/settings_panels.js

@@ -26,7 +26,7 @@ export function expandSection(sectionArg) {
       .one('animationend.animateSection', () => $section.removeClass('animating'));
   }
 
-  InternalEvents.trackEvent('click_expand_panel_on_settings', undefined, {
+  InternalEvents.trackEvent('click_expand_panel_on_settings', {
     label: $section.find('.settings-title').text(),
   });
 }

app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue

@@ -113,10 +113,7 @@ export default {
     <div class="hide-collapsed gl-line-height-20 gl-font-weight-bold">
       {{ contactsLabel }}
     </div>
-    <div
-      class="hide-collapsed gl-display-flex gl-flex-wrap"
-      :class="contacts.length > 0 ? 'gl-mt-2' : ''"
-    >
+    <div v-if="shouldShowContacts" class="hide-collapsed gl-display-flex gl-flex-wrap gl-mt-2">
       <div
         v-for="(contact, index) in contacts"
         :id="`contact_container_${index}`"
@@ -137,5 +134,12 @@ export default {
         </gl-popover>
       </div>
     </div>
+    <div
+      v-else
+      data-testid="crm-empty-message"
+      class="gl-display-flex gl-align-items-center hide-collapsed gl-text-gray-500"
+    >
+      {{ __('To add active contacts, use /add_contacts.') }}
+    </div>
   </div>
 </template>

app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue

 <script>
 // NOTE! For the first iteration, we are simply copying the implementation of Assignees
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
-import { GlLoadingIcon } from '@gitlab/ui';
+import { MountingPortal } from 'portal-vue';
+import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { n__ } from '~/locale';
+import ReviewerDrawer from '~/merge_requests/components/reviewers/reviewer_drawer.vue';
 
 export default {
   name: 'ReviewerTitle',
   components: {
+    MountingPortal,
     GlLoadingIcon,
+    GlButton,
+    ReviewerDrawer,
   },
+  directives: {
+    Tooltip: GlTooltipDirective,
+  },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     loading: {
       type: Boolean,
@@ -24,12 +34,22 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      drawerOpen: false,
+    };
+  },
   computed: {
     reviewerTitle() {
       const reviewers = this.numberOfReviewers;
       return n__('Reviewer', `%d Reviewers`, reviewers);
     },
   },
+  methods: {
+    toggleDrawerOpen(drawerOpen = !this.drawerOpen) {
+      this.drawerOpen = drawerOpen;
+    },
+  },
 };
 </script>
 <template>
@@ -38,16 +58,35 @@ export default {
   >
     {{ reviewerTitle }}
     <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
-    <a
-      v-if="editable"
-      class="js-sidebar-dropdown-toggle edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary gl-float-right"
-      href="#"
-      data-track-action="click_edit_button"
-      data-track-label="right_sidebar"
-      data-track-property="reviewer"
-      data-testid="reviewers-edit-button"
-    >
-      {{ __('Edit') }}
-    </a>
+    <template v-if="editable">
+      <gl-button
+        v-if="glFeatures.reviewerAssignDrawer"
+        v-tooltip.hover
+        :title="__('Add or edit reviewers')"
+        category="tertiary"
+        size="small"
+        class="gl-float-right gl-ml-2"
+        data-testid="drawer-toggle"
+        @click="toggleDrawerOpen"
+      >
+        {{ __('Edit') }}
+      </gl-button>
+      <gl-button
+        v-tooltip.hover
+        :title="__('Quick assign')"
+        class="js-sidebar-dropdown-toggle edit-link gl-ml-auto hide-collapsed gl-float-right"
+        data-track-action="click_edit_button"
+        data-track-label="right_sidebar"
+        data-track-property="reviewer"
+        data-testid="reviewers-edit-button"
+        category="tertiary"
+        size="small"
+        :icon="glFeatures.reviewerAssignDrawer ? 'plus' : ''"
+        ><template v-if="!glFeatures.reviewerAssignDrawer">{{ __('Edit') }}</template></gl-button
+      >
+    </template>
+    <mounting-portal v-if="glFeatures.reviewerAssignDrawer" mount-to="#js-reviewer-drawer-portal">
+      <reviewer-drawer :open="drawerOpen" @close="toggleDrawerOpen(false)" />
+    </mounting-portal>
   </div>
 </template>

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -25,10 +25,10 @@ export default {
       required: false,
       default: false,
     },
-    projectEmailsDisabled: {
+    projectEmailsEnabled: {
       type: Boolean,
       required: false,
-      default: false,
+      default: true,
     },
     subscribeDisabledDescription: {
       type: String,
@@ -57,19 +57,19 @@ export default {
       return this.subscribed === null;
     },
     notificationIcon() {
-      if (this.projectEmailsDisabled) {
+      if (!this.projectEmailsEnabled) {
         return ICON_OFF;
       }
       return this.subscribed ? ICON_ON : ICON_OFF;
     },
     notificationTooltip() {
-      if (this.projectEmailsDisabled) {
+      if (!this.projectEmailsEnabled) {
         return this.subscribeDisabledDescription;
       }
       return this.subscribed ? LABEL_ON : LABEL_OFF;
     },
     notificationText() {
-      if (this.projectEmailsDisabled) {
+      if (!this.projectEmailsEnabled) {
         return this.subscribeDisabledDescription;
       }
       return __('Notifications');
@@ -118,7 +118,7 @@ export default {
     </span>
     <span class="hide-collapsed" data-testid="subscription-title"> {{ notificationText }} </span>
     <gl-toggle
-      v-if="!projectEmailsDisabled"
+      v-if="projectEmailsEnabled"
       :is-loading="showLoadingState"
       :value="subscribed"
       class="hide-collapsed"

app/assets/javascripts/sidebar/stores/sidebar_store.js

@@ -31,7 +31,7 @@ export default class SidebarStore {
     this.moveToProjectId = 0;
     this.isLockDialogOpen = false;
     this.participants = [];
-    this.projectEmailsDisabled = false;
+    this.projectEmailsEnabled = true;
     this.subscribeDisabledDescription = '';
     this.subscribed = null;
     this.changing = false;

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -4,7 +4,6 @@ import {
   GlSprintf,
   GlModal,
   GlAlert,
-  GlLoadingIcon,
   GlDisclosureDropdown,
   GlDisclosureDropdownGroup,
   GlDisclosureDropdownItem,
@@ -40,7 +39,6 @@ export default {
     GlSprintf,
     GlModal,
     GlAlert,
-    GlLoadingIcon,
     GlDisclosureDropdown,
     GlDisclosureDropdownGroup,
     GlDisclosureDropdownItem,
@@ -347,7 +345,6 @@ export default {
       </div>
 
       <gl-modal
-        ref="deleteModal"
         v-model="isDeleteModalVisible"
         modal-id="delete-modal"
         :title="__('Delete snippet modal')"
@@ -374,11 +371,10 @@ export default {
           <gl-button
             variant="danger"
             category="primary"
-            :disabled="isLoading"
+            :loading="isLoading"
             data-testid="delete-snippet-button"
             @click="deleteSnippet"
           >
-            <gl-loading-icon v-if="isLoading" size="sm" inline />
             {{ __('Delete snippet') }}
           </gl-button>
         </template>

app/assets/javascripts/super_sidebar/components/nav_item.vue

@@ -261,7 +261,7 @@ export default {
           />
         </slot>
       </div>
-      <div class="gl-flex-grow-1 gl-text-gray-900 gl-truncate-end">
+      <div class="gl-flex-grow-1 gl-text-gray-900" :class="{ 'gl-w-max-content': isFlyout }">
         {{ item.title }}
         <div v-if="item.subtitle" class="gl-font-sm gl-text-gray-500 gl-truncate-end">
           {{ item.subtitle }}
@@ -290,7 +290,7 @@ export default {
         v-gl-tooltip.noninteractive.right.viewport="$options.i18n.unpinItem"
         :aria-label="unpinAriaLabel"
         category="tertiary"
-        class="show-on-focus-or-hover--target transition-opacity-on-hover--target always-animate gl-absolute gl-right-3 gl-top-2"
+        class="show-on-focus-or-hover--target transition-opacity-on-hover--target always-animate gl-absolute gl-right-3 gl-translate-y-n50 gl-top-1/2"
         :class="{ 'gl-pointer-events-none': !canClickPinButton }"
         data-testid="nav-item-unpin"
         icon="thumbtack-solid"
@@ -303,7 +303,7 @@ export default {
         v-gl-tooltip.noninteractive.right.viewport="$options.i18n.pinItem"
         :aria-label="pinAriaLabel"
         category="tertiary"
-        class="show-on-focus-or-hover--target transition-opacity-on-hover--target always-animate gl-absolute gl-right-3 gl-top-2"
+        class="show-on-focus-or-hover--target transition-opacity-on-hover--target always-animate gl-absolute gl-right-3 gl-translate-y-n50 gl-top-1/2"
         :class="{ 'gl-pointer-events-none': !canClickPinButton }"
         data-testid="nav-item-pin"
         icon="thumbtack"