1 files changed, 75 insertions, 34 deletions

diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index a43aed6c521..b81ab103271 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -13,6 +13,8 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import IssueCardTimeInfo from 'ee_else_ce/issues/list/components/issue_card_time_info.vue';
 import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql';
 import getIssuesCountsQuery from 'ee_else_ce/issues/list/queries/get_issues_counts.query.graphql';
+import getIssuesWithoutCrmQuery from 'ee_else_ce/issues/list/queries/get_issues_without_crm.query.graphql';
+import getIssuesCountsWithoutCrmQuery from 'ee_else_ce/issues/list/queries/get_issues_counts_without_crm.query.graphql';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { TYPE_USER } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -45,6 +47,7 @@ import {
   PAGE_SIZE,
   PARAM_PAGE_AFTER,
   PARAM_PAGE_BEFORE,
+  PARAM_SORT,
   PARAM_STATE,
   RELATIVE_POSITION_ASC,
   TOKEN_TYPE_ASSIGNEE,
@@ -122,6 +125,7 @@ export default {
     'isAnonymousSearchDisabled',
     'isIssueRepositioningDisabled',
     'isProject',
+    'isPublicVisibilityRestricted',
     'isSignedIn',
     'jiraIntegrationPath',
     'newIssuePath',
@@ -138,48 +142,24 @@ export default {
     },
   },
   data() {
-    const pageAfter = getParameterByName(PARAM_PAGE_AFTER);
-    const pageBefore = getParameterByName(PARAM_PAGE_BEFORE);
-    const state = getParameterByName(PARAM_STATE);
-    const defaultSortKey = state === IssuableStates.Closed ? UPDATED_DESC : CREATED_DESC;
-    const dashboardSortKey = getSortKey(this.initialSort);
-    const graphQLSortKey =
-      isSortKey(this.initialSort?.toUpperCase()) && this.initialSort.toUpperCase();
-
-    // The initial sort is an old enum value when it is saved on the dashboard issues page.
-    // The initial sort is a GraphQL enum value when it is saved on the Vue issues list page.
-    let sortKey = dashboardSortKey || graphQLSortKey || defaultSortKey;
-
-    if (this.isIssueRepositioningDisabled && sortKey === RELATIVE_POSITION_ASC) {
-      this.showIssueRepositioningMessage();
-      sortKey = defaultSortKey;
-    }
-
-    const isSearchDisabled =
-      this.isAnonymousSearchDisabled &&
-      !this.isSignedIn &&
-      window.location.search.includes('search=');
-
-    if (isSearchDisabled) {
-      this.showAnonymousSearchingMessage();
-    }
-
     return {
       exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
-      filterTokens: isSearchDisabled ? [] : getFilterTokens(window.location.search),
+      filterTokens: [],
       issues: [],
       issuesCounts: {},
       issuesError: null,
       pageInfo: {},
-      pageParams: getInitialPageParams(sortKey, pageAfter, pageBefore),
+      pageParams: {},
       showBulkEditSidebar: false,
-      sortKey,
-      state: state || IssuableStates.Opened,
+      sortKey: CREATED_DESC,
+      state: IssuableStates.Opened,
     };
   },
   apollo: {
     issues: {
-      query: getIssuesQuery,
+      query() {
+        return this.hasCrmParameter ? getIssuesQuery : getIssuesWithoutCrmQuery;
+      },
       variables() {
         return this.queryVariables;
       },
@@ -203,7 +183,9 @@ export default {
       debounce: 200,
     },
     issuesCounts: {
-      query: getIssuesCountsQuery,
+      query() {
+        return this.hasCrmParameter ? getIssuesCountsQuery : getIssuesCountsWithoutCrmQuery;
+      },
       variables() {
         return this.queryVariables;
       },
@@ -228,6 +210,7 @@ export default {
       const isIidSearch = ISSUE_REFERENCE.test(this.searchQuery);
       return {
         fullPath: this.fullPath,
+        hideUsers: this.isPublicVisibilityRestricted && !this.isSignedIn,
         iid: isIidSearch ? this.searchQuery.slice(1) : undefined,
         isProject: this.isProject,
         isSignedIn: this.isSignedIn,
@@ -415,8 +398,22 @@ export default {
         ...this.urlFilterParams,
       };
     },
+    hasCrmParameter() {
+      return (
+        window.location.search.includes('crm_contact_id=') ||
+        window.location.search.includes('crm_organization_id=')
+      );
+    },
+  },
+  watch: {
+    $route(newValue, oldValue) {
+      if (newValue.fullPath !== oldValue.fullPath) {
+        this.updateData(getParameterByName(PARAM_SORT));
+      }
+    },
   },
   created() {
+    this.updateData(this.initialSort);
     this.cache = {};
   },
   mounted() {
@@ -516,6 +513,8 @@ export default {
         this.pageParams = getInitialPageParams(this.sortKey);
       }
       this.state = state;
+
+      this.$router.push({ query: this.urlParams });
     },
     handleDismissAlert() {
       this.issuesError = null;
@@ -525,8 +524,11 @@ export default {
         this.showAnonymousSearchingMessage();
         return;
       }
+
       this.pageParams = getInitialPageParams(this.sortKey);
       this.filterTokens = filter;
+
+      this.$router.push({ query: this.urlParams });
     },
     handleNextPage() {
       this.pageParams = {
@@ -534,6 +536,8 @@ export default {
         firstPageSize: PAGE_SIZE,
       };
       scrollUp();
+
+      this.$router.push({ query: this.urlParams });
     },
     handlePreviousPage() {
       this.pageParams = {
@@ -541,6 +545,8 @@ export default {
         lastPageSize: PAGE_SIZE,
       };
       scrollUp();
+
+      this.$router.push({ query: this.urlParams });
     },
     handleReorder({ newIndex, oldIndex }) {
       const issueToMove = this.issues[oldIndex];
@@ -592,6 +598,8 @@ export default {
       if (this.isSignedIn) {
         this.saveSortPreference(sortKey);
       }
+
+      this.$router.push({ query: this.urlParams });
     },
     saveSortPreference(sortKey) {
       this.$apollo
@@ -623,6 +631,39 @@ export default {
     toggleBulkEditSidebar(showBulkEditSidebar) {
       this.showBulkEditSidebar = showBulkEditSidebar;
     },
+    updateData(sortValue) {
+      const pageAfter = getParameterByName(PARAM_PAGE_AFTER);
+      const pageBefore = getParameterByName(PARAM_PAGE_BEFORE);
+      const state = getParameterByName(PARAM_STATE);
+
+      const defaultSortKey = state === IssuableStates.Closed ? UPDATED_DESC : CREATED_DESC;
+      const dashboardSortKey = getSortKey(sortValue);
+      const graphQLSortKey = isSortKey(sortValue?.toUpperCase()) && sortValue.toUpperCase();
+
+      // The initial sort is an old enum value when it is saved on the dashboard issues page.
+      // The initial sort is a GraphQL enum value when it is saved on the Vue issues list page.
+      let sortKey = dashboardSortKey || graphQLSortKey || defaultSortKey;
+
+      if (this.isIssueRepositioningDisabled && sortKey === RELATIVE_POSITION_ASC) {
+        this.showIssueRepositioningMessage();
+        sortKey = defaultSortKey;
+      }
+
+      const isSearchDisabled =
+        this.isAnonymousSearchDisabled &&
+        !this.isSignedIn &&
+        window.location.search.includes('search=');
+
+      if (isSearchDisabled) {
+        this.showAnonymousSearchingMessage();
+      }
+
+      this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
+      this.filterTokens = isSearchDisabled ? [] : getFilterTokens(window.location.search);
+      this.pageParams = getInitialPageParams(sortKey, pageAfter, pageBefore);
+      this.sortKey = sortKey;
+      this.state = state || IssuableStates.Opened;
+    },
   },
 };
 </script>
@@ -649,10 +690,10 @@ export default {
       :is-manual-ordering="isManualOrdering"
       :show-bulk-edit-sidebar="showBulkEditSidebar"
       :show-pagination-controls="showPaginationControls"
-      :use-keyset-pagination="true"
+      sync-filter-and-sort
+      use-keyset-pagination
       :has-next-page="pageInfo.hasNextPage"
       :has-previous-page="pageInfo.hasPreviousPage"
-      :url-params="urlParams"
       @click-tab="handleClickTab"
       @dismiss-alert="handleDismissAlert"
       @filter="handleFilter"