Huge bump of versions + husky + fixed DropDown key issue and pointer (#628)

* Bump lint-staged

* Check

* Check

* Added husky

* Check

* Check

* Check

* Check

* Check

* Check

* Check

* Check

* Fix husky

* Used * instead **/* in lint-staged

* Bump tailwindcss and related

* Added @tailwindcss/vite and removed postcss

* Added lint into staged

* Bump @babel/core and updated .prettierignore

* Removed tailwind.config.cjs

* Added ThemeInit

* Added cursor-pointer to Help dropdown

* Bump react-router

* Removed @types/uuid and react-router-dom

* Bump diff2html, prettier, @typescript-eslint/eslint-plugin, @typescript-eslint/parser

* removed vite-plugin-html-config and @babel/core

* removed "@eslint/eslintrc" and "@eslint/js"

* Removed redundant link

* Returned plugins and source to index.css

* Set dark to false in tailwindcss

* Fixed storybook

* Fixed useGetLatestVersion with correct gcTime: 0 option

* Added eslint-plugin-prettier

* Removed spaces

* ClustersList.tsx improved and type fixes for another files

* Repository.tsx improved

* Huge fix of types

* Huge fix of types missed

* Fixed type of SingleValue

* Added cursor pointer

frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx

@@ -1,10 +1,11 @@
-import { useParams } from "react-router-dom";
-import { useMemo, useState } from "react";
+import { useParams } from "react-router";
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
 import {
   useChartReleaseValues,
   useGetReleaseManifest,
   useGetVersions,
   useVersionData,
+  VersionData,
 } from "../../../API/releases";
 import Modal, { ModalButtonStyle } from "../Modal";
 import { GeneralDetails } from "./GeneralDetails";
@@ -12,7 +13,7 @@ import { ManifestDiff } from "./ManifestDiff";
 import { useMutation } from "@tanstack/react-query";
 import useNavigateWithSearchParams from "../../../hooks/useNavigateWithSearchParams";
 import { VersionToInstall } from "./VersionToInstall";
-import { isNewerVersion, isNoneEmptyArray } from "../../../utils";
+import { isNoneEmptyArray } from "../../../utils";
 import useCustomSearchParams from "../../../hooks/useCustomSearchParams";
 import { useChartRepoValues } from "../../../API/repositories";
 import { useDiffData } from "../../../API/shared";
@@ -20,18 +21,18 @@ import { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
 import apiService from "../../../API/apiService";
 import { InstallUpgradeTitle } from "./InstallUpgradeTitle";
+import { LatestChartVersion } from "../../../API/interfaces";
 
 export const InstallReleaseChartModal = ({
   isOpen,
   onClose,
   chartName,
   currentlyInstalledChartVersion,
-  latestVersion,
   isUpgrade = false,
   latestRevision,
 }: InstallChartModalProps) => {
   const navigate = useNavigateWithSearchParams();
-  const [userValues, setUserValues] = useState<string>();
+  const [userValues, setUserValues] = useState<string>("");
   const [installError, setInstallError] = useState("");
 
   const {
@@ -44,38 +45,37 @@ export const InstallReleaseChartModal = ({
   const [namespace, setNamespace] = useState(queryNamespace || "");
   const [releaseName, setReleaseName] = useState(_releaseName || "");
 
-  const { error: versionsError, data: _versions } = useGetVersions(chartName, {
-    select: (data) => {
-      return data?.sort((a, b) =>
-        isNewerVersion(a.version, b.version) ? 1 : -1
-      );
-    },
-    onSuccess: (data) => {
-      const empty = { version: "", repository: "", urls: [] };
-      return setSelectedVersionData(data[0] ?? empty);
-    },
+  const {
+    error: versionsError,
+    data: _versions = [],
+    isSuccess,
+  } = useGetVersions(chartName);
+
+  const [selectedVersionData, setSelectedVersionData] = useState<VersionData>();
+
+  const [versions, setVersions] = useState<
+    Array<LatestChartVersion & { isChartVersion: boolean }>
+  >([]);
+
+  const onSuccess = useEffectEvent(() => {
+    const empty = { version: "", repository: "", urls: [] };
+    setSelectedVersionData(_versions[0] ?? empty);
+    setVersions(
+      _versions?.map((v) => ({
+        ...v,
+        isChartVersion: v.version === currentlyInstalledChartVersion,
+      }))
+    );
   });
 
-  const versions = _versions?.map((v) => ({
-    ...v,
-    isChartVersion: v.version === currentlyInstalledChartVersion,
-  }));
+  useEffect(() => {
+    if (isSuccess && _versions.length) {
+      onSuccess();
+    }
+  }, [isSuccess, _versions]);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  latestVersion = latestVersion ?? currentlyInstalledChartVersion; // a guard for typescript, latestVersion is always defined
-  const [selectedVersionData, setSelectedVersionData] = useState<{
-    version: string;
-    repository?: string;
-    urls: string[];
-  }>();
-
-  const selectedVersion = useMemo(() => {
-    return selectedVersionData?.version;
-  }, [selectedVersionData]);
-
-  const selectedRepo = useMemo(() => {
-    return selectedVersionData?.repository || "";
-  }, [selectedVersionData]);
+  const selectedVersion = selectedVersionData?.version || "";
+  const selectedRepo = selectedVersionData?.repository || "";
 
   const chartAddress = useMemo(() => {
     if (!selectedVersionData || !selectedVersionData.repository) return "";
@@ -86,13 +86,13 @@ export const InstallReleaseChartModal = ({
   }, [selectedVersionData, chartName]);
 
   // the original chart values
-  const { data: chartValues } = useChartRepoValues({
-    version: selectedVersion || "",
+  const { data: chartValues = "" } = useChartRepoValues({
+    version: selectedVersion,
     chart: chartAddress,
   });
 
   // The user defined values (if any we're set)
-  const { data: releaseValues, isLoading: loadingReleaseValues } =
+  const { data: releaseValues = "", isLoading: loadingReleaseValues } =
     useChartReleaseValues({
       namespace,
       release: String(releaseName),
@@ -100,16 +100,15 @@ export const InstallReleaseChartModal = ({
     });
 
   // This hold the selected version manifest, we use it for the diff
-  const { data: selectedVerData, error: selectedVerDataError } = useVersionData(
-    {
-      version: selectedVersion || "",
-      userValues: userValues || "",
+  const { data: selectedVerData = {}, error: selectedVerDataError } =
+    useVersionData({
+      version: selectedVersion,
+      userValues,
       chartAddress,
       releaseValues,
       namespace,
       releaseName,
-    }
-  );
+    });
 
   const { data: currentVerManifest, error: currentVerManifestError } =
     useGetReleaseManifest({
@@ -123,14 +122,14 @@ export const InstallReleaseChartModal = ({
     error: diffError,
   } = useDiffData({
     selectedRepo,
-    versionsError: versionsError as string,
-    currentVerManifest,
+    versionsError: versionsError as unknown as string, // TODO fix it
+    currentVerManifest: currentVerManifest as unknown as string, // TODO fix it
     selectedVerData,
     chart: chartAddress,
   });
 
   // Confirm method (install)
-  const setReleaseVersionMutation = useMutation({
+  const setReleaseVersionMutation = useMutation<VersionData>({
     mutationKey: [
       "setVersion",
       namespace,
@@ -149,8 +148,7 @@ export const InstallReleaseChartModal = ({
       }
       formData.append("version", selectedVersion || "");
       formData.append("values", userValues || releaseValues || ""); // if userValues is empty, we use the release values
-
-      const data = await apiService.fetchWithDefaults(
+      return await apiService.fetchWithDefaults(
         `/api/helm/releases/${
           namespace ? namespace : "default"
         }${`/${releaseName}`}`,
@@ -159,7 +157,6 @@ export const InstallReleaseChartModal = ({
           body: formData,
         }
       );
-      return data;
     },
     onSuccess: async (response) => {
       onClose();
@@ -187,7 +184,7 @@ export const InstallReleaseChartModal = ({
       title={
         <InstallUpgradeTitle
           isUpgrade={isUpgrade}
-          releaseValues={isUpgrade || releaseValues}
+          releaseValues={isUpgrade || !!releaseValues}
           chartName={chartName}
         />
       }
@@ -197,11 +194,11 @@ export const InstallReleaseChartModal = ({
           id: "1",
           callback: setReleaseVersionMutation.mutate,
           variant: ModalButtonStyle.info,
-          isLoading: setReleaseVersionMutation.isLoading,
+          isLoading: setReleaseVersionMutation.isPending,
           disabled:
             loadingReleaseValues ||
             isLoadingDiff ||
-            setReleaseVersionMutation.isLoading,
+            setReleaseVersionMutation.isPending,
         },
       ]}
     >
@@ -233,11 +230,11 @@ export const InstallReleaseChartModal = ({
         diff={diffData as string}
         isLoading={isLoadingDiff}
         error={
-          (currentVerManifestError as string) ||
-          (selectedVerDataError as string) ||
-          (diffError as string) ||
+          (currentVerManifestError as unknown as string) || // TODO fix it
+          (selectedVerDataError as unknown as string) ||
+          (diffError as unknown as string) ||
           installError ||
-          (versionsError as string)
+          (versionsError as unknown as string)
         }
       />
     </Modal>