11601727682

Committed 30 Oct 2024 09:12PM UTC coverage: 31.325% (-0.003%) from 31.328%

Build # 11601727682

Build Type

Pull #9935

github

Committed by

Raemon

Commit Message

icon down

Pull Request Pull Request #9935: Streamlined GlossaryEditor, improved Tooltips

Run Details

5031 of 42398 branches covered (11.87%)

Branch coverage included in aggregate %.

1 of 8 new or added lines in 3 files covered. (12.5%)

101 existing lines in 6 files now uncovered.

29647 of 68305 relevant lines covered (43.4%)

173.81 hits per line

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

17.86

/packages/lesswrong/components/quickTakes/LWQuickTakesCollapsedListItem.tsx

import React, { useCallback, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { useHover } from "../common/withHover";
import { isMobile } from "../../lib/utils/isMobile";
import { postGetPageUrl } from "../../lib/collections/posts/helpers";
import classNames from "classnames";
import { commentBodyStyles } from "../../themes/stylePiping";

const styles = (theme: ThemeType) => ({
  root: {
    color: theme.palette.greyAlpha(0.5),
    background: theme.palette.grey[0],
    borderRadius: theme.borderRadius.small,
    border: `1px solid ${theme.palette.grey[200]}`,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 10,
    "&:hover .CommentsItemMeta-menu": {
      opacity: 1
    },
    ...theme.typography.commentStyle,
  },
  commentCount: {
    color: theme.palette.grey[600],
    display: "flex",
    alignItems: "center",
    "& svg": {
      height: 14,
    },
    paddingBottom: 4,
    [theme.breakpoints.down('xs')]: {
      display: 'none',
    },
  },
  commentCountClickable: {
    cursor: "pointer",
    "&:hover": {
      color: theme.palette.grey[1000],
    },
  },
  bodyWrapper: {
    cursor: "pointer",
  },
  body: {
    ...commentBodyStyles(theme),
    position: "relative",
    overflow: "hidden",
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": 2,
  },
  hoverOver: {
    width: 400,
  },
});

const LWQuickTakesCollapsedListItem = ({ quickTake, setExpanded, classes }: {
  quickTake: ShortformComments,
  setExpanded: (expanded: boolean) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { ForumIcon, LWPopper, CommentsNode, CommentsItemMeta, CommentBottomCaveats } = Components;

  const {eventHandlers, hover, anchorEl} = useHover({
    eventProps: {
      pageElementContext: "shortformItemTooltip",
      commentId: quickTake._id,
    },
  });

  const expand = useCallback(() => {
    setExpanded(true);
  }, [setExpanded]);

  const [showParentState, setShowParentState] = useState(false);

  const toggleShowParent = () => {
    setShowParentState(!showParentState);
  }

  const commentCount = quickTake.descendentCount ?? 0;
  const commentsAreClickable = commentCount > 0;
  const displayHoverOver = hover && (quickTake.baseScore > -5) && !isMobile();

  const commentsUrl = quickTake.post
    ? `${postGetPageUrl(quickTake.post)}#${quickTake._id}`
    : undefined;

  const setShowEdit = useCallback(() => {
    if (commentsUrl) {
      window.location.href = commentsUrl;
    }
  }, [commentsUrl]);

  const onClickComments = useCallback(() => {
    if (commentsAreClickable) {
      expand();
      // Clicking also expands the item - setTimeout allows us to make sure
      // this runs _after_ the expansion is already complete
      setTimeout(() => {
        const {_id} = quickTake;
        const children = document.querySelector(`#${_id} .comments-children`);
        children?.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "nearest",
        });
      }, 0);
    }
  }, [expand, commentsAreClickable, quickTake]);

  const commentCountIcon = (
    <div
      onClick={onClickComments}
      className={classNames(classes.commentCount, {
        [classes.commentCountClickable]: commentsAreClickable,
      })}
    >
      <ForumIcon icon="Comment" />
      {commentCount}
    </div>
  );

  const tooltip = (
    <LWPopper
      open={displayHoverOver}
      anchorEl={anchorEl}
      placement="bottom-end"
      clickable={false}
    >
      <div className={classes.hoverOver}>
        <CommentsNode
          truncated
          nestingLevel={1}
          comment={quickTake}
          treeOptions={{
            post: quickTake.post || undefined,
            showCollapseButtons: true,
            hideReply: true,
            forceSingleLine: false,
            forceNotSingleLine: true,
          }}
          hoverPreview />
      </div>
    </LWPopper>
  );

  const body = (
    <div className={classes.bodyWrapper} onClick={expand} {...eventHandlers}>
      <div  className={classes.body}>
        {quickTake.contents?.plaintextMainText}
      </div>
    </div>
  );

  return (
    <div
      className={classes.root}
    >
      <CommentsItemMeta
        {...{
          treeOptions: {
            post: quickTake.post ?? undefined,
            hideParentCommentToggle: true,
            showCollapseButtons: false,
            onToggleCollapsed: () => setExpanded(true),
          },
          comment: quickTake,
          showCommentTitle: false,
          showParentState,
          toggleShowParent,
          collapsed: false,
          toggleCollapse: () => setExpanded(true),
          setShowEdit,
          rightSectionElements: commentCountIcon
        }}
      />
      {body}
      <CommentBottomCaveats comment={quickTake} />
      {tooltip}
    </div>
  );
}

const LWQuickTakesCollapsedListItemComponent = registerComponent(
  "LWQuickTakesCollapsedListItem",
  LWQuickTakesCollapsedListItem,
  {styles},
);

declare global {
  interface ComponentTypes {
    LWQuickTakesCollapsedListItem: typeof LWQuickTakesCollapsedListItemComponent
  }
}

1	import React, { useCallback, useState } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { useHover } from "../common/withHover";	1✔
4	import { isMobile } from "../../lib/utils/isMobile";	1✔
5	import { postGetPageUrl } from "../../lib/collections/posts/helpers";	1✔
6	import classNames from "classnames";	1✔
7	import { commentBodyStyles } from "../../themes/stylePiping";	1✔
8
9	const styles = (theme: ThemeType) => ({	1✔
10	root: {
11	color: theme.palette.greyAlpha(0.5),
12	background: theme.palette.grey[0],
13	borderRadius: theme.borderRadius.small,
14	border: `1px solid ${theme.palette.grey[200]}`,
15	paddingLeft: 12,
16	paddingRight: 12,
17	paddingBottom: 10,
18	"&:hover .CommentsItemMeta-menu": {
19	opacity: 1
20	},
21	...theme.typography.commentStyle,
22	},
23	commentCount: {
24	color: theme.palette.grey[600],
25	display: "flex",
26	alignItems: "center",
27	"& svg": {
28	height: 14,
29	},
30	paddingBottom: 4,
31	[theme.breakpoints.down('xs')]: {
32	display: 'none',
33	},
34	},
35	commentCountClickable: {
36	cursor: "pointer",
37	"&:hover": {
38	color: theme.palette.grey[1000],
39	},
40	},
41	bodyWrapper: {
42	cursor: "pointer",
43	},
44	body: {
45	...commentBodyStyles(theme),
46	position: "relative",
47	overflow: "hidden",
48	display: "-webkit-box",
49	"-webkit-box-orient": "vertical",
50	"-webkit-line-clamp": 2,
51	},
52	hoverOver: {
53	width: 400,
54	},
55	});
56
57	const LWQuickTakesCollapsedListItem = ({ quickTake, setExpanded, classes }: {	1✔
58	quickTake: ShortformComments,
59	setExpanded: (expanded: boolean) => void,
60	classes: ClassesType<typeof styles>,
61	}) => {
UNCOV 62	const { ForumIcon, LWPopper, CommentsNode, CommentsItemMeta, CommentBottomCaveats } = Components;	×
63
UNCOV 64	const {eventHandlers, hover, anchorEl} = useHover({	×
65	eventProps: {
66	pageElementContext: "shortformItemTooltip",
67	commentId: quickTake._id,
68	},
69	});
70
UNCOV 71	const expand = useCallback(() => {	×
UNCOV 72	setExpanded(true);	×
73	}, [setExpanded]);
74
75	const [showParentState, setShowParentState] = useState(false);	×
76
UNCOV 77	const toggleShowParent = () => {	×
78	setShowParentState(!showParentState);	×
79	}
80
81	const commentCount = quickTake.descendentCount ?? 0;	×
UNCOV 82	const commentsAreClickable = commentCount > 0;	×
UNCOV 83	const displayHoverOver = hover && (quickTake.baseScore > -5) && !isMobile();	×
84
85	const commentsUrl = quickTake.post	×
86	? `${postGetPageUrl(quickTake.post)}#${quickTake._id}`	×
87	: undefined;
88
UNCOV 89	const setShowEdit = useCallback(() => {	×
UNCOV 90	if (commentsUrl) {	×
UNCOV 91	window.location.href = commentsUrl;	×
92	}
93	}, [commentsUrl]);
94
UNCOV 95	const onClickComments = useCallback(() => {	×
UNCOV 96	if (commentsAreClickable) {	×
UNCOV 97	expand();	×
98	// Clicking also expands the item - setTimeout allows us to make sure
99	// this runs _after_ the expansion is already complete
100	setTimeout(() => {	×
UNCOV 101	const {_id} = quickTake;	×
UNCOV 102	const children = document.querySelector(`#${_id} .comments-children`);	×
103	children?.scrollIntoView({	×
104	behavior: "smooth",
105	block: "center",
106	inline: "nearest",
107	});
108	}, 0);
109	}
110	}, [expand, commentsAreClickable, quickTake]);
111
112	const commentCountIcon = (
UNCOV 113	<div	×
114	onClick={onClickComments}
115	className={classNames(classes.commentCount, {
116	[classes.commentCountClickable]: commentsAreClickable,
117	})}
118	>
119	<ForumIcon icon="Comment" />
120	{commentCount}
121	</div>
122	);
123
124	const tooltip = (
UNCOV 125	<LWPopper	×
126	open={displayHoverOver}
127	anchorEl={anchorEl}
128	placement="bottom-end"
129	clickable={false}
130	>
131	<div className={classes.hoverOver}>
132	<CommentsNode
133	truncated
134	nestingLevel={1}
135	comment={quickTake}
136	treeOptions={{
137	post: quickTake.post \|\| undefined,	×
138	showCollapseButtons: true,
139	hideReply: true,
140	forceSingleLine: false,
141	forceNotSingleLine: true,
142	}}
143	hoverPreview />
144	</div>
145	</LWPopper>
146	);
147
148	const body = (
UNCOV 149	<div className={classes.bodyWrapper} onClick={expand} {...eventHandlers}>	×
150	<div className={classes.body}>
151	{quickTake.contents?.plaintextMainText}	×
152	</div>
153	</div>
154	);
155
UNCOV 156	return (	×
157	<div
158	className={classes.root}
159	>
160	<CommentsItemMeta
161	{...{
162	treeOptions: {
163	post: quickTake.post ?? undefined,	×
164	hideParentCommentToggle: true,
165	showCollapseButtons: false,
UNCOV 166	onToggleCollapsed: () => setExpanded(true),	×
167	},
168	comment: quickTake,
169	showCommentTitle: false,
170	showParentState,
171	toggleShowParent,
172	collapsed: false,
UNCOV 173	toggleCollapse: () => setExpanded(true),	×
174	setShowEdit,
175	rightSectionElements: commentCountIcon
176	}}
177	/>
178	{body}
179	<CommentBottomCaveats comment={quickTake} />
180	{tooltip}
181	</div>
182	);
183	}
184
185	const LWQuickTakesCollapsedListItemComponent = registerComponent(	1✔
186	"LWQuickTakesCollapsedListItem",
187	LWQuickTakesCollapsedListItem,
188	{styles},
189	);
190
191	declare global {
192	interface ComponentTypes {
193	LWQuickTakesCollapsedListItem: typeof LWQuickTakesCollapsedListItemComponent
194	}
195	}

ForumMagnum / ForumMagnum / 11601727682

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