perf(js): Stop importing a bunch of organizationGroupDetails in routes (#28020)

static/app/routes.tsx

@@ -23,7 +23,7 @@ import OrganizationContext from 'app/views/organizationContext';
 import OrganizationDetails, {
   LightWeightOrganizationDetails,
 } from 'app/views/organizationDetails';
-import {TAB} from 'app/views/organizationGroupDetails/header';
+import {Tab} from 'app/views/organizationGroupDetails/types';
 import OrganizationRoot from 'app/views/organizationRoot';
 import ProjectEventRedirect from 'app/views/projectEventRedirect';
 import redirectDeprecatedProjectRoute from 'app/views/projects/redirectDeprecatedProjectRoute';
@@ -933,7 +933,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.DETAILS,
+                currentTab: Tab.DETAILS,
                 isEventRoute: false,
               }}
             />
@@ -944,7 +944,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.ACTIVITY,
+                currentTab: Tab.ACTIVITY,
                 isEventRoute: false,
               }}
             />
@@ -955,7 +955,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.EVENTS,
+                currentTab: Tab.EVENTS,
                 isEventRoute: false,
               }}
             />
@@ -966,7 +966,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.TAGS,
+                currentTab: Tab.TAGS,
                 isEventRoute: false,
               }}
             />
@@ -977,7 +977,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.TAGS,
+                currentTab: Tab.TAGS,
                 isEventRoute: false,
               }}
             />
@@ -988,7 +988,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.USER_FEEDBACK,
+                currentTab: Tab.USER_FEEDBACK,
                 isEventRoute: false,
               }}
             />
@@ -999,7 +999,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.ATTACHMENTS,
+                currentTab: Tab.ATTACHMENTS,
                 isEventRoute: false,
               }}
             />
@@ -1010,7 +1010,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.SIMILAR_ISSUES,
+                currentTab: Tab.SIMILAR_ISSUES,
                 isEventRoute: false,
               }}
             />
@@ -1021,7 +1021,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.MERGED,
+                currentTab: Tab.MERGED,
                 isEventRoute: false,
               }}
             />
@@ -1032,7 +1032,7 @@ function routes() {
               }
               component={errorHandler(LazyLoad)}
               props={{
-                currentTab: TAB.GROUPING,
+                currentTab: Tab.GROUPING,
                 isEventRoute: false,
               }}
             />
@@ -1043,7 +1043,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.DETAILS,
+                  currentTab: Tab.DETAILS,
                   isEventRoute: true,
                 }}
               />
@@ -1054,7 +1054,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.ACTIVITY,
+                  currentTab: Tab.ACTIVITY,
                   isEventRoute: true,
                 }}
               />
@@ -1065,7 +1065,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.EVENTS,
+                  currentTab: Tab.EVENTS,
                   isEventRoute: true,
                 }}
               />
@@ -1076,7 +1076,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.SIMILAR_ISSUES,
+                  currentTab: Tab.SIMILAR_ISSUES,
                   isEventRoute: true,
                 }}
               />
@@ -1087,7 +1087,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.TAGS,
+                  currentTab: Tab.TAGS,
                   isEventRoute: true,
                 }}
               />
@@ -1098,7 +1098,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.TAGS,
+                  currentTab: Tab.TAGS,
                   isEventRoute: true,
                 }}
               />
@@ -1109,7 +1109,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.USER_FEEDBACK,
+                  currentTab: Tab.USER_FEEDBACK,
                   isEventRoute: true,
                 }}
               />
@@ -1120,7 +1120,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.ATTACHMENTS,
+                  currentTab: Tab.ATTACHMENTS,
                   isEventRoute: true,
                 }}
               />
@@ -1131,7 +1131,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.MERGED,
+                  currentTab: Tab.MERGED,
                   isEventRoute: true,
                 }}
               />
@@ -1142,7 +1142,7 @@ function routes() {
                 }
                 component={errorHandler(LazyLoad)}
                 props={{
-                  currentTab: TAB.GROUPING,
+                  currentTab: Tab.GROUPING,
                   isEventRoute: true,
                 }}
               />

static/app/views/organizationGroupDetails/groupDetails.tsx

@@ -22,7 +22,8 @@ import recreateRoute from 'app/utils/recreateRoute';
 import withApi from 'app/utils/withApi';
 
 import {ERROR_TYPES} from './constants';
-import GroupHeader, {TAB} from './header';
+import GroupHeader from './header';
+import {Tab} from './types';
 import {
   fetchGroupEvent,
   getGroupReprocessingStatus,
@@ -156,13 +157,13 @@ class GroupDetails extends React.Component<Props, State> {
     }
   }
 
-  getCurrentRouteInfo(group: Group): {currentTab: keyof typeof TAB; baseUrl: string} {
+  getCurrentRouteInfo(group: Group): {currentTab: Tab; baseUrl: string} {
     const {routes, organization} = this.props;
     const {event} = this.state;
 
     // All the routes under /organizations/:orgId/issues/:groupId have a defined props
     const {currentTab, isEventRoute} = routes[routes.length - 1].props as {
-      currentTab: keyof typeof TAB;
+      currentTab: Tab;
       isEventRoute: boolean;
     };
 
@@ -203,10 +204,10 @@ class GroupDetails extends React.Component<Props, State> {
         // Redirects to the Activities tab
         if (
           reprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT &&
-          currentTab !== TAB.ACTIVITY
+          currentTab !== Tab.ACTIVITY
         ) {
           return {
-            pathname: `${baseUrl}${TAB.ACTIVITY}/`,
+            pathname: `${baseUrl}${Tab.ACTIVITY}/`,
             query: {...params, groupId: nextGroupId},
           };
         }
@@ -222,7 +223,7 @@ class GroupDetails extends React.Component<Props, State> {
     if (hasReprocessingV2Feature) {
       if (
         reprocessingStatus === ReprocessingStatus.REPROCESSING &&
-        currentTab !== TAB.DETAILS
+        currentTab !== Tab.DETAILS
       ) {
         return {
           pathname: baseUrl,
@@ -232,11 +233,11 @@ class GroupDetails extends React.Component<Props, State> {
 
       if (
         reprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT &&
-        currentTab !== TAB.ACTIVITY &&
-        currentTab !== TAB.USER_FEEDBACK
+        currentTab !== Tab.ACTIVITY &&
+        currentTab !== Tab.USER_FEEDBACK
       ) {
         return {
-          pathname: `${baseUrl}${TAB.ACTIVITY}/`,
+          pathname: `${baseUrl}${Tab.ACTIVITY}/`,
           query: params,
         };
       }
@@ -477,7 +478,7 @@ class GroupDetails extends React.Component<Props, State> {
       project,
     };
 
-    if (currentTab === TAB.DETAILS) {
+    if (currentTab === Tab.DETAILS) {
       childProps = {
         ...childProps,
         event,
@@ -488,7 +489,7 @@ class GroupDetails extends React.Component<Props, State> {
       };
     }
 
-    if (currentTab === TAB.TAGS) {
+    if (currentTab === Tab.TAGS) {
       childProps = {...childProps, event, baseUrl};
     }
 

static/app/views/organizationGroupDetails/header.tsx

@@ -33,21 +33,10 @@ import withApi from 'app/utils/withApi';
 import withOrganization from 'app/utils/withOrganization';
 
 import GroupActions from './actions';
+import {Tab} from './types';
 import {TagAndMessageWrapper} from './unhandledTag';
 import {ReprocessingStatus} from './utils';
 
-const TAB = {
-  DETAILS: 'details',
-  ACTIVITY: 'activity',
-  USER_FEEDBACK: 'user-feedback',
-  ATTACHMENTS: 'attachments',
-  TAGS: 'tags',
-  EVENTS: 'events',
-  MERGED: 'merged',
-  GROUPING: 'grouping',
-  SIMILAR_ISSUES: 'similar-issues',
-};
-
 type Props = WithRouterProps & {
   currentTab: string;
   baseUrl: string;
@@ -93,27 +82,27 @@ class GroupHeader extends React.Component<Props, State> {
 
     if (groupReprocessingStatus === ReprocessingStatus.REPROCESSING) {
       return [
-        TAB.ACTIVITY,
-        TAB.USER_FEEDBACK,
-        TAB.ATTACHMENTS,
-        TAB.EVENTS,
-        TAB.MERGED,
-        TAB.GROUPING,
-        TAB.SIMILAR_ISSUES,
-        TAB.TAGS,
+        Tab.ACTIVITY,
+        Tab.USER_FEEDBACK,
+        Tab.ATTACHMENTS,
+        Tab.EVENTS,
+        Tab.MERGED,
+        Tab.GROUPING,
+        Tab.SIMILAR_ISSUES,
+        Tab.TAGS,
       ];
     }
 
     if (groupReprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT) {
       return [
-        TAB.DETAILS,
-        TAB.ATTACHMENTS,
-        TAB.EVENTS,
-        TAB.MERGED,
-        TAB.GROUPING,
-        TAB.SIMILAR_ISSUES,
-        TAB.TAGS,
-        TAB.USER_FEEDBACK,
+        Tab.DETAILS,
+        Tab.ATTACHMENTS,
+        Tab.EVENTS,
+        Tab.MERGED,
+        Tab.GROUPING,
+        Tab.SIMILAR_ISSUES,
+        Tab.TAGS,
+        Tab.USER_FEEDBACK,
       ];
     }
 
@@ -274,15 +263,15 @@ class GroupHeader extends React.Component<Props, State> {
         <NavTabs>
           <ListLink
             to={`${baseUrl}${location.search}`}
-            isActive={() => currentTab === TAB.DETAILS}
-            disabled={disabledTabs.includes(TAB.DETAILS)}
+            isActive={() => currentTab === Tab.DETAILS}
+            disabled={disabledTabs.includes(Tab.DETAILS)}
           >
             {t('Details')}
           </ListLink>
           <StyledListLink
             to={`${baseUrl}activity/${location.search}`}
-            isActive={() => currentTab === TAB.ACTIVITY}
-            disabled={disabledTabs.includes(TAB.ACTIVITY)}
+            isActive={() => currentTab === Tab.ACTIVITY}
+            disabled={disabledTabs.includes(Tab.ACTIVITY)}
           >
             {t('Activity')}
             <Badge>
@@ -292,46 +281,46 @@ class GroupHeader extends React.Component<Props, State> {
           </StyledListLink>
           <StyledListLink
             to={`${baseUrl}feedback/${location.search}`}
-            isActive={() => currentTab === TAB.USER_FEEDBACK}
-            disabled={disabledTabs.includes(TAB.USER_FEEDBACK)}
+            isActive={() => currentTab === Tab.USER_FEEDBACK}
+            disabled={disabledTabs.includes(Tab.USER_FEEDBACK)}
           >
             {t('User Feedback')} <Badge text={group.userReportCount} />
           </StyledListLink>
           {hasEventAttachments && (
             <ListLink
               to={`${baseUrl}attachments/${location.search}`}
-              isActive={() => currentTab === TAB.ATTACHMENTS}
-              disabled={disabledTabs.includes(TAB.ATTACHMENTS)}
+              isActive={() => currentTab === Tab.ATTACHMENTS}
+              disabled={disabledTabs.includes(Tab.ATTACHMENTS)}
             >
               {t('Attachments')}
             </ListLink>
           )}
           <ListLink
             to={`${baseUrl}tags/${location.search}`}
-            isActive={() => currentTab === TAB.TAGS}
-            disabled={disabledTabs.includes(TAB.TAGS)}
+            isActive={() => currentTab === Tab.TAGS}
+            disabled={disabledTabs.includes(Tab.TAGS)}
           >
             {t('Tags')}
           </ListLink>
           <ListLink
             to={eventRouteToObject}
-            isActive={() => currentTab === TAB.EVENTS}
-            disabled={disabledTabs.includes(TAB.EVENTS)}
+            isActive={() => currentTab === Tab.EVENTS}
+            disabled={disabledTabs.includes(Tab.EVENTS)}
           >
             {t('Events')}
           </ListLink>
           <ListLink
             to={`${baseUrl}merged/${location.search}`}
-            isActive={() => currentTab === TAB.MERGED}
-            disabled={disabledTabs.includes(TAB.MERGED)}
+            isActive={() => currentTab === Tab.MERGED}
+            disabled={disabledTabs.includes(Tab.MERGED)}
           >
             {t('Merged Issues')}
           </ListLink>
           {hasGroupingTreeUI && (
             <ListLink
               to={`${baseUrl}grouping/${location.search}`}
-              isActive={() => currentTab === TAB.GROUPING}
-              disabled={disabledTabs.includes(TAB.GROUPING)}
+              isActive={() => currentTab === Tab.GROUPING}
+              disabled={disabledTabs.includes(Tab.GROUPING)}
             >
               {t('Grouping')}
             </ListLink>
@@ -339,8 +328,8 @@ class GroupHeader extends React.Component<Props, State> {
           {hasSimilarView && (
             <ListLink
               to={`${baseUrl}similar/${location.search}`}
-              isActive={() => currentTab === TAB.SIMILAR_ISSUES}
-              disabled={disabledTabs.includes(TAB.SIMILAR_ISSUES)}
+              isActive={() => currentTab === Tab.SIMILAR_ISSUES}
+              disabled={disabledTabs.includes(Tab.SIMILAR_ISSUES)}
             >
               {t('Similar Issues')}
             </ListLink>
@@ -351,7 +340,7 @@ class GroupHeader extends React.Component<Props, State> {
   }
 }
 
-export {GroupHeader, TAB};
+export {GroupHeader};
 
 export default withApi(withRouter(withOrganization(GroupHeader)));
 

static/app/views/organizationGroupDetails/types.tsx

@@ -0,0 +1,11 @@
+export enum Tab {
+  DETAILS = 'details',
+  ACTIVITY = 'activity',
+  USER_FEEDBACK = 'user-feedback',
+  ATTACHMENTS = 'attachments',
+  TAGS = 'tags',
+  EVENTS = 'events',
+  MERGED = 'merged',
+  GROUPING = 'grouping',
+  SIMILAR_ISSUES = 'similar-issues',
+}