[CP-3185] WIP

libs/core/core/hooks/use-abort-flashing-on-device-detached.ts

@@ -14,22 +14,32 @@ import {
   abortMscFlashing,
   FlashingProcessState,
   selectIsFlashingInActivePhases,
+  selectIsFlashingInState,
+  setMscFlashingInitialState,
 } from "msc-flash-harmony"
 import { Dispatch } from "Core/__deprecated__/renderer/store"
 
 export const useAbortFlashingOnDeviceDetached = () => {
   const dispatch = useDispatch<Dispatch>()
   const flashingInActivePhases = useSelector(selectIsFlashingInActivePhases)
+  const flashingInWaitingForBackButtonState = useSelector(
+    selectIsFlashingInState(FlashingProcessState.WaitingForBackButton)
+  )
 
   useEffect(() => {
     return answerMain<DeviceBaseProperties>(
       DeviceProtocolMainEvent.DeviceDetached,
       () => {
+        if (flashingInWaitingForBackButtonState) {
+          dispatch(setMscFlashingInitialState())
+          return
+        }
+
         const reason = flashingInActivePhases
           ? FlashingProcessState.Failed
           : undefined
         dispatch(abortMscFlashing({ reason }))
       }
     )
-  }, [dispatch, flashingInActivePhases])
+  }, [dispatch, flashingInActivePhases, flashingInWaitingForBackButtonState])
 }

libs/generic-view/store/src/lib/action-names.ts

@@ -93,6 +93,7 @@ export enum ActionName {
   MscFlashingSetProcessState = "msc-flashing/set-process-state",
   MscFlashingSetAbort = "msc-flashing/set-abort",
   MscFlashingAbort = "msc-flashing/abort",
+  MscFlashingSetInitialState = "msc-flashing/set-initial-state",
 
   GetEntitiesConfig = "entities/get-entities-config",
   SetEntitiesConfig = "entities/set-entities-config",

libs/msc-flash/msc-flash-harmony/src/lib/actions/actions.ts

@@ -9,3 +9,7 @@ import { ActionName } from "generic-view/store"
 export const setMscFlashingAbort = createAction<AbortController | undefined>(
   ActionName.MscFlashingSetAbort
 )
+
+export const setMscFlashingInitialState = createAction(
+  ActionName.MscFlashingSetInitialState
+)

libs/msc-flash/msc-flash-harmony/src/lib/constants/flashing-process-state.constant.ts

@@ -10,6 +10,7 @@ export enum FlashingProcessState {
   UnpackingFiles = "unpacking-files",
   FlashingProcess = "flashing-process",
   TerminalOpened = "terminal-opened",
+  WaitingForBackButton = "waiting-for-back-button",
   Restarting = "restarting-device",
   Completed = "completed",
   Canceled = "canceled",

libs/msc-flash/msc-flash-harmony/src/lib/reducers/flashing.reducer.ts

@@ -5,7 +5,7 @@
 
 import { createReducer } from "@reduxjs/toolkit"
 import { FlashingState } from "./flashing.interface"
-import { getMscFlashingFilesDetails, setFlashingProcessState } from "../actions"
+import { getMscFlashingFilesDetails, setFlashingProcessState, setMscFlashingInitialState } from "../actions"
 import { FlashingProcessState } from "../constants"
 import { setMscFlashingAbort } from "../actions/actions"
 
@@ -28,5 +28,8 @@ export const flashingReducer = createReducer<FlashingState>(
       .addCase(setMscFlashingAbort, (state, action) => {
         state.abortController = action.payload
       })
+      .addCase(setMscFlashingInitialState, () => {
+        return { ...initialState }
+      })
   }
 )

libs/msc-flash/msc-flash-harmony/src/lib/selectors/index.ts

@@ -3,7 +3,8 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-export * from "./select-flashing-state.selector"
+export * from "./select-flashing-state"
 export * from "./select-flashing-abort-controller"
 export * from "./select-flashing-process-state"
 export * from "./select-is-flashing-in-active-phases"
+export * from "./select-is-flashing-in-state"

libs/msc-flash/msc-flash-harmony/src/lib/selectors/select-flashing-abort-controller.ts

@@ -4,7 +4,7 @@
  */
 
 import { createSelector } from "@reduxjs/toolkit"
-import { flashingState } from "./select-flashing-state.selector"
+import { flashingState } from "./select-flashing-state"
 
 export const selectFlashingAbortController = createSelector(
   flashingState,

libs/msc-flash/msc-flash-harmony/src/lib/selectors/select-flashing-process-state.ts

@@ -4,7 +4,7 @@
  */
 
 import { createSelector } from "@reduxjs/toolkit"
-import { flashingState } from "./select-flashing-state.selector"
+import { flashingState } from "./select-flashing-state"
 
 export const selectFlashingProcessState = createSelector(
   flashingState,

libs/msc-flash/msc-flash-harmony/src/lib/selectors/select-is-flashing-in-state.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createSelector } from "@reduxjs/toolkit"
+import { FlashingProcessState } from "../constants"
+import { selectFlashingProcessState } from "./select-flashing-process-state"
+
+export const selectIsFlashingInState = (targetState: FlashingProcessState) =>
+  createSelector(
+    selectFlashingProcessState,
+    (flashingProcessState) => flashingProcessState === targetState
+  )

libs/msc-flash/msc-flash-harmony/src/lib/services/flash-msc-device.service.ts

@@ -175,10 +175,13 @@ const startFlashingProcess = async (
     if (signal.aborted) {
       return
     }
-    if(process.platform !== "win32"){
+
+    if (process.platform === "win32") {
+      dispatch(
+        setFlashingProcessState(FlashingProcessState.WaitingForBackButton)
+      )
+    } else {
       dispatch(setFlashingProcessState(FlashingProcessState.Restarting))
-    } else{
-      dispatch(setFlashingProcessState(FlashingProcessState.Completed))
     }
 
     await removeDownloadedMscFiles()

libs/msc-flash/msc-flash-harmony/src/lib/ui/recovery-mode.tsx

@@ -28,6 +28,7 @@ import theme from "Core/core/styles/theming/theme"
 import { RestartingDeviceModal } from "./restarting-device-modal/restarting-device-modal.component"
 import { MacTerminalInfoModal } from "./mac-terminal-info-modal/mac-terminal-info-modal.component"
 import { abortMscFlashing } from "../actions"
+import { WaitingForBackButtonModal } from "./waiting-for-back-button-modal.component"
 
 const messages = defineMessages({
   header: {
@@ -129,6 +130,9 @@ const RecoveryModeUI: FunctionComponent = () => {
   const isRestartingModalVisible = (): boolean => {
     return flashingProcessState === FlashingProcessState.Restarting
   }
+  const isWaitingForBackButtonVisible = (): boolean => {
+    return flashingProcessState === FlashingProcessState.WaitingForBackButton
+  }
 
   const isMacTerminalInfoModalVisible = (): boolean => {
     return flashingProcessState === FlashingProcessState.TerminalOpened
@@ -210,6 +214,9 @@ const RecoveryModeUI: FunctionComponent = () => {
           open={isMacTerminalInfoModalVisible()}
           onClose={macTerminalInfoCloseHandler}
         />
+        <WaitingForBackButtonModal
+          open={isWaitingForBackButtonVisible()}
+        />
       </ThemeProvider>
     </>
   )

libs/msc-flash/msc-flash-harmony/src/lib/ui/waiting-for-back-button-modal.component.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import styled from "styled-components"
+import Icon from "Core/__deprecated__/renderer/components/core/icon/icon.component"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
+import { intl } from "Core/__deprecated__/renderer/utils/intl"
+import React from "react"
+import { defineMessages } from "react-intl"
+import { ModalSize } from "Core/__deprecated__/renderer/components/core/modal/modal.interface"
+import { ModalContent, ModalDialog, RoundIconWrapper } from "Core/ui"
+import { IconType } from "Core/__deprecated__/renderer/components/core/icon/icon-type"
+import Text, {
+  TextDisplayStyle,
+} from "Core/__deprecated__/renderer/components/core/text/text.component"
+
+interface CompletedInfoModalProps {
+  open: boolean
+}
+
+const messages = defineMessages({
+  macTerminalInfoModalTitle: {
+    id: "module.recoveryMode.harmony.title",
+  },
+  macTerminalInfoModalSubtitle: {
+    id: "module.recoveryMode.mocal.terminalInfo.subtitle",
+  },
+  macTerminalInfoModalDescription: {
+    id: "module.recoveryMode.mocal.terminalInfo.description",
+  },
+  macTerminalInfoModalStep1: {
+    id: "module.recoveryMode.mocal.terminalInfo.step1",
+  },
+  macTerminalInfoModalStep2: {
+    id: "module.recoveryMode.mocal.terminalInfo.step2",
+  },
+  macTerminalInfoModalStep3: {
+    id: "module.recoveryMode.mocal.terminalInfo.step3",
+  },
+  macTerminalInfoModalStep4: {
+    id: "module.recoveryMode.mocal.terminalInfo.step4",
+  },
+})
+
+export const WaitingForBackButtonModal: FunctionComponent<CompletedInfoModalProps> = ({
+  open,
+}) => {
+  return (
+    <>
+      <ModalDialog
+        open={open}
+        title={intl.formatMessage(messages.macTerminalInfoModalTitle)}
+        size={ModalSize.Small}
+      >
+        <ModalContent>
+          <RoundIconWrapper>
+            <Icon type={IconType.CheckCircleBlack} width={4.8} />
+          </RoundIconWrapper>
+          <Text
+            displayStyle={TextDisplayStyle.Headline4}
+            message={messages.macTerminalInfoModalSubtitle}
+          />
+          <Descrption>
+            <Text displayStyle={TextDisplayStyle.Headline5}>Completed!</Text>
+          </Descrption>
+        </ModalContent>
+      </ModalDialog>
+    </>
+  )
+}
+
+const Descrption = styled.div`
+  margin-top: 0.8rem;
+`