mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add badges to safety number change dialog

Browse source
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
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}