Merge pull request #8981 from ForumMagnum/ea-people-directory

[EA] People directory

packages/lesswrong/components/common/ForumIcon.tsx

@@ -65,8 +65,10 @@ import ArrowRightOutlineIcon from "@heroicons/react/24/outline/PaperAirplaneIcon
 import ArrowCircleIcon from "@heroicons/react/20/solid/ArrowPathRoundedSquareIcon";
 import FunnelIcon from "@heroicons/react/24/outline/FunnelIcon";
 import BarsArrowDown from "@heroicons/react/24/outline/BarsArrowDownIcon";
+import ViewColumnsIcon from "@heroicons/react/24/outline/ViewColumnsIcon";
 import InformationCircleIcon from '@heroicons/react/24/solid/InformationCircleIcon';
 import ArrowDownOnSquareIcon from '@heroicons/react/24/outline/ArrowDownOnSquareIcon';
+import ChevronUpDownIcon from "@heroicons/react/24/outline/ChevronUpDownIcon";
 import MuiVolumeUpIcon from "@material-ui/icons/VolumeUp";
 import MuiBookmarkIcon from "@material-ui/icons/Bookmark";
 import MuiBookmarkBorderIcon from "@material-ui/icons/BookmarkBorder";
@@ -181,6 +183,7 @@ export type ForumIconName =
   "ThickChevronLeft" |
   "ThickChevronRight" |
   "ThickChevronDown" |
+  "ChevronUpDown" |
   "NarrowArrowDown" |
   "Plus" |
   "Check" |
@@ -217,6 +220,7 @@ export type ForumIconName =
   "Voted" |
   "InfoCircle" |
   "BarsArrowDown" |
+  "ViewColumns" |
   "LightbulbChat" |
   "VoteBallot" |
   "Import" |
@@ -273,6 +277,7 @@ const ICONS: ForumOptions<Record<ForumIconName, IconComponent>> = {
     ThickChevronLeft: ThickChevronLeftIcon,
     ThickChevronRight: ThickChevronRightIcon,
     ThickChevronDown: ThickChevronDownIcon,
+    ChevronUpDown: ChevronUpDownIcon,
     NarrowArrowDown: ArrowLongDown,
     Plus: PlusIcon,
     PlusSmall: PlusSmallIcon,
@@ -309,6 +314,7 @@ const ICONS: ForumOptions<Record<ForumIconName, IconComponent>> = {
     Voted: VotedIcon,
     InfoCircle: InformationCircleIcon,
     BarsArrowDown: BarsArrowDown,
+    ViewColumns: ViewColumnsIcon,
     LightbulbChat: LightbulbChatIcon,
     VoteBallot: MuiVoteIcon,
     Import: ArrowDownOnSquareIcon,
@@ -363,6 +369,7 @@ const ICONS: ForumOptions<Record<ForumIconName, IconComponent>> = {
     ThickChevronLeft: ThickChevronLeftIcon,
     ThickChevronRight: ThickChevronRightIcon,
     ThickChevronDown: ThickChevronDownIcon,
+    ChevronUpDown: ChevronUpDownIcon,
     NarrowArrowDown: ArrowLongDown,
     Plus: PlusIcon,
     PlusSmall: PlusSmallIcon,
@@ -399,6 +406,7 @@ const ICONS: ForumOptions<Record<ForumIconName, IconComponent>> = {
     Voted: VotedIcon,
     InfoCircle: InformationCircleIcon,
     BarsArrowDown: BarsArrowDown,
+    ViewColumns: ViewColumnsIcon,
     LightbulbChat: LightbulbChatIcon,
     VoteBallot: MuiVoteIcon,
     Import: ArrowDownOnSquareIcon,

packages/lesswrong/components/common/HorizScrollBlock.tsx

@@ -1,15 +1,17 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { Components, registerComponent } from "../../lib/vulcan-lib";
+import { registerComponent } from "../../lib/vulcan-lib";
 import classNames from 'classnames';
 
+export const SCROLL_INDICATOR_SIZE = 13;
+
 const styles = (theme: ThemeType): JssStyles => ({
   scrollIndicatorWrapper: {
     display: "block",
     position: "relative",
     maxWidth: "100% !important",
 
-    paddingLeft: 13,
-    paddingRight: 13,
+    paddingLeft: SCROLL_INDICATOR_SIZE,
+    paddingRight: SCROLL_INDICATOR_SIZE,
   },
 
   scrollIndicator: {
@@ -70,8 +72,10 @@ const styles = (theme: ThemeType): JssStyles => ({
   },
 })
 
-const HorizScrollBlock = ({children, classes}: {
+const HorizScrollBlock = ({children, className, contentsClassName, classes}: {
   children: ReactNode
+  className?: string,
+  contentsClassName?: string,
   classes: ClassesType,
 }) => {
   const scrollableContentsRef = useRef<HTMLDivElement>(null);
@@ -92,7 +96,7 @@ const HorizScrollBlock = ({children, classes}: {
     updateScrollBounds();
   }, [updateScrollBounds]);
 
-  return <div className={classes.scrollIndicatorWrapper}>
+  return <div className={classNames(classes.scrollIndicatorWrapper, className)}>
     <div
       className={classNames(
         classes.scrollIndicator, classes.scrollIndicatorLeft,
@@ -104,7 +108,10 @@ const HorizScrollBlock = ({children, classes}: {
       }}
     />
     <div
-      className={classes.scrollableContents} ref={scrollableContentsRef} onScroll={updateScrollBounds}>
+      className={classNames(classes.scrollableContents, contentsClassName)}
+      ref={scrollableContentsRef}
+      onScroll={updateScrollBounds}
+    >
       {children}
     </div>
     <div
@@ -123,7 +130,11 @@ const HorizScrollBlock = ({children, classes}: {
   </div>
 }
 
-const HorizScrollBlockComponent = registerComponent('HorizScrollBlock', HorizScrollBlock, {styles});
+const HorizScrollBlockComponent = registerComponent(
+  'HorizScrollBlock',
+  HorizScrollBlock,
+  {styles, stylePriority: -1},
+);
 
 declare global {
   interface ComponentTypes {

packages/lesswrong/components/common/TabNavigationMenu/TabNavigationItem.tsx

@@ -5,6 +5,7 @@ import { useLocation } from '../../../lib/routeUtil';
 import { MenuTabRegular } from './menuTabs';
 import { forumSelect } from '../../../lib/forumTypeUtils';
 import { isFriendlyUI } from '../../../themes/forumTheme';
+import { useCurrentUser } from '../withUser';
 
 export const iconWidth = 30
 
@@ -14,7 +15,7 @@ const iconTransform = forumSelect({
   default: undefined,
 });
 
-const styles = (theme: ThemeType): JssStyles => ({
+const styles = (theme: ThemeType) => ({
   selected: {
     '& $icon': {
       opacity: 1,
@@ -25,7 +26,12 @@ const styles = (theme: ThemeType): JssStyles => ({
     },
   },
   menuItem: {
-    width: 190,
+    width: isFriendlyUI ? 210 : 190,
+  },
+  desktopOnly: {
+    [theme.breakpoints.down("xs")]: {
+      display: "none !important",
+    },
   },
   navButton: {
     '&:hover': {
@@ -91,19 +97,35 @@ const styles = (theme: ThemeType): JssStyles => ({
   tooltip: {
     maxWidth: isFriendlyUI ? 190 : undefined,
   },
-})
+  flag: {
+    padding: "2px 4px",
+    marginLeft: 10,
+    fontSize: 11,
+    fontWeight: 600,
+    lineHeight: "110%",
+    letterSpacing: "0.33px",
+    textTransform: "uppercase",
+    background: theme.palette.primary.main,
+    borderRadius: theme.borderRadius.small,
+    color: theme.palette.text.alwaysWhite,
+  },
+});
 
 export type TabNavigationItemProps = {
   tab: MenuTabRegular,
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void,
   className?: string,
-  classes: ClassesType,
+  classes: ClassesType<typeof styles>,
 }
 
 const TabNavigationItem = ({tab, onClick, className, classes}: TabNavigationItemProps) => {
-  const { TabNavigationSubItem, LWTooltip, MenuItemLink } = Components
-  const { pathname } = useLocation()
-
+  const {pathname} = useLocation();
+  const currentUser = useCurrentUser();
+
+  if (tab.betaOnly && !currentUser?.beta) {
+    return null;
+  }
+
   // Due to an issue with using anchor tags, we use react-router links, even for
   // external links, we just use window.open to actuate the link.
   const externalLink = /https?:\/\//.test(tab.link);
@@ -122,6 +144,7 @@ const TabNavigationItem = ({tab, onClick, className, classes}: TabNavigationItem
     ? tab.selectedIconComponent ?? tab.iconComponent
     : tab.iconComponent;
 
+  const { TabNavigationSubItem, LWTooltip, MenuItemLink } = Components;
   return <LWTooltip
     placement='right-start'
     title={tab.tooltip || ''}
@@ -138,6 +161,7 @@ const TabNavigationItem = ({tab, onClick, className, classes}: TabNavigationItem
         [classes.navButton]: !tab.subItem,
         [classes.subItemOverride]: tab.subItem,
         [classes.selected]: isSelected,
+        [classes.desktopOnly]: tab.desktopOnly,
       })}
       disableTouchRipple
     >
@@ -156,6 +180,7 @@ const TabNavigationItem = ({tab, onClick, className, classes}: TabNavigationItem
           {tab.title}
         </span>
       }
+      {tab.flag && <span className={classes.flag}>{tab.flag}</span>}
     </MenuItemLink>
   </LWTooltip>
 }

packages/lesswrong/components/common/TabNavigationMenu/menuTabs.tsx

@@ -31,8 +31,12 @@ import TakeActionIcon from "@heroicons/react/24/outline/HeartIcon";
 import TakeActionSelectedIcon from "@heroicons/react/24/solid/HeartIcon";
 import EventsIcon from "@heroicons/react/24/outline/CalendarIcon";
 import EventsSelectedIcon from "@heroicons/react/24/solid/CalendarIcon";
-import GroupsIcon from "@heroicons/react/24/outline/UsersIcon";
-import GroupsSelectedIcon from "@heroicons/react/24/solid/UsersIcon";
+import GroupsIcon from "@heroicons/react/24/outline/UserGroupIcon";
+import GroupsSelectedIcon from "@heroicons/react/24/solid/UserGroupIcon";
+import {
+  PeopleDirectoryIcon,
+  PeopleDirectorySelectedIcon,
+} from '../../icons/peopleDirectoryIcon';
 
 // The sidebar / bottom bar of the Forum contain 10 or so similar tabs, unique to each Forum. The
 // tabs can appear in
@@ -86,7 +90,10 @@ export type MenuTabRegular = {
   showOnMobileStandalone?: boolean
   showOnCompressed?: boolean
   subItem?: boolean,
-  loggedOutOnly?: boolean
+  loggedOutOnly?: boolean,
+  flag?: string,
+  desktopOnly?: boolean,
+  betaOnly?: boolean,
 }
 
 type MenuTab = MenuTabDivider | MenuTabCustomComponent | MenuTabRegular
@@ -292,6 +299,18 @@ export const menuTabs: ForumOptions<Array<MenuTab>> = {
       ${taggingNamePluralSetting.get()} in EA and collects posts tagged with those ${taggingNamePluralSetting.get()}.`,
       showOnMobileStandalone: true,
       showOnCompressed: true,
+    }, {
+      id: 'peopleDirectory',
+      title: 'People directory',
+      link: '/people-directory',
+      iconComponent: PeopleDirectoryIcon,
+      selectedIconComponent: PeopleDirectorySelectedIcon,
+      tooltip: 'Search and filter Forum users',
+      showOnMobileStandalone: true,
+      showOnCompressed: true,
+      flag: "beta",
+      desktopOnly: true,
+      betaOnly: true,
     }, {
       id: 'takeAction',
       title: 'Take action',
@@ -311,7 +330,7 @@ export const menuTabs: ForumOptions<Array<MenuTab>> = {
       showOnCompressed: true
     }, {
       id: 'community',
-      title: 'Groups & people',
+      title: 'Groups',
       link: communityPath,
       iconComponent: GroupsIcon,
       selectedIconComponent: GroupsSelectedIcon,

packages/lesswrong/components/common/useClickableCell.tsx

@@ -11,15 +11,18 @@ export type ClickableCellProps = {
 } & ({
   href: string,
   onClick?: never,
+  openInNewTab?: boolean,
 } | {
   href?: never,
   onClick: (e: MouseEvent<HTMLDivElement>) => void,
+  openInNewTab?: never,
 });
 
 export const useClickableCell = ({
   ignoreLinks,
   href,
   onClick,
+  openInNewTab,
 }: ClickableCellProps) => {
   const navigate = useNavigate();
   // Note that we only trigger this event if an href is provided
@@ -42,9 +45,9 @@ export const useClickableCell = ({
       window.open(href, "_blank");
     } else {
       captureEvent();
-      navigate(href);
+      navigate(href, {openInNewTab});
     }
-  }, [navigate, ignoreLinks, href, onClick, captureEvent]);
+  }, [navigate, ignoreLinks, href, onClick, openInNewTab, captureEvent]);
 
   return {
     onClick: wrappedOnClick,

packages/lesswrong/components/ea-forum/users/EAGApplicationImportForm.tsx

@@ -1,11 +1,11 @@
 import { Components, registerComponent } from '../../../lib/vulcan-lib';
 import React, { useEffect, useRef, useState } from 'react';
 import { useCurrentUser } from '../../common/withUser';
-import { userGetProfileUrl } from '../../../lib/collections/users/helpers';
+import { SOCIAL_MEDIA_PROFILE_FIELDS, userGetProfileUrl } from '../../../lib/collections/users/helpers';
 import { useLocation } from '../../../lib/routeUtil';
 import ArrowBack from '@material-ui/icons/ArrowBack'
 import pick from 'lodash/pick';
-import { CAREER_STAGES, SOCIAL_MEDIA_PROFILE_FIELDS } from '../../../lib/collections/users/schema';
+import { CAREER_STAGES } from '../../../lib/collections/users/schema';
 import Input from '@material-ui/core/Input';
 import { useGoogleMaps } from '../../form-components/LocationFormComponent';
 import { pickBestReverseGeocodingResult } from '../../../lib/geocoding';

packages/lesswrong/components/ea-forum/users/EAUsersMetaInfo.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import { registerComponent, Components } from "../../../lib/vulcan-lib";
 import { Link } from "../../../lib/reactRouterWrapper";
-import {
-  SocialMediaProfileField,
-  SOCIAL_MEDIA_PROFILE_FIELDS,
-  CAREER_STAGES,
-} from "../../../lib/collections/users/schema";
+import { CAREER_STAGES } from "../../../lib/collections/users/schema";
+import { SOCIAL_MEDIA_PROFILE_FIELDS, SocialMediaProfileField } from "../../../lib/collections/users/helpers";
 import { communityPath } from "../../../lib/routes";
 
 const styles = (theme: ThemeType): JssStyles => ({

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

@@ -2,8 +2,7 @@ import React from 'react';
 import { Components, registerComponent } from '../../lib/vulcan-lib';
 import Input from '@material-ui/core/Input';
 import InputAdornment from '@material-ui/core/InputAdornment';
-import { SocialMediaSiteName } from '../icons/SocialMediaIcon';
-import type { SocialMediaProfileField } from '../../lib/collections/users/schema';
+import type { SocialMediaProfileField } from '../../lib/collections/users/helpers';
 
 const styles = (theme: ThemeType): JssStyles => ({
   root: {

packages/lesswrong/components/hooks/useInitiateConversation.ts

@@ -3,6 +3,7 @@ import { useMulti } from "../../lib/crud/withMulti";
 import { isAF } from "../../lib/instanceSettings";
 import { useCurrentUser } from "../common/withUser";
 import { useMessages } from "../common/withMessages";
+import { useTracking } from "../../lib/analyticsEvents";
 
 /**
  * Hook to initiate a conversation with a user. This get's the existing conversation (first conversation
@@ -12,6 +13,10 @@ import { useMessages } from "../common/withMessages";
  * by the hook
  */
 export const useInitiateConversation = (props?: { includeModerators?: boolean }) => {
+  const {captureEvent} = useTracking({
+    eventType: "initiateConversation",
+    eventProps: props,
+  });
   const { includeModerators = false } = props || {};
 
   const currentUser = useCurrentUser();
@@ -53,10 +58,10 @@ export const useInitiateConversation = (props?: { includeModerators?: boolean })
 
   const conversation = results?.[0];
 
-  const initiateConversation = useCallback(
-    (userIds: string[]) => setUserIds(userIds?.length ? userIds : null),
-    []
-  );
+  const initiateConversation = useCallback((userIds: string[]) => {
+    setUserIds(userIds?.length ? userIds : null);
+    captureEvent();
+  }, [captureEvent]);
 
   return {
     conversation,