feat(release-comparison): Add issue filter tabs to release details (#26826)

* feat(release-comparison): Add issue filter tabs to release details

Add issue filter tabs to release details for Release Comparison feature.

FIXES WOR-968

* refactor, use different endpoints, fix styles

* fix query for count for unhandled

* refactor

* refactor

* fix: double refetch, correct counts, race condition

* style(lint): Auto commit lint changes

* update tests

* refactor, add new color aliases for light/dark mode

* refactor, include 0 in button count

* null count init

* fix ts count type

* nullable queryCount

Co-authored-by: Matej Minar <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

static/app/components/buttonBar.tsx

@@ -125,4 +125,5 @@ const ButtonGrid = styled('div')<{gap: ValidSize; merged: boolean}>`
   ${p => p.merged && MergedStyles}
 `;
 
+export {ButtonGrid, MergedStyles};
 export default ButtonBar;

static/app/components/issues/groupList.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {browserHistory, withRouter, WithRouterProps} from 'react-router';
 import * as Sentry from '@sentry/react';
 import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
 import * as qs from 'query-string';
 
 import {fetchOrgMembers, indexMembersByProject} from 'app/actionCreators/members';
@@ -85,11 +86,16 @@ class GroupList extends React.Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
+    const ignoredQueryParams = ['end'];
+
     if (
       prevProps.orgId !== this.props.orgId ||
       prevProps.endpointPath !== this.props.endpointPath ||
       prevProps.query !== this.props.query ||
-      !isEqual(prevProps.queryParams, this.props.queryParams)
+      !isEqual(
+        omit(prevProps.queryParams, ignoredQueryParams),
+        omit(this.props.queryParams, ignoredQueryParams)
+      )
     ) {
       this.fetchData();
     }
@@ -106,6 +112,7 @@ class GroupList extends React.Component<Props, State> {
   fetchData = () => {
     GroupStore.loadInitialData([]);
     const {api, orgId} = this.props;
+    api.clear();
 
     this.setState({loading: true, error: false});
 

static/app/components/queryCount.tsx

@@ -1,7 +1,7 @@
 import {defined} from 'app/utils';
 
 type Props = {
-  count?: number;
+  count?: number | null;
   max?: number;
   hideIfEmpty?: boolean;
   hideParens?: boolean;

static/app/utils/theme.tsx

@@ -235,6 +235,16 @@ const lightAliases = {
    * Search filter "token" border
    */
   searchTokenBorder: '#B5DAFF',
+
+  /**
+   * Count on button when active
+   */
+  buttonCountActive: colors.gray100,
+
+  /**
+   * Count on button
+   */
+  buttonCount: colors.gray400,
 };
 
 const dataCategory = {
@@ -639,6 +649,8 @@ const darkAliases = {
   badgeText: colors.black,
   searchTokenBackground: '#1F1A3D',
   searchTokenBorder: '#554E80',
+  buttonCountActive: colors.gray100,
+  buttonCount: colors.gray400,
 };
 
 export const lightTheme = {