mirror/helm-dashboard
1
0
Fork 0
mirror of https://github.com/komodorio/helm-dashboard.git synced 2026-09-01 00:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added prettier-plugin-tailwindcss and sorted the classes + some small fixes (#630)

Browse Source 
* Added prettier-plugin-tailwindcss and sorted the classes

* Added tsc into staged check + some type improvements
This commit is contained in:
yuri-sakharov
2025-11-30 22:11:52 +02:00
committed by GitHub
parent 73f74d77bb
commit f10cc6d8a5
43 changed files with 271 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/revision/RevisionDetails.tsx
+17 -17
View File
@@ -162,13 +162,13 @@ export default function RevisionDetails({
const navigate = useNavigate();
return (
<header className="flex flex-wrap justify-between">
<h1 className=" text-3xl font-semibold float-left mb-1 font-roboto-slab">
<h1 className="float-left mb-1 font-roboto-slab text-3xl font-semibold">
{chart}
</h1>
<div className="flex flex-row flex-wrap gap-3 float-right h-fit">
<div className="float-right flex h-fit flex-row flex-wrap gap-3">
<div className="flex flex-col">
<Button
className="flex justify-center items-center gap-2 min-w-[150px] text-sm font-semibold disabled:bg-gray-200"
className="flex min-w-[150px] items-center justify-center gap-2 text-sm font-semibold disabled:bg-gray-200"
onClick={() => setIsReconfigureModalOpen(true)}
disabled={isLoadingLatestVersion || isRefetchingLatestVersion}
>
@@ -210,14 +210,14 @@ export default function RevisionDetails({
`/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
);
}}
className="underline text-sm cursor-pointer text-blue-600"
className="cursor-pointer text-sm text-blue-600 underline"
>
Add repository for it: {latestVerData[0].repository}
</span>
) : (
<span
onClick={() => refetchLatestVersion()}
className="underline cursor-pointer text-xs"
className="cursor-pointer text-xs underline"
>
Check for new version
</span>
@@ -230,7 +230,7 @@ export default function RevisionDetails({
{" "}
<Button
onClick={handleRunTests}
className="flex items-center gap-2 h-1/2 text-sm font-semibold"
className="flex h-1/2 items-center gap-2 text-sm font-semibold"
>
<BsCheckCircle />
Run tests
@@ -242,7 +242,7 @@ export default function RevisionDetails({
onClose={() => setShowTestResults(false)}
>
{isRunningTests ? (
<div className="flex mr-2 items-center">
<div className="mr-2 flex items-center">
<Spinner /> Waiting for completion..
</div>
) : (
@@ -263,10 +263,10 @@ export default function RevisionDetails({
: isNewerVersion(installedRevision.chart_ver, latestVerData?.[0]?.version);
return (
<div className="flex flex-col px-16 pt-5 gap-3">
<div className="flex flex-col gap-3 px-16 pt-5">
<StatusLabel status={release.status} />
<Header />
<div className="flex flex-row gap-6 text-sm -mt-4">
<div className="-mt-4 flex flex-row gap-6 text-sm">
<span>
Revision <span className="font-semibold">#{release.revision}</span>
</span>
@@ -306,7 +306,7 @@ export default function RevisionDetails({
function RevisionTag({ caption, text }: RevisionTagProps) {
return (
<span className="bg-revision p-1 rounded-sm px-2 text-sm">
<span className="rounded-sm bg-revision p-1 px-2 text-sm">
<span>{caption}:</span>
<span className="font-bold"> {text}</span>
</span>
@@ -352,7 +352,7 @@ const Rollback = ({
: revisionInt;
const rollbackTitle = (
<div className="font-semibold text-lg">
<div className="text-lg font-semibold">
Rollback <span className="text-red-500">{chart}</span> from revision{" "}
{installedRevision.revision} to {rollbackRevision}
</div>
@@ -441,7 +441,7 @@ const Rollback = ({
<>
<Button
onClick={handleRollback}
className="flex items-center gap-2 h-1/2 text-sm font-semibold"
className="flex h-1/2 items-center gap-2 text-sm font-semibold"
>
<BsArrowRepeat />
Rollback to #{rollbackRevision}
@@ -470,7 +470,7 @@ const Uninstall = () => {
},
});
const uninstallTitle = (
<div className="font-semibold text-lg">
<div className="text-lg font-semibold">
Uninstall <span className="text-red-500">{chart}</span> from namespace{" "}
<span className="text-red-500">{namespace}</span>
</div>
@@ -480,7 +480,7 @@ const Uninstall = () => {
<>
<Button
onClick={() => setIsOpen(true)}
className="flex items-center gap-2 hover:bg-red-200 h-1/2 text-sm font-semibold"
className="flex h-1/2 items-center gap-2 text-sm font-semibold hover:bg-red-200"
>
<BsTrash3 />
Uninstall
@@ -507,18 +507,18 @@ const Uninstall = () => {
key={
resource.apiVersion + resource.kind + resource.metadata.name
}
className="flex justify-start gap-1 w-full mb-3"
className="mb-3 flex w-full justify-start gap-1"
>
<span
style={{
textAlign: "end",
paddingRight: "30px",
}}
className=" w-3/5 italic"
className="w-3/5 italic"
>
{resource.kind}
</span>
<span className=" w-4/5 font-semibold">
<span className="w-4/5 font-semibold">
{resource.metadata.name}
</span>
</div>
frontend/src/components/revision/RevisionDiff.tsx
+9 -9
View File
@@ -134,7 +134,7 @@ function RevisionDiff({
return (
<div>
<div className="flex mb-3 p-2 border border-gray-200 border-revision flex-row items-center justify-between w-full bg-white rounded-sm">
<div className="mb-3 flex w-full flex-row items-center justify-between rounded-sm border border-gray-200 border-revision bg-white p-2">
<div className="flex items-center">
<input
checked={viewMode === "view"}
@@ -143,7 +143,7 @@ function RevisionDiff({
type="radio"
value="view"
name="notes-view"
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300"
className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600"
/>
<label
htmlFor="view"
@@ -160,7 +160,7 @@ function RevisionDiff({
type="radio"
value="diff-with-previous"
name="notes-view"
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300"
className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600"
/>
<label
htmlFor="diff-with-previous"
@@ -177,7 +177,7 @@ function RevisionDiff({
type="radio"
value="diff-with-specific-revision"
name="notes-view"
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300"
className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600"
/>
<label
htmlFor="diff-with-specific-revision"
@@ -186,7 +186,7 @@ function RevisionDiff({
<div>
Diff with specific revision:
<input
className="border ml-2 border-gray-500 w-10 p-1 rounded-xs"
className="ml-2 w-10 rounded-xs border border-gray-500 p-1"
type="text"
value={specificVersion}
onChange={(e) => setSpecificVersion(Number(e.target.value))}
@@ -201,7 +201,7 @@ function RevisionDiff({
type="checkbox"
onChange={handleUserDefinedCheckbox}
checked={!!userDefinedValue}
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
className="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
/>
<label
htmlFor="user-define-only-checkbox"
@@ -214,8 +214,8 @@ function RevisionDiff({
</div>
{isLoading ? <Spinner /> : ""}
{viewMode === VIEW_MODE_VIEW_ONLY && content ? (
<div className="bg-white overflow-x-auto w-full p-3 relative">
<pre className="bg-white rounded-sm font-sf-mono">
<div className="relative w-full overflow-x-auto bg-white p-3">
<pre className="rounded-sm bg-white font-sf-mono">
{parse(content)}
</pre>
</div>
@@ -223,7 +223,7 @@ function RevisionDiff({
""
)}
<div
className="bg-white w-full relative leading-5 font-sf-mono"
className="relative w-full bg-white font-sf-mono leading-5"
//@ts-ignore
ref={diffElement}
></div>
frontend/src/components/revision/RevisionResource.tsx
+19 -19
View File
@@ -30,11 +30,11 @@ export default function RevisionResource({ isLatest }: Props) {
return (
<table
cellPadding={6}
className="border-spacing-y-2 font-semibold border-separate w-full text-xs "
className="w-full border-separate border-spacing-y-2 text-xs font-semibold"
>
<thead className="bg-zinc-200 font-bold h-8 rounded-sm">
<thead className="h-8 rounded-sm bg-zinc-200 font-bold">
<tr>
<td className="pl-6 rounded-sm">RESOURCE TYPE</td>
<td className="rounded-sm pl-6">RESOURCE TYPE</td>
<td>NAME</td>
<td>STATUS</td>
<td>STATUS MESSAGE</td>
@@ -44,7 +44,7 @@ export default function RevisionResource({ isLatest }: Props) {
{isLoading ? (
<Spinner />
) : (
<tbody className="bg-white mt-4 h-8 rounded-sm w-full">
<tbody className="mt-4 h-8 w-full rounded-sm bg-white">
{resources?.length ? (
resources
.sort(function (a, b) {
@@ -65,7 +65,7 @@ export default function RevisionResource({ isLatest }: Props) {
))
) : (
<tr>
<div className="bg-white rounded-sm shadow-sm display-none no-charts mt-3 text-sm p-4">
<div className="display-none no-charts mt-3 rounded-sm bg-white p-4 text-sm shadow-sm">
Looks like you don&apos;t have any resources.{" "}
<RiExternalLinkLine className="ml-2 text-lg" />
</div>
@@ -99,14 +99,14 @@ const ResourceRow = ({
return (
<>
<tr className="min-w-[100%] min-h[70px] text-sm py-2">
<td className="pl-6 rounded-sm text-sm font-normal w-48">{kind}</td>
<td className="font-bold text-sm w-56">{name}</td>
<tr className="min-h[70px] min-w-[100%] py-2 text-sm">
<td className="w-48 rounded-sm pl-6 text-sm font-normal">{kind}</td>
<td className="w-56 text-sm font-bold">{name}</td>
<td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td>
<td className="rounded-sm text-gray-100">
<div className="flex flex-col gap-1 flex-start">
<div className="flex-start flex flex-col gap-1">
{message && (
<div className="text-gray-500 font-thin">{message}</div>
<div className="font-thin text-gray-500">{message}</div>
)}
{(badgeType === "error" || badgeType === "warning") && (
<Troubleshoot />
@@ -115,7 +115,7 @@ const ResourceRow = ({
</td>
<td className="rounded-sm">
{isLatest && reason !== "NotFound" ? (
<div className="flex justify-end items-center mr-36">
<div className="mr-36 flex items-center justify-end">
<Button className="px-1 text-xs" onClick={toggleDrawer}>
Describe
</Button>
@@ -127,7 +127,7 @@ const ResourceRow = ({
open={isOpen}
onClose={toggleDrawer}
direction="right"
className="min-w-[85%] "
className="min-w-[85%]"
>
{isOpen ? (
<DescribeResource
@@ -171,19 +171,19 @@ const DescribeResource = ({
const badgeType = getBadgeType(status);
return (
<>
<div className="flex justify-between px-3 py-4 border-b ">
<div className="flex justify-between border-b px-3 py-4">
<div>
<div className="flex gap-3">
<h3 className="font-medium text-xl font-poppins">{name}</h3>
<h3 className="font-poppins text-xl font-medium">{name}</h3>
<Badge type={badgeType}>{reason}</Badge>
</div>
<p className="m-0 mt-4 font-inter text-sm font-normal">{kind}</p>
</div>
<div className="flex items-center gap-4 pr-4">
<div className="flex items-center gap-4 pr-4">
<a
href="https://www.komodor.com/helm-dash/?utm_campaign=Helm%20Dashboard%20%7C%20CTA&amp;utm_source=helm-dash&amp;utm_medium=cta&amp;utm_content=helm-dash"
className="bg-primary text-white p-1.5 text-sm flex items-center rounded-sm"
className="flex items-center rounded-sm bg-primary p-1.5 text-sm text-white"
target="_blank"
rel="noreferrer"
>
@@ -197,7 +197,7 @@ const DescribeResource = ({
aria-label="Close"
onClick={closeDrawer}
>
<img src={closeIcon} alt="close" className="w-[16px] h-[16px]" />
<img src={closeIcon} alt="close" className="h-[16px] w-[16px]" />
</button>
</div>
</div>
@@ -205,9 +205,9 @@ const DescribeResource = ({
{isLoading ? (
<Spinner />
) : (
<div className="h-full overflow-y-auto ">
<div className="h-full overflow-y-auto">
<pre
className="bg-white rounded-sm p-4 font-medium text-base font-sf-mono"
className="rounded-sm bg-white p-4 font-sf-mono text-base font-medium"
style={{ overflow: "unset" }}
dangerouslySetInnerHTML={{
__html: yamlFormattedData,
frontend/src/components/revision/RevisionsList.tsx
+3 -3
View File
@@ -40,18 +40,18 @@ export default function RevisionsList({
}
onClick={() => changeRelease(release.revision)}
key={release.revision}
className={`flex flex-col border border-gray-200 rounded-md mx-5 p-2 gap-4 cursor-pointer ${
className={`mx-5 flex cursor-pointer flex-col gap-4 rounded-md border border-gray-200 p-2 ${
release.revision === selectedRevision
? "border-revision-dark bg-white"
: "border-revision-light bg-body-background"
}`}
>
<div className="flex flex-wrap row justify-between">
<div className="row flex flex-wrap justify-between">
<StatusLabel status={release.status} isRollback={isRollback} />
<span className="font-bold">#{release.revision}</span>
</div>
<div
className="self-end text-muted text-xs flex flex-wrap gap-1"
className="flex flex-wrap gap-1 self-end text-xs text-muted"
style={{
width: "100%",
display: "flex",