ref(js): Avoid import * as React for Compoent/Fragment files (#34268)

static/app/components/discover/transactionsList.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {Location, LocationDescriptor, Query} from 'history';
@@ -121,7 +121,7 @@ type Props = {
   trendView?: TrendView;
 };
 
-class _TransactionsList extends React.Component<Props> {
+class _TransactionsList extends Component<Props> {
   static defaultProps = {
     cursorName: 'transactionCursor',
     limit: DEFAULT_TRANSACTION_LIMIT,
@@ -174,7 +174,7 @@ class _TransactionsList extends React.Component<Props> {
     } = this.props;
 
     return (
-      <React.Fragment>
+      <Fragment>
         <div>
           <DropdownControl
             button={({isOpen, getActorProps}) => (
@@ -233,7 +233,7 @@ class _TransactionsList extends React.Component<Props> {
               </DiscoverButton>
             </GuideAnchor>
           ))}
-      </React.Fragment>
+      </Fragment>
     );
   }
 
@@ -254,7 +254,7 @@ class _TransactionsList extends React.Component<Props> {
     const cursor = decodeScalar(location.query?.[cursorName]);
 
     const tableRenderer = ({isLoading, pageLinks, tableData}) => (
-      <React.Fragment>
+      <Fragment>
         <Header>
           {this.renderHeader()}
           <StyledPagination
@@ -274,7 +274,7 @@ class _TransactionsList extends React.Component<Props> {
           generateLink={generateLink}
           handleCellAction={handleCellAction}
         />
-      </React.Fragment>
+      </Fragment>
     );
 
     if (forceLoading) {
@@ -322,7 +322,7 @@ class _TransactionsList extends React.Component<Props> {
         limit={5}
       >
         {({isLoading, trendsData, pageLinks}) => (
-          <React.Fragment>
+          <Fragment>
             <Header>
               {this.renderHeader()}
               <StyledPagination
@@ -345,7 +345,7 @@ class _TransactionsList extends React.Component<Props> {
               ])}
               generateLink={generateLink}
             />
-          </React.Fragment>
+          </Fragment>
         )}
       </TrendsEventsDiscoverQuery>
     );
@@ -358,9 +358,9 @@ class _TransactionsList extends React.Component<Props> {
 
   render() {
     return (
-      <React.Fragment>
+      <Fragment>
         {this.isTrend() ? this.renderTrendsTable() : this.renderTransactionTable()}
-      </React.Fragment>
+      </Fragment>
     );
   }
 }

static/app/components/dropdownControl.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import DropdownBubble from 'sentry/components/dropdownBubble';
@@ -78,7 +78,7 @@ type Props = DefaultProps & {
  * including the button + menu options. Use the `button` or `label` prop to set
  * the button content and `children` to provide menu options.
  */
-class DropdownControl extends React.Component<Props> {
+class DropdownControl extends Component<Props> {
   static defaultProps: DefaultProps = {
     alwaysRenderMenu: true,
     menuWidth: '100%',
@@ -166,10 +166,10 @@ class DropdownControl extends React.Component<Props> {
       <Container className={className} fullWidth={fullWidth ?? false}>
         <DropdownMenu alwaysRenderMenu={alwaysRenderMenu}>
           {({isOpen, getMenuProps, getActorProps}) => (
-            <React.Fragment>
+            <Fragment>
               {this.renderButton(isOpen, getActorProps)}
               {this.renderChildren(isOpen, getMenuProps)}
-            </React.Fragment>
+            </Fragment>
           )}
         </DropdownMenu>
       </Container>

static/app/components/events/contexts/chunk.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 
 import EventDataSection from 'sentry/components/events/eventDataSection';
 import {t} from 'sentry/locale';
@@ -22,7 +22,7 @@ type State = {
   pluginLoading?: boolean;
 };
 
-class Chunk extends React.Component<Props, State> {
+class Chunk extends Component<Props, State> {
   state: State = {
     isLoading: false,
   };
@@ -123,7 +123,7 @@ class Chunk extends React.Component<Props, State> {
       return null;
     }
 
-    const Component =
+    const ContextComponent =
       type === 'default'
         ? getContextComponent(alias) || getContextComponent(type)
         : getContextComponent(type);
@@ -131,7 +131,7 @@ class Chunk extends React.Component<Props, State> {
     const isObjectValueEmpty = Object.values(value).filter(v => defined(v)).length === 0;
 
     // this can happen if the component does not exist
-    if (!Component || isObjectValueEmpty) {
+    if (!ContextComponent || isObjectValueEmpty) {
       return null;
     }
 
@@ -140,15 +140,15 @@ class Chunk extends React.Component<Props, State> {
         key={`context-${alias}`}
         type={`context-${alias}`}
         title={
-          <React.Fragment>
+          <Fragment>
             {this.getTitle()}
             {defined(type) && type !== 'default' && alias !== type && (
               <small>({alias})</small>
             )}
-          </React.Fragment>
+          </Fragment>
         }
       >
-        <Component alias={alias} event={event} data={value} />
+        <ContextComponent alias={alias} event={event} data={value} />
       </EventDataSection>
     );
   }

static/app/components/events/errorItem.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import styled from '@emotion/styled';
 import startCase from 'lodash/startCase';
 import moment from 'moment';
@@ -41,7 +41,7 @@ type State = {
   isOpen: boolean;
 };
 
-class ErrorItem extends React.Component<Props, State> {
+class ErrorItem extends Component<Props, State> {
   state: State = {
     isOpen: false,
   };
@@ -100,10 +100,10 @@ class ErrorItem extends React.Component<Props, State> {
     }
 
     return (
-      <React.Fragment>
+      <Fragment>
         <strong>{name}</strong>
         {': '}
-      </React.Fragment>
+      </Fragment>
     );
   }
 
@@ -114,7 +114,7 @@ class ErrorItem extends React.Component<Props, State> {
       )
     ) {
       return (
-        <React.Fragment>
+        <Fragment>
           {' '}
           (
           {tct('see [docsLink]', {
@@ -125,7 +125,7 @@ class ErrorItem extends React.Component<Props, State> {
             ),
           })}
           )
-        </React.Fragment>
+        </Fragment>
       );
     }
 

static/app/components/events/eventAttachments.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
@@ -35,7 +35,7 @@ type State = {
   expanded: boolean;
 };
 
-class EventAttachments extends React.Component<Props, State> {
+class EventAttachments extends Component<Props, State> {
   state: State = {
     expanded: false,
     attachmentPreviews: {},
@@ -70,13 +70,13 @@ class EventAttachments extends React.Component<Props, State> {
   };
 
   renderInlineAttachment(attachment: IssueAttachment) {
-    const Component = this.getInlineAttachmentRenderer(attachment);
-    if (!Component || !this.attachmentPreviewIsOpen(attachment)) {
+    const AttachmentComponent = this.getInlineAttachmentRenderer(attachment);
+    if (!AttachmentComponent || !this.attachmentPreviewIsOpen(attachment)) {
       return null;
     }
     return (
       <AttachmentPreviewWrapper>
-        <Component
+        <AttachmentComponent
           orgId={this.props.orgId}
           projectId={this.props.projectId}
           event={this.props.event}
@@ -130,7 +130,7 @@ class EventAttachments extends React.Component<Props, State> {
             ]}
           >
             {attachments.map(attachment => (
-              <React.Fragment key={attachment.id}>
+              <Fragment key={attachment.id}>
                 <Name>{attachment.name}</Name>
                 <Size>
                   <FileSize bytes={attachment.size} />
@@ -157,12 +157,12 @@ class EventAttachments extends React.Component<Props, State> {
                 {this.renderInlineAttachment(attachment)}
                 {/* XXX: hack to deal with table grid borders */}
                 {lastAttachmentPreviewed && (
-                  <React.Fragment>
+                  <Fragment>
                     <div style={{display: 'none'}} />
                     <div style={{display: 'none'}} />
-                  </React.Fragment>
+                  </Fragment>
                 )}
-              </React.Fragment>
+              </Fragment>
             ))}
           </StyledPanelTable>
         )}

static/app/components/events/groupingInfo/groupingComponentFrames.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import Button from 'sentry/components/button';
@@ -20,7 +20,7 @@ type State = {
   collapsed: boolean;
 };
 
-class GroupingComponentFrames extends React.Component<Props, State> {
+class GroupingComponentFrames extends Component<Props, State> {
   static defaultProps: DefaultProps = {
     maxVisibleItems: 2,
   };
@@ -35,7 +35,7 @@ class GroupingComponentFrames extends React.Component<Props, State> {
     const isCollapsible = items.length > maxVisibleItems;
 
     return (
-      <React.Fragment>
+      <Fragment>
         {items.map((item, index) => {
           if (!collapsed || index < maxVisibleItems) {
             return (
@@ -79,7 +79,7 @@ class GroupingComponentFrames extends React.Component<Props, State> {
             </ToggleCollapse>
           </GroupingComponentListItem>
         )}
-      </React.Fragment>
+      </Fragment>
     );
   }
 }

static/app/components/events/interfaces/crashContent/exception/rawContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Client} from 'sentry/api';
@@ -30,7 +30,7 @@ type State = {
   loading: boolean;
 };
 
-class RawContent extends React.Component<Props, State> {
+class RawContent extends Component<Props, State> {
   state: State = {
     loading: false,
     error: false,
@@ -164,7 +164,7 @@ class RawContent extends React.Component<Props, State> {
     );
 
     return (
-      <React.Fragment>
+      <Fragment>
         {values.map((exc, excIdx) => {
           const {downloadButton, content} = this.getContent(isNative, exc);
           if (!downloadButton && !content) {
@@ -177,7 +177,7 @@ class RawContent extends React.Component<Props, State> {
             </div>
           );
         })}
-      </React.Fragment>
+      </Fragment>
     );
   }
 }

static/app/components/events/interfaces/spans/filter.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import CheckboxFancy from 'sentry/components/checkboxFancy/checkboxFancy';
@@ -34,7 +34,7 @@ type Props = {
   toggleOperationNameFilter: (operationName: string) => void;
 };
 
-class Filter extends React.Component<Props> {
+class Filter extends Component<Props> {
   isOperationNameActive(operationName: string) {
     const {operationNameFilter} = this.props;
 
@@ -70,10 +70,10 @@ class Filter extends React.Component<Props> {
       hasDarkBorderBottomColor: boolean;
     } = {
       children: (
-        <React.Fragment>
+        <Fragment>
           <IconFilter />
           <FilterLabel>{t('Filter')}</FilterLabel>
-        </React.Fragment>
+        </Fragment>
       ),
       priority: 'default',
       hasDarkBorderBottomColor: false,

static/app/components/events/interfaces/spans/spanDetail.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import {withRouter, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 import map from 'lodash/map';
@@ -75,7 +75,7 @@ type State = {
   errorsOpened: boolean;
 };
 
-class SpanDetail extends React.Component<Props, State> {
+class SpanDetail extends Component<Props, State> {
   state: State = {
     errorsOpened: false,
   };
@@ -285,7 +285,7 @@ class SpanDetail extends React.Component<Props, State> {
         </ErrorMessageTitle>
         <ErrorMessageContent>
           {visibleErrors.map(error => (
-            <React.Fragment key={error.event_id}>
+            <Fragment key={error.event_id}>
               <ErrorDot level={error.level} />
               <ErrorLevel>{error.level}</ErrorLevel>
               <ErrorTitle>
@@ -293,7 +293,7 @@ class SpanDetail extends React.Component<Props, State> {
                   {error.title}
                 </Link>
               </ErrorTitle>
-            </React.Fragment>
+            </Fragment>
           ))}
         </ErrorMessageContent>
         {relatedErrors.length > DEFAULT_ERRORS_VISIBLE && (
@@ -354,7 +354,7 @@ class SpanDetail extends React.Component<Props, State> {
     );
 
     return (
-      <React.Fragment>
+      <Fragment>
         {this.renderOrphanSpanMessage()}
         {this.renderSpanErrorMessage()}
         <SpanDetails>
@@ -390,10 +390,10 @@ class SpanDetail extends React.Component<Props, State> {
                 {getDynamicText({
                   fixed: 'Mar 16, 2020 9:10:12 AM UTC',
                   value: (
-                    <React.Fragment>
+                    <Fragment>
                       <DateTime date={startTimestamp * 1000} />
                       {` (${startTimestamp})`}
-                    </React.Fragment>
+                    </Fragment>
                   ),
                 })}
               </Row>
@@ -401,10 +401,10 @@ class SpanDetail extends React.Component<Props, State> {
                 {getDynamicText({
                   fixed: 'Mar 16, 2020 9:10:13 AM UTC',
                   value: (
-                    <React.Fragment>
+                    <Fragment>
                       <DateTime date={endTimestamp * 1000} />
                       {` (${endTimestamp})`}
-                    </React.Fragment>
+                    </Fragment>
                   ),
                 })}
               </Row>
@@ -441,12 +441,12 @@ class SpanDetail extends React.Component<Props, State> {
               )}
               {map(sizeKeys, (value, key) => (
                 <Row title={key} key={key}>
-                  <React.Fragment>
+                  <Fragment>
                     <FileSize bytes={value} />
                     {value >= 1024 && (
                       <span>{` (${JSON.stringify(value, null, 4) || ''} B)`}</span>
                     )}
-                  </React.Fragment>
+                  </Fragment>
                 </Row>
               ))}
               {map(nonSizeKeys, (value, key) => (
@@ -462,7 +462,7 @@ class SpanDetail extends React.Component<Props, State> {
             </tbody>
           </table>
         </SpanDetails>
-      </React.Fragment>
+      </Fragment>
     );
   }
 

static/app/components/forms/choiceMapperField.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {Component, Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import Button from 'sentry/components/button';
@@ -100,7 +100,7 @@ export interface ChoiceMapperFieldProps
       'onBlur' | 'onChange' | 'value' | 'formatMessageValue' | 'disabled'
     > {}
 
-export default class ChoiceMapper extends React.Component<ChoiceMapperFieldProps> {
+export default class ChoiceMapper extends Component<ChoiceMapperFieldProps> {
   static defaultProps = defaultProps;
 
   hasValue = (value: InputFieldProps['value']) => defined(value) && !objectIsEmpty(value);
@@ -194,7 +194,7 @@ export default class ChoiceMapper extends React.Component<ChoiceMapperFieldProps
     }
 
     return (
-      <React.Fragment>
+      <Fragment>
         <Header>
           <LabelColumn>
             <HeadingItem>{mappedColumnLabel}</HeadingItem>
@@ -237,7 +237,7 @@ export default class ChoiceMapper extends React.Component<ChoiceMapperFieldProps
             ))}
           </Row>
         ))}
-      </React.Fragment>
+      </Fragment>
     );
   };