ref(GroupList): Prefer queryParams over query (#70027)

It can get confusing as to when to use `query` vs `queryParams`. This
simplifies the logic.

---------

Co-authored-by: Evan Purkhiser <evanpurkhiser@gmail.com>

static/app/components/issues/groupList.tsx

@@ -51,10 +51,13 @@ export type GroupListColumn =
 
 type Props = WithRouterProps & {
   api: Client;
-  endpointPath: string;
   orgSlug: string;
-  query: string;
+  queryParams: Record<string, number | string | string[] | undefined | null>;
   customStatsPeriod?: TimePeriodType;
+  /**
+   * Defaults to `/organizations/${orgSlug}/issues/`
+   */
+  endpointPath?: string;
   onFetchSuccess?: (
     groupListState: State,
     onCursor: (
@@ -64,8 +67,11 @@ type Props = WithRouterProps & {
       pageDiff: number
     ) => void
   ) => void;
+  /**
+   * Use `query` within `queryParams` for passing the parameter to the endpoint
+   */
+  query?: string;
   queryFilterDescription?: string;
-  queryParams?: Record<string, number | string | string[] | undefined | null>;
   renderEmptyMessage?: () => React.ReactNode;
   renderErrorMessage?: (props: {detail: string}, retry: () => void) => React.ReactNode;
   // where the group list is rendered
@@ -142,7 +148,9 @@ class GroupList extends Component<Props, State> {
 
     const endpoint = this.getGroupListEndpoint();
 
-    const parsedQuery = parseSearch((queryParams ?? this.getQueryParams()).query);
+    const parsedQuery = parseSearch(
+      (queryParams ?? this.getQueryParams()).query as string
+    );
     const hasLogicBoolean = parsedQuery
       ? treeResultLocator<boolean>({
           tree: parsedQuery,

static/app/views/issueDetails/groupRelatedIssues/index.tsx

@@ -94,11 +94,9 @@ function GroupRelatedIssues({params}: Props) {
                     </LinkButton>
                   </TextButtonWrapper>
                   <GroupList
-                    endpointPath={`/organizations/${orgSlug}/issues/`}
                     orgSlug={orgSlug}
                     queryParams={{query: `issue.id:[${sameRootCauseIssues}]`}}
-                    query=""
-                    source="related-issues-tab"
+                    source="similar-issues-tab"
                     canSelectGroups={false}
                     withChart={false}
                   />
@@ -133,11 +131,9 @@ function GroupRelatedIssues({params}: Props) {
                     </LinkButton>
                   </TextButtonWrapper>
                   <GroupList
-                    endpointPath={`/organizations/${orgSlug}/issues/`}
                     orgSlug={orgSlug}
                     queryParams={{query: `issue.id:[${traceConnectedIssues}]`}}
-                    query=""
-                    source="related-issues-tab"
+                    source="similar-issues-tab"
                     canSelectGroups={false}
                     withChart={false}
                   />

static/app/views/monitors/components/monitorIssues.tsx

@@ -93,14 +93,12 @@ function MonitorIssues({orgSlug, monitor, monitorEnvs}: Props) {
       </ControlsWrapper>
       <GroupList
         orgSlug={orgSlug}
-        endpointPath={`/organizations/${orgSlug}/issues/`}
         queryParams={{
           query: issueQuery,
           project: monitor.project.id,
           limit: 20,
           ...timeProps,
         }}
-        query=""
         renderEmptyMessage={MonitorIssuesEmptyMessage}
         canSelectGroups={false}
         withPagination={false}

static/app/views/performance/transactionSummary/transactionOverview/relatedIssues.tsx

@@ -30,8 +30,8 @@ type Props = {
 };
 
 class RelatedIssues extends Component<Props> {
-  getIssuesEndpoint() {
-    const {transaction, organization, start, end, statsPeriod, location} = this.props;
+  getIssuesEndpointQueryParams() {
+    const {transaction, start, end, statsPeriod, location} = this.props;
 
     const queryParams = {
       start,
@@ -48,7 +48,6 @@ class RelatedIssues extends Component<Props> {
       .setFilterValues('transaction', [transaction]);
 
     return {
-      path: `/organizations/${organization.slug}/issues/`,
       queryParams: {
         ...queryParams,
         query: currentFilter.formatString(),
@@ -88,7 +87,7 @@ class RelatedIssues extends Component<Props> {
 
   render() {
     const {organization} = this.props;
-    const {path, queryParams} = this.getIssuesEndpoint();
+    const {queryParams} = this.getIssuesEndpointQueryParams();
     const issueSearch = {
       pathname: `/organizations/${organization.slug}/issues/`,
       query: {referrer: 'performance-related-issues', ...queryParams},
@@ -111,9 +110,7 @@ class RelatedIssues extends Component<Props> {
         <TableWrapper>
           <GroupList
             orgSlug={organization.slug}
-            endpointPath={path}
             queryParams={queryParams}
-            query=""
             canSelectGroups={false}
             renderEmptyMessage={this.renderEmptyMessage}
             withChart={false}

static/app/views/projectDetail/projectIssues.tsx

@@ -278,9 +278,7 @@ function ProjectIssues({organization, location, projectId, query, api}: Props) {
 
       <GroupList
         orgSlug={organization.slug}
-        endpointPath={endpointPath}
         queryParams={queryParams}
-        query=""
         canSelectGroups={false}
         renderEmptyMessage={renderEmptyMessage}
         withChart={false}