9429563607

Committed 08 Jun 2024 02:52PM UTC coverage: 31.928% (+0.05%) from 31.88%

Build # 9429563607

Build Type

Pull #9384

github

Committed by

jpaddison3

Commit Message

fix permissions for non-admins

Co-authored-by: oetherington <ollie@etherington.xyz>

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

Run Details

4825 of 39428 branches covered (12.24%)

Branch coverage included in aggregate %.

173 of 313 new or added lines in 34 files covered. (55.27%)

291 existing lines in 9 files now uncovered.

28136 of 63809 relevant lines covered (44.09%)

181.53 hits per line

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

21.92

/packages/lesswrong/components/surveys/SurveyEditPage.tsx

import React, { useCallback, useState } from "react";
import { Components, getFragment, registerComponent } from "../../lib/vulcan-lib";
import { gql, useMutation } from "@apollo/client";
import { Link } from "@/lib/reactRouterWrapper";
import { useCurrentUser } from "../common/withUser";
import { useLocation } from "@/lib/routeUtil";
import { useSingle } from "@/lib/crud/withSingle";
import { SurveyQuestionFormat, surveyQuestionFormats } from "@/lib/collections/surveyQuestions/schema";
import type { SettingsOption } from "@/lib/collections/posts/dropdownOptions";

const styles = (theme: ThemeType) => ({
  root: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    paddingTop: 30,
  },
  surveyAdmin: {
    color: theme.palette.primary.main,
  },
  secondaryText: {
    color: theme.palette.grey[600],
  },
  form: {
    display: "flex",
    flexDirection: "column",
    gap: "6px",
  },
  surveyName: {
    margin: "20px 0",
  },
  question: {
    marginTop: 4,
    background: theme.palette.grey[0],
    border: `1px solid ${theme.palette.grey[100]}`,
    borderRadius: theme.borderRadius.default,
    padding: 14,
    display: "flex",
    gap: "14px",
    "& > :first-child": {
      flexGrow: 1,
    },
  },
  questionInfo: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: "8px",
  },
  questionFormat: {
    display: "flex",
    "& .SectionTitle-root": {
      padding: 0,
      marginRight: -20,
    },
  },
  questionButtons: {
    display: "flex",
    alignItems: "center",
    gap: "4px",
  },
  error: {
    color: theme.palette.text.error2,
  },
  buttons: {
    display: "flex",
    gap: "12px",
    justifyContent: "flex-end",
    marginTop: 24,
  },
  submit: {
    width: 100,
  },
});

const formatOptions: Record<string, SettingsOption> = Object.fromEntries(
  Object
    .keys(surveyQuestionFormats)
    .map((format: SurveyQuestionFormat) =>
      [format, {label: surveyQuestionFormats[format]}],
    ),
);

const updateSurveyMutation = gql`
  mutation editSurvey($surveyId: String!, $name: String!, $questions: [SurveyQuestionInfo!]!) {
    editSurvey(surveyId: $surveyId, name: $name, questions: $questions) {
      ...SurveyMinimumInfo
    }
  }
  ${getFragment("SurveyMinimumInfo")}
`;

export type SurveyQuestionInfo = {
  _id?: string,
  question: string,
  format: SurveyQuestionFormat,
}

const SurveyForm = ({survey, refetch, classes}: {
  survey: SurveyMinimumInfo,
  refetch?: () => Promise<void>,
  classes: ClassesType<typeof styles>,
}) => {
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);
  const [name, setName] = useState(survey.name);
  const [questions, setQuestions] = useState<SurveyQuestionInfo[]>(
    survey.questions.map(({_id, question, format}) => ({_id, question, format})),
  );

  const onMoveUp = useCallback((index: number) => {
    setQuestions((questions) => [
      ...questions.slice(0, index - 1),
      questions[index],
      questions[index - 1],
      ...questions.slice(index + 1),
    ]);
  }, []);

  const onMoveDown = useCallback((index: number) => {
    setQuestions((questions) => [
      ...questions.slice(0, index),
      questions[index + 1],
      questions[index],
      ...questions.slice(index + 2),
    ]);
  }, []);

  const setQuestion = useCallback((index: number, question: string) => {
    setQuestions((questions) => [
      ...questions.slice(0, index),
      {...questions[index], question},
      ...questions.slice(index + 1),
    ]);
  }, []);

  const setFormat = useCallback((index: number, format: SurveyQuestionFormat) => {
    setQuestions((questions) => [
      ...questions.slice(0, index),
      {...questions[index], format},
      ...questions.slice(index + 1),
    ]);
  }, []);

  const onDeleteQuestion = useCallback((index: number) => {
    setQuestions((questions) =>
      questions.slice(0, index).concat(questions.slice(index + 1)),
    );
  }, []);

  const onAddQuestion = useCallback(() => {
    setQuestions((questions) => [...questions, {
      question: "New question?",
      format: "rank0To10",
    }]);
  }, []);

  const [updateSurvey] = useMutation(updateSurveyMutation);

  const onSubmit = useCallback(async () => {
    setError("");
    setSaving(true);
    try {
      await updateSurvey({
        variables: {
          surveyId: survey._id,
          name,
          questions,
        },
      });
      await refetch?.();
    } catch (e) {
      setError(e.message);
    }
    setSaving(false);
  }, [updateSurvey, refetch, survey._id, name, questions]);

  const {
    EAOnboardingInput, EAButton, ForumIcon, LWTooltip, ForumDropdown,
    SectionTitle, Loading,
  } = Components;
  return (
    <div className={classes.form}>
      <EAOnboardingInput
        value={name}
        setValue={setName}
        placeholder="Survey name"
        disabled={saving}
        className={classes.surveyName}
      />
      {questions.map(({question, format}, i) => (
        <div key={i} className={classes.question}>
          <div className={classes.questionInfo}>
            <EAOnboardingInput
              value={question}
              setValue={setQuestion.bind(null, i)}
              placeholder="Question"
              disabled={saving}
            />
            <div className={classes.questionFormat}>
              <SectionTitle title="Response type:" noTopMargin />
              <ForumDropdown
                value={format}
                options={formatOptions}
                onSelect={setFormat.bind(null, i)}
                disabled={saving}
              />
            </div>
          </div>
          <div className={classes.questionButtons}>
            <LWTooltip title="Move up" placement="bottom">
              <EAButton
                variant="outlined"
                onClick={onMoveUp.bind(null, i)}
                disabled={i === 0 || saving}
              >
                <ForumIcon icon="NarrowArrowUp" />
              </EAButton>
            </LWTooltip>
            <LWTooltip title="Move down" placement="bottom">
              <EAButton
                variant="outlined"
                onClick={onMoveDown.bind(null, i)}
                disabled={i === questions.length - 1 || saving}
              >
                <ForumIcon icon="NarrowArrowDown" />
              </EAButton>
            </LWTooltip>
            <LWTooltip title="Delete" placement="bottom">
              <EAButton
                variant="outlined"
                onClick={onDeleteQuestion.bind(null, i)}
                disabled={saving}
              >
                <ForumIcon icon="Close" />
              </EAButton>
            </LWTooltip>
          </div>
        </div>
      ))}
      {error &&
        <div className={classes.error}>Error: {error}</div>
      }
      <div className={classes.buttons}>
        <EAButton onClick={onAddQuestion} variant="outlined" disabled={saving}>
          <ForumIcon icon="Plus" /> Add question
        </EAButton>
        <EAButton onClick={onSubmit} disabled={saving} className={classes.submit}>
          {saving ? <Loading /> : "Save"}
        </EAButton>
      </div>
    </div>
  );
}

const SurveyEditor = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {params: {id}} = useLocation();
  const {document: survey, loading, refetch} = useSingle({
    collectionName: "Surveys",
    fragmentName: "SurveyMinimumInfo",
    documentId: id,
  });

  const {SingleColumnSection, SectionTitle, Loading} = Components;
  return (
    <SingleColumnSection className={classes.root}>
      <Link to="/admin/surveys" className={classes.surveyAdmin}>
        &lt;- Back to survey admin
      </Link>
      <SectionTitle title="Edit survey" />
      {loading && <Loading />}
      {!loading && !survey &&
        <div className={classes.secondaryText}>Survey not found</div>
      }
      {survey &&
        <SurveyForm survey={survey} refetch={refetch} classes={classes} />
      }
    </SingleColumnSection>
  );
}

const SurveyEditPage = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser();
  return currentUser?.isAdmin
    ? <SurveyEditor classes={classes} />
    : <Components.Error404 />;
}

const SurveyEditPageComponent = registerComponent(
  "SurveyEditPage",
  SurveyEditPage,
  {styles},
);

declare global {
  interface ComponentTypes {
    SurveyEditPage: typeof SurveyEditPageComponent
  }
}

1	import React, { useCallback, useState } from "react";	2✔
2	import { Components, getFragment, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { gql, useMutation } from "@apollo/client";	1✔
4	import { Link } from "@/lib/reactRouterWrapper";	1✔
5	import { useCurrentUser } from "../common/withUser";	1✔
6	import { useLocation } from "@/lib/routeUtil";	1✔
7	import { useSingle } from "@/lib/crud/withSingle";	1✔
8	import { SurveyQuestionFormat, surveyQuestionFormats } from "@/lib/collections/surveyQuestions/schema";	1✔
9	import type { SettingsOption } from "@/lib/collections/posts/dropdownOptions";
10
11	const styles = (theme: ThemeType) => ({	1✔
12	root: {
13	fontFamily: theme.palette.fonts.sansSerifStack,
14	paddingTop: 30,
15	},
16	surveyAdmin: {
17	color: theme.palette.primary.main,
18	},
19	secondaryText: {
20	color: theme.palette.grey[600],
21	},
22	form: {
23	display: "flex",
24	flexDirection: "column",
25	gap: "6px",
26	},
27	surveyName: {
28	margin: "20px 0",
29	},
30	question: {
31	marginTop: 4,
32	background: theme.palette.grey[0],
33	border: `1px solid ${theme.palette.grey[100]}`,
34	borderRadius: theme.borderRadius.default,
35	padding: 14,
36	display: "flex",
37	gap: "14px",
38	"& > :first-child": {
39	flexGrow: 1,
40	},
41	},
42	questionInfo: {
43	display: "flex",
44	flexDirection: "column",
45	alignItems: "flex-start",
46	gap: "8px",
47	},
48	questionFormat: {
49	display: "flex",
50	"& .SectionTitle-root": {
51	padding: 0,
52	marginRight: -20,
53	},
54	},
55	questionButtons: {
56	display: "flex",
57	alignItems: "center",
58	gap: "4px",
59	},
60	error: {
61	color: theme.palette.text.error2,
62	},
63	buttons: {
64	display: "flex",
65	gap: "12px",
66	justifyContent: "flex-end",
67	marginTop: 24,
68	},
69	submit: {
70	width: 100,
71	},
72	});
73
74	const formatOptions: Record<string, SettingsOption> = Object.fromEntries(	1✔
75	Object
76	.keys(surveyQuestionFormats)
77	.map((format: SurveyQuestionFormat) =>
78	[format, {label: surveyQuestionFormats[format]}],	3✔
79	),
80	);
81
82	const updateSurveyMutation = gql`	1✔
83	mutation editSurvey($surveyId: String!, $name: String!, $questions: [SurveyQuestionInfo!]!) {
84	editSurvey(surveyId: $surveyId, name: $name, questions: $questions) {
85	...SurveyMinimumInfo
86	}
87	}
88	${getFragment("SurveyMinimumInfo")}
89	`;
90
91	export type SurveyQuestionInfo = {
92	_id?: string,
93	question: string,
94	format: SurveyQuestionFormat,
95	}
96
97	const SurveyForm = ({survey, refetch, classes}: {	1✔
98	survey: SurveyMinimumInfo,
99	refetch?: () => Promise<void>,
100	classes: ClassesType<typeof styles>,
101	}) => {
NEW 102	const [error, setError] = useState("");	×
NEW 103	const [saving, setSaving] = useState(false);	×
NEW 104	const [name, setName] = useState(survey.name);	×
NEW 105	const [questions, setQuestions] = useState<SurveyQuestionInfo[]>(	×
NEW 106	survey.questions.map(({_id, question, format}) => ({_id, question, format})),	×
107	);
108
NEW 109	const onMoveUp = useCallback((index: number) => {	×
NEW 110	setQuestions((questions) => [	×
111	...questions.slice(0, index - 1),
112	questions[index],
113	questions[index - 1],
114	...questions.slice(index + 1),
115	]);
116	}, []);
117
NEW 118	const onMoveDown = useCallback((index: number) => {	×
NEW 119	setQuestions((questions) => [	×
120	...questions.slice(0, index),
121	questions[index + 1],
122	questions[index],
123	...questions.slice(index + 2),
124	]);
125	}, []);
126
NEW 127	const setQuestion = useCallback((index: number, question: string) => {	×
NEW 128	setQuestions((questions) => [	×
129	...questions.slice(0, index),
130	{...questions[index], question},
131	...questions.slice(index + 1),
132	]);
133	}, []);
134
NEW 135	const setFormat = useCallback((index: number, format: SurveyQuestionFormat) => {	×
NEW 136	setQuestions((questions) => [	×
137	...questions.slice(0, index),
138	{...questions[index], format},
139	...questions.slice(index + 1),
140	]);
141	}, []);
142
NEW 143	const onDeleteQuestion = useCallback((index: number) => {	×
NEW 144	setQuestions((questions) =>	×
NEW 145	questions.slice(0, index).concat(questions.slice(index + 1)),	×
146	);
147	}, []);
148
NEW 149	const onAddQuestion = useCallback(() => {	×
NEW 150	setQuestions((questions) => [...questions, {	×
151	question: "New question?",
152	format: "rank0To10",
153	}]);
154	}, []);
155
NEW 156	const [updateSurvey] = useMutation(updateSurveyMutation);	×
157
NEW 158	const onSubmit = useCallback(async () => {	×
NEW 159	setError("");	×
NEW 160	setSaving(true);	×
NEW 161	try {	×
NEW 162	await updateSurvey({	×
163	variables: {
164	surveyId: survey._id,
165	name,
166	questions,
167	},
168	});
NEW 169	await refetch?.();	×
170	} catch (e) {
NEW 171	setError(e.message);	×
172	}
NEW 173	setSaving(false);	×
174	}, [updateSurvey, refetch, survey._id, name, questions]);
175
176	const {
177	EAOnboardingInput, EAButton, ForumIcon, LWTooltip, ForumDropdown,
178	SectionTitle, Loading,
NEW 179	} = Components;	×
NEW 180	return (	×
181	<div className={classes.form}>
182	<EAOnboardingInput
183	value={name}
184	setValue={setName}
185	placeholder="Survey name"
186	disabled={saving}
187	className={classes.surveyName}
188	/>
189	{questions.map(({question, format}, i) => (
NEW 190	<div key={i} className={classes.question}>	×
191	<div className={classes.questionInfo}>
192	<EAOnboardingInput
193	value={question}
194	setValue={setQuestion.bind(null, i)}
195	placeholder="Question"
196	disabled={saving}
197	/>
198	<div className={classes.questionFormat}>
199	<SectionTitle title="Response type:" noTopMargin />
200	<ForumDropdown
201	value={format}
202	options={formatOptions}
203	onSelect={setFormat.bind(null, i)}
204	disabled={saving}
205	/>
206	</div>
207	</div>
208	<div className={classes.questionButtons}>
209	<LWTooltip title="Move up" placement="bottom">
210	<EAButton
211	variant="outlined"
212	onClick={onMoveUp.bind(null, i)}
213	disabled={i === 0 \|\| saving}	×
214	>
215	<ForumIcon icon="NarrowArrowUp" />
216	</EAButton>
217	</LWTooltip>
218	<LWTooltip title="Move down" placement="bottom">
219	<EAButton
220	variant="outlined"
221	onClick={onMoveDown.bind(null, i)}
222	disabled={i === questions.length - 1 \|\| saving}	×
223	>
224	<ForumIcon icon="NarrowArrowDown" />
225	</EAButton>
226	</LWTooltip>
227	<LWTooltip title="Delete" placement="bottom">
228	<EAButton
229	variant="outlined"
230	onClick={onDeleteQuestion.bind(null, i)}
231	disabled={saving}
232	>
233	<ForumIcon icon="Close" />
234	</EAButton>
235	</LWTooltip>
236	</div>
237	</div>
238	))}
239	{error &&	×
240	<div className={classes.error}>Error: {error}</div>
241	}
242	<div className={classes.buttons}>
243	<EAButton onClick={onAddQuestion} variant="outlined" disabled={saving}>
244	<ForumIcon icon="Plus" /> Add question
245	</EAButton>
246	<EAButton onClick={onSubmit} disabled={saving} className={classes.submit}>
247	{saving ? <Loading /> : "Save"}	×
248	</EAButton>
249	</div>
250	</div>
251	);
252	}
253
254	const SurveyEditor = ({classes}: {	1✔
255	classes: ClassesType<typeof styles>,
256	}) => {
NEW 257	const {params: {id}} = useLocation();	×
NEW 258	const {document: survey, loading, refetch} = useSingle({	×
259	collectionName: "Surveys",
260	fragmentName: "SurveyMinimumInfo",
261	documentId: id,
262	});
263
NEW 264	const {SingleColumnSection, SectionTitle, Loading} = Components;	×
NEW 265	return (	×
266	<SingleColumnSection className={classes.root}>
267	<Link to="/admin/surveys" className={classes.surveyAdmin}>
268	<- Back to survey admin
269	</Link>
270	<SectionTitle title="Edit survey" />
271	{loading && <Loading />}	×
272	{!loading && !survey &&	×
273	<div className={classes.secondaryText}>Survey not found</div>
274	}
275	{survey &&	×
276	<SurveyForm survey={survey} refetch={refetch} classes={classes} />
277	}
278	</SingleColumnSection>
279	);
280	}
281
282	const SurveyEditPage = ({classes}: {	1✔
283	classes: ClassesType<typeof styles>,
284	}) => {
NEW 285	const currentUser = useCurrentUser();	×
NEW 286	return currentUser?.isAdmin	×
287	? <SurveyEditor classes={classes} />	×
288	: <Components.Error404 />;
289	}
290
291	const SurveyEditPageComponent = registerComponent(	1✔
292	"SurveyEditPage",
293	SurveyEditPage,
294	{styles},
295	);
296
297	declare global {
298	interface ComponentTypes {
299	SurveyEditPage: typeof SurveyEditPageComponent
300	}
301	}

ForumMagnum / ForumMagnum / 9429563607

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