9423583397

Committed 07 Jun 2024 09:58PM UTC coverage: 31.918% (+0.04%) from 31.88%

Build # 9423583397

Build Type

Pull #9384

github

Committed by

web-flow

Commit Message

Merge 34841236d into c229e36b6

Pull Request Pull Request #9384: [EA] Vibes check

Run Details

4825 of 39439 branches covered (12.23%)

Branch coverage included in aggregate %.

167 of 303 new or added lines in 33 files covered. (55.12%)

2 existing lines in 2 files now uncovered.

28135 of 63824 relevant lines covered (44.08%)

181.44 hits per line

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

28.57

/packages/lesswrong/components/surveys/SurveyPostsItem.tsx

import React, { useCallback, useRef, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { AnalyticsContext, useTracking } from "@/lib/analyticsEvents";
import { useCurrentUser } from "../common/withUser";
import { SECTION_WIDTH } from "../common/SingleColumnSection";
import MoreVertIcon from '@material-ui/icons/MoreVert';
import range from "lodash/range";
import type { SurveyQuestionFormat } from "@/lib/collections/surveyQuestions/schema";

const styles = (theme: ThemeType) => ({
  root: {
    maxWidth: SECTION_WIDTH,
    fontFamily: theme.palette.fonts.sansSerifStack,
    background: theme.palette.grey[0],
    border: `1px solid ${theme.palette.grey[100]}`,
    borderRadius: theme.borderRadius.default,
    padding: 14,
    height: 80,
    display: "flex",
    alignItems: "center",
  },
  info: {
    marginRight: 13,
    color: theme.palette.grey[600],
  },
  questions: {
    flexGrow: 1,
  },
  question: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
  },
  questionText: {
    fontWeight: 600,
    fontSize: 16,
    color: theme.palette.greyAlpha(0.87),
  },
  rankButtons: {
    display: "flex",
    gap: "6px",
  },
  rankButton: {
    padding: 0,
    minHeight: 30,
  },
  tripleDot: {
    cursor: "pointer",
    color: theme.palette.grey[400],
    fontSize: 20,
    "&:hover": {
      color: theme.palette.grey[700],
    },
  },
  menu: {
    maxWidth: "calc(100vw - 100px)",
  },
});

const QuestionReponse = ({format, onRespond, classes}: {
  format: SurveyQuestionFormat,
  onRespond: (response: string | number) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const {EAButton} = Components;
  switch (format) {
  case "rank0To10":
    return (
      <div className={classes.rankButtons}>
        {range(0, 11).map((i) => (
          <EAButton
            key={i}
            onClick={onRespond.bind(null, i)}
            variant="outlined"
            className={classes.rankButton}
          >
            {i}
          </EAButton>
        ))}
      </div>
    );
  default:
      // TODO
      throw new Error("TODO: Implement other question formats");
  }
}

const SurveyPostsItemInternal = ({survey, classes}: {
  survey: SurveyMinimumInfo,
  classes: ClassesType<typeof styles>,
}) => {
  const {captureEvent} = useTracking();
  const currentUser = useCurrentUser();
  const anchorEl = useRef<HTMLDivElement | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  const onToggleMenu = useCallback(() => {
    setIsOpen((open) => {
      const newOpen = !open;
      captureEvent("tripleDotClick", {
        open: newOpen,
        itemType: "survey",
        surveyId: survey._id,
      });
      return newOpen;
    });
  }, [captureEvent, survey._id]);

  const onRespond = useCallback((response: string | number) => {
    // TODO: Send response to the server
    captureEvent("surveyResponse", {
      surveyId: survey._id,
      response,
      source: "SurveyPostsItem",
    });
  }, [captureEvent, survey._id]);

  const onDismiss = useCallback(() => {
    // TODO: Dismiss
    captureEvent("surveyDismiss", {
      surveyId: survey._id,
      source: "SurveyPostsItem",
    });
  }, [captureEvent, survey._id]);

  const onOptOut = useCallback(() => {
    // TODO: Opt-out
    captureEvent("surveyOptOut", {
      surveyId: survey._id,
      source: "SurveyPostsItem",
    });
  }, [captureEvent, survey._id]);

  const {
    LWTooltip, ForumIcon, LWClickAwayListener, DropdownMenu, DropdownItem,
    PopperCard,
  } = Components;
  return (
    <div className={classes.root}>
      <LWTooltip title="Some really informative stuff" placement="right">
        <ForumIcon icon="QuestionMarkCircle" className={classes.info} />
      </LWTooltip>
      <div className={classes.questions}>
        {survey.questions.map(({_id, question, format}) => (
          <div key={_id} className={classes.question}>
            <div className={classes.questionText}>{question}</div>
            <QuestionReponse
              format={format}
              onRespond={onRespond}
              classes={classes}
            />
          </div>
        ))}
      </div>
      <div ref={anchorEl}>
        <MoreVertIcon
          onClick={onToggleMenu}
          className={classes.tripleDot}
        />
      </div>
      <PopperCard
        open={isOpen}
        placement="left-start"
        anchorEl={anchorEl.current}
        allowOverflow
      >
        <LWClickAwayListener onClickAway={setIsOpen.bind(null, false)}>
          <DropdownMenu className={classes.menu}>
            {currentUser?.isAdmin &&
              <DropdownItem
                title="Edit survey"
                icon="Edit"
                to={`/survey/${survey._id}/edit`}
              />
            }
            <DropdownItem
              title="Dismiss"
              icon="Close"
              onClick={onDismiss}
            />
            <DropdownItem
              title="Opt-out of feedback"
              icon="No"
              onClick={onOptOut}
            />
          </DropdownMenu>
        </LWClickAwayListener>
      </PopperCard>
    </div>
  );
}

const SurveyPostsItem = ({survey, classes}: {
  survey: SurveyMinimumInfo,
  classes: ClassesType<typeof styles>,
}) => {
  return (
    <AnalyticsContext pageElementContext="surveyPostsItem">
      <SurveyPostsItemInternal survey={survey} classes={classes} />
    </AnalyticsContext>
  );
}

const SurveyPostsItemComponent = registerComponent(
  "SurveyPostsItem",
  SurveyPostsItem,
  {styles},
);

declare global {
  interface ComponentTypes {
    SurveyPostsItem: typeof SurveyPostsItemComponent
  }
}

1	import React, { useCallback, useRef, useState } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { AnalyticsContext, useTracking } from "@/lib/analyticsEvents";	1✔
4	import { useCurrentUser } from "../common/withUser";	1✔
5	import { SECTION_WIDTH } from "../common/SingleColumnSection";	1✔
6	import MoreVertIcon from '@material-ui/icons/MoreVert';	1✔
7	import range from "lodash/range";	1✔
8	import type { SurveyQuestionFormat } from "@/lib/collections/surveyQuestions/schema";
9
10	const styles = (theme: ThemeType) => ({	1✔
11	root: {
12	maxWidth: SECTION_WIDTH,
13	fontFamily: theme.palette.fonts.sansSerifStack,
14	background: theme.palette.grey[0],
15	border: `1px solid ${theme.palette.grey[100]}`,
16	borderRadius: theme.borderRadius.default,
17	padding: 14,
18	height: 80,
19	display: "flex",
20	alignItems: "center",
21	},
22	info: {
23	marginRight: 13,
24	color: theme.palette.grey[600],
25	},
26	questions: {
27	flexGrow: 1,
28	},
29	question: {
30	display: "flex",
31	flexDirection: "column",
32	gap: "8px",
33	},
34	questionText: {
35	fontWeight: 600,
36	fontSize: 16,
37	color: theme.palette.greyAlpha(0.87),
38	},
39	rankButtons: {
40	display: "flex",
41	gap: "6px",
42	},
43	rankButton: {
44	padding: 0,
45	minHeight: 30,
46	},
47	tripleDot: {
48	cursor: "pointer",
49	color: theme.palette.grey[400],
50	fontSize: 20,
51	"&:hover": {
52	color: theme.palette.grey[700],
53	},
54	},
55	menu: {
56	maxWidth: "calc(100vw - 100px)",
57	},
58	});
59
60	const QuestionReponse = ({format, onRespond, classes}: {	1✔
61	format: SurveyQuestionFormat,
62	onRespond: (response: string \| number) => void,
63	classes: ClassesType<typeof styles>,
64	}) => {
NEW 65	const {EAButton} = Components;	×
NEW 66	switch (format) {	×
67	case "rank0To10":
NEW 68	return (	×
69	<div className={classes.rankButtons}>
70	{range(0, 11).map((i) => (
NEW 71	<EAButton	×
72	key={i}
73	onClick={onRespond.bind(null, i)}
74	variant="outlined"
75	className={classes.rankButton}
76	>
77	{i}
78	</EAButton>
79	))}
80	</div>
81	);
82	default:
83	// TODO
NEW 84	throw new Error("TODO: Implement other question formats");	×
85	}
86	}
87
88	const SurveyPostsItemInternal = ({survey, classes}: {	1✔
89	survey: SurveyMinimumInfo,
90	classes: ClassesType<typeof styles>,
91	}) => {
NEW 92	const {captureEvent} = useTracking();	×
NEW 93	const currentUser = useCurrentUser();	×
NEW 94	const anchorEl = useRef<HTMLDivElement \| null>(null);	×
NEW 95	const [isOpen, setIsOpen] = useState(false);	×
96
NEW 97	const onToggleMenu = useCallback(() => {	×
NEW 98	setIsOpen((open) => {	×
NEW 99	const newOpen = !open;	×
NEW 100	captureEvent("tripleDotClick", {	×
101	open: newOpen,
102	itemType: "survey",
103	surveyId: survey._id,
104	});
NEW 105	return newOpen;	×
106	});
107	}, [captureEvent, survey._id]);
108
NEW 109	const onRespond = useCallback((response: string \| number) => {	×
110	// TODO: Send response to the server
NEW 111	captureEvent("surveyResponse", {	×
112	surveyId: survey._id,
113	response,
114	source: "SurveyPostsItem",
115	});
116	}, [captureEvent, survey._id]);
117
NEW 118	const onDismiss = useCallback(() => {	×
119	// TODO: Dismiss
NEW 120	captureEvent("surveyDismiss", {	×
121	surveyId: survey._id,
122	source: "SurveyPostsItem",
123	});
124	}, [captureEvent, survey._id]);
125
NEW 126	const onOptOut = useCallback(() => {	×
127	// TODO: Opt-out
NEW 128	captureEvent("surveyOptOut", {	×
129	surveyId: survey._id,
130	source: "SurveyPostsItem",
131	});
132	}, [captureEvent, survey._id]);
133
134	const {
135	LWTooltip, ForumIcon, LWClickAwayListener, DropdownMenu, DropdownItem,
136	PopperCard,
NEW 137	} = Components;	×
NEW 138	return (	×
139	<div className={classes.root}>
140	<LWTooltip title="Some really informative stuff" placement="right">
141	<ForumIcon icon="QuestionMarkCircle" className={classes.info} />
142	</LWTooltip>
143	<div className={classes.questions}>
144	{survey.questions.map(({_id, question, format}) => (
NEW 145	<div key={_id} className={classes.question}>	×
146	<div className={classes.questionText}>{question}</div>
147	<QuestionReponse
148	format={format}
149	onRespond={onRespond}
150	classes={classes}
151	/>
152	</div>
153	))}
154	</div>
155	<div ref={anchorEl}>
156	<MoreVertIcon
157	onClick={onToggleMenu}
158	className={classes.tripleDot}
159	/>
160	</div>
161	<PopperCard
162	open={isOpen}
163	placement="left-start"
164	anchorEl={anchorEl.current}
165	allowOverflow
166	>
167	<LWClickAwayListener onClickAway={setIsOpen.bind(null, false)}>
168	<DropdownMenu className={classes.menu}>
169	{currentUser?.isAdmin &&	×
170	<DropdownItem
171	title="Edit survey"
172	icon="Edit"
173	to={`/survey/${survey._id}/edit`}
174	/>
175	}
176	<DropdownItem
177	title="Dismiss"
178	icon="Close"
179	onClick={onDismiss}
180	/>
181	<DropdownItem
182	title="Opt-out of feedback"
183	icon="No"
184	onClick={onOptOut}
185	/>
186	</DropdownMenu>
187	</LWClickAwayListener>
188	</PopperCard>
189	</div>
190	);
191	}
192
193	const SurveyPostsItem = ({survey, classes}: {	1✔
194	survey: SurveyMinimumInfo,
195	classes: ClassesType<typeof styles>,
196	}) => {
NEW 197	return (	×
198	<AnalyticsContext pageElementContext="surveyPostsItem">
199	<SurveyPostsItemInternal survey={survey} classes={classes} />
200	</AnalyticsContext>
201	);
202	}
203
204	const SurveyPostsItemComponent = registerComponent(	1✔
205	"SurveyPostsItem",
206	SurveyPostsItem,
207	{styles},
208	);
209
210	declare global {
211	interface ComponentTypes {
212	SurveyPostsItem: typeof SurveyPostsItemComponent
213	}
214	}

ForumMagnum / ForumMagnum / 9423583397

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