11602020413

Committed 30 Oct 2024 09:34PM UTC coverage: 31.313% (-0.02%) from 31.329%

Build # 11602020413

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9932 from ForumMagnum/master

Deploy LessWrong master

Run Details

5031 of 42413 branches covered (11.86%)

Branch coverage included in aggregate %.

13 of 76 new or added lines in 7 files covered. (17.11%)

2 existing lines in 2 files now uncovered.

29653 of 68351 relevant lines covered (43.38%)

173.71 hits per line

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

24.14

/packages/lesswrong/components/jargon/JargonEditorRow.tsx

import React, { useState } from 'react';
import { Components, getFragment, registerComponent } from '../../lib/vulcan-lib';
import { commentBodyStyles } from '@/themes/stylePiping';
import classNames from 'classnames';
import { useUpdate } from '@/lib/crud/withUpdate';
import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';

export const formStyles = {
  '& .form-section-default > div': {
    display: "flex",
    flexWrap: "wrap",
  },
  '& .ContentStyles-commentBody': {
    fontSize: '1.1rem',
  },
  '& .form-component-EditorFormComponent': {
    marginBottom: 0,
    marginTop: 0,
    width: '100%',
  },
  '& .form-component-default, & .MuiTextField-textField': {
    marginBottom: 0,
    marginTop: 0,
    width: 150,
    marginRight: 20
  },
}

const styles = (theme: ThemeType) => ({
  root: {
    width: '100%',
    ...commentBodyStyles(theme, true),
    marginTop: 0,
    padding: '0 6px',
    display: 'flex',
    alignItems: 'center',
    '&:hover $bottomButton': {
      opacity: .5
    }
  },
  unapproved: {
    opacity: .5,
    '&:hover': {
      opacity: 1
    }
  },
  editButton: {
    cursor: 'pointer',
    fontSize: '1rem',
  },
  leftButtons: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginLeft: 6
  },
  leftButton: {
    opacity: 0,
    transition: 'opacity 0.1s',
    '&:hover': {
      opacity: .7
    },
    minHeight: "auto !important",
    minWidth: "auto !important",
    cursor: 'pointer',
    height: 26,
    padding: 4,
    paddingLeft: 4,
    width: 26,
  },
  hideIcon: {
    cursor: 'pointer',
    color: theme.palette.grey[500],
    height: 16,
    width: 16,
    marginRight: 8,
    opacity: 0,
    '&:hover': {
      opacity: 1
    }
  },
  arrowRightButton: {
    marginLeft: 8,
    cursor: 'pointer',
    color: theme.palette.grey[500],
    height: 18,
    width: 18,
    opacity: 0,
    '&:hover': {
      opacity: 1
    }
  },
  deleted: {
    opacity: .4,
  },
  bottomButtons: {
    marginTop: 8,
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  bottomButton: {
    cursor: 'pointer',
    padding: '6px 12px',
    borderRadius: 4,
    fontSize: '1rem',
    opacity: .1,
    '&:hover': {
      backgroundColor: theme.palette.grey[100],
      opacity: 1
    }
  },
  formStyles: { 
    ...formStyles,
    marginBottom: 12,
    marginTop: 12,
    width: '100%',
  },
  explanationContainer: {
    cursor: 'text',
    paddingBottom: 4
  },
  checkbox: {
    width: 24,
    height: 24,
    paddingRight: 24,
    paddingLeft: 14,
    '& svg': {
      width: 16,
      height: 16,
    }
  },
  instancesOfJargonCount: {
    width: 30,
    textAlign: 'center', 
    whiteSpace: 'nowrap',
    color: theme.palette.grey[600],
  },
  definition: {
    lineHeight: 1.6,
    height: '1.6rem',
    overflow: 'hidden',
    minWidth: 100,
    paddingRight: 8,
    color: theme.palette.grey[500],
    '& strong, & b': {
      color: theme.palette.grey[900],
      marginRight: 8
    }
  }
});

const submitStyles = (theme: ThemeType) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    marginTop: 4,
    marginBottom: -6,
    justifyContent: 'end',
    height: 36,
  },
  submitButton: {
    color: theme.palette.secondary.main
  },
  cancelButton: {},
});

// Jargon submit button

const JargonSubmitButton = ({ submitForm, cancelCallback, classes }: FormButtonProps & { classes: ClassesType<typeof submitStyles> }) => {
  const { Loading } = Components;

  const [loading, setLoading] = useState(false);

  const wrappedSubmitForm = async (e: React.MouseEvent<HTMLButtonElement>) => {
    setLoading(true);
    await submitForm(e);
    setLoading(false);
  }

  return <div className={classes.root}>
    {!loading && <Button onClick={cancelCallback} className={classes.cancelButton}>Cancel</Button>}
    {!loading && <Button onClick={wrappedSubmitForm} className={classes.submitButton}>Submit</Button>}
    {loading && <Loading />}
  </div>
};


// Jargon editor row

export const JargonEditorRow = ({classes, jargonTerm, instancesOfJargonCount, setShowMoreTerms}: {
  classes: ClassesType<typeof styles>,
  jargonTerm: JargonTerms,
  instancesOfJargonCount?: number,
  setShowMoreTerms: (expanded: boolean) => void,
}) => {

  const [edit, setEdit] = useState(false);

  const {mutate: updateJargonTerm} = useUpdate({
    collectionName: "JargonTerms",
    fragmentName: 'JargonTerms',
  });

  const handleActiveChange = () => {
    const newDeleteStatus = !jargonTerm.approved ? false : jargonTerm.deleted;

    void updateJargonTerm({
      selector: { _id: jargonTerm._id },
      data: {
        approved: !jargonTerm.approved,
        deleted: newDeleteStatus,
      },
      optimisticResponse: {
        ...jargonTerm,
        approved: !jargonTerm.approved,
        deleted: newDeleteStatus,
      }
    })
  }

  const handleDelete = () => {
    void updateJargonTerm({
      selector: { _id: jargonTerm._id },
      data: {
        deleted: true
      },
      optimisticResponse: {
        ...jargonTerm,
        deleted: true,
      }
    })
  }
  const { JargonTooltip, WrappedSmartForm, ContentItemBody, LWTooltip } = Components;

  const jargonDefinition = jargonTerm?.contents?.html ?? '';

  return <div className={classes.root}>
      <div onClick={handleActiveChange}>
        <Checkbox checked={jargonTerm.approved} className={classes.checkbox} />
      </div>
      {edit ? <div className={classes.formStyles}>
          <WrappedSmartForm
            collectionName="JargonTerms"
            documentId={jargonTerm._id}
            mutationFragment={getFragment('JargonTerms')}
            queryFragment={getFragment('JargonTerms')}
            successCallback={() => setEdit(false)}
            cancelCallback={() => setEdit(false)}
            formComponents={{ FormSubmit: Components.JargonSubmitButton }}
            prefetchedDocument={jargonTerm}
          />
        </div>
      :  <JargonTooltip
          definitionHTML={jargonDefinition}
          altTerms={jargonTerm.altTerms ?? []}
          humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
          placement="bottom-end"
          approved={jargonTerm.approved}
          forceTooltip={true}
        >
          <div className={classNames(classes.explanationContainer, !jargonTerm.approved && classes.unapproved)} onClick={() => {
            setShowMoreTerms(true);
            setEdit(true);
          }}>
            <ContentItemBody className={classes.definition} dangerouslySetInnerHTML={{ __html: jargonDefinition }} />
          </div>
        </JargonTooltip>}
      <LWTooltip title={<div>{jargonTerm.term} is used {instancesOfJargonCount} times in this post</div>} placement="right">
        <div className={classNames(classes.instancesOfJargonCount, !jargonTerm.approved && classes.unapproved)}>
          {instancesOfJargonCount}
        </div>
      </LWTooltip>
      <LWTooltip title={<div><div>Remove from list</div><div><em>(You can unhide it later)</em></div></div>} placement="right">
        <span onClick={() => handleDelete()} className={classes.bottomButton}>
          x
        </span>
      </LWTooltip>  
  </div>
}

const JargonSubmitButtonComponent = registerComponent('JargonSubmitButton', JargonSubmitButton, {styles: submitStyles});
const JargonEditorRowComponent = registerComponent('JargonEditorRow', JargonEditorRow, {styles});

declare global {
  interface ComponentTypes {
    JargonSubmitButton: typeof JargonSubmitButtonComponent,
    JargonEditorRow: typeof JargonEditorRowComponent
  }
}

1	import React, { useState } from 'react';	55✔
2	import { Components, getFragment, registerComponent } from '../../lib/vulcan-lib';	18✔
3	import { commentBodyStyles } from '@/themes/stylePiping';	18✔
4	import classNames from 'classnames';	18✔
5	import { useUpdate } from '@/lib/crud/withUpdate';	18✔
6	import Button from '@material-ui/core/Button';	18✔
7	import Checkbox from '@material-ui/core/Checkbox';	18✔
8
9	export const formStyles = {	18✔
10	'& .form-section-default > div': {
11	display: "flex",
12	flexWrap: "wrap",
13	},
14	'& .ContentStyles-commentBody': {
15	fontSize: '1.1rem',
16	},
17	'& .form-component-EditorFormComponent': {
18	marginBottom: 0,
19	marginTop: 0,
20	width: '100%',
21	},
22	'& .form-component-default, & .MuiTextField-textField': {
23	marginBottom: 0,
24	marginTop: 0,
25	width: 150,
26	marginRight: 20
27	},
28	}
29
30	const styles = (theme: ThemeType) => ({	18✔
31	root: {
32	width: '100%',
33	...commentBodyStyles(theme, true),
34	marginTop: 0,
35	padding: '0 6px',
36	display: 'flex',
37	alignItems: 'center',
38	'&:hover $bottomButton': {
39	opacity: .5
40	}
41	},
42	unapproved: {
43	opacity: .5,
44	'&:hover': {
45	opacity: 1
46	}
47	},
48	editButton: {
49	cursor: 'pointer',
50	fontSize: '1rem',
51	},
52	leftButtons: {
53	display: 'flex',
54	flexDirection: 'column',
55	alignItems: 'center',
56	justifyContent: 'flex-start',
57	marginLeft: 6
58	},
59	leftButton: {
60	opacity: 0,
61	transition: 'opacity 0.1s',
62	'&:hover': {
63	opacity: .7
64	},
65	minHeight: "auto !important",
66	minWidth: "auto !important",
67	cursor: 'pointer',
68	height: 26,
69	padding: 4,
70	paddingLeft: 4,
71	width: 26,
72	},
73	hideIcon: {
74	cursor: 'pointer',
75	color: theme.palette.grey[500],
76	height: 16,
77	width: 16,
78	marginRight: 8,
79	opacity: 0,
80	'&:hover': {
81	opacity: 1
82	}
83	},
84	arrowRightButton: {
85	marginLeft: 8,
86	cursor: 'pointer',
87	color: theme.palette.grey[500],
88	height: 18,
89	width: 18,
90	opacity: 0,
91	'&:hover': {
92	opacity: 1
93	}
94	},
95	deleted: {
96	opacity: .4,
97	},
98	bottomButtons: {
99	marginTop: 8,
100	display: 'flex',
101	justifyContent: 'space-around',
102	alignItems: 'center',
103	},
104	bottomButton: {
105	cursor: 'pointer',
106	padding: '6px 12px',
107	borderRadius: 4,
108	fontSize: '1rem',
109	opacity: .1,
110	'&:hover': {
111	backgroundColor: theme.palette.grey[100],
112	opacity: 1
113	}
114	},
115	formStyles: {
116	...formStyles,
117	marginBottom: 12,
118	marginTop: 12,
119	width: '100%',
120	},
121	explanationContainer: {
122	cursor: 'text',
123	paddingBottom: 4
124	},
125	checkbox: {
126	width: 24,
127	height: 24,
128	paddingRight: 24,
129	paddingLeft: 14,
130	'& svg': {
131	width: 16,
132	height: 16,
133	}
134	},
135	instancesOfJargonCount: {
136	width: 30,
137	textAlign: 'center',
138	whiteSpace: 'nowrap',
139	color: theme.palette.grey[600],
140	},
141	definition: {
142	lineHeight: 1.6,
143	height: '1.6rem',
144	overflow: 'hidden',
145	minWidth: 100,
146	paddingRight: 8,
147	color: theme.palette.grey[500],
148	'& strong, & b': {
149	color: theme.palette.grey[900],
150	marginRight: 8
151	}
152	}
153	});
154
155	const submitStyles = (theme: ThemeType) => ({	18✔
156	root: {
157	display: 'flex',
158	flexWrap: 'wrap',
159	marginTop: 4,
160	marginBottom: -6,
161	justifyContent: 'end',
162	height: 36,
163	},
164	submitButton: {
165	color: theme.palette.secondary.main
166	},
167	cancelButton: {},
168	});
169
170	// Jargon submit button
171
172	const JargonSubmitButton = ({ submitForm, cancelCallback, classes }: FormButtonProps & { classes: ClassesType<typeof submitStyles> }) => {	18✔
173	const { Loading } = Components;	×
174
175	const [loading, setLoading] = useState(false);	×
176
177	const wrappedSubmitForm = async (e: React.MouseEvent<HTMLButtonElement>) => {	×
178	setLoading(true);	×
179	await submitForm(e);	×
180	setLoading(false);	×
181	}
182
183	return <div className={classes.root}>	×
184	{!loading && <Button onClick={cancelCallback} className={classes.cancelButton}>Cancel</Button>}	×
185	{!loading && <Button onClick={wrappedSubmitForm} className={classes.submitButton}>Submit</Button>}	×
186	{loading && <Loading />}	×
187	</div>
188	};
189
190
191	// Jargon editor row
192
193	export const JargonEditorRow = ({classes, jargonTerm, instancesOfJargonCount, setShowMoreTerms}: {	18✔
194	classes: ClassesType<typeof styles>,
195	jargonTerm: JargonTerms,
196	instancesOfJargonCount?: number,
197	setShowMoreTerms: (expanded: boolean) => void,
198	}) => {
199
200	const [edit, setEdit] = useState(false);	×
201
202	const {mutate: updateJargonTerm} = useUpdate({	×
203	collectionName: "JargonTerms",
204	fragmentName: 'JargonTerms',
205	});
206
207	const handleActiveChange = () => {	×
208	const newDeleteStatus = !jargonTerm.approved ? false : jargonTerm.deleted;	×
209
210	void updateJargonTerm({	×
211	selector: { _id: jargonTerm._id },
212	data: {
213	approved: !jargonTerm.approved,
214	deleted: newDeleteStatus,
215	},
216	optimisticResponse: {
217	...jargonTerm,
218	approved: !jargonTerm.approved,
219	deleted: newDeleteStatus,
220	}
221	})
222	}
223
224	const handleDelete = () => {	×
225	void updateJargonTerm({	×
226	selector: { _id: jargonTerm._id },
227	data: {
228	deleted: true
229	},
230	optimisticResponse: {
231	...jargonTerm,
232	deleted: true,
233	}
234	})
235	}
236	const { JargonTooltip, WrappedSmartForm, ContentItemBody, LWTooltip } = Components;	×
237
238	const jargonDefinition = jargonTerm?.contents?.html ?? '';	×
239
240	return <div className={classes.root}>	×
241	<div onClick={handleActiveChange}>
242	<Checkbox checked={jargonTerm.approved} className={classes.checkbox} />
243	</div>
244	{edit ? <div className={classes.formStyles}>	×
245	<WrappedSmartForm
246	collectionName="JargonTerms"
247	documentId={jargonTerm._id}
248	mutationFragment={getFragment('JargonTerms')}
249	queryFragment={getFragment('JargonTerms')}
250	successCallback={() => setEdit(false)}	×
251	cancelCallback={() => setEdit(false)}	×
252	formComponents={{ FormSubmit: Components.JargonSubmitButton }}
253	prefetchedDocument={jargonTerm}
254	/>
255	</div>
256	: <JargonTooltip
257	definitionHTML={jargonDefinition}
258	altTerms={jargonTerm.altTerms ?? []}	×
259	humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
260	placement="bottom-end"
261	approved={jargonTerm.approved}
262	forceTooltip={true}
263	>
264	<div className={classNames(classes.explanationContainer, !jargonTerm.approved && classes.unapproved)} onClick={() => {	×
NEW 265	setShowMoreTerms(true);	×
NEW 266	setEdit(true);	×
267	}}>
268	<ContentItemBody className={classes.definition} dangerouslySetInnerHTML={{ __html: jargonDefinition }} />
269	</div>
270	</JargonTooltip>}
271	<LWTooltip title={<div>{jargonTerm.term} is used {instancesOfJargonCount} times in this post</div>} placement="right">
272	<div className={classNames(classes.instancesOfJargonCount, !jargonTerm.approved && classes.unapproved)}>	×
273	{instancesOfJargonCount}
274	</div>
275	</LWTooltip>
276	<LWTooltip title={<div><div>Remove from list</div><div><em>(You can unhide it later)</em></div></div>} placement="right">
277	<span onClick={() => handleDelete()} className={classes.bottomButton}>	×
278	x
279	</span>
280	</LWTooltip>
281	</div>
282	}
283
284	const JargonSubmitButtonComponent = registerComponent('JargonSubmitButton', JargonSubmitButton, {styles: submitStyles});	18✔
285	const JargonEditorRowComponent = registerComponent('JargonEditorRow', JargonEditorRow, {styles});	18✔
286
287	declare global {
288	interface ComponentTypes {
289	JargonSubmitButton: typeof JargonSubmitButtonComponent,
290	JargonEditorRow: typeof JargonEditorRowComponent
291	}
292	}

ForumMagnum / ForumMagnum / 11602020413

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