Merge branch '322755-refactor-group-issues-page-to-vue' into 'master'

Refactor group issues page from Haml to Vue

See merge request gitlab-org/gitlab!68978

app/assets/javascripts/issuable_list/components/issuable_item.vue

@@ -69,6 +69,9 @@ export default {
     isIssuableUrlExternal() {
       return isExternal(this.webUrl);
     },
+    reference() {
+      return this.issuable.reference || `${this.issuableSymbol}${this.issuable.iid}`;
+    },
     labels() {
       return this.issuable.labels?.nodes || this.issuable.labels || [];
     },
@@ -201,9 +204,9 @@ export default {
         </div>
         <div class="issuable-info">
           <slot v-if="hasSlotContents('reference')" name="reference"></slot>
-          <span v-else data-testid="issuable-reference" class="issuable-reference"
-            >{{ issuableSymbol }}{{ issuable.iid }}</span
-          >
+          <span v-else data-testid="issuable-reference" class="issuable-reference">
+            {{ reference }}
+          </span>
           <span class="issuable-authored gl-display-none gl-sm-display-inline-block! gl-mr-3">
             <span aria-hidden="true">&middot;</span>
             <span

app/assets/javascripts/issues_list/components/issues_list_app.vue

@@ -14,6 +14,7 @@ import getIssuesCountsQuery from 'ee_else_ce/issues_list/queries/get_issues_coun
 import createFlash from '~/flash';
 import { TYPE_USER } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { ITEM_TYPE } from '~/groups/constants';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
@@ -140,11 +141,11 @@ export default {
     initialEmail: {
       default: '',
     },
-    isSignedIn: {
+    isProject: {
       default: false,
     },
-    issuesPath: {
-      default: '',
+    isSignedIn: {
+      default: false,
     },
     jiraIntegrationPath: {
       default: '',
@@ -186,9 +187,11 @@ export default {
       variables() {
         return this.queryVariables;
       },
-      update: ({ project }) => project?.issues.nodes ?? [],
+      update(data) {
+        return data[this.namespace]?.issues.nodes ?? [];
+      },
       result({ data }) {
-        this.pageInfo = data.project?.issues.pageInfo ?? {};
+        this.pageInfo = data[this.namespace]?.issues.pageInfo ?? {};
         this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
       },
       error(error) {
@@ -204,7 +207,9 @@ export default {
       variables() {
         return this.queryVariables;
       },
-      update: ({ project }) => project ?? {},
+      update(data) {
+        return data[this.namespace] ?? {};
+      },
       error(error) {
         createFlash({ message: this.$options.i18n.errorFetchingCounts, captureError: true, error });
       },
@@ -220,8 +225,9 @@ export default {
   computed: {
     queryVariables() {
       return {
-        isSignedIn: this.isSignedIn,
         fullPath: this.fullPath,
+        isProject: this.isProject,
+        isSignedIn: this.isSignedIn,
         search: this.searchQuery,
         sort: this.sortKey,
         state: this.state,
@@ -229,6 +235,9 @@ export default {
         ...this.apiFilterParams,
       };
     },
+    namespace() {
+      return this.isProject ? ITEM_TYPE.PROJECT : ITEM_TYPE.GROUP;
+    },
     hasSearch() {
       return this.searchQuery || Object.keys(this.urlFilterParams).length;
     },
@@ -242,7 +251,7 @@ export default {
       return this.state === IssuableStates.Opened;
     },
     showCsvButtons() {
-      return this.isSignedIn;
+      return this.isProject && this.isSignedIn;
     },
     apiFilterParams() {
       return convertToApiParams(this.filterTokens);
@@ -447,39 +456,41 @@ export default {
       return this.$apollo
         .query({
           query: searchLabelsQuery,
-          variables: { fullPath: this.fullPath, search },
+          variables: { fullPath: this.fullPath, search, isProject: this.isProject },
         })
-        .then(({ data }) => data.project.labels.nodes);
+        .then(({ data }) => data[this.namespace]?.labels.nodes);
     },
     fetchMilestones(search) {
       return this.$apollo
         .query({
           query: searchMilestonesQuery,
-          variables: { fullPath: this.fullPath, search },
+          variables: { fullPath: this.fullPath, search, isProject: this.isProject },
         })
-        .then(({ data }) => data.project.milestones.nodes);
+        .then(({ data }) => data[this.namespace]?.milestones.nodes);
     },
     fetchIterations(search) {
       const id = Number(search);
       const variables =
         !search || Number.isNaN(id)
-          ? { fullPath: this.fullPath, search }
-          : { fullPath: this.fullPath, id };
+          ? { fullPath: this.fullPath, search, isProject: this.isProject }
+          : { fullPath: this.fullPath, id, isProject: this.isProject };
 
       return this.$apollo
         .query({
           query: searchIterationsQuery,
           variables,
         })
-        .then(({ data }) => data.project.iterations.nodes);
+        .then(({ data }) => data[this.namespace]?.iterations.nodes);
     },
     fetchUsers(search) {
       return this.$apollo
         .query({
           query: searchUsersQuery,
-          variables: { fullPath: this.fullPath, search },
+          variables: { fullPath: this.fullPath, search, isProject: this.isProject },
         })
-        .then(({ data }) => data.project.projectMembers.nodes.map((member) => member.user));
+        .then(({ data }) =>
+          data[this.namespace]?.[`${this.namespace}Members`].nodes.map((member) => member.user),
+        );
     },
     getExportCsvPathWithQuery() {
       return `${this.exportCsvPath}${window.location.search}`;
@@ -560,15 +571,16 @@ export default {
       }
 
       return axios
-        .put(joinPaths(this.issuesPath, issueToMove.iid, 'reorder'), {
+        .put(joinPaths(issueToMove.webPath, 'reorder'), {
           move_before_id: isMovingToBeginning ? null : getIdFromGraphQLId(moveBeforeId),
           move_after_id: isMovingToEnd ? null : getIdFromGraphQLId(moveAfterId),
+          group_full_path: this.isProject ? undefined : this.fullPath,
         })
         .then(() => {
           const serializedVariables = JSON.stringify(this.queryVariables);
           return this.$apollo.mutate({
             mutation: reorderIssuesMutation,
-            variables: { oldIndex, newIndex, serializedVariables },
+            variables: { oldIndex, newIndex, namespace: this.namespace, serializedVariables },
           });
         })
         .catch((error) => {

app/assets/javascripts/issues_list/index.js

@@ -85,17 +85,17 @@ export function mountIssuesListApp() {
 
   const resolvers = {
     Mutation: {
-      reorderIssues: (_, { oldIndex, newIndex, serializedVariables }, { cache }) => {
+      reorderIssues: (_, { oldIndex, newIndex, namespace, serializedVariables }, { cache }) => {
         const variables = JSON.parse(serializedVariables);
         const sourceData = cache.readQuery({ query: getIssuesQuery, variables });
 
         const data = produce(sourceData, (draftData) => {
-          const issues = draftData.project.issues.nodes.slice();
+          const issues = draftData[namespace].issues.nodes.slice();
           const issueToMove = issues[oldIndex];
           issues.splice(oldIndex, 1);
           issues.splice(newIndex, 0, issueToMove);
 
-          draftData.project.issues.nodes = issues;
+          draftData[namespace].issues.nodes = issues;
         });
 
         cache.writeQuery({ query: getIssuesQuery, variables, data });
@@ -128,8 +128,8 @@ export function mountIssuesListApp() {
     hasMultipleIssueAssigneesFeature,
     importCsvIssuesPath,
     initialEmail,
+    isProject,
     isSignedIn,
-    issuesPath,
     jiraIntegrationPath,
     markdownHelpPath,
     maxAttachmentSize,
@@ -158,8 +158,8 @@ export function mountIssuesListApp() {
       hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
       hasIterationsFeature: parseBoolean(hasIterationsFeature),
       hasMultipleIssueAssigneesFeature: parseBoolean(hasMultipleIssueAssigneesFeature),
+      isProject: parseBoolean(isProject),
       isSignedIn: parseBoolean(isSignedIn),
-      issuesPath,
       jiraIntegrationPath,
       newIssuePath,
       rssPath,

app/assets/javascripts/issues_list/queries/get_issues.query.graphql

@@ -2,6 +2,7 @@
 #import "./issue.fragment.graphql"
 
 query getIssues(
+  $isProject: Boolean = false
   $isSignedIn: Boolean = false
   $fullPath: ID!
   $search: String
@@ -20,7 +21,35 @@ query getIssues(
   $firstPageSize: Int
   $lastPageSize: Int
 ) {
-  project(fullPath: $fullPath) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    issues(
+      includeSubgroups: true
+      search: $search
+      sort: $sort
+      state: $state
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+      before: $beforeCursor
+      after: $afterCursor
+      first: $firstPageSize
+      last: $lastPageSize
+    ) {
+      pageInfo {
+        ...PageInfo
+      }
+      nodes {
+        ...IssueFragment
+        reference(full: true)
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     issues(
       search: $search
       sort: $sort

app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql

 query getIssuesCount(
+  $isProject: Boolean = false
   $fullPath: ID!
   $search: String
   $assigneeId: String
@@ -10,7 +11,54 @@ query getIssuesCount(
   $types: [IssueType!]
   $not: NegatedIssueFilterInput
 ) {
-  project(fullPath: $fullPath) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    openedIssues: issues(
+      includeSubgroups: true
+      state: opened
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+    closedIssues: issues(
+      includeSubgroups: true
+      state: closed
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+    allIssues: issues(
+      includeSubgroups: true
+      state: all
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     openedIssues: issues(
       state: opened
       search: $search

app/assets/javascripts/issues_list/queries/issue.fragment.graphql

@@ -13,6 +13,7 @@ fragment IssueFragment on Issue {
   updatedAt
   upvotes
   userDiscussionsCount @include(if: $isSignedIn)
+  webPath
   webUrl
   assignees {
     nodes {

app/assets/javascripts/issues_list/queries/iteration.fragment.graphql

+fragment Iteration on Iteration {
+  id
+  title
+}

app/assets/javascripts/issues_list/queries/label.fragment.graphql

+fragment Label on Label {
+  id
+  color
+  textColor
+  title
+}

app/assets/javascripts/issues_list/queries/milestone.fragment.graphql

+fragment Milestone on Milestone {
+  id
+  title
+}

app/assets/javascripts/issues_list/queries/reorder_issues.mutation.graphql

-mutation reorderIssues($oldIndex: Int, $newIndex: Int, $serializedVariables: String) {
+mutation reorderIssues(
+  $oldIndex: Int
+  $newIndex: Int
+  $namespace: String
+  $serializedVariables: String
+) {
   reorderIssues(
     oldIndex: $oldIndex
     newIndex: $newIndex
+    namespace: $namespace
     serializedVariables: $serializedVariables
   ) @client
 }

app/assets/javascripts/issues_list/queries/search_iterations.query.graphql

-query searchIterations($fullPath: ID!, $search: String, $id: ID) {
-  project(fullPath: $fullPath) {
-    iterations(title: $search, id: $id) {
+#import "./iteration.fragment.graphql"
+
+query searchIterations($fullPath: ID!, $search: String, $id: ID, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    iterations(title: $search, id: $id, includeAncestors: true) {
       nodes {
-        id
-        title
+        ...Iteration
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
+    iterations(title: $search, id: $id, includeAncestors: true) {
+      nodes {
+        ...Iteration
       }
     }
   }

app/assets/javascripts/issues_list/queries/search_labels.query.graphql

-query searchLabels($fullPath: ID!, $search: String) {
-  project(fullPath: $fullPath) {
+#import "./label.fragment.graphql"
+
+query searchLabels($fullPath: ID!, $search: String, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    labels(searchTerm: $search, includeAncestorGroups: true, includeDescendantGroups: true) {
+      nodes {
+        ...Label
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     labels(searchTerm: $search, includeAncestorGroups: true) {
       nodes {
-        id
-        color
-        textColor
-        title
+        ...Label
       }
     }
   }

app/assets/javascripts/issues_list/queries/search_milestones.query.graphql

-query searchMilestones($fullPath: ID!, $search: String) {
-  project(fullPath: $fullPath) {
+#import "./milestone.fragment.graphql"
+
+query searchMilestones($fullPath: ID!, $search: String, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    milestones(searchTitle: $search, includeAncestors: true, includeDescendants: true) {
+      nodes {
+        ...Milestone
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     milestones(searchTitle: $search, includeAncestors: true) {
       nodes {
-        id
-        title
+        ...Milestone
       }
     }
   }

app/assets/javascripts/issues_list/queries/search_users.query.graphql

-query searchUsers($fullPath: ID!, $search: String) {
-  project(fullPath: $fullPath) {
+#import "./user.fragment.graphql"
+
+query searchUsers($fullPath: ID!, $search: String, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    groupMembers(search: $search) {
+      nodes {
+        user {
+          ...User
+        }
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     projectMembers(search: $search) {
       nodes {
         user {
-          id
-          avatarUrl
-          name
-          username
+          ...User
         }
       }
     }

app/assets/javascripts/issues_list/queries/user.fragment.graphql

+fragment User on User {
+  id
+  avatarUrl
+  name
+  username
+}

app/assets/javascripts/pages/groups/issues/index.js

 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
-import { mountIssuablesListApp } from '~/issues_list';
+import { mountIssuablesListApp, mountIssuesListApp } from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import projectSelect from '~/project_select';
 
-const ISSUE_BULK_UPDATE_PREFIX = 'issue_';
+if (gon.features?.vueIssuesList) {
+  mountIssuesListApp();
+} else {
+  const ISSUE_BULK_UPDATE_PREFIX = 'issue_';
 
-IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
-IssuableFilteredSearchTokenKeys.removeTokensForKeys('release');
-issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX);
+  IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
+  IssuableFilteredSearchTokenKeys.removeTokensForKeys('release');
+  issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX);
 
-initFilteredSearch({
-  page: FILTERED_SEARCH.ISSUES,
-  isGroupDecendent: true,
-  useDefaultState: true,
-  filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
-});
-projectSelect();
-initManualOrdering();
+  initFilteredSearch({
+    page: FILTERED_SEARCH.ISSUES,
+    isGroupDecendent: true,
+    useDefaultState: true,
+    filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+  });
+  projectSelect();
+  initManualOrdering();
 
-if (gon.features?.vueIssuablesList) {
-  mountIssuablesListApp();
+  if (gon.features?.vueIssuablesList) {
+    mountIssuablesListApp();
+  }
 }

app/controllers/groups_controller.rb

@@ -33,6 +33,7 @@ class GroupsController < Groups::ApplicationController
 
   before_action do
     push_frontend_feature_flag(:vue_issuables_list, @group)
+    push_frontend_feature_flag(:vue_issues_list, @group, default_enabled: :yaml)
     push_frontend_feature_flag(:iteration_cadences, @group, default_enabled: :yaml)
   end
 

app/controllers/projects/issues_controller.rb

@@ -43,7 +43,7 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:tribute_autocomplete, @project)
     push_frontend_feature_flag(:vue_issuables_list, project)
     push_frontend_feature_flag(:improved_emoji_picker, project, default_enabled: :yaml)
-    push_frontend_feature_flag(:vue_issues_list, project)
+    push_frontend_feature_flag(:vue_issues_list, project&.group, default_enabled: :yaml)
     push_frontend_feature_flag(:iteration_cadences, project&.group, default_enabled: :yaml)
   end
 

app/helpers/issues_helper.rb

@@ -203,34 +203,45 @@ module IssuesHelper
     }
   end
 
-  def issues_list_data(project, current_user, finder)
+  def common_issues_list_data(namespace, current_user)
     {
       autocomplete_award_emojis_path: autocomplete_award_emojis_path,
       calendar_path: url_for(safe_params.merge(calendar_url_options)),
+      empty_state_svg_path: image_path('illustrations/issues.svg'),
+      full_path: namespace.full_path,
+      is_signed_in: current_user.present?.to_s,
+      jira_integration_path: help_page_url('integration/jira/issues', anchor: 'view-jira-issues'),
+      rss_path: url_for(safe_params.merge(rss_url_options)),
+      sign_in_path: new_user_session_path
+    }
+  end
+
+  def project_issues_list_data(project, current_user, finder)
+    common_issues_list_data(project, current_user).merge(
       can_bulk_update: can?(current_user, :admin_issue, project).to_s,
       can_edit: can?(current_user, :admin_project, project).to_s,
       can_import_issues: can?(current_user, :import_issues, @project).to_s,
       email: current_user&.notification_email,
       emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'),
-      empty_state_svg_path: image_path('illustrations/issues.svg'),
       export_csv_path: export_csv_project_issues_path(project),
-      full_path: project.full_path,
       has_any_issues: project_issues(project).exists?.to_s,
       import_csv_issues_path: import_csv_namespace_project_issues_path,
       initial_email: project.new_issuable_address(current_user, 'issue'),
-      is_signed_in: current_user.present?.to_s,
-      issues_path: project_issues_path(project),
-      jira_integration_path: help_page_url('integration/jira/issues', anchor: 'view-jira-issues'),
+      is_project: true.to_s,
       markdown_help_path: help_page_path('user/markdown'),
       max_attachment_size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes),
       new_issue_path: new_project_issue_path(project, issue: { milestone_id: finder.milestones.first.try(:id) }),
       project_import_jira_path: project_import_jira_path(project),
       quick_actions_help_path: help_page_path('user/project/quick_actions'),
       reset_path: new_issuable_address_project_path(project, issuable_type: 'issue'),
-      rss_path: url_for(safe_params.merge(rss_url_options)),
-      show_new_issue_link: show_new_issue_link?(project).to_s,
-      sign_in_path: new_user_session_path
-    }
+      show_new_issue_link: show_new_issue_link?(project).to_s
+    )
+  end
+
+  def group_issues_list_data(group, current_user, issues)
+    common_issues_list_data(group, current_user).merge(
+      has_any_issues: issues.to_a.any?.to_s
+    )
   end
 
   # Overridden in EE

app/views/groups/issues.html.haml

@@ -5,29 +5,34 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@group.name} issues")
 
-.top-area
-  = render 'shared/issuable/nav', type: :issues
-  .nav-controls
-    = render 'shared/issuable/feed_buttons'
+- if Feature.enabled?(:vue_issues_list, @group, default_enabled: :yaml)
+  .js-issues-list{ data: group_issues_list_data(@group, current_user, @issues) }
+  - if @can_bulk_update
+    = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
+- else
+  .top-area
+    = render 'shared/issuable/nav', type: :issues
+    .nav-controls
+      = render 'shared/issuable/feed_buttons'
 
-    - if @can_bulk_update
-      = render_if_exists 'shared/issuable/bulk_update_button', type: :issues
+      - if @can_bulk_update
+        = render_if_exists 'shared/issuable/bulk_update_button', type: :issues
 
-    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
+      = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
 
-= render 'shared/issuable/search_bar', type: :issues
+  = render 'shared/issuable/search_bar', type: :issues
 
-- if @can_bulk_update
-  = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
+  - if @can_bulk_update
+    = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
 
-- if Feature.enabled?(:vue_issuables_list, @group) && @issues.to_a.any?
-  - if use_startup_call?
-    - add_page_startup_api_call(api_v4_groups_issues_path(id: @group.id, params: startup_call_params))
-  .js-issuables-list{ data: { endpoint: expose_url(api_v4_groups_issues_path(id: @group.id)),
-    'can-bulk-edit': @can_bulk_update.to_json,
-    'empty-state-meta': { svg_path: image_path('illustrations/issues.svg') },
-    'sort-key': @sort,
-    type: 'issues',
-    'scoped-labels-available': scoped_labels_available?(@group).to_json } }
-- else
-  = render 'shared/issues', project_select_button: true
+  - if Feature.enabled?(:vue_issuables_list, @group) && @issues.to_a.any?
+    - if use_startup_call?
+      - add_page_startup_api_call(api_v4_groups_issues_path(id: @group.id, params: startup_call_params))
+    .js-issuables-list{ data: { endpoint: expose_url(api_v4_groups_issues_path(id: @group.id)),
+      'can-bulk-edit': @can_bulk_update.to_json,
+      'empty-state-meta': { svg_path: image_path('illustrations/issues.svg') },
+      'sort-key': @sort,
+      type: 'issues',
+      'scoped-labels-available': scoped_labels_available?(@group).to_json } }
+  - else
+    = render 'shared/issues', project_select_button: true

app/views/projects/issues/index.html.haml

@@ -13,8 +13,8 @@
   issues_path: project_issues_path(@project),
   project_path: @project.full_path } }
 
-- if Feature.enabled?(:vue_issues_list, @project)
-  .js-issues-list{ data: issues_list_data(@project, current_user, finder) }
+- if Feature.enabled?(:vue_issues_list, @project&.group, default_enabled: :yaml)
+  .js-issues-list{ data: project_issues_list_data(@project, current_user, finder) }
   - if @can_bulk_update
     = render 'shared/issuable/bulk_update_sidebar', type: :issues
 - elsif project_issues(@project).exists?

ee/app/assets/javascripts/issues_list/queries/get_issues.query.graphql

@@ -2,6 +2,7 @@
 #import "~/issues_list/queries/issue.fragment.graphql"
 
 query getIssues(
+  $isProject: Boolean = false
   $isSignedIn: Boolean = false
   $fullPath: ID!
   $search: String
@@ -24,7 +25,42 @@ query getIssues(
   $firstPageSize: Int
   $lastPageSize: Int
 ) {
-  project(fullPath: $fullPath) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    issues(
+      includeSubgroups: true
+      search: $search
+      sort: $sort
+      state: $state
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      epicId: $epicId
+      iterationId: $iterationId
+      iterationWildcardId: $iterationWildcardId
+      weight: $weight
+      not: $not
+      before: $beforeCursor
+      after: $afterCursor
+      first: $firstPageSize
+      last: $lastPageSize
+    ) {
+      pageInfo {
+        ...PageInfo
+      }
+      nodes {
+        ...IssueFragment
+        reference(full: true)
+        blockingCount
+        healthStatus
+        weight
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     issues(
       search: $search
       sort: $sort

ee/app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql

 query getIssuesCount(
+  $isProject: Boolean = false
   $fullPath: ID!
   $search: String
   $assigneeId: String
@@ -14,7 +15,66 @@ query getIssuesCount(
   $weight: String
   $not: NegatedIssueFilterInput
 ) {
-  project(fullPath: $fullPath) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    openedIssues: issues(
+      includeSubgroups: true
+      state: opened
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      epicId: $epicId
+      iterationId: $iterationId
+      iterationWildcardId: $iterationWildcardId
+      weight: $weight
+      not: $not
+    ) {
+      count
+    }
+    closedIssues: issues(
+      includeSubgroups: true
+      state: closed
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      epicId: $epicId
+      iterationId: $iterationId
+      iterationWildcardId: $iterationWildcardId
+      weight: $weight
+      not: $not
+    ) {
+      count
+    }
+    allIssues: issues(
+      includeSubgroups: true
+      state: all
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      epicId: $epicId
+      iterationId: $iterationId
+      iterationWildcardId: $iterationWildcardId
+      weight: $weight
+      not: $not
+    ) {
+      count
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     openedIssues: issues(
       state: opened
       search: $search

ee/app/helpers/ee/issues_helper.rb

@@ -42,21 +42,35 @@ module EE
       actions
     end
 
-    override :issues_list_data
-    def issues_list_data(project, current_user, finder)
-      data = super.merge!(
-        has_blocked_issues_feature: project.feature_available?(:blocked_issues).to_s,
-        has_issuable_health_status_feature: project.feature_available?(:issuable_health_status).to_s,
-        has_issue_weights_feature: project.feature_available?(:issue_weights).to_s,
-        has_iterations_feature: project.feature_available?(:iterations).to_s,
-        has_multiple_issue_assignees_feature: project.feature_available?(:multiple_issue_assignees).to_s
+    override :common_issues_list_data
+    def common_issues_list_data(namespace, current_user)
+      super.merge(
+        has_blocked_issues_feature: namespace.feature_available?(:blocked_issues).to_s,
+        has_issuable_health_status_feature: namespace.feature_available?(:issuable_health_status).to_s,
+        has_issue_weights_feature: namespace.feature_available?(:issue_weights).to_s,
+        has_iterations_feature: namespace.feature_available?(:iterations).to_s,
+        has_multiple_issue_assignees_feature: namespace.feature_available?(:multiple_issue_assignees).to_s
       )
+    end
 
-      if project.feature_available?(:epics) && project.group
-        data[:group_epics_path] = group_epics_path(project.group, format: :json)
+    override :project_issues_list_data
+    def project_issues_list_data(project, current_user, finder)
+      super.tap do |data|
+        if project.feature_available?(:epics) && project.group
+          data[:group_epics_path] = group_epics_path(project.group, format: :json)
+        end
       end
+    end
 
-      data
+    override :group_issues_list_data
+    def group_issues_list_data(group, current_user, issues)
+      super.tap do |data|
+        data[:can_bulk_update] = (can?(current_user, :admin_issue, group) && group.feature_available?(:group_bulk_edit)).to_s
+
+        if group.feature_available?(:epics)
+          data[:group_epics_path] = group_epics_path(group, format: :json)
+        end
+      end
     end
   end
 end

ee/spec/helpers/ee/issues_helper_spec.rb

@@ -124,7 +124,7 @@ RSpec.describe EE::IssuesHelper do
     end
   end
 
-  describe '#issues_list_data' do
+  describe '#project_issues_list_data' do
     let(:current_user) { double.as_null_object }
     let(:finder) { double.as_null_object }
 
@@ -150,14 +150,14 @@ RSpec.describe EE::IssuesHelper do
           group_epics_path: group_epics_path(project.group, format: :json)
         }
 
-        expect(helper.issues_list_data(project, current_user, finder)).to include(expected)
+        expect(helper.project_issues_list_data(project, current_user, finder)).to include(expected)
       end
 
       context 'when project does not have group' do
         let(:project_with_no_group) { create :project }
 
         it 'does not return group_epics_path' do
-          expect(helper.issues_list_data(project_with_no_group, current_user, finder)).not_to include(:group_epics_path)
+          expect(helper.project_issues_list_data(project_with_no_group, current_user, finder)).not_to include(:group_epics_path)
         end
       end
     end
@@ -176,7 +176,60 @@ RSpec.describe EE::IssuesHelper do
           has_multiple_issue_assignees_feature: 'false'
         }
 
-        result = helper.issues_list_data(project, current_user, finder)
+        result = helper.project_issues_list_data(project, current_user, finder)
+
+        expect(result).to include(expected)
+        expect(result).not_to include(:group_epics_path)
+      end
+    end
+  end
+
+  describe '#group_issues_list_data' do
+    let(:current_user) { double.as_null_object }
+    let(:issues) { [] }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(current_user)
+      allow(helper).to receive(:can?).and_return(true)
+      allow(helper).to receive(:url_for).and_return('#')
+    end
+
+    context 'when features are enabled' do
+      before do
+        stub_licensed_features(blocked_issues: true, epics: true, group_bulk_edit: true, issuable_health_status: true, issue_weights: true, iterations: true, multiple_issue_assignees: true)
+      end
+
+      it 'returns data with licensed features enabled' do
+        expected = {
+          can_bulk_update: 'true',
+          has_blocked_issues_feature: 'true',
+          has_issuable_health_status_feature: 'true',
+          has_issue_weights_feature: 'true',
+          has_iterations_feature: 'true',
+          has_multiple_issue_assignees_feature: 'true',
+          group_epics_path: group_epics_path(project.group, format: :json)
+        }
+
+        expect(helper.group_issues_list_data(group, current_user, issues)).to include(expected)
+      end
+    end
+
+    context 'when features are disabled' do
+      before do
+        stub_licensed_features(blocked_issues: false, epics: false, group_bulk_edit: false, issuable_health_status: false, issue_weights: false, iterations: false, multiple_issue_assignees: false)
+      end
+
+      it 'returns data with licensed features disabled' do
+        expected = {
+          can_bulk_update: 'false',
+          has_blocked_issues_feature: 'false',
+          has_issuable_health_status_feature: 'false',
+          has_issue_weights_feature: 'false',
+          has_iterations_feature: 'false',
+          has_multiple_issue_assignees_feature: 'false'
+        }
+
+        result = helper.group_issues_list_data(group, current_user, issues)
 
         expect(result).to include(expected)
         expect(result).not_to include(:group_epics_path)

spec/frontend/issues_list/components/issues_list_app_spec.js

@@ -68,8 +68,8 @@ describe('IssuesListApp component', () => {
     hasBlockedIssuesFeature: true,
     hasIssueWeightsFeature: true,
     hasIterationsFeature: true,
+    isProject: true,
     isSignedIn: true,
-    issuesPath: 'path/to/issues',
     jiraIntegrationPath: 'jira/integration/path',
     newIssuePath: 'new/issue/path',
     rssPath: 'rss/path',
@@ -191,7 +191,7 @@ describe('IssuesListApp component', () => {
           setWindowLocation(search);
 
           wrapper = mountComponent({
-            provide: { ...defaultProvide, isSignedIn: true },
+            provide: { isSignedIn: true },
             mountFn: mount,
           });
 
@@ -208,7 +208,15 @@ describe('IssuesListApp component', () => {
 
       describe('when user is not signed in', () => {
         it('does not render', () => {
-          wrapper = mountComponent({ provide: { ...defaultProvide, isSignedIn: false } });
+          wrapper = mountComponent({ provide: { isSignedIn: false } });
+
+          expect(findCsvImportExportButtons().exists()).toBe(false);
+        });
+      });
+
+      describe('when in a group context', () => {
+        it('does not render', () => {
+          wrapper = mountComponent({ provide: { isProject: false } });
 
           expect(findCsvImportExportButtons().exists()).toBe(false);
         });
@@ -625,72 +633,89 @@ describe('IssuesListApp component', () => {
         ...defaultQueryResponse.data.project.issues.nodes[0],
         id: 'gid://gitlab/Issue/1',
         iid: '101',
-        title: 'Issue one',
+        reference: 'group/project#1',
+        webPath: '/group/project/-/issues/1',
       };
       const issueTwo = {
         ...defaultQueryResponse.data.project.issues.nodes[0],
         id: 'gid://gitlab/Issue/2',
         iid: '102',
-        title: 'Issue two',
+        reference: 'group/project#2',
+        webPath: '/group/project/-/issues/2',
       };
       const issueThree = {
         ...defaultQueryResponse.data.project.issues.nodes[0],
         id: 'gid://gitlab/Issue/3',
         iid: '103',
-        title: 'Issue three',
+        reference: 'group/project#3',
+        webPath: '/group/project/-/issues/3',
       };
       const issueFour = {
         ...defaultQueryResponse.data.project.issues.nodes[0],
         id: 'gid://gitlab/Issue/4',
         iid: '104',
-        title: 'Issue four',
+        reference: 'group/project#4',
+        webPath: '/group/project/-/issues/4',
       };
-      const response = {
+      const response = (isProject = true) => ({
         data: {
-          project: {
+          [isProject ? 'project' : 'group']: {
             issues: {
               ...defaultQueryResponse.data.project.issues,
               nodes: [issueOne, issueTwo, issueThree, issueFour],
             },
           },
         },
-      };
-
-      beforeEach(() => {
-        wrapper = mountComponent({ issuesQueryResponse: jest.fn().mockResolvedValue(response) });
-        jest.runOnlyPendingTimers();
       });
 
       describe('when successful', () => {
-        describe.each`
-          description                       | issueToMove   | oldIndex | newIndex | moveBeforeId    | moveAfterId
-          ${'to the beginning of the list'} | ${issueThree} | ${2}     | ${0}     | ${null}         | ${issueOne.id}
-          ${'down the list'}                | ${issueOne}   | ${0}     | ${1}     | ${issueTwo.id}  | ${issueThree.id}
-          ${'up the list'}                  | ${issueThree} | ${2}     | ${1}     | ${issueOne.id}  | ${issueTwo.id}
-          ${'to the end of the list'}       | ${issueTwo}   | ${1}     | ${3}     | ${issueFour.id} | ${null}
-        `(
-          'when moving issue $description',
-          ({ issueToMove, oldIndex, newIndex, moveBeforeId, moveAfterId }) => {
-            it('makes API call to reorder the issue', async () => {
-              findIssuableList().vm.$emit('reorder', { oldIndex, newIndex });
-
-              await waitForPromises();
-
-              expect(axiosMock.history.put[0]).toMatchObject({
-                url: joinPaths(defaultProvide.issuesPath, issueToMove.iid, 'reorder'),
-                data: JSON.stringify({
-                  move_before_id: getIdFromGraphQLId(moveBeforeId),
-                  move_after_id: getIdFromGraphQLId(moveAfterId),
-                }),
+        describe.each([true, false])('when isProject=%s', (isProject) => {
+          describe.each`
+            description                       | issueToMove   | oldIndex | newIndex | moveBeforeId    | moveAfterId
+            ${'to the beginning of the list'} | ${issueThree} | ${2}     | ${0}     | ${null}         | ${issueOne.id}
+            ${'down the list'}                | ${issueOne}   | ${0}     | ${1}     | ${issueTwo.id}  | ${issueThree.id}
+            ${'up the list'}                  | ${issueThree} | ${2}     | ${1}     | ${issueOne.id}  | ${issueTwo.id}
+            ${'to the end of the list'}       | ${issueTwo}   | ${1}     | ${3}     | ${issueFour.id} | ${null}
+          `(
+            'when moving issue $description',
+            ({ issueToMove, oldIndex, newIndex, moveBeforeId, moveAfterId }) => {
+              beforeEach(() => {
+                wrapper = mountComponent({
+                  provide: { isProject },
+                  issuesQueryResponse: jest.fn().mockResolvedValue(response(isProject)),
+                });
+                jest.runOnlyPendingTimers();
               });
-            });
-          },
-        );
+
+              it('makes API call to reorder the issue', async () => {
+                findIssuableList().vm.$emit('reorder', { oldIndex, newIndex });
+
+                await waitForPromises();
+
+                expect(axiosMock.history.put[0]).toMatchObject({
+                  url: joinPaths(issueToMove.webPath, 'reorder'),
+                  data: JSON.stringify({
+                    move_before_id: getIdFromGraphQLId(moveBeforeId),
+                    move_after_id: getIdFromGraphQLId(moveAfterId),
+                    group_full_path: isProject ? undefined : defaultProvide.fullPath,
+                  }),
+                });
+              });
+            },
+          );
+        });
       });
 
       describe('when unsuccessful', () => {
+        beforeEach(() => {
+          wrapper = mountComponent({
+            issuesQueryResponse: jest.fn().mockResolvedValue(response()),
+          });
+          jest.runOnlyPendingTimers();
+        });
+
         it('displays an error message', async () => {
-          axiosMock.onPut(joinPaths(defaultProvide.issuesPath, issueOne.iid, 'reorder')).reply(500);
+          axiosMock.onPut(joinPaths(issueOne.webPath, 'reorder')).reply(500);
 
           findIssuableList().vm.$emit('reorder', { oldIndex: 0, newIndex: 1 });
 

spec/frontend/issues_list/mock_data.js

@@ -29,6 +29,7 @@ export const getIssuesQueryResponse = {
             updatedAt: '2021-05-22T04:08:01Z',
             upvotes: 3,
             userDiscussionsCount: 4,
+            webPath: 'project/-/issues/789',
             webUrl: 'project/-/issues/789',
             assignees: {
               nodes: [

spec/helpers/issues_helper_spec.rb

@@ -318,8 +318,8 @@ RSpec.describe IssuesHelper do
         has_any_issues: project_issues(project).exists?.to_s,
         import_csv_issues_path: '#',
         initial_email: project.new_issuable_address(current_user, 'issue'),
+        is_project: 'true',
         is_signed_in: current_user.present?.to_s,
-        issues_path: project_issues_path(project),
         jira_integration_path: help_page_url('integration/jira/issues', anchor: 'view-jira-issues'),
         markdown_help_path: help_page_path('user/markdown'),
         max_attachment_size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes),
@@ -332,11 +332,11 @@ RSpec.describe IssuesHelper do
         sign_in_path: new_user_session_path
       }
 
-      expect(helper.issues_list_data(project, current_user, finder)).to include(expected)
+      expect(helper.project_issues_list_data(project, current_user, finder)).to include(expected)
     end
   end
 
-  describe '#issues_list_data' do
+  describe '#project_issues_list_data' do
     context 'when user is signed in' do
       it_behaves_like 'issues list data' do
         let(:current_user) { double.as_null_object }
@@ -350,6 +350,33 @@ RSpec.describe IssuesHelper do
     end
   end
 
+  describe '#group_issues_list_data' do
+    let(:group) { create(:group) }
+    let(:current_user) { double.as_null_object }
+    let(:issues) { [] }
+
+    it 'returns expected result' do
+      allow(helper).to receive(:current_user).and_return(current_user)
+      allow(helper).to receive(:can?).and_return(true)
+      allow(helper).to receive(:image_path).and_return('#')
+      allow(helper).to receive(:url_for).and_return('#')
+
+      expected = {
+        autocomplete_award_emojis_path: autocomplete_award_emojis_path,
+        calendar_path: '#',
+        empty_state_svg_path: '#',
+        full_path: group.full_path,
+        has_any_issues: issues.to_a.any?.to_s,
+        is_signed_in: current_user.present?.to_s,
+        jira_integration_path: help_page_url('integration/jira/issues', anchor: 'view-jira-issues'),
+        rss_path: '#',
+        sign_in_path: new_user_session_path
+      }
+
+      expect(helper.group_issues_list_data(group, current_user, issues)).to include(expected)
+    end
+  end
+
   describe '#issue_manual_ordering_class' do
     context 'when sorting by relative position' do
       before do