ref(ts): Changes typing of defaultProps and React.FC (#16746)

* ref(ts): Changes typing of defaultProps

* wip

* removed React.FC

* translation

src/sentry/static/sentry/app/components/actions/actionLink.tsx

@@ -5,12 +5,15 @@ import PropTypes from 'prop-types';
 
 import Confirm from 'app/components/confirm';
 
-type ActionLinkProps = {
+type DefaultProps = {
+  disabled: boolean;
+  shouldConfirm: boolean;
+};
+
+type ActionLinkProps = DefaultProps & {
   title: string;
   message: React.ReactNode;
-  disabled?: boolean;
   onAction: () => void;
-  shouldConfirm?: boolean;
   confirmLabel?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
@@ -25,7 +28,7 @@ export default class ActionLink extends React.Component<ActionLinkProps> {
     confirmLabel: PropTypes.string,
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     shouldConfirm: false,
     disabled: false,
   };

src/sentry/static/sentry/app/components/activity/note/body.tsx

@@ -8,7 +8,7 @@ type Props = {
   className: string;
 };
 
-const NoteBody: React.FC<Props> = ({className, text}) => (
+const NoteBody = ({className, text}: Props) => (
   <div
     className={className}
     data-test-id="activity-note-body"

src/sentry/static/sentry/app/components/alertLink.tsx

@@ -13,15 +13,17 @@ type PropsWithHref = {href: string};
 type PropsWithTo = {to: LocationDescriptor};
 type OtherProps = {
   icon?: string;
+  onClick?: (e: React.MouseEvent) => void;
+};
+type DefaultProps = {
   size: Size;
   priority: Priority;
-  onClick?: (e: React.MouseEvent) => void;
 };
 
-type Props = (PropsWithHref | PropsWithTo) & OtherProps;
+type Props = (PropsWithHref | PropsWithTo) & OtherProps & DefaultProps;
 
 export default class AlertLink extends React.Component<Props> {
-  static defaultProps: Partial<Props> = {
+  static defaultProps: DefaultProps = {
     priority: 'warning',
     size: 'normal',
   };

src/sentry/static/sentry/app/components/asyncComponentSearchInput.tsx

@@ -3,6 +3,7 @@ import debounce from 'lodash/debounce';
 import React from 'react';
 import styled from '@emotion/styled';
 
+import {t} from 'app/locale';
 import Input from 'app/views/settings/components/forms/controls/input';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import {Client} from 'app/api';
@@ -14,36 +15,40 @@ type RenderProps = {
   value: string;
 };
 
-type Props = ReactRouter.WithRouterProps & {
-  api: Client;
-  className?: string;
-  /**
-   * URL to make the search request to
-   */
-  url: string;
+type DefaultProps = {
   /**
    * Placeholder text in the search input
    */
-  placeholder?: string;
+  placeholder: string;
   /**
    * Time in milliseconds to wait before firing off the request
    */
-  debounceWait?: number;
-  /**
-   * Updates URL with search query in the URL param: `query`
-   */
-  updateRoute?: boolean;
-
-  onSearchSubmit?: (query: string, event: React.FormEvent) => void;
-  onSuccess: (data: object, jqXHR: JQueryXHR | undefined) => void;
-  onError: () => void;
-
-  /**
-   * A render-prop child may be passed to handle custom rendering of the input.
-   */
-  children?: (otps: RenderProps) => React.ReactNode;
+  debounceWait?: number; // optional, otherwise src/sentry/static/sentry/app/views/settings/organizationMembers/organizationMembersList.tsx L:191 is not happy
 };
 
+type Props = ReactRouter.WithRouterProps &
+  DefaultProps & {
+    api: Client;
+    className?: string;
+    /**
+     * URL to make the search request to
+     */
+    url: string;
+    /**
+     * Updates URL with search query in the URL param: `query`
+     */
+    updateRoute?: boolean;
+
+    onSearchSubmit?: (query: string, event: React.FormEvent) => void;
+    onSuccess: (data: object, jqXHR: JQueryXHR | undefined) => void;
+    onError: () => void;
+
+    /**
+     * A render-prop child may be passed to handle custom rendering of the input.
+     */
+    children?: (otps: RenderProps) => React.ReactNode;
+  };
+
 type State = {
   query: string;
   busy: boolean;
@@ -55,8 +60,8 @@ type State = {
  * It probably doesn't make too much sense outside of an AsyncComponent atm.
  */
 class AsyncComponentSearchInput extends React.Component<Props, State> {
-  static defaultProps = {
-    placeholder: 'Search...',
+  static defaultProps: DefaultProps = {
+    placeholder: t('Search...'),
     debounceWait: 200,
   };
 

src/sentry/static/sentry/app/components/betaTag.tsx

@@ -7,10 +7,12 @@ import space from 'app/styles/space';
 import {t} from 'app/locale';
 
 type Props = {
-  title: string;
+  title?: string;
 };
 
-const BetaTag = ({title}: Props) => (
+const BetaTag = ({
+  title = t('This feature is in beta and may change in the future.'),
+}: Props) => (
   <Tooltip title={title} position="right">
     <StyledTag priority="beta" size="small">
       {t('beta')}
@@ -18,10 +20,6 @@ const BetaTag = ({title}: Props) => (
   </Tooltip>
 );
 
-BetaTag.defaultProps = {
-  title: t('This feature is in beta and may change in the future.'),
-};
-
 const StyledTag = styled(Tag)`
   position: relative;
   top: -1px;

src/sentry/static/sentry/app/components/clipboard.tsx

@@ -5,15 +5,18 @@ import ReactDOM from 'react-dom';
 
 import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
 
-type Props = {
-  value: string;
+type DefaultProps = {
   successMessage: string;
   errorMessage: string;
-  hideMessages: string;
+  hideMessages: boolean;
+};
+
+type Props = {
+  value: string;
   hideUnsupported?: boolean;
   onSuccess?: () => void;
   onError?: () => void;
-};
+} & DefaultProps;
 
 class Clipboard extends React.Component<Props> {
   static propTypes = {
@@ -30,7 +33,7 @@ class Clipboard extends React.Component<Props> {
     onError: PropTypes.func,
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     hideMessages: false,
     successMessage: 'Copied to clipboard',
     errorMessage: 'Error copying to clipboard',

src/sentry/static/sentry/app/components/confirm.tsx

@@ -21,34 +21,32 @@ type ChildrenRenderProps = {
   close: () => void;
 };
 
-type Props = {
+const defaultProps = {
   /**
-   * Callback when user confirms
+   * Button priority
    */
-  onConfirm: () => void;
-
+  priority: 'primary' as React.ComponentProps<typeof Button>['priority'],
   /**
-   * Text to show in the confirmation button
+   * Disables the confirm button
    */
-  confirmText: React.ReactNode;
-
+  disableConfirmButton: false,
   /**
    * Text to show in the cancel button
    */
-  cancelText: React.ReactNode;
-
+  cancelText: t('Cancel') as React.ReactNode,
   /**
-   * Button priority
+   * Text to show in the confirmation button
    */
-  priority: React.ComponentProps<typeof Button>['priority'];
+  confirmText: t('Confirm') as React.ReactNode,
+  // Stop event propgation when opening the confirm modal
+  stopPropagation: false,
+};
 
+type Props = {
   /**
-   * Disables the confirm button
+   * Callback when user confirms
    */
-  disableConfirmButton: boolean;
-
-  // Stop event propgation when opening the confirm modal
-  stopPropagation: boolean;
+  onConfirm: () => void;
 
   /**
    * If true, will skip the confirmation modal and call `onConfirm` callback
@@ -93,7 +91,7 @@ type Props = {
    * Header of modal
    */
   header?: React.ReactNode;
-};
+} & typeof defaultProps;
 
 type State = {
   /**
@@ -134,13 +132,7 @@ class Confirm extends React.PureComponent<Props, State> {
     stopPropagation: PropTypes.bool,
   };
 
-  static defaultProps = {
-    priority: 'primary',
-    disableConfirmButton: false,
-    cancelText: t('Cancel'),
-    confirmText: t('Confirm'),
-    stopPropagation: false,
-  };
+  static defaultProps = defaultProps;
 
   state: State = {
     isModalOpen: false,

src/sentry/static/sentry/app/components/dateTime.tsx

@@ -4,12 +4,15 @@ import moment from 'moment-timezone';
 
 import ConfigStore from 'app/stores/configStore';
 
-type Props = {
+type DefaultProps = {
+  seconds: boolean;
+};
+
+type Props = DefaultProps & {
   date: moment.MomentInput;
   dateOnly?: boolean;
   timeOnly?: boolean;
   shortDate?: boolean;
-  seconds?: boolean;
   utc?: boolean;
 };
 
@@ -23,7 +26,7 @@ class DateTime extends React.Component<Props> {
     utc: PropTypes.bool,
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     seconds: true,
   };
 

src/sentry/static/sentry/app/components/dropdownMenu.tsx

@@ -47,7 +47,18 @@ type RenderProps = {
   };
 };
 
-type Props = {
+type DefaultProps = {
+  /**
+   * Keeps dropdown menu open when menu is clicked
+   */
+  keepMenuOpen: boolean;
+  /**
+   * closes menu on "Esc" keypress
+   */
+  closeOnEscape: boolean;
+};
+
+type Props = DefaultProps & {
   onOpen?: Function;
   onClose?: Function;
   /**
@@ -66,19 +77,11 @@ type Props = {
    * only follow `isOpen`.
    */
   isOpen?: boolean;
-  /**
-   * Keeps dropdown menu open when menu is clicked
-   */
-  keepMenuOpen?: boolean;
   /**
    * Compatibility for <DropdownLink>
    * This will change where we attach event handlers
    */
   alwaysRenderMenu?: boolean;
-  /**
-   * closes menu on "Esc" keypress
-   */
-  closeOnEscape?: boolean;
   /**
    * If this is set to true, the dropdown behaves as a "nested dropdown" and is
    * triggered on mouse enter and mouse leave
@@ -107,7 +110,7 @@ class DropdownMenu extends React.Component<Props, State> {
     isNestedDropdown: PropTypes.bool,
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     keepMenuOpen: false,
     closeOnEscape: true,
   };

src/sentry/static/sentry/app/components/emptyStateWarning.tsx

@@ -8,9 +8,10 @@ import EmptyMessage from 'app/views/settings/components/emptyMessage';
 
 type Props = {
   small?: boolean;
+  children: React.ReactNode;
 };
 
-const EmptyStateWarning: React.FC<Props> = ({small, children}) =>
+const EmptyStateWarning = ({small = false, children}: Props) =>
   small ? (
     <EmptyMessage>
       <SmallMessage>
@@ -29,10 +30,6 @@ EmptyStateWarning.propTypes = {
   small: PropTypes.bool,
 };
 
-EmptyStateWarning.defaultProps = {
-  small: false,
-};
-
 const EmptyStreamWrapper = styled('div')`
   text-align: center;
   font-size: 22px;