feat: add --force flag support for helm upgrade (#505)

Add a "Force upgrade" checkbox in the upgrade modal footer that passes
the --force flag to helm upgrade, causing resources to be deleted and
recreated. Also fix the version selector flashing the URL input while
loading by showing a spinner.

Closes #505

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -47,6 +47,7 @@ export const InstallReleaseChartModal = ({
   const navigate = useNavigateWithSearchParams();
   const [userValues, setUserValues] = useState<string>("");
   const [installError, setInstallError] = useState("");
+  const [forceUpgrade, setForceUpgrade] = useState(false);
 
   const {
     namespace: queryNamespace,
@@ -62,6 +63,7 @@ export const InstallReleaseChartModal = ({
     error: versionsError,
     data: _versions = [],
     isSuccess,
+    isLoading: isLoadingVersions,
   } = useGetVersions(chartName);
 
   const [selectedVersionData, setSelectedVersionData] = useState<VersionData>();
@@ -166,6 +168,9 @@ export const InstallReleaseChartModal = ({
       }
       formData.append("version", selectedVersion || "");
       formData.append("values", userValues || releaseValues || ""); // if userValues is empty, we use the release values
+      if (forceUpgrade) {
+        formData.append("force", "true");
+      }
       const url = `/api/helm/releases/${
         namespace ? namespace : "default"
       }/${releaseName}`;
@@ -210,6 +215,18 @@ export const InstallReleaseChartModal = ({
         />
       }
       containerClassNames="w-full text-2xl h-2/3"
+      bottomContent={
+        isUpgrade ? (
+          <label className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={forceUpgrade}
+              onChange={(e) => setForceUpgrade(e.target.checked)}
+            />
+            Force upgrade
+          </label>
+        ) : undefined
+      }
       actions={[
         {
           id: "1",
@@ -223,7 +240,9 @@ export const InstallReleaseChartModal = ({
         },
       ]}
     >
-      {!useURLMode && versions && isNoneEmptyArray(versions) ? (
+      {isLoadingVersions ? (
+        <Spinner />
+      ) : !useURLMode && versions && isNoneEmptyArray(versions) ? (
         <div className="flex items-center gap-2">
           <VersionToInstall
             versions={versions}

frontend/src/components/modal/Modal.tsx

@@ -122,10 +122,9 @@ const Modal = ({
               <div className="max-h-[calc(100vh_-_200px)] gap-6 overflow-y-auto p-4">
                 {children}
               </div>
-              {bottomContent ? (
-                <div className="p-5 text-sm">{bottomContent}</div>
-              ) : (
-                <div className="flex justify-end gap-2 rounded-b border-t border-gray-200 p-6">
+              <div className="flex items-center justify-between rounded-b border-t border-gray-200 p-6">
+                <div>{bottomContent}</div>
+                <div className="flex gap-2">
                   {actions?.map((action) => (
                     <button
                       key={action.id}
@@ -145,7 +144,7 @@ const Modal = ({
                     </button>
                   ))}
                 </div>
-              )}
+              </div>
             </div>
           </div>
         </div>