Modernize Benchmarks CI

ts/components/CompositionInput.tsx

@@ -86,7 +86,7 @@ export type Props = {
 const MAX_LENGTH = 64 * 1024;
 const BASE_CLASS_NAME = 'module-composition-input';
 
-export const CompositionInput: React.ComponentType<Props> = props => {
+export function CompositionInput(props: Props): React.ReactElement {
   const {
     i18n,
     disabled,
@@ -644,4 +644,4 @@ export const CompositionInput: React.ComponentType<Props> = props => {
       </Reference>
     </Manager>
   );
-};
+}

ts/components/conversation/Message.tsx

@@ -478,6 +478,10 @@ export class Message extends React.PureComponent<Props, State> {
         status === 'viewed')
     ) {
       const delta = Date.now() - timestamp;
+      window.CI?.handleEvent('message:send-complete', {
+        timestamp,
+        delta,
+      });
       window.log.info(
         `Message.tsx: Rendered 'send complete' for message ${timestamp}; took ${delta}ms`
       );

ts/components/conversationList/BaseConversationListItem.tsx

@@ -54,7 +54,7 @@ type PropsType = {
 >;
 
 export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo(
-  ({
+  function BaseConversationListItem({
     acceptedMessageRequest,
     avatarPath,
     checked,
@@ -79,7 +79,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
     title,
     unblurredAvatarPath,
     unreadCount,
-  }) => {
+  }) {
     const isUnread = isConversationUnread({ markedUnread, unreadCount });
 
     const isAvatarNoteToSelf = isBoolean(isNoteToSelf)

ts/components/conversationList/ContactCheckbox.tsx

@@ -47,7 +47,7 @@ type PropsHousekeepingType = {
 type PropsType = PropsDataType & PropsHousekeepingType;
 
 export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
-  ({
+  function ContactCheckbox({
     about,
     acceptedMessageRequest,
     avatarPath,
@@ -65,7 +65,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
     title,
     type,
     unblurredAvatarPath,
-  }) => {
+  }) {
     const disabled = Boolean(disabledReason);
 
     const headerName = isMe ? (

ts/components/conversationList/ContactListItem.tsx

@@ -34,7 +34,7 @@ type PropsHousekeepingType = {
 type PropsType = PropsDataType & PropsHousekeepingType;
 
 export const ContactListItem: FunctionComponent<PropsType> = React.memo(
-  ({
+  function ContactListItem({
     about,
     acceptedMessageRequest,
     avatarPath,
@@ -50,7 +50,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
     title,
     type,
     unblurredAvatarPath,
-  }) => {
+  }) {
     const headerName = isMe ? (
       i18n('noteToSelf')
     ) : (

ts/components/conversationList/ConversationListItem.tsx

@@ -63,7 +63,7 @@ type PropsHousekeeping = {
 export type Props = PropsData & PropsHousekeeping;
 
 export const ConversationListItem: FunctionComponent<Props> = React.memo(
-  ({
+  function ConversationListItem({
     acceptedMessageRequest,
     avatarPath,
     color,
@@ -87,7 +87,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     typingContact,
     unblurredAvatarPath,
     unreadCount,
-  }) => {
+  }) {
     const headerName = isMe ? (
       i18n('noteToSelf')
     ) : (

ts/components/conversationList/CreateNewGroupButton.tsx

@@ -12,7 +12,7 @@ type PropsType = {
 };
 
 export const CreateNewGroupButton: FunctionComponent<PropsType> = React.memo(
-  ({ i18n, onClick }) => {
+  function CreateNewGroupButton({ i18n, onClick }) {
     const title = i18n('createNewGroupButton');
 
     return (

ts/components/conversationList/MessageSearchResult.tsx

@@ -143,7 +143,7 @@ function getFilteredBodyRanges(
 }
 
 export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
-  ({
+  function MessageSearchResult({
     body,
     bodyRanges,
     conversationId,
@@ -154,7 +154,7 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
     sentAt,
     snippet,
     to,
-  }) => {
+  }) {
     const onClickItem = useCallback(() => {
       openConversationInternal({ conversationId, messageId: id });
     }, [openConversationInternal, conversationId, id]);

ts/components/conversationList/StartNewConversation.tsx

@@ -25,7 +25,7 @@ type PropsHousekeeping = {
 export type Props = PropsData & PropsHousekeeping;
 
 export const StartNewConversation: FunctionComponent<Props> = React.memo(
-  ({ i18n, onClick, phoneNumber }) => {
+  function StartNewConversation({ i18n, onClick, phoneNumber }) {
     const messageText = (
       <div className={TEXT_CLASS_NAME}>{i18n('startConversation')}</div>
     );