From 92af5c3f241769fb6f382cc95fb6936e8b62f91f Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Tue, 20 Aug 2024 13:32:12 +0000
Subject: [PATCH] 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>
   );
 };