Skip to content

Commit

Permalink
chore: refactor Download and Ready mograde modals to use NewModal
Browse files Browse the repository at this point in the history
  • Loading branch information
@peter-sanderson
peter-sanderson committed Oct 3, 2024
1 parent 532d22e commit b790a2c
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 81 deletions.
3 changes: 2 additions & 1 deletion packages/components/src/components/NewModal/NewModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ const _NewModalBase = ({
iconComponent,
onBackClick,
onCancel,
isBackdropCancelable,
'data-testid': dataTest = '@modal',
...rest
}: NewModalProps) => {
Expand All @@ -142,7 +143,7 @@ const _NewModalBase = ({
const hasHeader = onBackClick || onCancel || heading || description;

useEvent('keydown', (e: KeyboardEvent) => {
if (onCancel && e.key === 'Escape') {
if (isBackdropCancelable && onCancel && e.key === 'Escape') {
onCancel?.();
}
});
Expand Down
13 changes: 8 additions & 5 deletions packages/suite-desktop-ui/src/support/DesktopUpdater.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ interface DesktopUpdaterProps {
export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
const dispatch = useDispatch();
const { desktopUpdate } = useSelector(state => state);

const desktopUpdateState = desktopUpdate.state;

const routeName = useSelector(selectRouteName);

// Closing a modal opened by auto updater outside of device settings might confuse some users,
Expand Down Expand Up @@ -90,25 +93,25 @@ export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
}

// Non visible states
if ([UpdateState.Checking, UpdateState.NotAvailable].includes(desktopUpdate.state)) {
if ([UpdateState.Checking, UpdateState.NotAvailable].includes(desktopUpdateState)) {
return false;
}

const isEarlyAccessState = [
UpdateState.EarlyAccessDisable,
UpdateState.EarlyAccessEnable,
].includes(desktopUpdate.state);
].includes(desktopUpdateState);

// Enable to setup Early Access even after updater error (when desktopUpdate.latest is undefined).
if (!isEarlyAccessState && !desktopUpdate.latest) {
return false;
}

return true;
}, [desktopUpdate.modalVisibility, desktopUpdate.state, desktopUpdate.latest]);
}, [desktopUpdate.modalVisibility, desktopUpdateState, desktopUpdate.latest]);

const getUpdateModal = () => {
switch (desktopUpdate.state) {
switch (desktopUpdateState) {
case UpdateState.EarlyAccessEnable:
return <EarlyAccessEnable hideWindow={hideWindow} />;
case UpdateState.EarlyAccessDisable:
Expand All @@ -124,7 +127,7 @@ export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
case UpdateState.Downloading:
return <Downloading hideWindow={hideWindow} progress={desktopUpdate.progress} />;
case UpdateState.Ready:
return <Ready hideWindow={hideWindow} isCancelable={isSettingsRoute} />;
return <Ready hideWindow={hideWindow} />;
default:
return null;
}
Expand Down
75 changes: 30 additions & 45 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,10 @@ import styled from 'styled-components';

import { UpdateProgress } from '@trezor/suite-desktop-api';
import { bytesToHumanReadable } from '@trezor/utils';
import { Button, H2, ProgressBar, variables } from '@trezor/components';
import { H2, NewModal, ProgressBar, variables, Row, Column } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { Translation, Modal } from 'src/components/suite';

import { Row } from './styles';

const DownloadWrapper = styled(Row)`
margin-top: 16px;
`;
import { Translation } from 'src/components/suite';

const DownloadProgress = styled.span`
font-size: 20px;
Expand All @@ -34,11 +29,6 @@ const Text = styled(H2)`
font-weight: ${variables.FONT_WEIGHT.MEDIUM};
`;

// eslint-disable-next-line local-rules/no-override-ds-component
const StyledProgressBar = styled(ProgressBar)`
margin-top: 16px;
`;

interface DownloadingProps {
hideWindow: () => void;
progress?: UpdateProgress;
Expand All @@ -56,42 +46,37 @@ export const Downloading = ({ hideWindow, progress }: DownloadingProps) => {
}, [step]);

return (
<Modal
headerComponent={
<Button
size="small"
variant="tertiary"
icon="x"
iconAlignment="right"
onClick={hideWindow}
>
<NewModal
bottomContent={
<NewModal.Button variant="tertiary" onClick={hideWindow}>
<Translation id="TR_BACKGROUND_DOWNLOAD" />
</Button>
</NewModal.Button>
}
onCancel={hideWindow}
>
<DownloadWrapper>
{progress?.verifying ? (
<Text>
<Translation id="TR_VERIFYING_SIGNATURE" />
{ellipsisArray.filter((_, k) => k < step)}
</Text>
) : (
<>
<Column alignItems="start" gap={spacings.md}>
<Row margin={{ top: spacings.md }} justifyContent="space-between" width="100%">
{progress?.verifying ? (
<Text>
<Translation id="TR_DOWNLOADING" />
<Translation id="TR_VERIFYING_SIGNATURE" />
{ellipsisArray.filter((_, k) => k < step)}
</Text>
<DownloadProgress>
<ReceivedData>
{bytesToHumanReadable(progress?.transferred || 0)}
</ReceivedData>
/<TotalData>{bytesToHumanReadable(progress?.total || 0)}</TotalData>
</DownloadProgress>
</>
)}
</DownloadWrapper>

<StyledProgressBar value={progress?.percent || 0} />
</Modal>
) : (
<>
<Text>
<Translation id="TR_DOWNLOADING" />
</Text>
<DownloadProgress>
<ReceivedData>
{bytesToHumanReadable(progress?.transferred || 0)}
</ReceivedData>
/<TotalData>{bytesToHumanReadable(progress?.total || 0)}</TotalData>
</DownloadProgress>
</>
)}
</Row>

<ProgressBar value={progress?.percent || 0} />
</Column>
</NewModal>
);
};
43 changes: 13 additions & 30 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,15 @@
import styled from 'styled-components';
import { Button, NewModal, Paragraph, Row } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { Button, H2, variables } from '@trezor/components';

import { Translation, Modal } from 'src/components/suite';
import { Translation } from 'src/components/suite';
import { useDispatch } from 'src/hooks/suite';
import { installUpdate } from 'src/actions/suite/desktopUpdateActions';

const Description = styled.span`
font-size: ${variables.FONT_SIZE.SMALL};
font-weight: ${variables.FONT_WEIGHT.MEDIUM};
color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
`;

const StyledModal = styled(Modal)`
${Modal.BottomBar} {
> * {
flex: 1;
}
}
`;

interface ReadyProps {
hideWindow: () => void;
isCancelable: boolean;
}

export const Ready = ({ hideWindow, isCancelable }: ReadyProps) => {
export const Ready = ({ hideWindow }: ReadyProps) => {
const dispatch = useDispatch();

const install = () => dispatch(installUpdate({ shouldInstallOnQuit: false }));
Expand All @@ -35,27 +19,26 @@ export const Ready = ({ hideWindow, isCancelable }: ReadyProps) => {
};

return (
<StyledModal
<NewModal
heading={<Translation id="TR_UPDATE_MODAL_UPDATE_DOWNLOADED" />}
isCancelable={isCancelable}
onCancel={installOnQuit}
bottomBarComponents={
<>
bottomContent={
<Row gap={spacings.xs}>
<Button onClick={installOnQuit} variant="tertiary">
<Translation id="TR_UPDATE_MODAL_UPDATE_ON_QUIT" />
</Button>
<Button onClick={install} variant="primary">
<Translation id="TR_UPDATE_MODAL_INSTALL_AND_RESTART" />
</Button>
</>
</Row>
}
>
<H2>
<Paragraph typographyStyle="highlight" variant="primary">
<Translation id="TR_UPDATE_MODAL_INSTALL_NOW_OR_LATER" />
</H2>
<Description>
</Paragraph>
<Paragraph>
<Translation id="TR_UPDATE_MODAL_RESTART_NEEDED" />
</Description>
</StyledModal>
</Paragraph>
</NewModal>
);
};

0 comments on commit b790a2c

Please sign in to comment.