Fallback for the SafetyNumberViewer

This commit is contained in:
Josh Perez 2022-03-02 15:04:33 -05:00 committed by GitHub
parent f152496b21
commit e9af730eda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 33 additions and 68 deletions

View File

@ -74,35 +74,8 @@
text-align: center; text-align: center;
} }
&__close-button { &__buttons {
display: flex; text-align: right;
justify-content: flex-end;
button {
background: inherit;
border: none;
cursor: pointer;
padding: 0;
@include keyboard-mode {
&:focus {
border: 1px solid $color-ultramarine;
}
}
span {
display: inline-block;
height: 24px;
width: 24px;
@include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
}
}
}
} }
&__button { &__button {

View File

@ -21,7 +21,7 @@ import { AvatarColors } from '../types/Colors';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation'; import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource'; import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource';
import { setupI18n } from '../util/setupI18n'; import { setupI18n } from '../util/setupI18n';
import type { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer'; import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
import enMessages from '../../_locales/en/messages.json'; import enMessages from '../../_locales/en/messages.json';
import { ThemeType } from '../types/Util'; import { ThemeType } from '../types/Util';
@ -89,7 +89,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
openSystemPreferencesAction: action('open-system-preferences-action'), openSystemPreferencesAction: action('open-system-preferences-action'),
playRingtone: action('play-ringtone'), playRingtone: action('play-ringtone'),
renderDeviceSelection: () => <div />, renderDeviceSelection: () => <div />,
renderSafetyNumberViewer: (_: SafetyNumberViewerProps) => <div />, renderSafetyNumberViewer: (_: SafetyNumberProps) => <div />,
setGroupCallVideoRequest: action('set-group-call-video-request'), setGroupCallVideoRequest: action('set-group-call-video-request'),
setIsCallActive: action('set-is-call-active'), setIsCallActive: action('set-is-call-active'),
setLocalAudio: action('set-local-audio'), setLocalAudio: action('set-local-audio'),

View File

@ -16,7 +16,7 @@ import { isInSystemContacts } from '../util/isInSystemContacts';
export type SafetyNumberProps = { export type SafetyNumberProps = {
contactID: string; contactID: string;
onClose?: () => void; onClose: () => void;
}; };
export type Props = { export type Props = {
@ -59,7 +59,7 @@ export const SafetyNumberChangeDialog = ({
if (selectedContact) { if (selectedContact) {
return ( return (
<Modal i18n={i18n} onClose={onClose}> <Modal hasXButton i18n={i18n} onClose={onClose}>
{renderSafetyNumber({ contactID: selectedContact.id, onClose })} {renderSafetyNumber({ contactID: selectedContact.id, onClose })}
</Modal> </Modal>
); );

View File

@ -8,7 +8,7 @@ import { SafetyNumberViewer } from './SafetyNumberViewer';
type PropsType = { type PropsType = {
toggleSafetyNumberModal: () => unknown; toggleSafetyNumberModal: () => unknown;
} & SafetyNumberViewerPropsType; } & Omit<SafetyNumberViewerPropsType, 'onClose'>;
export const SafetyNumberModal = ({ export const SafetyNumberModal = ({
i18n, i18n,
@ -20,10 +20,14 @@ export const SafetyNumberModal = ({
hasXButton hasXButton
i18n={i18n} i18n={i18n}
moduleClassName="module-SafetyNumberViewer__modal" moduleClassName="module-SafetyNumberViewer__modal"
onClose={() => toggleSafetyNumberModal()} onClose={toggleSafetyNumberModal}
title={i18n('SafetyNumberModal__title')} title={i18n('SafetyNumberModal__title')}
> >
<SafetyNumberViewer i18n={i18n} {...safetyNumberViewerProps} /> <SafetyNumberViewer
i18n={i18n}
onClose={toggleSafetyNumberModal}
{...safetyNumberViewerProps}
/>
</Modal> </Modal>
); );
}; };

View File

@ -58,7 +58,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
? overrideProps.verificationDisabled ? overrideProps.verificationDisabled
: false : false
), ),
onClose: overrideProps.onClose, onClose: action('onClose'),
}); });
const story = storiesOf('Components/SafetyNumberViewer', module); const story = storiesOf('Components/SafetyNumberViewer', module);

View File

@ -8,10 +8,10 @@ import { Intl } from './Intl';
import type { LocalizerType } from '../types/Util'; import type { LocalizerType } from '../types/Util';
export type PropsType = { export type PropsType = {
contact?: ConversationType; contact: ConversationType;
generateSafetyNumber: (contact: ConversationType) => void; generateSafetyNumber: (contact: ConversationType) => void;
i18n: LocalizerType; i18n: LocalizerType;
onClose?: () => void; onClose: () => void;
safetyNumber: string; safetyNumber: string;
toggleVerified: (contact: ConversationType) => void; toggleVerified: (contact: ConversationType) => void;
verificationDisabled: boolean; verificationDisabled: boolean;
@ -41,7 +41,16 @@ export const SafetyNumberViewer = ({
if (!contact.phoneNumber) { if (!contact.phoneNumber) {
return ( return (
<div className="module-SafetyNumberViewer"> <div className="module-SafetyNumberViewer">
{i18n('cannotGenerateSafetyNumber')} <div>{i18n('cannotGenerateSafetyNumber')}</div>
<div className="module-SafetyNumberViewer__buttons">
<Button
className="module-SafetyNumberViewer__button"
onClick={() => onClose?.()}
variant={ButtonVariant.Primary}
>
{i18n('ok')}
</Button>
</div>
</div> </div>
); );
} }
@ -60,13 +69,6 @@ export const SafetyNumberViewer = ({
return ( return (
<div className="module-SafetyNumberViewer"> <div className="module-SafetyNumberViewer">
{onClose && (
<div className="module-SafetyNumberViewer__close-button">
<button onClick={onClose} tabIndex={0} type="button">
<span />
</button>
</div>
)}
<div className="module-SafetyNumberViewer__number"> <div className="module-SafetyNumberViewer__number">
{safetyNumber || getPlaceholder()} {safetyNumber || getPlaceholder()}
</div> </div>

View File

@ -6,24 +6,14 @@ import { Provider } from 'react-redux';
import type { Store } from 'redux'; import type { Store } from 'redux';
import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
import { SmartSafetyNumberViewer } from '../smart/SafetyNumberViewer'; import { SmartSafetyNumberViewer } from '../smart/SafetyNumberViewer';
// Workaround: A react component's required properties are filtering up through connect()
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
/* eslint-disable @typescript-eslint/no-explicit-any */
const FilteredSafetyNumberViewer = SmartSafetyNumberViewer as any;
/* eslint-enable @typescript-eslint/no-explicit-any */
type Props = {
contactID: string;
onClose?: () => void;
};
export const createSafetyNumberViewer = ( export const createSafetyNumberViewer = (
store: Store, store: Store,
props: Props props: SafetyNumberProps
): React.ReactElement => ( ): React.ReactElement => (
<Provider store={store}> <Provider store={store}>
<FilteredSafetyNumberViewer {...props} /> <SmartSafetyNumberViewer {...props} />
</Provider> </Provider>
); );

View File

@ -22,7 +22,7 @@ import { CallMode, CallState } from '../../types/Calling';
import type { StateType } from '../reducer'; import type { StateType } from '../reducer';
import { missingCaseError } from '../../util/missingCaseError'; import { missingCaseError } from '../../util/missingCaseError';
import { SmartCallingDeviceSelection } from './CallingDeviceSelection'; import { SmartCallingDeviceSelection } from './CallingDeviceSelection';
import type { Props as SafetyNumberViewerProps } from './SafetyNumberViewer'; import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
import { SmartSafetyNumberViewer } from './SafetyNumberViewer'; import { SmartSafetyNumberViewer } from './SafetyNumberViewer';
import { callingTones } from '../../util/callingTones'; import { callingTones } from '../../util/callingTones';
import { import {
@ -41,7 +41,7 @@ function renderDeviceSelection(): JSX.Element {
return <SmartCallingDeviceSelection />; return <SmartCallingDeviceSelection />;
} }
function renderSafetyNumberViewer(props: SafetyNumberViewerProps): JSX.Element { function renderSafetyNumberViewer(props: SafetyNumberProps): JSX.Element {
return <SmartSafetyNumberViewer {...props} />; return <SmartSafetyNumberViewer {...props} />;
} }

View File

@ -5,16 +5,12 @@ import { connect } from 'react-redux';
import { mapDispatchToProps } from '../actions'; import { mapDispatchToProps } from '../actions';
import { SafetyNumberViewer } from '../../components/SafetyNumberViewer'; import { SafetyNumberViewer } from '../../components/SafetyNumberViewer';
import type { StateType } from '../reducer'; import type { StateType } from '../reducer';
import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
import { getContactSafetyNumber } from '../selectors/safetyNumber'; import { getContactSafetyNumber } from '../selectors/safetyNumber';
import { getConversationSelector } from '../selectors/conversations'; import { getConversationSelector } from '../selectors/conversations';
import { getIntl } from '../selectors/user'; import { getIntl } from '../selectors/user';
export type Props = { const mapStateToProps = (state: StateType, props: SafetyNumberProps) => {
contactID: string;
onClose?: () => void;
};
const mapStateToProps = (state: StateType, props: Props) => {
return { return {
...props, ...props,
...getContactSafetyNumber(state, props), ...getContactSafetyNumber(state, props),