10928080298

Committed 18 Sep 2024 06:33PM UTC coverage: 32.269% (+0.4%) from 31.846%

Build # 10928080298

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9752 from ForumMagnum/fix-broken-linkpost-url-parsing

fixing broken linkpost url parsing

Run Details

1529 of 11505 branches covered (13.29%)

Branch coverage included in aggregate %.

2 of 19 new or added lines in 2 files covered. (10.53%)

4 existing lines in 2 files now uncovered.

7953 of 17879 relevant lines covered (44.48%)

691.99 hits per line

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

18.75

/packages/lesswrong/components/posts/PostsPage/LWPostsPageHeader.tsx

import React from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { AnalyticsContext } from "../../../lib/analyticsEvents";
import { extractVersionsFromSemver } from '../../../lib/editor/utils';
import classNames from 'classnames';
import { getHostname, getProtocol, parseUnsafeUrl } from './PostsPagePostHeader';
import { postGetLink, postGetLinkTarget } from '@/lib/collections/posts/helpers';
import { BOOKUI_LINKPOST_WORDCOUNT_THRESHOLD } from './PostBodyPrefix';
import type { AnnualReviewMarketInfo } from '@/lib/collections/posts/annualReviewMarkets';

export const LW_POST_PAGE_PADDING = 110;

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    paddingTop: LW_POST_PAGE_PADDING,
    marginBottom: 96,
    [theme.breakpoints.down('xs')]: {
      paddingTop: 16,
      marginBottom: 38
    },
  },
  eventHeader: {
    marginBottom: 0,
  },
  authorAndSecondaryInfo: {
    display: 'flex',
    alignItems: 'baseline',
    columnGap: 20,
    ...theme.typography.commentStyle,
    flexWrap: 'wrap',
    color: theme.palette.text.dim3,
    marginTop: 12
  },
  authorInfo: {
    maxWidth: "calc(100% - 60px)",
    [theme.breakpoints.down('xs')]: {
      width: "100%",
      marginBottom: 8,
      fontSize: theme.typography.body2.fontSize,
    },
  },
  feedName: {
    fontSize: theme.typography.body2.fontSize,
    [theme.breakpoints.down('sm')]: {
      display: "none"
    }
  },
  topRight: {
    position: 'absolute',
    right: 8, 
    top: -48,
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      top: -16,
      marginTop: 8,
      marginBottom: 8
    },
    [theme.breakpoints.down('xs')]: {
      display: 'none'
    }
  },
  audioPlayerWrapper: {
    position: 'absolute',
    right: 8, 
    top: 15,
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      top: 8,
      right: 8
    }
  },
  sequenceNav: {
    marginBottom: 8,
    marginTop: -22
  },
  eventData: {
    marginTop: 48
  },
  titleSection: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  title: {
    [theme.breakpoints.down('sm')]: {
      marginBottom: 10
    }
  },
  mobileHeaderVote: {
    textAlign: 'center',
    fontSize: 42,
    marginTop: -55,
    marginLeft: 12,
    [theme.breakpoints.up("sm")]: {
      display: 'none'
    }
  },
  date: {
    marginTop: 8,
    marginBottom: 8
  },
  mobileButtons: {
    display: 'flex',
    alignItems: 'center',
    [theme.breakpoints.up('sm')]: {
      display: 'none'
    }
  },
  audioToggle: {
    marginRight: 12,
    display: "flex",
    opacity: 0.75
  },
  readTime: {
    marginRight: 20,
  }
}); 

/// LWPostsPageHeader: The metadata block at the top of a post page, with
/// title, author, voting, an actions menu, etc.
const LWPostsPageHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes, dialogueResponses, answerCount, annualReviewMarketInfo}: {
  post: PostsWithNavigation|PostsWithNavigationAndRevision|PostsListWithVotes,
  showEmbeddedPlayer?: boolean,
  toggleEmbeddedPlayer?: () => void,
  classes: ClassesType<typeof styles>,
  dialogueResponses: CommentsList[],
  answerCount?: number,
  annualReviewMarketInfo?: AnnualReviewMarketInfo
}) => {
  const { PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon, PostsGroupDetails, PostsTopSequencesNav, PostsPageEventData, AddToCalendarButton, GroupLinks, LWPostsPageHeaderTopRight, PostsAudioPlayerWrapper, PostsVote, AudioToggle, PostActionsButton, AlignmentCrosspostLink, ReadTime, LWCommentCount } = Components;

  const rssFeedSource = ('feed' in post) ? post.feed : null;
  let feedLinkDomain;
  let feedLink;
  if (rssFeedSource?.url) {
    let feedLinkProtocol;
    ({ hostname: feedLinkDomain, protocol: feedLinkProtocol } = parseUnsafeUrl(rssFeedSource.url));
    feedLink = `${feedLinkProtocol}//${feedLinkDomain}`;
  }

  const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1

  const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&
    <CrosspostHeaderIcon post={post} />
  
  // TODO: If we are not the primary author of this post, but it was shared with
  // us as a draft, display a notice and a link to the collaborative editor.

  const { hostname: linkpostDomain } = post.url
    ? parseUnsafeUrl(post.url)
    : { hostname: undefined };

  const linkpostTooltip = <div>View the original at:<br/>{post.url}</div>;
  const displayLinkpost = post.url && feedLinkDomain !== linkpostDomain && (post.contents?.wordCount ?? 0) >= BOOKUI_LINKPOST_WORDCOUNT_THRESHOLD;
  const linkpostNode = displayLinkpost ? <LWTooltip title={linkpostTooltip}>
    <a href={postGetLink(post)} target={postGetLinkTarget(post)}>
      Linkpost from {linkpostDomain}
    </a>
  </LWTooltip> : null;

  return <div className={classNames(classes.root, {[classes.eventHeader]: post.isEvent})}>
      {post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}
      <AnalyticsContext pageSectionContext="topSequenceNavigation">
        {('sequence' in post) && !!post.sequence && <div className={classes.sequenceNav}>
          <PostsTopSequencesNav post={post} />
        </div>}
      </AnalyticsContext>
      <div>
        <span className={classes.topRight}>
          <LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} annualReviewMarketInfo={annualReviewMarketInfo} />
        </span>
        {post && <span className={classes.audioPlayerWrapper}>
          <PostsAudioPlayerWrapper showEmbeddedPlayer={!!showEmbeddedPlayer} post={post}/>
        </span>}
      </div>
      <div className={classes.titleSection}>
        <div className={classes.title}>
          <PostsPageTitle post={post} />
          <div className={classes.authorAndSecondaryInfo}>
            <div className={classes.authorInfo}>
              <PostsAuthors post={post} pageSectionContext="post_header" />
            </div>
            {crosspostNode}
            {!post.isEvent && <div className={classes.date}>
              <PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />
            </div>}
            {rssFeedSource && rssFeedSource.user &&
              <LWTooltip title={`Crossposted from ${feedLinkDomain}`} className={classes.feedName}>
                <a href={feedLink}>{rssFeedSource.nickname}</a>
              </LWTooltip>
            }
            <AlignmentCrosspostLink post={post} />
            {linkpostNode}
            {post.isEvent && <GroupLinks document={post} noMargin />}
            <AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
            <div className={classes.mobileButtons}>
              <div className={classes.readTime}>
                <ReadTime post={post} dialogueResponses={dialogueResponses} />
              </div>
              <LWCommentCount answerCount={answerCount} commentCount={post.commentCount} label={false} />
              <div className={classes.audioToggle}>
                <AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
              </div>
              <PostActionsButton post={post} className={classes.postActionsButton} flip />
            </div>
          </div>
        </div>
        <div className={classes.mobileHeaderVote}>
          <PostsVote post={post} />
        </div>
      </div>
      {post.isEvent && <div className={classes.eventData}>
        <PostsPageEventData post={post}/>
      </div>}
  </div>
}

const LWPostsPageHeaderComponent = registerComponent(
  'LWPostsPageHeader', LWPostsPageHeader, {styles}
);

declare global {
  interface ComponentTypes {
    LWPostsPageHeader: typeof LWPostsPageHeaderComponent,
  }
}


1	import React from 'react';	59✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	19✔
3	import { AnalyticsContext } from "../../../lib/analyticsEvents";	19✔
4	import { extractVersionsFromSemver } from '../../../lib/editor/utils';	19✔
5	import classNames from 'classnames';	19✔
6	import { getHostname, getProtocol, parseUnsafeUrl } from './PostsPagePostHeader';	19✔
7	import { postGetLink, postGetLinkTarget } from '@/lib/collections/posts/helpers';	19✔
8	import { BOOKUI_LINKPOST_WORDCOUNT_THRESHOLD } from './PostBodyPrefix';	19✔
9	import type { AnnualReviewMarketInfo } from '@/lib/collections/posts/annualReviewMarkets';
10
11	export const LW_POST_PAGE_PADDING = 110;	19✔
12
13	const styles = (theme: ThemeType): JssStyles => ({	19✔
14	root: {
15	paddingTop: LW_POST_PAGE_PADDING,
16	marginBottom: 96,
17	[theme.breakpoints.down('xs')]: {
18	paddingTop: 16,
19	marginBottom: 38
20	},
21	},
22	eventHeader: {
23	marginBottom: 0,
24	},
25	authorAndSecondaryInfo: {
26	display: 'flex',
27	alignItems: 'baseline',
28	columnGap: 20,
29	...theme.typography.commentStyle,
30	flexWrap: 'wrap',
31	color: theme.palette.text.dim3,
32	marginTop: 12
33	},
34	authorInfo: {
35	maxWidth: "calc(100% - 60px)",
36	[theme.breakpoints.down('xs')]: {
37	width: "100%",
38	marginBottom: 8,
39	fontSize: theme.typography.body2.fontSize,
40	},
41	},
42	feedName: {
43	fontSize: theme.typography.body2.fontSize,
44	[theme.breakpoints.down('sm')]: {
45	display: "none"
46	}
47	},
48	topRight: {
49	position: 'absolute',
50	right: 8,
51	top: -48,
52	display: 'flex',
53	[theme.breakpoints.down('sm')]: {
54	top: -16,
55	marginTop: 8,
56	marginBottom: 8
57	},
58	[theme.breakpoints.down('xs')]: {
59	display: 'none'
60	}
61	},
62	audioPlayerWrapper: {
63	position: 'absolute',
64	right: 8,
65	top: 15,
66	display: 'flex',
67	[theme.breakpoints.down('sm')]: {
68	top: 8,
69	right: 8
70	}
71	},
72	sequenceNav: {
73	marginBottom: 8,
74	marginTop: -22
75	},
76	eventData: {
77	marginTop: 48
78	},
79	titleSection: {
80	display: 'flex',
81	alignItems: 'center',
82	justifyContent: 'space-between'
83	},
84	title: {
85	[theme.breakpoints.down('sm')]: {
86	marginBottom: 10
87	}
88	},
89	mobileHeaderVote: {
90	textAlign: 'center',
91	fontSize: 42,
92	marginTop: -55,
93	marginLeft: 12,
94	[theme.breakpoints.up("sm")]: {
95	display: 'none'
96	}
97	},
98	date: {
99	marginTop: 8,
100	marginBottom: 8
101	},
102	mobileButtons: {
103	display: 'flex',
104	alignItems: 'center',
105	[theme.breakpoints.up('sm')]: {
106	display: 'none'
107	}
108	},
109	audioToggle: {
110	marginRight: 12,
111	display: "flex",
112	opacity: 0.75
113	},
114	readTime: {
115	marginRight: 20,
116	}
117	});
118
119	/// LWPostsPageHeader: The metadata block at the top of a post page, with
120	/// title, author, voting, an actions menu, etc.
121	const LWPostsPageHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes, dialogueResponses, answerCount, annualReviewMarketInfo}: {	19✔
122	post: PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes,
123	showEmbeddedPlayer?: boolean,
124	toggleEmbeddedPlayer?: () => void,
125	classes: ClassesType<typeof styles>,
126	dialogueResponses: CommentsList[],
127	answerCount?: number,
128	annualReviewMarketInfo?: AnnualReviewMarketInfo
129	}) => {
130	const { PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon, PostsGroupDetails, PostsTopSequencesNav, PostsPageEventData, AddToCalendarButton, GroupLinks, LWPostsPageHeaderTopRight, PostsAudioPlayerWrapper, PostsVote, AudioToggle, PostActionsButton, AlignmentCrosspostLink, ReadTime, LWCommentCount } = Components;	×
131
UNCOV 132	const rssFeedSource = ('feed' in post) ? post.feed : null;	×
133	let feedLinkDomain;
134	let feedLink;
NEW 135	if (rssFeedSource?.url) {	×
136	let feedLinkProtocol;
NEW 137	({ hostname: feedLinkDomain, protocol: feedLinkProtocol } = parseUnsafeUrl(rssFeedSource.url));	×
NEW 138	feedLink = `${feedLinkProtocol}//${feedLinkDomain}`;	×
139	}
140
UNCOV 141	const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1	×
142
143	const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&	×
144	<CrosspostHeaderIcon post={post} />
145
146	// TODO: If we are not the primary author of this post, but it was shared with
147	// us as a draft, display a notice and a link to the collaborative editor.
148
NEW 149	const { hostname: linkpostDomain } = post.url	×
150	? parseUnsafeUrl(post.url)
151	: { hostname: undefined };
152
153	const linkpostTooltip = <div>View the original at:<br/>{post.url}</div>;	×
NEW 154	const displayLinkpost = post.url && feedLinkDomain !== linkpostDomain && (post.contents?.wordCount ?? 0) >= BOOKUI_LINKPOST_WORDCOUNT_THRESHOLD;	×
155	const linkpostNode = displayLinkpost ? <LWTooltip title={linkpostTooltip}>	×
156	<a href={postGetLink(post)} target={postGetLinkTarget(post)}>
157	Linkpost from {linkpostDomain}
158	</a>
159	</LWTooltip> : null;
160
161	return <div className={classNames(classes.root, {[classes.eventHeader]: post.isEvent})}>	×
162	{post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}	×
163	<AnalyticsContext pageSectionContext="topSequenceNavigation">
164	{('sequence' in post) && !!post.sequence && <div className={classes.sequenceNav}>	×
165	<PostsTopSequencesNav post={post} />
166	</div>}
167	</AnalyticsContext>
168	<div>
169	<span className={classes.topRight}>
170	<LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} annualReviewMarketInfo={annualReviewMarketInfo} />
171	</span>
172	{post && <span className={classes.audioPlayerWrapper}>	×
173	<PostsAudioPlayerWrapper showEmbeddedPlayer={!!showEmbeddedPlayer} post={post}/>
174	</span>}
175	</div>
176	<div className={classes.titleSection}>
177	<div className={classes.title}>
178	<PostsPageTitle post={post} />
179	<div className={classes.authorAndSecondaryInfo}>
180	<div className={classes.authorInfo}>
181	<PostsAuthors post={post} pageSectionContext="post_header" />
182	</div>
183	{crosspostNode}
184	{!post.isEvent && <div className={classes.date}>	×
185	<PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />
186	</div>}
187	{rssFeedSource && rssFeedSource.user &&	×
188	<LWTooltip title={`Crossposted from ${feedLinkDomain}`} className={classes.feedName}>
189	<a href={feedLink}>{rssFeedSource.nickname}</a>
190	</LWTooltip>
191	}
192	<AlignmentCrosspostLink post={post} />
193	{linkpostNode}
194	{post.isEvent && <GroupLinks document={post} noMargin />}	×
195	<AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
196	<div className={classes.mobileButtons}>
197	<div className={classes.readTime}>
198	<ReadTime post={post} dialogueResponses={dialogueResponses} />
199	</div>
200	<LWCommentCount answerCount={answerCount} commentCount={post.commentCount} label={false} />
201	<div className={classes.audioToggle}>
202	<AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
203	</div>
204	<PostActionsButton post={post} className={classes.postActionsButton} flip />
205	</div>
206	</div>
207	</div>
208	<div className={classes.mobileHeaderVote}>
209	<PostsVote post={post} />
210	</div>
211	</div>
212	{post.isEvent && <div className={classes.eventData}>	×
213	<PostsPageEventData post={post}/>
214	</div>}
215	</div>
216	}
217
218	const LWPostsPageHeaderComponent = registerComponent(	19✔
219	'LWPostsPageHeader', LWPostsPageHeader, {styles}
220	);
221
222	declare global {
223	interface ComponentTypes {
224	LWPostsPageHeader: typeof LWPostsPageHeaderComponent,
225	}
226	}
227

ForumMagnum / ForumMagnum / 10928080298

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