Paths

Table of Contentst

-
web/selectors/
-
selectors/
-
nav-selectors.js

[web] Fix app switcher for thread creation
AbandonedPublic
Actions

Authored by • jacek on Jul 7 2022, 5:34 AM.

Details

Reviewers

tomek
atul
• abosh

Summary

Currently app switcher highlights current app (on the left side) using navTabSelecter. The change allows highlighting chat icon in both chat and chat-creation navigation state.

After (in chat creation state):

Screenshot_Google Chrome_2022-07-07_150114.png (200×249 px, 6 KB)

Test Plan

Enter chat creation mode. The chat icon on the left should remain highlighted.

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

• jacek created this revision.Jul 7 2022, 5:34 AM

Herald added subscribers: • abosh, • adrian, ashoat. · View Herald TranscriptJul 7 2022, 5:34 AM

Harbormaster completed remote builds in B10347: Diff 14255.Jul 7 2022, 5:49 AM

• jacek requested review of this revision.Jul 7 2022, 5:49 AM

• jacek added a parent revision: D4457: [web] Introduce `chat-creation` mode in `navInfo`.Jul 7 2022, 5:57 AM

• jacek added a child revision: D4465: [web] Support chat creation in `ChatMessageListContainer`.

• jacek edited the summary of this revision. (Show Details)Jul 7 2022, 6:01 AM

• abosh requested changes to this revision.Jul 7 2022, 7:00 AM

• abosh added inline comments.

web/selectors/nav-selectors.js
17 ↗	(On Diff #14255)	Why was this change made? Flow/ESLint wasn't complaining and it doesn't match the syntax in the rest of the imports.
218 ↗	(On Diff #14255)	This is a bit pedantic, but looks cleaner. Not necessary to implement, though.

This revision now requires changes to proceed.Jul 7 2022, 7:00 AM

• abosh added inline comments.Jul 7 2022, 7:45 AM

web/selectors/nav-selectors.js
218–222 ↗	(On Diff #14255)	Actually, in a follow up to my above comment, this can also be shortened with a ternary.

• jacek added inline comments.Jul 8 2022, 4:16 AM

web/selectors/nav-selectors.js
17 ↗	(On Diff #14255)	Interesting, I really don't know. Probably somehow by accident. I'll revert it.
218 ↗	(On Diff #14255)	Not sure which is better, It could be a bit dangerous, because if we introduce some new tab starting with `chat` in the future, this check would automatically cover it, what may not be the best solution.

• abosh accepted this revision.Jul 8 2022, 7:17 AM

• abosh added inline comments.

web/selectors/nav-selectors.js
218 ↗	(On Diff #14255)	That's a great point. In that case, I don't think it's necessary to incorporate this suggestion.

This revision is now accepted and ready to land.Jul 8 2022, 7:17 AM

accidentally hit accept, sorry. Will accept once this change is reverted.

This revision now requires changes to proceed.Jul 8 2022, 7:18 AM

• jacek planned changes to this revision.Jul 11 2022, 1:58 AM

revert accidental import change

Harbormaster completed remote builds in B10441: Diff 14385.Jul 11 2022, 2:45 AM

Abandoning due to changes in previous diffs that eliminated the need for the change here.

Revision Contents
Changeset List

Path

Size

web/

selectors/

nav-selectors.js

4 lines

Diff 14385

View Options

web/selectors/nav-selectors.js

	// @flow			// @flow

	import classNames from 'classnames';			import classNames from 'classnames';
	import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';

	import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
	import { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils';
	import type { ThreadInfo } from 'lib/types/thread-types';

	import CommIcon from '../CommIcon.react.js';
	import type { InputState } from '../input/input-state';
	import {			import {
	useOnClickThread,			tooltipButtonStyle,
	useOnClickPendingSidebar,			tooltipLabelStyle,
	} from '../selectors/nav-selectors';			tooltipStyle,
	import MessageReplyButton from './message-reply-button.react';			} from './chat-constants';
	import css from './message-tooltip.css';			import css from './message-tooltip.css';
	import type {			import { type MessageTooltipAction } from './tooltip-utils';
	ItemAndContainerPositionInfo,
	MessagePositionInfo,			type MessageTooltipProps = {
	OnMessagePositionWithContainerInfo,			+actions: $ReadOnlyArray<MessageTooltipAction>,
	PositionInfo,			+messageTimestamp: string,
	} from './position-types';			+alignment?: 'left' \| 'center' \| 'right',
	import { tooltipPositions, type TooltipPosition } from './tooltip-utils';
	import {
	TooltipMenu,
	type TooltipStyle,
	TooltipTextItem,
	} from './tooltip.react';

	const messageActionIconExcessVerticalWhitespace = 10;

	const openSidebarText = 'Go to thread';
	const createSidebarText = 'Create thread';

	type TooltipType = 'sidebar' \| 'reply';

	type BaseMessageTooltipProps = {
	+threadInfo: ThreadInfo,
	+item: ChatMessageInfoItem,
	+availableTooltipPositions: $ReadOnlyArray<TooltipPosition>,
	+mouseOverMessagePosition: OnMessagePositionWithContainerInfo,
	};
	type MessageTooltipProps =
	\| {
	...BaseMessageTooltipProps,
	+canReply: false,
	}
	\| {
	...BaseMessageTooltipProps,
	+canReply: true,
	+inputState: ?InputState,
	+setMouseOverMessagePosition: (
	messagePositionInfo: MessagePositionInfo,
	) => void,
	};			};
	function MessageTooltip(props: MessageTooltipProps): React.Node {			function MessageTooltip(props: MessageTooltipProps): React.Node {
	const {			const { actions, messageTimestamp, alignment = 'left' } = props;
	threadInfo,			const [activeTooltipLabel, setActiveTooltipLabel] = React.useState<?string>();
	item,			const messageActionButtonsContainerClassName = classNames(
	availableTooltipPositions,			css.messageActionContainer,
	mouseOverMessagePosition,			css.messageActionButtons,
	canReply,			);
	} = props;
				const messageTooltipButtonStyle = React.useMemo(() => tooltipButtonStyle, []);
	const { containerPosition } = mouseOverMessagePosition;
				const tooltipButtons = React.useMemo(() => {
	const [activeTooltip, setActiveTooltip] = React.useState<?TooltipType>();			if (!actions \|\| actions.length === 0) {
	const [pointingTo, setPointingTo] = React.useState();			return null;
				}
	const showTooltip = React.useCallback(			const buttons = actions.map(({ label, onClick, actionButtonContent }) => {
	(tooltipType: TooltipType, iconPosition: ItemAndContainerPositionInfo) => {			const onMouseEnter = () => {
	if (activeTooltip) {			setActiveTooltipLabel(label);
	return;			};
	}			const onMouseLeave = () =>
	setActiveTooltip(tooltipType);			setActiveTooltipLabel(oldLabel =>
	setPointingTo(iconPosition);			label === oldLabel ? null : oldLabel,
	},
	[activeTooltip],
	);

	const hideTooltip = React.useCallback(() => {
	setActiveTooltip(null);
	}, []);

	const showSidebarTooltip = React.useCallback(
	(event: SyntheticEvent<HTMLDivElement>) => {
	const rect = event.currentTarget.getBoundingClientRect();
	const iconPosition = getIconPosition(rect, containerPosition);
	showTooltip('sidebar', iconPosition);
	},
	[containerPosition, showTooltip],
	);

	const showReplyTooltip = React.useCallback(
	(event: SyntheticEvent<HTMLDivElement>) => {
	const rect = event.currentTarget.getBoundingClientRect();
	const iconPosition = getIconPosition(rect, containerPosition);
	showTooltip('reply', iconPosition);
	},
	[containerPosition, showTooltip],
	);

	const { threadCreatedFromMessage, messageInfo } = item;

	const onThreadOpen = useOnClickThread(threadCreatedFromMessage);
	const onPendingSidebarOpen = useOnClickPendingSidebar(
	messageInfo,
	threadInfo,
	);
	const onSidebarButtonClick = React.useCallback(
	(event: SyntheticEvent<HTMLButtonElement>) => {
	if (threadCreatedFromMessage) {
	onThreadOpen(event);
	} else {
	onPendingSidebarOpen(event);
	}
	},
	[onPendingSidebarOpen, onThreadOpen, threadCreatedFromMessage],
	);

	const setMouseOverMessagePosition = props.canReply
	? props.setMouseOverMessagePosition
	: null;

	const onReplyButtonClick = React.useCallback(() => {
	setMouseOverMessagePosition?.({
	type: 'off',
	item: item,
	});
	}, [item, setMouseOverMessagePosition]);

	let tooltipText = '';
	if (activeTooltip === 'reply') {
	tooltipText = 'Reply';
	} else if (activeTooltip === 'sidebar') {
	tooltipText = threadCreatedFromMessage
	? openSidebarText
	: createSidebarText;
	}

	let tooltipMenu = null;
	if (pointingTo && activeTooltip) {
	tooltipMenu = (
	<TooltipMenu
	availableTooltipPositions={availableTooltipPositions}
	targetPositionInfo={pointingTo}
	layoutPosition="relative"
	getStyle={getMessageActionTooltipStyle}
	>
	<TooltipTextItem text={tooltipText} />
	</TooltipMenu>
	);			);
	}

	let replyButton;			return (
	if (canReply) {
	invariant(props.inputState, 'inputState must be set if replyButton exists');
	replyButton = (
	<div			<div
	className={css.messageActionLinkIcon}			onMouseEnter={onMouseEnter}
	onMouseEnter={showReplyTooltip}			onMouseLeave={onMouseLeave}
	onMouseLeave={hideTooltip}			key={label}
				onClick={onClick}
				style={messageTooltipButtonStyle}
				className={css.messageTooltipButton}
	>			>
	<MessageReplyButton			{actionButtonContent}
	messagePositionInfo={mouseOverMessagePosition}
	onReplyClick={onReplyButtonClick}
	inputState={props.inputState}
	/>
	{activeTooltip === 'reply' ? tooltipMenu : null}
	</div>			</div>
	);			);
	}			});
				return (
	const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(			<div className={messageActionButtonsContainerClassName}>{buttons}</div>
	threadInfo,
	item,
	);			);
				}, [
	let sidebarButton;			actions,
	if (sidebarExistsOrCanBeCreated) {			messageActionButtonsContainerClassName,
	sidebarButton = (			messageTooltipButtonStyle,
	<div			]);
	className={css.messageActionLinkIcon}
	onMouseEnter={showSidebarTooltip}			const messageTooltipLabelStyle = React.useMemo(() => tooltipLabelStyle, []);
	onMouseLeave={hideTooltip}			const messageTooltipTopLabelStyle = React.useMemo(
	onClick={onSidebarButtonClick}			() => ({
	>			height: `${tooltipLabelStyle.height + 2 * tooltipLabelStyle.padding}px`,
	<CommIcon icon="sidebar-filled" size={16} />			}),
	{activeTooltip === 'sidebar' ? tooltipMenu : null}			[],
				);

				const tooltipLabel = React.useMemo(() => {
				if (!activeTooltipLabel) {
				return null;
				}
				return (
				<div className={css.messageTooltipLabel} style={messageTooltipLabelStyle}>
				{activeTooltipLabel}
	</div>			</div>
	);			);
	}			}, [activeTooltipLabel, messageTooltipLabelStyle]);

	const { isViewer } = messageInfo.creator;			const tooltipTimestamp = React.useMemo(() => {
	const messageActionButtonsContainerClassName = classNames({			if (!messageTimestamp) {
	[css.messageActionContainer]: true,			return null;
	[css.messageActionButtons]: true,			}
	[css.messageActionButtonsViewer]: isViewer,
	[css.messageActionButtonsNonViewer]: !isViewer,
	});
	return (			return (
	<div>			<div className={css.messageTooltipLabel} style={messageTooltipLabelStyle}>
	<div className={messageActionButtonsContainerClassName}>			{messageTimestamp}
	{sidebarButton}
	{replyButton}
	</div>
	</div>			</div>
	);			);
	}			}, [messageTimestamp, messageTooltipLabelStyle]);

	function getIconPosition(			const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
	rect: ClientRect,
	containerPosition: PositionInfo,
	): ItemAndContainerPositionInfo {
	const { top, bottom, left, right, width, height } = rect;
	return {
	containerPosition,
	itemPosition: {
	top:
	top - containerPosition.top + messageActionIconExcessVerticalWhitespace,
	bottom:
	bottom -
	containerPosition.top -
	messageActionIconExcessVerticalWhitespace,
	left: left - containerPosition.left,
	right: right - containerPosition.left,
	width,
	height: height - messageActionIconExcessVerticalWhitespace * 2,
	},
	};
	}

	function getMessageActionTooltipStyle(			const containerClassNames = React.useMemo(
	tooltipPosition: TooltipPosition,			() =>
	): TooltipStyle {			classNames(css.messageTooltipContainer, {
	let className;			[css.leftTooltipAlign]: alignment === 'left',
	if (tooltipPosition === tooltipPositions.TOP_RIGHT) {			[css.centerTooltipAlign]: alignment === 'center',
	className = classNames(			[css.rightTooltipAlign]: alignment === 'right',
	css.messageActionTopRightTooltip,			}),
	css.messageActionExtraAreaTop,			[alignment],
	css.messageActionExtraAreaTopRight,
	);
	} else if (tooltipPosition === tooltipPositions.TOP_LEFT) {
	className = classNames(
	css.messageActionTopLeftTooltip,
	css.messageActionExtraAreaTop,
	css.messageActionExtraAreaTopLeft,
	);			);
	} else if (tooltipPosition === tooltipPositions.RIGHT) {
	className = classNames(
	css.messageActionRightTooltip,
	css.messageActionExtraArea,
	css.messageActionExtraAreaRight,
	);
	} else if (tooltipPosition === tooltipPositions.LEFT) {
	className = classNames(
	css.messageActionLeftTooltip,
	css.messageActionExtraArea,
	css.messageActionExtraAreaLeft,
	);
	}

	invariant(className, `${tooltipPosition} is not valid for message tooltip`);			return (
	return { className };			<div className={containerClassNames} style={messageTooltipContainerStyle}>
				<div style={messageTooltipTopLabelStyle}>{tooltipLabel}</div>
				{tooltipButtons}
				{tooltipTimestamp}
				</div>
				);
	}			}

	export default MessageTooltip;			export default MessageTooltip;

[web] Fix app switcher for thread creationAbandonedPublicActions