9712591988

Committed 28 Jun 2024 12:14PM UTC coverage: 31.988% (-0.03%) from 32.014%

Build # 9712591988

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9456 from ForumMagnum/master

[EA] deploy edit user profile page redesign, some LW stuff

Run Details

4889 of 39802 branches covered (12.28%)

Branch coverage included in aggregate %.

78 of 246 new or added lines in 33 files covered. (31.71%)

9 existing lines in 7 files now uncovered.

28408 of 64291 relevant lines covered (44.19%)

180.88 hits per line

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

24.56

/packages/lesswrong/components/form-components/FormComponentMultiSelect.tsx

import React, { useCallback } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import FormLabel from '@material-ui/core/FormLabel';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import Checkbox from '@material-ui/core/Checkbox';
import ListItemText from '@material-ui/core/ListItemText';
import classNames from 'classnames';

const styles = (theme: ThemeType) => ({
  greyDropdownRoot: {
    width: "100%",
    minHeight: 45,
    borderRadius: theme.borderRadius.default,
    background: theme.palette.panelBackground.loginInput,
    border: "none",
    display: "flex",
    "&:hover": {
      background: theme.palette.panelBackground.loginInputHovered,
    },
    "& *:first-child": {
      flexGrow: 1,
    },
  },
  greyDropdownTitle: {
    minHeight: 24,
    height: "unset",
  },
  greyDropdownMenu: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
    padding: 8,
    maxHeight: 400,
    overflow: "auto",
  },
  sectionTitle: {
    fontSize: 12,
  },
  formLabel: {
    fontSize: 10,
    marginBottom: 8
  },
  select: {
    '& .MuiOutlinedInput-input': {
      whiteSpace: 'pre-wrap',
      lineHeight: '1.8rem',
      paddingRight: 30,
    },
  },
  placeholder: {
    color: theme.palette.grey[600]
  },
  placeholderGrey: {
    fontStyle: "normal",
  },
});

type MultiselectOption = {
  value: string,
  label: string
}

/**
 * MultiSelect: A pick-multiple checkbox list. This is split from FormComponentMultiSelect
 * so that it can be used outside of vulcan-forms.
 */
const MultiSelect = ({
  value,
  setValue,
  label,
  placeholder,
  separator,
  options,
  variant = "default",
  classes,
}: {
  value: string[],
  setValue: (newValue: any) => void,
  label?: string,
  placeholder?: string,
  separator?: string,
  options: Array<MultiselectOption>,
  variant?: "default" | "grey",
  classes: ClassesType<typeof styles>,
}) => {
  const isGrey = variant === "grey";

  const renderValue = useCallback((selected: string[]) => {
    if (selected.length === 0) {
      return (
        <em className={classNames(
          classes.placeholder,
          isGrey && classes.placeholderGrey,
        )}>
          {placeholder}
        </em>
      );
    }

    // If any options are selected, display them separated by commas
    return selected
      .map((s) => options.find(option => option.value === s)?.label)
      .join(separator || ", ");
  }, [classes, isGrey, options, separator, placeholder]);

  const toggleValue = useCallback((newValue: string) => {
    const valueSet = new Set(value);
    if (valueSet.has(newValue)) {
      valueSet.delete(newValue);
    } else {
      valueSet.add(newValue);
    }
    setValue(Array.from(valueSet));
  }, [value, setValue]);

  if (isGrey) {
    const {
      SectionTitle, PeopleDirectoryFilterDropdown, PeopleDirectorySelectOption,
    } = Components;
    return (
      <div>
        {label && <SectionTitle title={label} className={classes.sectionTitle} />}
        <PeopleDirectoryFilterDropdown
          title={<span>{renderValue(value)}</span>}
          rootClassName={classes.greyDropdownRoot}
          titleClassName={classes.greyDropdownTitle}
          className={classes.greyDropdownMenu}
        >
          {options.map((option) => (
            <PeopleDirectorySelectOption
              key={option.value}
              state={{
                ...option,
                selected: value.some((v) => v === option.value),
                onToggle: toggleValue.bind(null, option.value),
              }}
            />
          ))}
        </PeopleDirectoryFilterDropdown>
      </div>
    );
  }

  const {MenuItem} = Components;
  return <FormControl>
    {label && <FormLabel className={classes.formLabel}>{label}</FormLabel>}
    <Select
      className={classes.select}
      value={value}
      input={<OutlinedInput labelWidth={0} />}
      onChange={e => {
        // MUI documentation says e.target.value is always an array: https://mui.com/components/selects/#multiple-select
        setValue(e.target.value)
      }}
      multiple
      displayEmpty
      renderValue={renderValue}
      {...!options.length ? {disabled: true} : {}}
    >
        {options.map(option => {
          return <MenuItem key={option.value} value={option.value}>
            <Checkbox checked={value.some(v => v === option.value)} />
            <ListItemText primary={option.label} />
          </MenuItem>
        })}
    </Select>
  </FormControl>
}


/**
 * FormComponentMultiSelect: Wrapper around MultiSelect for use with
 * vulcan-forms.
 */
const FormComponentMultiSelect = ({
  value,
  label,
  placeholder,
  separator,
  options,
  variant,
  path,
  updateCurrentValues,
}: FormComponentProps<string[]> & {
  separator?: string,
  options: Array<MultiselectOption>,
  variant?: "default" | "grey",
  classes: ClassesType
}) => {
  return <Components.MultiSelect
    label={label}
    placeholder={placeholder}
    separator={separator}
    options={options}
    variant={variant}
    value={value}
    setValue={(value) => {
      void updateCurrentValues({
        [path]: value
      });
    }}
  />
}

const MultiSelectComponent = registerComponent("MultiSelect", MultiSelect, {styles});
const FormComponentMultiSelectComponent = registerComponent("FormComponentMultiSelect", FormComponentMultiSelect);

declare global {
  interface ComponentTypes {
    MultiSelect: typeof MultiSelectComponent
    FormComponentMultiSelect: typeof FormComponentMultiSelectComponent
  }
}

1	import React, { useCallback } from 'react';	1✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import FormControl from '@material-ui/core/FormControl';	1✔
4	import Select from '@material-ui/core/Select';	1✔
5	import FormLabel from '@material-ui/core/FormLabel';	1✔
6	import OutlinedInput from '@material-ui/core/OutlinedInput';	1✔
7	import Checkbox from '@material-ui/core/Checkbox';	1✔
8	import ListItemText from '@material-ui/core/ListItemText';	1✔
9	import classNames from 'classnames';	1✔
10
11	const styles = (theme: ThemeType) => ({	1✔
12	greyDropdownRoot: {
13	width: "100%",
14	minHeight: 45,
15	borderRadius: theme.borderRadius.default,
16	background: theme.palette.panelBackground.loginInput,
17	border: "none",
18	display: "flex",
19	"&:hover": {
20	background: theme.palette.panelBackground.loginInputHovered,
21	},
22	"& *:first-child": {
23	flexGrow: 1,
24	},
25	},
26	greyDropdownTitle: {
27	minHeight: 24,
28	height: "unset",
29	},
30	greyDropdownMenu: {
31	display: "flex",
32	flexDirection: "column",
33	gap: "8px",
34	padding: 8,
35	maxHeight: 400,
36	overflow: "auto",
37	},
38	sectionTitle: {
39	fontSize: 12,
40	},
41	formLabel: {
42	fontSize: 10,
43	marginBottom: 8
44	},
45	select: {
46	'& .MuiOutlinedInput-input': {
47	whiteSpace: 'pre-wrap',
48	lineHeight: '1.8rem',
49	paddingRight: 30,
50	},
51	},
52	placeholder: {
53	color: theme.palette.grey[600]
54	},
55	placeholderGrey: {
56	fontStyle: "normal",
57	},
58	});
59
60	type MultiselectOption = {
61	value: string,
62	label: string
63	}
64
65	/**
66	* MultiSelect: A pick-multiple checkbox list. This is split from FormComponentMultiSelect
67	* so that it can be used outside of vulcan-forms.
68	*/
69	const MultiSelect = ({	1✔
70	value,
71	setValue,
72	label,
73	placeholder,
74	separator,
75	options,
76	variant = "default",	×
77	classes,
78	}: {
79	value: string[],
80	setValue: (newValue: any) => void,
81	label?: string,
82	placeholder?: string,
83	separator?: string,
84	options: Array<MultiselectOption>,
85	variant?: "default" \| "grey",
86	classes: ClassesType<typeof styles>,
87	}) => {
NEW 88	const isGrey = variant === "grey";	×
89
NEW 90	const renderValue = useCallback((selected: string[]) => {	×
NEW 91	if (selected.length === 0) {	×
NEW 92	return (	×
93	<em className={classNames(
94	classes.placeholder,
95	isGrey && classes.placeholderGrey,	×
96	)}>
97	{placeholder}
98	</em>
99	);
100	}
101
102	// If any options are selected, display them separated by commas
NEW 103	return selected	×
NEW 104	.map((s) => options.find(option => option.value === s)?.label)	×
105	.join(separator \|\| ", ");	×
106	}, [classes, isGrey, options, separator, placeholder]);
107
NEW 108	const toggleValue = useCallback((newValue: string) => {	×
NEW 109	const valueSet = new Set(value);	×
NEW 110	if (valueSet.has(newValue)) {	×
NEW 111	valueSet.delete(newValue);	×
112	} else {
NEW 113	valueSet.add(newValue);	×
114	}
NEW 115	setValue(Array.from(valueSet));	×
116	}, [value, setValue]);
117
NEW 118	if (isGrey) {	×
119	const {
120	SectionTitle, PeopleDirectoryFilterDropdown, PeopleDirectorySelectOption,
NEW 121	} = Components;	×
NEW 122	return (	×
123	<div>
124	{label && <SectionTitle title={label} className={classes.sectionTitle} />}	×
125	<PeopleDirectoryFilterDropdown
126	title={<span>{renderValue(value)}</span>}
127	rootClassName={classes.greyDropdownRoot}
128	titleClassName={classes.greyDropdownTitle}
129	className={classes.greyDropdownMenu}
130	>
131	{options.map((option) => (
NEW 132	<PeopleDirectorySelectOption	×
133	key={option.value}
134	state={{
135	...option,
NEW 136	selected: value.some((v) => v === option.value),	×
137	onToggle: toggleValue.bind(null, option.value),
138	}}
139	/>
140	))}
141	</PeopleDirectoryFilterDropdown>
142	</div>
143	);
144	}
145
NEW 146	const {MenuItem} = Components;	×
NEW 147	return <FormControl>	×
148	{label && <FormLabel className={classes.formLabel}>{label}</FormLabel>}	×
149	<Select
150	className={classes.select}
151	value={value}
152	input={<OutlinedInput labelWidth={0} />}
153	onChange={e => {
154	// MUI documentation says e.target.value is always an array: https://mui.com/components/selects/#multiple-select
UNCOV 155	setValue(e.target.value)	×
156	}}
157	multiple
158	displayEmpty
159	renderValue={renderValue}
160	{...!options.length ? {disabled: true} : {}}	×
161	>
162	{options.map(option => {
163	return <MenuItem key={option.value} value={option.value}>	×
164	<Checkbox checked={value.some(v => v === option.value)} />	×
165	<ListItemText primary={option.label} />
166	</MenuItem>
167	})}
168	</Select>
169	</FormControl>
170	}
171
172
173	/**
174	* FormComponentMultiSelect: Wrapper around MultiSelect for use with
175	* vulcan-forms.
176	*/
177	const FormComponentMultiSelect = ({	1✔
178	value,
179	label,
180	placeholder,
181	separator,
182	options,
183	variant,
184	path,
185	updateCurrentValues,
186	}: FormComponentProps<string[]> & {
187	separator?: string,
188	options: Array<MultiselectOption>,
189	variant?: "default" \| "grey",
190	classes: ClassesType
191	}) => {
192	return <Components.MultiSelect	×
193	label={label}
194	placeholder={placeholder}
195	separator={separator}
196	options={options}
197	variant={variant}
198	value={value}
199	setValue={(value) => {
200	void updateCurrentValues({	×
201	[path]: value
202	});
203	}}
204	/>
205	}
206
207	const MultiSelectComponent = registerComponent("MultiSelect", MultiSelect, {styles});	1✔
208	const FormComponentMultiSelectComponent = registerComponent("FormComponentMultiSelect", FormComponentMultiSelect);	1✔
209
210	declare global {
211	interface ComponentTypes {
212	MultiSelect: typeof MultiSelectComponent
213	FormComponentMultiSelect: typeof FormComponentMultiSelectComponent
214	}
215	}

ForumMagnum / ForumMagnum / 9712591988

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