Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

app/assets/javascripts/ci/runner/components/runner_list_header.vue

@@ -9,7 +9,7 @@ export default {
 };
 </script>
 <template>
-  <page-heading>
+  <page-heading class="gl-mb-0">
     <template #heading>
       <slot name="title"></slot>
     </template>

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -1110,7 +1110,10 @@ export default {
           name="project[project_setting_attributes][duo_features_enabled]"
           data-testid="duo_features_enabled_toggle"
         />
-        <div class="project-feature-setting-group gl-flex gl-flex-col gl-gap-5 gl-pl-5 md:gl-pl-7">
+        <div
+          v-if="amazonQAvailable"
+          class="project-feature-setting-group gl-flex gl-flex-col gl-gap-5 gl-pl-5 md:gl-pl-7"
+        >
           <project-setting-row
             :label="s__('AI|Enable Auto Review')"
             class="gl-mt-5"

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

@@ -282,6 +282,7 @@ export default {
       v-if="glFeatures.filterBlobPath"
       :project-path="projectPath"
       :blob-path="filePath"
+      class="!gl-ml-auto"
     />
     <gl-button
       v-gl-tooltip.html="findFileTooltip"
@@ -324,7 +325,7 @@ export default {
     <web-ide-link
       v-if="glFeatures.blobOverflowMenu && showWebIdeLink"
       :show-edit-button="!isBinaryFileType"
-      class="!gl-ml-auto gl-mr-0"
+      class="!gl-m-0"
       :edit-url="blobInfo.editBlobPath"
       :web-ide-url="blobInfo.ideEditPath"
       :needs-to-fork="shouldShowSingleFileEditorForkSuggestion"

app/assets/javascripts/repository/components/header_area/merge_request_list_item.vue

@@ -1,13 +1,16 @@
 <script>
-import { GlBadge, GlIcon } from '@gitlab/ui';
+import { GlIcon, GlAvatar, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
 import { getTimeago } from '~/lib/utils/datetime/timeago_utility';
+import { n__ } from '~/locale';
 
 export default {
   name: 'MergeRequestListItem',
   components: {
-    GlBadge,
     GlIcon,
+    GlAvatar,
+    GlAvatarsInline,
   },
+  directives: { GlTooltip: GlTooltipDirective },
   props: {
     mergeRequest: {
       type: Object,
@@ -18,40 +21,53 @@ export default {
     formattedTime() {
       return getTimeago().format(this.mergeRequest.createdAt);
     },
-    mrMetaInfo() {
-      return `${this.mergeRequest.project.fullPath} !${this.mergeRequest.iid}`;
+    assignees() {
+      const assignees = this.mergeRequest.assignees?.nodes;
+      return assignees.length ? assignees : [this.mergeRequest.author];
+    },
+    assigneesBadgeSrOnlyText() {
+      return n__(
+        '%d additional assignee',
+        '%d additional assignees',
+        this.assignees.length - this.$options.MAX_VISIBLE_ASSIGNEES,
+      );
     },
   },
+  MAX_VISIBLE_ASSIGNEES: 3,
 };
 </script>
 
 <template>
-  <div class="gl-flex gl-flex-col gl-gap-1 gl-p-2">
-    <div class="gl-flex gl-items-center gl-justify-between">
-      <div class="gl-inline-flex gl-items-center gl-gap-2">
-        <gl-badge class="gl-mr-2" variant="success">
-          <gl-icon name="merge-request" />
-          {{ s__('OpenMrBadge|Open') }}
-        </gl-badge>
-        <span class="gl-text-subtle">
+  <div class="gl-flex">
+    <div class="gl-flex">
+      <gl-icon name="merge-request" class="gl-mr-3 gl-flex-shrink-0" />
+      <div class="gl-flex-grow">
+        <div class="gl-mb-1 gl-mr-2 gl-line-clamp-2">
+          {{ mergeRequest.title }}
+        </div>
+        <span class="gl-text-sm gl-text-secondary">
           {{ s__('OpenMrBadge|Opened') }} <time v-text="formattedTime"></time
         ></span>
       </div>
     </div>
-    <h5 class="my-2">{{ mergeRequest.title }}</h5>
-    <div class="gl-flex gl-flex-col gl-gap-1 gl-text-subtle" data-testid="project-info">
-      <div class="gl-flex gl-gap-1"><gl-icon name="project" />{{ mrMetaInfo }}</div>
-      <div
-        v-for="assignee in mergeRequest.assignees.nodes"
-        :key="assignee.id"
-        class="gl-flex gl-gap-1"
-        data-testid="assignee-info"
+    <div class="gl-ml-auto">
+      <gl-avatars-inline
+        :avatars="assignees"
+        :collapsed="true"
+        :avatar-size="24"
+        :max-visible="$options.MAX_VISIBLE_ASSIGNEES"
+        :badge-sr-only-text="assigneesBadgeSrOnlyText"
       >
-        <gl-icon name="user" />{{ assignee.name }}
-      </div>
-      <div class="gl-flex gl-gap-1" data-testid="source-branch-info">
-        <gl-icon name="branch" />{{ mergeRequest.sourceBranch }}
-      </div>
+        <template #avatar="{ avatar }">
+          <gl-avatar
+            v-gl-tooltip
+            :size="24"
+            :src="avatar.avatarUrl"
+            :alt="avatar.name"
+            :title="avatar.name"
+          />
+        </template>
+      </gl-avatars-inline>
     </div>
   </div>
 </template>

app/assets/javascripts/repository/components/header_area/open_mr_badge.vue

@@ -1,6 +1,13 @@
 <script>
-import { GlBadge, GlPopover, GlSkeletonLoader } from '@gitlab/ui';
+import {
+  GlBadge,
+  GlDisclosureDropdown,
+  GlDisclosureDropdownItem,
+  GlSkeletonLoader,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
+import { visitUrl } from '~/lib/utils/url_utility';
 import getOpenMrCountForBlobPath from '~/repository/queries/open_mr_count.query.graphql';
 import getOpenMrsForBlobPath from '~/repository/queries/open_mrs.query.graphql';
 import { nDaysBefore } from '~/lib/utils/datetime/date_calculation_utility';
@@ -14,10 +21,12 @@ const OPEN_MR_AGE_LIMIT_DAYS = 30;
 export default {
   components: {
     GlBadge,
-    GlPopover,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
     GlSkeletonLoader,
     MergeRequestListItem,
   },
+  directives: { GlTooltip: GlTooltipDirective },
   inject: ['currentRef'],
   props: {
     projectPath: {
@@ -33,12 +42,17 @@ export default {
     return {
       openMrsCount: null,
       openMrs: [],
-      isPopoverOpen: false,
+      isDropdownOpen: false,
     };
   },
   computed: {
+    badgeTitle() {
+      return s__(
+        'OpenMrBadge|Open merge requests created in the past 30 days that target this branch and modify this file.',
+      );
+    },
     openMRsCountText() {
-      return sprintf(s__('OpenMrBadge|%{count} open'), { count: this.openMrsCount });
+      return sprintf(s__('OpenMrBadge|%{count} Open'), { count: this.openMrsCount });
     },
     createdAfter() {
       const lookbackDate = nDaysBefore(new Date(), OPEN_MR_AGE_LIMIT_DAYS - 1, { utc: true });
@@ -82,7 +96,7 @@ export default {
         return this.queryVariables;
       },
       skip() {
-        return !this.isPopoverOpen;
+        return !this.isDropdownOpen;
       },
       update: (data) => data?.project?.mergeRequests?.nodes || [],
       error(error) {
@@ -94,34 +108,62 @@ export default {
       },
     },
   },
+  methods: {
+    handleMergeRequestClick(webUrl) {
+      visitUrl(webUrl);
+    },
+  },
 };
 </script>
 
 <template>
-  <div id="open-mr-badge">
-    <gl-badge v-if="showBadge" variant="success" icon="merge-request">
-      {{ openMRsCountText }}
-    </gl-badge>
-    <gl-popover
-      target="open-mr-badge"
-      boundary="viewport"
-      placement="bottomleft"
-      @show.once="isPopoverOpen = true"
-      @hide.once="isPopoverOpen = false"
-    >
-      <gl-skeleton-loader v-if="!openMrs.length || isLoading" :height="15">
+  <gl-disclosure-dropdown
+    v-if="showBadge"
+    :aria-label="openMRsCountText"
+    :fluid-width="true"
+    :loading="isLoading"
+    placement="bottom-end"
+    @shown="isDropdownOpen = true"
+    @hidden="isDropdownOpen = false"
+  >
+    <template #toggle>
+      <button class="gl-rounded-pill gl-border-none gl-bg-transparent gl-p-0 gl-leading-0">
+        <gl-badge
+          v-gl-tooltip
+          data-testid="open-mr-badge"
+          variant="success"
+          icon="merge-request"
+          class="gl-h-full"
+          :title="badgeTitle"
+          :aria-label="badgeTitle"
+        >
+          {{ openMRsCountText }}
+        </gl-badge>
+      </button>
+    </template>
+
+    <template #header>
+      <div class="gl-border-b-1 gl-border-gray-100 gl-p-4 gl-font-bold gl-border-b-solid">
+        {{ s__('OpenMrBadge|Open merge requests') }}
+        <gl-badge>{{ openMrsCount }}</gl-badge>
+      </div>
+    </template>
+
+    <div v-if="!openMrs.length || isLoading" class="gl-w-34 gl-px-5 gl-py-3 md:gl-w-48">
+      <gl-skeleton-loader :height="15">
         <rect width="250" height="15" rx="4" />
       </gl-skeleton-loader>
-      <ul v-else class="flex-column gl-m-0 gl-flex gl-list-none gl-gap-4 gl-p-0">
-        <li
-          v-for="(mergeRequest, index) in openMrs"
-          :key="mergeRequest.iid"
-          class="gl-p-0"
-          :class="{ 'gl-border-t gl-pt-4': index !== 0 }"
-        >
+    </div>
+    <ul v-else class="gl-m-0 gl-w-34 gl-p-0 md:gl-w-48">
+      <gl-disclosure-dropdown-item
+        v-for="mergeRequest in openMrs"
+        :key="mergeRequest.iid"
+        @action="handleMergeRequestClick(mergeRequest.webUrl)"
+      >
+        <template #list-item>
           <merge-request-list-item :merge-request="mergeRequest" />
-        </li>
-      </ul>
-    </gl-popover>
-  </div>
+        </template>
+      </gl-disclosure-dropdown-item>
+    </ul>
+  </gl-disclosure-dropdown>
 </template>

app/assets/javascripts/repository/queries/open_mrs.query.graphql

@@ -18,7 +18,11 @@ query getOpenMrsForBlobPath(
         id
         iid
         title
+        webUrl
         createdAt
+        author {
+          ...User
+        }
         assignees {
           nodes {
             ...User

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue

@@ -63,20 +63,20 @@ export default {
     actions() {
       const actions = [];
 
-      if (this.mr.canRevertInCurrentMR) {
+      if (this.mr.revertInForkPath) {
         actions.push({
           text: this.revertLabel,
           tooltipText: this.revertTitle,
+          href: this.mr.revertInForkPath,
           testId: 'revert-button',
-          onClick: () => this.openRevertModal(),
+          dataMethod: 'post',
         });
-      } else if (this.mr.revertInForkPath) {
+      } else {
         actions.push({
           text: this.revertLabel,
           tooltipText: this.revertTitle,
-          href: this.mr.revertInForkPath,
           testId: 'revert-button',
-          dataMethod: 'post',
+          onClick: () => this.openRevertModal(),
         });
       }
 

app/assets/javascripts/vue_shared/components/page_heading.vue

@@ -16,31 +16,29 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="gl-my-5 gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-y-3">
+  <div class="gl-my-5 gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-y-3">
+    <div
+      class="gl-flex gl-w-full gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-3 md:gl-flex-nowrap"
+    >
+      <h1 class="gl-heading-1 !gl-m-0" data-testid="page-heading">
+        <slot name="heading"></slot>
+        <template v-if="!$scopedSlots.heading">{{ heading }}</template>
+      </h1>
       <div
-        class="gl-flex gl-w-full gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-3 md:gl-flex-nowrap"
+        v-if="$scopedSlots.actions"
+        class="page-heading-actions gl-flex gl-shrink-0 gl-flex-wrap gl-items-center gl-gap-3 md:gl-mt-1 lg:gl-mt-2"
+        :class="{ 'gl-w-full sm:gl-w-auto': !inlineActions, 'gl-w-auto': inlineActions }"
+        data-testid="page-heading-actions"
       >
-        <h1 class="gl-heading-1 !gl-m-0" data-testid="page-heading">
-          <slot name="heading"></slot>
-          <template v-if="!$scopedSlots.heading">{{ heading }}</template>
-        </h1>
-        <div
-          v-if="$scopedSlots.actions"
-          class="page-heading-actions gl-flex gl-shrink-0 gl-flex-wrap gl-items-center gl-gap-3 md:gl-mt-1 lg:gl-mt-2"
-          :class="{ 'gl-w-full sm:gl-w-auto': !inlineActions, 'gl-w-auto': inlineActions }"
-          data-testid="page-heading-actions"
-        >
-          <slot name="actions"></slot>
-        </div>
-      </div>
-      <div
-        v-if="$scopedSlots.description"
-        class="gl-w-full gl-text-subtle"
-        data-testid="page-heading-description"
-      >
-        <slot name="description"></slot>
+        <slot name="actions"></slot>
       </div>
     </div>
+    <div
+      v-if="$scopedSlots.description"
+      class="gl-w-full gl-text-subtle"
+      data-testid="page-heading-description"
+    >
+      <slot name="description"></slot>
+    </div>
   </div>
 </template>

app/controllers/concerns/creates_commit.rb

@@ -42,7 +42,8 @@ def create_commit(service, success_path:, failure_path:, failure_view: nil, succ
         format.json { render json: { message: _("success"), filePath: success_path } }
       end
     else
-      flash[:alert] = format_flash_notice(result[:message])
+      flash[:alert] = flash_message(result, @project, @branch_name, @commit_params)
+
       failure_path = failure_path.call if failure_path.respond_to?(:call)
 
       respond_to do |format|
@@ -77,6 +78,21 @@ def format_flash_notice(message)
 
   private
 
+  def flash_message(result, project, branch_name, commit_params)
+    if result[:status] == :error && commit_params[:revert]
+      {
+        message: format_flash_notice(result[:message]),
+        button_text: _('Create merge request'),
+        button_path: project_new_merge_request_path(
+          project,
+          merge_request: { source_branch: branch_name }
+        )
+      }
+    else
+      format_flash_notice(result[:message])
+    end
+  end
+
   def update_flash_notice(success_notice, success_path)
     changes_link = ActionController::Base.helpers.link_to _('changes'), success_path, class: 'gl-link'