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] 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}
           />
         )}