clean up

Author: miaawong

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"

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`}