From 0993c722a7ae1a56ce1e9f81c025fd65f9c07349 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 14 Nov 2023 13:02:55 +0100
Subject: [PATCH] Project/group name area updates

Uses H display instead of h1, moves copy ID and project leave
items into a kebab menu.

Changelog: changed
---
 .../components/more_actions_dropdown.vue      | 154 ++++++++++++++++
 .../init_more_actions_dropdown.js             |  36 ++++
 .../javascripts/pages/groups/show/index.js    |   4 +-
 .../javascripts/pages/projects/show/index.js  |   5 +-
 .../components/commit_pipeline_status.vue     |   2 +-
 .../repository/components/last_commit.vue     |   2 +-
 .../stylesheets/framework/variables.scss      |   2 +-
 .../stylesheets/page_bundles/group.scss       |  31 +---
 .../stylesheets/page_bundles/project.scss     |  24 +--
 .../stylesheets/page_bundles/projects.scss    |  12 --
 app/assets/stylesheets/page_bundles/tree.scss |   4 -
 app/helpers/groups_helper.rb                  |  25 +++
 app/views/groups/_home_panel.html.haml        |  24 +--
 app/views/projects/_files.html.haml           |   2 +-
 app/views/projects/_home_panel.html.haml      |  23 +--
 .../projects/_stat_anchor_list.html.haml      |   3 +-
 app/views/projects/blob/_breadcrumb.html.haml |   2 +-
 app/views/projects/empty.html.haml            |   8 +-
 app/views/projects/show.html.haml             |   2 +-
 .../projects/tree/_tree_header.html.haml      |   4 +-
 ...s_projects_more_actions_dropdown.html.haml |  16 ++
 .../members/_access_request_links.html.haml   |  18 --
 .../groups/members/leave_group_spec.rb        |  19 +-
 .../namespace_user_cap_reached_alert_spec.rb  |   1 -
 .../members/member_leaves_project_spec.rb     |   9 +-
 locale/gitlab.pot                             |  14 +-
 qa/qa/page/group/show.rb                      |  16 +-
 qa/qa/page/project/show.rb                    |   1 -
 .../groups/members/leave_group_spec.rb        |  18 +-
 .../groups/members/request_access_spec.rb     |  42 ++++-
 ...r_cannot_request_access_to_project_spec.rb |   9 +-
 .../members/member_leaves_project_spec.rb     |   7 +-
 .../members/user_requests_access_spec.rb      |  25 ++-
 .../components/more_actions_dropdown_spec.js  | 173 ++++++++++++++++++
 .../groups/_home_panel.html.haml_spec.rb      |   6 -
 .../projects/_home_panel.html.haml_spec.rb    |  32 ----
 36 files changed, 560 insertions(+), 215 deletions(-)
 create mode 100644 app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue
 create mode 100644 app/assets/javascripts/groups_projects/init_more_actions_dropdown.js
 create mode 100644 app/views/shared/_groups_projects_more_actions_dropdown.html.haml
 delete mode 100644 app/views/shared/members/_access_request_links.html.haml
 create mode 100644 spec/frontend/groups_projects/components/more_actions_dropdown_spec.js

diff --git a/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue b/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue
new file mode 100644
index 00000000000000..50392de0b67d8c
--- /dev/null
+++ b/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue
@@ -0,0 +1,154 @@
+<script>
+import {
+  GlButton,
+  GlDisclosureDropdownItem,
+  GlDisclosureDropdown,
+  GlIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
+import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
+
+export default {
+  components: {
+    GlButton,
+    GlDisclosureDropdownItem,
+    GlDisclosureDropdown,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: [
+    'isGroup',
+    'id',
+    'leavePath',
+    'leaveConfirmMessage',
+    'withdrawPath',
+    'withdrawConfirmMessage',
+    'requestAccessPath',
+  ],
+  computed: {
+    namespaceType() {
+      return this.isGroup ? WORKSPACE_GROUP : WORKSPACE_PROJECT;
+    },
+    leaveTitle() {
+      return this.isGroup
+        ? this.$options.i18n.groupLeaveTitle
+        : this.$options.i18n.projectLeaveTitle;
+    },
+    copyTitle() {
+      return this.isGroup ? this.$options.i18n.groupCopyTitle : this.$options.i18n.projectCopyTitle;
+    },
+    copiedToClipboard() {
+      return this.isGroup
+        ? this.$options.i18n.groupCopiedToClipboard
+        : this.$options.i18n.projectCopiedToClipboard;
+    },
+    leaveItem() {
+      return {
+        text: this.leaveTitle,
+        href: this.leavePath,
+        extraAttrs: {
+          'aria-label': this.leaveTitle,
+          'data-method': 'delete',
+          'data-confirm': this.leaveConfirmMessage,
+          'data-confirm-btn-variant': 'danger',
+          'data-testid': `leave-${this.namespaceType}-link`,
+          rel: 'nofollow',
+          class: 'gl-text-red-500! js-leave-link',
+        },
+      };
+    },
+    withdrawItem() {
+      return {
+        text: this.$options.i18n.withdrawAccessTitle,
+        href: this.withdrawPath,
+        extraAttrs: {
+          'data-method': 'delete',
+          'data-confirm': this.withdrawConfirmMessage,
+          'data-testid': 'withdraw-access-link',
+          rel: 'nofollow',
+        },
+      };
+    },
+    requestAccessItem() {
+      return {
+        text: this.$options.i18n.requestAccessTitle,
+        href: this.requestAccessPath,
+        extraAttrs: {
+          'data-method': 'post',
+          'data-testid': 'request-access-link',
+          rel: 'nofollow',
+        },
+      };
+    },
+    copyIdItem() {
+      return {
+        text: sprintf(this.copyTitle, { id: this.id }),
+        action: () => {
+          this.$toast.show(this.copiedToClipboard);
+        },
+        extraAttrs: {
+          'data-testid': `copy-${this.namespaceType}-id`,
+        },
+      };
+    },
+  },
+  i18n: {
+    actionsLabel: __('Actions'),
+    groupCopiedToClipboard: s__('GroupPage|Group ID copied to clipboard.'),
+    projectCopiedToClipboard: s__('ProjectPage|Project ID copied to clipboard.'),
+    groupLeaveTitle: __('Leave group'),
+    projectLeaveTitle: __('Leave project'),
+    withdrawAccessTitle: __('Withdraw Access Request'),
+    requestAccessTitle: __('Request Access'),
+    groupCopyTitle: s__('GroupPage|Copy group ID: %{id}'),
+    projectCopyTitle: s__('ProjectPage|Copy project ID: %{id}'),
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown
+    v-gl-tooltip.hover="$options.i18n.actionsLabel"
+    category="tertiary"
+    icon="ellipsis_v"
+    no-caret
+    :toggle-text="$options.i18n.actionsLabel"
+    text-sr-only
+    data-testid="groups-projects-more-actions-dropdown"
+    class="gl-relative gl-w-full gl-sm-w-auto"
+  >
+    <template #toggle>
+      <div class="gl-min-h-7">
+        <gl-button
+          class="gl-md-display-none! gl-new-dropdown-toggle gl-absolute gl-top-0 gl-left-0 gl-w-full"
+          button-text-classes="gl-w-full"
+          category="secondary"
+          :aria-label="$options.i18n.actionsLabel"
+          :title="$options.i18n.actionsLabel"
+        >
+          <span class="gl-new-dropdown-button-text">{{ $options.i18n.actionsLabel }}</span>
+          <gl-icon class="dropdown-chevron" name="chevron-down" />
+        </gl-button>
+        <gl-button
+          ref="moreActionsDropdown"
+          class="gl-display-none gl-md-display-flex! gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret"
+          category="tertiary"
+          icon="ellipsis_v"
+          :aria-label="$options.i18n.actionsLabel"
+          :title="$options.i18n.actionsLabel"
+        />
+      </div>
+    </template>
+
+    <gl-disclosure-dropdown-item v-if="leavePath" ref="leaveItem" :item="leaveItem" />
+
+    <gl-disclosure-dropdown-item v-else-if="withdrawPath" :item="withdrawItem" />
+
+    <gl-disclosure-dropdown-item v-else-if="requestAccessPath" :item="requestAccessItem" />
+
+    <gl-disclosure-dropdown-item v-if="id" :item="copyIdItem" :data-clipboard-text="id" />
+  </gl-disclosure-dropdown>
+</template>
diff --git a/app/assets/javascripts/groups_projects/init_more_actions_dropdown.js b/app/assets/javascripts/groups_projects/init_more_actions_dropdown.js
new file mode 100644
index 00000000000000..5d83f9ed3b2e78
--- /dev/null
+++ b/app/assets/javascripts/groups_projects/init_more_actions_dropdown.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import MoreActionsDropdown from '~/groups_projects/components/more_actions_dropdown.vue';
+
+export default function InitMoreActionsDropdown() {
+  const el = document.querySelector('.js-groups-projects-more-actions-dropdown');
+
+  if (!el) {
+    return false;
+  }
+
+  const {
+    isGroup,
+    id,
+    leavePath,
+    leaveConfirmMessage,
+    withdrawPath,
+    withdrawConfirmMessage,
+    requestAccessPath,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    name: 'MoreActionsDropdownRoot',
+    provide: {
+      isGroup: parseBoolean(isGroup),
+      id,
+      leavePath,
+      leaveConfirmMessage,
+      withdrawPath,
+      withdrawConfirmMessage,
+      requestAccessPath,
+    },
+    render: (createElement) => createElement(MoreActionsDropdown),
+  });
+}
diff --git a/app/assets/javascripts/pages/groups/show/index.js b/app/assets/javascripts/pages/groups/show/index.js
index f6a4ca0f360e2e..1c6c3c0c518eb9 100644
--- a/app/assets/javascripts/pages/groups/show/index.js
+++ b/app/assets/javascripts/pages/groups/show/index.js
@@ -2,10 +2,12 @@ import leaveByUrl from '~/namespaces/leave_by_url';
 import { initGroupOverviewTabs } from '~/groups/init_overview_tabs';
 import { initGroupReadme } from '~/groups/init_group_readme';
 import initReadMore from '~/read_more';
+import InitMoreActionsDropdown from '~/groups_projects/init_more_actions_dropdown';
 import initGroupDetails from '../shared/group_details';
 
-leaveByUrl('group');
 initGroupDetails();
 initGroupOverviewTabs();
 initReadMore();
 initGroupReadme();
+InitMoreActionsDropdown();
+leaveByUrl('group');
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 98c58515d24887..af7616c6f6f84e 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -8,6 +8,7 @@ import { initUploadFileTrigger } from '~/projects/upload_file';
 import initReadMore from '~/read_more';
 import initForksButton from '~/forks/init_forks_button';
 import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
+import InitMoreActionsDropdown from '~/groups_projects/init_more_actions_dropdown';
 
 // Project show page loads different overview content based on user preferences
 if (document.getElementById('js-tree-list')) {
@@ -34,8 +35,6 @@ if (document.querySelector('.project-show-activity')) {
     .catch(() => {});
 }
 
-leaveByUrl('project');
-
 initVueNotificationsDropdown();
 
 new ShortcutsNavigation(); // eslint-disable-line no-new
@@ -61,3 +60,5 @@ if (document.querySelector('.js-autodevops-banner')) {
 }
 
 initForksButton();
+InitMoreActionsDropdown();
+leaveByUrl('project');
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
index 074cddac42221e..ff96fa99683473 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
@@ -92,7 +92,7 @@ export default {
 </script>
 <template>
   <div class="gl-ml-5">
-    <gl-loading-icon v-if="isLoading" size="lg" label="Loading pipeline status" />
+    <gl-loading-icon v-if="isLoading" size="sm" label="Loading pipeline status" />
     <a v-else :href="ciStatus.details_path">
       <ci-icon :status="ciStatus" :title="statusTitle" :aria-label="statusTitle" />
     </a>
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 7f7a76cd4aa462..624bc7c9755dfc 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -106,7 +106,7 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" size="lg" color="dark" class="m-auto" />
+  <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" />
   <commit-info v-else-if="commit" :commit="commit">
     <div
       class="commit-actions gl-display-flex gl-flex-align gl-align-items-center gl-flex-direction-row"
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 51b454d3444be2..bcb48d69b6b4e7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -226,7 +226,7 @@ $system-footer-height: $system-header-height;
 $mr-sticky-header-height: 72px;
 $mr-review-bar-height: calc(2rem + 16px);
 $top-bar-height: 48px;
-$home-panel-title-row-height: 64px;
+$home-panel-title-row-height: 48px;
 $home-panel-avatar-mobile-size: 24px;
 $issuable-title-max-width: 350px;
 $milestone-title-max-width: 75px;
diff --git a/app/assets/stylesheets/page_bundles/group.scss b/app/assets/stylesheets/page_bundles/group.scss
index 5086cdbf9bc533..ae49993d3df885 100644
--- a/app/assets/stylesheets/page_bundles/group.scss
+++ b/app/assets/stylesheets/page_bundles/group.scss
@@ -2,41 +2,12 @@
 
 .group-home-panel {
   .home-panel-avatar {
-    width: $home-panel-title-row-height;
-    height: $home-panel-title-row-height;
     flex-basis: $home-panel-title-row-height;
   }
 
   .home-panel-title {
     .icon {
-      vertical-align: -1px;
-    }
-  }
-
-  .home-panel-title-row {
-    @include media-breakpoint-down(sm) {
-      .home-panel-avatar {
-        width: $home-panel-avatar-mobile-size;
-        height: $home-panel-avatar-mobile-size;
-        flex-basis: $home-panel-avatar-mobile-size;
-
-        .avatar {
-          font-size: 20px;
-          line-height: 46px;
-        }
-      }
-
-      .home-panel-title {
-        margin-top: 4px;
-        margin-bottom: 2px;
-        font-size: $gl-font-size;
-        line-height: $gl-font-size-large;
-      }
-
-
-      .home-panel-metadata {
-        font-size: $gl-font-size-small;
-      }
+      vertical-align: 1px;
     }
   }
 
diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss
index b3477b5d4c5777..c0fbd7f5d8448f 100644
--- a/app/assets/stylesheets/page_bundles/project.scss
+++ b/app/assets/stylesheets/page_bundles/project.scss
@@ -7,7 +7,7 @@
 
   .home-panel-title {
     .icon {
-      vertical-align: -1px;
+      vertical-align: 1px;
     }
 
     .home-panel-topic-list {
@@ -17,28 +17,6 @@
     }
   }
 
-  .home-panel-title-row {
-    @include media-breakpoint-down(sm) {
-      .home-panel-avatar {
-        width: $home-panel-avatar-mobile-size;
-        height: $home-panel-avatar-mobile-size;
-        flex-basis: $home-panel-avatar-mobile-size;
-
-        .avatar {
-          font-size: 20px;
-          line-height: 46px;
-        }
-      }
-
-      .home-panel-title {
-        margin-top: 4px;
-        margin-bottom: 2px;
-        font-size: $gl-font-size;
-        line-height: $gl-font-size-large;
-      }
-    }
-  }
-
   .home-panel-description {
     @include media-breakpoint-up(md) {
       font-size: $gl-font-size-large;
diff --git a/app/assets/stylesheets/page_bundles/projects.scss b/app/assets/stylesheets/page_bundles/projects.scss
index 1afc456a16a41f..bfa350097fabab 100644
--- a/app/assets/stylesheets/page_bundles/projects.scss
+++ b/app/assets/stylesheets/page_bundles/projects.scss
@@ -405,18 +405,6 @@
     }
   }
 
-  @include media-breakpoint-down(md) {
-    .avatar-container {
-      @include avatar-size(40px, 10px);
-      min-height: 40px;
-      min-width: 40px;
-
-      .identicon.s64 {
-        font-size: 16px;
-      }
-    }
-  }
-
   @include media-breakpoint-down(md) {
     .updated-note {
       @include gl-mt-3;
diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss
index 66d828ed87d9e9..5266849bb30f07 100644
--- a/app/assets/stylesheets/page_bundles/tree.scss
+++ b/app/assets/stylesheets/page_bundles/tree.scss
@@ -78,10 +78,6 @@
       .btn-group {
         width: 100%;
       }
-
-      .btn {
-        margin-top: 10px;
-      }
     }
   }
 
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index 21d0e7856f8269..17b14caff65608 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -218,6 +218,31 @@ def access_level_roles_user_can_assign(group)
     GroupMember.access_level_roles.select { |_k, v| v <= max_access_level }
   end
 
+  def groups_projects_more_actions_dropdown_data(source)
+    model_name = source.model_name.to_s.downcase
+    dropdown_data = {
+      is_group: source.is_a?(Group).to_s,
+      id: source.id
+    }
+
+    return dropdown_data unless current_user
+
+    if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id)) # rubocop: disable CodeReuse/ActiveRecord -- we need to fetch it
+      dropdown_data[:leave_path] = polymorphic_path([:leave, source, :members])
+      dropdown_data[:leave_confirm_message] = leave_confirmation_message(source)
+    elsif source.requesters.find_by(user_id: current_user.id) # rubocop: disable CodeReuse/ActiveRecord -- we need to fetch it
+      requester = source.requesters.find_by(user_id: current_user.id) # rubocop: disable CodeReuse/ActiveRecord -- we need to fetch it
+      if can?(current_user, :withdraw_member_access_request, requester)
+        dropdown_data[:withdraw_path] = polymorphic_path([:leave, source, :members])
+        dropdown_data[:withdraw_confirm_message] = remove_member_message(requester)
+      end
+    elsif source.request_access_enabled && can?(current_user, :request_access, source)
+      dropdown_data[:request_access_path] = polymorphic_path([:request_access, source, :members])
+    end
+
+    dropdown_data
+  end
+
   private
 
   def group_title_link(group, hidable: false, show_avatar: false, for_dropdown: false)
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index ec70551d5410a7..e528ff2f8708b8 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -3,24 +3,16 @@
 - emails_disabled = @group.emails_disabled?
 
 .group-home-panel
-  .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-flex-direction-column.gl-md-flex-direction-row.gl-gap-3.gl-my-5
-    .home-panel-title-row.gl-display-flex.gl-align-items-center
-      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.float-none{ class: 'gl-mr-3!' }
-        = render Pajamas::AvatarComponent.new(@group, alt: @group.name, size: 64, avatar_options: { itemprop: 'logo' })
+  .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-md-flex-direction-row.gl-gap-3.gl-my-5
+    .home-panel-title-row.gl-display-flex
+      .avatar-container.rect-avatar.s48.home-panel-avatar.gl-flex-shrink-0.float-none{ class: 'gl-mr-3!' }
+        = render Pajamas::AvatarComponent.new(@group, alt: @group.name, size: 48, avatar_options: { itemprop: 'logo' })
       %div
-        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ itemprop: 'name' }
+        %h1.home-panel-title.gl-font-size-h-display.gl-mt-3.gl-mb-2.gl-ml-2.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-gap-3.gl-word-break-word{ itemprop: 'name' }
           = @group.name
-          %span.visibility-icon.gl-text-secondary.has-tooltip.gl-ml-2{ data: { container: 'body' }, title: visibility_icon_description(@group) }
-            = visibility_level_icon(@group.visibility_level, options: {class: 'icon'})
+          %span.visibility-icon.gl-text-secondary.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+            = visibility_level_icon(@group.visibility_level, options: { class: 'icon' })
           = render_if_exists 'shared/tier_badge', source: @group, namespace_to_track: @group
-        .home-panel-metadata.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'group_id_content' }, itemprop: 'identifier' }
-          - if can?(current_user, :read_group, @group)
-            %span.gl-display-inline-block.gl-vertical-align-middle
-              = s_("GroupPage|Group ID: %{group_id}") % { group_id: @group.id }
-              = clipboard_button(title: s_('GroupPage|Copy group ID'), text: @group.id)
-          - if current_user
-            %span.gl-ml-3.gl-mb-3
-              = render 'shared/members/access_request_links', source: @group
 
     - if current_user
       .home-panel-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-center.gl-flex-wrap.gl-gap-3{ data: { testid: 'group-buttons' } }
@@ -38,6 +30,8 @@
             = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), variant: :confirm, button_options: { data: { testid: 'new-project-button' }, class: 'gl-sm-w-auto gl-w-full' }) do
               = _('New project')
 
+        = render 'shared/groups_projects_more_actions_dropdown', source: @group
+
   - if @group.description.present?
     .group-home-desc.mt-1
       .home-panel-description
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index b958c8f8035a99..5c9448a30a447b 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -7,7 +7,7 @@
 - if readme_path = @project.repository.readme_path
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 
-#tree-holder.tree-holder.clearfix.js-per-page{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
+#tree-holder.tree-holder.clearfix.js-per-page.gl-mt-5{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
   - if Feature.enabled?(:project_overview_reorg)
     .nav-block.gl-display-flex.gl-flex-direction-column.gl-sm-flex-direction-row.gl-align-items-stretch
       = render 'projects/tree/tree_header', tree: @tree
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 7c4564cb80a5b1..ba590d523affc1 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -5,24 +5,18 @@
 %header.project-home-panel.js-show-on-project-root.gl-mt-5{ class: [("empty-project" if empty_repo)] }
   .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-flex-direction-column.gl-md-flex-direction-row.gl-gap-5
     .home-panel-title-row.gl-display-flex.gl-align-items-center
-      = render Pajamas::AvatarComponent.new(@project, alt: @project.name, class: 'gl-flex-shrink-0 gl-mr-3', size: 64, avatar_options: { itemprop: 'image' })
-      %div
-        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ data: { testid: 'project-name-content' }, itemprop: 'name' }
+      = render Pajamas::AvatarComponent.new(@project, alt: @project.name, class: 'gl-flex-shrink-0 gl-mr-3', size: 48, avatar_options: { itemprop: 'image' })
+      .gl-ml-2
+        %h1.home-panel-title.gl-font-size-h-display.gl-mt-3.gl-mb-2.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-gap-3.gl-word-break-word{ data: { testid: 'project-name-content' }, itemprop: 'name' }
           = @project.name
-          = visibility_level_content(@project, css_class: 'visibility-icon gl-text-secondary gl-mx-2', icon_css_class: 'icon')
-          = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project, additional_classes: 'gl-align-self-center gl-mx-2'
+          = visibility_level_content(@project, css_class: 'visibility-icon gl-text-secondary', icon_css_class: 'icon')
+          = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project, additional_classes: 'gl-align-self-center'
           - if @project.catalog_resource
-            = render partial: 'shared/ci_catalog_badge', locals: { href: explore_catalog_path(@project.catalog_resource), css_class: 'gl-mx-2' }
+            = render partial: 'shared/ci_catalog_badge', locals: { href: explore_catalog_path(@project.catalog_resource), css_class: 'gl-mx-0' }
           - if @project.group
             = render_if_exists 'shared/tier_badge', source: @project, namespace_to_track: @project.namespace
-        .home-panel-metadata.gl-font-sm.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { testid: 'project-id-content' }, itemprop: 'identifier' }
-          - if can?(current_user, :read_project, @project)
-            %span.gl-display-inline-block.gl-vertical-align-middle
-              = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
-              = clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id)
-          - if current_user
-            %span.gl-ml-3.gl-mb-3
-              = render 'shared/members/access_request_links', source: @project
+        .gl-text-secondary
+          = render_if_exists "projects/home_mirror"
 
     .project-repo-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-center.gl-flex-wrap.gl-gap-3
       - if current_user
@@ -33,6 +27,7 @@
 
       = render 'projects/buttons/star'
       = render 'projects/buttons/fork'
+      = render 'shared/groups_projects_more_actions_dropdown', source: @project
 
   - if ff_reorg_disabled
     - if can?(current_user, :read_code, @project)
diff --git a/app/views/projects/_stat_anchor_list.html.haml b/app/views/projects/_stat_anchor_list.html.haml
index 7f05a20261a9ae..2f8ae788c01cd7 100644
--- a/app/views/projects/_stat_anchor_list.html.haml
+++ b/app/views/projects/_stat_anchor_list.html.haml
@@ -1,5 +1,6 @@
 - anchors = local_assigns.fetch(:anchors, [])
 - project_buttons = local_assigns.fetch(:project_buttons, false)
+- ff_reorg_enabled = Feature.enabled?(:project_overview_reorg)
 
 - return unless anchors.any?
 
@@ -7,4 +8,4 @@
   - anchors.each do |anchor|
     %li.nav-item
       = link_to_if(anchor.link, anchor.label, anchor.link, stat_anchor_attrs(anchor)) do
-        .stat-text.d-flex.align-items-center{ class: ('btn gl-button btn-default gl-px-0! disabled' if project_buttons) }= anchor.label
+        .stat-text.d-flex.align-items-center{ class: "#{'btn gl-button btn-default disabled' if project_buttons} #{'gl-px-0! gl-pb-2!' if ff_reorg_enabled}" }= anchor.label
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index c140eecd8c154c..ddea80a3983d61 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -17,7 +17,7 @@
           - else
             = link_to title, project_tree_path(@project, tree_join(@ref, path), ref_type: @ref_type)
 
-  .tree-controls.gl-children-ml-sm-3<
+  .tree-controls.gl-display-flex.gl-flex-wrap.gl-sm-flex-nowrap.gl-align-items-baseline.gl-gap-3
     = render 'projects/find_file_link'
     -# only show normal/blame view links for text files
     - if blob.readable_text?
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index a260dd2bf286d3..684ea8242f7da6 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -17,10 +17,10 @@
   .project-page-layout
     .project-page-layout-content.gl-mt-5
       .project-buttons.gl-mb-5{ data: { testid: 'quick-actions-container' } }
-        .project-clone-holder.d-block.d-md-none
+        .project-clone-holder.d-block.d-sm-none
           = render "shared/mobile_clone_panel"
 
-        .project-clone-holder.gl-display-none.gl-md-display-flex.gl-justify-content-end.gl-w-full.gl-mt-2
+        .project-clone-holder.gl-display-none.gl-sm-display-flex.gl-justify-content-end.gl-w-full.gl-mt-2
           = render "projects/buttons/code", ref: @ref
 
       = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-new-card-body gl-bg-gray-10 gl-p-5' }) do |c|
@@ -93,10 +93,10 @@
       = _('You can get started by cloning the repository or start adding files to it with one of the following options.')
 
   .project-buttons{ data: { testid: 'quick-actions-container' } }
-    .project-clone-holder.d-block.d-md-none.gl-mt-3.gl-mr-3
+    .project-clone-holder.d-block.d-sm-none.gl-mt-3.gl-mr-3
       = render "shared/mobile_clone_panel"
 
-    .project-clone-holder.d-none.d-md-inline-block.gl-mb-3.gl-mr-3.float-left
+    .project-clone-holder.d-none.d-sm-inline-block.gl-mb-3.gl-mr-3.float-left
       = render "projects/buttons/code", ref: @ref
     = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_buttons, project_buttons: true
 
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 9c0badf40904b7..26ef47e9a7a528 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -22,7 +22,7 @@
     .project-page-layout-sidebar.js-show-on-project-root.gl-mt-5
       = render "sidebar"
 
-    .project-page-layout-content.gl-mt-5
+    .project-page-layout-content
       - if can?(current_user, :read_code, @project) && @project.repository_languages.present?
         - add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "" })
 
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 8eb0bb85e660da..2c7ef6f53b4f49 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -17,9 +17,9 @@
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
 
-    .project-code-holder.d-none.d-md-inline-block>
+    .project-code-holder.d-none.d-sm-inline-block>
       = render "projects/buttons/code", dropdown_class: 'dropdown-menu-right', ref: @ref
 
-  .project-code-holder.d-block.d-md-none.mt-sm-2.mt-md-0.ml-md-2>
+  .project-code-holder.d-block.d-sm-none.mt-sm-2.mt-md-0.ml-md-2>
     = render 'projects/buttons/download', project: @project, ref: @ref
     = render "shared/mobile_clone_panel", ref: @ref
diff --git a/app/views/shared/_groups_projects_more_actions_dropdown.html.haml b/app/views/shared/_groups_projects_more_actions_dropdown.html.haml
new file mode 100644
index 00000000000000..5189dc54f0c07e
--- /dev/null
+++ b/app/views/shared/_groups_projects_more_actions_dropdown.html.haml
@@ -0,0 +1,16 @@
+- dropdown_data = groups_projects_more_actions_dropdown_data(source)
+
+- if dropdown_data[:is_group] && can?(current_user, :read_group, @group)
+  - id = @group.id
+
+  %span.gl-sr-only{ itemprop: 'identifier', data: { testid: 'group-id-content' } }
+    = s_('GroupPage|Group ID: %{id}') % { id: id }
+
+- elsif can?(current_user, :read_project, @project)
+  - id = @project.id
+
+  %span.gl-sr-only{ itemprop: 'identifier', data: { testid: 'project-id-content' } }
+    = s_('ProjectPage|Project ID: %{id}') % { id: id }
+
+- if id || current_user
+  .js-groups-projects-more-actions-dropdown{ data: dropdown_data }
diff --git a/app/views/shared/members/_access_request_links.html.haml b/app/views/shared/members/_access_request_links.html.haml
deleted file mode 100644
index 0d692ee753a353..00000000000000
--- a/app/views/shared/members/_access_request_links.html.haml
+++ /dev/null
@@ -1,18 +0,0 @@
-- model_name = source.model_name.to_s.downcase
-
-- if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id)) # rubocop: disable CodeReuse/ActiveRecord
-  - link_text = source.is_a?(Group) ? _('Leave group') : _('Leave project')
-  = link_to link_text, polymorphic_path([:leave, source, :members]),
-            method: :delete,
-            aria: { label: link_text },
-            data: { confirm: leave_confirmation_message(source), confirm_btn_variant: 'danger', qa_selector: 'leave_group_link' },
-            class: 'js-leave-link'
-- elsif requester = source.requesters.find_by(user_id: current_user.id) # rubocop: disable CodeReuse/ActiveRecord
-  - if can?(current_user, :withdraw_member_access_request, requester)
-    = link_to _('Withdraw Access Request'), polymorphic_path([:leave, source, :members]),
-              method: :delete,
-              data: { confirm: remove_member_message(requester) }
-- elsif source.request_access_enabled && can?(current_user, :request_access, source)
-  = link_to _('Request Access'), polymorphic_path([:request_access, source, :members]),
-            method: :post,
-            data: { testid: 'request-access-link' }
diff --git a/ee/spec/features/groups/members/leave_group_spec.rb b/ee/spec/features/groups/members/leave_group_spec.rb
index 8cfcfe05c6628c..a50721a5c4d2b0 100644
--- a/ee/spec/features/groups/members/leave_group_spec.rb
+++ b/ee/spec/features/groups/members/leave_group_spec.rb
@@ -10,6 +10,9 @@
   let_it_be(:group) { create(:group) }
 
   let(:user) { create(:user) }
+  let(:more_actions_dropdown) do
+    find('[data-testid="groups-projects-more-actions-dropdown"] .gl-new-dropdown-custom-toggle')
+  end
 
   before do
     user.update!(provisioned_by_group: group)
@@ -17,15 +20,17 @@
   end
 
   context 'with block_password_auth_for_saml_users feature flag switched on' do
-    it 'guest provisoned by this group leaves the group and is signed off' do
+    it 'guest provisoned by this group leaves the group and is signed off', :js do
       group.add_guest(user)
       group.add_owner(other_user)
 
       visit group_path(group)
+      more_actions_dropdown.click
       click_link 'Leave group'
+      accept_gl_confirm(button_text: 'Leave group')
 
-      expect(group.users).not_to include(user)
       expect(page).to have_current_path(new_user_session_path, ignore_query: true)
+      expect(group.users).not_to include(user)
     end
 
     it 'guest leaves the group by url param and is signed off', :js do
@@ -33,10 +38,9 @@
       group.add_owner(other_user)
 
       visit group_path(group, leave: 1)
-
       accept_gl_confirm(button_text: 'Leave group')
-
       wait_for_all_requests
+
       expect(page).to have_current_path(new_user_session_path, ignore_query: true)
       expect(group.users).not_to include(user)
     end
@@ -52,19 +56,20 @@
       group.add_owner(other_user)
 
       visit group_path(group, leave: 1)
-
       accept_gl_confirm(button_text: 'Leave group')
-
       wait_for_all_requests
+
       expect(page).to have_current_path(dashboard_groups_path, ignore_query: true)
       expect(group.users).not_to include(user)
     end
 
-    it 'guest leaves the group as last member' do
+    it 'guest leaves the group as last member', :js do
       group.add_guest(user)
 
       visit group_path(group)
+      more_actions_dropdown.click
       click_link 'Leave group'
+      accept_gl_confirm(button_text: 'Leave group')
 
       expect(page).to have_current_path(dashboard_groups_path, ignore_query: true)
       expect(group.users).not_to include(user)
diff --git a/ee/spec/features/namespace_user_cap_reached_alert_spec.rb b/ee/spec/features/namespace_user_cap_reached_alert_spec.rb
index 55bae4e3a0a8ff..fe07ffce4f5495 100644
--- a/ee/spec/features/namespace_user_cap_reached_alert_spec.rb
+++ b/ee/spec/features/namespace_user_cap_reached_alert_spec.rb
@@ -195,7 +195,6 @@ def dismiss_button
 
   def expect_group_page_for(group)
     expect(page).to have_text group.name
-    expect(page).to have_text "Group ID: #{group.id}"
   end
 
   def expect_project_page_for(project)
diff --git a/ee/spec/features/projects/members/member_leaves_project_spec.rb b/ee/spec/features/projects/members/member_leaves_project_spec.rb
index c3693612bff6db..72876117cfaf84 100644
--- a/ee/spec/features/projects/members/member_leaves_project_spec.rb
+++ b/ee/spec/features/projects/members/member_leaves_project_spec.rb
@@ -3,8 +3,13 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Members > Member leaves project', feature_category: :groups_and_projects do
+  include Spec::Support::Helpers::ModalHelpers
+
   let(:user) { create(:user) }
   let(:project) { create(:project, :repository) }
+  let(:more_actions_dropdown) do
+    find('[data-testid="groups-projects-more-actions-dropdown"] .gl-new-dropdown-custom-toggle')
+  end
 
   before do
     project.add_developer(user)
@@ -19,8 +24,10 @@
     let!(:non_matching_protected_branch) { create(:protected_branch, authorize_user_to_push: other_user, authorize_user_to_merge: other_user, project: project) }
 
     context 'user leaves project' do
-      it "removes the user's branch permissions" do
+      it "removes the user's branch permissions", :js do
+        more_actions_dropdown.click
         click_link 'Leave project'
+        accept_gl_confirm(button_text: 'Leave project')
 
         expect(page).to have_current_path(dashboard_projects_path, ignore_query: true)
         expect(matching_protected_branch.push_access_levels.where(user: user)).not_to exist
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 66468232633e2d..198e7906a5176b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -23026,10 +23026,13 @@ msgstr ""
 msgid "GroupImport|Unable to process group import file"
 msgstr ""
 
-msgid "GroupPage|Copy group ID"
+msgid "GroupPage|Copy group ID: %{id}"
 msgstr ""
 
-msgid "GroupPage|Group ID: %{group_id}"
+msgid "GroupPage|Group ID copied to clipboard."
+msgstr ""
+
+msgid "GroupPage|Group ID: %{id}"
 msgstr ""
 
 msgid "GroupRoadmap|%{dateWord} – No end date"
@@ -37470,10 +37473,13 @@ msgstr ""
 msgid "ProjectOverview|You must sign in to star a project"
 msgstr ""
 
-msgid "ProjectPage|Copy project ID"
+msgid "ProjectPage|Copy project ID: %{id}"
+msgstr ""
+
+msgid "ProjectPage|Project ID copied to clipboard."
 msgstr ""
 
-msgid "ProjectPage|Project ID: %{project_id}"
+msgid "ProjectPage|Project ID: %{id}"
 msgstr ""
 
 msgid "ProjectPage|Project information"
diff --git a/qa/qa/page/group/show.rb b/qa/qa/page/group/show.rb
index 4dd0f3a57044b2..100b9f7fa6dee3 100644
--- a/qa/qa/page/group/show.rb
+++ b/qa/qa/page/group/show.rb
@@ -10,12 +10,6 @@ class Show < Page::Base
         view 'app/views/groups/_home_panel.html.haml' do
           element 'new-project-button'
           element :new_subgroup_button
-          element :group_id_content
-        end
-
-        view 'app/views/shared/members/_access_request_links.html.haml' do
-          element :leave_group_link
-          element 'request-access-link'
         end
 
         def click_subgroup(name)
@@ -40,15 +34,21 @@ def go_to_new_project
         end
 
         def group_id
-          find_element(:group_id_content).text.delete('Group ID: ').sub(/\n.*/, '')
+          find_element('group-id-content').text.delete('Group ID: ').sub(/\n.*/, '')
         end
 
         def leave_group
-          click_element :leave_group_link
+          click_element 'groups-projects-more-actions-dropdown'
+          wait_for_requests
+
+          click_element 'leave-group-link'
           click_confirmation_ok_button
         end
 
         def click_request_access
+          click_element 'groups-projects-more-actions-dropdown'
+          wait_for_requests
+
           click_element 'request-access-link'
         end
       end
diff --git a/qa/qa/page/project/show.rb b/qa/qa/page/project/show.rb
index dce20c9cba153f..6106e582b2f1c2 100644
--- a/qa/qa/page/project/show.rb
+++ b/qa/qa/page/project/show.rb
@@ -32,7 +32,6 @@ class Show < Page::Base
 
         view 'app/views/projects/_home_panel.html.haml' do
           element 'project-name-content'
-          element 'project-id-content'
         end
 
         view 'app/views/projects/_sidebar.html.haml' do
diff --git a/spec/features/groups/members/leave_group_spec.rb b/spec/features/groups/members/leave_group_spec.rb
index 27ceec05fe3ab2..632155cd7e45d0 100644
--- a/spec/features/groups/members/leave_group_spec.rb
+++ b/spec/features/groups/members/leave_group_spec.rb
@@ -9,17 +9,22 @@
   let(:user) { create(:user) }
   let(:other_user) { create(:user) }
   let(:group) { create(:group) }
+  let(:more_actions_dropdown) do
+    find('[data-testid="groups-projects-more-actions-dropdown"] .gl-new-dropdown-custom-toggle')
+  end
 
   before do
     sign_in(user)
   end
 
-  it 'guest leaves the group' do
+  it 'guest leaves the group', :js do
     group.add_guest(user)
     group.add_owner(other_user)
 
     visit group_path(group)
+    more_actions_dropdown.click
     click_link 'Leave group'
+    accept_gl_confirm(button_text: 'Leave group')
 
     expect(page).to have_current_path(dashboard_groups_path, ignore_query: true)
     expect(page).to have_content left_group_message(group)
@@ -31,31 +36,33 @@
     group.add_owner(other_user)
 
     visit group_path(group, leave: 1)
-
     accept_gl_confirm(button_text: 'Leave group')
 
-    wait_for_all_requests
     expect(page).to have_current_path(dashboard_groups_path, ignore_query: true)
     expect(group.users).not_to include(user)
   end
 
-  it 'guest leaves the group as last member' do
+  it 'guest leaves the group as last member', :js do
     group.add_guest(user)
 
     visit group_path(group)
+    more_actions_dropdown.click
     click_link 'Leave group'
+    accept_gl_confirm(button_text: 'Leave group')
 
     expect(page).to have_current_path(dashboard_groups_path, ignore_query: true)
     expect(page).to have_content left_group_message(group)
     expect(group.users).not_to include(user)
   end
 
-  it 'owner leaves the group if they are not the last owner' do
+  it 'owner leaves the group if they are not the last owner', :js do
     group.add_owner(user)
     group.add_owner(other_user)
 
     visit group_path(group)
+    more_actions_dropdown.click
     click_link 'Leave group'
+    accept_gl_confirm(button_text: 'Leave group')
 
     expect(page).to have_current_path(dashboard_groups_path, ignore_query: true)
     expect(page).to have_content left_group_message(group)
@@ -66,6 +73,7 @@
     group.add_owner(user)
 
     visit group_path(group)
+    more_actions_dropdown.click
 
     expect(page).not_to have_content 'Leave group'
 
diff --git a/spec/features/groups/members/request_access_spec.rb b/spec/features/groups/members/request_access_spec.rb
index 2d0b2e483c5986..e6da2ce7cec3ae 100644
--- a/spec/features/groups/members/request_access_spec.rb
+++ b/spec/features/groups/members/request_access_spec.rb
@@ -3,10 +3,15 @@
 require 'spec_helper'
 
 RSpec.describe 'Groups > Members > Request access', feature_category: :groups_and_projects do
+  include Spec::Support::Helpers::ModalHelpers
+
   let(:user) { create(:user) }
   let(:owner) { create(:user) }
   let(:group) { create(:group, :public) }
   let!(:project) { create(:project, :private, namespace: group) }
+  let(:more_actions_dropdown) do
+    find('[data-testid="groups-projects-more-actions-dropdown"] .gl-new-dropdown-custom-toggle')
+  end
 
   before do
     group.add_owner(owner)
@@ -14,15 +19,19 @@
     visit group_path(group)
   end
 
-  it 'request access feature is disabled' do
+  it 'request access feature is disabled', :js do
     group.update!(request_access_enabled: false)
     visit group_path(group)
+    more_actions_dropdown.click
 
     expect(page).not_to have_content 'Request Access'
   end
 
-  it 'user can request access to a group' do
-    perform_enqueued_jobs { click_link 'Request Access' }
+  it 'user can request access to a group', :js do
+    perform_enqueued_jobs do
+      more_actions_dropdown.click
+      click_link 'Request Access'
+    end
 
     expect(ActionMailer::Base.deliveries.last.to).to eq [owner.notification_email_or_default]
     expect(ActionMailer::Base.deliveries.last.subject).to match "Request to join the #{group.name} group"
@@ -30,18 +39,26 @@
     expect(group.requesters.exists?(user_id: user)).to be_truthy
     expect(page).to have_content 'Your request for access has been queued for review.'
 
+    more_actions_dropdown.click
+
     expect(page).to have_content 'Withdraw Access Request'
     expect(page).not_to have_content 'Leave group'
   end
 
-  it 'user does not see private projects' do
-    perform_enqueued_jobs { click_link 'Request Access' }
+  it 'user does not see private projects', :js do
+    perform_enqueued_jobs do
+      more_actions_dropdown.click
+      click_link 'Request Access'
+    end
 
     expect(page).not_to have_content project.name
   end
 
-  it 'user does not see group in the Dashboard > Groups page' do
-    perform_enqueued_jobs { click_link 'Request Access' }
+  it 'user does not see group in the Dashboard > Groups page', :js do
+    perform_enqueued_jobs do
+      more_actions_dropdown.click
+      click_link 'Request Access'
+    end
 
     visit dashboard_groups_path
 
@@ -49,6 +66,7 @@
   end
 
   it 'user is not listed in the group members page', :js do
+    more_actions_dropdown.click
     click_link 'Request Access'
 
     expect(group.requesters.exists?(user_id: user)).to be_truthy
@@ -63,20 +81,24 @@
     end
   end
 
-  it 'user can withdraw its request for access' do
+  it 'user can withdraw its request for access', :js do
+    more_actions_dropdown.click
     click_link 'Request Access'
 
     expect(group.requesters.exists?(user_id: user)).to be_truthy
 
+    more_actions_dropdown.click
     click_link 'Withdraw Access Request'
+    accept_gl_confirm
 
-    expect(group.requesters.exists?(user_id: user)).to be_falsey
     expect(page).to have_content 'Your access request to the group has been withdrawn.'
+    expect(group.requesters.exists?(user_id: user)).to be_falsey
   end
 
-  it 'member does not see the request access button' do
+  it 'member does not see the request access button', :js do
     group.add_owner(user)
     visit group_path(group)
+    more_actions_dropdown.click
 
     expect(page).not_to have_content 'Request Access'
   end
diff --git a/spec/features/projects/members/group_requester_cannot_request_access_to_project_spec.rb b/spec/features/projects/members/group_requester_cannot_request_access_to_project_spec.rb
index 47cd0d612b529d..08de3d95060f23 100644
--- a/spec/features/projects/members/group_requester_cannot_request_access_to_project_spec.rb
+++ b/spec/features/projects/members/group_requester_cannot_request_access_to_project_spec.rb
@@ -8,16 +8,23 @@
   let(:owner) { create(:user) }
   let(:group) { create(:group, :public) }
   let(:project) { create(:project, :public, namespace: group) }
+  let(:more_actions_dropdown) do
+    find('[data-testid="groups-projects-more-actions-dropdown"] .gl-new-dropdown-custom-toggle')
+  end
 
   before do
     group.add_owner(owner)
     sign_in(user)
     visit group_path(group)
-    perform_enqueued_jobs { click_link 'Request Access' }
+    perform_enqueued_jobs do
+      more_actions_dropdown.click
+      click_link 'Request Access'
+    end
     visit project_path(project)
   end
 
   it 'group requester does not see the request access / withdraw access request button' do
+    expect(page).not_to have_css '[data-testid="groups-projects-more-actions-dropdown"]'
     expect(page).not_to have_content 'Request Access'
     expect(page).not_to have_content 'Withdraw Access Request'
   end
diff --git a/spec/features/projects/members/member_leaves_project_spec.rb b/spec/features/projects/members/member_leaves_project_spec.rb
index e0c64547e9f6e1..43c6ba4890606a 100644
--- a/spec/features/projects/members/member_leaves_project_spec.rb
+++ b/spec/features/projects/members/member_leaves_project_spec.rb
@@ -8,16 +8,21 @@
 
   let(:user) { create(:user) }
   let(:project) { create(:project, :repository, :with_namespace_settings) }
+  let(:more_actions_dropdown) do
+    find('[data-testid="groups-projects-more-actions-dropdown"] .gl-new-dropdown-custom-toggle')
+  end
 
   before do
     project.add_developer(user)
     sign_in(user)
   end
 
-  it 'user leaves project' do
+  it 'user leaves project', :js do
     visit project_path(project)
 
+    more_actions_dropdown.click
     click_link 'Leave project'
+    accept_gl_confirm(button_text: 'Leave project')
 
     expect(page).to have_current_path(dashboard_projects_path, ignore_query: true)
     expect(project.users.exists?(user.id)).to be_falsey
diff --git a/spec/features/projects/members/user_requests_access_spec.rb b/spec/features/projects/members/user_requests_access_spec.rb
index e7f99a4048ca7b..14df7e7bafe4a6 100644
--- a/spec/features/projects/members/user_requests_access_spec.rb
+++ b/spec/features/projects/members/user_requests_access_spec.rb
@@ -10,6 +10,9 @@
   let_it_be(:project) { create(:project, :public, :repository) }
 
   let(:owner) { project.first_owner }
+  let(:more_actions_dropdown) do
+    find('[data-testid="groups-projects-more-actions-dropdown"] .gl-new-dropdown-custom-toggle')
+  end
 
   before do
     sign_in(user)
@@ -17,39 +20,46 @@
     visit project_path(project)
   end
 
-  it 'request access feature is disabled' do
+  it 'request access feature is disabled', :js do
     project.update!(request_access_enabled: false)
     visit project_path(project)
 
+    more_actions_dropdown.click
     expect(page).not_to have_content 'Request Access'
   end
 
-  it 'user can request access to a project' do
-    perform_enqueued_jobs { click_link 'Request Access' }
+  it 'user can request access to a project', :js do
+    perform_enqueued_jobs do
+      more_actions_dropdown.click
+      click_link 'Request Access'
+    end
 
     expect(ActionMailer::Base.deliveries.map(&:to)).to match_array([[owner.notification_email_or_default], [maintainer.notification_email_or_default]])
     expect(ActionMailer::Base.deliveries.last.subject).to eq "Request to join the #{project.full_name} project"
 
     expect(project.requesters.exists?(user_id: user)).to be_truthy
 
+    more_actions_dropdown.click
     expect(page).to have_content 'Withdraw Access Request'
     expect(page).not_to have_content 'Leave Project'
   end
 
   context 'code access is restricted' do
-    it 'user can request access' do
+    it 'user can request access', :js do
       project.project_feature.update!(
         repository_access_level: ProjectFeature::PRIVATE,
         builds_access_level: ProjectFeature::PRIVATE,
         merge_requests_access_level: ProjectFeature::PRIVATE
       )
       visit project_path(project)
+      more_actions_dropdown.click
 
       expect(page).to have_content 'Request Access'
     end
   end
 
-  it 'user is not listed in the project members page' do
+  it 'user is not listed in the project members page', :js do
+    more_actions_dropdown.click
     click_link 'Request Access'
 
     expect(project.requesters.exists?(user_id: user)).to be_truthy
@@ -64,13 +74,16 @@
     end
   end
 
-  it 'user can withdraw its request for access' do
+  it 'user can withdraw its request for access', :js do
+    more_actions_dropdown.click
     click_link 'Request Access'
 
     expect(project.requesters.exists?(user_id: user)).to be_truthy
 
+    more_actions_dropdown.click
     accept_gl_confirm { click_link 'Withdraw Access Request' }
 
+    more_actions_dropdown.click
     expect(page).not_to have_content 'Withdraw Access Request'
     expect(page).to have_content 'Request Access'
   end
diff --git a/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js b/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js
new file mode 100644
index 00000000000000..1bcff8a44beb74
--- /dev/null
+++ b/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js
@@ -0,0 +1,173 @@
+import { GlDisclosureDropdownItem, GlDisclosureDropdown } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import moreActionsDropdown from '~/groups_projects/components/more_actions_dropdown.vue';
+
+describe('moreActionsDropdown', () => {
+  let wrapper;
+
+  const createComponent = ({ provideData = {}, propsData = {} } = {}) => {
+    wrapper = shallowMountExtended(moreActionsDropdown, {
+      provide: {
+        isGroup: false,
+        id: 1,
+        leavePath: '',
+        leaveConfirmMessage: '',
+        withdrawPath: '',
+        withdrawConfirmMessage: '',
+        requestAccessPath: '',
+        ...provideData,
+      },
+      propsData,
+      stubs: {
+        GlDisclosureDropdownItem,
+      },
+    });
+  };
+
+  const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const showDropdown = () => {
+    findDropdown().vm.$emit('show');
+  };
+
+  describe('copy id', () => {
+    describe('project namespace type', () => {
+      beforeEach(async () => {
+        createComponent({
+          provideData: {
+            id: 22,
+          },
+        });
+        await showDropdown();
+      });
+
+      it('has correct test id `copy-project-id`', () => {
+        expect(wrapper.findByTestId('copy-project-id').exists()).toBe(true);
+        expect(wrapper.findByTestId('copy-group-id').exists()).toBe(false);
+      });
+
+      it('renders copy project id with correct id', () => {
+        expect(wrapper.findByTestId('copy-project-id').text()).toBe('Copy project ID: 22');
+      });
+    });
+
+    describe('group namespace type', () => {
+      beforeEach(async () => {
+        createComponent({
+          provideData: {
+            isGroup: true,
+            id: 11,
+          },
+        });
+        await showDropdown();
+      });
+
+      it('has correct test id `copy-group-id`', () => {
+        expect(wrapper.findByTestId('copy-project-id').exists()).toBe(false);
+        expect(wrapper.findByTestId('copy-group-id').exists()).toBe(true);
+      });
+
+      it('renders copy group id with correct id', () => {
+        expect(wrapper.findByTestId('copy-group-id').text()).toBe('Copy group ID: 11');
+      });
+    });
+  });
+
+  describe('request access', () => {
+    it('does not render request access link', async () => {
+      createComponent();
+      await showDropdown();
+
+      expect(wrapper.findByTestId('request-access-link').exists()).toBe(false);
+    });
+
+    it('renders request access link', async () => {
+      createComponent({
+        provideData: {
+          requestAccessPath: 'http://request.path/path',
+        },
+      });
+      await showDropdown();
+
+      expect(wrapper.findByTestId('request-access-link').text()).toBe('Request Access');
+      expect(wrapper.findByTestId('request-access-link').attributes('href')).toBe(
+        'http://request.path/path',
+      );
+    });
+  });
+
+  describe('withdraw access', () => {
+    it('does not render withdraw access link', async () => {
+      createComponent();
+      await showDropdown();
+
+      expect(wrapper.findByTestId('withdraw-access-link').exists()).toBe(false);
+    });
+
+    it('renders withdraw access link', async () => {
+      createComponent({
+        provideData: {
+          withdrawPath: 'http://withdraw.path/path',
+        },
+      });
+      await showDropdown();
+
+      expect(wrapper.findByTestId('withdraw-access-link').text()).toBe('Withdraw Access Request');
+      expect(wrapper.findByTestId('withdraw-access-link').attributes('href')).toBe(
+        'http://withdraw.path/path',
+      );
+    });
+  });
+
+  describe('leave access', () => {
+    it('does not render leave link', async () => {
+      createComponent();
+      await showDropdown();
+
+      expect(wrapper.findByTestId('leave-project-link').exists()).toBe(false);
+    });
+
+    it('renders leave link', async () => {
+      createComponent({
+        provideData: {
+          leavePath: 'http://leave.path/path',
+        },
+      });
+      await showDropdown();
+
+      expect(wrapper.findByTestId('leave-project-link').exists()).toBe(true);
+      expect(wrapper.findByTestId('leave-project-link').text()).toBe('Leave project');
+      expect(wrapper.findByTestId('leave-project-link').attributes('href')).toBe(
+        'http://leave.path/path',
+      );
+    });
+
+    describe('when `isGroup` is set to `false`', () => {
+      it('use testid `leave-project-link`', async () => {
+        createComponent({
+          provideData: {
+            leavePath: 'http://leave.path/path',
+          },
+        });
+        await showDropdown();
+
+        expect(wrapper.findByTestId('leave-project-link').exists()).toBe(true);
+        expect(wrapper.findByTestId('leave-group-link').exists()).toBe(false);
+      });
+    });
+
+    describe('when `isGroup` is set to `true`', () => {
+      it('use testid `leave-group-link`', async () => {
+        createComponent({
+          provideData: {
+            isGroup: true,
+            leavePath: 'http://leave.path/path',
+          },
+        });
+        await showDropdown();
+
+        expect(wrapper.findByTestId('leave-project-link').exists()).toBe(false);
+        expect(wrapper.findByTestId('leave-group-link').exists()).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/views/groups/_home_panel.html.haml_spec.rb b/spec/views/groups/_home_panel.html.haml_spec.rb
index e76862cdaeac65..ab556a3db01bae 100644
--- a/spec/views/groups/_home_panel.html.haml_spec.rb
+++ b/spec/views/groups/_home_panel.html.haml_spec.rb
@@ -9,12 +9,6 @@
     assign(:group, group)
   end
 
-  it 'renders the group ID' do
-    render
-
-    expect(rendered).to have_content("Group ID: #{group.id}")
-  end
-
   context 'admin area link' do
     it 'renders admin area link for admin' do
       allow(view).to receive(:current_user).and_return(create(:admin))
diff --git a/spec/views/projects/_home_panel.html.haml_spec.rb b/spec/views/projects/_home_panel.html.haml_spec.rb
index a35c87cb4b33c5..0282e149b25521 100644
--- a/spec/views/projects/_home_panel.html.haml_spec.rb
+++ b/spec/views/projects/_home_panel.html.haml_spec.rb
@@ -148,38 +148,6 @@
     end
   end
 
-  context 'project id' do
-    let(:project) { create(:project) }
-    let(:user) { create(:user) }
-
-    before do
-      assign(:project, project)
-
-      allow(view).to receive(:current_user).and_return(user)
-      allow(project).to receive(:license_anchor_data).and_return(false)
-    end
-
-    context 'user can read project' do
-      it 'is shown' do
-        allow(view).to receive(:can?).with(user, :read_project, project).and_return(true)
-
-        render
-
-        expect(rendered).to have_content("Project ID: #{project.id}")
-      end
-    end
-
-    context 'user cannot read project' do
-      it 'is not shown' do
-        allow(view).to receive(:can?).with(user, :read_project, project).and_return(false)
-
-        render
-
-        expect(rendered).not_to have_content("Project ID: #{project.id}")
-      end
-    end
-  end
-
   context 'forks' do
     let(:source_project) { create(:project, :repository) }
     let(:project) { fork_project(source_project) }
-- 
GitLab