From c9ecaf0e9839cbef64235cce9a4e28f034ad054d Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Fri, 23 Aug 2024 15:33:10 -0400
Subject: [PATCH] Show available updates in Dashboard  (#4828)

---
 .../apps/AvailableUpdatesComponent.tsx        | 171 ++++++++++--------
 .../components/AvailableUpdateCard.tsx        |  54 ++++++
 .../components/DashboardVersionCard.tsx       | 102 +++++++++--
 3 files changed, 241 insertions(+), 86 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 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
new file mode 100644
index 0000000000..be93b6dce8
--- /dev/null
+++ b/web/src/features/Dashboard/components/AvailableUpdateCard.tsx
@@ -0,0 +1,54 @@
+import { useNavigate } from "react-router-dom";
+
+import { AvailableUpdate } from "@types";
+import { AvailableUpdateRow } from "@components/apps/AvailableUpdatesComponent";
+
+const AvailableUpdateCard = ({
+  updates,
+  showReleaseNotes,
+  appSlug,
+}: {
+  updates: AvailableUpdate[];
+  showReleaseNotes: (releaseNotes: string) => void;
+  appSlug: string;
+}) => {
+  const navigate = useNavigate();
+  const update = updates[0];
+  return (
+    <div className="tw-mt-4">
+      <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">
+          <span className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy tw-ml-2">
+            ({updates.length} available)
+          </span>
+        </p>
+      </div>
+      <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
+        <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>
+  );
+};
+
+export default AvailableUpdateCard;
diff --git a/web/src/features/Dashboard/components/DashboardVersionCard.tsx b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
index 32e9c87294..7f8bc99dad 100644
--- a/web/src/features/Dashboard/components/DashboardVersionCard.tsx
+++ b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
@@ -1,32 +1,31 @@
+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,
   KotsParams,
   Metadata,
@@ -34,8 +33,11 @@ import {
   VersionDownloadStatus,
   VersionStatus,
 } from "@types";
-import { AirgapUploader } from "@src/utilities/airgapUploader";
-import EditConfigIcon from "@components/shared/EditConfigIcon";
+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;
@@ -71,6 +73,7 @@ type Props = {
 };
 
 type State = {
+  availableUpdates: AvailableUpdate[];
   confirmType: string;
   deployView: boolean;
   displayConfirmDeploymentModal: boolean;
@@ -78,6 +81,7 @@ type State = {
   displayShowDetailsModal: boolean;
   firstSequence: string;
   secondSequence: string;
+  isFetchingAvailableUpdates: boolean;
   isRedeploy: boolean;
   isSkipPreflights: boolean;
   kotsUpdateChecker: Repeater;
@@ -119,12 +123,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(),
@@ -168,6 +174,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: {
@@ -178,6 +210,9 @@ const DashboardVersionCard = (props: Props) => {
     if (props.links && props.links.length > 0) {
       setState({ selectedAction: props.links[0] });
     }
+    if (props.adminConsoleMetadata?.isEmbeddedCluster) {
+      fetchAvailableUpdates();
+    }
   }, []);
 
   useEffect(() => {
@@ -1507,6 +1542,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">
@@ -1520,6 +1584,14 @@ const DashboardVersionCard = (props: Props) => {
           </p>
         </div>
       )}
+      {props.adminConsoleMetadata?.isEmbeddedCluster &&
+        state.availableUpdates?.length > 0 && (
+          <AvailableUpdateCard
+            updates={state.availableUpdates}
+            showReleaseNotes={showReleaseNotes}
+            appSlug={params.slug}
+          />
+        )}
       {renderBottomSection()}
       <div className="u-marginTop--10">
         <Link