11020836770

Committed 24 Sep 2024 07:46PM UTC coverage: 31.833% (-0.06%) from 31.894%

Build # 11020836770

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9783 from ForumMagnum/fix-af-voting-bugs

Fix bugs in AF voting

Run Details

5073 of 41389 branches covered (12.26%)

Branch coverage included in aggregate %.

17 of 19 new or added lines in 6 files covered. (89.47%)

2 existing lines in 1 file now uncovered.

29445 of 67046 relevant lines covered (43.92%)

184.04 hits per line

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

13.33

/packages/lesswrong/components/votes/OverallVoteAxis.tsx

import { Components, registerComponent } from '../../lib/vulcan-lib/components';
import React from 'react';
import { userIsAdmin } from '../../lib/vulcan-users/permissions';
import moment from '../../lib/moment-timezone';
import { useCurrentUser } from '../common/withUser';
import { isAF } from '../../lib/instanceSettings';
import { voteButtonsDisabledForUser } from '../../lib/collections/users/helpers';
import type { VotingProps } from './votingProps';
import type { OverallVoteButtonProps } from './OverallVoteButton';
import classNames from 'classnames';
import { isFriendlyUI } from '../../themes/forumTheme';

const styles = (theme: ThemeType): JssStyles => ({
  overallSection: {
    display: 'inline-block',
    height: 24,
    paddingTop: 2
  },
  overallSectionBox: {
    marginLeft: 8,
    outline: theme.palette.border.commentBorder,
    borderRadius: isFriendlyUI ? theme.borderRadius.small : 2,
    textAlign: 'center',
    minWidth: 60
  },
  vote: {
    fontSize: 25,
    lineHeight: 0.6,
    whiteSpace: "nowrap",
    display: "inline-block"
  },
  voteScore: {
    fontSize: '1.1rem',
    marginLeft: 4,
    marginRight: 4,
    lineHeight: 1,
  },
  secondarySymbol: {
    fontFamily: theme.typography.body1.fontFamily,
  },
  secondaryScore: {
    fontSize: '1.1rem',
    marginLeft: 2,
    marginRight: 14
  },
  secondaryScoreNumber: {
    marginLeft: 3,
  },
  tooltipHelp: {
    fontSize: '1rem',
    fontStyle: "italic"
  },
  tooltip: {
    transform: isFriendlyUI ? "translateY(-10px)" : undefined,
  },
  verticalArrows: {
    "& .LWTooltip-root": {
      transform: "translateY(1px)",
    },
    "& $voteScore": {
      transform: "translateY(-2px)",
      display: "block",
    },
  },
})

const OverallVoteAxis = ({
  document,
  hideKarma=false,
  voteProps,
  classes,
  showBox=false,
  className,
}: {
  document: VoteableTypeClient,
  hideKarma?: boolean,
  voteProps: VotingProps<VoteableTypeClient>,
  classes: ClassesType,
  showBox?: boolean
  className?: string,
}) => {
  const currentUser = useCurrentUser();

  if (!document) return null;

  const { OverallVoteButton, LWTooltip } = Components

  const collectionName = voteProps.collectionName;
  const extendedScore = voteProps.document?.extendedScore
  const voteCount = extendedScore && ("approvalVoteCount" in extendedScore)
    ? extendedScore.approvalVoteCount
    : (voteProps.voteCount || 0);
  const karma = voteProps.baseScore;
  const {fail, reason: whyYouCantVote} = voteButtonsDisabledForUser(currentUser);
  const canVote = !fail;

  let moveToAlignnmentUserId = ""
  let documentTypeName = "comment";
  if (collectionName === "Comments") {
    const comment = document as CommentsList
    moveToAlignnmentUserId = comment.moveToAlignmentUserId
  }
  if (collectionName === "Posts") {
    documentTypeName = "post";
  }
  if (collectionName === "Revisions") {
    documentTypeName = "revision";
  }

  const af = (document as any).af;
  const afDate = (document as any).afDate;
  const afBaseScore = voteProps.document.afBaseScore;

  const moveToAfInfo = userIsAdmin(currentUser) && !!moveToAlignnmentUserId && (
    <div className={classes.tooltipHelp}>
      <span>Moved to AF by <Components.UsersName documentId={moveToAlignnmentUserId }/> on { afDate && moment(new Date(afDate)).format('YYYY-MM-DD') }</span>
    </div>
  )

  const karmaTooltipTitle = hideKarma
    ? 'This post has disabled karma visibility'
    : <div>This {documentTypeName} has {karma} <b>overall</b> karma ({voteCount} {voteCount === 1 ? "Vote" : "Votes"})</div>

  const TooltipIfDisabled = (canVote
    ? ({children}: {children: React.ReactNode}) => <>{children}</>
    : ({children}: {children: React.ReactNode}) => <LWTooltip
      placement="top"
      popperClassName={classes.tooltip}
      title={<>
        <div>{whyYouCantVote}</div>
        <div>{karmaTooltipTitle}</div>
      </>}
    >
      {children}
    </LWTooltip>
  )
  const TooltipIfEnabled = (canVote
    ? ({children, ...props}: React.ComponentProps<typeof LWTooltip>) =>
      <LWTooltip {...props} popperClassName={classes.tooltip}>
        {children}
      </LWTooltip>
    : ({children}: {children: React.ReactNode}) => <>{children}</>
  );

  const tooltipPlacement = isFriendlyUI ? "top" : "bottom";

  const buttonProps: Partial<OverallVoteButtonProps<VoteableTypeClient>> = {};
  // TODO: In the fullness of time
  const verticalArrows = false;
  if (verticalArrows) {
    buttonProps.solidArrow = true;
  }

  return <TooltipIfDisabled>
    <span className={classes.vote}>
      {!!af && !isAF &&
        <LWTooltip
          placement={tooltipPlacement}
          popperClassName={classes.tooltip}
          title={
            <div>
              <p>AI Alignment Forum Karma</p>
              { moveToAfInfo }
            </div>
          }
        >
          <span className={classes.secondaryScore}>
            <span className={classes.secondarySymbol}>Ω</span>
            <span className={classes.secondaryScoreNumber}>{afBaseScore || 0}</span>
          </span>
        </LWTooltip>
      }
      {!af && isAF &&
        <LWTooltip
          title="LessWrong Karma"
          placement={tooltipPlacement}
          className={classes.tooltip}
        >
          <span className={classes.secondaryScore}>
            <span className={classes.secondarySymbol}>LW</span>
            <span className={classes.secondaryScoreNumber}>{document.baseScore || 0}</span>
          </span>
        </LWTooltip>
      }
      {(!isAF || !!af) &&
        <span className={classNames(classes.overallSection, className, {
          [classes.overallSectionBox]: showBox,
          [classes.verticalArrows]: verticalArrows,
        })}>
          <TooltipIfEnabled
            title={<div><b>Overall Karma: Downvote</b><br />How much do you like this overall?<br /><em>For strong downvote, click-and-hold<br />(Click twice on mobile)</em></div>}
            placement={tooltipPlacement}
          >
            <OverallVoteButton
              orientation={verticalArrows ? "down" : "left"}
              color="error"
              upOrDown="Downvote"
              enabled={canVote}
              {...voteProps}
              {...buttonProps}
            />
          </TooltipIfEnabled>
          <TooltipIfEnabled title={karmaTooltipTitle} placement={tooltipPlacement}>
            {hideKarma
              ? <span>{' '}</span>
              : <span className={classes.voteScore}>
                  {karma}
                </span>
            }
          </TooltipIfEnabled>
          <TooltipIfEnabled
            title={<div><b>Overall Karma: Upvote</b><br />How much do you like this overall?<br /><em>For strong upvote, click-and-hold<br />(Click twice on mobile)</em></div>}
            placement={tooltipPlacement}
          >
            <OverallVoteButton
              orientation={verticalArrows ? "up" : "right"}
              color="secondary"
              upOrDown="Upvote"
              enabled={canVote}
              {...voteProps}
              {...buttonProps}
            />
          </TooltipIfEnabled>
        </span>
      }
    </span>
  </TooltipIfDisabled>
}

const OverallVoteAxisComponent = registerComponent('OverallVoteAxis', OverallVoteAxis, {styles});

declare global {
  interface ComponentTypes {
    OverallVoteAxis: typeof OverallVoteAxisComponent
  }
}

1	import { Components, registerComponent } from '../../lib/vulcan-lib/components';	1✔
2	import React from 'react';	1✔
3	import { userIsAdmin } from '../../lib/vulcan-users/permissions';	1✔
4	import moment from '../../lib/moment-timezone';	1✔
5	import { useCurrentUser } from '../common/withUser';	1✔
6	import { isAF } from '../../lib/instanceSettings';	1✔
7	import { voteButtonsDisabledForUser } from '../../lib/collections/users/helpers';	1✔
8	import type { VotingProps } from './votingProps';
9	import type { OverallVoteButtonProps } from './OverallVoteButton';
10	import classNames from 'classnames';	1✔
11	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
12
13	const styles = (theme: ThemeType): JssStyles => ({	1✔
14	overallSection: {
15	display: 'inline-block',
16	height: 24,
17	paddingTop: 2
18	},
19	overallSectionBox: {
20	marginLeft: 8,
21	outline: theme.palette.border.commentBorder,
22	borderRadius: isFriendlyUI ? theme.borderRadius.small : 2,	1!
23	textAlign: 'center',
24	minWidth: 60
25	},
26	vote: {
27	fontSize: 25,
28	lineHeight: 0.6,
29	whiteSpace: "nowrap",
30	display: "inline-block"
31	},
32	voteScore: {
33	fontSize: '1.1rem',
34	marginLeft: 4,
35	marginRight: 4,
36	lineHeight: 1,
37	},
38	secondarySymbol: {
39	fontFamily: theme.typography.body1.fontFamily,
40	},
41	secondaryScore: {
42	fontSize: '1.1rem',
43	marginLeft: 2,
44	marginRight: 14
45	},
46	secondaryScoreNumber: {
47	marginLeft: 3,
48	},
49	tooltipHelp: {
50	fontSize: '1rem',
51	fontStyle: "italic"
52	},
53	tooltip: {
54	transform: isFriendlyUI ? "translateY(-10px)" : undefined,	1!
55	},
56	verticalArrows: {
57	"& .LWTooltip-root": {
58	transform: "translateY(1px)",
59	},
60	"& $voteScore": {
61	transform: "translateY(-2px)",
62	display: "block",
63	},
64	},
65	})
66
67	const OverallVoteAxis = ({	1✔
68	document,
69	hideKarma=false,	×
70	voteProps,
71	classes,
72	showBox=false,	×
73	className,
74	}: {
75	document: VoteableTypeClient,
76	hideKarma?: boolean,
77	voteProps: VotingProps<VoteableTypeClient>,
78	classes: ClassesType,
79	showBox?: boolean
80	className?: string,
81	}) => {
82	const currentUser = useCurrentUser();	×
83
84	if (!document) return null;	×
85
86	const { OverallVoteButton, LWTooltip } = Components	×
87
88	const collectionName = voteProps.collectionName;	×
89	const extendedScore = voteProps.document?.extendedScore	×
90	const voteCount = extendedScore && ("approvalVoteCount" in extendedScore)	×
91	? extendedScore.approvalVoteCount	×
92	: (voteProps.voteCount \|\| 0);	×
93	const karma = voteProps.baseScore;	×
94	const {fail, reason: whyYouCantVote} = voteButtonsDisabledForUser(currentUser);	×
95	const canVote = !fail;	×
96
97	let moveToAlignnmentUserId = ""	×
98	let documentTypeName = "comment";	×
99	if (collectionName === "Comments") {	×
100	const comment = document as CommentsList	×
101	moveToAlignnmentUserId = comment.moveToAlignmentUserId	×
102	}
103	if (collectionName === "Posts") {	×
104	documentTypeName = "post";	×
105	}
106	if (collectionName === "Revisions") {	×
107	documentTypeName = "revision";	×
108	}
109
110	const af = (document as any).af;	×
111	const afDate = (document as any).afDate;	×
NEW 112	const afBaseScore = voteProps.document.afBaseScore;	×
113
114	const moveToAfInfo = userIsAdmin(currentUser) && !!moveToAlignnmentUserId && (	×
115	<div className={classes.tooltipHelp}>
116	<span>Moved to AF by <Components.UsersName documentId={moveToAlignnmentUserId }/> on { afDate && moment(new Date(afDate)).format('YYYY-MM-DD') }</span>	×
117	</div>
118	)
119
120	const karmaTooltipTitle = hideKarma	×
121	? 'This post has disabled karma visibility'	×
122	: <div>This {documentTypeName} has {karma} <b>overall</b> karma ({voteCount} {voteCount === 1 ? "Vote" : "Votes"})</div>	×
123
124	const TooltipIfDisabled = (canVote	×
125	? ({children}: {children: React.ReactNode}) => <>{children}</>	×
126	: ({children}: {children: React.ReactNode}) => <LWTooltip	×
127	placement="top"
128	popperClassName={classes.tooltip}
129	title={<>
130	<div>{whyYouCantVote}</div>
131	<div>{karmaTooltipTitle}</div>
132	</>}
133	>
134	{children}
135	</LWTooltip>
136	)
137	const TooltipIfEnabled = (canVote	×
138	? ({children, ...props}: React.ComponentProps<typeof LWTooltip>) =>	×
139	<LWTooltip {...props} popperClassName={classes.tooltip}>	×
140	{children}
141	</LWTooltip>
142	: ({children}: {children: React.ReactNode}) => <>{children}</>	×
143	);
144
145	const tooltipPlacement = isFriendlyUI ? "top" : "bottom";	×
146
147	const buttonProps: Partial<OverallVoteButtonProps<VoteableTypeClient>> = {};	×
148	// TODO: In the fullness of time
149	const verticalArrows = false;	×
150	if (verticalArrows) {	×
151	buttonProps.solidArrow = true;	×
152	}
153
154	return <TooltipIfDisabled>	×
155	<span className={classes.vote}>
156	{!!af && !isAF &&	×
157	<LWTooltip
158	placement={tooltipPlacement}
159	popperClassName={classes.tooltip}
160	title={
161	<div>
162	<p>AI Alignment Forum Karma</p>
163	{ moveToAfInfo }
164	</div>
165	}
166	>
167	<span className={classes.secondaryScore}>
168	<span className={classes.secondarySymbol}>Ω</span>
169	<span className={classes.secondaryScoreNumber}>{afBaseScore \|\| 0}</span>	×
170	</span>
171	</LWTooltip>
172	}
173	{!af && isAF &&	×
174	<LWTooltip
175	title="LessWrong Karma"
176	placement={tooltipPlacement}
177	className={classes.tooltip}
178	>
179	<span className={classes.secondaryScore}>
180	<span className={classes.secondarySymbol}>LW</span>
181	<span className={classes.secondaryScoreNumber}>{document.baseScore \|\| 0}</span>	×
182	</span>
183	</LWTooltip>
184	}
185	{(!isAF \|\| !!af) &&	×
186	<span className={classNames(classes.overallSection, className, {
187	[classes.overallSectionBox]: showBox,
188	[classes.verticalArrows]: verticalArrows,
189	})}>
190	<TooltipIfEnabled
191	title={<div><b>Overall Karma: Downvote</b><br />How much do you like this overall?<br /><em>For strong downvote, click-and-hold<br />(Click twice on mobile)</em></div>}
192	placement={tooltipPlacement}
193	>
194	<OverallVoteButton
195	orientation={verticalArrows ? "down" : "left"}	×
196	color="error"
197	upOrDown="Downvote"
198	enabled={canVote}
199	{...voteProps}
200	{...buttonProps}
201	/>
202	</TooltipIfEnabled>
203	<TooltipIfEnabled title={karmaTooltipTitle} placement={tooltipPlacement}>
204	{hideKarma
205	? <span>{' '}</span>	×
206	: <span className={classes.voteScore}>
207	{karma}
208	</span>
209	}
210	</TooltipIfEnabled>
211	<TooltipIfEnabled
212	title={<div><b>Overall Karma: Upvote</b><br />How much do you like this overall?<br /><em>For strong upvote, click-and-hold<br />(Click twice on mobile)</em></div>}
213	placement={tooltipPlacement}
214	>
215	<OverallVoteButton
216	orientation={verticalArrows ? "up" : "right"}	×
217	color="secondary"
218	upOrDown="Upvote"
219	enabled={canVote}
220	{...voteProps}
221	{...buttonProps}
222	/>
223	</TooltipIfEnabled>
224	</span>
225	}
226	</span>
227	</TooltipIfDisabled>
228	}
229
230	const OverallVoteAxisComponent = registerComponent('OverallVoteAxis', OverallVoteAxis, {styles});	1✔
231
232	declare global {
233	interface ComponentTypes {
234	OverallVoteAxis: typeof OverallVoteAxisComponent
235	}
236	}

ForumMagnum / ForumMagnum / 11020836770

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