Merge pull request #58 from Bilb/fix-bring-back-msg-ctx-menu-from-the-dead

fix: bring back msg context menu even when legacy gr expired

ts/components/conversation/SessionConversation.tsx

@@ -68,7 +68,7 @@ import {
   useSelectedIsPublic,
   useSelectedWeAreAdmin,
 } from '../../state/selectors/selectedConversation';
-import { useAreLegacyGroupsDeprecatedYet } from '../../state/selectors/releasedFeatures';
+import { useSelectedDisableLegacyGroupDeprecatedActions } from '../../hooks/useRefreshReleasedFeaturesTimestamp';
 
 const DEFAULT_JPEG_QUALITY = 0.85;
 
@@ -670,7 +670,7 @@ function OutdatedLegacyGroupBanner() {
   const selectedConversationKey = useSelectedConversationKey();
   const isPrivate = useSelectedIsPrivate();
   const isPublic = useSelectedIsPublic();
-  const deprecatedLegacyGroups = useAreLegacyGroupsDeprecatedYet();
+  const deprecatedLegacyGroups = useSelectedDisableLegacyGroupDeprecatedActions();
 
   const isLegacyGroup =
     !isPrivate && !isPublic && selectedConversationKey && selectedConversationKey.startsWith('05');

ts/components/conversation/message/message-content/MessageContextMenu.tsx

@@ -54,6 +54,7 @@ import { WithMessageId } from '../../../../session/types/with';
 import { DeleteItem } from '../../../menu/items/DeleteMessage/DeleteMessageMenuItem';
 import { RetryItem } from '../../../menu/items/RetrySend/RetrySendMenuItem';
 import { showCopyAccountIdAction } from '../../../menu/items/CopyAccountId/guard';
+import { useSelectedDisableLegacyGroupDeprecatedActions } from '../../../../hooks/useRefreshReleasedFeaturesTimestamp';
 
 export type MessageContextMenuSelectorProps = Pick<
   MessageRenderingProps,
@@ -165,6 +166,7 @@ export const MessageContextMenu = (props: Props) => {
   const { messageId, contextMenuId, enableReactions } = props;
   const dispatch = useDispatch();
   const { hideAll } = useContextMenu();
+  const legacyGroupIsDeprecated = useSelectedDisableLegacyGroupDeprecatedActions();
 
   const isSelectedBlocked = useSelectedIsBlocked();
   const convoId = useSelectedConversationKey();
@@ -314,6 +316,38 @@ export const MessageContextMenu = (props: Props) => {
     return null;
   }
 
+  if (legacyGroupIsDeprecated) {
+    return (
+      <StyledMessageContextMenu ref={contextMenuRef}>
+        <SessionContextMenuContainer>
+          <Menu
+            id={contextMenuId}
+            onVisibilityChange={onVisibilityChange}
+            animation={getMenuAnimation()}
+          >
+            {attachments?.length && attachments.every(m => !m.pending && m.path) ? (
+              <ItemWithDataTestId onClick={saveAttachment}>
+                {window.i18n('save')}
+              </ItemWithDataTestId>
+            ) : null}
+            <ItemWithDataTestId onClick={copyText}>{window.i18n('copy')}</ItemWithDataTestId>
+            <ItemWithDataTestId
+              onClick={() => {
+                void showMessageInfoOverlay({ messageId, dispatch });
+              }}
+            >
+              <Localizer token="info" />
+            </ItemWithDataTestId>
+            {/* this is a message in the view, so always private */}
+            {sender && showCopyAccountIdAction({ isPrivate: true, pubkey: sender }) ? (
+              <CopyAccountIdMenuItem pubkey={sender} />
+            ) : null}
+          </Menu>
+        </SessionContextMenuContainer>
+      </StyledMessageContextMenu>
+    );
+  }
+
   return (
     <StyledMessageContextMenu ref={contextMenuRef}>
       {enableReactions && showEmojiPanel && (

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -13,7 +13,6 @@ import { getGenericReadableMessageSelectorProps } from '../../../../state/select
 import { MessageContentWithStatuses } from '../message-content/MessageContentWithStatus';
 import { StyledMessageReactionsContainer } from '../message-content/MessageReactions';
 import { useIsMessageSelectionMode } from '../../../../state/selectors/selectedConversation';
-import { useSelectedDisableLegacyGroupDeprecatedActions } from '../../../../hooks/useRefreshReleasedFeaturesTimestamp';
 
 export type GenericReadableMessageSelectorProps = Pick<
   MessageRenderingProps,
@@ -66,7 +65,6 @@ export const GenericReadableMessage = (props: Props) => {
   const { ctxMenuID, messageId } = props;
 
   const [enableReactions, setEnableReactions] = useState(true);
-  const legacyGroupIsDeprecated = useSelectedDisableLegacyGroupDeprecatedActions();
 
   const msgProps = useSelector((state: StateType) =>
     getGenericReadableMessageSelectorProps(state, props.messageId)
@@ -85,9 +83,6 @@ export const GenericReadableMessage = (props: Props) => {
 
   const handleContextMenu = useCallback(
     (e: MouseEvent<HTMLElement>) => {
-      if (legacyGroupIsDeprecated) {
-        return;
-      }
       // this is quite dirty but considering that we want the context menu of the message to show on click on the attachment
       // and the context menu save attachment item to save the right attachment I did not find a better way for now.
 
@@ -100,7 +95,6 @@ export const GenericReadableMessage = (props: Props) => {
         isString(attachmentIndexStr) && !isNil(toNumber(attachmentIndexStr))
           ? toNumber(attachmentIndexStr)
           : 0;
-
       if (enableContextMenu) {
         contextMenu.hideAll();
         contextMenu.show({
@@ -113,7 +107,7 @@ export const GenericReadableMessage = (props: Props) => {
       }
       setIsRightClicked(enableContextMenu);
     },
-    [ctxMenuID, multiSelectMode, msgProps?.isKickedFromGroup, legacyGroupIsDeprecated]
+    [ctxMenuID, multiSelectMode, msgProps?.isKickedFromGroup]
   );
 
   useEffect(() => {

ts/components/conversation/message/message-item/Message.tsx

@@ -10,6 +10,7 @@ type Props = {
 };
 
 export const Message = (props: Props) => {
+  // FIXME this should probably just be something static per message.
   const ctxMenuID = `ctx-menu-message-${uuidv4()}`;
 
   return <GenericReadableMessage ctxMenuID={ctxMenuID} messageId={props.messageId} />;

ts/components/conversation/message/reactions/Reaction.tsx

@@ -81,7 +81,6 @@ export const Reaction = (props: ReactionProps) => {
 
   const rightOverlayMode = useRightOverlayMode();
   const areDeprecatedLegacyGroupDisabled = useSelectedDisableLegacyGroupDeprecatedActions();
-  const legacyGroupDeprecated = useSelectedDisableLegacyGroupDeprecatedActions();
   const isMessageSelection = useIsMessageSelectionMode();
   const reactionsMap = (reactions && Object.fromEntries(reactions)) || {};
   const senders = reactionsMap[emoji]?.senders || [];
@@ -110,7 +109,7 @@ export const Reaction = (props: ReactionProps) => {
   const handleReactionClick = () => {
     if (!isMessageSelection) {
       // Note: disable emoji clicks if the legacy group is deprecated (group is readonly)
-      if (onClick && !legacyGroupDeprecated) {
+      if (onClick && !areDeprecatedLegacyGroupDisabled) {
         onClick(emoji);
       }
     }

ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx

@@ -52,6 +52,7 @@ import { AttachmentInfo, MessageInfo } from './components';
 import { AttachmentCarousel } from './components/AttachmentCarousel';
 import { ToastUtils } from '../../../../../session/utils';
 import { showCopyAccountIdAction } from '../../../../menu/items/CopyAccountId/guard';
+import { useSelectedDisableLegacyGroupDeprecatedActions } from '../../../../../hooks/useRefreshReleasedFeaturesTimestamp';
 
 // NOTE we override the default max-widths when in the detail isDetailView
 const StyledMessageBody = styled.div`
@@ -196,6 +197,9 @@ type WithMessageIdOpt = { messageId: string };
  */
 function CopyMessageBodyButton({ messageId }: WithMessageIdOpt) {
   const messageBody = useMessageBody(messageId);
+  if (!messageBody) {
+    return null;
+  }
   return (
     <PanelIconButton
       text={window.i18n('copy')}
@@ -269,6 +273,7 @@ export const OverlayMessageInfo = () => {
   const timestamp = useMessageTimestamp(messageId);
   const serverTimestamp = useMessageServerTimestamp(messageId);
   const sender = useMessageSender(messageId);
+  const legacyGroupIsDeprecated = useSelectedDisableLegacyGroupDeprecatedActions();
 
   // we close the right panel when switching conversation so the convoId of that message is always the selectedConversationKey
   // is always the currently selected conversation
@@ -363,9 +368,9 @@ export const OverlayMessageInfo = () => {
           <PanelButtonGroup style={{ margin: '0' }}>
             {/* CopyMessageBodyButton is always shown so the PanelButtonGroup always has at least one item */}
             <CopyMessageBodyButton messageId={messageId} />
-            <ReplyToMessageButton messageId={messageId} />
+            {!legacyGroupIsDeprecated && <ReplyToMessageButton messageId={messageId} />}
             <CopySenderSessionId messageId={messageId} />
-            {hasErrors && direction === 'outgoing' && (
+            {hasErrors && !legacyGroupIsDeprecated && direction === 'outgoing' && (
               <PanelIconButton
                 text={window.i18n('resend')}
                 iconType="resend"
@@ -395,7 +400,7 @@ export const OverlayMessageInfo = () => {
                 }}
               />
             )}
-            {isDeletable && (
+            {isDeletable && !legacyGroupIsDeprecated && (
               <PanelIconButton
                 text={window.i18n('delete')}
                 iconType="delete"

ts/interactions/messageInteractions.ts

@@ -59,9 +59,11 @@ export function unbanUser(userToUnBan: string, conversationId: string) {
 }
 
 export function copyBodyToClipboard(body?: string | null) {
-  window.clipboard.writeText(body);
+  if (body) {
+    window.clipboard.writeText(body);
 
-  ToastUtils.pushCopiedToClipBoard();
+    ToastUtils.pushCopiedToClipBoard();
+  }
 }
 
 export async function removeSenderFromModerator(sender: string, convoId: string) {

ts/state/selectors/releasedFeatures.ts

@@ -1,4 +1,3 @@
-import { useSelector } from 'react-redux';
 import { NetworkTime } from '../../util/NetworkTime';
 import { LEGACY_GROUP_DEPRECATED_TIMESTAMP_MS } from '../ducks/releasedFeatures';
 
@@ -14,7 +13,3 @@ export function areLegacyGroupsDeprecatedYetOutsideRedux() {
   }
   return areLegacyGroupsDeprecatedYet();
 }
-
-export function useAreLegacyGroupsDeprecatedYet() {
-  return useSelector(areLegacyGroupsDeprecatedYet);
-}