Show What's New dialog in app via Help -> Go to release notes

This commit is contained in:
Scott Nonnenberg 2021-10-22 17:41:45 -07:00 committed by GitHub
parent 3e38a4b761
commit 191bfee18c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 249 additions and 142 deletions

View file

@ -1,9 +1,14 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { ContactModalStateType } from '../state/ducks/globalModals';
import { LocalizerType } from '../types/Util';
import { WhatsNewModal } from './WhatsNewModal';
type PropsType = {
i18n: LocalizerType;
// ContactModal
contactModalState?: ContactModalStateType;
renderContactModal: () => JSX.Element;
@ -13,9 +18,13 @@ type PropsType = {
// SafetyNumberModal
safetyNumberModalContactId?: string;
renderSafetyNumber: () => JSX.Element;
// WhatsNewModal
isWhatsNewVisible: boolean;
hideWhatsNewModal: () => unknown;
};
export const GlobalModalContainer = ({
i18n,
// ContactModal
contactModalState,
renderContactModal,
@ -25,6 +34,9 @@ export const GlobalModalContainer = ({
// SafetyNumberModal
safetyNumberModalContactId,
renderSafetyNumber,
// WhatsNewModal
hideWhatsNewModal,
isWhatsNewVisible,
}: PropsType): JSX.Element | null => {
if (safetyNumberModalContactId) {
return renderSafetyNumber();
@ -38,5 +50,9 @@ export const GlobalModalContainer = ({
return renderProfileEditor();
}
if (isWhatsNewVisible) {
return <WhatsNewModal hideWhatsNewModal={hideWhatsNewModal} i18n={i18n} />;
}
return null;
};

View file

@ -1,108 +0,0 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { ReactChild, ReactNode, useState } from 'react';
import moment from 'moment';
import { Modal } from './Modal';
import { Intl, IntlComponentsType } from './Intl';
import { Emojify } from './conversation/Emojify';
import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
export type PropsType = {
i18n: LocalizerType;
};
type ReleaseNotesType = {
date: Date;
version: string;
features: Array<{ key: string; components: IntlComponentsType }>;
};
const renderText: RenderTextCallbackType = ({ key, text }) => (
<Emojify key={key} text={text} />
);
export const WhatsNew = ({ i18n }: PropsType): JSX.Element => {
const [releaseNotes, setReleaseNotes] = useState<
ReleaseNotesType | undefined
>();
const viewReleaseNotes = () => {
setReleaseNotes({
date: new Date(window.getBuildCreation?.() || Date.now()),
version: window.getVersion(),
features: [
{
key: 'WhatsNew__v5.22',
components: undefined,
},
],
});
};
let modalNode: ReactNode;
if (releaseNotes) {
let contentNode: ReactChild;
if (releaseNotes.features.length === 1) {
const { key, components } = releaseNotes.features[0];
contentNode = (
<p>
<Intl
i18n={i18n}
id={key}
renderText={renderText}
components={components}
/>
</p>
);
} else {
contentNode = (
<ul>
{releaseNotes.features.map(({ key, components }) => (
<li key={key}>
<Intl
i18n={i18n}
id={key}
renderText={renderText}
components={components}
/>
</li>
))}
</ul>
);
}
modalNode = (
<Modal
hasXButton
i18n={i18n}
onClose={() => setReleaseNotes(undefined)}
title={i18n('WhatsNew__modal-title')}
>
<>
<span>
{moment(releaseNotes.date).format('LL')} &middot;{' '}
{releaseNotes.version}
</span>
{contentNode}
</>
</Modal>
);
}
return (
<>
{modalNode}
<Intl
i18n={i18n}
id="whatsNew"
components={[
<button className="WhatsNew" type="button" onClick={viewReleaseNotes}>
{i18n('viewReleaseNotes')}
</button>,
]}
/>
</>
);
};

View file

@ -0,0 +1,29 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { Intl } from './Intl';
import { LocalizerType } from '../types/Util';
export type PropsType = {
i18n: LocalizerType;
showWhatsNewModal: () => unknown;
};
export const WhatsNewLink = (props: PropsType): JSX.Element => {
const { i18n, showWhatsNewModal } = props;
return (
<Intl
i18n={i18n}
id="whatsNew"
components={[
<button className="WhatsNew" type="button" onClick={showWhatsNewModal}>
{i18n('viewReleaseNotes')}
</button>,
]}
/>
);
};

View file

@ -0,0 +1,89 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { ReactChild } from 'react';
import moment from 'moment';
import { Modal } from './Modal';
import { Intl, IntlComponentsType } from './Intl';
import { Emojify } from './conversation/Emojify';
import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
export type PropsType = {
hideWhatsNewModal: () => unknown;
i18n: LocalizerType;
};
type ReleaseNotesType = {
date: Date;
version: string;
features: Array<{ key: string; components: IntlComponentsType }>;
};
const renderText: RenderTextCallbackType = ({ key, text }) => (
<Emojify key={key} text={text} />
);
const releaseNotes: ReleaseNotesType = {
date: new Date(window.getBuildCreation?.() || Date.now()),
version: window.getVersion(),
features: [
{
key: 'WhatsNew__v5.22',
components: undefined,
},
],
};
export const WhatsNewModal = ({
i18n,
hideWhatsNewModal,
}: PropsType): JSX.Element => {
let contentNode: ReactChild;
if (releaseNotes.features.length === 1) {
const { key, components } = releaseNotes.features[0];
contentNode = (
<p>
<Intl
i18n={i18n}
id={key}
renderText={renderText}
components={components}
/>
</p>
);
} else {
contentNode = (
<ul>
{releaseNotes.features.map(({ key, components }) => (
<li key={key}>
<Intl
i18n={i18n}
id={key}
renderText={renderText}
components={components}
/>
</li>
))}
</ul>
);
}
return (
<Modal
hasXButton
i18n={i18n}
onClose={hideWhatsNewModal}
title={i18n('WhatsNew__modal-title')}
>
<>
<span>
{moment(releaseNotes.date).format('LL')} &middot;{' '}
{releaseNotes.version}
</span>
{contentNode}
</>
</Modal>
);
};