10116096438

Committed 26 Jul 2024 06:40PM UTC coverage: 31.85% (-0.1%) from 31.952%

Build # 10116096438

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9532 from ForumMagnum/master

Merge master to lw-deploy 2024 07 22

Run Details

4936 of 40611 branches covered (12.15%)

Branch coverage included in aggregate %.

135 of 385 new or added lines in 59 files covered. (35.06%)

16 existing lines in 10 files now uncovered.

28885 of 65578 relevant lines covered (44.05%)

179.4 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

21.82

/packages/lesswrong/components/common/FlashMessages.tsx

import React, { useState, useCallback, ReactNode, useMemo } from 'react';
import { registerComponent } from '../../lib/vulcan-lib';
import { MessageContext, useMessages } from './withMessages';
import classnames from 'classnames';
import Snackbar from '@material-ui/core/Snackbar';
import Button from '@material-ui/core/Button';
import { isFriendlyUI } from '../../themes/forumTheme';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    '& .MuiSnackbarContent-message': {
      color: theme.palette.text.maxIntensity,
      fontFamily: isFriendlyUI ? theme.palette.fonts.sansSerifStack : undefined,
    },
  },
});

export const MessageContextProvider = ({children}: {
  children: ReactNode
}) => {
  const [messages,setMessages] = useState<AnyBecauseTodo[]>([]);
  
  const flash = useCallback((message: AnyBecauseTodo) => {
    if (!messages.length) {
      setMessages([message])
    } else {
      // Show the transition for clearing the old message, then pop up the new one
      setMessages(messages.map((message: AnyBecauseTodo) => ({...message, hide:true})));
      setTimeout(() => {
        setMessages([message]);
      }, 500);
    }
  }, [messages]);

  const clear = useCallback(() => {
    setMessages(messages.map((message: AnyBecauseTodo) => ({...message, hide:true})));
    setTimeout(() => {
      setMessages([]);
    }, 500);
  }, [messages]);

  const messagesContext = useMemo(
    () => ({ messages, flash, clear }),
    [messages, flash, clear]
  );

  // FIXME: While this is mostly referentially stable, MessageContext will change
  // when flash-messages are added or removed. This means that when a flash-message
  // is added, every component on the page that called useMessages() will rerender,
  // even if it was intended to be send-only. That includes a lot of components
  // including vote buttons, so on a page with a lot of comments, this can be
  // very slow.
  
  return <MessageContext.Provider value={messagesContext}>
    {children}
  </MessageContext.Provider>
}

const FlashMessages = ({classes}: {
  classes: ClassesType,
}) => {
  const getProperties = (message: WithMessagesMessage) => {
    if (typeof message === 'string') {
      // if error is a string, use it as message
      return {
        message: message,
        type: 'error'
      }
    } else {
      // else return full error object after internationalizing message
      const { messageString } = message;
      return {
        ...message,
        message: messageString,
      };
    }
  }

  const { messages, clear } = useMessages();
  let messageObject = messages.length > 0 ? getProperties(messages[0]) : undefined;
  return (
    <div className={classnames("flash-messages", classes.root)}>
      <Snackbar
        // @ts-ignore there is no hide property on the message props!
        open={!!messageObject && !messageObject.hide}
        message={messageObject && messageObject.message}
        autoHideDuration={6000}
        onClose={clear}
        ClickAwayListenerProps={{
          // Don't close flash messages on click
          // This breaks some unit tests in Playwright, since a click that was
          // supposed to go to a button instead gets eaten by the clickaway. And
          // it's not actually a good UI interaction, since the message is going
          // to close soon anyways and it's easy to dismiss by accident when you
          // wanted to read it by clicking something unrelated.
          mouseEvent: false
        }}
        action={
          messageObject?.action &&
          <Button
            onClick={messageObject?.action}
            color="primary"
          >
            {/* @ts-ignore there is no actionName property on the message props! */}
            {messageObject?.actionName || "UNDO"}
          </Button>
        }
      />
    </div>
  );
}

const FlashMessagesComponent = registerComponent('FlashMessages', FlashMessages, {styles});

declare global {
  interface ComponentTypes {
    FlashMessages: typeof FlashMessagesComponent
  }
}

1	import React, { useState, useCallback, ReactNode, useMemo } from 'react';	3✔
2	import { registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { MessageContext, useMessages } from './withMessages';	1✔
4	import classnames from 'classnames';	1✔
5	import Snackbar from '@material-ui/core/Snackbar';	1✔
6	import Button from '@material-ui/core/Button';	1✔
7	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
8
9	const styles = (theme: ThemeType): JssStyles => ({	1✔
10	root: {
11	'& .MuiSnackbarContent-message': {
12	color: theme.palette.text.maxIntensity,
13	fontFamily: isFriendlyUI ? theme.palette.fonts.sansSerifStack : undefined,	1!
14	},
15	},
16	});
17
18	export const MessageContextProvider = ({children}: {	1✔
19	children: ReactNode
20	}) => {
21	const [messages,setMessages] = useState<AnyBecauseTodo[]>([]);	×
22
23	const flash = useCallback((message: AnyBecauseTodo) => {	×
NEW 24	if (!messages.length) {	×
NEW 25	setMessages([message])	×
26	} else {
27	// Show the transition for clearing the old message, then pop up the new one
NEW 28	setMessages(messages.map((message: AnyBecauseTodo) => ({...message, hide:true})));	×
NEW 29	setTimeout(() => {	×
NEW 30	setMessages([message]);	×
31	}, 500);
32	}
33	}, [messages]);
34
35	const clear = useCallback(() => {	×
36	setMessages(messages.map((message: AnyBecauseTodo) => ({...message, hide:true})));	×
37	setTimeout(() => {	×
38	setMessages([]);	×
39	}, 500);
40	}, [messages]);
41
42	const messagesContext = useMemo(	×
43	() => ({ messages, flash, clear }),	×
44	[messages, flash, clear]
45	);
46
47	// FIXME: While this is mostly referentially stable, MessageContext will change
48	// when flash-messages are added or removed. This means that when a flash-message
49	// is added, every component on the page that called useMessages() will rerender,
50	// even if it was intended to be send-only. That includes a lot of components
51	// including vote buttons, so on a page with a lot of comments, this can be
52	// very slow.
53
54	return <MessageContext.Provider value={messagesContext}>	×
55	{children}
56	</MessageContext.Provider>
57	}
58
59	const FlashMessages = ({classes}: {	1✔
60	classes: ClassesType,
61	}) => {
62	const getProperties = (message: WithMessagesMessage) => {	×
63	if (typeof message === 'string') {	×
64	// if error is a string, use it as message
65	return {	×
66	message: message,
67	type: 'error'
68	}
69	} else {
70	// else return full error object after internationalizing message
71	const { messageString } = message;	×
72	return {	×
73	...message,
74	message: messageString,
75	};
76	}
77	}
78
79	const { messages, clear } = useMessages();	×
80	let messageObject = messages.length > 0 ? getProperties(messages[0]) : undefined;	×
81	return (	×
82	<div className={classnames("flash-messages", classes.root)}>
83	<Snackbar
84	// @ts-ignore there is no hide property on the message props!
85	open={!!messageObject && !messageObject.hide}	×
86	message={messageObject && messageObject.message}	×
87	autoHideDuration={6000}
88	onClose={clear}
89	ClickAwayListenerProps={{
90	// Don't close flash messages on click
91	// This breaks some unit tests in Playwright, since a click that was
92	// supposed to go to a button instead gets eaten by the clickaway. And
93	// it's not actually a good UI interaction, since the message is going
94	// to close soon anyways and it's easy to dismiss by accident when you
95	// wanted to read it by clicking something unrelated.
96	mouseEvent: false
97	}}
98	action={
99	messageObject?.action &&	×
100	<Button
101	onClick={messageObject?.action}	×
102	color="primary"
103	>
104	{/* @ts-ignore there is no actionName property on the message props! */}
105	{messageObject?.actionName \|\| "UNDO"}	×
106	</Button>
107	}
108	/>
109	</div>
110	);
111	}
112
113	const FlashMessagesComponent = registerComponent('FlashMessages', FlashMessages, {styles});	1✔
114
115	declare global {
116	interface ComponentTypes {
117	FlashMessages: typeof FlashMessagesComponent
118	}
119	}

ForumMagnum / ForumMagnum / 10116096438

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous