jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add badges to safety number change dialog

This commit is contained in:
Evan Hahn 2021-11-17 15:58:34 -06:00 committed by GitHub
parent 42b45a14b7
commit c0444f66a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 82 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ts/components/App.tsx
View File

@ -26,6 +26,7 @@ export const App = ({
cancelMessagesPendingConversationVerification,
conversationsStoppingMessageSendBecauseOfVerification,
hasInitialLoadCompleted,
getPreferredBadge,
i18n,
isCustomizingPreferredReactions,
numberOfMessagesPendingBecauseOfVerification,
@ -52,6 +53,7 @@ export const App = ({
conversationsStoppingMessageSendBecauseOfVerification
}
hasInitialLoadCompleted={hasInitialLoadCompleted}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
isCustomizingPreferredReactions={isCustomizingPreferredReactions}
numberOfMessagesPendingBecauseOfVerification={
@ -61,6 +63,7 @@ export const App = ({
renderCustomizingPreferredReactionsModal
}
renderSafetyNumber={renderSafetyNumber}
theme={theme}
verifyConversationsStoppingMessageSend={
verifyConversationsStoppingMessageSend
}

3
ts/components/CallManager.stories.tsx
View File

@ -23,6 +23,7 @@ import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGr
import { setupI18n } from '../util/setupI18n';
import type { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer';
import enMessages from '../../_locales/en/messages.json';
import { ThemeType } from '../types/Util';
const i18n = setupI18n('en', enMessages);
@ -67,6 +68,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
declineCall: action('decline-call'),
getGroupCallVideoFrameSource: (_: string, demuxId: number) =>
fakeGetGroupCallVideoFrameSource(demuxId),
getPreferredBadge: () => undefined,
getPresentingSources: action('get-presenting-sources'),
hangUp: action('hang-up'),
i18n,
@ -98,6 +100,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
setOutgoingRing: action('set-outgoing-ring'),
startCall: action('start-call'),
stopRingtone: action('stop-ringtone'),
theme: ThemeType.light,
toggleParticipants: action('toggle-participants'),
togglePip: action('toggle-pip'),
toggleScreenRecordingPermissionsDialog: action(

9
ts/components/CallManager.tsx
View File

@ -26,6 +26,7 @@ import {
GroupCallJoinState,
} from '../types/Calling';
import type { ConversationType } from '../state/ducks/conversations';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type {
AcceptCallType,
CancelCallType,
@ -39,7 +40,7 @@ import type {
SetRendererCanvasType,
StartCallType,
} from '../state/ducks/calling';
import type { LocalizerType } from '../types/Util';
import type { LocalizerType, ThemeType } from '../types/Util';
import type { UUIDStringType } from '../types/UUID';
import { missingCaseError } from '../util/missingCaseError';
@ -58,6 +59,7 @@ export type PropsType = {
conversationId: string,
demuxId: number
) => VideoFrameSource;
getPreferredBadge: PreferredBadgeSelectorType;
getPresentingSources: () => void;
incomingCall?:
| {
@ -96,6 +98,7 @@ export type PropsType = {
setRendererCanvas: (_: SetRendererCanvasType) => void;
stopRingtone: () => unknown;
hangUp: (_: HangUpType) => void;
theme: ThemeType;
togglePip: () => void;
toggleScreenRecordingPermissionsDialog: () => unknown;
toggleSettings: () => void;
@ -116,6 +119,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
isGroupCallOutboundRingEnabled,
keyChangeOk,
getGroupCallVideoFrameSource,
getPreferredBadge,
getPresentingSources,
me,
openSystemPreferencesAction,
@ -129,6 +133,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
setRendererCanvas,
setOutgoingRing,
startCall,
theme,
toggleParticipants,
togglePip,
toggleScreenRecordingPermissionsDialog,
@ -343,6 +348,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
<SafetyNumberChangeDialog
confirmText={i18n('continueCall')}
contacts={activeCall.conversationsWithSafetyNumberChanges}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
onCancel={() => {
hangUp({ conversationId: activeCall.conversation.id });
@ -351,6 +357,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
keyChangeOk({ conversationId: activeCall.conversation.id });
}}
renderSafetyNumber={renderSafetyNumberViewer}
theme={theme}
/>
) : null}
</>

9
ts/components/Inbox.tsx
View File

@ -7,7 +7,8 @@ import type * as Backbone from 'backbone';
import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
import type { ConversationType } from '../state/ducks/conversations';
import type { LocalizerType } from '../types/Util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { LocalizerType, ThemeType } from '../types/Util';
type InboxViewType = Backbone.View & {
onEmpty?: () => void;
@ -22,11 +23,13 @@ export type PropsType = {
cancelMessagesPendingConversationVerification: () => void;
conversationsStoppingMessageSendBecauseOfVerification: Array<ConversationType>;
hasInitialLoadCompleted: boolean;
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
isCustomizingPreferredReactions: boolean;
numberOfMessagesPendingBecauseOfVerification: number;
renderCustomizingPreferredReactionsModal: () => JSX.Element;
renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
theme: ThemeType;
verifyConversationsStoppingMessageSend: () => void;
};
@ -34,11 +37,13 @@ export const Inbox = ({
cancelMessagesPendingConversationVerification,
conversationsStoppingMessageSendBecauseOfVerification,
hasInitialLoadCompleted,
getPreferredBadge,
i18n,
isCustomizingPreferredReactions,
numberOfMessagesPendingBecauseOfVerification,
renderCustomizingPreferredReactionsModal,
renderSafetyNumber,
theme,
verifyConversationsStoppingMessageSend,
}: PropsType): JSX.Element => {
const hostRef = useRef<HTMLDivElement | null>(null);
@ -82,10 +87,12 @@ export const Inbox = ({
<SafetyNumberChangeDialog
confirmText={confirmText}
contacts={conversationsStoppingMessageSendBecauseOfVerification}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
onCancel={cancelMessagesPendingConversationVerification}
onConfirm={verifyConversationsStoppingMessageSend}
renderSafetyNumber={renderSafetyNumber}
theme={theme}
/>
);
}

38
ts/components/SafetyNumberChangeDialog.stories.tsx
View File

@ -9,6 +9,8 @@ import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
import { getFakeBadge } from '../test-both/helpers/getFakeBadge';
const i18n = setupI18n('en', enMessages);
@ -48,11 +50,15 @@ const contactWithNothing = getDefaultConversation({
title: 'Unknown contact',
});
const useTheme = () => React.useContext(StorybookThemeContext);
storiesOf('Components/SafetyNumberChangeDialog', module)
.add('Single Contact Dialog', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[contactWithAllData]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
@ -60,14 +66,17 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Different Confirmation Text', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
confirmText="You are awesome"
contacts={[contactWithAllData]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
@ -75,10 +84,12 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Multi Contact Dialog', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
@ -87,6 +98,7 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
contactWithJustNumber,
contactWithNothing,
]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
@ -94,10 +106,34 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Multiple contacts, all with badges', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
contactWithAllData,
contactWithJustProfile,
contactWithJustNumber,
contactWithNothing,
]}
getPreferredBadge={() => getFakeBadge()}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Scroll Dialog', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
@ -112,6 +148,7 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
contactWithAllData,
contactWithAllData,
]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
@ -119,6 +156,7 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
});

9
ts/components/SafetyNumberChangeDialog.tsx
View File

@ -10,7 +10,8 @@ import { InContactsIcon } from './InContactsIcon';
import { Modal } from './Modal';
import type { ConversationType } from '../state/ducks/conversations';
import type { LocalizerType } from '../types/Util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { LocalizerType, ThemeType } from '../types/Util';
import { isInSystemContacts } from '../util/isInSystemContacts';
export type SafetyNumberProps = {
@ -21,19 +22,23 @@ export type SafetyNumberProps = {
export type Props = {
readonly confirmText?: string;
readonly contacts: Array<ConversationType>;
readonly getPreferredBadge: PreferredBadgeSelectorType;
readonly i18n: LocalizerType;
readonly onCancel: () => void;
readonly onConfirm: () => void;
readonly renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
readonly theme: ThemeType;
};
export const SafetyNumberChangeDialog = ({
confirmText,
contacts,
getPreferredBadge,
i18n,
onCancel,
onConfirm,
renderSafetyNumber,
theme,
}: Props): JSX.Element => {
const [selectedContact, setSelectedContact] = React.useState<
ConversationType | undefined
@ -89,6 +94,7 @@ export const SafetyNumberChangeDialog = ({
<Avatar
acceptedMessageRequest={contact.acceptedMessageRequest}
avatarPath={contact.avatarPath}
badge={getPreferredBadge(contact.badges)}
color={contact.color}
conversationType="direct"
i18n={i18n}
@ -96,6 +102,7 @@ export const SafetyNumberChangeDialog = ({
name={contact.name}
phoneNumber={contact.phoneNumber}
profileName={contact.profileName}
theme={theme}
title={contact.title}
sharedGroupNames={contact.sharedGroupNames}
size={52}

8
ts/shims/showSafetyNumberChangeDialog.tsx
View File

@ -11,6 +11,8 @@ import React from 'react';
import { unmountComponentAtNode, render } from 'react-dom';
import type { ConversationModel } from '../models/conversations';
import { SafetyNumberChangeDialog } from '../components/SafetyNumberChangeDialog';
import { getPreferredBadgeSelector } from '../state/selectors/badges';
import { getTheme } from '../state/selectors/user';
export type SafetyNumberChangeViewProps = {
confirmText?: string;
@ -42,10 +44,15 @@ export function showSafetyNumberChangeDialog(
dialogContainerNode = document.createElement('div');
document.body.appendChild(dialogContainerNode);
const reduxState = window.reduxStore.getState();
const getPreferredBadge = getPreferredBadgeSelector(reduxState);
const theme = getTheme(reduxState);
render(
<SafetyNumberChangeDialog
confirmText={options.confirmText}
contacts={options.contacts.map(contact => contact.format())}
getPreferredBadge={getPreferredBadge}
i18n={window.i18n}
onCancel={() => {
options.reject();
@ -61,6 +68,7 @@ export function showSafetyNumberChangeDialog(
props
);
}}
theme={theme}
/>,
dialogContainerNode
);

2
ts/state/smart/App.tsx
View File

@ -10,6 +10,7 @@ import { SmartCustomizingPreferredReactionsModal } from './CustomizingPreferredR
import { SmartGlobalModalContainer } from './GlobalModalContainer';
import { SmartSafetyNumberViewer } from './SafetyNumberViewer';
import type { StateType } from '../reducer';
import { getPreferredBadgeSelector } from '../selectors/badges';
import { getIntl, getTheme } from '../selectors/user';
import {
getConversationsStoppingMessageSendBecauseOfVerification,
@ -24,6 +25,7 @@ const mapStateToProps = (state: StateType) => {
...state.app,
conversationsStoppingMessageSendBecauseOfVerification:
getConversationsStoppingMessageSendBecauseOfVerification(state),
getPreferredBadge: getPreferredBadgeSelector(state),
i18n: getIntl(state),
isCustomizingPreferredReactions: getIsCustomizingPreferredReactions(state),
numberOfMessagesPendingBecauseOfVerification:

5
ts/state/smart/CallManager.tsx
View File

@ -7,7 +7,7 @@ import { memoize } from 'lodash';
import { mapDispatchToProps } from '../actions';
import { CallManager } from '../../components/CallManager';
import { calling as callingService } from '../../services/calling';
import { getUserUuid, getIntl } from '../selectors/user';
import { getUserUuid, getIntl, getTheme } from '../selectors/user';
import { getMe, getConversationSelector } from '../selectors/conversations';
import { getActiveCall } from '../ducks/calling';
import type { ConversationType } from '../ducks/conversations';
@ -35,6 +35,7 @@ import {
notificationService,
} from '../../services/notifications';
import * as log from '../../logging/log';
import { getPreferredBadgeSelector } from '../selectors/badges';
function renderDeviceSelection(): JSX.Element {
return <SmartCallingDeviceSelection />;
@ -306,6 +307,7 @@ const mapStateToProps = (state: StateType) => ({
bounceAppIconStop,
availableCameras: state.calling.availableCameras,
getGroupCallVideoFrameSource,
getPreferredBadge: getPreferredBadgeSelector(state),
i18n: getIntl(state),
isGroupCallOutboundRingEnabled: isGroupCallOutboundRingEnabled(),
incomingCall: mapStateToIncomingCallProp(state),
@ -320,6 +322,7 @@ const mapStateToProps = (state: StateType) => ({
stopRingtone,
renderDeviceSelection,
renderSafetyNumberViewer,
theme: getTheme(state),
});
const smart = connect(mapStateToProps, mapDispatchToProps);