From 4dbbada7281dddbbc9ce8ac2509a0e1375e81e6f Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 3 Apr 2023 14:09:05 +0200 Subject: [PATCH] feat: added notice banner component show notice when conversation is in legacy mode, extracted some UI components from the ConversationHeader, updated featureReleaseTimestamp --- _locales/en/messages.json | 1 + ts/components/NoticeBanner.tsx | 31 ++ .../conversation/ConversationHeader.tsx | 283 ------------------ .../conversation/SessionConversation.tsx | 12 +- .../header/ConversationHeader.tsx | 104 +++++++ .../header/ConversationHeaderItems.tsx | 115 +++++++ .../ConversationHeaderSelectionOverlay.tsx | 74 +++++ .../{ => header}/ConversationHeaderTitle.tsx | 16 +- ts/node/migration/sessionMigrations.ts | 3 +- ts/state/selectors/conversations.ts | 2 +- ts/types/LocalizerKeys.ts | 1 + ts/util/releaseFeature.ts | 2 +- 12 files changed, 349 insertions(+), 295 deletions(-) create mode 100644 ts/components/NoticeBanner.tsx delete mode 100644 ts/components/conversation/ConversationHeader.tsx create mode 100644 ts/components/conversation/header/ConversationHeader.tsx create mode 100644 ts/components/conversation/header/ConversationHeaderItems.tsx create mode 100644 ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx rename ts/components/conversation/{ => header}/ConversationHeaderTitle.tsx (93%) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3a9623b89..93be78ff3 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -211,6 +211,7 @@ "timerOption_2_weeks_abbreviated": "2w", "disappearingMessages": "Disappearing messages", "disappearingMessagesSubtitle": "This setting applies to everyone in this conversation", + "disappearingMessagesModeOutdated": "$name$ is using an outdated client. Disappearing messages may not work as expected.", "disappearingMessagesModeLabel": "Delete Type", "disappearingMessagesModeOff": "Off", "disappearingMessagesModeAfterRead": "Disappear After Read", diff --git a/ts/components/NoticeBanner.tsx b/ts/components/NoticeBanner.tsx new file mode 100644 index 000000000..b309d87b9 --- /dev/null +++ b/ts/components/NoticeBanner.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Flex } from './basic/Flex'; + +const StyledNoticeBanner = styled(Flex)` + background-color: var(--primary-color); + color: var(--background-primary-color); + min-height: 30px; + font-size: var(--font-size-lg); + padding: 0 var(--margins-sm); + text-align: center; +`; + +type NoticeBannerProps = { + text: string; +}; + +export const NoticeBanner = (props: NoticeBannerProps) => { + const { text } = props; + + return ( + + {text} + + ); +}; diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx deleted file mode 100644 index 20e47b40f..000000000 --- a/ts/components/conversation/ConversationHeader.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import React from 'react'; - -import { Avatar, AvatarSize } from '../avatar/Avatar'; - -import { contextMenu } from 'react-contexify'; -import styled from 'styled-components'; -import { ConversationNotificationSettingType } from '../../models/conversationAttributes'; -import { - getIsSelectedActive, - getIsSelectedBlocked, - getIsSelectedNoteToSelf, - getIsSelectedPrivate, - getSelectedConversationIsPublic, - getSelectedConversationKey, - getSelectedMessageIds, - isMessageDetailView, - isMessageSelectionMode, -} from '../../state/selectors/conversations'; -import { useDispatch, useSelector } from 'react-redux'; - -import { - deleteMessagesById, - deleteMessagesByIdForEveryone, -} from '../../interactions/conversations/unsendingInteractions'; -import { - closeMessageDetailsView, - openRightPanel, - resetSelectedMessageIds, -} from '../../state/ducks/conversations'; -import { callRecipient } from '../../interactions/conversationInteractions'; -import { getHasIncomingCall, getHasOngoingCall } from '../../state/selectors/call'; -import { useIsRequest } from '../../hooks/useParamSelector'; -import { - SessionButton, - SessionButtonColor, - SessionButtonShape, - SessionButtonType, -} from '../basic/SessionButton'; -import { SessionIconButton } from '../icon'; -import { ConversationHeaderMenu } from '../menu/ConversationHeaderMenu'; -import { Flex } from '../basic/Flex'; -import { ConversationHeaderTitle } from './ConversationHeaderTitle'; - -export interface TimerOption { - name: string; - value: number; -} - -export type ConversationHeaderProps = { - conversationKey: string; - name?: string; - - profileName?: string; - avatarPath: string | null; - - isMe: boolean; - isGroup: boolean; - isPrivate: boolean; - isPublic: boolean; - weAreAdmin: boolean; - - // We might not always have the full list of members, - // e.g. for open groups where we could have thousands - // of members. We'll keep this for now (for closed chats) - members: Array; - - // not equal members.length (see above) - subscriberCount?: number; - - expirationSettingName?: string; - currentNotificationSetting: ConversationNotificationSettingType; - hasNickname: boolean; - - isBlocked: boolean; - - isKickedFromGroup: boolean; - left: boolean; -}; - -const SelectionOverlay = () => { - const selectedMessageIds = useSelector(getSelectedMessageIds); - const selectedConversationKey = useSelector(getSelectedConversationKey); - const isPublic = useSelector(getSelectedConversationIsPublic); - const dispatch = useDispatch(); - - const { i18n } = window; - - function onCloseOverlay() { - dispatch(resetSelectedMessageIds()); - } - - function onDeleteSelectedMessages() { - if (selectedConversationKey) { - void deleteMessagesById(selectedMessageIds, selectedConversationKey); - } - } - function onDeleteSelectedMessagesForEveryone() { - if (selectedConversationKey) { - void deleteMessagesByIdForEveryone(selectedMessageIds, selectedConversationKey); - } - } - - const isOnlyServerDeletable = isPublic; - const deleteMessageButtonText = i18n('delete'); - const deleteForEveryoneMessageButtonText = i18n('deleteForEveryone'); - - return ( -
-
- -
- -
- {!isOnlyServerDeletable && ( - - )} - -
-
- ); -}; - -const TripleDotContainer = styled.div` - user-select: none; - flex-grow: 0; - flex-shrink: 0; -`; - -const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) => { - const { showBackButton } = props; - if (showBackButton) { - return null; - } - return ( - { - contextMenu.show({ - id: props.triggerId, - event: e, - }); - }} - data-testid="three-dots-conversation-options" - > - - - ); -}; - -const AvatarHeader = (props: { - pubkey: string; - showBackButton: boolean; - onAvatarClick?: (pubkey: string) => void; -}) => { - const { pubkey, onAvatarClick, showBackButton } = props; - - return ( - - { - // do not allow right panel to appear if another button is shown on the SessionConversation - if (onAvatarClick && !showBackButton) { - onAvatarClick(pubkey); - } - }} - pubkey={pubkey} - dataTestId="conversation-options-avatar" - /> - - ); -}; - -const BackButton = (props: { onGoBack: () => void; showBackButton: boolean }) => { - const { onGoBack, showBackButton } = props; - if (!showBackButton) { - return null; - } - - return ( - - ); -}; - -const CallButton = () => { - const isPrivate = useSelector(getIsSelectedPrivate); - const isBlocked = useSelector(getIsSelectedBlocked); - const activeAt = useSelector(getIsSelectedActive); - const isMe = useSelector(getIsSelectedNoteToSelf); - const selectedConvoKey = useSelector(getSelectedConversationKey); - - const hasIncomingCall = useSelector(getHasIncomingCall); - const hasOngoingCall = useSelector(getHasOngoingCall); - const canCall = !(hasIncomingCall || hasOngoingCall); - - const isRequest = useIsRequest(selectedConvoKey); - - if (!isPrivate || isMe || !selectedConvoKey || isBlocked || !activeAt || isRequest) { - return null; - } - - return ( - { - void callRecipient(selectedConvoKey, canCall); - }} - /> - ); -}; - -export const ConversationHeaderWithDetails = () => { - const isSelectionMode = useSelector(isMessageSelectionMode); - const isMessageDetailOpened = useSelector(isMessageDetailView); - const selectedConvoKey = useSelector(getSelectedConversationKey); - const dispatch = useDispatch(); - - if (!selectedConvoKey) { - return null; - } - - const triggerId = 'conversation-header'; - - return ( -
-
- { - dispatch(closeMessageDetailsView()); - }} - showBackButton={isMessageDetailOpened} - /> - - - - {!isSelectionMode && ( - - - { - dispatch(openRightPanel()); - }} - pubkey={selectedConvoKey} - showBackButton={isMessageDetailOpened} - /> - - )} - - -
- - {isSelectionMode && } -
- ); -}; diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx index 6d8b6bf9c..720098561 100644 --- a/ts/components/conversation/SessionConversation.tsx +++ b/ts/components/conversation/SessionConversation.tsx @@ -40,7 +40,7 @@ import { AttachmentTypeWithPath } from '../../types/Attachment'; import { arrayBufferToObjectURL, AttachmentUtil, GoogleChrome } from '../../util'; import { SessionButtonColor } from '../basic/SessionButton'; import { MessageView } from '../MainViewController'; -import { ConversationHeaderWithDetails } from './ConversationHeader'; +import { ConversationHeaderWithDetails } from './header/ConversationHeader'; import { MessageDetail } from './message/message-item/MessageDetail'; import { makeImageThumbnailBuffer, @@ -58,6 +58,7 @@ import { markAllReadByConvoId } from '../../interactions/conversationInteraction import { SessionSpinner } from '../basic/SessionSpinner'; import styled from 'styled-components'; import { RightPanel } from './right-panel/RightPanel'; +import { NoticeBanner } from '../NoticeBanner'; // tslint:disable: jsx-curly-spacing interface State { @@ -254,6 +255,15 @@ export class SessionConversation extends React.Component {
+ {selectedConversation.expirationType === 'legacy' && ( + + )}
{isSelectedConvoInitialLoadingInProgress ? ( diff --git a/ts/components/conversation/header/ConversationHeader.tsx b/ts/components/conversation/header/ConversationHeader.tsx new file mode 100644 index 000000000..a7946a529 --- /dev/null +++ b/ts/components/conversation/header/ConversationHeader.tsx @@ -0,0 +1,104 @@ +import React from 'react'; + +import { ConversationNotificationSettingType } from '../../../models/conversationAttributes'; +import { + getSelectedConversationKey, + isMessageDetailView, + isMessageSelectionMode, +} from '../../../state/selectors/conversations'; +import { useDispatch, useSelector } from 'react-redux'; + +import { closeMessageDetailsView, openRightPanel } from '../../../state/ducks/conversations'; + +import { ConversationHeaderMenu } from '../../menu/ConversationHeaderMenu'; +import { Flex } from '../../basic/Flex'; +import { ConversationHeaderTitle } from './ConversationHeaderTitle'; +import { AvatarHeader, BackButton, CallButton, TripleDotsMenu } from './ConversationHeaderItems'; +import { SelectionOverlay } from './ConversationHeaderSelectionOverlay'; + +export interface TimerOption { + name: string; + value: number; +} + +export type ConversationHeaderProps = { + conversationKey: string; + name?: string; + + profileName?: string; + avatarPath: string | null; + + isMe: boolean; + isGroup: boolean; + isPrivate: boolean; + isPublic: boolean; + weAreAdmin: boolean; + + // We might not always have the full list of members, + // e.g. for open groups where we could have thousands + // of members. We'll keep this for now (for closed chats) + members: Array; + + // not equal members.length (see above) + subscriberCount?: number; + + expirationSettingName?: string; + currentNotificationSetting: ConversationNotificationSettingType; + hasNickname: boolean; + + isBlocked: boolean; + + isKickedFromGroup: boolean; + left: boolean; +}; + +export const ConversationHeaderWithDetails = () => { + const isSelectionMode = useSelector(isMessageSelectionMode); + const isMessageDetailOpened = useSelector(isMessageDetailView); + const selectedConvoKey = useSelector(getSelectedConversationKey); + const dispatch = useDispatch(); + + if (!selectedConvoKey) { + return null; + } + + const triggerId = 'conversation-header'; + + return ( +
+
+ { + dispatch(closeMessageDetailsView()); + }} + showBackButton={isMessageDetailOpened} + /> + + + + {!isSelectionMode && ( + + + { + dispatch(openRightPanel()); + }} + pubkey={selectedConvoKey} + showBackButton={isMessageDetailOpened} + /> + + )} + + +
+ + {isSelectionMode && } +
+ ); +}; diff --git a/ts/components/conversation/header/ConversationHeaderItems.tsx b/ts/components/conversation/header/ConversationHeaderItems.tsx new file mode 100644 index 000000000..be88d2844 --- /dev/null +++ b/ts/components/conversation/header/ConversationHeaderItems.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { contextMenu } from 'react-contexify'; +import { useSelector } from 'react-redux'; +import styled from 'styled-components'; +import { useIsRequest } from '../../../hooks/useParamSelector'; +import { callRecipient } from '../../../interactions/conversationInteractions'; +import { getHasIncomingCall, getHasOngoingCall } from '../../../state/selectors/call'; +import { + getIsSelectedActive, + getIsSelectedBlocked, + getIsSelectedNoteToSelf, + getIsSelectedPrivate, + getSelectedConversationKey, +} from '../../../state/selectors/conversations'; +import { Avatar, AvatarSize } from '../../avatar/Avatar'; +import { SessionIconButton } from '../../icon'; + +const TripleDotContainer = styled.div` + user-select: none; + flex-grow: 0; + flex-shrink: 0; +`; + +export const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) => { + const { showBackButton } = props; + if (showBackButton) { + return null; + } + return ( + { + contextMenu.show({ + id: props.triggerId, + event: e, + }); + }} + data-testid="three-dots-conversation-options" + > + + + ); +}; + +export const AvatarHeader = (props: { + pubkey: string; + showBackButton: boolean; + onAvatarClick?: (pubkey: string) => void; +}) => { + const { pubkey, onAvatarClick, showBackButton } = props; + + return ( + + { + // do not allow right panel to appear if another button is shown on the SessionConversation + if (onAvatarClick && !showBackButton) { + onAvatarClick(pubkey); + } + }} + pubkey={pubkey} + dataTestId="conversation-options-avatar" + /> + + ); +}; + +export const BackButton = (props: { onGoBack: () => void; showBackButton: boolean }) => { + const { onGoBack, showBackButton } = props; + if (!showBackButton) { + return null; + } + + return ( + + ); +}; + +export const CallButton = () => { + const isPrivate = useSelector(getIsSelectedPrivate); + const isBlocked = useSelector(getIsSelectedBlocked); + const activeAt = useSelector(getIsSelectedActive); + const isMe = useSelector(getIsSelectedNoteToSelf); + const selectedConvoKey = useSelector(getSelectedConversationKey); + + const hasIncomingCall = useSelector(getHasIncomingCall); + const hasOngoingCall = useSelector(getHasOngoingCall); + const canCall = !(hasIncomingCall || hasOngoingCall); + + const isRequest = useIsRequest(selectedConvoKey); + + if (!isPrivate || isMe || !selectedConvoKey || isBlocked || !activeAt || isRequest) { + return null; + } + + return ( + { + void callRecipient(selectedConvoKey, canCall); + }} + /> + ); +}; diff --git a/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx b/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx new file mode 100644 index 000000000..97a4e2f14 --- /dev/null +++ b/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { + deleteMessagesById, + deleteMessagesByIdForEveryone, +} from '../../../interactions/conversations/unsendingInteractions'; +import { resetSelectedMessageIds } from '../../../state/ducks/conversations'; +import { + getSelectedConversationIsPublic, + getSelectedConversationKey, + getSelectedMessageIds, +} from '../../../state/selectors/conversations'; +import { + SessionButton, + SessionButtonColor, + SessionButtonShape, + SessionButtonType, +} from '../../basic/SessionButton'; +import { SessionIconButton } from '../../icon'; + +export const SelectionOverlay = () => { + const selectedMessageIds = useSelector(getSelectedMessageIds); + const selectedConversationKey = useSelector(getSelectedConversationKey); + const isPublic = useSelector(getSelectedConversationIsPublic); + const dispatch = useDispatch(); + + const { i18n } = window; + + function onCloseOverlay() { + dispatch(resetSelectedMessageIds()); + } + + function onDeleteSelectedMessages() { + if (selectedConversationKey) { + void deleteMessagesById(selectedMessageIds, selectedConversationKey); + } + } + function onDeleteSelectedMessagesForEveryone() { + if (selectedConversationKey) { + void deleteMessagesByIdForEveryone(selectedMessageIds, selectedConversationKey); + } + } + + const isOnlyServerDeletable = isPublic; + const deleteMessageButtonText = i18n('delete'); + const deleteForEveryoneMessageButtonText = i18n('deleteForEveryone'); + + return ( +
+
+ +
+ +
+ {!isOnlyServerDeletable && ( + + )} + +
+
+ ); +}; diff --git a/ts/components/conversation/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx similarity index 93% rename from ts/components/conversation/ConversationHeaderTitle.tsx rename to ts/components/conversation/header/ConversationHeaderTitle.tsx index 5e037693f..4fa0d0de3 100644 --- a/ts/components/conversation/ConversationHeaderTitle.tsx +++ b/ts/components/conversation/header/ConversationHeaderTitle.tsx @@ -1,21 +1,21 @@ import React, { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled, { CSSProperties } from 'styled-components'; -import { useConversationUsername } from '../../hooks/useParamSelector'; -import { ConversationNotificationSettingType } from '../../models/conversationAttributes'; -import { closeRightPanel, openRightPanel } from '../../state/ducks/conversations'; -import { setRightOverlayMode } from '../../state/ducks/section'; +import { useConversationUsername } from '../../../hooks/useParamSelector'; +import { ConversationNotificationSettingType } from '../../../models/conversationAttributes'; +import { closeRightPanel, openRightPanel } from '../../../state/ducks/conversations'; +import { setRightOverlayMode } from '../../../state/ducks/section'; import { getConversationHeaderTitleProps, getCurrentNotificationSettingText, isRightPanelShowing, -} from '../../state/selectors/conversations'; +} from '../../../state/selectors/conversations'; import { DisappearingMessageConversationType, ExpirationTimerOptions, -} from '../../util/expiringMessages'; -import { Flex } from '../basic/Flex'; -import { SessionIconButton } from '../icon'; +} from '../../../util/expiringMessages'; +import { Flex } from '../../basic/Flex'; +import { SessionIconButton } from '../../icon'; export const StyledSubtitleContainer = styled.div` display: flex; diff --git a/ts/node/migration/sessionMigrations.ts b/ts/node/migration/sessionMigrations.ts index a59307f4b..a04b6f841 100644 --- a/ts/node/migration/sessionMigrations.ts +++ b/ts/node/migration/sessionMigrations.ts @@ -1225,7 +1225,8 @@ function updateToSessionSchemaVersion30(currentVersion: number, db: BetterSqlite // same value in ts/util/releaseFeature.ts but we cannot import since window doesn't exist yet. // TODO update to agreed value between platforms - const featureReleaseTimestamp = 1676851200000; // unix 13/02/2023 + const featureReleaseTimestamp = 1677574800000; // unix 28/02/2023 09:00 + // support disppearing messages legacy mode until after the platform agreed timestamp if (Date.now() < featureReleaseTimestamp) { db.prepare( diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index dd00ca10b..c8ad590ff 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -37,7 +37,7 @@ import { ConversationTypeEnum } from '../../models/conversationAttributes'; import { MessageReactsSelectorProps } from '../../components/conversation/message/message-content/MessageReactions'; import { filter, isEmpty, pick, sortBy } from 'lodash'; import { DisappearingMessageConversationSetting } from '../../util/expiringMessages'; -import { ConversationHeaderTitleProps } from '../../components/conversation/ConversationHeaderTitle'; +import { ConversationHeaderTitleProps } from '../../components/conversation/header/ConversationHeaderTitle'; export const getConversations = (state: StateType): ConversationsStateType => state.conversations; diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index f84fc5600..b604c1633 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -211,6 +211,7 @@ export type LocalizerKeys = | 'timerOption_2_weeks_abbreviated' | 'disappearingMessages' | 'disappearingMessagesSubtitle' + | 'disappearingMessagesModeOutdated' | 'disappearingMessagesModeLabel' | 'disappearingMessagesModeOff' | 'disappearingMessagesModeAfterRead' diff --git a/ts/util/releaseFeature.ts b/ts/util/releaseFeature.ts index 385d989a6..dab877784 100644 --- a/ts/util/releaseFeature.ts +++ b/ts/util/releaseFeature.ts @@ -1,7 +1,7 @@ import { Data } from '../data/data'; // TODO update to agreed value between platforms -const featureReleaseTimestamp = 1676851200000; // unix 13/02/2023 +const featureReleaseTimestamp = 1677574800000; // unix 28/02/2023 09:00 // const featureReleaseTimestamp = 1676608378; // test value let isFeatureReleased: boolean | undefined;