ref: Let functional components call useProjects() & useOrganization()

Author: ryan953

static/app/views/performance/transactionEvents.spec.tsx

@@ -2,12 +2,17 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {WebVital} from 'sentry/utils/fields';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 import TransactionEvents from 'sentry/views/performance/transactionSummary/transactionEvents';
 
+jest.mock('sentry/utils/useOrganization');
+jest.mock('sentry/utils/useProjects');
+
 // XXX(epurkhiser): This appears to also be tested by ./transactionSummary/transactionEvents/index.spec.tsx
 
 type Data = {
@@ -159,8 +164,18 @@ describe('Performance > TransactionSummary', function () {
     const {organization, router, routerContext} = initializeData();
 
     ProjectsStore.loadInitialData(organization.projects);
+    jest.mocked(useOrganization).mockReturnValue(organization);
+    jest.mocked(useProjects).mockReturnValue({
+      projects: organization.projects,
+      onSearch: jest.fn(),
+      placeholders: [],
+      fetching: false,
+      hasMore: null,
+      fetchError: null,
+      initiallyLoaded: false,
+    });
 
-    render(<TransactionEvents organization={organization} location={router.location} />, {
+    render(<TransactionEvents location={router.location} />, {
       context: routerContext,
     });
 
@@ -193,11 +208,23 @@ describe('Performance > TransactionSummary', function () {
     const {organization, router, routerContext} = initializeData();
 
     ProjectsStore.loadInitialData(organization.projects);
+    jest.mocked(useOrganization).mockReturnValue(organization);
+    jest.mocked(useProjects).mockReturnValue({
+      projects: organization.projects,
+      onSearch: jest.fn(),
+      placeholders: [],
+      fetching: false,
+      hasMore: null,
+      fetchError: null,
+      initiallyLoaded: false,
+    });
 
-    render(<TransactionEvents organization={organization} location={router.location} />, {
+    render(<TransactionEvents location={router.location} />, {
       context: routerContext,
     });
 
+    await waitFor(() => screen.findByText('operation duration'));
+
     expect(await screen.findByText('operation duration')).toBeInTheDocument();
     expect(screen.getAllByRole('columnheader')).toHaveLength(6);
 
@@ -208,11 +235,23 @@ describe('Performance > TransactionSummary', function () {
     const {organization, router, routerContext} = initializeData();
 
     ProjectsStore.loadInitialData(organization.projects);
+    jest.mocked(useOrganization).mockReturnValue(organization);
+    jest.mocked(useProjects).mockReturnValue({
+      projects: organization.projects,
+      onSearch: jest.fn(),
+      placeholders: [],
+      fetching: false,
+      hasMore: null,
+      fetchError: null,
+      initiallyLoaded: false,
+    });
 
-    render(<TransactionEvents organization={organization} location={router.location} />, {
+    render(<TransactionEvents location={router.location} />, {
       context: routerContext,
     });
 
+    await waitFor(() => screen.findAllByRole('columnheader'));
+
     const tableHeader = await screen.findAllByRole('columnheader');
     expect(tableHeader).toHaveLength(6);
     expect(tableHeader[0]).toHaveTextContent('event id');
@@ -239,8 +278,18 @@ describe('Performance > TransactionSummary', function () {
     });
 
     ProjectsStore.loadInitialData(organization.projects);
+    jest.mocked(useOrganization).mockReturnValue(organization);
+    jest.mocked(useProjects).mockReturnValue({
+      projects: organization.projects,
+      onSearch: jest.fn(),
+      placeholders: [],
+      fetching: false,
+      hasMore: null,
+      fetchError: null,
+      initiallyLoaded: false,
+    });
 
-    render(<TransactionEvents organization={organization} location={router.location} />, {
+    render(<TransactionEvents location={router.location} />, {
       context: routerContext,
     });
 

static/app/views/performance/transactionSummary/teamKeyTransactionButton.tsx

@@ -7,8 +7,8 @@ import {t, tn} from 'sentry/locale';
 import type {Organization, Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
 import type EventView from 'sentry/utils/discover/eventView';
+import useProjects from 'sentry/utils/useProjects';
 import {useTeams} from 'sentry/utils/useTeams';
-import withProjects from 'sentry/utils/withProjects';
 
 type BaseProps = {
   organization: Organization;
@@ -77,15 +77,14 @@ function TeamKeyTransactionButton({
 
 type WrapperProps = BaseProps & {
   eventView: EventView;
-  projects: Project[];
 };
 
-function TeamKeyTransactionButtonWrapper({
+export default function TeamKeyTransactionButtonWrapper({
   eventView,
   organization,
-  projects,
   ...props
 }: WrapperProps) {
+  const {projects} = useProjects();
   const {teams, initiallyLoaded} = useTeams({provideUserTeams: true});
 
   if (eventView.project.length !== 1) {
@@ -127,5 +126,3 @@ function TeamKeyTransactionButtonWrapper({
     </TeamKeyTransactionManager.Provider>
   );
 }
-
-export default withProjects(TeamKeyTransactionButtonWrapper);

static/app/views/performance/transactionSummary/transactionAnomalies/index.tsx

@@ -1,10 +1,9 @@
 import type {Location} from 'history';
 
 import {t} from 'sentry/locale';
-import type {Organization, Project} from 'sentry/types';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
-import withOrganization from 'sentry/utils/withOrganization';
-import withProjects from 'sentry/utils/withProjects';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 
 import PageLayout from '../pageLayout';
 import Tab from '../tabs';
@@ -14,12 +13,11 @@ import {generateAnomaliesEventView} from './utils';
 
 type Props = {
   location: Location;
-  organization: Organization;
-  projects: Project[];
 };
 
-function TransactionAnomalies(props: Props) {
-  const {location, organization, projects} = props;
+export default function TransactionAnomalies({location}: Props) {
+  const organization = useOrganization();
+  const {projects} = useProjects();
 
   return (
     <MEPSettingProvider>
@@ -46,5 +44,3 @@ function getDocumentTitle(transactionName: string): string {
 
   return [t('Summary'), t('Performance')].join(' - ');
 }
-
-export default withProjects(withOrganization(TransactionAnomalies));

static/app/views/performance/transactionSummary/transactionEvents/eventsTable.spec.tsx

@@ -11,8 +11,11 @@ import {
   SPAN_OP_BREAKDOWN_FIELDS,
   SPAN_OP_RELATIVE_BREAKDOWN_FIELD,
 } from 'sentry/utils/discover/fields';
+import useOrganization from 'sentry/utils/useOrganization';
 import EventsTable from 'sentry/views/performance/transactionSummary/transactionEvents/eventsTable';
 
+jest.mock('sentry/utils/useOrganization');
+
 type Data = {
   features?: string[];
 };
@@ -93,6 +96,7 @@ describe('Performance GridEditable Table', function () {
   ];
   let fields = EVENTS_TABLE_RESPONSE_FIELDS;
   const organization = OrganizationFixture();
+  jest.mocked(useOrganization).mockReturnValue(organization);
   const transactionName = 'transactionName';
   let data;
 

static/app/views/performance/transactionSummary/transactionEvents/index.spec.tsx

@@ -6,17 +6,19 @@ import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 import TransactionEvents from 'sentry/views/performance/transactionSummary/transactionEvents';
 
 import {EVENTS_TABLE_RESPONSE_FIELDS, MOCK_EVENTS_TABLE_DATA} from './eventsTable.spec';
 
+jest.mock('sentry/utils/useOrganization');
+jest.mock('sentry/utils/useProjects');
+
 function WrappedComponent({data}) {
   return (
     <MEPSettingProvider>
-      <TransactionEvents
-        organization={data.organization}
-        location={data.router.location}
-      />
+      <TransactionEvents location={data.router.location} />
     </MEPSettingProvider>
   );
 }
@@ -132,6 +134,16 @@ const initializeData = (settings?: InitializeDataSettings) => {
   };
   const data = _initializeData(settings);
   act(() => void ProjectsStore.loadInitialData(data.organization.projects));
+  jest.mocked(useOrganization).mockReturnValue(data.organization);
+  jest.mocked(useProjects).mockReturnValue({
+    projects: data.organization.projects,
+    onSearch: jest.fn(),
+    placeholders: [],
+    fetching: false,
+    hasMore: null,
+    fetchError: null,
+    initiallyLoaded: false,
+  });
   return data;
 };
 
@@ -164,10 +176,10 @@ describe('Performance > Transaction Summary > Transaction Events > Index', () =>
     const data = initializeData();
 
     render(<WrappedComponent data={data} />, {context: data.routerContext});
+
     const percentileButton = await screen.findByRole('button', {
       name: /percentile p100/i,
     });
-
     await userEvent.click(percentileButton);
 
     const p50 = screen.getByRole('option', {name: 'p50'});

static/app/views/performance/transactionSummary/transactionEvents/index.tsx

@@ -4,7 +4,7 @@ import type {Location} from 'history';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
-import type {Organization, Project} from 'sentry/types';
+import type {Organization} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
@@ -17,8 +17,8 @@ import {WebVital} from 'sentry/utils/fields';
 import {removeHistogramQueryStrings} from 'sentry/utils/performance/histogram';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import withOrganization from 'sentry/utils/withOrganization';
-import withProjects from 'sentry/utils/withProjects';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 
 import {
   decodeFilterFromLocation,
@@ -44,12 +44,11 @@ type PercentileValues = Record<EventsDisplayFilterName, number>;
 
 type Props = {
   location: Location;
-  organization: Organization;
-  projects: Project[];
 };
 
-function TransactionEvents(props: Props) {
-  const {location, organization, projects} = props;
+export default function TransactionEvents({location}: Props) {
+  const organization = useOrganization();
+  const {projects} = useProjects();
 
   return (
     <PageLayout
@@ -268,5 +267,3 @@ function generateEventView({
     location
   );
 }
-
-export default withProjects(withOrganization(TransactionEvents));

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

@@ -19,7 +19,7 @@ import {MAX_QUERY_LENGTH} from 'sentry/constants';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Organization, Project} from 'sentry/types';
+import type {Organization} from 'sentry/types';
 import {defined, generateQueryWithTag} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import type EventView from 'sentry/utils/discover/eventView';
@@ -34,8 +34,8 @@ import type {MetricsEnhancedPerformanceDataContext} from 'sentry/utils/performan
 import {useMEPDataContext} from 'sentry/utils/performance/contexts/metricsEnhancedPerformanceDataContext';
 import {decodeScalar} from 'sentry/utils/queryString';
 import projectSupportsReplay from 'sentry/utils/replays/projectSupportsReplay';
+import useProjects from 'sentry/utils/useProjects';
 import {useRoutes} from 'sentry/utils/useRoutes';
-import withProjects from 'sentry/utils/withProjects';
 import type {Actions} from 'sentry/views/discover/table/cellAction';
 import {updateQuery} from 'sentry/views/discover/table/cellAction';
 import type {TableColumn} from 'sentry/views/discover/table/types';
@@ -81,20 +81,18 @@ type Props = {
   onChangeFilter: (newFilter: SpanOperationBreakdownFilter) => void;
   organization: Organization;
   projectId: string;
-  projects: Project[];
   spanOperationBreakdownFilter: SpanOperationBreakdownFilter;
   totalValues: Record<string, number> | null;
   transactionName: string;
   unfilteredTotalValues?: Record<string, number> | null;
 };
 
-function SummaryContent({
+export default function SummaryContent({
   eventView,
   location,
   totalValues,
   spanOperationBreakdownFilter,
   organization,
-  projects,
   isLoading,
   error,
   projectId,
@@ -104,6 +102,7 @@ function SummaryContent({
 }: Props) {
   const routes = useRoutes();
   const mepDataContext = useMEPDataContext();
+  const {projects} = useProjects();
 
   function handleSearch(query: string) {
     const queryParams = normalizeDateTimeParams({
@@ -600,5 +599,3 @@ const StyledSearchBar = styled(SearchBar)`
 const StyledIconWarning = styled(IconWarning)`
   display: block;
 `;
-
-export default withProjects(SummaryContent);