From 91c78ee3a718b957bdbaccb7d6ddaedb5f2b4860 Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Thu, 15 Aug 2024 19:58:03 +0000
Subject: [PATCH 1/6] wip

---
 .../apps/AvailableUpdatesComponent.tsx        | 76 ++++++++++++++-----
 .../components/DashboardVersionCard.tsx       | 66 ++++++++++++++++
 2 files changed, 124 insertions(+), 18 deletions(-)

diff --git a/web/src/components/apps/AvailableUpdatesComponent.tsx b/web/src/components/apps/AvailableUpdatesComponent.tsx
index c817d1c57c..7bb5b84031 100644
--- a/web/src/components/apps/AvailableUpdatesComponent.tsx
+++ b/web/src/components/apps/AvailableUpdatesComponent.tsx
@@ -3,6 +3,7 @@ import MountAware from "@components/shared/MountAware";
 import { AirgapUploader } from "@src/utilities/airgapUploader";
 import { Utilities } from "@src/utilities/utilities";
 import { AvailableUpdate } from "@types";
+import { useNavigate } from "react-router-dom";
 import ReactTooltip from "react-tooltip";
 
 const AvailableUpdatesComponent = ({
@@ -13,6 +14,8 @@ const AvailableUpdatesComponent = ({
   airgapUploader,
   isAirgap,
   fetchAvailableUpdates,
+  dashboardView = false,
+  appSlug,
 }: {
   updates: AvailableUpdate[];
   showReleaseNotes: (releaseNotes: string) => void;
@@ -21,13 +24,22 @@ const AvailableUpdatesComponent = ({
     isLoading?: boolean;
     error?: string;
   } | null;
-  startUpgradeService: (version: AvailableUpdate) => void;
-  airgapUploader: AirgapUploader | null;
-  isAirgap: boolean;
+  startUpgradeService?: (version: AvailableUpdate) => void;
+  airgapUploader?: AirgapUploader | null;
+  isAirgap?: boolean;
   fetchAvailableUpdates: () => void;
+  dashboardView?: boolean;
+  appSlug?: string;
 }) => {
+  const navigate = useNavigate();
   return (
-    <div className="TableDiff--Wrapper card-bg u-marginBottom--30">
+    <div
+      className={`${
+        !dashboardView
+          ? "TableDiff--Wrapper card-bg u-marginBottom--30"
+          : "tw-mt-4"
+      }`}
+    >
       <div className="flex justifyContent--spaceBetween alignItems--center u-marginBottom--15">
         <p className="u-fontSize--normal u-fontWeight--medium card-title">
           Available Updates
@@ -46,7 +58,11 @@ const AvailableUpdatesComponent = ({
             </MountAware>
           </div>
         )}
-        <div className="flex alignItems--center u-marginRight--20">
+        <div
+          className={`flex alignItems--center ${
+            !dashboardView && "u-marginRight--20"
+          }`}
+        >
           <span
             className="flex-auto flex alignItems--center link u-fontSize--small"
             onClick={fetchAvailableUpdates}
@@ -114,24 +130,48 @@ const AvailableUpdatesComponent = ({
                         />
                       </>
                     )}
-                    <button
-                      className={"btn tw-ml-2 primary blue"}
-                      onClick={() => startUpgradeService(update)}
-                      disabled={!update.isDeployable || isCurrentVersionLoading}
-                    >
-                      <span
-                        key={update.nonDeployableCause}
-                        data-tip-disable={update.isDeployable}
-                        data-tip={update.nonDeployableCause}
-                        data-for="disable-deployment-tooltip"
+                    {!dashboardView && (
+                      <button
+                        className={"btn tw-ml-2 primary blue"}
+                        onClick={() => startUpgradeService(update)}
+                        disabled={
+                          !update.isDeployable || isCurrentVersionLoading
+                        }
                       >
-                        {isCurrentVersionLoading ? "Preparing..." : "Deploy"}
-                      </span>
-                    </button>
+                        <span
+                          key={update.nonDeployableCause}
+                          data-tip-disable={update.isDeployable}
+                          data-tip={update.nonDeployableCause}
+                          data-for="disable-deployment-tooltip"
+                        >
+                          {isCurrentVersionLoading ? "Preparing..." : "Deploy"}
+                        </span>
+                      </button>
+                    )}
                     <ReactTooltip
                       effect="solid"
                       id="disable-deployment-tooltip"
                     />
+                    {dashboardView && (
+                      <button
+                        className={"btn tw-ml-2 primary blue"}
+                        onClick={() =>
+                          navigate(`/app/${appSlug}/version-history`)
+                        }
+                        disabled={
+                          !update.isDeployable || isCurrentVersionLoading
+                        }
+                      >
+                        <span
+                          key={update.nonDeployableCause}
+                          data-tip-disable={update.isDeployable}
+                          data-tip={update.nonDeployableCause}
+                          data-for="disable-deployment-tooltip"
+                        >
+                          Go to Version history
+                        </span>
+                      </button>
+                    )}
                   </div>
                 </div>
                 {upgradeService?.error &&
diff --git a/web/src/features/Dashboard/components/DashboardVersionCard.tsx b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
index 32e9c87294..66501b1426 100644
--- a/web/src/features/Dashboard/components/DashboardVersionCard.tsx
+++ b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
@@ -27,6 +27,7 @@ import "@src/scss/components/watches/DashboardCard.scss";
 import Icon from "@src/components/Icon";
 
 import {
+  AvailableUpdate,
   Downstream,
   KotsParams,
   Metadata,
@@ -36,11 +37,13 @@ import {
 } from "@types";
 import { AirgapUploader } from "@src/utilities/airgapUploader";
 import EditConfigIcon from "@components/shared/EditConfigIcon";
+import AvailableUpdatesComponent from "@components/apps/AvailableUpdatesComponent";
 
 type Props = {
   adminConsoleMetadata: Metadata | null;
   airgapUploader: AirgapUploader | null;
   airgapUploadError: string | null;
+
   checkingForUpdates: boolean;
   checkingForUpdateError: boolean;
   checkingUpdateText: string;
@@ -71,6 +74,7 @@ type Props = {
 };
 
 type State = {
+  availableUpdates: AvailableUpdate[];
   confirmType: string;
   deployView: boolean;
   displayConfirmDeploymentModal: boolean;
@@ -78,6 +82,7 @@ type State = {
   displayShowDetailsModal: boolean;
   firstSequence: string;
   secondSequence: string;
+  isFetchingAvailableUpdates: boolean;
   isRedeploy: boolean;
   isSkipPreflights: boolean;
   kotsUpdateChecker: Repeater;
@@ -110,6 +115,11 @@ type State = {
   versionToDeploy: Version | null;
   viewLogsErrMsg: string;
   yamlErrorDetails: string[];
+  upgradeService: {
+    versionLabel?: string;
+    isLoading?: boolean;
+    error?: string;
+  } | null;
 };
 
 const DashboardVersionCard = (props: Props) => {
@@ -119,12 +129,14 @@ const DashboardVersionCard = (props: Props) => {
       ...newState,
     }),
     {
+      availableUpdates: [],
       confirmType: "",
       deployView: false,
       displayConfirmDeploymentModal: false,
       displayKotsUpdateModal: false,
       displayShowDetailsModal: false,
       firstSequence: "",
+      isFetchingAvailableUpdates: false,
       isSkipPreflights: false,
       isRedeploy: false,
       kotsUpdateChecker: new Repeater(),
@@ -156,6 +168,7 @@ const DashboardVersionCard = (props: Props) => {
       versionToDeploy: null,
       viewLogsErrMsg: "",
       yamlErrorDetails: [],
+      upgradeService: {},
     }
   );
   const navigate = useNavigate();
@@ -178,6 +191,9 @@ const DashboardVersionCard = (props: Props) => {
     if (props.links && props.links.length > 0) {
       setState({ selectedAction: props.links[0] });
     }
+    if (props.adminConsoleMetadata?.isEmbeddedCluster) {
+      fetchAvailableUpdates();
+    }
   }, []);
 
   useEffect(() => {
@@ -1397,6 +1413,33 @@ const DashboardVersionCard = (props: Props) => {
     );
   };
 
+  const fetchAvailableUpdates = async (showSpinner = true) => {
+    const appSlug = params.slug;
+    setState({ isFetchingAvailableUpdates: showSpinner });
+    const res = await fetch(
+      `${process.env.API_ENDPOINT}/app/${appSlug}/updates`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        method: "GET",
+      }
+    );
+    if (!res.ok) {
+      setState({ isFetchingAvailableUpdates: false });
+      return;
+    }
+    const response = await res.json();
+
+    setState({
+      isFetchingAvailableUpdates: false,
+      // only show the most recent available update
+      availableUpdates: response.updates && [response.updates[0]],
+    });
+    return response;
+  };
+
   const {
     currentVersion,
     checkingForUpdates,
@@ -1520,7 +1563,30 @@ const DashboardVersionCard = (props: Props) => {
           </p>
         </div>
       )}
+      {props.adminConsoleMetadata?.isEmbeddedCluster &&
+        state.availableUpdates?.length > 0 && (
+          <>
+            {state.isFetchingAvailableUpdates ? (
+              <div className="TableDiff--Wrapper card-bg u-marginBottom--30">
+                <div className="flex-column flex1 alignItems--center justifyContent--center">
+                  <Loader size="30" />
+                </div>
+              </div>
+            ) : (
+              <AvailableUpdatesComponent
+                updates={state.availableUpdates}
+                showReleaseNotes={showReleaseNotes}
+                upgradeService={state.upgradeService}
+                fetchAvailableUpdates={fetchAvailableUpdates}
+                dashboardView={true}
+                appSlug={params.slug}
+              />
+            )}
+          </>
+        )}
+
       {renderBottomSection()}
+
       <div className="u-marginTop--10">
         <Link
           to={`/app/${selectedApp?.slug}/version-history`}

From 653a0705fedcc83a07d33b4ec482019dc2447687 Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Fri, 16 Aug 2024 20:06:22 +0000
Subject: [PATCH 2/6] wip

---
 .../apps/AvailableUpdatesComponent.tsx        |  81 ++++--------
 .../components/AvailableUpdateCard.tsx        | 121 ++++++++++++++++++
 .../components/DashboardVersionCard.tsx       |  77 +++++++----
 3 files changed, 194 insertions(+), 85 deletions(-)
 create mode 100644 web/src/features/Dashboard/components/AvailableUpdateCard.tsx

diff --git a/web/src/components/apps/AvailableUpdatesComponent.tsx b/web/src/components/apps/AvailableUpdatesComponent.tsx
index 7bb5b84031..afde1014ff 100644
--- a/web/src/components/apps/AvailableUpdatesComponent.tsx
+++ b/web/src/components/apps/AvailableUpdatesComponent.tsx
@@ -1,10 +1,10 @@
+import ReactTooltip from "react-tooltip";
+
 import Icon from "@components/Icon";
 import MountAware from "@components/shared/MountAware";
 import { AirgapUploader } from "@src/utilities/airgapUploader";
 import { Utilities } from "@src/utilities/utilities";
 import { AvailableUpdate } from "@types";
-import { useNavigate } from "react-router-dom";
-import ReactTooltip from "react-tooltip";
 
 const AvailableUpdatesComponent = ({
   updates,
@@ -14,8 +14,6 @@ const AvailableUpdatesComponent = ({
   airgapUploader,
   isAirgap,
   fetchAvailableUpdates,
-  dashboardView = false,
-  appSlug,
 }: {
   updates: AvailableUpdate[];
   showReleaseNotes: (releaseNotes: string) => void;
@@ -24,22 +22,13 @@ const AvailableUpdatesComponent = ({
     isLoading?: boolean;
     error?: string;
   } | null;
-  startUpgradeService?: (version: AvailableUpdate) => void;
-  airgapUploader?: AirgapUploader | null;
-  isAirgap?: boolean;
+  startUpgradeService: (version: AvailableUpdate) => void;
+  airgapUploader: AirgapUploader | null;
+  isAirgap: boolean;
   fetchAvailableUpdates: () => void;
-  dashboardView?: boolean;
-  appSlug?: string;
 }) => {
-  const navigate = useNavigate();
   return (
-    <div
-      className={`${
-        !dashboardView
-          ? "TableDiff--Wrapper card-bg u-marginBottom--30"
-          : "tw-mt-4"
-      }`}
-    >
+    <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">
           Available Updates
@@ -58,11 +47,7 @@ const AvailableUpdatesComponent = ({
             </MountAware>
           </div>
         )}
-        <div
-          className={`flex alignItems--center ${
-            !dashboardView && "u-marginRight--20"
-          }`}
-        >
+        <div className="flex alignItems--center u-marginRight--20">
           <span
             className="flex-auto flex alignItems--center link u-fontSize--small"
             onClick={fetchAvailableUpdates}
@@ -130,48 +115,26 @@ const AvailableUpdatesComponent = ({
                         />
                       </>
                     )}
-                    {!dashboardView && (
-                      <button
-                        className={"btn tw-ml-2 primary blue"}
-                        onClick={() => startUpgradeService(update)}
-                        disabled={
-                          !update.isDeployable || isCurrentVersionLoading
-                        }
+
+                    <button
+                      className={"btn tw-ml-2 primary blue"}
+                      onClick={() => startUpgradeService(update)}
+                      disabled={!update.isDeployable || isCurrentVersionLoading}
+                    >
+                      <span
+                        key={update.nonDeployableCause}
+                        data-tip-disable={update.isDeployable}
+                        data-tip={update.nonDeployableCause}
+                        data-for="disable-deployment-tooltip"
                       >
-                        <span
-                          key={update.nonDeployableCause}
-                          data-tip-disable={update.isDeployable}
-                          data-tip={update.nonDeployableCause}
-                          data-for="disable-deployment-tooltip"
-                        >
-                          {isCurrentVersionLoading ? "Preparing..." : "Deploy"}
-                        </span>
-                      </button>
-                    )}
+                        {isCurrentVersionLoading ? "Preparing..." : "Deploy"}
+                      </span>
+                    </button>
+
                     <ReactTooltip
                       effect="solid"
                       id="disable-deployment-tooltip"
                     />
-                    {dashboardView && (
-                      <button
-                        className={"btn tw-ml-2 primary blue"}
-                        onClick={() =>
-                          navigate(`/app/${appSlug}/version-history`)
-                        }
-                        disabled={
-                          !update.isDeployable || isCurrentVersionLoading
-                        }
-                      >
-                        <span
-                          key={update.nonDeployableCause}
-                          data-tip-disable={update.isDeployable}
-                          data-tip={update.nonDeployableCause}
-                          data-for="disable-deployment-tooltip"
-                        >
-                          Go to Version history
-                        </span>
-                      </button>
-                    )}
                   </div>
                 </div>
                 {upgradeService?.error &&
diff --git a/web/src/features/Dashboard/components/AvailableUpdateCard.tsx b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
new file mode 100644
index 0000000000..cda6820988
--- /dev/null
+++ b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
@@ -0,0 +1,121 @@
+import { useNavigate } from "react-router-dom";
+import ReactTooltip from "react-tooltip";
+
+import Icon from "@components/Icon";
+import { Utilities } from "@src/utilities/utilities";
+import { AvailableUpdate } from "@types";
+
+const AvailableUpdateCard = ({
+  updates,
+  showReleaseNotes,
+  upgradeService,
+  appSlug,
+}: {
+  updates: AvailableUpdate[];
+  showReleaseNotes: (releaseNotes: string) => void;
+  upgradeService: {
+    versionLabel?: string;
+    isLoading?: boolean;
+    error?: string;
+  } | null;
+  appSlug: string;
+}) => {
+  const navigate = useNavigate();
+  const update = updates[0];
+  const isCurrentVersionLoading =
+    upgradeService?.versionLabel === update.versionLabel &&
+    upgradeService.isLoading;
+  return (
+    <div className="tw-mt-4">
+      <div className="flex justifyContent--spaceBetween alignItems--center u-marginBottom--15">
+        <p className="u-fontSize--normal u-fontWeight--medium card-title">
+          Latest Available Update
+        </p>
+        <p className="u-fontSize--normal">
+          {updates && updates.length > 0 && (
+            <span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy">
+              {updates.length} available
+            </span>
+          )}
+        </p>
+      </div>
+      {updates && updates.length > 0 && (
+        <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
+          <div className="available-update-row">
+            <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
+              <div className="flex-column">
+                <div className="flex alignItems--center">
+                  <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
+                    {update.versionLabel}
+                  </p>
+                  {update.isRequired && (
+                    <span className="status-tag required u-marginLeft--10">
+                      {" "}
+                      Required{" "}
+                    </span>
+                  )}
+                </div>
+                {update.upstreamReleasedAt && (
+                  <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
+                    {" "}
+                    Released{" "}
+                    <span className="u-fontWeight--bold">
+                      {Utilities.dateFormat(
+                        update.upstreamReleasedAt,
+                        "MM/DD/YY @ hh:mm a z"
+                      )}
+                    </span>
+                  </p>
+                )}
+              </div>
+              <div className="flex alignItems--center">
+                {update?.releaseNotes && (
+                  <>
+                    <Icon
+                      icon="release-notes"
+                      size={24}
+                      onClick={() => showReleaseNotes(update?.releaseNotes)}
+                      data-tip="View release notes"
+                      className="u-marginRight--5 clickable"
+                    />
+                    <ReactTooltip
+                      effect="solid"
+                      className="replicated-tooltip"
+                    />
+                  </>
+                )}
+
+                <ReactTooltip effect="solid" id="disable-deployment-tooltip" />
+
+                <button
+                  className={"btn tw-ml-2 primary blue"}
+                  onClick={() => navigate(`/app/${appSlug}/version-history`)}
+                  disabled={!update.isDeployable || isCurrentVersionLoading}
+                >
+                  <span
+                    key={update.nonDeployableCause}
+                    data-tip-disable={update.isDeployable}
+                    data-tip={update.nonDeployableCause}
+                    data-for="disable-deployment-tooltip"
+                  >
+                    Go to Version history
+                  </span>
+                </button>
+              </div>
+            </div>
+            {upgradeService?.error &&
+              upgradeService?.versionLabel === update.versionLabel && (
+                <div className="tw-my-4">
+                  <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
+                    {upgradeService.error}
+                  </span>
+                </div>
+              )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AvailableUpdateCard;
diff --git a/web/src/features/Dashboard/components/DashboardVersionCard.tsx b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
index 66501b1426..701b262b13 100644
--- a/web/src/features/Dashboard/components/DashboardVersionCard.tsx
+++ b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
@@ -1,31 +1,29 @@
+import classNames from "classnames";
 import { useEffect, useReducer } from "react";
+import Modal from "react-modal";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import ReactTooltip from "react-tooltip";
-import DashboardGitOpsCard from "./DashboardGitOpsCard";
-import MarkdownRenderer from "@src/components/shared/MarkdownRenderer";
+
+import EditConfigIcon from "@components/shared/EditConfigIcon";
+import { useSelectedApp } from "@features/App";
 import VersionDiff from "@features/VersionDiff/VersionDiff";
-import Modal from "react-modal";
 import AirgapUploadProgress from "@src/components/AirgapUploadProgress";
-import Loader from "@src/components/shared/Loader";
-import MountAware from "@src/components/shared/MountAware";
+import Icon from "@src/components/Icon";
 import ShowDetailsModal from "@src/components/modals/ShowDetailsModal";
 import ShowLogsModal from "@src/components/modals/ShowLogsModal";
+import Loader from "@src/components/shared/Loader";
+import MarkdownRenderer from "@src/components/shared/MarkdownRenderer";
 import DeployWarningModal from "@src/components/shared/modals/DeployWarningModal";
 import SkipPreflightsModal from "@src/components/shared/modals/SkipPreflightsModal";
-import classNames from "classnames";
+import MountAware from "@src/components/shared/MountAware";
+import { AirgapUploader } from "@src/utilities/airgapUploader";
+import { Repeater } from "@src/utilities/repeater";
 import {
   getPreflightResultState,
   getReadableGitOpsProviderName,
   secondsAgo,
   Utilities,
 } from "@src/utilities/utilities";
-import { useNextAppVersionWithIntercept } from "../api/useNextAppVersion";
-import { useSelectedApp } from "@features/App";
-import { Repeater } from "@src/utilities/repeater";
-
-import "@src/scss/components/watches/DashboardCard.scss";
-import Icon from "@src/components/Icon";
-
 import {
   AvailableUpdate,
   Downstream,
@@ -35,9 +33,11 @@ import {
   VersionDownloadStatus,
   VersionStatus,
 } from "@types";
-import { AirgapUploader } from "@src/utilities/airgapUploader";
-import EditConfigIcon from "@components/shared/EditConfigIcon";
-import AvailableUpdatesComponent from "@components/apps/AvailableUpdatesComponent";
+import { useNextAppVersionWithIntercept } from "../api/useNextAppVersion";
+import AvailableUpdateCard from "./AvailableUpdateCard";
+import DashboardGitOpsCard from "./DashboardGitOpsCard";
+
+import "@src/scss/components/watches/DashboardCard.scss";
 
 type Props = {
   adminConsoleMetadata: Metadata | null;
@@ -1413,9 +1413,9 @@ const DashboardVersionCard = (props: Props) => {
     );
   };
 
-  const fetchAvailableUpdates = async (showSpinner = true) => {
+  const fetchAvailableUpdates = async () => {
     const appSlug = params.slug;
-    setState({ isFetchingAvailableUpdates: showSpinner });
+    setState({ isFetchingAvailableUpdates: true });
     const res = await fetch(
       `${process.env.API_ENDPOINT}/app/${appSlug}/updates`,
       {
@@ -1435,7 +1435,7 @@ const DashboardVersionCard = (props: Props) => {
     setState({
       isFetchingAvailableUpdates: false,
       // only show the most recent available update
-      availableUpdates: response.updates && [response.updates[0]],
+      availableUpdates: response.updates,
     });
     return response;
   };
@@ -1550,6 +1550,35 @@ const DashboardVersionCard = (props: Props) => {
             )}
           </div>
         )}
+        {props.adminConsoleMetadata?.isEmbeddedCluster && (
+          <div className="flex alignItems--center">
+            {!state.isFetchingAvailableUpdates && (
+              <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>
+            )}
+            {state.isFetchingAvailableUpdates && (
+              <div className="flex alignItems--center">
+                <Loader className="u-marginRight--5" size="15" />
+                <span className="u-textColor--bodyCopy u-fontWeight--medium u-fontSize--small u-lineHeight--default">
+                  Checking for updates
+                </span>
+              </div>
+            )}
+          </div>
+        )}
       </div>
       {currentVersion?.deployedAt ? (
         <div className="VersionCard-content--wrapper card-item">
@@ -1567,18 +1596,14 @@ const DashboardVersionCard = (props: Props) => {
         state.availableUpdates?.length > 0 && (
           <>
             {state.isFetchingAvailableUpdates ? (
-              <div className="TableDiff--Wrapper card-bg u-marginBottom--30">
-                <div className="flex-column flex1 alignItems--center justifyContent--center">
-                  <Loader size="30" />
-                </div>
+              <div className="flex-column flex1 alignItems--center justifyContent--center">
+                <Loader size="30" />
               </div>
             ) : (
-              <AvailableUpdatesComponent
+              <AvailableUpdateCard
                 updates={state.availableUpdates}
                 showReleaseNotes={showReleaseNotes}
                 upgradeService={state.upgradeService}
-                fetchAvailableUpdates={fetchAvailableUpdates}
-                dashboardView={true}
                 appSlug={params.slug}
               />
             )}

From 5a0a37f427595c08039f049b53ade3430ffa3650 Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Fri, 16 Aug 2024 20:19:42 +0000
Subject: [PATCH 3/6] style update

---
 .../features/Dashboard/components/AvailableUpdateCard.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/features/Dashboard/components/AvailableUpdateCard.tsx b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
index cda6820988..461698c3f6 100644
--- a/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
+++ b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
@@ -27,14 +27,14 @@ const AvailableUpdateCard = ({
     upgradeService.isLoading;
   return (
     <div className="tw-mt-4">
-      <div className="flex justifyContent--spaceBetween alignItems--center u-marginBottom--15">
+      <div className="flex alignItems--center u-marginBottom--15">
         <p className="u-fontSize--normal u-fontWeight--medium card-title">
           Latest Available Update
         </p>
         <p className="u-fontSize--normal">
           {updates && updates.length > 0 && (
-            <span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy">
-              {updates.length} available
+            <span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy tw-ml-2">
+              ({updates.length} available)
             </span>
           )}
         </p>

From 3e9982ec2ee09d931c76c6e8fec5af115581461e Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Mon, 19 Aug 2024 15:10:47 +0000
Subject: [PATCH 4/6] clean up

---
 .../apps/AvailableUpdatesComponent.tsx        |  5 +-
 .../components/DashboardVersionCard.tsx       | 76 ++++++++-----------
 2 files changed, 33 insertions(+), 48 deletions(-)

diff --git a/web/src/components/apps/AvailableUpdatesComponent.tsx b/web/src/components/apps/AvailableUpdatesComponent.tsx
index afde1014ff..c817d1c57c 100644
--- a/web/src/components/apps/AvailableUpdatesComponent.tsx
+++ b/web/src/components/apps/AvailableUpdatesComponent.tsx
@@ -1,10 +1,9 @@
-import ReactTooltip from "react-tooltip";
-
 import Icon from "@components/Icon";
 import MountAware from "@components/shared/MountAware";
 import { AirgapUploader } from "@src/utilities/airgapUploader";
 import { Utilities } from "@src/utilities/utilities";
 import { AvailableUpdate } from "@types";
+import ReactTooltip from "react-tooltip";
 
 const AvailableUpdatesComponent = ({
   updates,
@@ -115,7 +114,6 @@ const AvailableUpdatesComponent = ({
                         />
                       </>
                     )}
-
                     <button
                       className={"btn tw-ml-2 primary blue"}
                       onClick={() => startUpgradeService(update)}
@@ -130,7 +128,6 @@ const AvailableUpdatesComponent = ({
                         {isCurrentVersionLoading ? "Preparing..." : "Deploy"}
                       </span>
                     </button>
-
                     <ReactTooltip
                       effect="solid"
                       id="disable-deployment-tooltip"
diff --git a/web/src/features/Dashboard/components/DashboardVersionCard.tsx b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
index 701b262b13..822a4bcfcf 100644
--- a/web/src/features/Dashboard/components/DashboardVersionCard.tsx
+++ b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
@@ -43,7 +43,6 @@ type Props = {
   adminConsoleMetadata: Metadata | null;
   airgapUploader: AirgapUploader | null;
   airgapUploadError: string | null;
-
   checkingForUpdates: boolean;
   checkingForUpdateError: boolean;
   checkingUpdateText: string;
@@ -181,6 +180,32 @@ const DashboardVersionCard = (props: Props) => {
   } = useNextAppVersionWithIntercept();
   const { latestDeployableVersion } = newAppVersionWithInterceptData || {};
 
+  const fetchAvailableUpdates = async () => {
+    const appSlug = params.slug;
+    setState({ isFetchingAvailableUpdates: true });
+    const res = await fetch(
+      `${process.env.API_ENDPOINT}/app/${appSlug}/updates`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        method: "GET",
+      }
+    );
+    if (!res.ok) {
+      setState({ isFetchingAvailableUpdates: false });
+      return;
+    }
+    const response = await res.json();
+
+    setState({
+      isFetchingAvailableUpdates: false,
+      availableUpdates: response.updates,
+    });
+    return response;
+  };
+
   // moving this out of the state because new repeater instances were getting created
   // and it doesn't really affect the UI
   const versionDownloadStatusJobs: {
@@ -1413,33 +1438,6 @@ const DashboardVersionCard = (props: Props) => {
     );
   };
 
-  const fetchAvailableUpdates = async () => {
-    const appSlug = params.slug;
-    setState({ isFetchingAvailableUpdates: true });
-    const res = await fetch(
-      `${process.env.API_ENDPOINT}/app/${appSlug}/updates`,
-      {
-        headers: {
-          "Content-Type": "application/json",
-        },
-        credentials: "include",
-        method: "GET",
-      }
-    );
-    if (!res.ok) {
-      setState({ isFetchingAvailableUpdates: false });
-      return;
-    }
-    const response = await res.json();
-
-    setState({
-      isFetchingAvailableUpdates: false,
-      // only show the most recent available update
-      availableUpdates: response.updates,
-    });
-    return response;
-  };
-
   const {
     currentVersion,
     checkingForUpdates,
@@ -1594,24 +1592,14 @@ const DashboardVersionCard = (props: Props) => {
       )}
       {props.adminConsoleMetadata?.isEmbeddedCluster &&
         state.availableUpdates?.length > 0 && (
-          <>
-            {state.isFetchingAvailableUpdates ? (
-              <div className="flex-column flex1 alignItems--center justifyContent--center">
-                <Loader size="30" />
-              </div>
-            ) : (
-              <AvailableUpdateCard
-                updates={state.availableUpdates}
-                showReleaseNotes={showReleaseNotes}
-                upgradeService={state.upgradeService}
-                appSlug={params.slug}
-              />
-            )}
-          </>
+          <AvailableUpdateCard
+            updates={state.availableUpdates}
+            showReleaseNotes={showReleaseNotes}
+            upgradeService={state.upgradeService}
+            appSlug={params.slug}
+          />
         )}
-
       {renderBottomSection()}
-
       <div className="u-marginTop--10">
         <Link
           to={`/app/${selectedApp?.slug}/version-history`}

From 2b62c65af94f6b21737e004649880d7e4940e0cb Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Tue, 20 Aug 2024 13:32:12 +0000
Subject: [PATCH 5/6] clean up2

---
 .../components/AvailableUpdateCard.tsx        | 135 +++++++++---------
 1 file changed, 64 insertions(+), 71 deletions(-)

diff --git a/web/src/features/Dashboard/components/AvailableUpdateCard.tsx b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
index 461698c3f6..a25042d39e 100644
--- a/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
+++ b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
@@ -32,88 +32,81 @@ const AvailableUpdateCard = ({
           Latest Available Update
         </p>
         <p className="u-fontSize--normal">
-          {updates && updates.length > 0 && (
-            <span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy tw-ml-2">
-              ({updates.length} available)
-            </span>
-          )}
+          <span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy tw-ml-2">
+            ({updates.length} available)
+          </span>
         </p>
       </div>
-      {updates && updates.length > 0 && (
-        <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
-          <div className="available-update-row">
-            <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
-              <div className="flex-column">
-                <div className="flex alignItems--center">
-                  <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
-                    {update.versionLabel}
-                  </p>
-                  {update.isRequired && (
-                    <span className="status-tag required u-marginLeft--10">
-                      {" "}
-                      Required{" "}
-                    </span>
-                  )}
-                </div>
-                {update.upstreamReleasedAt && (
-                  <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
+      <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
+        <div className="available-update-row">
+          <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
+            <div className="flex-column">
+              <div className="flex alignItems--center">
+                <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
+                  {update.versionLabel}
+                </p>
+                {update.isRequired && (
+                  <span className="status-tag required u-marginLeft--10">
                     {" "}
-                    Released{" "}
-                    <span className="u-fontWeight--bold">
-                      {Utilities.dateFormat(
-                        update.upstreamReleasedAt,
-                        "MM/DD/YY @ hh:mm a z"
-                      )}
-                    </span>
-                  </p>
+                    Required{" "}
+                  </span>
                 )}
               </div>
-              <div className="flex alignItems--center">
-                {update?.releaseNotes && (
-                  <>
-                    <Icon
-                      icon="release-notes"
-                      size={24}
-                      onClick={() => showReleaseNotes(update?.releaseNotes)}
-                      data-tip="View release notes"
-                      className="u-marginRight--5 clickable"
-                    />
-                    <ReactTooltip
-                      effect="solid"
-                      className="replicated-tooltip"
-                    />
-                  </>
-                )}
+              {update.upstreamReleasedAt && (
+                <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
+                  {" "}
+                  Released{" "}
+                  <span className="u-fontWeight--bold">
+                    {Utilities.dateFormat(
+                      update.upstreamReleasedAt,
+                      "MM/DD/YY @ hh:mm a z"
+                    )}
+                  </span>
+                </p>
+              )}
+            </div>
+            <div className="flex alignItems--center">
+              {update?.releaseNotes && (
+                <>
+                  <Icon
+                    icon="release-notes"
+                    size={24}
+                    onClick={() => showReleaseNotes(update?.releaseNotes)}
+                    data-tip="View release notes"
+                    className="u-marginRight--5 clickable"
+                  />
+                  <ReactTooltip effect="solid" className="replicated-tooltip" />
+                </>
+              )}
 
-                <ReactTooltip effect="solid" id="disable-deployment-tooltip" />
+              <ReactTooltip effect="solid" id="disable-deployment-tooltip" />
 
-                <button
-                  className={"btn tw-ml-2 primary blue"}
-                  onClick={() => navigate(`/app/${appSlug}/version-history`)}
-                  disabled={!update.isDeployable || isCurrentVersionLoading}
+              <button
+                className={"btn tw-ml-2 primary blue"}
+                onClick={() => navigate(`/app/${appSlug}/version-history`)}
+                disabled={!update.isDeployable || isCurrentVersionLoading}
+              >
+                <span
+                  key={update.nonDeployableCause}
+                  data-tip-disable={update.isDeployable}
+                  data-tip={update.nonDeployableCause}
+                  data-for="disable-deployment-tooltip"
                 >
-                  <span
-                    key={update.nonDeployableCause}
-                    data-tip-disable={update.isDeployable}
-                    data-tip={update.nonDeployableCause}
-                    data-for="disable-deployment-tooltip"
-                  >
-                    Go to Version history
-                  </span>
-                </button>
-              </div>
+                  Go to Version history
+                </span>
+              </button>
             </div>
-            {upgradeService?.error &&
-              upgradeService?.versionLabel === update.versionLabel && (
-                <div className="tw-my-4">
-                  <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
-                    {upgradeService.error}
-                  </span>
-                </div>
-              )}
           </div>
+          {upgradeService?.error &&
+            upgradeService?.versionLabel === update.versionLabel && (
+              <div className="tw-my-4">
+                <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
+                  {upgradeService.error}
+                </span>
+              </div>
+            )}
         </div>
-      )}
+      </div>
     </div>
   );
 };

From d02382d83c06bd7e91ade00d7e7064cd887ef699 Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Thu, 22 Aug 2024 20:10:58 +0000
Subject: [PATCH 6/6] refactor to reuse available updates component

---
 .../apps/AvailableUpdatesComponent.tsx        | 171 ++++++++++--------
 .../components/AvailableUpdateCard.tsx        | 100 ++--------
 .../components/DashboardVersionCard.tsx       |   7 -
 3 files changed, 120 insertions(+), 158 deletions(-)

diff --git a/web/src/components/apps/AvailableUpdatesComponent.tsx b/web/src/components/apps/AvailableUpdatesComponent.tsx
index c817d1c57c..cc47821f65 100644
--- a/web/src/components/apps/AvailableUpdatesComponent.tsx
+++ b/web/src/components/apps/AvailableUpdatesComponent.tsx
@@ -5,6 +5,80 @@ import { Utilities } from "@src/utilities/utilities";
 import { AvailableUpdate } from "@types";
 import ReactTooltip from "react-tooltip";
 
+export const AvailableUpdateRow = ({
+  update,
+  index,
+  showReleaseNotes,
+  children,
+  upgradeService,
+}: {
+  update: AvailableUpdate;
+  index: number;
+  showReleaseNotes: (releaseNotes: string) => void;
+  children: React.ReactNode;
+  upgradeService?: {
+    versionLabel?: string;
+    isLoading?: boolean;
+    error?: string;
+  } | null;
+}) => {
+  return (
+    <div key={index} className="available-update-row">
+      <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
+        <div className="flex-column">
+          <div className="flex alignItems--center">
+            <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
+              {update.versionLabel}
+            </p>
+            {update.isRequired && (
+              <span className="status-tag required u-marginLeft--10">
+                {" "}
+                Required{" "}
+              </span>
+            )}
+          </div>
+          {update.upstreamReleasedAt && (
+            <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
+              {" "}
+              Released{" "}
+              <span className="u-fontWeight--bold">
+                {Utilities.dateFormat(
+                  update.upstreamReleasedAt,
+                  "MM/DD/YY @ hh:mm a z"
+                )}
+              </span>
+            </p>
+          )}
+        </div>
+        <div className="flex alignItems--center">
+          {update?.releaseNotes && (
+            <>
+              <Icon
+                icon="release-notes"
+                size={24}
+                onClick={() => showReleaseNotes(update?.releaseNotes)}
+                data-tip="View release notes"
+                className="u-marginRight--5 clickable"
+              />
+              <ReactTooltip effect="solid" className="replicated-tooltip" />
+            </>
+          )}
+          {children}
+        </div>
+      </div>
+      {upgradeService?.error &&
+        upgradeService?.versionLabel === update.versionLabel && (
+          <div className="tw-my-4">
+            <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
+              {upgradeService.error}
+              error
+            </span>
+          </div>
+        )}
+    </div>
+  );
+};
+
 const AvailableUpdatesComponent = ({
   updates,
   showReleaseNotes,
@@ -71,78 +145,33 @@ const AvailableUpdatesComponent = ({
               upgradeService?.versionLabel === update.versionLabel &&
               upgradeService.isLoading;
             return (
-              <div key={index} className="available-update-row">
-                <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
-                  <div className="flex-column">
-                    <div className="flex alignItems--center">
-                      <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
-                        {update.versionLabel}
-                      </p>
-                      {update.isRequired && (
-                        <span className="status-tag required u-marginLeft--10">
-                          {" "}
-                          Required{" "}
-                        </span>
-                      )}
-                    </div>
-                    {update.upstreamReleasedAt && (
-                      <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
-                        {" "}
-                        Released{" "}
-                        <span className="u-fontWeight--bold">
-                          {Utilities.dateFormat(
-                            update.upstreamReleasedAt,
-                            "MM/DD/YY @ hh:mm a z"
-                          )}
-                        </span>
-                      </p>
-                    )}
-                  </div>
-                  <div className="flex alignItems--center">
-                    {update?.releaseNotes && (
-                      <>
-                        <Icon
-                          icon="release-notes"
-                          size={24}
-                          onClick={() => showReleaseNotes(update?.releaseNotes)}
-                          data-tip="View release notes"
-                          className="u-marginRight--5 clickable"
-                        />
-                        <ReactTooltip
-                          effect="solid"
-                          className="replicated-tooltip"
-                        />
-                      </>
-                    )}
-                    <button
-                      className={"btn tw-ml-2 primary blue"}
-                      onClick={() => startUpgradeService(update)}
-                      disabled={!update.isDeployable || isCurrentVersionLoading}
+              <AvailableUpdateRow
+                update={update}
+                index={index}
+                showReleaseNotes={showReleaseNotes}
+                upgradeService={upgradeService}
+              >
+                <>
+                  <button
+                    className={"btn tw-ml-2 primary blue"}
+                    onClick={() => startUpgradeService(update)}
+                    disabled={!update.isDeployable || isCurrentVersionLoading}
+                  >
+                    <span
+                      key={update.nonDeployableCause}
+                      data-tip-disable={update.isDeployable}
+                      data-tip={update.nonDeployableCause}
+                      data-for="disable-deployment-tooltip"
                     >
-                      <span
-                        key={update.nonDeployableCause}
-                        data-tip-disable={update.isDeployable}
-                        data-tip={update.nonDeployableCause}
-                        data-for="disable-deployment-tooltip"
-                      >
-                        {isCurrentVersionLoading ? "Preparing..." : "Deploy"}
-                      </span>
-                    </button>
-                    <ReactTooltip
-                      effect="solid"
-                      id="disable-deployment-tooltip"
-                    />
-                  </div>
-                </div>
-                {upgradeService?.error &&
-                  upgradeService?.versionLabel === update.versionLabel && (
-                    <div className="tw-my-4">
-                      <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
-                        {upgradeService.error}
-                      </span>
-                    </div>
-                  )}
-              </div>
+                      {isCurrentVersionLoading ? "Preparing..." : "Deploy"}
+                    </span>
+                  </button>
+                  <ReactTooltip
+                    effect="solid"
+                    id="disable-deployment-tooltip"
+                  />
+                </>
+              </AvailableUpdateRow>
             );
           })}
         </div>
diff --git a/web/src/features/Dashboard/components/AvailableUpdateCard.tsx b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
index a25042d39e..be93b6dce8 100644
--- a/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
+++ b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
@@ -1,30 +1,19 @@
 import { useNavigate } from "react-router-dom";
-import ReactTooltip from "react-tooltip";
 
-import Icon from "@components/Icon";
-import { Utilities } from "@src/utilities/utilities";
 import { AvailableUpdate } from "@types";
+import { AvailableUpdateRow } from "@components/apps/AvailableUpdatesComponent";
 
 const AvailableUpdateCard = ({
   updates,
   showReleaseNotes,
-  upgradeService,
   appSlug,
 }: {
   updates: AvailableUpdate[];
   showReleaseNotes: (releaseNotes: string) => void;
-  upgradeService: {
-    versionLabel?: string;
-    isLoading?: boolean;
-    error?: string;
-  } | null;
   appSlug: string;
 }) => {
   const navigate = useNavigate();
   const update = updates[0];
-  const isCurrentVersionLoading =
-    upgradeService?.versionLabel === update.versionLabel &&
-    upgradeService.isLoading;
   return (
     <div className="tw-mt-4">
       <div className="flex alignItems--center u-marginBottom--15">
@@ -38,74 +27,25 @@ const AvailableUpdateCard = ({
         </p>
       </div>
       <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
-        <div className="available-update-row">
-          <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
-            <div className="flex-column">
-              <div className="flex alignItems--center">
-                <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
-                  {update.versionLabel}
-                </p>
-                {update.isRequired && (
-                  <span className="status-tag required u-marginLeft--10">
-                    {" "}
-                    Required{" "}
-                  </span>
-                )}
-              </div>
-              {update.upstreamReleasedAt && (
-                <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
-                  {" "}
-                  Released{" "}
-                  <span className="u-fontWeight--bold">
-                    {Utilities.dateFormat(
-                      update.upstreamReleasedAt,
-                      "MM/DD/YY @ hh:mm a z"
-                    )}
-                  </span>
-                </p>
-              )}
-            </div>
-            <div className="flex alignItems--center">
-              {update?.releaseNotes && (
-                <>
-                  <Icon
-                    icon="release-notes"
-                    size={24}
-                    onClick={() => showReleaseNotes(update?.releaseNotes)}
-                    data-tip="View release notes"
-                    className="u-marginRight--5 clickable"
-                  />
-                  <ReactTooltip effect="solid" className="replicated-tooltip" />
-                </>
-              )}
-
-              <ReactTooltip effect="solid" id="disable-deployment-tooltip" />
-
-              <button
-                className={"btn tw-ml-2 primary blue"}
-                onClick={() => navigate(`/app/${appSlug}/version-history`)}
-                disabled={!update.isDeployable || isCurrentVersionLoading}
-              >
-                <span
-                  key={update.nonDeployableCause}
-                  data-tip-disable={update.isDeployable}
-                  data-tip={update.nonDeployableCause}
-                  data-for="disable-deployment-tooltip"
-                >
-                  Go to Version history
-                </span>
-              </button>
-            </div>
-          </div>
-          {upgradeService?.error &&
-            upgradeService?.versionLabel === update.versionLabel && (
-              <div className="tw-my-4">
-                <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
-                  {upgradeService.error}
-                </span>
-              </div>
-            )}
-        </div>
+        <AvailableUpdateRow
+          update={update}
+          showReleaseNotes={showReleaseNotes}
+          index={1}
+        >
+          <button
+            className={"btn tw-ml-2 primary blue"}
+            onClick={() => navigate(`/app/${appSlug}/version-history`)}
+          >
+            <span
+              key={update.nonDeployableCause}
+              data-tip-disable={update.isDeployable}
+              data-tip={update.nonDeployableCause}
+              data-for="disable-deployment-tooltip"
+            >
+              Go to Version history
+            </span>
+          </button>
+        </AvailableUpdateRow>
       </div>
     </div>
   );
diff --git a/web/src/features/Dashboard/components/DashboardVersionCard.tsx b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
index 822a4bcfcf..7f8bc99dad 100644
--- a/web/src/features/Dashboard/components/DashboardVersionCard.tsx
+++ b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
@@ -114,11 +114,6 @@ type State = {
   versionToDeploy: Version | null;
   viewLogsErrMsg: string;
   yamlErrorDetails: string[];
-  upgradeService: {
-    versionLabel?: string;
-    isLoading?: boolean;
-    error?: string;
-  } | null;
 };
 
 const DashboardVersionCard = (props: Props) => {
@@ -167,7 +162,6 @@ const DashboardVersionCard = (props: Props) => {
       versionToDeploy: null,
       viewLogsErrMsg: "",
       yamlErrorDetails: [],
-      upgradeService: {},
     }
   );
   const navigate = useNavigate();
@@ -1595,7 +1589,6 @@ const DashboardVersionCard = (props: Props) => {
           <AvailableUpdateCard
             updates={state.availableUpdates}
             showReleaseNotes={showReleaseNotes}
-            upgradeService={state.upgradeService}
             appSlug={params.slug}
           />
         )}