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

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();

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";

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">

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