Show What's New dialog in app via Help -> Go to release notes
This commit is contained in:
parent
3e38a4b761
commit
191bfee18c
14 changed files with 249 additions and 142 deletions
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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')} ·{' '}
|
||||
{releaseNotes.version}
|
||||
</span>
|
||||
{contentNode}
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{modalNode}
|
||||
<Intl
|
||||
i18n={i18n}
|
||||
id="whatsNew"
|
||||
components={[
|
||||
<button className="WhatsNew" type="button" onClick={viewReleaseNotes}>
|
||||
{i18n('viewReleaseNotes')}
|
||||
</button>,
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
29
ts/components/WhatsNewLink.tsx
Normal file
29
ts/components/WhatsNewLink.tsx
Normal 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>,
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
89
ts/components/WhatsNewModal.tsx
Normal file
89
ts/components/WhatsNewModal.tsx
Normal 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')} ·{' '}
|
||||
{releaseNotes.version}
|
||||
</span>
|
||||
{contentNode}
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue