From 2c545e9ec5b8a353ed7b6dd68e2403d824204640 Mon Sep 17 00:00:00 2001 From: Oskar Michalkiewicz Date: Thu, 21 Sep 2023 14:31:48 +0000 Subject: [PATCH 1/3] stop app flickering while trying to connect + error connection modal adjustments --- .../renderer/locales/default/en-US.json | 6 +- .../renderer/wrappers/base-app.component.tsx | 10 ++- .../connecting-content.component.tsx | 10 ++- .../components/error-connecting-modal.tsx | 69 +++++++++++++------ .../components/modals-manager.component.tsx | 4 -- 5 files changed, 68 insertions(+), 31 deletions(-) diff --git a/packages/app/src/__deprecated__/renderer/locales/default/en-US.json b/packages/app/src/__deprecated__/renderer/locales/default/en-US.json index e7301ae364..f804c3d43e 100644 --- a/packages/app/src/__deprecated__/renderer/locales/default/en-US.json +++ b/packages/app/src/__deprecated__/renderer/locales/default/en-US.json @@ -259,10 +259,10 @@ "module.connecting.criticalBatteryLevelModalDescription": "Charge your Pure, then disconnect and reconnect your phone to use Mudita Center.", "module.connecting.criticalBatteryLevelModalHeaderTitle": "MuditaOS", "module.connecting.criticalBatteryLevelModalTitle": "The battery in your Pure is flat.", - "module.connecting.errorConnectingDescription": "Please restart your device and try again", - "module.connecting.errorConnectingModalHeaderTitle": "Connecting Error", + "module.connecting.errorConnectingDescription": "If you still have problems connecting to your device, have a look at our {link}", + "module.connecting.errorConnectingModalHeaderTitle": "We couldn't connect to your device...", "module.connecting.errorConnectingModalSecondaryButton": "Cancel", - "module.connecting.errorConnectingModalTitle": "Your device is not responding", + "module.connecting.errorConnectingModalTitle": "Make sure your device is plugged in using a USB C cable and restart Mudita Center or your computer to try again", "module.connecting.errorSyncModalButton": "Try again", "module.connecting.errorSyncModalDescription": "Please try to reconnect your device", "module.connecting.errorSyncModalHeaderTitle": "Error", diff --git a/packages/app/src/__deprecated__/renderer/wrappers/base-app.component.tsx b/packages/app/src/__deprecated__/renderer/wrappers/base-app.component.tsx index ae87fe5bc8..460ff09d81 100644 --- a/packages/app/src/__deprecated__/renderer/wrappers/base-app.component.tsx +++ b/packages/app/src/__deprecated__/renderer/wrappers/base-app.component.tsx @@ -49,6 +49,7 @@ interface Props { osVersion: string | undefined checkingForOsForceUpdate: boolean shouldCheckForForceUpdateNeed: boolean + initializationFailed: boolean } const BaseApp: FunctionComponent = ({ @@ -68,6 +69,7 @@ const BaseApp: FunctionComponent = ({ osVersion, checkingForOsForceUpdate, shouldCheckForForceUpdateNeed, + initializationFailed, }) => { useRouterListener(history, { [URL_MAIN.contacts]: [], @@ -93,7 +95,12 @@ const BaseApp: FunctionComponent = ({ return } - if (deviceConnecting || deviceLocked || checkingForOsForceUpdate) { + if ( + deviceConnecting || + deviceLocked || + checkingForOsForceUpdate || + initializationFailed + ) { history.push(URL_ONBOARDING.connecting) } else if (!deviceFeaturesVisible) { history.push(URL_ONBOARDING.welcome) @@ -154,6 +161,7 @@ const isDeviceRestarting = (state: RootState & ReduxRootState): boolean => { const mapStateToProps = (state: RootState & ReduxRootState) => { return { + initializationFailed: !state.dataSync.initialized, deviceFeaturesVisible: (state.device.status.connected && Boolean(state.device.status.unlocked)) || diff --git a/packages/app/src/connecting/components/connecting-content.component.tsx b/packages/app/src/connecting/components/connecting-content.component.tsx index 0a8af84ebc..dbb2f05735 100644 --- a/packages/app/src/connecting/components/connecting-content.component.tsx +++ b/packages/app/src/connecting/components/connecting-content.component.tsx @@ -13,6 +13,8 @@ import Loader from "App/__deprecated__/renderer/components/core/loader/loader.co import { LoaderType } from "App/__deprecated__/renderer/components/core/loader/loader.interface" import styled from "styled-components" import { backgroundColor } from "App/__deprecated__/renderer/styles/theming/theme-getters" +import { useSelector } from "react-redux" +import { ReduxRootState } from "App/__deprecated__/renderer/store" export const Container = styled.section` display: grid; @@ -47,6 +49,7 @@ interface Props { } const ConnectingContent: FunctionComponent = ({ longerConnection }) => { + const { initialized } = useSelector((state: ReduxRootState) => state.dataSync) return (
@@ -56,9 +59,10 @@ const ConnectingContent: FunctionComponent = ({ longerConnection }) => {
diff --git a/packages/app/src/connecting/components/error-connecting-modal.tsx b/packages/app/src/connecting/components/error-connecting-modal.tsx index 3a260810d5..d2386bb462 100644 --- a/packages/app/src/connecting/components/error-connecting-modal.tsx +++ b/packages/app/src/connecting/components/error-connecting-modal.tsx @@ -4,20 +4,30 @@ */ import { FunctionComponent } from "App/__deprecated__/renderer/types/function-component.interface" -import { intl } from "App/__deprecated__/renderer/utils/intl" -import { RoundIconWrapper } from "App/__deprecated__/renderer/components/core/modal-shared/modal-shared" +import { intl, textFormatters } from "App/__deprecated__/renderer/utils/intl" import Icon from "App/__deprecated__/renderer/components/core/icon/icon.component" -import { ModalText } from "App/contacts/components/sync-contacts-modal/sync-contacts.styled" -import { TextDisplayStyle } from "App/__deprecated__/renderer/components/core/text/text.component" +import Text, { + TextDisplayStyle, +} from "App/__deprecated__/renderer/components/core/text/text.component" import React, { ComponentProps } from "react" import { defineMessages } from "react-intl" import styled from "styled-components" -import { ModalDialog } from "App/ui/components/modal-dialog" +import { + ModalContent, + ModalDialog, + RoundIconWrapper, +} from "App/ui/components/modal-dialog" import { ModalSize } from "App/__deprecated__/renderer/components/core/modal/modal.interface" import { Size } from "App/__deprecated__/renderer/components/core/button/button.config" import { ErrorConnectingModalTestIds } from "App/connecting/components/error-connecting-modal-test-ids.enum" import { IconType } from "App/__deprecated__/renderer/components/core/icon/icon-type" import { ModalLayers } from "App/modals-manager/constants/modal-layers.enum" +import { + fontWeight, + textColor, +} from "App/__deprecated__/renderer/styles/theming/theme-getters" +import { ipcRenderer } from "electron-better-ipc" +import { HelpActions } from "App/__deprecated__/common/enums/help-actions.enum" const messages = defineMessages({ errorConnectingModalHeaderTitle: { @@ -33,20 +43,23 @@ const messages = defineMessages({ id: "module.connecting.errorConnectingDescription", }, }) - -const ModalContent = styled.div` - display: flex; - flex-direction: column; - align-items: center; - - p:first-of-type { - margin-top: 0; +const StyledLink = styled.a` + text-decoration: underline; + cursor: pointer; + font-size: 1.4rem; + font-weight: ${fontWeight("default")}; + color: ${textColor("action")}; +` +const StyledModalContent = styled(ModalContent)` + p { + text-align: left; } ` const ErrorConnectingModal: FunctionComponent< ComponentProps > = ({ onClose, ...props }) => { + const openHelpWindow = () => ipcRenderer.callMain(HelpActions.OpenWindow) return ( - + - - + connection help page. + + ), + }, + }} /> - + ) } diff --git a/packages/app/src/modals-manager/components/modals-manager.component.tsx b/packages/app/src/modals-manager/components/modals-manager.component.tsx index 3245f919a3..8e02534225 100644 --- a/packages/app/src/modals-manager/components/modals-manager.component.tsx +++ b/packages/app/src/modals-manager/components/modals-manager.component.tsx @@ -29,7 +29,6 @@ const ModalsManager: FunctionComponent = ({ appUpdateFlowShow, contactSupportFlowShow, deviceInitializationFailedModalShowEnabled, - hideModals, }) => { const { privacyPolicyAccepted } = useSelector( (state: ReduxRootState) => state.settings @@ -41,9 +40,6 @@ const ModalsManager: FunctionComponent = ({ return ( <> - {deviceInitializationFailedModalShowEnabled && ( - - )} {appForcedUpdateFlowShow && } {appUpdateFlowShow && } {contactSupportFlowShow && } From 194374916f92667388b52625fbc4ccc4088763b2 Mon Sep 17 00:00:00 2001 From: Oskar Michalkiewicz Date: Thu, 21 Sep 2023 15:06:49 +0000 Subject: [PATCH 2/3] fix lint --- .../src/modals-manager/components/modals-manager.component.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/app/src/modals-manager/components/modals-manager.component.tsx b/packages/app/src/modals-manager/components/modals-manager.component.tsx index 8e02534225..1f5ae1c5e5 100644 --- a/packages/app/src/modals-manager/components/modals-manager.component.tsx +++ b/packages/app/src/modals-manager/components/modals-manager.component.tsx @@ -11,7 +11,6 @@ import { } from "App/settings/components" import ContactSupportFlow from "App/contact-support/containers/contact-support-flow.container" import { UpdateOsInterruptedFlowContainer } from "App/update/components/update-os-interrupted-flow" -import ErrorConnectingModal from "App/connecting/components/error-connecting-modal" import { useSelector } from "react-redux" import { ReduxRootState } from "App/__deprecated__/renderer/store" import PrivacyPolicyModal from "App/settings/components/privacy-policy-modal/privacy-policy-modal.component" @@ -20,7 +19,6 @@ type Props = { appForcedUpdateFlowShow: boolean appUpdateFlowShow: boolean contactSupportFlowShow: boolean - deviceInitializationFailedModalShowEnabled: boolean hideModals: () => void } @@ -28,7 +26,6 @@ const ModalsManager: FunctionComponent = ({ appForcedUpdateFlowShow, appUpdateFlowShow, contactSupportFlowShow, - deviceInitializationFailedModalShowEnabled, }) => { const { privacyPolicyAccepted } = useSelector( (state: ReduxRootState) => state.settings From 97849e1bfca04dcf289f2b24bb656f500176a863 Mon Sep 17 00:00:00 2001 From: Oskar Michalkiewicz Date: Thu, 21 Sep 2023 15:34:25 +0000 Subject: [PATCH 3/3] lint and test fix --- .../renderer/wrappers/root-wrapper.test.tsx | 2 ++ .../connecting/components/connecting.test.tsx | 8 ++++++- .../modals-manager.component.test.tsx | 22 ------------------- 3 files changed, 9 insertions(+), 23 deletions(-) diff --git a/packages/app/src/__deprecated__/renderer/wrappers/root-wrapper.test.tsx b/packages/app/src/__deprecated__/renderer/wrappers/root-wrapper.test.tsx index 2b396e6963..61fdb67c86 100644 --- a/packages/app/src/__deprecated__/renderer/wrappers/root-wrapper.test.tsx +++ b/packages/app/src/__deprecated__/renderer/wrappers/root-wrapper.test.tsx @@ -19,6 +19,7 @@ import { modalsManagerReducer } from "App/modals-manager/reducers" import { settingsReducer } from "App/settings/reducers" import { checkUpdateAvailable } from "App/settings/actions/check-update-available.action" import { updateOsReducer } from "App/update/reducers" +import { dataSyncReducer } from "App/data-sync/reducers" jest.mock("App/settings/actions/check-update-available.action") @@ -109,6 +110,7 @@ const store = init({ modalsManager: modalsManagerReducer, settings: settingsReducer, update: updateOsReducer, + dataSync: dataSyncReducer, }, }, }) as Store diff --git a/packages/app/src/connecting/components/connecting.test.tsx b/packages/app/src/connecting/components/connecting.test.tsx index 9266793721..cd99b4bdec 100644 --- a/packages/app/src/connecting/components/connecting.test.tsx +++ b/packages/app/src/connecting/components/connecting.test.tsx @@ -14,6 +14,8 @@ import { SynchronizationState } from "App/data-sync/reducers" import { DeviceType } from "App/device/constants" import { RequestResponseStatus } from "App/core/types/request-response.interface" import { CriticalBatteryLevelModalTestIds } from "App/connecting/components/critical-battery-level-modal/critical-battery-level-modal-test-ids.enum" +import { Provider } from "react-redux" +import store from "App/__deprecated__/renderer/store" jest.mock("App/connecting/requests/register-first-phone-connection") @@ -45,7 +47,11 @@ const render = (extraProps?: Partial) => { ...defaultProps, ...extraProps, } - const outcome = renderWithThemeAndIntl() + const outcome = renderWithThemeAndIntl( + + + + ) return { ...outcome, } diff --git a/packages/app/src/modals-manager/components/modals-manager.component.test.tsx b/packages/app/src/modals-manager/components/modals-manager.component.test.tsx index 5f7cba9373..451d569ff8 100644 --- a/packages/app/src/modals-manager/components/modals-manager.component.test.tsx +++ b/packages/app/src/modals-manager/components/modals-manager.component.test.tsx @@ -43,7 +43,6 @@ const defaultProps: Props = { appForcedUpdateFlowShow: false, appUpdateFlowShow: false, contactSupportFlowShow: false, - deviceInitializationFailedModalShowEnabled: false, hideModals: jest.fn(), } @@ -153,25 +152,4 @@ describe("`ModalsManager` component", () => { ).not.toBeInTheDocument() }) }) - - describe("when component is render with proper where `deviceInitializationFailedModalShowEnabled` is set to `true`", () => { - test("`ErrorConnectingModal` is visible", () => { - const { queryByTestId } = render({ - deviceInitializationFailedModalShowEnabled: true, - }) - - expect( - queryByTestId(ErrorConnectingModalTestIds.Container) - ).toBeInTheDocument() - expect( - queryByTestId(ContactSupportFlowTestIds.ContactSupportModal) - ).not.toBeInTheDocument() - expect( - queryByTestId(AppUpdateFlowTestIds.Container) - ).not.toBeInTheDocument() - expect( - queryByTestId(AppForcedUpdateFlowTestIds.Container) - ).not.toBeInTheDocument() - }) - }) })