ref(ts): Convert higher order components to TypeScript (#14326)

Author: lynnagara

src/sentry/static/sentry/app/types/index.tsx

@@ -64,3 +64,23 @@ export type CommitAuthor = {
   email?: string;
   name?: string;
 };
+
+// TODO(ts): This type is incomplete
+export type Environment = {};
+
+// TODO(ts): This type is incomplete
+export type SavedSearch = {};
+
+// TODO(ts): This type is incomplete
+export type Plugin = {};
+
+export type GlobalSelection = {
+  projects: number[];
+  environments: string[];
+  datetime: {
+    start: string;
+    end: string;
+    period: string;
+    utc: boolean;
+  };
+};

src/sentry/static/sentry/app/utils/__mocks__/withLatestContext.jsx renamed to src/sentry/static/sentry/app/utils/__mocks__/withLatestContext.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+declare const TestStubs;
+
 const MOCK_ORG = TestStubs.Organization();
 const DEFAULTS = {
   organization: MOCK_ORG,

src/sentry/static/sentry/app/utils/__mocks__/withOrganization.jsx renamed to src/sentry/static/sentry/app/utils/__mocks__/withOrganization.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import SentryTypes from 'app/sentryTypes';
 
+declare const TestStubs;
+
 const withOrganizationMock = WrappedComponent =>
   class WithOrganizationMockWrapper extends React.Component {
     static contextTypes = {

src/sentry/static/sentry/app/utils/getDisplayName.tsx

@@ -1,6 +1,8 @@
 // Attempts to get a display name from a Component
 //
 // Use for HoCs
-export default function getDisplayName(WrappedComponent: React.ComponentType): string {
+export default function getDisplayName<Props = {}>(
+  WrappedComponent: React.ComponentType<Props>
+): string {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 }

src/sentry/static/sentry/app/utils/withApi.jsx renamed to src/sentry/static/sentry/app/utils/withApi.tsx

@@ -6,23 +6,25 @@ import getDisplayName from 'app/utils/getDisplayName';
 /**
  * HoC that provides "api" client when mounted, and clears API requests when component is unmounted
  */
-const withApi = WrappedComponent => {
-  class WithApi extends React.Component {
+const withApi = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
+  return class extends React.Component<Omit<P, 'api'>> {
+    static displayName = `withApi(${getDisplayName(WrappedComponent)})`;
+
     constructor(props) {
       super(props);
       this.api = new Client();
     }
     componentWillUnmount() {
       this.api.clear();
     }
-    render() {
-      return <WrappedComponent api={this.api} {...this.props} />;
-    }
-  }
 
-  WithApi.displayName = `withApi(${getDisplayName(WrappedComponent)})`;
+    // TODO(ts): Update this when API client is typed
+    private api: any;
 
-  return WithApi;
+    render() {
+      return <WrappedComponent api={this.api as any} {...this.props as P} />;
+    }
+  };
 };
 
 export default withApi;

src/sentry/static/sentry/app/utils/withConfig.jsx renamed to src/sentry/static/sentry/app/utils/withConfig.tsx

@@ -7,7 +7,7 @@ import ConfigStore from 'app/stores/configStore';
 /**
  * Higher order component that passes the config object to the wrapped component
  */
-const withConfig = WrappedComponent =>
+const withConfig = <P extends object>(WrappedComponent: React.ComponentType<P>) =>
   createReactClass({
     displayName: `withConfig(${getDisplayName(WrappedComponent)})`,
     mixins: [Reflux.listenTo(ConfigStore, 'onUpdate')],
@@ -24,7 +24,9 @@ const withConfig = WrappedComponent =>
     },
 
     render() {
-      return <WrappedComponent config={this.state.config} {...this.props} />;
+      return (
+        <WrappedComponent config={this.state.config as object} {...this.props as P} />
+      );
     },
   });
 

src/sentry/static/sentry/app/utils/withGlobalSelection.jsx renamed to src/sentry/static/sentry/app/utils/withGlobalSelection.tsx

@@ -4,12 +4,15 @@ import createReactClass from 'create-react-class';
 
 import GlobalSelectionStore from 'app/stores/globalSelectionStore';
 import getDisplayName from 'app/utils/getDisplayName';
+import {GlobalSelection} from 'app/types';
 
 /**
  * Higher order component that uses GlobalSelectionStore and provides the
  * active project
  */
-const withGlobalSelection = WrappedComponent =>
+const withGlobalSelection = <P extends object>(
+  WrappedComponent: React.ComponentType<P>
+) =>
   createReactClass({
     displayName: `withGlobalSelection(${getDisplayName(WrappedComponent)})`,
     mixins: [Reflux.listenTo(GlobalSelectionStore, 'onUpdate')],
@@ -41,9 +44,9 @@ const withGlobalSelection = WrappedComponent =>
       const {forceUrlSync, ...selection} = this.state.selection;
       return (
         <WrappedComponent
-          forceUrlSync={forceUrlSync}
-          selection={selection}
-          {...this.props}
+          forceUrlSync={forceUrlSync as boolean}
+          selection={selection as GlobalSelection}
+          {...this.props as P}
         />
       );
     },

src/sentry/static/sentry/app/utils/withLatestContext.jsx renamed to src/sentry/static/sentry/app/utils/withLatestContext.tsx

@@ -8,11 +8,9 @@ import LatestContextStore from 'app/stores/latestContextStore';
 import SentryTypes from 'app/sentryTypes';
 import getDisplayName from 'app/utils/getDisplayName';
 import withOrganizations from 'app/utils/withOrganizations';
+import {Project, Organization} from 'app/types';
 
-// HoC that returns most usable organization + project
-// This means your org if you only have 1 org, or
-// last accessed organization/project
-const withLatestContext = WrappedComponent =>
+const withLatestContext = <P extends object>(WrappedComponent: React.ComponentType<P>) =>
   withOrganizations(
     createReactClass({
       displayName: `withLatestContext(${getDisplayName(WrappedComponent)})`,
@@ -24,7 +22,12 @@ const withLatestContext = WrappedComponent =>
       render() {
         const {organizations} = this.props;
         const {latestContext} = this.state;
-        const {organization, project, lastRoute} = latestContext || {};
+        const {
+          organization,
+          project,
+          lastRoute,
+        }: {organization?: Organization; project?: Project; lastRoute?: string} =
+          latestContext || {};
 
         // Even though org details exists in LatestContextStore,
         // fetch organization from OrganizationsStore so that we can
@@ -42,11 +45,11 @@ const withLatestContext = WrappedComponent =>
         // project from `latestContext`
         return (
           <WrappedComponent
-            organizations={organizations}
-            organization={latestOrganization}
-            project={project}
-            lastRoute={lastRoute}
-            {...this.props}
+            organizations={organizations as Organization[]}
+            organization={latestOrganization as Organization}
+            project={project as Project}
+            lastRoute={lastRoute as string}
+            {...this.props as P}
           />
         );
       },

src/sentry/static/sentry/app/utils/withOrganization.jsx renamed to src/sentry/static/sentry/app/utils/withOrganization.tsx

@@ -2,20 +2,21 @@ import React from 'react';
 
 import SentryTypes from 'app/sentryTypes';
 import getDisplayName from 'app/utils/getDisplayName';
+import {Organization} from 'app/types';
 
-/**
- * Currently wraps component with organization from context
- */
-const withOrganization = WrappedComponent =>
-  class extends React.Component {
+const withOrganization = <P extends object>(WrappedComponent: React.ComponentType<P>) =>
+  class extends React.Component<Omit<P, 'organization'>> {
     static displayName = `withOrganization(${getDisplayName(WrappedComponent)})`;
     static contextTypes = {
       organization: SentryTypes.Organization,
     };
 
     render() {
       return (
-        <WrappedComponent organization={this.context.organization} {...this.props} />
+        <WrappedComponent
+          organization={this.context.organization as Organization}
+          {...this.props as P}
+        />
       );
     }
   };

src/sentry/static/sentry/app/utils/withOrganizations.jsx renamed to src/sentry/static/sentry/app/utils/withOrganizations.tsx

@@ -4,18 +4,19 @@ import createReactClass from 'create-react-class';
 
 import getDisplayName from 'app/utils/getDisplayName';
 import OrganizationsStore from 'app/stores/organizationsStore';
+import {Organization} from 'app/types';
 
-const withOrganizations = WrappedComponent =>
+const withOrganizations = <P extends object>(WrappedComponent: React.ComponentType<P>) =>
   createReactClass({
     displayName: `withOrganizations(${getDisplayName(WrappedComponent)})`,
     mixins: [Reflux.connect(OrganizationsStore, 'organizations')],
 
     render() {
       return (
         <WrappedComponent
-          organizationsLoading={!OrganizationsStore.loaded}
-          organizations={this.state.organizations}
-          {...this.props}
+          organizationsLoading={!OrganizationsStore.loaded as boolean}
+          organizations={this.state.organizations as Organization[]}
+          {...this.props as P}
         />
       );
     },