10361004589

Committed 12 Aug 2024 11:37PM UTC coverage: 32.037% (+0.01%) from 32.024%

Build # 10361004589

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

forumGate "always show toc"

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4938 of 40216 branches covered (12.28%)

Branch coverage included in aggregate %.

48 of 120 new or added lines in 23 files covered. (40.0%)

15 existing lines in 4 files now uncovered.

28800 of 65094 relevant lines covered (44.24%)

180.3 hits per line

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

23.28

/packages/lesswrong/components/editor/PostSharingSettings.tsx

import React, {FC, useCallback, useState} from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib/components';
import { useDialog } from '../common/withDialog';
import { useMessages } from '../common/withMessages';
import { userCanUseSharing } from '../../lib/betas';
import { useCurrentUser } from '../common/withUser';
import { SharingSettings, defaultSharingSettings } from '../../lib/collections/posts/collabEditingPermissions';
import Button from '@material-ui/core/Button';
import Select from '@material-ui/core/Select';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import PropTypes from 'prop-types';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import { moderationEmail } from '../../lib/publicSettings';
import { getPostCollaborateUrl } from '../../lib/collections/posts/helpers';
import { ckEditorName } from './Editor';
import { isFriendlyUI } from '../../themes/forumTheme';
import classNames from 'classnames';

const styles = (theme: ThemeType) => ({
  linkSharingPreview: {
    fontFamily: theme.typography.fontFamily,
  },
  sharingSettingsDialog: {
    width: 500,
    padding: 16,
    fontFamily: theme.typography.fontFamily,
    color: theme.palette.text.normal,
  },
  sharingPermissionsRow: {
  },
  sharingPermissionsLabel: {
    display: "inline-block",
    minWidth: 150,
  },
  sharingPermissionsDropdown: {
    minWidth: 100,
  },
  buttonRow: {
    marginTop: 16,
    marginLeft: "auto",
    display: "flex",
  },
  buttonIcon: {
    cursor: "pointer"
  },
  friendlyButton: {
      color: theme.palette.grey[900],
      backgroundColor: "transparent",
      padding: "2px 12px",
      '&:hover': {
        backgroundColor: theme.palette.grey[200],
      },
      '&:disabled': {
        color: theme.palette.grey[900],
        backgroundColor: "transparent",
        opacity: 0.5
      },
  },
  buttonInternalIcon: {
    width: "20px",
    marginRight: 6
  },
  disabledIcon: {
    opacity: .35,
  },
  spacer: {
    flexGrow: 1,
  },
  linkSharingDescriptionPart: {
    display: "block",
  },
  warning: {
    color: theme.palette.error.main
  },
  tooltipWrapped: {
    marginRight: 16
  }
});

const PostSharingIcon: FC<{
  className?: string,
  onClick?: () => void,
}> = (props) => {
  const {ForumIcon} = Components;
  return isFriendlyUI
    ? (
      <ForumIcon icon="Share" {...props} />
    )
    : (
      <PersonAddIcon {...props} />
    );
}

const shareTooltip = isFriendlyUI
  ? "Share this post"
  : "Share this document";

const noSharePermissionTooltip = isFriendlyUI
  ? "You need at least 1 karma or to be approved by a moderator to share this post"
  : "You need at least 1 karma or to be approved by a mod to share";

const PostSharingSettings = ({document, formType, value, classes}: {
  formType: "edit"|"new",
  document: PostsEditQueryFragment,
  value: SharingSettings,
  path: string,
  label: string,
  classes: ClassesType<typeof styles>
}, context: any) => {
  const {updateCurrentValues, submitForm} = context;
  const {openDialog, closeDialog} = useDialog();
  const currentUser = useCurrentUser();
  const initialSharingSettings = value || defaultSharingSettings;
  const { flash } = useMessages();
  
  const onClickShare = useCallback(() => {
    if (!document.title || !document.title.length) {
      flash("Please give this post a title before sharing.");
      return;
    }
    
    // Check whether we're using CkEditor, or something else.
    // HACK: This isn't stored in a reliable place, until you edit.
    // EditorFormComponent puts it in contents_type for us on edit, but if the
    // contents haven't been edited yet it's not there. So we check
    // originalContents.type, which, if it's an edit form (as opposed to a new
    // form) will have the contents as they were on load. If it's not there
    // either, it's a new, not-yet-edited post, and we have a separate error
    // message for that.
    // See also EditorFormComponent.
    const editorType = (document as any).contents_type || (document as any).contents?.originalContents?.type;
    if (!editorType) {
      flash("Edit the document first to enable sharing");
      return;
    } else if(editorType !== "ckEditorMarkup") {
      flash(`Change the editor type to ${ckEditorName} to enable sharing`);
      return;
    }
    
    openDialog({
      componentName: "PostSharingSettingsDialog",
      componentProps: {
        post: document,
        linkSharingKey: document.linkSharingKey ?? undefined,
        initialSharingSettings,
        onConfirm: async (newSharingSettings: SharingSettings, newSharedUsers: string[], isChanged: boolean) => {
          if (isChanged || formType==="new") {
            await updateCurrentValues({
              sharingSettings: newSharingSettings,
              shareWithUsers: newSharedUsers
            });
            
            // If this is an unbacked post (ie a new-post form,
            // no corresponding document ID yet), we're going to
            // mark it as a draft, then submit the form.
            if (formType==="new") {
              await updateCurrentValues({ draft: true });
              await submitForm(null, {redirectToEditor: true});
            } else {
              // Otherwise we're going to leave whether-this-is-a-draft
              // unchanged, and subimt the form.
              await submitForm(null, {redirectToEditor: true});
            }
          }
          closeDialog();
        },
        initialShareWithUsers: document.shareWithUsers || [],
      },
    });
  }, [openDialog, closeDialog, formType, document, updateCurrentValues, initialSharingSettings, flash, submitForm]);

  const {LWTooltip, EAButton} = Components;

  const canUseSharing = userCanUseSharing(currentUser)

  return <LWTooltip title={canUseSharing ? undefined : noSharePermissionTooltip}>
      <EAButton
        className={classes.friendlyButton}
        onClick={userCanUseSharing(currentUser) ? onClickShare : undefined}
        disabled={!canUseSharing}
      >
        <PostSharingIcon className={classes.buttonInternalIcon} />
        Share {document.draft ? " this draft" : ""}
      </EAButton>
    </LWTooltip>
}

(PostSharingSettings as any).contextTypes = {
  updateCurrentValues: PropTypes.func,
  addToSuccessForm: PropTypes.func,
  submitForm: PropTypes.func,
};


const PostSharingSettingsDialog = ({post, linkSharingKey, initialSharingSettings, initialShareWithUsers, onClose, onConfirm, classes}: {
  // postId: string,
  post: PostsEditQueryFragment,
  // linkSharingKey is only marked nullable for security-mindset reasons; in practice it's filled in by a callback and shouldn't be missing
  linkSharingKey?: string,
  initialSharingSettings: SharingSettings,
  initialShareWithUsers: string[],
  onClose: () => void,
  onConfirm: (newSharingSettings: SharingSettings, newSharedUsers: string[], isChanged: boolean) => void
  classes: ClassesType
}) => {
  const { EditableUsersList, LWDialog, LWTooltip, MenuItem } = Components;
  const [sharingSettings, setSharingSettingsState] = useState({...initialSharingSettings});
  const [shareWithUsers, setShareWithUsersState] = useState(initialShareWithUsers);
  const [isChanged, setIsChanged] = useState(false);
  const { flash } = useMessages();
  
  const updateSharingSettings = (newSettings: SharingSettings) => {
    setSharingSettingsState(newSettings);
    setIsChanged(true);
  };
  const updateSharedUsers = (newSharedUsers: string[]) => {
    setShareWithUsersState(newSharedUsers);
    setIsChanged(true);
  };
  
  const collabEditorLink = getPostCollaborateUrl(post._id, true, linkSharingKey)
  
  const commentingTooltip = "(suggest changes requires edit permission)"

  return <LWDialog open={true}>
    <div className={classes.sharingSettingsDialog}>
      <h2>Sharing Settings</h2>

      
      <p>Shared With Users:</p>
      <EditableUsersList
        value={shareWithUsers}
        setValue={(newUsers: string[]) => {
          updateSharedUsers(newUsers);
        }}
        label="Shared with these users"
      />
      
      <div className={classes.sharingPermissionsRow}>
        <span className={classes.sharingPermissionsLabel}>Explicitly shared users can:</span>
        <Select
          className={classes.sharingPermissionsDropdown}
          value={sharingSettings.explicitlySharedUsersCan}
          onChange={(e) => {
            updateSharingSettings({...sharingSettings, explicitlySharedUsersCan: e.target.value as any});
          }}
        >
          <MenuItem value="none" disabled={!!post.collabEditorDialogue}>None</MenuItem>
          <MenuItem value="read">Read</MenuItem>
          {/* TODO: Figure out how to wrap a menu item in a tooltip without breaking the Select dropdown */}
          <MenuItem value="comment">
            <LWTooltip placement="right" title={commentingTooltip}>
              <div className={classes.tooltipWrapped}>Comment</div> 
            </LWTooltip>
          </MenuItem>
          <MenuItem value="edit">Edit</MenuItem>
        </Select>
      </div>
      
      <div className={classes.sharingPermissionsRow}>
        <span className={classes.sharingPermissionsLabel}>Anyone with the link can:</span>
        <Select
          className={classes.sharingPermissionsDropdown}
          value={sharingSettings.anyoneWithLinkCan}
          onChange={(e) => {
            updateSharingSettings({...sharingSettings, anyoneWithLinkCan: e.target.value as any});
          }}
        >
          <MenuItem value="none">None</MenuItem>
          <MenuItem  value="read">Read</MenuItem>
          <MenuItem value="comment">
            <LWTooltip placement="right" title={commentingTooltip}>
              <div className={classes.tooltipWrapped}>Comment</div>
            </LWTooltip>
          </MenuItem>
          <MenuItem value="edit">Edit</MenuItem>
        </Select>
      </div>
      
      <p className={classes.warning}>
        Collaborative Editing features are in beta. Message us on Intercom or email us at{' '}
        {moderationEmail.get()} if you experience issues
      </p>

      <div className={classes.buttonRow}>
        {(sharingSettings.anyoneWithLinkCan!=="none" && post._id)
          ? <CopyToClipboard
              text={collabEditorLink}
              onCopy={(_text, _result) => {
                flash("Link copied");
              }}
            >
              <Button>Copy link</Button>
            </CopyToClipboard>
          : <LWTooltip title="Enable link-sharing permission and confirm sharing settings first">
              <Button disabled={true}>Copy link</Button>
            </LWTooltip>
        }
        
        <span className={classes.spacer}/>
        
        <Button
          onClick={()=>onClose()}
        >
          Cancel
        </Button>
        <Button variant="contained" color="primary"
          onClick={() => onConfirm(sharingSettings, shareWithUsers, isChanged)}
        >
          Confirm
        </Button>
      </div>
    </div>
  </LWDialog>
}

const PostSharingSettingsComponent = registerComponent('PostSharingSettings', PostSharingSettings, {styles});
const PostSharingSettingsDialogComponent = registerComponent('PostSharingSettingsDialog', PostSharingSettingsDialog, {styles});

declare global {
  interface ComponentTypes {
    PostSharingSettings: typeof PostSharingSettingsComponent,
    PostSharingSettingsDialog: typeof PostSharingSettingsDialogComponent
  }
}

1	import React, {FC, useCallback, useState} from 'react';	1✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib/components';	1✔
3	import { useDialog } from '../common/withDialog';	1✔
4	import { useMessages } from '../common/withMessages';	1✔
5	import { userCanUseSharing } from '../../lib/betas';	1✔
6	import { useCurrentUser } from '../common/withUser';	1✔
7	import { SharingSettings, defaultSharingSettings } from '../../lib/collections/posts/collabEditingPermissions';	1✔
8	import Button from '@material-ui/core/Button';	1✔
9	import Select from '@material-ui/core/Select';	1✔
10	import { CopyToClipboard } from 'react-copy-to-clipboard';	1✔
11	import PropTypes from 'prop-types';	1✔
12	import PersonAddIcon from '@material-ui/icons/PersonAdd';	1✔
13	import { moderationEmail } from '../../lib/publicSettings';	1✔
14	import { getPostCollaborateUrl } from '../../lib/collections/posts/helpers';	1✔
15	import { ckEditorName } from './Editor';	1✔
16	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
17	import classNames from 'classnames';
18
19	const styles = (theme: ThemeType) => ({	2✔
20	linkSharingPreview: {
21	fontFamily: theme.typography.fontFamily,
22	},
23	sharingSettingsDialog: {
24	width: 500,
25	padding: 16,
26	fontFamily: theme.typography.fontFamily,
27	color: theme.palette.text.normal,
28	},
29	sharingPermissionsRow: {
30	},
31	sharingPermissionsLabel: {
32	display: "inline-block",
33	minWidth: 150,
34	},
35	sharingPermissionsDropdown: {
36	minWidth: 100,
37	},
38	buttonRow: {
39	marginTop: 16,
40	marginLeft: "auto",
41	display: "flex",
42	},
43	buttonIcon: {
44	cursor: "pointer"
45	},
46	friendlyButton: {
47	color: theme.palette.grey[900],
48	backgroundColor: "transparent",
49	padding: "2px 12px",
50	'&:hover': {
51	backgroundColor: theme.palette.grey[200],
52	},
53	'&:disabled': {
54	color: theme.palette.grey[900],
55	backgroundColor: "transparent",
56	opacity: 0.5
57	},
58	},
59	buttonInternalIcon: {
60	width: "20px",
61	marginRight: 6
62	},
63	disabledIcon: {
64	opacity: .35,
65	},
66	spacer: {
67	flexGrow: 1,
68	},
69	linkSharingDescriptionPart: {
70	display: "block",
71	},
72	warning: {
73	color: theme.palette.error.main
74	},
75	tooltipWrapped: {
76	marginRight: 16
77	}
78	});
79
80	const PostSharingIcon: FC<{
81	className?: string,
82	onClick?: () => void,
83	}> = (props) => {	1✔
84	const {ForumIcon} = Components;	×
85	return isFriendlyUI	×
86	? (
87	<ForumIcon icon="Share" {...props} />	×
88	)
89	: (
90	<PersonAddIcon {...props} />
91	);
92	}
93
94	const shareTooltip = isFriendlyUI	1✔
95	? "Share this post"	1!
96	: "Share this document";
97
98	const noSharePermissionTooltip = isFriendlyUI	1✔
99	? "You need at least 1 karma or to be approved by a moderator to share this post"	1!
100	: "You need at least 1 karma or to be approved by a mod to share";
101
102	const PostSharingSettings = ({document, formType, value, classes}: {	1✔
103	formType: "edit"\|"new",
104	document: PostsEditQueryFragment,
105	value: SharingSettings,
106	path: string,
107	label: string,
108	classes: ClassesType<typeof styles>
109	}, context: any) => {
110	const {updateCurrentValues, submitForm} = context;	×
111	const {openDialog, closeDialog} = useDialog();	×
112	const currentUser = useCurrentUser();	×
113	const initialSharingSettings = value \|\| defaultSharingSettings;	×
114	const { flash } = useMessages();	×
115
116	const onClickShare = useCallback(() => {	×
117	if (!document.title \|\| !document.title.length) {	×
118	flash("Please give this post a title before sharing.");	×
119	return;	×
120	}
121
122	// Check whether we're using CkEditor, or something else.
123	// HACK: This isn't stored in a reliable place, until you edit.
124	// EditorFormComponent puts it in contents_type for us on edit, but if the
125	// contents haven't been edited yet it's not there. So we check
126	// originalContents.type, which, if it's an edit form (as opposed to a new
127	// form) will have the contents as they were on load. If it's not there
128	// either, it's a new, not-yet-edited post, and we have a separate error
129	// message for that.
130	// See also EditorFormComponent.
131	const editorType = (document as any).contents_type \|\| (document as any).contents?.originalContents?.type;	×
132	if (!editorType) {	×
133	flash("Edit the document first to enable sharing");	×
134	return;	×
135	} else if(editorType !== "ckEditorMarkup") {	×
136	flash(`Change the editor type to ${ckEditorName} to enable sharing`);	×
137	return;	×
138	}
139
140	openDialog({	×
141	componentName: "PostSharingSettingsDialog",
142	componentProps: {
143	post: document,
144	linkSharingKey: document.linkSharingKey ?? undefined,	×
145	initialSharingSettings,
146	onConfirm: async (newSharingSettings: SharingSettings, newSharedUsers: string[], isChanged: boolean) => {
147	if (isChanged \|\| formType==="new") {	×
148	await updateCurrentValues({	×
149	sharingSettings: newSharingSettings,
150	shareWithUsers: newSharedUsers
151	});
152
153	// If this is an unbacked post (ie a new-post form,
154	// no corresponding document ID yet), we're going to
155	// mark it as a draft, then submit the form.
156	if (formType==="new") {	×
157	await updateCurrentValues({ draft: true });	×
158	await submitForm(null, {redirectToEditor: true});	×
159	} else {
160	// Otherwise we're going to leave whether-this-is-a-draft
161	// unchanged, and subimt the form.
162	await submitForm(null, {redirectToEditor: true});	×
163	}
164	}
165	closeDialog();	×
166	},
167	initialShareWithUsers: document.shareWithUsers \|\| [],	×
168	},
169	});
170	}, [openDialog, closeDialog, formType, document, updateCurrentValues, initialSharingSettings, flash, submitForm]);
171
172	const {LWTooltip, EAButton} = Components;	×
173
174	const canUseSharing = userCanUseSharing(currentUser)	×
175
NEW 176	return <LWTooltip title={canUseSharing ? undefined : noSharePermissionTooltip}>	×
177	<EAButton
178	className={classes.friendlyButton}
179	onClick={userCanUseSharing(currentUser) ? onClickShare : undefined}	×
180	disabled={!canUseSharing}
181	>
182	<PostSharingIcon className={classes.buttonInternalIcon} />
183	Share {document.draft ? " this draft" : ""}	×
184	</EAButton>
185	</LWTooltip>
186	}
187
188	(PostSharingSettings as any).contextTypes = {	1✔
189	updateCurrentValues: PropTypes.func,
190	addToSuccessForm: PropTypes.func,
191	submitForm: PropTypes.func,
192	};
193
194
195	const PostSharingSettingsDialog = ({post, linkSharingKey, initialSharingSettings, initialShareWithUsers, onClose, onConfirm, classes}: {	1✔
196	// postId: string,
197	post: PostsEditQueryFragment,
198	// linkSharingKey is only marked nullable for security-mindset reasons; in practice it's filled in by a callback and shouldn't be missing
199	linkSharingKey?: string,
200	initialSharingSettings: SharingSettings,
201	initialShareWithUsers: string[],
202	onClose: () => void,
203	onConfirm: (newSharingSettings: SharingSettings, newSharedUsers: string[], isChanged: boolean) => void
204	classes: ClassesType
205	}) => {
206	const { EditableUsersList, LWDialog, LWTooltip, MenuItem } = Components;	×
207	const [sharingSettings, setSharingSettingsState] = useState({...initialSharingSettings});	×
208	const [shareWithUsers, setShareWithUsersState] = useState(initialShareWithUsers);	×
209	const [isChanged, setIsChanged] = useState(false);	×
210	const { flash } = useMessages();	×
211
212	const updateSharingSettings = (newSettings: SharingSettings) => {	×
213	setSharingSettingsState(newSettings);	×
214	setIsChanged(true);	×
215	};
216	const updateSharedUsers = (newSharedUsers: string[]) => {	×
217	setShareWithUsersState(newSharedUsers);	×
218	setIsChanged(true);	×
219	};
220
221	const collabEditorLink = getPostCollaborateUrl(post._id, true, linkSharingKey)	×
222
223	const commentingTooltip = "(suggest changes requires edit permission)"	×
224
225	return <LWDialog open={true}>	×
226	<div className={classes.sharingSettingsDialog}>
227	<h2>Sharing Settings</h2>
228
229
230	<p>Shared With Users:</p>
231	<EditableUsersList
232	value={shareWithUsers}
233	setValue={(newUsers: string[]) => {
234	updateSharedUsers(newUsers);	×
235	}}
236	label="Shared with these users"
237	/>
238
239	<div className={classes.sharingPermissionsRow}>
240	<span className={classes.sharingPermissionsLabel}>Explicitly shared users can:</span>
241	<Select
242	className={classes.sharingPermissionsDropdown}
243	value={sharingSettings.explicitlySharedUsersCan}
244	onChange={(e) => {
245	updateSharingSettings({...sharingSettings, explicitlySharedUsersCan: e.target.value as any});	×
246	}}
247	>
248	<MenuItem value="none" disabled={!!post.collabEditorDialogue}>None</MenuItem>
249	<MenuItem value="read">Read</MenuItem>
250	{/* TODO: Figure out how to wrap a menu item in a tooltip without breaking the Select dropdown */}
251	<MenuItem value="comment">
252	<LWTooltip placement="right" title={commentingTooltip}>
253	<div className={classes.tooltipWrapped}>Comment</div>
254	</LWTooltip>
255	</MenuItem>
256	<MenuItem value="edit">Edit</MenuItem>
257	</Select>
258	</div>
259
260	<div className={classes.sharingPermissionsRow}>
261	<span className={classes.sharingPermissionsLabel}>Anyone with the link can:</span>
262	<Select
263	className={classes.sharingPermissionsDropdown}
264	value={sharingSettings.anyoneWithLinkCan}
265	onChange={(e) => {
266	updateSharingSettings({...sharingSettings, anyoneWithLinkCan: e.target.value as any});	×
267	}}
268	>
269	<MenuItem value="none">None</MenuItem>
270	<MenuItem value="read">Read</MenuItem>
271	<MenuItem value="comment">
272	<LWTooltip placement="right" title={commentingTooltip}>
273	<div className={classes.tooltipWrapped}>Comment</div>
274	</LWTooltip>
275	</MenuItem>
276	<MenuItem value="edit">Edit</MenuItem>
277	</Select>
278	</div>
279
280	<p className={classes.warning}>
281	Collaborative Editing features are in beta. Message us on Intercom or email us at{' '}
282	{moderationEmail.get()} if you experience issues
283	</p>
284
285	<div className={classes.buttonRow}>
286	{(sharingSettings.anyoneWithLinkCan!=="none" && post._id)	×
287	? <CopyToClipboard	×
288	text={collabEditorLink}
289	onCopy={(_text, _result) => {
290	flash("Link copied");	×
291	}}
292	>
293	<Button>Copy link</Button>
294	</CopyToClipboard>
295	: <LWTooltip title="Enable link-sharing permission and confirm sharing settings first">
296	<Button disabled={true}>Copy link</Button>
297	</LWTooltip>
298	}
299
300	<span className={classes.spacer}/>
301
302	<Button
303	onClick={()=>onClose()}	×
304	>
305	Cancel
306	</Button>
307	<Button variant="contained" color="primary"
308	onClick={() => onConfirm(sharingSettings, shareWithUsers, isChanged)}	×
309	>
310	Confirm
311	</Button>
312	</div>
313	</div>
314	</LWDialog>
315	}
316
317	const PostSharingSettingsComponent = registerComponent('PostSharingSettings', PostSharingSettings, {styles});	1✔
318	const PostSharingSettingsDialogComponent = registerComponent('PostSharingSettingsDialog', PostSharingSettingsDialog, {styles});	1✔
319
320	declare global {
321	interface ComponentTypes {
322	PostSharingSettings: typeof PostSharingSettingsComponent,
323	PostSharingSettingsDialog: typeof PostSharingSettingsDialogComponent
324	}
325	}

ForumMagnum / ForumMagnum / 10361004589

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