mirror/helm-dashboard
1
0
Fork 0
mirror of https://github.com/komodorio/helm-dashboard.git synced 2026-03-26 06:18:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bump a lot of packages (#625)

Browse Source 
* 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
This commit is contained in:
yuri-sakharov
2025-11-26 18:44:59 +02:00
committed by GitHub
parent e50ae801a7
commit f01c19f330
15 changed files with 904 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/common/DropDown.tsx
View File

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

6
frontend/src/components/common/Page/Page.tsx
View File

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

19
frontend/src/components/modal/AddRepositoryModal.tsx
View File

@@ -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 ?? "");

4
frontend/src/components/modal/Modal.tsx
View File

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

2
frontend/src/components/revision/RevisionDetails.tsx
View File

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

2
frontend/src/components/revision/RevisionDiff.tsx
View File

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

13
frontend/src/components/revision/RevisionResource.tsx
View File

@@ -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 (

1
frontend/src/context/ErrorModalContext.tsx
View File

@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { createContext } from "react";
export interface ErrorAlert {

9
frontend/src/hooks/useCustomSearchParams.ts
View File

@@ -1,10 +1,11 @@
import { useCallback } from "react";
import { useCallback, useMemo } from "react";
import { useSearchParams } from "react-router-dom";
const useCustomSearchParams = () => {
const [search, setSearch] = useSearchParams();
const searchAsObject: { [key: string]: string } = Object.fromEntries(
new URLSearchParams(search)
const searchParamsObject: { [key: string]: string } = useMemo(
() => Object.fromEntries(new URLSearchParams(search)),
[search]
);
const upsertSearchParams = useCallback(
@@ -24,7 +25,7 @@ const useCustomSearchParams = () => {
};
return {
searchParamsObject: searchAsObject,
searchParamsObject,
setSearchParams: setSearch,
upsertSearchParams,
removeSearchParam,

217
frontend/src/index.css
View File

@@ -8,145 +8,146 @@
/* 3. Theme variables (CSS-first approach) */
:root {
/* Fonts */
--font-roboto: "Roboto", serif;
--font-roboto-slab: "Roboto Slab", serif;
--font-inter: "Inter", serif;
--font-poppins: "Poppins", sans-serif;
--font-sf-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* Fonts */
--font-roboto: "Roboto", serif;
--font-roboto-slab: "Roboto Slab", serif;
--font-inter: "Inter", serif;
--font-poppins: "Poppins", sans-serif;
--font-sf-mono:
SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
/* Font weights */
--font-weight-thin: 100;
--font-weight-hairline: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-extrabold: 600;
--font-weight-bold: 700;
/* Colors */
--color-body: #3d4048;
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-cluster-list: #3d4048;
--color-dark: #3d4048;
--color-tab-color: #3B3D45;
--color-primary: #1347FF;
--color-secondary: #ECEFF2;
--color-muted: #707583;
--color-error-border: #DC3545;
--color-error-background: #F9D7DA;
--color-error-color: #842029;
--color-failed: #FC1683;
--color-deployed: #1FA470;
--color-superseded: #9195A1;
--color-pending: #5AB0FF;
--color-danger: #ff0072;
--color-text-danger: #FC1683;
--color-text-warning: #ffc107;
--color-text-success: #A4F8D7;
--color-upgradable: #0d6efd;
--color-warning: #ffa800;
--color-success: #00c2ab;
--color-border-deployed: #1BE99A;
--color-revision-light: #DCDDDF;
--color-revision-dark: #007bff;
--color-installed-charts-filter: #dad8ce;
--color-dropdown: #E9ECEF;
--color-chart-values: #ECEFF2;
--color-add-repo: #0b5ed7;
--color-link-color: #0D6EFD;
--color-body-background: #F4F7FA;
--color-repository: #D6EFFE;
--color-revision: #D6EFFE;
--color-header-install: #EBEFFF;
--color-upgrade-color: #FC1683;
/* Font weights */
--font-weight-thin: 100;
--font-weight-hairline: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-extrabold: 600;
--font-weight-bold: 700;
/* Colors */
--color-body: #3d4048;
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-cluster-list: #3d4048;
--color-dark: #3d4048;
--color-tab-color: #3b3d45;
--color-primary: #1347ff;
--color-secondary: #eceff2;
--color-muted: #707583;
--color-error-border: #dc3545;
--color-error-background: #f9d7da;
--color-error-color: #842029;
--color-failed: #fc1683;
--color-deployed: #1fa470;
--color-superseded: #9195a1;
--color-pending: #5ab0ff;
--color-danger: #ff0072;
--color-text-danger: #fc1683;
--color-text-warning: #ffc107;
--color-text-success: #a4f8d7;
--color-upgradable: #0d6efd;
--color-warning: #ffa800;
--color-success: #00c2ab;
--color-border-deployed: #1be99a;
--color-revision-light: #dcdddf;
--color-revision-dark: #007bff;
--color-installed-charts-filter: #dad8ce;
--color-dropdown: #e9ecef;
--color-chart-values: #eceff2;
--color-add-repo: #0b5ed7;
--color-link-color: #0d6efd;
--color-body-background: #f4f7fa;
--color-repository: #d6effe;
--color-revision: #d6effe;
--color-header-install: #ebefff;
--color-upgrade-color: #fc1683;
}
/* 4. Base layer */
@layer base {
body {
color: var(--color-body);
font-family: var(--font-roboto);
}
body {
color: var(--color-body);
font-family: var(--font-roboto);
}
button,
input,
input::placeholder {
font-family: var(--font-roboto);
}
button,
input,
input::placeholder {
font-family: var(--font-roboto);
}
}
/* 5. Components layer */
@layer components {
.card {
background-color: var(--color-white);
border-radius: theme("borderRadius.lg");
border: 1px solid var(--color-gray-200);
box-shadow: theme("boxShadow.xl");
padding: theme("spacing.12") theme("spacing.6") theme("spacing.6");
}
.card {
background-color: var(--color-white);
border-radius: theme("borderRadius.lg");
border: 1px solid var(--color-gray-200);
box-shadow: theme("boxShadow.xl");
padding: theme("spacing.12") theme("spacing.6") theme("spacing.6");
}
.card-hover {
background-color: var(--color-gray-100);
border-radius: theme("borderRadius.lg");
padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl");
}
.card-hover {
background-color: var(--color-gray-100);
border-radius: theme("borderRadius.lg");
padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl");
}
.card-active {
background-color: var(--color-gray-200);
border-radius: theme("borderRadius.lg");
padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl");
}
.card-active {
background-color: var(--color-gray-200);
border-radius: theme("borderRadius.lg");
padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl");
}
.card-disabled {
background-color: var(--color-gray-300);
border-radius: theme("borderRadius.lg");
padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl");
}
.card-disabled {
background-color: var(--color-gray-300);
border-radius: theme("borderRadius.lg");
padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl");
}
.custom-shadow {
position: relative;
box-sizing: border-box;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.custom-shadow {
position: relative;
box-sizing: border-box;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.error-dialog {
border: var(--color-error-border);
background-color: var(--color-error-background);
color: var(--color-error-color);
}
.error-dialog {
border: var(--color-error-border);
background-color: var(--color-error-background);
color: var(--color-error-color);
}
}
/* 6. Code & pre fonts */
pre,
code {
font-family: var(--font-sf-mono);
font-size: 12.5px;
font-family: var(--font-sf-mono);
font-size: 12.5px;
}
/* 7. Portal positioning */
#portal {
top: 0;
width: 40%;
left: 30%;
position: absolute;
top: 0;
width: 40%;
left: 30%;
position: absolute;
}
/* 8. Required fields */
.require:after {
content: " *";
color: red;
content: " *";
color: red;
}
/* 9. Input focus shadow */
.input-box-shadow:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

10
frontend/src/main.tsx
View File

@@ -1,10 +1,10 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
createRoot(document.getElementById("root") as HTMLElement).render(
<StrictMode>
<App />
</React.StrictMode>
</StrictMode>
);