[CP-1742] displaying checking for update failed

packages/app/src/__deprecated__/renderer/locales/default/en-US.json

@@ -666,6 +666,7 @@
   "module.overview.systemUpdateAction": "Update now",
   "module.overview.systemUpdateAvailable": "Update is available",
   "module.overview.systemUpdateDownloaded": "Update is available",
+  "module.overview.systemUpdateCheckFailed": "Checking for update failed",
   "module.overview.systemUpdateUpToDate": "You’re up to date.",
   "module.overview.systemVersion": "MuditaOS version",
   "module.overview.systemVersionTitle": "Current version:",

packages/app/src/overview/components/overview-screens/harmony-overview/harmony-overview.component.tsx

@@ -8,6 +8,7 @@ import { DeviceType } from "App/device/constants"
 import { Feature, flags } from "App/feature-flags"
 import { HarmonyOverviewProps } from "App/overview/components/overview-screens/harmony-overview/harmony-overview.component.interface"
 import OverviewContent from "App/overview/components/overview-screens/harmony-overview/overview-content.component"
+import { CheckForUpdateLocalState } from "App/overview/components/overview-screens/overview.enum"
 import { UpdateOsFlow } from "App/overview/components/update-os-flow"
 import UpdatingForceModalFlow from "App/overview/components/updating-force-modal-flow/updating-force-modal-flow.component"
 import { UpdatingForceModalFlowState } from "App/overview/components/updating-force-modal-flow/updating-force-modal-flow.enum"
@@ -50,13 +51,8 @@ export const HarmonyOverview: FunctionComponent<HarmonyOverviewProps> = ({
   setCheckForUpdateState,
 }) => {
   const [osVersionSupported, setOsVersionSupported] = useState(true)
-
-  const goToHelp = (): void => {
-    void ipcRenderer.callMain(HelpActions.OpenWindow)
-  }
-
-  const harmonySilentCheckForUpdate = () =>
-    checkForUpdate(DeviceType.MuditaHarmony, CheckForUpdateMode.SilentCheck)
+  const [checkForUpdateLocalState, setCheckForUpdateLocalState] =
+    useState<CheckForUpdateLocalState>()
 
   useEffect(() => {
     try {
@@ -76,6 +72,37 @@ export const HarmonyOverview: FunctionComponent<HarmonyOverviewProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [silentCheckForUpdateState])
 
+  useEffect(() => {
+    if (
+      silentCheckForUpdateState === SilentCheckForUpdateState.Failed ||
+      checkingForUpdateState === State.Failed
+    ) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.Failed)
+    }
+
+    if (silentCheckForUpdateState === SilentCheckForUpdateState.Loading) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.SilentCheckLoading)
+    }
+
+    if (checkingForUpdateState === State.Loading) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.Loading)
+    }
+
+    if (
+      silentCheckForUpdateState === SilentCheckForUpdateState.Loaded ||
+      checkingForUpdateState === State.Loaded
+    ) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.Loaded)
+    }
+  }, [silentCheckForUpdateState, checkingForUpdateState])
+
+  const goToHelp = (): void => {
+    void ipcRenderer.callMain(HelpActions.OpenWindow)
+  }
+
+  const harmonySilentCheckForUpdate = () =>
+    checkForUpdate(DeviceType.MuditaHarmony, CheckForUpdateMode.SilentCheck)
+
   // AUTO DISABLED - fix me if you like :)
   // eslint-disable-next-line @typescript-eslint/require-await
   const closeUpdatingForceModalFlow = async () => {
@@ -166,18 +193,21 @@ export const HarmonyOverview: FunctionComponent<HarmonyOverviewProps> = ({
         disconnectDevice={disconnectDevice}
         osVersion={osVersion}
         pureOsAvailable={(availableReleasesForUpdate ?? []).length > 0}
+        checkForUpdateFailed={
+          checkForUpdateLocalState === CheckForUpdateLocalState.Failed
+        }
+        checkForUpdateInProgress={
+          checkForUpdateLocalState ===
+          CheckForUpdateLocalState.SilentCheckLoading
+        }
         checkForUpdatePerformed={
-          silentCheckForUpdateState === SilentCheckForUpdateState.Loaded ||
-          checkingForUpdateState === State.Loaded
+          checkForUpdateLocalState === CheckForUpdateLocalState.Loaded
         }
         pureOsDownloaded={areAllReleasesDownloaded}
         onUpdateCheck={checkForHarmonyUpdate}
         onUpdateInstall={() => updateReleases()}
         onUpdateDownload={openCheckForUpdateModal}
         serialNumber={serialNumber}
-        checkForUpdateInProgress={
-          silentCheckForUpdateState === SilentCheckForUpdateState.Loading
-        }
       />
     </>
   )

packages/app/src/overview/components/overview-screens/harmony-overview/overview-content.component.tsx

@@ -23,8 +23,9 @@ interface OverviewProps {
   readonly osVersion: string
   readonly batteryLevel: number
   readonly pureOsAvailable: boolean
-  readonly pureOsDownloaded: boolean | undefined
+  readonly pureOsDownloaded: boolean
   readonly checkForUpdatePerformed: boolean
+  readonly checkForUpdateFailed: boolean
   readonly deviceType: DeviceType
   readonly serialNumber: string | undefined
 }
@@ -43,6 +44,7 @@ const OverviewContent: FunctionComponent<OverviewProps> = ({
   serialNumber,
   checkForUpdateInProgress,
   checkForUpdatePerformed,
+  checkForUpdateFailed,
 }) => {
   return (
     <OverviewWrapper>
@@ -62,6 +64,7 @@ const OverviewContent: FunctionComponent<OverviewProps> = ({
         onUpdate={onUpdateInstall}
         checkForUpdateInProgress={checkForUpdateInProgress}
         checkForUpdatePerformed={checkForUpdatePerformed}
+        checkForUpdateFailed={checkForUpdateFailed}
       />
     </OverviewWrapper>
   )

packages/app/src/overview/components/overview-screens/overview.enum.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export enum CheckForUpdateLocalState {
+  Loading = "loading",
+  SilentCheckLoading = "silent-check-loading",
+  Failed = "failed",
+  Loaded = "loaded",
+}

packages/app/src/overview/components/overview-screens/pure-overview/overview-content.component.tsx

@@ -23,9 +23,10 @@ interface OverviewContentProps {
   readonly networkName: string
   readonly networkLevel: number | undefined
   readonly pureOsAvailable: boolean
-  readonly pureOsDownloaded: boolean | undefined
+  readonly pureOsDownloaded: boolean
   readonly checkForUpdatePerformed: boolean
   readonly checkForUpdateInProgress: boolean
+  readonly checkForUpdateFailed: boolean
   readonly osVersion: string
   readonly caseColour: CaseColor | undefined
   readonly lastBackupDate: Date
@@ -52,6 +53,7 @@ const OverviewContent: FunctionComponent<OverviewContentProps> = ({
   pureOsDownloaded,
   checkForUpdatePerformed,
   checkForUpdateInProgress,
+  checkForUpdateFailed,
   toggleDevMode,
   osVersion,
   caseColour,
@@ -79,6 +81,7 @@ const OverviewContent: FunctionComponent<OverviewContentProps> = ({
       updateAvailable={pureOsAvailable}
       checkForUpdatePerformed={checkForUpdatePerformed}
       checkForUpdateInProgress={checkForUpdateInProgress}
+      checkForUpdateFailed={checkForUpdateFailed}
       osVersion={osVersion}
       onUpdateCheck={onUpdateCheck}
       onDownload={onUpdateDownload}

packages/app/src/overview/components/overview-screens/pure-overview/pure-overview.component.tsx

@@ -11,6 +11,7 @@ import { Feature, flags } from "App/feature-flags"
 import BackupDeviceFlow, {
   BackupDeviceFlowState,
 } from "App/overview/components/backup-device-flow/backup-device-flow.component"
+import { CheckForUpdateLocalState } from "App/overview/components/overview-screens/overview.enum"
 import OverviewContent from "App/overview/components/overview-screens/pure-overview/overview-content.component"
 import { PureOverviewProps } from "App/overview/components/overview-screens/pure-overview/pure-overview.interface"
 import RestoreDeviceFlow, {
@@ -85,10 +86,8 @@ export const PureOverview: FunctionComponent<PureOverviewProps> = ({
     failedModal: false,
   })
   const [progress, setProgress] = useState(0)
-
-  const goToHelp = (): void => {
-    void ipcRenderer.callMain(HelpActions.OpenWindow)
-  }
+  const [checkForUpdateLocalState, setCheckForUpdateLocalState] =
+    useState<CheckForUpdateLocalState>()
 
   useEffect(() => {
     try {
@@ -134,6 +133,34 @@ export const PureOverview: FunctionComponent<PureOverviewProps> = ({
     }
   }, [openModal, progress])
 
+  useEffect(() => {
+    if (
+      silentCheckForUpdateState === SilentCheckForUpdateState.Failed ||
+      checkingForUpdateState === State.Failed
+    ) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.Failed)
+    }
+
+    if (silentCheckForUpdateState === SilentCheckForUpdateState.Loading) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.SilentCheckLoading)
+    }
+
+    if (checkingForUpdateState === State.Loading) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.Loading)
+    }
+
+    if (
+      silentCheckForUpdateState === SilentCheckForUpdateState.Loaded ||
+      checkingForUpdateState === State.Loaded
+    ) {
+      setCheckForUpdateLocalState(CheckForUpdateLocalState.Loaded)
+    }
+  }, [silentCheckForUpdateState, checkingForUpdateState])
+
+  const goToHelp = (): void => {
+    void ipcRenderer.callMain(HelpActions.OpenWindow)
+  }
+
   const closeUpdatingForceModalFlow = () => {
     setUpdateState(State.Initial)
   }
@@ -236,7 +263,7 @@ export const PureOverview: FunctionComponent<PureOverviewProps> = ({
   }
 
   const tryAgainPureUpdate = () => {
-    checkForUpdate(DeviceType.MuditaHarmony, CheckForUpdateMode.TryAgain)
+    checkForUpdate(DeviceType.MuditaPure, CheckForUpdateMode.TryAgain)
   }
 
   const openCheckForUpdateModal = () => {
@@ -309,12 +336,15 @@ export const PureOverview: FunctionComponent<PureOverviewProps> = ({
         networkLevel={networkLevel}
         pureOsAvailable={(availableReleasesForUpdate ?? []).length > 0}
         pureOsDownloaded={areAllReleasesDownloaded}
+        checkForUpdateFailed={
+          checkForUpdateLocalState === CheckForUpdateLocalState.Failed
+        }
         checkForUpdateInProgress={
-          silentCheckForUpdateState === SilentCheckForUpdateState.Loading
+          checkForUpdateLocalState ===
+          CheckForUpdateLocalState.SilentCheckLoading
         }
         checkForUpdatePerformed={
-          silentCheckForUpdateState === SilentCheckForUpdateState.Loaded ||
-          checkingForUpdateState === State.Loaded
+          checkForUpdateLocalState === CheckForUpdateLocalState.Loaded
         }
         onUpdateCheck={checkForPureUpdate}
         onUpdateInstall={() => updateReleases()}

packages/app/src/overview/components/system-update-text/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export * from "./system-update-text.component"

packages/app/src/overview/components/system-update-text/system-update-text.component.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { SystemUpdateTextProps } from "App/overview/components/system-update-text/system-update-text.interface"
+import { AvailableUpdateText } from "App/overview/components/system-update-text/system-update-text.styled"
+import { FunctionComponent } from "App/__deprecated__/renderer/types/function-component.interface"
+import React from "react"
+import { defineMessages, FormattedMessage } from "react-intl"
+
+const messages = defineMessages({
+  systemUpdateDownloaded: {
+    id: "module.overview.systemUpdateDownloaded",
+  },
+  systemUpdateAvailable: {
+    id: "module.overview.systemUpdateAvailable",
+  },
+  systemUpdateUpToDate: {
+    id: "module.overview.systemUpdateUpToDate",
+  },
+  systemUpdateCheckFailed: {
+    id: "module.overview.systemUpdateCheckFailed",
+  },
+})
+
+export const SystemUpdateText: FunctionComponent<SystemUpdateTextProps> = ({
+  updateAvailable,
+  updateDownloaded,
+  checkForUpdateInProgress,
+  checkForUpdatePerformed,
+  checkForUpdateFailed,
+}) => {
+  if (checkForUpdateFailed) {
+    return (
+      <AvailableUpdateText>
+        <FormattedMessage {...messages.systemUpdateCheckFailed} />
+      </AvailableUpdateText>
+    )
+  }
+
+  if (checkForUpdateInProgress) {
+    return null
+  }
+
+  if (!checkForUpdatePerformed) {
+    return null
+  }
+
+  if (updateAvailable && updateDownloaded) {
+    return (
+      <AvailableUpdateText>
+        <FormattedMessage {...messages.systemUpdateDownloaded} />
+      </AvailableUpdateText>
+    )
+  }
+
+  if (updateAvailable && !updateDownloaded) {
+    return (
+      <AvailableUpdateText>
+        <FormattedMessage {...messages.systemUpdateAvailable} />
+      </AvailableUpdateText>
+    )
+  }
+
+  return (
+    <AvailableUpdateText>
+      <FormattedMessage {...messages.systemUpdateUpToDate} />
+    </AvailableUpdateText>
+  )
+}

packages/app/src/overview/components/system-update-text/system-update-text.interface.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export interface SystemUpdateTextProps {
+  updateAvailable: boolean
+  updateDownloaded: boolean
+  checkForUpdateInProgress: boolean
+  checkForUpdatePerformed: boolean
+  checkForUpdateFailed: boolean
+}

packages/app/src/overview/components/system-update-text/system-update-text.styled.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import Text, {
+  TextDisplayStyle,
+} from "App/__deprecated__/renderer/components/core/text/text.component"
+import {
+  backgroundColor,
+  borderRadius,
+} from "App/__deprecated__/renderer/styles/theming/theme-getters"
+import styled from "styled-components"
+
+export const AvailableUpdateText = styled(Text).attrs(() => ({
+  displayStyle: TextDisplayStyle.Label,
+  color: "secondary",
+}))`
+  margin-left: 1.6rem;
+  text-transform: none;
+  display: inline-box;
+  padding: 0.3rem 0.5rem;
+  border-radius: ${borderRadius("medium")};
+  background-color: ${backgroundColor("minor")};
+`