From cd2d2f97e4896840b14206664a9e40637bf867c6 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 27 Jun 2022 10:11:54 +0300
Subject: [PATCH] Make UpdateButton warning prop observable

by using computed() structure

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/update-button/update-button.tsx    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/update-button/update-button.tsx b/src/renderer/components/update-button/update-button.tsx
index 0185a80c02..51fd5b45fa 100644
--- a/src/renderer/components/update-button/update-button.tsx
+++ b/src/renderer/components/update-button/update-button.tsx
@@ -13,13 +13,14 @@ import type { IconProps } from "../icon";
 import { Icon } from "../icon";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { observer } from "mobx-react";
-import updateWarningLevelInjectable from "../../../main/application-update/update-warning-level/update-warning-level.injectable";
+import updateWarningLevelInjectable from "../../../common/application-update/update-warning-level.injectable";
+import { computed, IComputedValue } from "mobx";
 
 interface UpdateButtonProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 interface Dependencies {
-  warningLevel: "light" | "medium" | "high" | "";
+  warningLevel: IComputedValue<"light" | "medium" | "high" | "">;
   update: () => void;
 }
 
@@ -32,7 +33,7 @@ export const NonInjectedUpdateButton = observer(({ warningLevel, update, id }: U
     setOpened(!opened);
   };
 
-  if (!warningLevel) {
+  if (!warningLevel.get()) {
     return null;
   }
 
@@ -40,11 +41,11 @@ export const NonInjectedUpdateButton = observer(({ warningLevel, update, id }: U
     <>
       <button
         data-testid="update-button"
-        data-warning-level={warningLevel}
+        data-warning-level={warningLevel.get()}
         id={buttonId}
         className={cssNames(styles.updateButton, {
-          [styles.warningHigh]: warningLevel === "high",
-          [styles.warningMedium]: warningLevel === "medium",
+          [styles.warningHigh]: warningLevel.get() === "high",
+          [styles.warningMedium]: warningLevel.get() === "medium",
         })}
       >
         Update
@@ -78,7 +79,7 @@ export const UpdateButton = withInjectables<Dependencies, UpdateButtonProps>(Non
 
     return {
       ...props,
-      warningLevel: warnignLevel.value.get(),
+      warningLevel: computed(() => warnignLevel.value.get()),
       update,
     };
   },