11632765860

Committed 01 Nov 2024 04:31PM UTC coverage: 31.36% (+0.09%) from 31.27%

Build # 11632765860

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9942 from ForumMagnum/fix-quick-takes-entry-bugs

Fix various quick takes bugs introduced in #9903

Run Details

3506 of 30277 branches covered (11.58%)

Branch coverage included in aggregate %.

1 of 9 new or added lines in 1 file covered. (11.11%)

1 existing line in 1 file now uncovered.

21179 of 48438 relevant lines covered (43.72%)

245.03 hits per line

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

18.99

/packages/lesswrong/components/quickTakes/QuickTakesEntry.tsx

import React, { MouseEvent, useState, useCallback, useRef, useEffect } from "react";
import { registerComponent, Components } from "../../lib/vulcan-lib";
import { useQuickTakesTags } from "./useQuickTakesTags";
import {
  COMMENTS_NEW_FORM_PADDING,
  CommentCancelCallback,
  CommentSuccessCallback,
} from "../comments/CommentsNewForm";
import classNames from "classnames";
import { isFriendlyUI } from "../../themes/forumTheme";
import { useDialog } from "../common/withDialog";
import { useLoginPopoverContext } from "../hooks/useLoginPopoverContext";

const COLLAPSED_HEIGHT = 40;

const styles = (theme: ThemeType) => ({
  root: {
    background: theme.palette.panelBackground.default,
    borderRadius: theme.borderRadius.quickTakesEntry,
    fontFamily: theme.palette.fonts.sansSerifStack,
    border: `1px solid ${theme.palette.grey[200]}`,
  },
  commentEditor: {
    "& .ck-placeholder": {
      marginTop: isFriendlyUI ? "-3px !important" : undefined,
      "&::before": {
        color: isFriendlyUI ? theme.palette.grey[600] : undefined,
        fontFamily: theme.palette.fonts.sansSerifStack,
        fontSize: 14,
        fontWeight: 500,
      },
    },
  },
  collapsed: {
    height: COLLAPSED_HEIGHT + (2 * COMMENTS_NEW_FORM_PADDING),
    overflow: "hidden",
  },
  commentForm: {
    '& .form-input': {
      margin: 0,
      minHeight: 30,
    },
    '& .ck.ck-editor__editable_inline': {
      border: "none !important",
    },
    '& .EditorTypeSelect-select': {
      display: 'none',
    },
  },
  commentFormCollapsed: {
    '& .form-input': {
      height: COLLAPSED_HEIGHT,
      overflow: 'hidden',
      borderRadius: theme.borderRadius.quickTakesEntry,
    },
    '& .EditorFormComponent-commentEditorHeight': {
      minHeight: 'unset'
    },
    '& .EditorFormComponent-commentEditorHeight .ck.ck-content': {
      minHeight: 'unset'
    },
    '& .LocalStorageCheck-root': {
      display: 'none',
    },
    '& .ck .ck-placeholder': {
      position: 'unset'
    },
    '& .CommentsNewForm-submitQuickTakes': {
      display: 'none'
    }
  },
  userNotApprovedMessage: {
    background: 'none',
    border: 'none',
    padding: '10px 10px 0 10px',
    fontSize: 14,
    color: theme.palette.grey[600],
    fontStyle: 'italic',
  },
});

// TODO: decide on copy for LW
const placeholder = "Share exploratory, draft-stage, rough thoughts...";

const QuickTakesEntry = ({
  currentUser,
  defaultExpanded = false,
  defaultFocus = false,
  submitButtonAtBottom = false,
  className,
  successCallback,
  cancelCallback,
  classes,
}: {
  currentUser: UsersCurrent | null,
  defaultExpanded?: boolean,
  defaultFocus?: boolean,
  submitButtonAtBottom?: boolean,
  className?: string,
  successCallback?: CommentSuccessCallback,
  cancelCallback?: CommentCancelCallback,
  classes: ClassesType<typeof styles>,
}) => {
  const ref = useRef<HTMLDivElement>(null);
  const { openDialog } = useDialog();
  const {onSignup} = useLoginPopoverContext();
  const [expanded, setExpanded] = useState(defaultExpanded);
  const {
    frontpage,
    selectedTagIds,
  } = useQuickTakesTags();

  const onCancel = useCallback(async (ev?: MouseEvent) => {
    ev?.preventDefault();
    setExpanded(false);
    void cancelCallback?.();
  }, [cancelCallback]);

  const onFocus = useCallback(() => {
    if (currentUser) {
      setExpanded(true);
    } else {
      if (isFriendlyUI) {
        onSignup();
      } else {
        openDialog({
          componentName: "LoginPopup",
          componentProps: {}
        });
        setExpanded(true);
      }
    }
  }, [currentUser, openDialog, onSignup]);

  useEffect(() => {
    setTimeout(() => {
      if (defaultFocus && ref.current) {
        const editor = ref.current.querySelector("[contenteditable=\"true\"]");
        (editor as HTMLDivElement | null)?.focus?.();
      }
    }, 0);
    // This should only ever run on the first render
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // TODO: The editor is currently pretty messed up if the user has enabled
  // the markdown editor in their user settings, unless we're positioning the
  // submit button at the bottom. For now, we just disable the editor in this
  // case but we probably want to fix this properly in the long run. This is a
  // pretty small percentage of users, so seems ~fine.
  if (currentUser?.markDownPostEditor && !submitButtonAtBottom) {
    return null;
  }

  // is true when user is logged out or has not been reviewed yet, i.e. has made no contributions yet
  const showNewUserMessage = !currentUser?.reviewedByUserId && !isFriendlyUI;

  const {CommentsNewForm} = Components;
  return <div className={classNames(classes.root, className)} ref={ref}>
    {/* TODO: Write a better message for new users */}
    {expanded && showNewUserMessage && <div className={classes.userNotApprovedMessage}>Quick Takes is an excellent place for your first contribution!</div>}
    <div
      className={classNames(classes.commentEditor, {[classes.collapsed]: !expanded})}
      onFocus={onFocus}
    >
      <CommentsNewForm
        key={currentUser?._id ?? "logged-out"}
        type='reply'
        prefilledProps={{
          shortform: true,
          shortformFrontpage: frontpage,
          relevantTagIds: selectedTagIds,
        }}
        enableGuidelines={false}
        className={classNames(classes.commentForm, {
          [classes.commentFormCollapsed]: !expanded,
        })}
        cancelCallback={onCancel}
        successCallback={successCallback}
        overrideHintText={placeholder}
        quickTakesSubmitButtonAtBottom={submitButtonAtBottom}
      />
    </div>
  </div>
}

const QuickTakesEntryComponent = registerComponent(
  "QuickTakesEntry",
  QuickTakesEntry,
  {styles},
);

declare global {
  interface ComponentTypes {
    QuickTakesEntry: typeof QuickTakesEntryComponent
  }
}

1	import React, { MouseEvent, useState, useCallback, useRef, useEffect } from "react";	1✔
2	import { registerComponent, Components } from "../../lib/vulcan-lib";	1✔
3	import { useQuickTakesTags } from "./useQuickTakesTags";	1✔
4	import {
5	COMMENTS_NEW_FORM_PADDING,
6	CommentCancelCallback,
7	CommentSuccessCallback,
8	} from "../comments/CommentsNewForm";	1✔
9	import classNames from "classnames";	1✔
10	import { isFriendlyUI } from "../../themes/forumTheme";	1✔
11	import { useDialog } from "../common/withDialog";	1✔
12	import { useLoginPopoverContext } from "../hooks/useLoginPopoverContext";	1✔
13
14	const COLLAPSED_HEIGHT = 40;	1✔
15
16	const styles = (theme: ThemeType) => ({	1✔
17	root: {
18	background: theme.palette.panelBackground.default,
19	borderRadius: theme.borderRadius.quickTakesEntry,
20	fontFamily: theme.palette.fonts.sansSerifStack,
21	border: `1px solid ${theme.palette.grey[200]}`,
22	},
23	commentEditor: {
24	"& .ck-placeholder": {
25	marginTop: isFriendlyUI ? "-3px !important" : undefined,	1!
26	"&::before": {
27	color: isFriendlyUI ? theme.palette.grey[600] : undefined,	1!
28	fontFamily: theme.palette.fonts.sansSerifStack,
29	fontSize: 14,
30	fontWeight: 500,
31	},
32	},
33	},
34	collapsed: {
35	height: COLLAPSED_HEIGHT + (2 * COMMENTS_NEW_FORM_PADDING),
36	overflow: "hidden",
37	},
38	commentForm: {
39	'& .form-input': {
40	margin: 0,
41	minHeight: 30,
42	},
43	'& .ck.ck-editor__editable_inline': {
44	border: "none !important",
45	},
46	'& .EditorTypeSelect-select': {
47	display: 'none',
48	},
49	},
50	commentFormCollapsed: {
51	'& .form-input': {
52	height: COLLAPSED_HEIGHT,
53	overflow: 'hidden',
54	borderRadius: theme.borderRadius.quickTakesEntry,
55	},
56	'& .EditorFormComponent-commentEditorHeight': {
57	minHeight: 'unset'
58	},
59	'& .EditorFormComponent-commentEditorHeight .ck.ck-content': {
60	minHeight: 'unset'
61	},
62	'& .LocalStorageCheck-root': {
63	display: 'none',
64	},
65	'& .ck .ck-placeholder': {
66	position: 'unset'
67	},
68	'& .CommentsNewForm-submitQuickTakes': {
69	display: 'none'
70	}
71	},
72	userNotApprovedMessage: {
73	background: 'none',
74	border: 'none',
75	padding: '10px 10px 0 10px',
76	fontSize: 14,
77	color: theme.palette.grey[600],
78	fontStyle: 'italic',
79	},
80	});
81
82	// TODO: decide on copy for LW
83	const placeholder = "Share exploratory, draft-stage, rough thoughts...";	1✔
84
85	const QuickTakesEntry = ({	1✔
86	currentUser,
87	defaultExpanded = false,	×
88	defaultFocus = false,	×
89	submitButtonAtBottom = false,	×
90	className,
91	successCallback,
92	cancelCallback,
93	classes,
94	}: {
95	currentUser: UsersCurrent \| null,
96	defaultExpanded?: boolean,
97	defaultFocus?: boolean,
98	submitButtonAtBottom?: boolean,
99	className?: string,
100	successCallback?: CommentSuccessCallback,
101	cancelCallback?: CommentCancelCallback,
102	classes: ClassesType<typeof styles>,
103	}) => {
104	const ref = useRef<HTMLDivElement>(null);	×
105	const { openDialog } = useDialog();	×
NEW 106	const {onSignup} = useLoginPopoverContext();	×
UNCOV 107	const [expanded, setExpanded] = useState(defaultExpanded);	×
108	const {
109	frontpage,
110	selectedTagIds,
111	} = useQuickTakesTags();	×
112
113	const onCancel = useCallback(async (ev?: MouseEvent) => {	×
114	ev?.preventDefault();	×
115	setExpanded(false);	×
116	void cancelCallback?.();	×
117	}, [cancelCallback]);
118
119	const onFocus = useCallback(() => {	×
NEW 120	if (currentUser) {	×
NEW 121	setExpanded(true);	×
122	} else {
NEW 123	if (isFriendlyUI) {	×
NEW 124	onSignup();	×
125	} else {
NEW 126	openDialog({	×
127	componentName: "LoginPopup",
128	componentProps: {}
129	});
NEW 130	setExpanded(true);	×
131	}
132	}
133	}, [currentUser, openDialog, onSignup]);
134
135	useEffect(() => {	×
136	setTimeout(() => {	×
137	if (defaultFocus && ref.current) {	×
138	const editor = ref.current.querySelector("[contenteditable=\"true\"]");	×
139	(editor as HTMLDivElement \| null)?.focus?.();	×
140	}
141	}, 0);
142	// This should only ever run on the first render
143	// eslint-disable-next-line react-hooks/exhaustive-deps
144	}, []);
145
146	// TODO: The editor is currently pretty messed up if the user has enabled
147	// the markdown editor in their user settings, unless we're positioning the
148	// submit button at the bottom. For now, we just disable the editor in this
149	// case but we probably want to fix this properly in the long run. This is a
150	// pretty small percentage of users, so seems ~fine.
151	if (currentUser?.markDownPostEditor && !submitButtonAtBottom) {	×
152	return null;	×
153	}
154
155	// is true when user is logged out or has not been reviewed yet, i.e. has made no contributions yet
NEW 156	const showNewUserMessage = !currentUser?.reviewedByUserId && !isFriendlyUI;	×
157
158	const {CommentsNewForm} = Components;	×
159	return <div className={classNames(classes.root, className)} ref={ref}>	×
160	{/* TODO: Write a better message for new users */}
161	{expanded && showNewUserMessage && <div className={classes.userNotApprovedMessage}>Quick Takes is an excellent place for your first contribution!</div>}	×
162	<div
163	className={classNames(classes.commentEditor, {[classes.collapsed]: !expanded})}
164	onFocus={onFocus}
165	>
166	<CommentsNewForm
167	key={currentUser?._id ?? "logged-out"}	×
168	type='reply'
169	prefilledProps={{
170	shortform: true,
171	shortformFrontpage: frontpage,
172	relevantTagIds: selectedTagIds,
173	}}
174	enableGuidelines={false}
175	className={classNames(classes.commentForm, {
176	[classes.commentFormCollapsed]: !expanded,
177	})}
178	cancelCallback={onCancel}
179	successCallback={successCallback}
180	overrideHintText={placeholder}
181	quickTakesSubmitButtonAtBottom={submitButtonAtBottom}
182	/>
183	</div>
184	</div>
185	}
186
187	const QuickTakesEntryComponent = registerComponent(	1✔
188	"QuickTakesEntry",
189	QuickTakesEntry,
190	{styles},
191	);
192
193	declare global {
194	interface ComponentTypes {
195	QuickTakesEntry: typeof QuickTakesEntryComponent
196	}
197	}

ForumMagnum / ForumMagnum / 11632765860

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