Hint: Komodor has the same HELM capabilities, with enterprise features
and support.{" "}
diff --git a/frontend/src/components/modal/InstallChartModal/ChartValues.tsx b/frontend/src/components/modal/InstallChartModal/ChartValues.tsx
index 9ab2c56..ccb1f95 100644
--- a/frontend/src/components/modal/InstallChartModal/ChartValues.tsx
+++ b/frontend/src/components/modal/InstallChartModal/ChartValues.tsx
@@ -17,7 +17,7 @@ export const ChartValues = ({
Chart Value Reference:
diff --git a/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx b/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
index cec73ed..991a7c5 100644
--- a/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
+++ b/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
();
+ const [userValues, setUserValues] = useState("");
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();
+
+ const [versions, setVersions] = useState<
+ Array
+ >([]);
+
+ 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({
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={
}
@@ -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)
}
/>
diff --git a/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx b/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
index 4f56ecf..2d20be5 100644
--- a/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
+++ b/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
@@ -1,5 +1,5 @@
-import { useParams } from "react-router-dom";
-import { useMemo, useState } from "react";
+import { useParams } from "react-router";
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
import { useGetVersions, useVersionData } from "../../../API/releases";
import Modal, { ModalButtonStyle } from "../Modal";
import { GeneralDetails } from "./GeneralDetails";
@@ -8,19 +8,19 @@ import { useMutation } from "@tanstack/react-query";
import { useChartRepoValues } from "../../../API/repositories";
import useNavigateWithSearchParams from "../../../hooks/useNavigateWithSearchParams";
import { VersionToInstall } from "./VersionToInstall";
-import { isNewerVersion, isNoneEmptyArray } from "../../../utils";
+import { isNoneEmptyArray } from "../../../utils";
import { useDiffData } from "../../../API/shared";
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 InstallRepoChartModal = ({
isOpen,
onClose,
chartName,
currentlyInstalledChartVersion,
- latestVersion,
}: InstallChartModalProps) => {
const navigate = useNavigateWithSearchParams();
const [userValues, setUserValues] = useState("");
@@ -31,42 +31,46 @@ export const InstallRepoChartModal = ({
const [namespace, setNamespace] = useState("");
const [releaseName, setReleaseName] = useState(chartName);
- 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: [] };
- const versionsToRepo = data.filter(
- (v) => v.repository === currentRepoCtx
- );
+ const {
+ error: versionsError,
+ data: _versions = [],
+ isSuccess,
+ } = useGetVersions(chartName);
- return setSelectedVersionData(versionsToRepo[0] ?? empty);
- },
- });
+ const [versions, setVersions] = useState<
+ Array
+ >([]);
- const versions = _versions?.map((v) => ({
- ...v,
- isChartVersion: v.version === currentlyInstalledChartVersion,
- }));
-
- // 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 onSuccess = useEffectEvent(() => {
+ const empty = { version: "", repository: "", urls: [] };
+ const versionsToRepo = _versions.filter(
+ (v) => v.repository === currentRepoCtx
+ );
- const selectedRepo = useMemo(() => {
- return selectedVersionData?.repository;
- }, [selectedVersionData]);
+ setSelectedVersionData(versionsToRepo[0] ?? empty);
+ setVersions(
+ _versions?.map((v) => ({
+ ...v,
+ isChartVersion: v.version === currentlyInstalledChartVersion,
+ }))
+ );
+ });
+
+ useEffect(() => {
+ if (isSuccess && _versions.length) {
+ onSuccess();
+ }
+ }, [isSuccess, _versions]);
+
+ const selectedVersion = selectedVersionData?.version;
+
+ const selectedRepo = selectedVersionData?.repository;
const chartAddress = useMemo(() => {
if (!selectedVersionData || !selectedVersionData?.repository) {
@@ -77,15 +81,15 @@ export const InstallRepoChartModal = ({
: `${selectedVersionData?.repository}/${chartName}`;
}, [selectedVersionData, chartName]);
- const { data: chartValues, isLoading: loadingChartValues } =
+ const { data: chartValues = "", isLoading: loadingChartValues } =
useChartRepoValues({
version: selectedVersion || "",
chart: chartAddress,
});
// This hold the selected version manifest, we use it for the diff
- const { data: selectedVerData, error: selectedVerDataError } = useVersionData(
- {
+ const { data: selectedVerData = {}, error: selectedVerDataError } =
+ useVersionData({
version: selectedVersion || "",
userValues,
chartAddress,
@@ -93,11 +97,8 @@ export const InstallRepoChartModal = ({
namespace,
releaseName,
isInstallRepoChart: true,
- options: {
- enabled: Boolean(chartAddress),
- },
- }
- );
+ enabled: Boolean(chartAddress),
+ });
const {
data: diffData,
@@ -105,14 +106,17 @@ export const InstallRepoChartModal = ({
error: diffError,
} = useDiffData({
selectedRepo: selectedRepo || "",
- versionsError: versionsError as string,
+ versionsError: versionsError as unknown as string, // TODO fix it
currentVerManifest: "", // current version manifest should always be empty since its a fresh install
selectedVerData,
chart: chartAddress,
});
// Confirm method (install)
- const setReleaseVersionMutation = useMutation({
+ const setReleaseVersionMutation = useMutation<{
+ namespace: string;
+ name: string;
+ }>({
mutationKey: [
"setVersion",
namespace,
@@ -130,17 +134,17 @@ export const InstallRepoChartModal = ({
formData.append("version", selectedVersion || "");
formData.append("values", userValues);
formData.append("name", releaseName || "");
- const data = await apiService.fetchWithDefaults(
+
+ return await apiService.fetchWithDefaults(
`/api/helm/releases/${namespace ? namespace : "default"}`,
{
method: "post",
body: formData,
}
);
- return data;
},
- onSuccess: async (response) => {
+ onSuccess: async (response: { namespace: string; name: string }) => {
onClose();
navigate(`/${response.namespace}/${response.name}/installed/revision/1`);
},
@@ -169,11 +173,11 @@ export const InstallRepoChartModal = ({
id: "1",
callback: setReleaseVersionMutation.mutate,
variant: ModalButtonStyle.info,
- isLoading: setReleaseVersionMutation.isLoading,
+ isLoading: setReleaseVersionMutation.isPending,
disabled:
loadingChartValues ||
isLoadingDiff ||
- setReleaseVersionMutation.isLoading,
+ setReleaseVersionMutation.isPending,
},
]}
>
@@ -205,10 +209,10 @@ export const InstallRepoChartModal = ({
diff={diffData as string}
isLoading={isLoadingDiff}
error={
- (selectedVerDataError as string) ||
- (diffError as string) ||
+ (selectedVerDataError as unknown as string) || // TODO fix it
+ (diffError as unknown as string) ||
installError ||
- (versionsError as string)
+ (versionsError as unknown as string)
}
/>
diff --git a/frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx b/frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx
index 4da9759..78789f8 100644
--- a/frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx
+++ b/frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx
@@ -1,5 +1,5 @@
-import { useMemo, useState } from "react";
-import Select, { components } from "react-select";
+import { FC, useMemo, useState } from "react";
+import Select, { components, GroupBase, SingleValueProps } from "react-select";
import { BsCheck2 } from "react-icons/bs";
import { NonEmptyArray } from "../../../data/types";
@@ -10,7 +10,19 @@ interface Version {
urls: string[];
}
-export const VersionToInstall: React.FC<{
+type VersionOptionType = {
+ value: Omit;
+ label: string;
+ check: boolean;
+};
+
+type SpecificSingleValueProps = SingleValueProps<
+ VersionOptionType,
+ false, // IsMulti
+ GroupBase
+>;
+
+export const VersionToInstall: FC<{
versions: NonEmptyArray;
initialVersion?: {
repository?: string;
@@ -78,14 +90,19 @@ export const VersionToInstall: React.FC<{
}}
value={selectedOption ?? initOpt}
components={{
- SingleValue: ({ children, ...props }) => (
-
- {children}
- {props.data.check && showCurrentVersion && (
-
- )}
-
- ),
+ SingleValue: ({ children, ...props }) => {
+ const OriginalSingleValue =
+ components.SingleValue as FC;
+
+ return (
+
+ {children}
+ {props.data.check && showCurrentVersion && (
+
+ )}
+
+ );
+ },
Option: ({ children, innerProps, data }) => (
{
action("clickCustomButton")("confirmModal: clicked custom button 1");
},
diff --git a/frontend/src/components/modal/Modal.tsx b/frontend/src/components/modal/Modal.tsx
index 49ed96f..2438881 100644
--- a/frontend/src/components/modal/Modal.tsx
+++ b/frontend/src/components/modal/Modal.tsx
@@ -41,23 +41,23 @@ const Modal = ({
const colorVariants = new Map
([
[
ModalButtonStyle.default,
- "text-base font-semibold text-gray-500 bg-white hover:bg-gray-100 disabled:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 font-medium px-5 py-1 hover:text-gray-900 focus:z-10 ",
+ "text-base font-semibold text-gray-500 bg-white hover:bg-gray-100 disabled:bg-gray-200 focus:ring-4 focus:outline-hidden focus:ring-gray-200 rounded-lg border border-gray-200 font-medium px-5 py-1 hover:text-gray-900 focus:z-10 ",
],
[
ModalButtonStyle.info,
- "font-semibold text-white bg-blue-700 hover:bg-blue-800 disabled:bg-blue-700/80 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-base px-3 py-1.5 text-center ",
+ "font-semibold text-white bg-blue-700 hover:bg-blue-800 disabled:bg-blue-700/80 focus:ring-4 focus:outline-hidden focus:ring-blue-300 font-medium rounded-lg text-base px-3 py-1.5 text-center ",
],
[
ModalButtonStyle.success,
- "font-semibold text-white bg-green-700 hover:bg-green-800 disabled:bg-green-700/80 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-base px-3 py-1.5 text-center ",
+ "font-semibold text-white bg-green-700 hover:bg-green-800 disabled:bg-green-700/80 focus:ring-4 focus:outline-hidden focus:ring-green-300 font-medium rounded-lg text-base px-3 py-1.5 text-center ",
],
[
ModalButtonStyle.error,
- "font-semibold text-white bg-red-700 hover:bg-red-800 disabled:bg-red-700/80 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-base px-3 py-1.5 text-center ",
+ "font-semibold text-white bg-red-700 hover:bg-red-800 disabled:bg-red-700/80 focus:ring-4 focus:outline-hidden focus:ring-red-300 font-medium rounded-lg text-base px-3 py-1.5 text-center ",
],
[
ModalButtonStyle.disabled,
- "font-semibold text-gray-500 bg-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-base font-medium px-3 py-1.5 hover:text-gray-900 focus:z-10 ",
+ "font-semibold text-gray-500 bg-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-hidden focus:ring-gray-200 rounded-lg border border-gray-200 text-base font-medium px-3 py-1.5 hover:text-gray-900 focus:z-10 ",
],
]);
@@ -78,14 +78,14 @@ const Modal = ({
return createPortal(
<>
{isOpen && (
-
+
onClose()}
>
@@ -118,20 +118,20 @@ const Modal = ({
) : null}
)}
-
+
{children}
{bottomContent ? (
{bottomContent}
) : (
-
+
{actions?.map((action) => (