Enabled recommended-requiring-type-checking as result type fixes provided (#632)

* Enabled recommended-requiring-type-checking * from .cjs to .js * check * check * check * check * A lot of types aligned and refactored * More strict types * Improvement * Improvements * Improvements * Fixed routs * Fixed import types
2026-03-21 18:58:03 +00:00 · 2025-12-01 10:19:44 +02:00
parent 362f881b47
commit f2eb91bc02
75 changed files with 668 additions and 481 deletions
--- a/frontend/eslint.config.cjs
+++ b/frontend/eslint.config.cjs
@@ -1,92 +0,0 @@
-const {
-    defineConfig,
-} = require("eslint/config");
-
-const globals = require("globals");
-const tsParser = require("@typescript-eslint/parser");
-const typescriptEslint = require("@typescript-eslint/eslint-plugin");
-const react = require("eslint-plugin-react");
-const js = require("@eslint/js");
-
-const {
-    FlatCompat,
-} = require("@eslint/eslintrc");
-
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
-});
-
-module.exports = defineConfig([{
-    languageOptions: {
-        globals: {
-            ...globals.browser,
-            heap: "writable",
-            DD_RUM: "writable",
-        },
-
-        parser: tsParser,
-        ecmaVersion: "latest",
-        sourceType: "module",
-        parserOptions: {
-            ecmaVersion: "latest",
-            sourceType: "module",
-            ecmaFeatures: { jsx: true },
-            project: "./tsconfig.json",
-        },
-    },
-
-    extends: compat.extends(
-        "enpitech",
-        "eslint:recommended",
-        "plugin:prettier/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react-hooks/recommended",
-        // "plugin:@typescript-eslint/recommended-requiring-type-checking", TODO enable and fix the types
-    ),
-
-    plugins: {
-        "@typescript-eslint": typescriptEslint,
-        react,
-    },
-
-    settings: {
-        react: {
-            version: "detect"
-        },
-    },
-
-    rules: {
-        "no-console": ["error", {
-            allow: ["error"],
-        }],
-
-        "no-alert": "error",
-        "no-debugger": "error",
-        "@typescript-eslint/ban-ts-comment": "off",
-
-        "@typescript-eslint/no-unused-vars": ["error", {
-            vars: "all",
-            args: "after-used",
-            ignoreRestSiblings: true,
-        }],
-
-        "react/react-in-jsx-scope": "off",
-        "linebreak-style": ["error", "unix"],
-        quotes: ["error", "double"],
-        semi: ["error", "always"],
-        "@typescript-eslint/no-explicit-any": "warn",
-    },
-}, {
-    languageOptions: {
-        globals: {
-            ...globals.node,
-        },
-
-        sourceType: "script",
-        parserOptions: {},
-    },
-
-    files: ["**/.eslintrc.{js,cjs}"],
-}]);
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,160 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import react from "eslint-plugin-react";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import tscPlugin from "eslint-plugin-tsc";
+import { fileURLToPath } from "url";
+import path from "path";
+
+const __filename = fileURLToPath(new URL(import.meta.url));
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig([
+  {
+    ignores: ["eslint.config.js"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        heap: "writable",
+        DD_RUM: "writable",
+      },
+
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: { jsx: true },
+        project: "./tsconfig.json",
+        tsconfigRootDir: __dirname,
+      },
+    },
+
+    extends: compat.extends(
+      "enpitech",
+      "eslint:recommended",
+      "plugin:prettier/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:@typescript-eslint/recommended-requiring-type-checking"
+    ),
+
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+      tsc: tscPlugin,
+      react,
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+
+    rules: {
+      "no-console": [
+        "error",
+        {
+          allow: ["error"],
+        },
+      ],
+
+      "no-alert": "error",
+      "no-debugger": "error",
+      "@typescript-eslint/ban-ts-comment": "off",
+
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          vars: "all",
+          args: "after-used",
+          ignoreRestSiblings: true,
+        },
+      ],
+
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-uses-react": "error",
+      "linebreak-style": ["error", "unix"],
+      quotes: ["error", "double"],
+      semi: ["error", "always"],
+      "no-restricted-properties": [
+        "error",
+        {
+          object: "React",
+          property: "*",
+          message: "Using React.* is prohibited.",
+        },
+      ],
+
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/strict-boolean-expressions": "off",
+      "@typescript-eslint/no-unsafe-assignment": "error",
+      "@typescript-eslint/no-unsafe-member-access": "error",
+      "@typescript-eslint/no-unsafe-return": "error",
+      "@typescript-eslint/no-unnecessary-type-assertion": "error",
+      "@typescript-eslint/consistent-type-assertions": [
+        "error",
+        {
+          assertionStyle: "as",
+          objectLiteralTypeAssertions: "never",
+        },
+      ],
+      "@typescript-eslint/no-restricted-types": [
+        "error",
+        {
+          types: {
+            "React.FC": {
+              message:
+                "Avoid using React.FC. Use import type { FC } from React instead",
+            },
+            "React.Node": {
+              message:
+                "Avoid using React.Node. Use import type { Node } from React instead",
+            },
+          },
+        },
+      ],
+      "no-restricted-imports": [
+        "error",
+        {
+          name: "react",
+          importNames: ["default", "*"],
+          message:
+            "Default and namespace React imports are prohibited. Use specific named imports only (e.g., import { useState, type ReactNode } from 'react').",
+          allowTypeImports: false,
+        },
+      ],
+
+      "@typescript-eslint/consistent-type-imports": [
+        "error",
+        {
+          prefer: "type-imports",
+        },
+      ],
+
+      "tsc/config": ["error", { configFile: "./tsconfig.json" }],
+    },
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+
+      sourceType: "script",
+      parserOptions: {},
+    },
+
+    files: ["**/.eslintrc.{js,cjs}"],
+  },
+]);
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -27,6 +27,8 @@
        "uuid": "^13.0.0"
      },
      "devDependencies": {
+        "@eslint/eslintrc": "^3.3.3",
+        "@eslint/js": "^9.39.1",
        "@storybook/addon-docs": "^10.0.8",
        "@storybook/addon-links": "^10.0.8",
        "@storybook/mdx2-csf": "^1.1.0",
@@ -48,6 +50,7 @@
        "eslint-plugin-react": "^7.37.5",
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-storybook": "^10.0.8",
+        "eslint-plugin-tsc": "^2.0.0",
        "flowbite": "^4.0.1",
        "globals": "^16.5.0",
        "husky": "^9.1.7",
@@ -1133,9 +1136,9 @@
      }
    },
    "node_modules/@eslint/eslintrc": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
-      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -1145,7 +1148,7 @@
        "globals": "^14.0.0",
        "ignore": "^5.2.0",
        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
+        "js-yaml": "^4.1.1",
        "minimatch": "^3.1.2",
        "strip-json-comments": "^3.1.1"
      },
@@ -6344,6 +6347,20 @@
        "storybook": "^10.0.8"
      }
    },
+    "node_modules/eslint-plugin-tsc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tsc/-/eslint-plugin-tsc-2.0.0.tgz",
+      "integrity": "sha512-we7n063HSoWDpXjuqgplrYxfWnlVgq7GXteEjxtc/Ve6C0BjGQyoNGjApSVspyru1cckAM9ASwPnSU8Y0OTwTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "typescript-service": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
    "node_modules/eslint-scope": {
      "version": "8.4.0",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -12466,6 +12483,27 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/typescript-service": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/typescript-service/-/typescript-service-2.0.3.tgz",
+      "integrity": "sha512-FzRlqRp965UBzGvGwc6rbeko84jLILZrHf++I4cN8usZUB7F8Lh8/WDiCOUvy2l5os+jBWEz4fbYkkj1DhYJcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=6",
+        "npm": ">=3"
+      }
+    },
+    "node_modules/typescript-service/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true,
+      "license": "0BSD"
+    },
    "node_modules/unbox-primitive": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,8 @@
    "uuid": "^13.0.0"
  },
  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.1",
    "@storybook/addon-docs": "^10.0.8",
    "@storybook/addon-links": "^10.0.8",
    "@storybook/mdx2-csf": "^1.1.0",
@@ -44,6 +46,7 @@
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-storybook": "^10.0.8",
+    "eslint-plugin-tsc": "^2.0.0",
    "flowbite": "^4.0.1",
    "globals": "^16.5.0",
    "husky": "^9.1.7",
@@ -57,12 +60,8 @@
    "vite-plugin-static-copy": "^3.1.4"
  },
  "lint-staged": {
-    "src/*.{js,jsx,ts,tsx}": [
-      "npm run lint:fix",
-      "npm run prettier:fix"
-    ],
-    "*.{json,css,md,mdx}": "npm run prettier:fix",
-    "src/*.{ts,tsx}": "npm run tsc:check"
+    "*.{js,jsx,ts,tsx}": "npm run lint:fix",
+    "*.{js,jsx,ts,tsx,json,css,md,mdx}": "npm run prettier:fix"
  },
  "scripts": {
    "dev": "vite",
@@ -75,7 +74,7 @@
    "storybook": "storybook dev -p 6006",
    "storybook:build": "storybook build",
    "lint": "npx eslint src/",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "npm run lint -- --fix --max-warnings=0",
    "prettier": "npx prettier src/ --check",
    "prettier:fix": "npm run prettier -- --write",
    "cypress:open": "cypress open",
--- a/frontend/src/API/apiService.ts
+++ b/frontend/src/API/apiService.ts
@@ -1,4 +1,4 @@
-import {
+import type {
  Chart,
  ChartVersion,
  Release,
@@ -25,7 +25,7 @@ class ApiService {
  public async fetchWithDefaults<T>(
    url: string,
    options?: RequestInit
-  ): Promise<T> {
+  ): Promise<T | string> {
    let response;

    if (this.currentCluster) {
@@ -43,49 +43,66 @@ class ApiService {
      throw new Error(error);
    }

-    let data;
-    if (!response.headers.get("Content-Type")) {
-      return {} as T;
-    } else if (response.headers.get("Content-Type")?.includes("text/plain")) {
-      data = await response.text();
+    const contentType = response.headers.get("Content-Type") || "";
+    if (!contentType) {
+      return {} as unknown as T;
+    } else if (contentType.includes("text/plain")) {
+      return await response.text();
    } else {
-      data = await response.json();
+      return (await response.json()) as T;
    }
+  }
+
+  public async fetchWithSafeDefaults<T>({
+    url,
+    options,
+    fallback,
+  }: {
+    url: string;
+    options?: RequestInit;
+    fallback: T;
+  }): Promise<T> {
+    const data = await this.fetchWithDefaults<T>(url, options);
+    if (!data) {
+      console.error(url, " response is empty");
+      return fallback;
+    }
+
+    if (typeof data === "string") {
+      console.error(url, " response is string");
+      return fallback;
+    }
+
    return data;
  }

  getToolVersion = async () => {
-    const response = await fetch("/status");
-    const data = await response.json();
-    return data;
+    return await this.fetchWithDefaults("/status");
  };

  getRepositoryLatestVersion = async (repositoryName: string) => {
-    const data = await this.fetchWithDefaults(
+    return await this.fetchWithDefaults(
      `/api/helm/repositories/latestver?name=${repositoryName}`
    );
-    return data;
  };

  getInstalledReleases = async () => {
-    const data = await this.fetchWithDefaults("/api/helm/releases");
-    return data;
+    return await this.fetchWithDefaults("/api/helm/releases");
  };

-  getClusters = async () => {
-    const response = await fetch("/api/k8s/contexts");
-    const data = (await response.json()) as ClustersResponse[];
-    return data;
+  getClusters = async (): Promise<ClustersResponse[]> => {
+    return await this.fetchWithSafeDefaults<ClustersResponse[]>({
+      url: "/api/k8s/contexts",
+      fallback: [],
+    });
  };

  getNamespaces = async () => {
-    const data = await this.fetchWithDefaults("/api/k8s/namespaces/list");
-    return data;
+    return await this.fetchWithDefaults("/api/k8s/namespaces/list");
  };

  getRepositories = async () => {
-    const data = await this.fetchWithDefaults("/api/helm/repositories");
-    return data;
+    return await this.fetchWithDefaults("/api/helm/repositories");
  };

  getRepositoryCharts = async ({
@@ -94,13 +111,12 @@ class ApiService {
    queryKey: readonly unknown[];
  }): Promise<Chart[]> => {
    const [, repository] = queryKey;
-    if (!repository) {
+    if (!repository || typeof repository !== "string") {
      return [];
    }

-    return await this.fetchWithDefaults<Chart[]>(
-      `/api/helm/repositories/${repository}`
-    );
+    const url = `/api/helm/repositories/${repository}`;
+    return await this.fetchWithSafeDefaults<Chart[]>({ url, fallback: [] });
  };

  getChartVersions = async ({
@@ -108,25 +124,22 @@ class ApiService {
  }: QueryFunctionContext<ChartVersion[], Chart>) => {
    const [, chart] = queryKey;

-    const data = await this.fetchWithDefaults(
+    return await this.fetchWithDefaults(
      `/api/helm/repositories/versions?name=${chart.name}`
    );
-    return data;
  };

  getResourceStatus = async ({
    release,
  }: {
    release: Release;
-  }): Promise<ReleaseHealthStatus[] | null> => {
-    if (!release) return null;
+  }): Promise<ReleaseHealthStatus[]> => {
+    if (!release) return [];

-    const data = await this.fetchWithDefaults<
-      Promise<ReleaseHealthStatus[] | null>
-    >(
-      `/api/helm/releases/${release.namespace}/${release.name}/resources?health=true`
-    );
-    return data;
+    return await this.fetchWithSafeDefaults<ReleaseHealthStatus[]>({
+      url: `/api/helm/releases/${release.namespace}/${release.name}/resources?health=true`,
+      fallback: [],
+    });
  };

  getReleasesHistory = async ({
@@ -138,9 +151,10 @@ class ApiService {

    if (!params.namespace || !params.chart) return [];

-    return await this.fetchWithDefaults<ReleaseRevision[]>(
-      `/api/helm/releases/${params.namespace}/${params.chart}/history`
-    );
+    return await this.fetchWithSafeDefaults<ReleaseRevision[]>({
+      url: `/api/helm/releases/${params.namespace}/${params.chart}/history`,
+      fallback: [],
+    });
  };

  getValues = async ({
@@ -158,9 +172,7 @@ class ApiService {
      return Promise.reject(new Error("missing parameters"));

    const url = `/api/helm/repositories/values?chart=${namespace}/${chart.name}&version=${version}`;
-    const data = await this.fetchWithDefaults(url);
-
-    return data;
+    return await this.fetchWithDefaults(url);
  };
 }

--- a/frontend/src/API/k8s.ts
+++ b/frontend/src/API/k8s.ts
@@ -1,6 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
-import { K8sResource, K8sResourceList, KubectlContexts } from "./interfaces";
+import type {
+  K8sResource,
+  K8sResourceList,
+  KubectlContexts,
+} from "./interfaces";
 import apiService from "./apiService";

 // Get list of kubectl contexts configured locally
@@ -8,7 +12,10 @@ function useGetKubectlContexts(options?: UseQueryOptions<KubectlContexts>) {
  return useQuery<KubectlContexts>({
    queryKey: ["k8s", "contexts"],
    queryFn: () =>
-      apiService.fetchWithDefaults<KubectlContexts>("/api/k8s/contexts"),
+      apiService.fetchWithSafeDefaults<KubectlContexts>({
+        url: "/api/k8s/contexts",
+        fallback: { contexts: [] },
+      }),
    ...(options ?? {}),
  });
 }
@@ -23,9 +30,10 @@ function useGetK8sResource(
  return useQuery<K8sResource>({
    queryKey: ["k8s", kind, "get", name, namespace],
    queryFn: () =>
-      apiService.fetchWithDefaults<K8sResource>(
-        `/api/k8s/${kind}/get?name=${name}&namespace=${namespace}`
-      ),
+      apiService.fetchWithSafeDefaults<K8sResource>({
+        url: `/api/k8s/${kind}/get?name=${name}&namespace=${namespace}`,
+        fallback: { kind: "", name: "", namespace: "" },
+      }),
    ...(options ?? {}),
  });
 }
@@ -38,7 +46,10 @@ function useGetK8sResourceList(
  return useQuery<K8sResourceList>({
    queryKey: ["k8s", kind, "list"],
    queryFn: () =>
-      apiService.fetchWithDefaults<K8sResourceList>(`/api/k8s/${kind}/list`),
+      apiService.fetchWithSafeDefaults<K8sResourceList>({
+        url: `/api/k8s/${kind}/list`,
+        fallback: { items: [] },
+      }),
    ...(options ?? {}),
  });
 }
--- a/frontend/src/API/other.ts
+++ b/frontend/src/API/other.ts
@@ -4,14 +4,14 @@ import {
  useMutation,
  useQuery,
 } from "@tanstack/react-query";
-import { ApplicationStatus } from "./interfaces";
+import type { ApplicationStatus } from "./interfaces";
 import apiService from "./apiService";

 // Shuts down the Helm Dashboard application
 export function useShutdownHelmDashboard(
-  options?: UseMutationOptions<void, Error>
+  options?: UseMutationOptions<string, Error>
 ) {
-  return useMutation<void, Error>({
+  return useMutation<string, Error>({
    mutationFn: () =>
      apiService.fetchWithDefaults("/", {
        method: "DELETE",
@@ -22,11 +22,16 @@ export function useShutdownHelmDashboard(

 // Gets application status
 export function useGetApplicationStatus(
-  options?: UseQueryOptions<ApplicationStatus>
+  options?: UseQueryOptions<ApplicationStatus | null>
 ) {
-  return useQuery<ApplicationStatus>({
+  return useQuery<ApplicationStatus | null>({
    queryKey: ["status"],
-    queryFn: () => apiService.fetchWithDefaults<ApplicationStatus>("/status"),
+    queryFn: async () =>
+      await apiService.fetchWithSafeDefaults<ApplicationStatus | null>({
+        url: "/status",
+        fallback: null,
+      }),
+
    ...(options ?? {}),
  });
 }
--- a/frontend/src/API/releases.ts
+++ b/frontend/src/API/releases.ts
@@ -4,8 +4,8 @@ import {
  useQuery,
  type UseQueryOptions,
 } from "@tanstack/react-query";
-import { ChartVersion, Release } from "../data/types";
-import { LatestChartVersion } from "./interfaces";
+import type { ChartVersion, Release } from "../data/types";
+import type { LatestChartVersion } from "./interfaces";
 import apiService from "./apiService";
 import { getVersionManifestFormData } from "./shared";
 import { isNewerVersion } from "../utils";
@@ -16,7 +16,10 @@ export function useGetInstalledReleases(context: string) {
  return useQuery<Release[]>({
    queryKey: ["installedReleases", context],
    queryFn: () =>
-      apiService.fetchWithDefaults<Release[]>("/api/helm/releases"),
+      apiService.fetchWithSafeDefaults<Release[]>({
+        url: "/api/helm/releases",
+        fallback: [],
+      }),
    retry: false,
  });
 }
@@ -65,44 +68,47 @@ export function useGetReleaseManifest({
  return useQuery<ReleaseManifest[]>({
    queryKey: ["manifest", namespace, chartName],
    queryFn: () =>
-      apiService.fetchWithDefaults<ReleaseManifest[]>(
-        `/api/helm/releases/${namespace}/${chartName}/manifests`
-      ),
+      apiService.fetchWithSafeDefaults<ReleaseManifest[]>({
+        url: `/api/helm/releases/${namespace}/${chartName}/manifests`,
+        fallback: [],
+      }),
    ...(options ?? {}),
  });
 }

 // List of installed k8s resources for this release
 export function useGetResources(ns: string, name: string, enabled?: boolean) {
-  const { data, ...rest } = useQuery<StructuredResources[]>({
+  return useQuery<StructuredResources[]>({
    queryKey: ["resources", ns, name],
    queryFn: () =>
-      apiService.fetchWithDefaults<StructuredResources[]>(
-        `/api/helm/releases/${ns}/${name}/resources?health=true`
-      ),
+      apiService.fetchWithSafeDefaults<StructuredResources[]>({
+        url: `/api/helm/releases/${ns}/${name}/resources?health=true`,
+        fallback: [],
+      }),
+    select: (data) =>
+      data
+        ?.map((resource) => ({
+          ...resource,
+          status: {
+            ...resource.status,
+            conditions: resource.status.conditions.filter(
+              (c) => c.type === HD_RESOURCE_CONDITION_TYPE
+            ),
+          },
+        }))
+        .sort((a, b) => {
+          const interestingResources = [
+            "STATEFULSET",
+            "DEAMONSET",
+            "DEPLOYMENT",
+          ];
+          return (
+            interestingResources.indexOf(b.kind.toUpperCase()) -
+            interestingResources.indexOf(a.kind.toUpperCase())
+          );
+        }),
    enabled,
  });
-
-  return {
-    data: data
-      ?.map((resource) => ({
-        ...resource,
-        status: {
-          ...resource.status,
-          conditions: resource.status.conditions.filter(
-            (c) => c.type === HD_RESOURCE_CONDITION_TYPE
-          ),
-        },
-      }))
-      .sort((a, b) => {
-        const interestingResources = ["STATEFULSET", "DEAMONSET", "DEPLOYMENT"];
-        return (
-          interestingResources.indexOf(b.kind.toUpperCase()) -
-          interestingResources.indexOf(a.kind.toUpperCase())
-        );
-      }),
-    ...rest,
-  };
 }

 export function useGetResourceDescription(
@@ -130,9 +136,10 @@ export function useGetLatestVersion(
  return useQuery<ChartVersion[]>({
    queryKey: ["latestver", chartName],
    queryFn: () =>
-      apiService.fetchWithDefaults<ChartVersion[]>(
-        `/api/helm/repositories/latestver?name=${chartName}`
-      ),
+      apiService.fetchWithSafeDefaults<ChartVersion[]>({
+        url: `/api/helm/repositories/latestver?name=${chartName}`,
+        fallback: [],
+      }),
    gcTime: 0,
    ...(options ?? {}),
  });
@@ -143,10 +150,13 @@ export function useGetVersions(
 ) {
  return useQuery<LatestChartVersion[]>({
    queryKey: ["versions", chartName],
-    queryFn: () =>
-      apiService.fetchWithDefaults<LatestChartVersion[]>(
-        `/api/helm/repositories/versions?name=${chartName}`
-      ),
+    queryFn: async () => {
+      const url = `/api/helm/repositories/versions?name=${chartName}`;
+      return await apiService.fetchWithSafeDefaults<LatestChartVersion[]>({
+        url,
+        fallback: [],
+      });
+    },
    select: (data) =>
      data?.sort((a, b) => (isNewerVersion(a.version, b.version) ? 1 : -1)),
    ...(options ?? {}),
@@ -192,21 +202,21 @@ export function useGetDiff(
 // Rollback the release to a previous revision
 export function useRollbackRelease(
  options?: UseMutationOptions<
-    void,
-    unknown,
+    string,
+    Error,
    { ns: string; name: string; revision: number }
  >
 ) {
  return useMutation<
-    void,
-    unknown,
+    string,
+    Error,
    { ns: string; name: string; revision: number }
  >({
    mutationFn: ({ ns, name, revision }) => {
      const formData = new FormData();
      formData.append("revision", revision.toString());

-      return apiService.fetchWithDefaults<void>(
+      return apiService.fetchWithDefaults<string>(
        `/api/helm/releases/${ns}/${name}/rollback`,
        {
          method: "POST",
@@ -220,11 +230,11 @@ export function useRollbackRelease(

 // Run the tests on a release
 export function useTestRelease(
-  options?: UseMutationOptions<void, unknown, { ns: string; name: string }>
+  options?: UseMutationOptions<string, Error, { ns: string; name: string }>
 ) {
-  return useMutation<void, unknown, { ns: string; name: string }>({
+  return useMutation<string, Error, { ns: string; name: string }>({
    mutationFn: ({ ns, name }) => {
-      return apiService.fetchWithDefaults<void>(
+      return apiService.fetchWithDefaults<string>(
        `/api/helm/releases/${ns}/${name}/test`,
        {
          method: "POST",
@@ -309,19 +319,22 @@ export const useVersionData = ({
        releaseName,
      });

-      const fetchUrl = isInstallRepoChart
+      const url = isInstallRepoChart
        ? `/api/helm/releases/${namespace || "default"}`
        : `/api/helm/releases/${
            namespace ? namespace : "[empty]"
          }${`/${releaseName}`}`;

-      return await apiService.fetchWithDefaults<{ [key: string]: string }>(
-        fetchUrl,
-        {
+      return await apiService.fetchWithSafeDefaults<{
+        [key: string]: string;
+      }>({
+        url,
+        options: {
          method: "post",
          body: formData,
-        }
-      );
+        },
+        fallback: {},
+      });
    },

    enabled,
--- a/frontend/src/API/repositories.ts
+++ b/frontend/src/API/repositories.ts
@@ -4,7 +4,7 @@ import {
  useMutation,
  useQuery,
 } from "@tanstack/react-query";
-import { HelmRepositories } from "./interfaces";
+import type { HelmRepositories } from "./interfaces";
 import apiService from "./apiService";

 // Get list of Helm repositories
@@ -14,7 +14,11 @@ export function useGetRepositories(
  return useQuery<HelmRepositories>({
    queryKey: ["helm", "repositories"],
    queryFn: () =>
-      apiService.fetchWithDefaults<HelmRepositories>("/api/helm/repositories"),
+      apiService.fetchWithSafeDefaults<HelmRepositories>({
+        url: "/api/helm/repositories",
+        fallback: [],
+      }),
+    select: (data) => data?.sort((a, b) => a?.name?.localeCompare(b?.name)),
    ...(options ?? {}),
  });
 }
@@ -22,11 +26,11 @@ export function useGetRepositories(
 // Update repository from remote
 export function useUpdateRepo(
  repo: string,
-  options?: UseMutationOptions<void, unknown, void>
+  options?: UseMutationOptions<string, Error>
 ) {
-  return useMutation<void, unknown, void>({
+  return useMutation<string, Error>({
    mutationFn: () => {
-      return apiService.fetchWithDefaults<void>(
+      return apiService.fetchWithDefaults<string>(
        `/api/helm/repositories/${repo}`,
        {
          method: "POST",
@@ -40,11 +44,11 @@ export function useUpdateRepo(
 // Remove repository
 export function useDeleteRepo(
  repo: string,
-  options?: UseMutationOptions<void, unknown, void>
+  options?: UseMutationOptions<string, Error>
 ) {
-  return useMutation<void, unknown, void>({
+  return useMutation<string, Error>({
    mutationFn: () => {
-      return apiService.fetchWithDefaults<void>(
+      return apiService.fetchWithDefaults<string>(
        `/api/helm/repositories/${repo}`,
        {
          method: "DELETE",
--- a/frontend/src/API/scanners.ts
+++ b/frontend/src/API/scanners.ts
@@ -7,14 +7,19 @@ import {
  useMutation,
  useQuery,
 } from "@tanstack/react-query";
-import { ScanResult, ScanResults, ScannersList } from "./interfaces";
+import type { ScanResults, ScannersList } from "./interfaces";
+import { ScanResult } from "./interfaces";
 import apiService from "./apiService";

 // Get list of discovered scanners
 function useGetDiscoveredScanners(options?: UseQueryOptions<ScannersList>) {
  return useQuery<ScannersList>({
    queryKey: ["scanners"],
-    queryFn: () => apiService.fetchWithDefaults<ScannersList>("/api/scanners"),
+    queryFn: () =>
+      apiService.fetchWithSafeDefaults<ScannersList>({
+        url: "/api/scanners",
+        fallback: { scanners: [] },
+      }),
    ...(options ?? {}),
  });
 }
@@ -28,9 +33,13 @@ function useScanManifests(
  formData.append("manifest", manifest);
  return useMutation<ScanResults, Error, string>({
    mutationFn: () =>
-      apiService.fetchWithDefaults<ScanResults>("/api/scanners/manifests", {
-        method: "POST",
-        body: formData,
+      apiService.fetchWithSafeDefaults<ScanResults>({
+        url: "/api/scanners/manifests",
+        options: {
+          method: "POST",
+          body: formData,
+        },
+        fallback: {},
      }),
    ...(options ?? {}),
  });
@@ -46,9 +55,10 @@ function useScanK8sResource(
  return useQuery<ScanResults>({
    queryKey: ["scanners", "resource", kind, namespace, name],
    queryFn: () =>
-      apiService.fetchWithDefaults<ScanResults>(
-        `/api/scanners/resource/${kind}?namespace=${namespace}&name=${name}`
-      ),
+      apiService.fetchWithSafeDefaults<ScanResults>({
+        url: `/api/scanners/resource/${kind}?namespace=${namespace}&name=${name}`,
+        fallback: {},
+      }),
    ...(options ?? {}),
  });
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,8 +4,10 @@ import Installed from "./pages/Installed";
 import RepositoryPage from "./pages/Repository";
 import Revision from "./pages/Revision";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { FC } from "react";
 import { useState } from "react";
-import { ErrorAlert, ErrorModalContext } from "./context/ErrorModalContext";
+import type { ErrorAlert } from "./context/ErrorModalContext";
+import { ErrorModalContext } from "./context/ErrorModalContext";
 import GlobalErrorModal from "./components/modal/GlobalErrorModal";
 import { AppContextProvider } from "./context/AppContext";
 import apiService from "./API/apiService";
@@ -31,7 +33,7 @@ const PageLayout = () => {
  );
 };

-const SyncContext: React.FC = () => {
+const SyncContext: FC = () => {
  const { context } = useParams();
  if (context) {
    apiService.setCluster(decodeURIComponent(context));
@@ -52,31 +54,29 @@ export default function App() {
        <QueryClientProvider client={queryClient}>
          <HashRouter>
            <Routes>
-              <Route path="docs/" element={<DocsPage />} />
+              <Route path="docs/*" element={<DocsPage />} />
              <Route path="*" element={<PageLayout />}>
                <Route path=":context?/*" element={<SyncContext />}>
+                  <Route
+                    path="repository/:selectedRepo?/*"
+                    element={<RepositoryPage />}
+                  />
                  <Route path="installed/?" element={<Installed />} />
                  <Route
                    path=":namespace/:chart/installed/revision/:revision"
                    element={<Revision />}
                  />
-                  <Route path="repository/" element={<RepositoryPage />} />
-                  <Route
-                    path="repository/:selectedRepo?"
-                    element={<RepositoryPage />}
-                  />
                  <Route path="*" element={<Installed />} />
                </Route>
-                <Route path="*" element={<Installed />} />
              </Route>
            </Routes>
-            <GlobalErrorModal
-              isOpen={!!shouldShowErrorModal}
-              onClose={() => setShowErrorModal(undefined)}
-              titleText={shouldShowErrorModal?.title || ""}
-              contentText={shouldShowErrorModal?.msg || ""}
-            />
          </HashRouter>
+          <GlobalErrorModal
+            isOpen={!!shouldShowErrorModal}
+            onClose={() => setShowErrorModal(undefined)}
+            titleText={shouldShowErrorModal?.title || ""}
+            contentText={shouldShowErrorModal?.msg || ""}
+          />
        </QueryClientProvider>
      </ErrorModalContext.Provider>
    </AppContextProvider>
--- a/frontend/src/components/Badge.stories.tsx
+++ b/frontend/src/components/Badge.stories.tsx
@@ -14,7 +14,7 @@
 * @see https://storybook.js.org/docs/react/writing-stories/introduction
 */

-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import Badge from "./Badge";

 // We set the metadata for the story.
--- a/frontend/src/components/Badge.tsx
+++ b/frontend/src/components/Badge.tsx
@@ -17,7 +17,7 @@
 *
 *
 */
-import { JSX, ReactNode } from "react";
+import type { JSX, ReactNode } from "react";

 export type BadgeCode = "success" | "warning" | "error" | "unknown";

--- a/frontend/src/components/Button.stories.tsx
+++ b/frontend/src/components/Button.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Button from "./Button";

 const meta = {
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -12,7 +12,7 @@
 *
 *
 */
-import { HTMLAttributes, JSX, ReactNode } from "react";
+import type { HTMLAttributes, JSX, ReactNode } from "react";

 // this is a type declaration for the action prop.
 // it is a function that takes a string as an argument and returns void.
--- a/frontend/src/components/ClustersList.cy.tsx
+++ b/frontend/src/components/ClustersList.cy.tsx
@@ -2,7 +2,8 @@ import { AppContextProvider } from "../context/AppContext";
 import ClustersList from "./ClustersList";
 import { BrowserRouter } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Release } from "../data/types";
+import type { Release } from "../data/types";
+import { DeploymentStatus } from "./common/StatusLabel";

 type ClustersListProps = {
  onClusterChange: (clusterName: string) => void;
@@ -17,7 +18,7 @@ const generateTestReleaseData = (): Release => ({
  namespace: "default",
  revision: 1,
  updated: "2024-01-23T15:37:35.0992836+02:00",
-  status: "deployed",
+  status: DeploymentStatus.DEPLOYED,
  chart: "helm-dashboard-0.1.10",
  chart_name: "helm-dashboard",
  chart_ver: "0.1.10",
--- a/frontend/src/components/ClustersList.stories.tsx
+++ b/frontend/src/components/ClustersList.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import ClustersList from "./ClustersList";

 const meta = {
--- a/frontend/src/components/ClustersList.tsx
+++ b/frontend/src/components/ClustersList.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useEffectEvent, useMemo, useState } from "react";
-import { Cluster, Release } from "../data/types";
+import { useEffect, useEffectEvent, useMemo } from "react";
+import type { Cluster, Release } from "../data/types";
 import apiService from "../API/apiService";
 import { useQuery } from "@tanstack/react-query";
 import useCustomSearchParams from "../hooks/useCustomSearchParams";
@@ -43,21 +43,19 @@ function ClustersList({
 }: ClustersListProps) {
  const { upsertSearchParams, removeSearchParam } = useCustomSearchParams();
  const { clusterMode } = useAppContext();
-  const [sortedClusters, setSortedClusters] = useState<Cluster[]>([]);

-  const { data: clusters, isSuccess } = useQuery<Cluster[]>({
+  const { data: clusters = [], isSuccess } = useQuery<Cluster[]>({
    queryKey: ["clusters", selectedCluster],
    queryFn: apiService.getClusters,
+    select: (data) =>
+      data?.sort((a, b) =>
+        getCleanClusterName(a.Name).localeCompare(getCleanClusterName(b.Name))
+      ),
  });

  const onSuccess = useEffectEvent((clusters: Cluster[]) => {
-    const sortedData = [...clusters].sort((a, b) =>
-      getCleanClusterName(a.Name).localeCompare(getCleanClusterName(b.Name))
-    );
-    setSortedClusters(sortedData);
-
-    if (sortedData && sortedData.length > 0 && !selectedCluster) {
-      onClusterChange(sortedData[0].Name);
+    if (clusters && clusters.length && !selectedCluster) {
+      onClusterChange(clusters[0].Name);
    }

    if (selectedCluster) {
@@ -111,10 +109,10 @@ function ClustersList({
      {!clusterMode ? (
        <>
          <label className="font-bold">Clusters</label>
-          {sortedClusters?.map((cluster) => {
+          {clusters?.map((cluster) => {
            return (
              <span
-                key={cluster.Name}
+                key={cluster.Name + cluster.Namespace}
                className="data-cy-clusterName mt-2 flex items-center text-xs"
              >
                <input
--- a/frontend/src/components/InstalledPackages/HealthStatus.tsx
+++ b/frontend/src/components/InstalledPackages/HealthStatus.tsx
@@ -1,6 +1,6 @@
 import { HD_RESOURCE_CONDITION_TYPE } from "../../API/releases";
 import { Tooltip } from "flowbite-react";
-import { ReleaseHealthStatus } from "../../data/types";
+import type { ReleaseHealthStatus } from "../../data/types";

 interface Props {
  statusData: ReleaseHealthStatus[];
--- a/frontend/src/components/InstalledPackages/InstalledPackageCard.stories.tsx
+++ b/frontend/src/components/InstalledPackages/InstalledPackageCard.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import InstalledPackageCard from "./InstalledPackageCard";

 const meta = {
--- a/frontend/src/components/InstalledPackages/InstalledPackageCard.tsx
+++ b/frontend/src/components/InstalledPackages/InstalledPackageCard.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Release, ReleaseHealthStatus } from "../../data/types";
+import type { Release, ReleaseHealthStatus } from "../../data/types";
 import { BsArrowUpCircleFill, BsPlusCircleFill } from "react-icons/bs";
 import { getAge } from "../../timeUtils";
 import StatusLabel, {
@@ -13,7 +13,7 @@ import HelmGrayIcon from "../../assets/helm-gray-50.svg";
 import Spinner from "../Spinner";
 import { useGetLatestVersion } from "../../API/releases";
 import { isNewerVersion } from "../../utils";
-import { LatestChartVersion } from "../../API/interfaces";
+import type { LatestChartVersion } from "../../API/interfaces";
 import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
 import { useInView } from "react-intersection-observer";

@@ -35,7 +35,7 @@ export default function InstalledPackageCard({
    queryKey: ["chartName", release.chartName],
  });

-  const { data: statusData } = useQuery<ReleaseHealthStatus[] | null>({
+  const { data: statusData = [], isLoading } = useQuery<ReleaseHealthStatus[]>({
    queryKey: ["resourceStatus", release],
    queryFn: () => apiService.getResourceStatus({ release }),
    enabled: inView,
@@ -61,14 +61,21 @@ export default function InstalledPackageCard({
    setIsMouseOver(false);
  };

-  const handleOnClick = () => {
+  const onClick = async () => {
    const { name, namespace } = release;
-    navigate(`/${namespace}/${name}/installed/revision/${release.revision}`, {
-      state: release,
-    });
+    await navigate(
+      `/${namespace}/${name}/installed/revision/${release.revision}`,
+      {
+        state: release,
+      }
+    );
  };

-  const statusColor = getStatusColor(release.status as DeploymentStatus);
+  const handleClick = () => {
+    void onClick();
+  };
+
+  const statusColor = getStatusColor(release.status);
  const borderLeftColor: { [key: string]: string } = {
    [DeploymentStatus.DEPLOYED]: "border-l-border-deployed",
    [DeploymentStatus.FAILED]: "border-l-text-danger",
@@ -85,7 +92,7 @@ export default function InstalledPackageCard({
      }`}
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
-      onClick={handleOnClick}
+      onClick={handleClick}
    >
      <img
        src={release.icon || HelmGrayIcon}
@@ -118,10 +125,10 @@ export default function InstalledPackageCard({
            {release.description}
          </div>
          <div className="col-span-3 mr-2">
-            {statusData ? (
-              <HealthStatus statusData={statusData} />
-            ) : (
+            {isLoading ? (
              <Spinner size={4} />
+            ) : (
+              <HealthStatus statusData={statusData} />
            )}
          </div>
          <div className="items col-span-2 flex flex-col text-muted">
--- a/frontend/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx
+++ b/frontend/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import InstalledPackagesHeader from "./InstalledPackagesHeader";

 const meta = {
--- a/frontend/src/components/InstalledPackages/InstalledPackagesHeader.tsx
+++ b/frontend/src/components/InstalledPackages/InstalledPackagesHeader.tsx
@@ -1,9 +1,10 @@
 import HeaderLogo from "../../assets/packges-header.svg";
-import { Release } from "../../data/types";
+import type { Release } from "../../data/types";
+import type { Dispatch, SetStateAction } from "react";

 type InstalledPackagesHeaderProps = {
  filteredReleases?: Release[];
-  setFilterKey: React.Dispatch<React.SetStateAction<string>>;
+  setFilterKey: Dispatch<SetStateAction<string>>;
  isLoading: boolean;
 };

--- a/frontend/src/components/InstalledPackages/InstalledPackagesList.stories.tsx
+++ b/frontend/src/components/InstalledPackages/InstalledPackagesList.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import InstalledPackagesList from "./InstalledPackagesList";

 const meta = {
--- a/frontend/src/components/InstalledPackages/InstalledPackagesList.tsx
+++ b/frontend/src/components/InstalledPackages/InstalledPackagesList.tsx
@@ -1,5 +1,5 @@
 import InstalledPackageCard from "./InstalledPackageCard";
-import { Release } from "../../data/types";
+import type { Release } from "../../data/types";

 type InstalledPackagesListProps = {
  filteredReleases: Release[];
--- a/frontend/src/components/LinkWithSearchParams.tsx
+++ b/frontend/src/components/LinkWithSearchParams.tsx
@@ -27,13 +27,9 @@ const LinkWithSearchParams = ({
    prefixedUrl = `/${encodeURIComponent(context)}${to}`;
  }

-  return (
-    <NavLink
-      data-cy="navigation-link"
-      to={`${prefixedUrl}/?${params.toString()}`}
-      {...props}
-    />
-  );
+  const url = `${prefixedUrl}/?${params.toString()}`;
+
+  return <NavLink data-cy="navigation-link" to={url} {...props} />;
 };

 export default LinkWithSearchParams;
--- a/frontend/src/components/SelectMenu.stories.tsx
+++ b/frontend/src/components/SelectMenu.stories.tsx
@@ -6,7 +6,7 @@
 * The default story renders the component with the default props.
 */

-import { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { action } from "storybook/actions";
 import SelectMenu, { SelectMenuItem } from "./SelectMenu";

--- a/frontend/src/components/SelectMenu.tsx
+++ b/frontend/src/components/SelectMenu.tsx
@@ -24,7 +24,7 @@
 *
 *
 */
-import { JSX } from "react";
+import type { JSX, ReactNode } from "react";

 // define the SelectMenuItem type:
 // This is an object with a label and id.
@@ -39,7 +39,7 @@ export interface SelectMenuItemProps {

 export interface SelectMenuProps {
  header: string;
-  children: React.ReactNode;
+  children: ReactNode;
  selected: number;
  onSelect: (id: number) => void;
 }
--- a/frontend/src/components/ShutDownButton.stories.tsx
+++ b/frontend/src/components/ShutDownButton.stories.tsx
@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react-vite";
+import type { StoryFn, Meta } from "@storybook/react-vite";
 import ShutDownButton from "./ShutDownButton";

 const meta = {
--- a/frontend/src/components/ShutDownButton.tsx
+++ b/frontend/src/components/ShutDownButton.tsx
@@ -1,5 +1,4 @@
 import { BsPower } from "react-icons/bs";
-
 import Modal from "./modal/Modal";
 import { useShutdownHelmDashboard } from "../API/other";

--- a/frontend/src/components/Tabs.stories.tsx
+++ b/frontend/src/components/Tabs.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import Tabs from "./Tabs";

 const meta = {
--- a/frontend/src/components/Tabs.tsx
+++ b/frontend/src/components/Tabs.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import useCustomSearchParams from "../hooks/useCustomSearchParams";

 export interface Tab {
--- a/frontend/src/components/TabsBar.stories.tsx
+++ b/frontend/src/components/TabsBar.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import TabsBar from "./TabsBar";

 const meta = {
--- a/frontend/src/components/TabsBar.tsx
+++ b/frontend/src/components/TabsBar.tsx
@@ -14,7 +14,7 @@
 *
 *
 */
-import { JSX } from "react";
+import type { JSX } from "react";

 interface TabsBarProps {
  tabs: Array<{ name: string; component: JSX.Element }>;
--- a/frontend/src/components/TextInput.stories.tsx
+++ b/frontend/src/components/TextInput.stories.tsx
@@ -4,7 +4,7 @@
 * the first story simply renders the component with the default props.
 */

-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import TextInput from "./TextInput";

 const meta = {
--- a/frontend/src/components/TextInput.tsx
+++ b/frontend/src/components/TextInput.tsx
@@ -12,13 +12,13 @@
 * @return JSX.Element
 *
 */
-import { JSX } from "react";
+import type { ChangeEvent, JSX } from "react";

 export interface TextInputProps {
  label: string;
  placeholder: string;
  isMandatory?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }

 export default function TextInput(props: TextInputProps): JSX.Element {
--- a/frontend/src/components/Tooltip.tsx
+++ b/frontend/src/components/Tooltip.tsx
@@ -1,4 +1,5 @@
-import { type ReactElement, cloneElement, HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
+import { type ReactElement, cloneElement } from "react";

 export default function Tooltip({
  id,
@@ -15,7 +16,7 @@ export default function Tooltip({
        element as ReactElement<HTMLAttributes<HTMLElement>>,
        {
          "data-tooltip-target": id,
-        } as HTMLAttributes<HTMLElement>
+        } as unknown as HTMLAttributes<HTMLElement>
      )}
      <div
        id={id}
--- a/frontend/src/components/Troubleshoot.stories.tsx
+++ b/frontend/src/components/Troubleshoot.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Troubleshoot } from "./Troubleshoot";

 const meta = {
--- a/frontend/src/components/common/Button/Button.stories.tsx
+++ b/frontend/src/components/common/Button/Button.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";

 import { Button } from "./Button";

--- a/frontend/src/components/common/DropDown.stories.tsx
+++ b/frontend/src/components/common/DropDown.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import { action } from "storybook/actions";
 import DropDown from "./DropDown";
 import { BsSlack, BsGithub } from "react-icons/bs";
@@ -10,7 +10,7 @@ const meta = {
   */
  title: "DropDown",
  component: DropDown,
-} as Meta<typeof DropDown>;
+} as unknown as Meta<typeof DropDown>;

 export default meta;

--- a/frontend/src/components/common/DropDown.tsx
+++ b/frontend/src/components/common/DropDown.tsx
@@ -1,4 +1,5 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import ArrowDownIcon from "../../assets/arrow-down-icon.svg";

 export type DropDownItem = {
--- a/frontend/src/components/common/Header/Header.stories.tsx
+++ b/frontend/src/components/common/Header/Header.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";

 import { Header } from "./Header";

--- a/frontend/src/components/common/StatusLabel.stories.tsx
+++ b/frontend/src/components/common/StatusLabel.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import StatusLabel, { DeploymentStatus } from "./StatusLabel";

 const meta = {
--- a/frontend/src/components/common/StatusLabel.tsx
+++ b/frontend/src/components/common/StatusLabel.tsx
@@ -1,10 +1,5 @@
 import { AiOutlineReload } from "react-icons/ai";

-type StatusLabelProps = {
-  status: string;
-  isRollback?: boolean;
-};
-
 export enum DeploymentStatus {
  DEPLOYED = "deployed",
  FAILED = "failed",
@@ -12,6 +7,11 @@ export enum DeploymentStatus {
  SUPERSEDED = "superseded",
 }

+type StatusLabelProps = {
+  status: DeploymentStatus;
+  isRollback?: boolean;
+};
+
 export function getStatusColor(status: DeploymentStatus) {
  if (status === DeploymentStatus.DEPLOYED) return "text-deployed";
  if (status === DeploymentStatus.FAILED) return "text-failed";
@@ -20,7 +20,7 @@ export function getStatusColor(status: DeploymentStatus) {
 }

 function StatusLabel({ status, isRollback }: StatusLabelProps) {
-  const statusColor = getStatusColor(status as DeploymentStatus);
+  const statusColor = getStatusColor(status);

  return (
    <div
--- a/frontend/src/components/modal/AddRepositoryModal.stories.tsx
+++ b/frontend/src/components/modal/AddRepositoryModal.stories.tsx
@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react-vite";
+import type { StoryFn, Meta } from "@storybook/react-vite";
 import AddRepositoryModal from "./AddRepositoryModal";

 const meta = {
--- a/frontend/src/components/modal/AddRepositoryModal.tsx
+++ b/frontend/src/components/modal/AddRepositoryModal.tsx
@@ -36,7 +36,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

-  const addRepository = () => {
+  const addRepository = async () => {
    const body = new FormData();
    body.append("name", formData.name ?? "");
    body.append("url", formData.url ?? "");
@@ -45,32 +45,34 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {

    setIsLoading(true);

-    apiService
-      .fetchWithDefaults<void>("/api/helm/repositories", {
+    try {
+      await apiService.fetchWithDefaults<void>("/api/helm/repositories", {
        method: "POST",
        body,
-      })
-      .then(() => {
-        setIsLoading(false);
-        onClose();
-
-        queryClient.invalidateQueries({
-          queryKey: ["helm", "repositories"],
-        });
-        setSelectedRepo(formData.name || "");
-        navigate(`/repository/${formData.name}`, {
-          replace: true,
-        });
-      })
-      .catch((error) => {
-        alertError.setShowErrorModal({
-          title: "Failed to add repo",
-          msg: error.message,
-        });
-      })
-      .finally(() => {
-        setIsLoading(false);
      });
+
+      setIsLoading(false);
+      onClose();
+
+      await queryClient.invalidateQueries({
+        queryKey: ["helm", "repositories"],
+      });
+      setSelectedRepo(formData.name || "");
+      await navigate(`/repository/${formData.name}`, {
+        replace: true,
+      });
+    } catch (err) {
+      alertError.setShowErrorModal({
+        title: "Failed to add repo",
+        msg: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAddRepository = () => {
+    void addRepository();
  };

  return (
@@ -84,7 +86,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
          <button
            data-cy="add-chart-repository-button"
            className="flex cursor-pointer items-center rounded-lg bg-primary px-3 py-1.5 text-center text-base font-medium text-white hover:bg-add-repo focus:ring-4 focus:ring-blue-300 focus:outline-hidden disabled:bg-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            onClick={addRepository}
+            onClick={handleAddRepository}
            disabled={isLoading}
          >
            {isLoading && <Spinner size={4} />}
--- a/frontend/src/components/modal/ErrorModal.stories.tsx
+++ b/frontend/src/components/modal/ErrorModal.stories.tsx
@@ -1,5 +1,5 @@
 import { action } from "storybook/actions";
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import ErrorModal from "./ErrorModal";

 const meta = {
--- a/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
+++ b/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
@@ -1,11 +1,11 @@
 import { useParams } from "react-router";
 import { useEffect, useEffectEvent, useMemo, useState } from "react";
+import type { VersionData } from "../../../API/releases";
 import {
  useChartReleaseValues,
  useGetReleaseManifest,
  useGetVersions,
  useVersionData,
-  VersionData,
 } from "../../../API/releases";
 import Modal, { ModalButtonStyle } from "../Modal";
 import { GeneralDetails } from "./GeneralDetails";
@@ -17,11 +17,11 @@ import { isNoneEmptyArray } from "../../../utils";
 import useCustomSearchParams from "../../../hooks/useCustomSearchParams";
 import { useChartRepoValues } from "../../../API/repositories";
 import { useDiffData } from "../../../API/shared";
-import { InstallChartModalProps } from "../../../data/types";
+import type { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
 import apiService from "../../../API/apiService";
 import { InstallUpgradeTitle } from "./InstallUpgradeTitle";
-import { LatestChartVersion } from "../../../API/interfaces";
+import type { LatestChartVersion } from "../../../API/interfaces";

 export const InstallReleaseChartModal = ({
  isOpen,
@@ -129,7 +129,7 @@ export const InstallReleaseChartModal = ({
  });

  // Confirm method (install)
-  const setReleaseVersionMutation = useMutation<VersionData>({
+  const setReleaseVersionMutation = useMutation<VersionData, Error>({
    mutationKey: [
      "setVersion",
      namespace,
@@ -148,20 +148,23 @@ export const InstallReleaseChartModal = ({
      }
      formData.append("version", selectedVersion || "");
      formData.append("values", userValues || releaseValues || ""); // if userValues is empty, we use the release values
-      return await apiService.fetchWithDefaults(
-        `/api/helm/releases/${
-          namespace ? namespace : "default"
-        }${`/${releaseName}`}`,
-        {
+      const url = `/api/helm/releases/${
+        namespace ? namespace : "default"
+      }/${releaseName}`;
+
+      return await apiService.fetchWithSafeDefaults<VersionData>({
+        url,
+        options: {
          method: "post",
          body: formData,
-        }
-      );
+        },
+        fallback: { version: "", urls: [""] },
+      });
    },
    onSuccess: async (response) => {
      onClose();
      setSelectedVersionData({ version: "", urls: [] }); //cleanup
-      navigate(
+      await navigate(
        `/${
          namespace ? namespace : "default"
        }/${releaseName}/installed/revision/${response.version}`
--- a/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
+++ b/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
@@ -10,11 +10,11 @@ import useNavigateWithSearchParams from "../../../hooks/useNavigateWithSearchPar
 import { VersionToInstall } from "./VersionToInstall";
 import { isNoneEmptyArray } from "../../../utils";
 import { useDiffData } from "../../../API/shared";
-import { InstallChartModalProps } from "../../../data/types";
+import type { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
 import apiService from "../../../API/apiService";
 import { InstallUpgradeTitle } from "./InstallUpgradeTitle";
-import { LatestChartVersion } from "../../../API/interfaces";
+import type { LatestChartVersion } from "../../../API/interfaces";

 export const InstallRepoChartModal = ({
  isOpen,
@@ -135,18 +135,21 @@ export const InstallRepoChartModal = ({
      formData.append("values", userValues);
      formData.append("name", releaseName || "");

-      return await apiService.fetchWithDefaults(
-        `/api/helm/releases/${namespace ? namespace : "default"}`,
-        {
+      return await apiService.fetchWithSafeDefaults({
+        url: `/api/helm/releases/${namespace ? namespace : "default"}`,
+        options: {
          method: "post",
          body: formData,
-        }
-      );
+        },
+        fallback: { namespace: "", name: "" },
+      });
    },

    onSuccess: async (response: { namespace: string; name: string }) => {
      onClose();
-      navigate(`/${response.namespace}/${response.name}/installed/revision/1`);
+      await navigate(
+        `/${response.namespace}/${response.name}/installed/revision/1`
+      );
    },
    onError: (error) => {
      setInstallError(error?.message || "Failed to update");
--- a/frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx
+++ b/frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";

 interface InstallUpgradeProps {
  isUpgrade: boolean;
--- a/frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx
+++ b/frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx
@@ -1,7 +1,9 @@
-import { FC, useMemo, useState } from "react";
-import Select, { components, GroupBase, SingleValueProps } from "react-select";
+import type { FC } from "react";
+import { useMemo, useState } from "react";
+import type { GroupBase, SingleValueProps } from "react-select";
+import Select, { components } from "react-select";
 import { BsCheck2 } from "react-icons/bs";
-import { NonEmptyArray } from "../../../data/types";
+import type { NonEmptyArray } from "../../../data/types";

 interface Version {
  repository: string;
--- a/frontend/src/components/modal/Modal.stories.tsx
+++ b/frontend/src/components/modal/Modal.stories.tsx
@@ -1,6 +1,7 @@
 import { action } from "storybook/actions";
-import { StoryObj, StoryFn, Meta } from "@storybook/react-vite";
-import Modal, { ModalAction, ModalButtonStyle } from "./Modal";
+import type { StoryObj, StoryFn, Meta } from "@storybook/react-vite";
+import type { ModalAction } from "./Modal";
+import Modal, { ModalButtonStyle } from "./Modal";

 const meta = {
  /* 👇 The title prop is optional.
--- a/frontend/src/components/modal/Modal.tsx
+++ b/frontend/src/components/modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import Spinner from "../Spinner";

--- a/frontend/src/components/repository/ChartViewer.stories.tsx
+++ b/frontend/src/components/repository/ChartViewer.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import ChartViewer from "./ChartViewer";

 //👇 This default export determines where your story goes in the story list
--- a/frontend/src/components/repository/ChartViewer.tsx
+++ b/frontend/src/components/repository/ChartViewer.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Chart } from "../../data/types";
+import type { Chart } from "../../data/types";
 import { InstallRepoChartModal } from "../modal/InstallChartModal/InstallRepoChartModal";

 type ChartViewerProps = {
--- a/frontend/src/components/repository/RepositoriesList.stories.tsx
+++ b/frontend/src/components/repository/RepositoriesList.stories.tsx
@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react-vite";
+import type { StoryFn, Meta } from "@storybook/react-vite";
 import RepositoriesList from "./RepositoriesList";

 const meta = {
--- a/frontend/src/components/repository/RepositoriesList.tsx
+++ b/frontend/src/components/repository/RepositoriesList.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import AddRepositoryModal from "../modal/AddRepositoryModal";
-import { Repository } from "../../data/types";
+import type { Repository } from "../../data/types";
 import useCustomSearchParams from "../../hooks/useCustomSearchParams";

 type RepositoriesListProps = {
--- a/frontend/src/components/repository/RepositoryViewer.stories.tsx
+++ b/frontend/src/components/repository/RepositoryViewer.stories.tsx
@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react-vite";
+import type { StoryFn, Meta } from "@storybook/react-vite";
 import RepositoryViewer from "./RepositoryViewer";

 const meta = {
--- a/frontend/src/components/repository/RepositoryViewer.tsx
+++ b/frontend/src/components/repository/RepositoryViewer.tsx
@@ -1,5 +1,5 @@
 import { BsTrash3, BsArrowRepeat } from "react-icons/bs";
-import { Chart, Repository } from "../../data/types";
+import type { Chart, Repository } from "../../data/types";
 import ChartViewer from "./ChartViewer";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import apiService from "../../API/apiService";
@@ -52,9 +52,9 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
            method: "DELETE",
          }
        );
-        navigate("/repository", { replace: true });
+        await navigate("/repository", { replace: true });
        setSelectedRepo("");
-        queryClient.invalidateQueries({
+        await queryClient.invalidateQueries({
          queryKey: ["helm", "repositories"],
        });
      } catch (error) {
@@ -104,7 +104,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
            </button>
            <button
              onClick={() => {
-                removeRepository();
+                void removeRepository();
              }}
            >
              <span className="flex h-8 items-center gap-2 rounded-sm border border-gray-300 bg-white px-5 py-1 text-sm font-semibold">
--- a/frontend/src/components/revision/RevisionDetails.tsx
+++ b/frontend/src/components/revision/RevisionDetails.tsx
@@ -9,7 +9,7 @@ import {
  BsArrowUp,
  BsCheckCircle,
 } from "react-icons/bs";
-import { Release, ReleaseRevision } from "../../data/types";
+import type { ReleaseRevision } from "../../data/types";
 import StatusLabel, { DeploymentStatus } from "../common/StatusLabel";
 import { useNavigate, useParams, useSearchParams } from "react-router";
 import {
@@ -39,7 +39,7 @@ type RevisionTagProps = {
 };

 type RevisionDetailsProps = {
-  release: Release;
+  release: ReleaseRevision;
  installedRevision: ReleaseRevision;
  isLatest: boolean;
  latestRevision: number;
@@ -105,7 +105,7 @@ export default function RevisionDetails({
      setShowTestResults(false);
      setShowErrorModal({
        title: "Failed to run tests for chart " + chart,
-        msg: (error as Error).message,
+        msg: error.message,
      });
      console.error("Failed to execute test for chart", error);
    },
@@ -135,7 +135,7 @@ export default function RevisionDetails({
  };

  const displayTestResults = () => {
-    if (!testResults || (testResults as []).length === 0) {
+    if (!testResults || !testResults.length) {
      return (
        <div>
          Tests executed successfully
@@ -147,7 +147,7 @@ export default function RevisionDetails({
    } else {
      return (
        <div>
-          {(testResults as string).split("\n").map((line, index) => (
+          {testResults.split("\n").map((line, index) => (
            <div key={index} className="mb-2">
              {line}
              <br />
@@ -160,6 +160,13 @@ export default function RevisionDetails({

  const Header = () => {
    const navigate = useNavigate();
+
+    const addRepo = async () => {
+      await navigate(
+        `/repository?add_repo=true&repo_url=${latestVerData?.[0]?.urls[0]}&repo_name=${latestVerData?.[0]?.repository}`
+      );
+    };
+
    return (
      <header className="flex flex-wrap justify-between">
        <h1 className="float-left mb-1 font-roboto-slab text-3xl font-semibold">
@@ -206,9 +213,7 @@ export default function RevisionDetails({
            {latestVerData?.[0]?.isSuggestedRepo ? (
              <span
                onClick={() => {
-                  navigate(
-                    `/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
-                  );
+                  void addRepo();
                }}
                className="cursor-pointer text-sm text-blue-600 underline"
              >
@@ -216,7 +221,7 @@ export default function RevisionDetails({
              </span>
            ) : (
              <span
-                onClick={() => refetchLatestVersion()}
+                onClick={() => void refetchLatestVersion()}
                className="cursor-pointer text-xs underline"
              >
                Check for new version
@@ -317,7 +322,7 @@ const Rollback = ({
  release,
  installedRevision,
 }: {
-  release: Release;
+  release: ReleaseRevision;
  installedRevision: ReleaseRevision;
 }) => {
  const { chart, namespace, revision } = useParams();
@@ -328,8 +333,8 @@ const Rollback = ({

  const { mutate: rollbackRelease, isPending: isRollingBackRelease } =
    useRollbackRelease({
-      onSuccess: () => {
-        navigate(
+      onSuccess: async () => {
+        await navigate(
          `/${namespace}/${chart}/installed/revision/${revisionInt + 1}`
        );
        window.location.reload();
--- a/frontend/src/components/revision/RevisionDiff.tsx
+++ b/frontend/src/components/revision/RevisionDiff.tsx
@@ -1,4 +1,5 @@
-import { ChangeEvent, useMemo, useState, useRef, useEffect } from "react";
+import type { ChangeEvent } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
 import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui-slim.js";
 import { useGetReleaseInfoByType } from "../../API/releases";
 import { useParams } from "react-router";
--- a/frontend/src/components/revision/RevisionResource.tsx
+++ b/frontend/src/components/revision/RevisionResource.tsx
@@ -3,11 +3,8 @@ import { useParams } from "react-router";
 import hljs from "highlight.js";
 import { RiExternalLinkLine } from "react-icons/ri";

-import {
-  StructuredResources,
-  useGetResourceDescription,
-  useGetResources,
-} from "../../API/releases";
+import type { StructuredResources } from "../../API/releases";
+import { useGetResourceDescription, useGetResources } from "../../API/releases";
 import closeIcon from "../../assets/close.png";

 import Drawer from "react-modern-drawer";
@@ -25,7 +22,6 @@ interface Props {
 export default function RevisionResource({ isLatest }: Props) {
  const { namespace = "", chart = "" } = useParams();
  const { data: resources, isLoading } = useGetResources(namespace, chart);
-  const interestingResources = ["STATEFULSET", "DEAMONSET", "DEPLOYMENT"];

  return (
    <table
@@ -46,23 +42,15 @@ export default function RevisionResource({ isLatest }: Props) {
      ) : (
        <tbody className="mt-4 h-8 w-full rounded-sm bg-white">
          {resources?.length ? (
-            resources
-              .sort(function (a, b) {
-                return (
-                  interestingResources.indexOf(a.kind.toUpperCase()) -
-                  interestingResources.indexOf(b.kind.toUpperCase())
-                );
-              })
-              .reverse()
-              .map((resource: StructuredResources) => (
-                <ResourceRow
-                  key={
-                    resource.apiVersion + resource.kind + resource.metadata.name
-                  }
-                  resource={resource}
-                  isLatest={isLatest}
-                />
-              ))
+            resources?.map((resource: StructuredResources) => (
+              <ResourceRow
+                key={
+                  resource.apiVersion + resource.kind + resource.metadata.name
+                }
+                resource={resource}
+                isLatest={isLatest}
+              />
+            ))
          ) : (
            <tr>
              <div className="display-none no-charts mt-3 rounded-sm bg-white p-4 text-sm shadow-sm">
--- a/frontend/src/components/revision/RevisionsList.tsx
+++ b/frontend/src/components/revision/RevisionsList.tsx
@@ -2,7 +2,7 @@ import { BsArrowDownRight, BsArrowUpRight } from "react-icons/bs";
 import { useParams } from "react-router";
 import { compare } from "compare-versions";

-import { ReleaseRevision } from "../../data/types";
+import type { ReleaseRevision } from "../../data/types";
 import { getAge } from "../../timeUtils";
 import StatusLabel from "../common/StatusLabel";
 import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
@@ -20,8 +20,8 @@ export default function RevisionsList({
  const navigate = useNavigateWithSearchParams();
  const { namespace, chart } = useParams();

-  const changeRelease = (newRevision: number) => {
-    navigate(`/${namespace}/${chart}/installed/revision/${newRevision}`);
+  const changeRelease = async (newRevision: number) => {
+    await navigate(`/${namespace}/${chart}/installed/revision/${newRevision}`);
  };

  return (
@@ -38,7 +38,7 @@ export default function RevisionsList({
            title={
              isRollback ? `Rollback to ${Number(release.revision) - 1}` : ""
            }
-            onClick={() => changeRelease(release.revision)}
+            onClick={() => void changeRelease(release.revision)}
            key={release.revision}
            className={`mx-5 flex cursor-pointer flex-col gap-4 rounded-md border border-gray-200 p-2 ${
              release.revision === selectedRevision
--- a/frontend/src/context/AppContext.tsx
+++ b/frontend/src/context/AppContext.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { createContext, useState, useContext } from "react";

 export interface AppContextData {
@@ -17,11 +18,7 @@ export const useAppContext = (): AppContextData => {
  return context;
 };

-export const AppContextProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+export const AppContextProvider = ({ children }: { children: ReactNode }) => {
  const [selectedRepo, setSelectedRepo] = useState("");
  const [clusterMode, setClusterMode] = useState(false);

--- a/frontend/src/data/types.ts
+++ b/frontend/src/data/types.ts
@@ -1,3 +1,5 @@
+import type { DeploymentStatus } from "../components/common/StatusLabel";
+
 export type Chart = {
  id: string;
  name: string;
@@ -35,7 +37,7 @@ export type Release = {
  namespace: string;
  revision: number;
  updated: string;
-  status: string;
+  status: DeploymentStatus;
  chart: string;
  chart_name: string;
  chart_ver: string;
@@ -79,7 +81,7 @@ export type Repository = {
 export type ReleaseRevision = {
  revision: number;
  updated: string;
-  status: string;
+  status: DeploymentStatus;
  chart: string;
  app_version: string;
  description: string;
--- a/frontend/src/hooks/useNavigateWithSearchParams.ts
+++ b/frontend/src/hooks/useNavigateWithSearchParams.ts
@@ -12,19 +12,14 @@ const useNavigateWithSearchParams = () => {
  const { context } = useParams();

  const { search } = useLocation();
-  const navigateWithSearchParams = (
-    url: string,
-    ...restArgs: NavigateOptions[]
-  ) => {
+  return async (url: string, ...restArgs: NavigateOptions[]) => {
    let prefixedUrl = url;

    if (!clusterMode) {
      prefixedUrl = `/${encodeURIComponent(context ?? "")}${url}`;
    }
-    navigate(`${prefixedUrl}${search}`, ...restArgs);
+    await navigate(`${prefixedUrl}${search}`, ...restArgs);
  };
-
-  return navigateWithSearchParams;
 };

 export default useNavigateWithSearchParams;
--- a/frontend/src/layout/Header.tsx
+++ b/frontend/src/layout/Header.tsx
@@ -46,6 +46,10 @@ export default function Header() {
    }
  };

+  const handleResetCache = () => {
+    void resetCache();
+  };
+
  const openAPI = () => {
    window.open("/#/docs", "_blank");
  };
@@ -72,7 +76,7 @@ export default function Header() {
          <ul className="flex w-full items-center md:mt-0 md:flex-row md:justify-between md:border-0 md:text-sm md:font-normal">
            <li>
              <LinkWithSearchParams
-                to={"/installed"}
+                to={"installed"}
                exclude={["tab"]}
                className={getBtnStyle("installed")}
              >
@@ -81,7 +85,7 @@ export default function Header() {
            </li>
            <li>
              <LinkWithSearchParams
-                to={"/repository"}
+                to={"repository"}
                exclude={["tab"]}
                end={false}
                className={getBtnStyle("repository")}
@@ -103,7 +107,7 @@ export default function Header() {
                    id: "4",
                    text: "Reset Cache",
                    icon: <BsArrowRepeat />,
-                    onClick: resetCache,
+                    onClick: handleResetCache,
                  },
                  {
                    id: "5",
--- a/frontend/src/layout/Sidebar.tsx
+++ b/frontend/src/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import "../App.css";
-import { JSX } from "react";
+import type { JSX } from "react";

 function Sidebar(): JSX.Element {
  return (
--- a/frontend/src/pages/Installed.tsx
+++ b/frontend/src/pages/Installed.tsx
@@ -7,7 +7,7 @@ import Spinner from "../components/Spinner";
 import useAlertError from "../hooks/useAlertError";
 import { useParams, useNavigate } from "react-router";
 import useCustomSearchParams from "../hooks/useCustomSearchParams";
-import { Release } from "../data/types";
+import type { Release } from "../data/types";

 function Installed() {
  const { searchParamsObject } = useCustomSearchParams();
@@ -19,12 +19,16 @@ function Installed() {
  );
  const navigate = useNavigate();

-  const handleClusterChange = (clusterName: string) => {
-    navigate({
+  const clusterChange = async (clusterName: string) => {
+    await navigate({
      pathname: `/${encodeURIComponent(clusterName)}/installed`,
    });
  };

+  const handleClusterChange = (clusterName: string) => {
+    void clusterChange(clusterName);
+  };
+
  const [filterKey, setFilterKey] = useState<string>("");
  const alertError = useAlertError();
  const { data, isLoading, isRefetching, isError, error } =
--- a/frontend/src/pages/Repository.tsx
+++ b/frontend/src/pages/Repository.tsx
@@ -1,10 +1,10 @@
-import { useMemo, useEffect, useEffectEvent } from "react";
+import { useMemo, useEffect, useEffectEvent, useCallback } from "react";

 import RepositoriesList from "../components/repository/RepositoriesList";
 import RepositoryViewer from "../components/repository/RepositoryViewer";
-import { Repository } from "../data/types";
+import type { Repository } from "../data/types";
 import { useGetRepositories } from "../API/repositories";
-import { useParams } from "react-router";
+import { type NavigateOptions, useParams } from "react-router";
 import { useAppContext } from "../context/AppContext";
 import useNavigateWithSearchParams from "../hooks/useNavigateWithSearchParams";

@@ -13,8 +13,15 @@ function RepositoryPage() {
  const navigate = useNavigateWithSearchParams();
  const { setSelectedRepo, selectedRepo } = useAppContext();

+  const navigateTo = useCallback(
+    async (url: string, ...restArgs: NavigateOptions[]) => {
+      await navigate(url, ...restArgs);
+    },
+    [navigate]
+  );
+
  const handleRepositoryChanged = (selectedRepository: Repository) => {
-    navigate(`/repository/${selectedRepository.name}`, {
+    void navigateTo(`/repository/${selectedRepository.name}`, {
      replace: true,
    });
  };
@@ -27,22 +34,17 @@ function RepositoryPage() {

  useEffect(() => {
    if (selectedRepo && !repoFromParams) {
-      navigate(`/repository/${selectedRepo}`, {
+      void navigateTo(`/repository/${selectedRepo}`, {
        replace: true,
      });
    }
-  }, [selectedRepo, repoFromParams, context, navigate]);
+  }, [selectedRepo, repoFromParams, context, navigateTo]);

  const { data: repositories = [], isSuccess } = useGetRepositories();

  const onSuccess = useEffectEvent(() => {
-    // TODO should we passe sorted to RepositoriesList as in ClustersList?
-    const sortedData = [...repositories]?.sort((a, b) =>
-      a.name.localeCompare(b.name)
-    );
-
-    if (sortedData && sortedData.length > 0 && !repoFromParams) {
-      handleRepositoryChanged(sortedData[0]);
+    if (repositories && repositories.length && !repoFromParams) {
+      handleRepositoryChanged(repositories[0]);
    }
  });

--- a/frontend/src/pages/Revision.tsx
+++ b/frontend/src/pages/Revision.tsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { useParams } from "react-router";
 import RevisionDetails from "../components/revision/RevisionDetails";
 import RevisionsList from "../components/revision/RevisionsList";
-import { Release, ReleaseRevision } from "../data/types";
+import type { ReleaseRevision } from "../data/types";
 import { useQuery } from "@tanstack/react-query";
 import apiService from "../API/apiService";
 import Spinner from "../components/Spinner";
@@ -19,6 +19,7 @@ function Revision() {
    {
      queryKey: ["releasesHistory", restParams],
      queryFn: apiService.getReleasesHistory,
+      select: (data) => data?.sort(descendingSort),
    }
  );

@@ -30,11 +31,6 @@ function Revision() {
    [releaseRevisions]
  );

-  const sortedReleases = useMemo(
-    () => releaseRevisions?.sort(descendingSort),
-    [releaseRevisions]
-  );
-
  const selectedRelease = useMemo(() => {
    if (selectedRevision && releaseRevisions) {
      return releaseRevisions.find(
@@ -54,7 +50,7 @@ function Revision() {
          <RevisionSidebarSkeleton />
        ) : (
          <RevisionsList
-            releaseRevisions={sortedReleases}
+            releaseRevisions={releaseRevisions}
            selectedRevision={selectedRevision}
          />
        )}
@@ -67,7 +63,7 @@ function Revision() {
          </div>
        ) : selectedRelease ? (
          <RevisionDetails
-            release={selectedRelease as Release} // TODO fix it
+            release={selectedRelease} // TODO fix it
            installedRevision={releaseRevisions?.[0]}
            isLatest={selectedRelease.revision === latestRevision}
            latestRevision={latestRevision}
@@ -79,16 +75,12 @@ function Revision() {
 }

 const RevisionSidebarSkeleton = () => {
-  return (
-    <>
-      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-    </>
-  );
+  return Array.from({ length: 6 }).map((_, i) => (
+    <div
+      key={i}
+      className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2"
+    />
+  ));
 };

 export default Revision;
--- a/frontend/src/timeUtils.ts
+++ b/frontend/src/timeUtils.ts
@@ -1,5 +1,6 @@
-import { DateTime, DateTimeMaybeValid, type DurationLikeObject } from "luxon";
-import { ReleaseRevision } from "./data/types";
+import type { DateTimeMaybeValid } from "luxon";
+import { DateTime, type DurationLikeObject } from "luxon";
+import type { ReleaseRevision } from "./data/types";

 export function getAge(obj1: ReleaseRevision, obj2?: ReleaseRevision) {
  const date = DateTime.fromISO(obj1.updated);
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,5 +1,5 @@
-import { Diff2HtmlUIConfig } from "diff2html/lib/ui/js/diff2html-ui-base";
-import { NonEmptyArray } from "./data/types";
+import type { Diff2HtmlUIConfig } from "diff2html/lib/ui/js/diff2html-ui-base";
+import type { NonEmptyArray } from "./data/types";

 export const isNewerVersion = (oldVer: string, newVer: string) => {
  if (oldVer && oldVer[0] === "v") {
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -3,7 +3,9 @@
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "strict": true
  },
  "include": ["vite.config.ts"]
 }
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -477,10 +477,10 @@
  dependencies:
    "@types/json-schema" "^7.0.15"

-"@eslint/eslintrc@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz"
-  integrity sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==
+"@eslint/eslintrc@^3.3.1", "@eslint/eslintrc@^3.3.3":
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz"
+  integrity sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==
  dependencies:
    ajv "^6.12.4"
    debug "^4.3.2"
@@ -488,11 +488,11 @@
    globals "^14.0.0"
    ignore "^5.2.0"
    import-fresh "^3.2.1"
-    js-yaml "^4.1.0"
+    js-yaml "^4.1.1"
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

-"@eslint/js@9.39.1":
+"@eslint/js@^9.39.1", "@eslint/js@9.39.1":
  version "9.39.1"
  resolved "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz"
  integrity sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==
@@ -3333,6 +3333,13 @@ eslint-plugin-storybook@^10.0.8:
  dependencies:
    "@typescript-eslint/utils" "^8.8.1"

+eslint-plugin-tsc@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-tsc/-/eslint-plugin-tsc-2.0.0.tgz"
+  integrity sha512-we7n063HSoWDpXjuqgplrYxfWnlVgq7GXteEjxtc/Ve6C0BjGQyoNGjApSVspyru1cckAM9ASwPnSU8Y0OTwTA==
+  dependencies:
+    typescript-service "^2.0.3"
+
 eslint-scope@^5.1.1:
  version "5.1.1"
  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
@@ -4454,7 +4461,7 @@ js-file-download@^0.4.12:
  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==

-js-yaml@^4.1.0, js-yaml@=4.1.1:
+js-yaml@^4.1.0, js-yaml@^4.1.1, js-yaml@=4.1.1:
  version "4.1.1"
  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz"
  integrity sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==
@@ -6454,6 +6461,11 @@ tslib@^1.8.1:
  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

+tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
  version "2.5.0"
  resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz"
@@ -6547,6 +6559,13 @@ types-ramda@^0.30.1:
  dependencies:
    ts-toolbelt "^9.6.0"

+typescript-service@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/typescript-service/-/typescript-service-2.0.3.tgz"
+  integrity sha512-FzRlqRp965UBzGvGwc6rbeko84jLILZrHf++I4cN8usZUB7F8Lh8/WDiCOUvy2l5os+jBWEz4fbYkkj1DhYJcw==
+  dependencies:
+    tslib "^1.9.3"
+
 typescript@^5.9.3:
  version "5.9.3"
  resolved "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz"