Page MenuHomePhabricator
Differential D5363

[web] introduced ModalOverlay component
ClosedPublic
Actions

Authored by ginsu on Oct 13 2022, 2:25 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 8:57 PM
Unknown Object (File)
Sat, Mar 15, 8:57 PM
Unknown Object (File)
Sat, Mar 15, 8:57 PM
Unknown Object (File)
Sat, Mar 15, 8:56 PM
Unknown Object (File)
Sat, Mar 15, 8:56 PM
Unknown Object (File)
Sat, Mar 15, 8:55 PM
Unknown Object (File)
Sat, Mar 15, 8:48 PM
Unknown Object (File)
Wed, Mar 12, 6:52 AM
View All Files
Subscribers
• abosh
ashoat
atul
• przemek
tomek

Details

Reviewers
atul
• abosh
rohan
• przemek
Commits
rCOMMb2a0ce970e0a: [web] introduced ModalOverlay component
Summary

introduced ModalOverlay component. The ModalOverlay component extracts the overlay logic from the Modal component into a separate component. Eventually we are going to want to migrate the ModalOverlay into lib

Linear Task: ENG-2038

Test Plan

Please watch the video to see that there are no visual or performance regressions with the new ModalOverlay component

Diff Detail

Repository
rCOMM Comm
Branch
eng-2038v2
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Oct 13 2022, 2:25 PM
Herald added subscribers: • abosh, atul, tomek, ashoat. · View Herald TranscriptOct 13 2022, 2:25 PM
ginsu edited the summary of this revision. (Show Details)Oct 13 2022, 2:30 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, • abosh, rohan.
ginsu attached a referenced file: F198687: Screen Recording 2022-10-13 at 5.21.54 PM.mov. (Show Details)
ginsu edited the summary of this revision. (Show Details)Oct 13 2022, 2:36 PM
Harbormaster completed remote builds in B12785: Diff 17559.Oct 13 2022, 2:36 PM
ginsu requested review of this revision.Oct 13 2022, 2:36 PM
ginsu updated this revision to Diff 17560.Oct 13 2022, 2:38 PM

made focus of this diff just moving code

Harbormaster completed remote builds in B12786: Diff 17560.Oct 13 2022, 2:48 PM
ginsu updated this revision to Diff 17561.Oct 13 2022, 2:49 PM

quick fix

Harbormaster completed remote builds in B12787: Diff 17561.Oct 13 2022, 3:00 PM
ginsu edited the summary of this revision. (Show Details)Oct 13 2022, 9:43 PM
ginsu added a child revision: D5364: [web] update ModalOverlay component.
ginsu updated this revision to Diff 17576.Oct 14 2022, 7:41 AM

rebase Przemek's code

ashoat added a reviewer: • przemek.Oct 14 2022, 7:47 AM
ashoat added a subscriber: • przemek.

Since @przemek just looked at the Modal code, figure he would be a good reviewer here

Harbormaster completed remote builds in B12800: Diff 17576.Oct 14 2022, 7:51 AM
• przemek accepted this revision.Oct 14 2022, 7:59 AM

Looks good to me :)

This revision is now accepted and ready to land.Oct 14 2022, 7:59 AM
ginsu added 1 blocking reviewer(s): atul.Oct 14 2022, 8:01 AM
This revision now requires review to proceed.Oct 14 2022, 8:01 AM
atul accepted this revision.Oct 14 2022, 11:25 AM

Thanks!!

Guessing it was a bit tedious to redo work you'd already done, but this is way easier to review

This revision is now accepted and ready to land.Oct 14 2022, 11:25 AM
Closed by commit rCOMMb2a0ce970e0a: [web] introduced ModalOverlay component (authored by ginsu). · Explain WhyOct 14 2022, 12:24 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMb2a0ce970e0a: [web] introduced ModalOverlay component.

Revision Contents
Changeset List

PathSize
web/
modals/
13 lines
54 lines
14 lines
36 lines

Diff 17559

View Options

web/modals/modal-overlay.css

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _debounce from 'lodash/debounce.js'; import _debounce from 'lodash/debounce.js';
import * as React from 'react'; import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
import { import {
threadHasPermission, threadHasPermission,
useSidebarExistsOrCanBeCreated, useSidebarExistsOrCanBeCreated,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { isComposableMessageType } from 'lib/types/message-types.js'; import { isComposableMessageType } from 'lib/types/message-types.js';
▲ Show 20 Lines • Show All 202 Lines • ▼ Show 20 Lines return React.useMemo(() => {
return { return {
actionButtonContent: buttonContent, actionButtonContent: buttonContent,
onClick: onClickTogglePin, onClick: onClickTogglePin,
label: isPinned ? 'Unpin' : 'Pin', label: isPinned ? 'Unpin' : 'Pin',
}; };
}, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]); }, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]);
} }
function useMessageEditAction(
item: ChatMessageInfoItem,
threadInfo: ThreadInfo,
): ?MessageTooltipAction {
const { messageInfo } = item;
const canEditMessage = useCanEditMessage(threadInfo, messageInfo);
return React.useMemo(() => {
if (!canEditMessage) {
return null;
}
const buttonContent = (
<SWMansionIcon icon="edit-1" size={18} disableFill={false} />
);
const onClickEdit = () => {
// TODO: Enter edit mode
};
return {
actionButtonContent: buttonContent,
onClick: onClickEdit,
label: 'Edit',
};
}, [canEditMessage]);
}
function useMessageTooltipActions( function useMessageTooltipActions(
item: ChatMessageInfoItem, item: ChatMessageInfoItem,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
): $ReadOnlyArray<MessageTooltipAction> { ): $ReadOnlyArray<MessageTooltipAction> {
const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo); const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo);
const replyAction = useMessageTooltipReplyAction(item, threadInfo); const replyAction = useMessageTooltipReplyAction(item, threadInfo);
const copyAction = useMessageCopyAction(item); const copyAction = useMessageCopyAction(item);
const reactAction = useMessageReactAction(item, threadInfo); const reactAction = useMessageReactAction(item, threadInfo);
const togglePinAction = useMessageTogglePinAction(item, threadInfo); const togglePinAction = useMessageTogglePinAction(item, threadInfo);
const editAction = useMessageEditAction(item, threadInfo);
return React.useMemo( return React.useMemo(
() => () =>
[ [
replyAction, replyAction,
sidebarAction, sidebarAction,
copyAction, copyAction,
reactAction, reactAction,
togglePinAction, togglePinAction,
editAction,
].filter(Boolean), ].filter(Boolean),
[replyAction, sidebarAction, copyAction, reactAction, togglePinAction], [
replyAction,
sidebarAction,
copyAction,
reactAction,
togglePinAction,
editAction,
],
); );
} }
type UseMessageTooltipArgs = { type UseMessageTooltipArgs = {
+availablePositions: $ReadOnlyArray<TooltipPosition>, +availablePositions: $ReadOnlyArray<TooltipPosition>,
+item: ChatMessageInfoItem, +item: ChatMessageInfoItem,
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
▲ Show 20 Lines • Show All 187 Lines • Show Last 20 Lines
View Options

web/modals/modal-overlay.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _debounce from 'lodash/debounce.js'; import _debounce from 'lodash/debounce.js';
import * as React from 'react'; import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
import { import {
threadHasPermission, threadHasPermission,
useSidebarExistsOrCanBeCreated, useSidebarExistsOrCanBeCreated,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { isComposableMessageType } from 'lib/types/message-types.js'; import { isComposableMessageType } from 'lib/types/message-types.js';
▲ Show 20 Lines • Show All 202 Lines • ▼ Show 20 Lines return React.useMemo(() => {
return { return {
actionButtonContent: buttonContent, actionButtonContent: buttonContent,
onClick: onClickTogglePin, onClick: onClickTogglePin,
label: isPinned ? 'Unpin' : 'Pin', label: isPinned ? 'Unpin' : 'Pin',
}; };
}, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]); }, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]);
} }
function useMessageEditAction(
item: ChatMessageInfoItem,
threadInfo: ThreadInfo,
): ?MessageTooltipAction {
const { messageInfo } = item;
const canEditMessage = useCanEditMessage(threadInfo, messageInfo);
return React.useMemo(() => {
if (!canEditMessage) {
return null;
}
const buttonContent = (
<SWMansionIcon icon="edit-1" size={18} disableFill={false} />
);
const onClickEdit = () => {
// TODO: Enter edit mode
};
return {
actionButtonContent: buttonContent,
onClick: onClickEdit,
label: 'Edit',
};
}, [canEditMessage]);
}
function useMessageTooltipActions( function useMessageTooltipActions(
item: ChatMessageInfoItem, item: ChatMessageInfoItem,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
): $ReadOnlyArray<MessageTooltipAction> { ): $ReadOnlyArray<MessageTooltipAction> {
const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo); const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo);
const replyAction = useMessageTooltipReplyAction(item, threadInfo); const replyAction = useMessageTooltipReplyAction(item, threadInfo);
const copyAction = useMessageCopyAction(item); const copyAction = useMessageCopyAction(item);
const reactAction = useMessageReactAction(item, threadInfo); const reactAction = useMessageReactAction(item, threadInfo);
const togglePinAction = useMessageTogglePinAction(item, threadInfo); const togglePinAction = useMessageTogglePinAction(item, threadInfo);
const editAction = useMessageEditAction(item, threadInfo);
return React.useMemo( return React.useMemo(
() => () =>
[ [
replyAction, replyAction,
sidebarAction, sidebarAction,
copyAction, copyAction,
reactAction, reactAction,
togglePinAction, togglePinAction,
editAction,
].filter(Boolean), ].filter(Boolean),
[replyAction, sidebarAction, copyAction, reactAction, togglePinAction], [
replyAction,
sidebarAction,
copyAction,
reactAction,
togglePinAction,
editAction,
],
); );
} }
type UseMessageTooltipArgs = { type UseMessageTooltipArgs = {
+availablePositions: $ReadOnlyArray<TooltipPosition>, +availablePositions: $ReadOnlyArray<TooltipPosition>,
+item: ChatMessageInfoItem, +item: ChatMessageInfoItem,
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
▲ Show 20 Lines • Show All 187 Lines • Show Last 20 Lines
View Options

web/modals/modal.css

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _debounce from 'lodash/debounce.js'; import _debounce from 'lodash/debounce.js';
import * as React from 'react'; import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
import { import {
threadHasPermission, threadHasPermission,
useSidebarExistsOrCanBeCreated, useSidebarExistsOrCanBeCreated,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { isComposableMessageType } from 'lib/types/message-types.js'; import { isComposableMessageType } from 'lib/types/message-types.js';
▲ Show 20 Lines • Show All 202 Lines • ▼ Show 20 Lines return React.useMemo(() => {
return { return {
actionButtonContent: buttonContent, actionButtonContent: buttonContent,
onClick: onClickTogglePin, onClick: onClickTogglePin,
label: isPinned ? 'Unpin' : 'Pin', label: isPinned ? 'Unpin' : 'Pin',
}; };
}, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]); }, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]);
} }
function useMessageEditAction(
item: ChatMessageInfoItem,
threadInfo: ThreadInfo,
): ?MessageTooltipAction {
const { messageInfo } = item;
const canEditMessage = useCanEditMessage(threadInfo, messageInfo);
return React.useMemo(() => {
if (!canEditMessage) {
return null;
}
const buttonContent = (
<SWMansionIcon icon="edit-1" size={18} disableFill={false} />
);
const onClickEdit = () => {
// TODO: Enter edit mode
};
return {
actionButtonContent: buttonContent,
onClick: onClickEdit,
label: 'Edit',
};
}, [canEditMessage]);
}
function useMessageTooltipActions( function useMessageTooltipActions(
item: ChatMessageInfoItem, item: ChatMessageInfoItem,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
): $ReadOnlyArray<MessageTooltipAction> { ): $ReadOnlyArray<MessageTooltipAction> {
const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo); const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo);
const replyAction = useMessageTooltipReplyAction(item, threadInfo); const replyAction = useMessageTooltipReplyAction(item, threadInfo);
const copyAction = useMessageCopyAction(item); const copyAction = useMessageCopyAction(item);
const reactAction = useMessageReactAction(item, threadInfo); const reactAction = useMessageReactAction(item, threadInfo);
const togglePinAction = useMessageTogglePinAction(item, threadInfo); const togglePinAction = useMessageTogglePinAction(item, threadInfo);
const editAction = useMessageEditAction(item, threadInfo);
return React.useMemo( return React.useMemo(
() => () =>
[ [
replyAction, replyAction,
sidebarAction, sidebarAction,
copyAction, copyAction,
reactAction, reactAction,
togglePinAction, togglePinAction,
editAction,
].filter(Boolean), ].filter(Boolean),
[replyAction, sidebarAction, copyAction, reactAction, togglePinAction], [
replyAction,
sidebarAction,
copyAction,
reactAction,
togglePinAction,
editAction,
],
); );
} }
type UseMessageTooltipArgs = { type UseMessageTooltipArgs = {
+availablePositions: $ReadOnlyArray<TooltipPosition>, +availablePositions: $ReadOnlyArray<TooltipPosition>,
+item: ChatMessageInfoItem, +item: ChatMessageInfoItem,
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
▲ Show 20 Lines • Show All 187 Lines • Show Last 20 Lines
View Options

web/modals/modal.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _debounce from 'lodash/debounce.js'; import _debounce from 'lodash/debounce.js';
import * as React from 'react'; import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
import { import {
threadHasPermission, threadHasPermission,
useSidebarExistsOrCanBeCreated, useSidebarExistsOrCanBeCreated,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { isComposableMessageType } from 'lib/types/message-types.js'; import { isComposableMessageType } from 'lib/types/message-types.js';
▲ Show 20 Lines • Show All 202 Lines • ▼ Show 20 Lines return React.useMemo(() => {
return { return {
actionButtonContent: buttonContent, actionButtonContent: buttonContent,
onClick: onClickTogglePin, onClick: onClickTogglePin,
label: isPinned ? 'Unpin' : 'Pin', label: isPinned ? 'Unpin' : 'Pin',
}; };
}, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]); }, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]);
} }
function useMessageEditAction(
item: ChatMessageInfoItem,
threadInfo: ThreadInfo,
): ?MessageTooltipAction {
const { messageInfo } = item;
const canEditMessage = useCanEditMessage(threadInfo, messageInfo);
return React.useMemo(() => {
if (!canEditMessage) {
return null;
}
const buttonContent = (
<SWMansionIcon icon="edit-1" size={18} disableFill={false} />
);
const onClickEdit = () => {
// TODO: Enter edit mode
};
return {
actionButtonContent: buttonContent,
onClick: onClickEdit,
label: 'Edit',
};
}, [canEditMessage]);
}
function useMessageTooltipActions( function useMessageTooltipActions(
item: ChatMessageInfoItem, item: ChatMessageInfoItem,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
): $ReadOnlyArray<MessageTooltipAction> { ): $ReadOnlyArray<MessageTooltipAction> {
const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo); const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo);
const replyAction = useMessageTooltipReplyAction(item, threadInfo); const replyAction = useMessageTooltipReplyAction(item, threadInfo);
const copyAction = useMessageCopyAction(item); const copyAction = useMessageCopyAction(item);
const reactAction = useMessageReactAction(item, threadInfo); const reactAction = useMessageReactAction(item, threadInfo);
const togglePinAction = useMessageTogglePinAction(item, threadInfo); const togglePinAction = useMessageTogglePinAction(item, threadInfo);
const editAction = useMessageEditAction(item, threadInfo);
return React.useMemo( return React.useMemo(
() => () =>
[ [
replyAction, replyAction,
sidebarAction, sidebarAction,
copyAction, copyAction,
reactAction, reactAction,
togglePinAction, togglePinAction,
editAction,
].filter(Boolean), ].filter(Boolean),
[replyAction, sidebarAction, copyAction, reactAction, togglePinAction], [
replyAction,
sidebarAction,
copyAction,
reactAction,
togglePinAction,
editAction,
],
); );
} }
type UseMessageTooltipArgs = { type UseMessageTooltipArgs = {
+availablePositions: $ReadOnlyArray<TooltipPosition>, +availablePositions: $ReadOnlyArray<TooltipPosition>,
+item: ChatMessageInfoItem, +item: ChatMessageInfoItem,
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
▲ Show 20 Lines • Show All 187 Lines • Show Last 20 Lines