ref(js): Convert GroupEvents to a FC (#50338)

static/app/views/issueDetails/groupEvents.spec.tsx

@@ -10,14 +10,13 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {Group, Organization} from 'sentry/types';
-import {GroupEvents} from 'sentry/views/issueDetails/groupEvents';
+import GroupEvents from 'sentry/views/issueDetails/groupEvents';
 
 let location: Location;
 
 describe('groupEvents', () => {
   const requests: {[requestName: string]: jest.Mock} = {};
   const baseProps = Object.freeze({
-    api: new MockApiClient(),
     params: {orgId: 'orgId', groupId: '1'},
     route: {},
     routeParams: {},
@@ -123,14 +122,10 @@ describe('groupEvents', () => {
   });
 
   it('fetches and renders a table of events', async () => {
-    render(
-      <GroupEvents
-        {...baseProps}
-        organization={organization}
-        location={{...location, query: {}}}
-      />,
-      {context: routerContext, organization}
-    );
+    render(<GroupEvents {...baseProps} location={{...location, query: {}}} />, {
+      context: routerContext,
+      organization,
+    });
 
     expect(await screen.findByText('id123')).toBeInTheDocument();
 
@@ -145,14 +140,10 @@ describe('groupEvents', () => {
   });
 
   it('handles search', async () => {
-    render(
-      <GroupEvents
-        {...baseProps}
-        organization={organization}
-        location={{...location, query: {}}}
-      />,
-      {context: routerContext, organization}
-    );
+    render(<GroupEvents {...baseProps} location={{...location, query: {}}} />, {
+      context: routerContext,
+      organization,
+    });
 
     const list = [
       {searchTerm: '', expectedQuery: ''},
@@ -180,7 +171,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -201,7 +191,6 @@ describe('groupEvents', () => {
       <GroupEvents
         {...baseProps}
         group={group}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -226,7 +215,6 @@ describe('groupEvents', () => {
       <GroupEvents
         {...baseProps}
         group={group}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -241,15 +229,12 @@ describe('groupEvents', () => {
   });
 
   it('does not make attachments request, async when feature not enabled', async () => {
-    const org = initializeOrg();
-
     render(
       <GroupEvents
         {...baseProps}
-        organization={org.organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
-      {context: routerContext, organization}
+      {context: routerContext, organization: {...organization, features: []}}
     );
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
 
@@ -262,7 +247,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -278,7 +262,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -312,7 +295,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -345,7 +327,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -362,7 +343,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -385,7 +365,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging'], sort: 'user'}}}
       />,
       {context: routerContext, organization}
@@ -403,7 +382,6 @@ describe('groupEvents', () => {
       <GroupEvents
         {...baseProps}
         group={group}
-        organization={organization}
         location={{
           ...location,
           query: {
@@ -436,7 +414,6 @@ describe('groupEvents', () => {
     render(
       <GroupEvents
         {...baseProps}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}
@@ -454,7 +431,6 @@ describe('groupEvents', () => {
       <GroupEvents
         {...baseProps}
         group={group}
-        organization={organization}
         location={{...location, query: {environment: ['prod', 'staging']}}}
       />,
       {context: routerContext, organization}

static/app/views/issueDetails/groupEvents.tsx

@@ -1,27 +1,19 @@
-import {Component} from 'react';
+import {useCallback} from 'react';
 import {browserHistory, RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
-import {Client} from 'sentry/api';
 import EventSearchBar from 'sentry/components/events/searchBar';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {space} from 'sentry/styles/space';
-import {Group, Organization} from 'sentry/types';
-import {handleRouteLeave} from 'sentry/utils/useCleanQueryParamsOnRouteLeave';
-import withApi from 'sentry/utils/withApi';
+import {Group} from 'sentry/types';
+import useCleanQueryParamsOnRouteLeave from 'sentry/utils/useCleanQueryParamsOnRouteLeave';
+import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import withOrganization from 'sentry/utils/withOrganization';
 
 import AllEventsTable from './allEventsTable';
 
-type Props = {
-  api: Client;
+interface Props extends RouteComponentProps<{groupId: string}, {}> {
   group: Group;
-  organization: Organization;
-} & RouteComponentProps<{groupId: string}, {}>;
-
-interface State {
-  query: string;
 }
 
 const excludedTags = [
@@ -33,86 +25,51 @@ const excludedTags = [
   'transaction.status',
 ];
 
-class GroupEvents extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    const queryParams = this.props.location.query;
-
-    this.state = {
-      query: queryParams.query || '',
-    };
-  }
-
-  componentDidMount() {
-    this._unsubscribeHandleRouteLeave = browserHistory.listen(newLocation =>
-      handleRouteLeave({
-        fieldsToClean: ['cursor'],
-        newLocation,
-        oldPathname: this.props.location.pathname,
-      })
-    );
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    if (this.props.location.search !== prevProps.location.search) {
-      const queryParams = this.props.location.query;
-
-      this.setState({query: queryParams.query});
-    }
-  }
-
-  componentWillUnmount() {
-    this._unsubscribeHandleRouteLeave?.();
-  }
-
-  _unsubscribeHandleRouteLeave: undefined | ReturnType<typeof browserHistory.listen>;
-
-  handleSearch = (query: string) => {
-    const targetQueryParams = {...this.props.location.query};
-    targetQueryParams.query = query;
-    const {organization} = this.props;
-    const {groupId} = this.props.params;
-
-    browserHistory.push(
-      normalizeUrl({
-        pathname: `/organizations/${organization.slug}/issues/${groupId}/events/`,
-        query: targetQueryParams,
-      })
-    );
-  };
-
-  render() {
-    return (
-      <Layout.Body>
-        <Layout.Main fullWidth>
-          <AllEventsFilters>
-            <EventSearchBar
-              organization={this.props.organization}
-              defaultQuery=""
-              onSearch={this.handleSearch}
-              excludedTags={excludedTags}
-              query={this.state.query}
-              hasRecentSearches={false}
-            />
-          </AllEventsFilters>
-          <AllEventsTable
-            issueId={this.props.group.id}
-            location={this.props.location}
-            organization={this.props.organization}
-            group={this.props.group}
+function GroupEvents({params, location, group}: Props) {
+  const organization = useOrganization();
+
+  const {groupId} = params;
+
+  useCleanQueryParamsOnRouteLeave({fieldsToClean: ['cursor']});
+
+  const handleSearch = useCallback(
+    (query: string) =>
+      browserHistory.push(
+        normalizeUrl({
+          pathname: `/organizations/${organization.slug}/issues/${groupId}/events/`,
+          query: {...location.query, query},
+        })
+      ),
+    [location, organization, groupId]
+  );
+
+  return (
+    <Layout.Body>
+      <Layout.Main fullWidth>
+        <AllEventsFilters>
+          <EventSearchBar
+            organization={organization}
+            defaultQuery=""
+            onSearch={handleSearch}
             excludedTags={excludedTags}
+            query={location.query?.query ?? ''}
+            hasRecentSearches={false}
           />
-        </Layout.Main>
-      </Layout.Body>
-    );
-  }
+        </AllEventsFilters>
+        <AllEventsTable
+          issueId={group.id}
+          location={location}
+          organization={organization}
+          group={group}
+          excludedTags={excludedTags}
+        />
+      </Layout.Main>
+    </Layout.Body>
+  );
 }
 
 const AllEventsFilters = styled('div')`
   margin-bottom: ${space(2)};
 `;
 
-export {GroupEvents};
-
-export default withOrganization(withApi(GroupEvents));
+export default GroupEvents;