From 3c2f9363574dbed05ed8370d0429ab336bf38c3d Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Wed, 14 Aug 2024 11:22:24 -0400
Subject: [PATCH] Add check for updates button for newly available versions
 (#4825)

---
 web/src/components/apps/AppVersionHistory.tsx |  1 +
 .../apps/AvailableUpdatesComponent.tsx        | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/web/src/components/apps/AppVersionHistory.tsx b/web/src/components/apps/AppVersionHistory.tsx
index 35126e5a69..084c614292 100644
--- a/web/src/components/apps/AppVersionHistory.tsx
+++ b/web/src/components/apps/AppVersionHistory.tsx
@@ -2111,6 +2111,7 @@ class AppVersionHistory extends Component<Props, State> {
                               startUpgradeService={this.startUpgradeService}
                               isAirgap={app?.isAirgap}
                               airgapUploader={airgapUploader}
+                              fetchAvailableUpdates={this.fetchAvailableUpdates}
                             />
                           )}
                         </>
diff --git a/web/src/components/apps/AvailableUpdatesComponent.tsx b/web/src/components/apps/AvailableUpdatesComponent.tsx
index 78e1cb9c86..c817d1c57c 100644
--- a/web/src/components/apps/AvailableUpdatesComponent.tsx
+++ b/web/src/components/apps/AvailableUpdatesComponent.tsx
@@ -12,6 +12,7 @@ const AvailableUpdatesComponent = ({
   startUpgradeService,
   airgapUploader,
   isAirgap,
+  fetchAvailableUpdates,
 }: {
   updates: AvailableUpdate[];
   showReleaseNotes: (releaseNotes: string) => void;
@@ -23,11 +24,12 @@ const AvailableUpdatesComponent = ({
   startUpgradeService: (version: AvailableUpdate) => void;
   airgapUploader: AirgapUploader | null;
   isAirgap: boolean;
+  fetchAvailableUpdates: () => void;
 }) => {
   return (
     <div className="TableDiff--Wrapper card-bg u-marginBottom--30">
       <div className="flex justifyContent--spaceBetween alignItems--center u-marginBottom--15">
-        <p className="u-fontSize--normal u-fontWeight--medium card-title tw-pb-4">
+        <p className="u-fontSize--normal u-fontWeight--medium card-title">
           Available Updates
         </p>
         {isAirgap && airgapUploader && (
@@ -44,6 +46,23 @@ const AvailableUpdatesComponent = ({
             </MountAware>
           </div>
         )}
+        <div className="flex alignItems--center u-marginRight--20">
+          <span
+            className="flex-auto flex alignItems--center link u-fontSize--small"
+            onClick={fetchAvailableUpdates}
+          >
+            <Icon
+              icon="check-update"
+              size={16}
+              className="clickable u-marginRight--5"
+              color={""}
+              style={{}}
+              disableFill={false}
+              removeInlineStyle={false}
+            />
+            Check for update
+          </span>
+        </div>
       </div>
       {updates && updates.length > 0 ? (
         <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">