Bump a lot of packages (#625)

* Bump react, luxon, swagger, uuid

* Improved imports

* Fixed vulnerabilities

* Bump highlight.js and added eslint-plugin-react-hooks with fixes

* Bump compare-versions, html-react-parser, react-intersection-observer, react-modern-drawer

* Bump @tanstack/react-query, react-select

* Added tsc:check script

frontend/src/components/common/DropDown.tsx

@@ -29,6 +29,15 @@ function DropDown({ items }: DropDownProps) {
 
   const modalRef = useRef<HTMLDivElement>(null);
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      setPopupState((prev) => ({
+        ...prev,
+        isOpen: false,
+      }));
+    }
+  };
+
   useEffect(() => {
     if (popupState.isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
@@ -41,15 +50,6 @@ function DropDown({ items }: DropDownProps) {
     };
   }, [popupState.isOpen]);
 
-  const handleClickOutside = (event: MouseEvent) => {
-    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-      setPopupState((prev) => ({
-        ...prev,
-        isOpen: false,
-      }));
-    }
-  };
-
   return (
     <>
       <div className="relative flex flex-col items-center">

frontend/src/components/common/Page/Page.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { VFC, useState } from "react";
 
 import { Header } from "../Header/Header";
 import "./page.css";
@@ -7,8 +7,8 @@ type User = {
   name: string;
 };
 
-export const Page: React.VFC = () => {
-  const [user, setUser] = React.useState<User>();
+export const Page: VFC = () => {
+  const [user, setUser] = useState<User>();
 
   return (
     <article>

frontend/src/components/modal/AddRepositoryModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Modal from "./Modal";
 import Spinner from "../Spinner";
 import useAlertError from "../../hooks/useAlertError";
@@ -21,20 +21,21 @@ type AddRepositoryModalProps = {
 };
 
 function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
-  const [formData, setFormData] = useState<FormKeys>({} as FormKeys);
+  const {
+    searchParamsObject: { repo_url, repo_name },
+  } = useCustomSearchParams();
+  const [formData, setFormData] = useState<FormKeys>({
+    name: repo_name ?? "",
+    url: repo_url ?? "",
+    username: "",
+    password: "",
+  });
   const [isLoading, setIsLoading] = useState(false);
   const alertError = useAlertError();
-  const { searchParamsObject } = useCustomSearchParams();
-  const { repo_url, repo_name } = searchParamsObject;
   const { setSelectedRepo } = useAppContext();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
-  useEffect(() => {
-    if (!repo_url || !repo_name) return;
-    setFormData({ ...formData, name: repo_name, url: repo_url });
-  }, [repo_url, repo_name, formData]);
-
   const addRepository = () => {
     const body = new FormData();
     body.append("name", formData.name ?? "");

frontend/src/components/modal/Modal.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode } from "react";
-import ReactDom from "react-dom";
+import { createPortal } from "react-dom";
 import Spinner from "../Spinner";
 
 export enum ModalButtonStyle {
@@ -75,7 +75,7 @@ const Modal = ({
     else return title;
   };
 
-  return ReactDom.createPortal(
+  return createPortal(
     <>
       {isOpen && (
         <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity ">

frontend/src/components/revision/RevisionDetails.tsx

@@ -380,7 +380,7 @@ const Rollback = ({
             id: "1",
             callback: () => {
               rollbackRelease({
-                ns: namespace as string,
+                ns: namespace,
                 name: String(chart),
                 revision: release.revision,
               });

frontend/src/components/revision/RevisionDiff.tsx

@@ -108,7 +108,7 @@ function RevisionDiff({
       !isLoading
     ) {
       const diff2htmlUi = new Diff2HtmlUI(
-        diffElement!.current!,
+        diffElement.current,
         data,
         diffConfiguration
       );

frontend/src/components/revision/RevisionResource.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import hljs from "highlight.js";
 import { RiExternalLinkLine } from "react-icons/ri";
@@ -162,14 +162,11 @@ const DescribeResource = ({
     namespace,
     chart
   );
-  const [yamlFormattedData, setYamlFormattedData] = useState("");
 
-  useEffect(() => {
-    if (data) {
-      const val = hljs.highlight(data, { language: "yaml" }).value;
-      setYamlFormattedData(val);
-    }
-  }, [data]);
+  const yamlFormattedData = useMemo(
+    () => hljs.highlight(data ?? "", { language: "yaml" })?.value,
+    [data]
+  );
 
   const badgeType = getBadgeType(status);
   return (