[CP-3184] Implement UI modal requesting the eject operation on Windows

libs/core/__deprecated__/renderer/components/core/icon/icon-type.ts

@@ -8,6 +8,7 @@ export enum IconType {
   ArrowLongLeft,
   ArrowLongRight,
   AttachContact,
+  BackArrowIcon,
   BackupFolder,
   Battery,
   BorderCheckIcon,

libs/core/__deprecated__/renderer/components/core/icon/icon.config.ts

@@ -8,6 +8,7 @@ import Arrow from "Core/__deprecated__/renderer/svg/arrow.svg"
 import ArrowLongLeft from "Core/__deprecated__/renderer/svg/arrow-long-left.svg"
 import ArrowLongRight from "Core/__deprecated__/renderer/svg/arrow-long-right.svg"
 import AttachContact from "Core/__deprecated__/renderer/svg/attach-contact.svg"
+import BackArrowIcon from "Core/__deprecated__/renderer/svg/back-arrow-icon.svg"
 import BackupFolder from "Core/__deprecated__/renderer/svg/backup-folder.svg"
 import Battery from "Core/__deprecated__/renderer/svg/battery.svg"
 import BorderCheck from "Core/__deprecated__/renderer/svg/border-check-icon.svg"
@@ -147,6 +148,9 @@ const typeToIcon: Partial<Record<IconType, typeof Arrow>> = {
   [IconType.AttachContact]: AttachContact,
   // AUTO DISABLED - fix me if you like :)
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  [IconType.BackArrowIcon]: BackArrowIcon,
+  // AUTO DISABLED - fix me if you like :)
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   [IconType.BackupFolder]: BackupFolder,
   // AUTO DISABLED - fix me if you like :)
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

libs/core/__deprecated__/renderer/locales/default/en-US.json

@@ -1018,6 +1018,8 @@
   "module.recoveryMode.modal.restarting.message": "Please do not disconnect your Harmony.",
   "module.recoveryMode.modal.error.subtitle": "Recovery failed",
   "module.recoveryMode.modal.error.message": "The process was interrupted. Please try again.",
+  "module.recoveryMode.modal.waitingForBackButton.subtitle": "Almost finished...",
+  "module.recoveryMode.modal.waitingForBackButton.description": "Press the back button on your device to complete the recovery process.",
   "module.recoveryMode.mocal.terminalInfo.subtitle": "Just a few more steps...",
   "module.recoveryMode.mocal.terminalInfo.description": "The Terminal was opened in the background",
   "module.recoveryMode.mocal.terminalInfo.step1": "1. Switch to the open terminal",

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/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,12 +130,15 @@ const RecoveryModeUI: FunctionComponent = () => {
   const isRestartingModalVisible = (): boolean => {
     return flashingProcessState === FlashingProcessState.Restarting
   }
+  const isWaitingForBackButtonVisible = (): boolean => {
+    return flashingProcessState === FlashingProcessState.WaitingForBackButton
+  }
 
   const isMacTerminalInfoModalVisible = (): boolean => {
     return flashingProcessState === FlashingProcessState.TerminalOpened
   }
 
-  const macTerminalInfoCloseHandler = (): void => {
+  const cancelMscFlashing = (): void => {
     dispatch(abortMscFlashing({ reason: FlashingProcessState.Canceled }))
   }
 
@@ -208,7 +212,11 @@ const RecoveryModeUI: FunctionComponent = () => {
         <RestartingDeviceModal open={isRestartingModalVisible()} />
         <MacTerminalInfoModal
           open={isMacTerminalInfoModalVisible()}
-          onClose={macTerminalInfoCloseHandler}
+          onClose={cancelMscFlashing}
+        />
+        <WaitingForBackButtonModal
+          open={isWaitingForBackButtonVisible()}
+          onClose={cancelMscFlashing}
         />
       </ThemeProvider>
     </>

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

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { defineMessages } from "react-intl"
+import styled from "styled-components"
+import { ModalContent, ModalDialog, RoundIconWrapper } from "Core/ui"
+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 { ModalSize } from "Core/__deprecated__/renderer/components/core/modal/modal.interface"
+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
+  onClose: () => void
+}
+
+const messages = defineMessages({
+  waitingForBackButtonModalTitle: {
+    id: "module.recoveryMode.harmony.title",
+  },
+  waitingForBackButtonModalSubtitle: {
+    id: "module.recoveryMode.modal.waitingForBackButton.subtitle",
+  },
+  waitingForBackButtonModalDescription: {
+    id: "module.recoveryMode.modal.waitingForBackButton.description",
+  },
+})
+
+export const WaitingForBackButtonModal: FunctionComponent<
+  CompletedInfoModalProps
+> = ({ open, onClose }) => {
+  return (
+    <>
+      <ModalDialog
+        open={open}
+        title={intl.formatMessage(messages.waitingForBackButtonModalTitle)}
+        size={ModalSize.Small}
+        closeable={true}
+        closeButton={false}
+        closeModal={onClose}
+        onClose={onClose}
+      >
+        <ModalContent>
+          <RoundIconWrapper>
+            <Icon type={IconType.CheckCircleBlack} width={4.8} />
+          </RoundIconWrapper>
+          <Text
+            displayStyle={TextDisplayStyle.Headline4}
+            message={messages.waitingForBackButtonModalSubtitle}
+          />
+          <Descrption>
+            <Text
+              displayStyle={TextDisplayStyle.Paragraph4}
+              message={messages.waitingForBackButtonModalDescription}
+            />
+          </Descrption>
+          <BackArrowIconWrapper>
+            <Icon type={IconType.BackArrowIcon} width={4.8} />
+          </BackArrowIconWrapper>
+        </ModalContent>
+      </ModalDialog>
+    </>
+  )
+}
+
+const Descrption = styled.div`
+  margin-top: 0.8rem;
+`
+
+export const BackArrowIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1.4rem;
+`