mirror/helm-dashboard
1
0
Fork 0
mirror of https://github.com/komodorio/helm-dashboard.git synced 2026-03-24 11:48:04 +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

3
frontend/.prettierrc.yaml
View File

@@ -3,3 +3,6 @@ tabWidth: 2
semi: true
singleQuote: false
bracketSpacing: true
plugins:
- "prettier-plugin-tailwindcss" # should be last https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#compatibility-with-other-prettier-plugins
tailwindStylesheet: "./src/index.css"

80
frontend/package-lock.json generated
View File

@@ -53,6 +53,7 @@
"husky": "^9.1.7",
"lint-staged": "^16.2.7",
"prettier": "^3.7.1",
"prettier-plugin-tailwindcss": "^0.7.1",
"storybook": "10.0.8",
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3",
@@ -10281,6 +10282,85 @@
"node": ">=6.0.0"
}
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz",
"integrity": "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=20.19"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "*",
"@prettier/plugin-hermes": "*",
"@prettier/plugin-oxc": "*",
"@prettier/plugin-pug": "*",
"@shopify/prettier-plugin-liquid": "*",
"@trivago/prettier-plugin-sort-imports": "*",
"@zackad/prettier-plugin-twig": "*",
"prettier": "^3.0",
"prettier-plugin-astro": "*",
"prettier-plugin-css-order": "*",
"prettier-plugin-jsdoc": "*",
"prettier-plugin-marko": "*",
"prettier-plugin-multiline-arrays": "*",
"prettier-plugin-organize-attributes": "*",
"prettier-plugin-organize-imports": "*",
"prettier-plugin-sort-imports": "*",
"prettier-plugin-svelte": "*"
},
"peerDependenciesMeta": {
"@ianvs/prettier-plugin-sort-imports": {
"optional": true
},
"@prettier/plugin-hermes": {
"optional": true
},
"@prettier/plugin-oxc": {
"optional": true
},
"@prettier/plugin-pug": {
"optional": true
},
"@shopify/prettier-plugin-liquid": {
"optional": true
},
"@trivago/prettier-plugin-sort-imports": {
"optional": true
},
"@zackad/prettier-plugin-twig": {
"optional": true
},
"prettier-plugin-astro": {
"optional": true
},
"prettier-plugin-css-order": {
"optional": true
},
"prettier-plugin-jsdoc": {
"optional": true
},
"prettier-plugin-marko": {
"optional": true
},
"prettier-plugin-multiline-arrays": {
"optional": true
},
"prettier-plugin-organize-attributes": {
"optional": true
},
"prettier-plugin-organize-imports": {
"optional": true
},
"prettier-plugin-sort-imports": {
"optional": true
},
"prettier-plugin-svelte": {
"optional": true
}
}
},
"node_modules/pretty-bytes": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

4
frontend/package.json
View File

@@ -49,6 +49,7 @@
"husky": "^9.1.7",
"lint-staged": "^16.2.7",
"prettier": "^3.7.1",
"prettier-plugin-tailwindcss": "^0.7.1",
"storybook": "10.0.8",
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3",
@@ -60,7 +61,8 @@
"npm run lint:fix",
"npm run prettier:fix"
],
"*.{json,css,md,mdx}": "npm run prettier:fix"
"*.{json,css,md,mdx}": "npm run prettier:fix",
"src/*.{ts,tsx}": "npm run tsc:check"
},
"scripts": {
"dev": "vite",

4
frontend/src/App.tsx
View File

@@ -22,9 +22,9 @@ const queryClient = new QueryClient({
const PageLayout = () => {
return (
<div className="flex flex-col h-screen">
<div className="flex h-screen flex-col">
<Header />
<div className="bg-body-background bg-no-repeat bg-[url('./assets/body-background.svg')] flex-1">
<div className="flex-1 bg-body-background bg-[url('./assets/body-background.svg')] bg-no-repeat">
<Outlet />
</div>
</div>

2
frontend/src/components/Button.tsx
View File

@@ -27,7 +27,7 @@ export default function Button(props: ButtonProps): JSX.Element {
<>
<button
onClick={props.onClick}
className={`${props.className} bg-white border border-gray-300 hover:bg-gray-50 text-black py-1 px-4 rounded-sm `}
className={`${props.className} rounded-sm border border-gray-300 bg-white px-4 py-1 text-black hover:bg-gray-50`}
disabled={props.disabled}
>
{props.children}

12
frontend/src/components/ClustersList.tsx
View File

@@ -107,7 +107,7 @@ function ClustersList({
};
return (
<div className="bg-white flex flex-col p-2 rounded-sm custom-shadow text-cluster-list w-48 m-5 h-fit pb-4 custom-">
<div className="custom- custom-shadow m-5 flex h-fit w-48 flex-col rounded-sm bg-white p-2 pb-4 text-cluster-list">
{!clusterMode ? (
<>
<label className="font-bold">Clusters</label>
@@ -115,10 +115,10 @@ function ClustersList({
return (
<span
key={cluster.Name}
className="data-cy-clusterName flex items-center mt-2 text-xs"
className="data-cy-clusterName mt-2 flex items-center text-xs"
>
<input
className="cursor-pointer data-cy-clustersInput"
className="data-cy-clustersInput cursor-pointer"
onChange={(e) => {
onClusterChange(e.target.value);
}}
@@ -128,7 +128,7 @@ function ClustersList({
checked={cluster.Name === selectedCluster}
name="clusters"
/>
<label htmlFor={cluster.Name} className="ml-1 ">
<label htmlFor={cluster.Name} className="ml-1">
{getCleanClusterName(cluster.Name)}
</label>
</span>
@@ -137,11 +137,11 @@ function ClustersList({
</>
) : null}
<label className="font-bold mt-4">Namespaces</label>
<label className="mt-4 font-bold">Namespaces</label>
{namespaces
?.sort((a, b) => a.name.localeCompare(b.name))
?.map((namespace) => (
<span key={namespace.name} className="flex items-center mt-2 text-xs">
<span key={namespace.name} className="mt-2 flex items-center text-xs">
<input
type="checkbox"
id={namespace.name}

2
frontend/src/components/InstalledPackages/HealthStatus.tsx
View File

@@ -27,7 +27,7 @@ const HealthStatus = ({ statusData }: Props) => {
: cond.status === "Progressing"
? "bg-warning"
: "bg-danger"
} w-2.5 h-2.5 rounded-xs`}
} h-2.5 w-2.5 rounded-xs`}
></span>
</Tooltip>
);

20
frontend/src/components/InstalledPackages/InstalledPackageCard.tsx
View File

@@ -80,7 +80,7 @@ export default function InstalledPackageCard({
ref={ref}
className={`${
borderLeftColor[release.status]
} text-xs grid grid-cols-12 items-center bg-white rounded-md p-2 py-6 my-2 custom-shadow border-l-4 border-l-[${statusColor}] cursor-pointer ${
} custom-shadow my-2 grid grid-cols-12 items-center rounded-md border-l-4 bg-white p-2 py-6 text-xs border-l-[${statusColor}] cursor-pointer ${
isMouseOver && "custom-shadow-lg"
}`}
onMouseOver={handleMouseOver}
@@ -90,31 +90,31 @@ export default function InstalledPackageCard({
<img
src={release.icon || HelmGrayIcon}
alt="helm release icon"
className="w-[45px] mx-4 col-span-1 min-w-[45px]"
className="col-span-1 mx-4 w-[45px] min-w-[45px]"
/>
<div className="col-span-11 -mb-5">
<div className="grid grid-cols-11">
<div className="col-span-3 font-bold text-xl mr-0.5 font-roboto-slab">
<div className="col-span-3 mr-0.5 font-roboto-slab text-xl font-bold">
{release.name}
</div>
<div className="col-span-3">
<StatusLabel status={release.status} />
</div>
<div className="col-span-2 font-bold">{release.chart}</div>
<div className="col-span-1 font-bold text-xs">
<div className="col-span-1 text-xs font-bold">
#{release.revision}
</div>
<div className="col-span-1 font-bold text-xs">
<div className="col-span-1 text-xs font-bold">
{release.namespace}
</div>
<div className="col-span-1 font-bold text-xs">{getAge(release)}</div>
<div className="col-span-1 text-xs font-bold">{getAge(release)}</div>
</div>
<div
className="grid grid-cols-11 text-xs mt-3"
className="mt-3 grid grid-cols-11 text-xs"
style={{ marginBottom: "12px" }}
>
<div className="col-span-3 h-12 line-clamp-3 mr-1">
<div className="col-span-3 mr-1 line-clamp-3 h-12">
{release.description}
</div>
<div className="col-span-3 mr-2">
@@ -124,11 +124,11 @@ export default function InstalledPackageCard({
<Spinner size={4} />
)}
</div>
<div className="col-span-2 text-muted flex flex-col items">
<div className="items col-span-2 flex flex-col text-muted">
<span>CHART VERSION</span>
{(canUpgrade || installRepoSuggestion) && (
<div
className="text-upgradable flex flex-row items-center gap-1 font-bold"
className="flex flex-row items-center gap-1 font-bold text-upgradable"
title={`upgrade available: ${latestVersionData?.version} from ${latestVersionData?.repository}`}
>
{canUpgrade && !installRepoSuggestion ? (

12
frontend/src/components/InstalledPackages/InstalledPackagesHeader.tsx
View File

@@ -17,22 +17,22 @@ export default function InstalledPackagesHeader({
!isLoading && (numOfPackages === undefined || numOfPackages === 0)
);
return (
<div className="custom-shadow rounded-t-md ">
<div className="flex items-center justify-between bg-white px-2 py-0.5 font-inter rounded-t-md ">
<div className="custom-shadow rounded-t-md">
<div className="flex items-center justify-between rounded-t-md bg-white px-2 py-0.5 font-inter">
<div className="flex items-center">
<img
src={HeaderLogo}
alt="Helm-DashBoard"
className="display-inline h-12 ml-3 mr-3 w-[28px] "
className="display-inline mr-3 ml-3 h-12 w-[28px]"
/>
<h2 className="display-inline font-bold text-base ">{`Installed Charts (${
<h2 className="display-inline text-base font-bold">{`Installed Charts (${
numOfPackages || "0"
})`}</h2>
</div>
<div className="w-1/3">
<input
className="border border-installed-charts-filter rounded-sm p-1 text-sm w-11/12"
className="w-11/12 rounded-sm border border-installed-charts-filter p-1 text-sm"
placeholder="Filter..."
type="text"
onChange={(ev) => setFilterKey(ev.target.value)}
@@ -41,7 +41,7 @@ export default function InstalledPackagesHeader({
</div>
{showNoPackageAlert && (
<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 charts installed.
&quot;Repository&quot; section may be a good place to start.
</div>

2
frontend/src/components/SelectMenu.tsx
View File

@@ -75,7 +75,7 @@ export function SelectMenuItem({
export default function SelectMenu(props: SelectMenuProps): JSX.Element {
const { header, children } = props;
return (
<div className="card flex flex-col">
<div className="flex flex-col card">
<h2 className="text-xl font-bold">{header}</h2>
<div className="flex flex-col">{children}</div>
</div>

4
frontend/src/components/ShutDownButton.tsx
View File

@@ -6,7 +6,7 @@ import { useShutdownHelmDashboard } from "../API/other";
function ShutDownButton() {
const { mutate: signOut, status } = useShutdownHelmDashboard();
const handleClick = async () => {
const handleClick = () => {
signOut();
};
@@ -22,7 +22,7 @@ function ShutDownButton() {
<button
onClick={handleClick}
title="Shut down the Helm Dashboard application"
className="flex justify-center w-full mr-5 py-3 border border-transparent hover:border hover:border-gray-500 rounded-sm hover:rounded-lg"
className="mr-5 flex w-full justify-center rounded-sm border border-transparent py-3 hover:rounded-lg hover:border hover:border-gray-500"
>
<BsPower className="w-6" />
</button>

2
frontend/src/components/Spinner/index.tsx
View File

@@ -3,7 +3,7 @@ export default function Spinner({ size = 8 }: { size?: number }) {
<div role="status">
<svg
aria-hidden="true"
className={`w-${size} h-${size} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
className={`w-${size} h-${size} mr-2 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600`}
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"

10
frontend/src/components/Tabs.tsx
View File

@@ -25,12 +25,10 @@ export default function Tabs({ tabs, selectedTab }: TabsProps) {
{tabs.map((tab) => (
<button
key={tab.label}
className={`cursor-pointer px-4 py-2 text-sm font-normal text-tab-color focus:outline-hidden"
${
selectedTab.value === tab.value &&
"border-b-[3px] border-tab-color"
}
`}
className={`focus:outline-hidden" cursor-pointer px-4 py-2 text-sm font-normal text-tab-color ${
selectedTab.value === tab.value &&
"border-b-[3px] border-tab-color"
} `}
onClick={() => moveTab(tab)}
>
{tab.label}

6
frontend/src/components/TabsBar.stories.tsx
View File

@@ -17,15 +17,15 @@ export const Default = {
tabs: [
{
name: "tab1",
component: <div className="w-250 h-250 bg-green-400">tab1</div>,
component: <div className="h-250 w-250 bg-green-400">tab1</div>,
},
{
name: "tab2",
component: <div className="w-250 h-250 bg-red-400">tab2</div>,
component: <div className="h-250 w-250 bg-red-400">tab2</div>,
},
{
name: "tab3",
component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
component: <div className="h-250 w-250 bg-blue-400">tab3</div>,
},
],
activeTab: "tab1",

4
frontend/src/components/TextInput.tsx
View File

@@ -24,7 +24,7 @@ export interface TextInputProps {
export default function TextInput(props: TextInputProps): JSX.Element {
return (
<div className="mb-6">
<label className="block ml-1 mb-1 text-sm font-medium text-gray-900dark:text-white">
<label className="text-gray-900dark:text-white mb-1 ml-1 block text-sm font-medium">
{props.label}
{/* if prop.isMandatory is true, add a whitespace and a red star to signify it*/}
{props.isMandatory ? <span className="text-red-500"> *</span> : ""}
@@ -32,7 +32,7 @@ export default function TextInput(props: TextInputProps): JSX.Element {
<input
type="text"
placeholder={props.placeholder}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
/>
</div>
);

6
frontend/src/components/Tooltip.tsx
View File

@@ -20,7 +20,7 @@ export default function Tooltip({
<div
id={id}
role="tooltip"
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
className="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-xs transition-opacity duration-300 dark:bg-gray-700"
>
{title}
<div className="tooltip-arrow" data-popper-arrow></div>
@@ -29,14 +29,14 @@ export default function Tooltip({
<button
data-tooltip-target="tooltip-default"
type="button"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-hidden focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
className="rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-hidden dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Default tooltip
</button>
<div
id="tooltip-default"
role="tooltip"
className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
className="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-xs transition-opacity duration-300 dark:bg-gray-700"
>
Tooltip content
<div className="tooltip-arrow" data-popper-arrow></div>

2
frontend/src/components/Troubleshoot.tsx
View File

@@ -8,7 +8,7 @@ export const Troubleshoot = () => {
target="_blank"
rel="noreferrer"
>
<button className="bg-primary text-white p-2 flex items-center rounded-sm text-sm font-medium font-roboto">
<button className="flex items-center rounded-sm bg-primary p-2 font-roboto text-sm font-medium text-white">
Troubleshoot in Komodor
<RiExternalLinkLine className="ml-2 text-lg" />
</button>

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

@@ -62,21 +62,21 @@ function DropDown({ items }: DropDownProps) {
Y: e.pageY,
}));
}}
className="flex items-center justify-between cursor-pointer"
className="flex cursor-pointer items-center justify-between"
>
Help
<img src={ArrowDownIcon} className="ml-2 w-[10px] h-[10px]" />
<img src={ArrowDownIcon} className="ml-2 h-[10px] w-[10px]" />
</button>
</div>
{popupState.isOpen && (
<div
ref={modalRef}
className={`z-10 flex flex-col py-1 gap-1 bg-white mt-3 absolute rounded-sm border top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
className={`absolute z-10 mt-3 flex flex-col gap-1 rounded-sm border bg-white py-1 top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
>
{items.map((item) => (
<Fragment key={item.id}>
{item.isSeparator ? (
<div className="bg-gray-300 h-[1px]" />
<div className="h-[1px] bg-gray-300" />
) : (
<div
onClick={() => {
@@ -86,9 +86,9 @@ function DropDown({ items }: DropDownProps) {
isOpen: false,
}));
}}
className={`cursor-pointer font-normal flex items-center gap-2 py-1 pl-3 pr-7 hover:bg-dropdown ${
className={`flex cursor-pointer items-center gap-2 py-1 pr-7 pl-3 font-normal hover:bg-dropdown ${
item.isDisabled
? "cursor-default hover:bg-transparent text-gray-400"
? "cursor-default text-gray-400 hover:bg-transparent"
: ""
}`}
>

2
frontend/src/components/common/StatusLabel.tsx
View File

@@ -31,7 +31,7 @@ function StatusLabel({ status, isRollback }: StatusLabelProps) {
justifyContent: "space-between",
}}
>
<span className={`${statusColor} font-bold text-xs`}>
<span className={`${statusColor} text-xs font-bold`}>
● {status.toUpperCase()}
</span>
{isRollback && <AiOutlineReload size={14} />}

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

@@ -80,10 +80,10 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
isOpen={isOpen}
onClose={onClose}
bottomContent={
<div className="flex justify-end p-6 gap-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<div className="flex justify-end gap-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600">
<button
data-cy="add-chart-repository-button"
className="flex items-center text-white font-medium px-3 py-1.5 bg-primary hover:bg-add-repo focus:ring-4 focus:outline-hidden focus:ring-blue-300 disabled:bg-blue-300 rounded-lg text-base text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer"
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}
disabled={isLoading}
>
@@ -95,7 +95,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
>
<div className="flex gap-x-3">
<label className="flex-1" htmlFor="name">
<div className="mb-2 text-sm require">Name</div>
<div className="require mb-2 text-sm">Name</div>
<input
value={formData.name}
onChange={(e) =>
@@ -109,11 +109,11 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
data-cy="add-chart-name"
type="text"
placeholder="Komodorio"
className="rounded-lg p-2 w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow"
className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
/>
</label>
<label className="flex-1" htmlFor="url">
<div className="mb-2 text-sm require">URL</div>
<div className="require mb-2 text-sm">URL</div>
<input
value={formData.url}
onChange={(e) =>
@@ -127,12 +127,12 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
data-cy="add-chart-url"
type="text"
placeholder="https://helm-charts.komodor.io"
className="rounded-lg p-2 w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow"
className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
/>
</label>
</div>
<div className="flex gap-x-3">
<label className="flex-1 " htmlFor="username">
<label className="flex-1" htmlFor="username">
<div className="mb-2 text-sm">Username</div>
<input
onChange={(e) =>
@@ -144,7 +144,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
required
id="username"
type="text"
className="rounded-lg p-2 w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow"
className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
/>
</label>
<label className="flex-1" htmlFor="password">
@@ -159,7 +159,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
required
id="password"
type="text"
className="rounded-lg p-2 w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow"
className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
/>
</label>
</div>

8
frontend/src/components/modal/ErrorModal.tsx
View File

@@ -14,7 +14,7 @@ export default function ErrorModal({
contentText,
}: ErrorModalProps) {
const ErrorTitle = (
<div className="font-medium text-2xl text-error-color">
<div className="text-2xl font-medium text-error-color">
<div className="flex gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -33,8 +33,8 @@ export default function ErrorModal({
);
const bottomContent = (
<div className="flex py-6 px-4 gap-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<span className="text-sm text-muted fs-80 text-gray-500">
<div className="flex gap-2 rounded-b border-t border-gray-200 px-4 py-6 dark:border-gray-600">
<span className="fs-80 text-sm text-gray-500 text-muted">
Hint: Komodor has the same HELM capabilities, with enterprise features
and support.{" "}
<a
@@ -56,7 +56,7 @@ export default function ErrorModal({
onClose={onClose}
bottomContent={bottomContent}
>
<p className="text-error-color border-green-400">{contentText}</p>
<p className="border-green-400 text-error-color">{contentText}</p>
</Modal>
);
}

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

@@ -14,7 +14,7 @@ export default function GlobalErrorModal({
contentText,
}: ErrorModalProps) {
const ErrorTitle = (
<div className="font-medium text-2xl text-error-color">
<div className="text-2xl font-medium text-error-color">
<div className="flex gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -55,7 +55,7 @@ export default function GlobalErrorModal({
>
<p
style={{ minWidth: "500px" }}
className="text-error-color border-green-400 text-sm"
className="border-green-400 text-sm text-error-color"
>
{contentText}
</p>

4
frontend/src/components/modal/InstallChartModal/ChartValues.tsx
View File

@@ -11,13 +11,13 @@ export const ChartValues = ({
return (
<div className="w-1/2">
<label
className="block tracking-wide text-gray-700 text-xl font-medium mb-2"
className="mb-2 block text-xl font-medium tracking-wide text-gray-700"
htmlFor="grid-user-defined-values"
>
Chart Value Reference:
</label>
<pre
className="text-base bg-chart-values p-2 rounded-sm font-medium w-full max-h-[330px] block overflow-y-auto font-sf-mono"
className="block max-h-[330px] w-full overflow-y-auto rounded-sm bg-chart-values p-2 font-sf-mono text-base font-medium"
dangerouslySetInnerHTML={
chartValues && !loading
? {

2
frontend/src/components/modal/InstallChartModal/DefinedValues.tsx
View File

@@ -15,7 +15,7 @@ export const DefinedValues = ({
loading,
}: DefinedValuesProps) => {
return (
<div className="flex w-full gap-6 mt-4">
<div className="mt-4 flex w-full gap-6">
<UserDefinedValues
initialValue={initialValue}
onValuesChange={onUserValuesChange}

2
frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
View File

@@ -169,7 +169,7 @@ export const InstallReleaseChartModal = ({
window.location.reload();
},
onError: (error) => {
setInstallError((error as Error)?.message || "Failed to update");
setInstallError(error?.message || "Failed to update");
},
});

2
frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
View File

@@ -149,7 +149,7 @@ export const InstallRepoChartModal = ({
navigate(`/${response.namespace}/${response.name}/installed/revision/1`);
},
onError: (error) => {
setInstallError((error as Error)?.message || "Failed to update");
setInstallError(error?.message || "Failed to update");
},
});

2
frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx
View File

@@ -17,7 +17,7 @@ export const InstallUpgradeTitle: FC<InstallUpgradeProps> = ({
<div className="font-bold">
{`${text}`}
{(isUpgrade || releaseValues) && (
<span className="text-green-700 ml-1">{chartName}</span>
<span className="ml-1 text-green-700">{chartName}</span>
)}
</div>
);

4
frontend/src/components/modal/InstallChartModal/ManifestDiff.tsx
View File

@@ -35,7 +35,7 @@ export const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
if (isLoading && !error) {
return (
<div className="flex text-lg items-end">
<div className="flex items-end text-lg">
<Spinner />
Calculating diff...
</div>
@@ -47,7 +47,7 @@ export const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
<h4 className="text-xl">Manifest changes:</h4>
{error ? (
<p className="text-red-600 text-lg">
<p className="text-lg text-red-600">
Failed to get upgrade info: {error.toString()}
</p>
) : diff ? (

6
frontend/src/components/modal/InstallChartModal/UserDefinedValues.tsx
View File

@@ -20,9 +20,9 @@ export const UserDefinedValues = ({
}, [debouncedValue, onValuesChange, initialValue]);
return (
<div className="w-1/2 ">
<div className="w-1/2">
<label
className="block tracking-wide text-gray-700 text-xl font-medium mb-2"
className="mb-2 block text-xl font-medium tracking-wide text-gray-700"
htmlFor="grid-user-defined-values"
>
User-Defined Values:
@@ -32,7 +32,7 @@ export const UserDefinedValues = ({
defaultValue={initialValue}
onChange={(e) => setUserDefinedValues(e.target.value)}
rows={14}
className="block p-2.5 w-full text-md text-gray-900 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 resize-none font-monospace"
className="text-md font-monospace block w-full resize-none rounded-lg border border-gray-300 p-2.5 text-gray-900 focus:border-blue-500 focus:ring-blue-500"
></textarea>
</div>
);

14
frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx
View File

@@ -42,7 +42,7 @@ export const VersionToInstall: FC<{
const currentVersion =
chartVersion && showCurrentVersion ? (
<p className="text-xl text-muted ml-2">
<p className="ml-2 text-xl text-muted">
{"(current version is "}
<span className="text-green-700">{`${chartVersion}`}</span>
{")"}
@@ -71,12 +71,12 @@ export const VersionToInstall: FC<{
[options, initialVersion]
);
return (
<div className="flex gap-2 text-xl items-center">
<div className="flex items-center gap-2 text-xl">
{versions?.length && (selectedOption || initOpt) ? (
<>
Version to install:{" "}
<Select
className="basic-single cursor-pointer min-w-[272px]"
className="basic-single min-w-[272px] cursor-pointer"
classNamePrefix="select"
isClearable={false}
isSearchable={false}
@@ -96,9 +96,9 @@ export const VersionToInstall: FC<{
return (
<OriginalSingleValue {...props}>
<span className="text-green-700 font-bold">{children}</span>
<span className="font-bold text-green-700">{children}</span>
{props.data.check && showCurrentVersion && (
<BsCheck2 className="inline-block ml-2 text-green-700 font-bold" />
<BsCheck2 className="ml-2 inline-block font-bold text-green-700" />
)}
</OriginalSingleValue>
);
@@ -106,7 +106,7 @@ export const VersionToInstall: FC<{
Option: ({ children, innerProps, data }) => (
<div
className={
"flex items-center py-2 pl-4 pr-2 text-green-700 hover:bg-blue-100"
"flex items-center py-2 pr-2 pl-4 text-green-700 hover:bg-blue-100"
}
{...innerProps}
>
@@ -114,7 +114,7 @@ export const VersionToInstall: FC<{
{data.check && showCurrentVersion && (
<BsCheck2
fontWeight={"bold"}
className="inline-block ml-2 text-green-700 font-bold"
className="ml-2 inline-block font-bold text-green-700"
/>
)}
</div>

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

@@ -71,21 +71,21 @@ const Modal = ({
const getTitle = (title: string | ReactNode) => {
if (typeof title === "string")
return <h3 className="text-xl font-medium text-grey">{title}</h3>;
return <h3 className="text-grey text-xl font-medium">{title}</h3>;
else return title;
};
return createPortal(
<>
{isOpen && (
<div className="fixed inset-0 bg-black/75 transition-opacity ">
<div className="fixed inset-0 bg-black/75 transition-opacity">
<div className="flex justify-center">
<div
style={{
maxHeight: "95vh",
overflow: "hidden",
}}
className={`relative rounded-lg shadow-sm m-7 w-2/5 max-w-[1300px] ${
className={`relative m-7 w-2/5 max-w-[1300px] rounded-lg shadow-sm ${
!containerClassNames ||
(containerClassNames && !containerClassNames.includes("bg-"))
? "bg-white"
@@ -93,17 +93,17 @@ const Modal = ({
} ${containerClassNames ?? ""}`}
>
{title && (
<div className="flex items-start justify-between p-4 border-b rounded-t ">
<div className="flex items-start justify-between rounded-t border-b p-4">
{getTitle(title)}
{onClose ? (
<button
type="button"
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer"
className="ml-auto inline-flex cursor-pointer items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="staticModal"
onClick={() => onClose()}
>
<svg
className="w-5 h-5"
className="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
@@ -118,20 +118,20 @@ const Modal = ({
) : null}
</div>
)}
<div className="p-4 gap-6 overflow-y-auto max-h-[calc(100vh_-_200px)]">
<div className="max-h-[calc(100vh_-_200px)] gap-6 overflow-y-auto p-4">
{children}
</div>
{bottomContent ? (
<div className="p-5 text-sm">{bottomContent}</div>
) : (
<div className="flex justify-end p-6 gap-2 border-t border-gray-200 rounded-b ">
<div className="flex justify-end gap-2 rounded-b border-t border-gray-200 p-6">
{actions?.map((action) => (
<button
key={action.id}
type="button"
className={
action.isLoading
? `flex items-center font-bold justify-around gap-1 ${getClassName(
? `flex items-center justify-around gap-1 font-bold ${getClassName(
action
)}`
: `${getClassName(action)} `

6
frontend/src/components/repository/ChartViewer.tsx
View File

@@ -21,11 +21,11 @@ function ChartViewer({ chart }: ChartViewerProps) {
<>
<div
data-cy="chart-viewer-install-button"
className="grid grid-cols-10 gap-3 hover:bg-body-background p-4 text-sm"
className="grid grid-cols-10 gap-3 p-4 text-sm hover:bg-body-background"
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>
<span className="col-span-2 font-semibold flex flex-row items-center gap-1 text-base">
<span className="col-span-2 flex flex-row items-center gap-1 text-base font-semibold">
<img src={chart.icon} className="h-4" />
{chart.name}
</span>
@@ -33,7 +33,7 @@ function ChartViewer({ chart }: ChartViewerProps) {
<span className="col-span-1 text-center">{chart.version}</span>
<span className="col-span-1 text-center">
<button
className={`bg-white border border-gray-300 px-2 p-1 rounded-md font-semibold ${
className={`rounded-md border border-gray-300 bg-white p-1 px-2 font-semibold ${
showInstallButton ? "visible" : "invisible"
}`}
onClick={() => setShowInstallModal(true)}

6
frontend/src/components/repository/RepositoriesList.tsx
View File

@@ -30,7 +30,7 @@ function RepositoriesList({
return (
<>
<div className="h-fit bg-white w-72 flex flex-col p-3 rounded-sm custom-shadow text-dark gap-3">
<div className="custom-shadow flex h-fit w-72 flex-col gap-3 rounded-sm bg-white p-3 text-dark">
<label className="font-bold">Repositories</label>
<div className="flex flex-col gap-1">
{repositories?.map((repository) => (
@@ -60,7 +60,7 @@ function RepositoriesList({
data-cy="install-repository-button"
type="button"
style={{ marginTop: "10px" }}
className="h-8 w-fit flex items-center gap-2 border rounded-sm text-muted border-gray-300 px-3 py-1 text-sm font-semibold cursor-pointer"
className="flex h-8 w-fit cursor-pointer items-center gap-2 rounded-sm border border-gray-300 px-3 py-1 text-sm font-semibold text-muted"
onClick={() => setShowAddRepositoryModal(true)}
>
+ Add Repository
@@ -68,7 +68,7 @@ function RepositoriesList({
<p className="text-xs">
Charts developers: you can also add local directories as chart source.
Use{" "}
<span className="text-green-600 font-monospace">--local-chart</span>{" "}
<span className="font-monospace text-green-600">--local-chart</span>{" "}
CLI switch to specify it.
</p>
</div>

20
frontend/src/components/repository/RepositoryViewer.tsx
View File

@@ -75,7 +75,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
if (repository === undefined) {
return (
<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 repositories installed. You can add
one with the &quot;Add Repository&quot; button on the left side bar.
</div>
@@ -83,10 +83,10 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
}
return (
<div className="flex flex-col p-6 gap-3 bg-white custom-shadow border rounded-md">
<span className="text-muted font-bold text-xs">REPOSITORY</span>
<div className="custom-shadow flex flex-col gap-3 rounded-md border bg-white p-6">
<span className="text-xs font-bold text-muted">REPOSITORY</span>
<div className="flex justify-between">
<span className="text-dark text-3xl font-semibold">
<span className="text-3xl font-semibold text-dark">
{repository?.name}
</span>
@@ -97,7 +97,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
update.mutate();
}}
>
<span className="h-8 flex items-center gap-2 bg-white border border-gray-300 px-5 py-1 text-sm font-semibold rounded-sm">
<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">
{update.isPending ? <Spinner size={4} /> : <BsArrowRepeat />}
Update
</span>
@@ -107,7 +107,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
removeRepository();
}}
>
<span className="h-8 flex items-center gap-2 bg-white border border-gray-300 px-5 py-1 text-sm font-semibold rounded-sm">
<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">
{isRemoveLoading ? <Spinner size={4} /> : <BsTrash3 />}
Remove
</span>
@@ -118,15 +118,15 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
value={searchValue}
type="text"
placeholder="Filter..."
className="mt-2 h-8 p-2 text-sm w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow rounded-sm"
className="input-box-shadow mt-2 h-8 w-full rounded-sm border border-gray-300 p-2 text-sm focus:border-sky-500 focus:outline-hidden"
/>
</div>
</div>
<span className="text-dark text-sm bg-repository px-3 py-1 rounded-md self-start -mt-10">
<span className="-mt-10 self-start rounded-md bg-repository px-3 py-1 text-sm text-dark">
URL: <span className="font-bold">{repository?.url}</span>
</span>
<div className="bg-secondary grid grid-cols-10 text-xs font-bold p-2 px-4 mt-4 rounded-md">
<div className="mt-4 grid grid-cols-10 rounded-md bg-secondary p-2 px-4 text-xs font-bold">
<span className="col-span-2">CHART NAME</span>
<span className="col-span-6">DESCRIPTION</span>
<span className="col-span-1 text-center">VERSION</span>
@@ -141,7 +141,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
)}
{showNoChartsAlert && (
<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 repositories installed. You can add
one with the &quot;Add Repository&quot; button on the left side bar.
</div>

34
frontend/src/components/revision/RevisionDetails.tsx
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>

18
frontend/src/components/revision/RevisionDiff.tsx
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>

38
frontend/src/components/revision/RevisionResource.tsx
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,

6
frontend/src/components/revision/RevisionsList.tsx
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",

20
frontend/src/layout/Header.tsx
View File

@@ -58,8 +58,8 @@ export default function Header() {
}`;
return (
<div className="h-16 flex items-center justify-between bg-white custom-shadow">
<div className="h-16 flex items-center gap-6 min-w-fit ">
<div className="custom-shadow flex h-16 items-center justify-between bg-white">
<div className="flex h-16 min-w-fit items-center gap-6">
<LinkWithSearchParams to={"/installed"} exclude={["tab"]}>
<img
src={LogoHeader}
@@ -67,9 +67,9 @@ export default function Header() {
className="ml-3 w-48 min-w-[80px]"
/>
</LinkWithSearchParams>
<span className="ml-3 w-px h-3/5 bg-gray-200" />
<span className="ml-3 h-3/5 w-px bg-gray-200" />
<div className="inline-block w-full">
<ul className="w-full items-center flex md:flex-row md:justify-between md:mt-0 md:text-sm md:font-normal md:border-0 ">
<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"}
@@ -135,19 +135,19 @@ export default function Header() {
</ul>
</div>
</div>
<div className="h-16 flex items-center text-sm ">
<div className="flex p-1 gap-2 border bottom-gray-200 rounded-sm min-w-max">
<div className="flex h-16 items-center text-sm">
<div className="bottom-gray-200 flex min-w-max gap-2 rounded-sm border p-1">
<img src={WatcherIcon} width={40} height={40} />
<div className="flex flex-col">
<a
href="https://komodor.com/helm-dash/"
className="text-link-color font-bold"
className="font-bold text-link-color"
target="_blank"
rel="noopener noreferrer"
>
<div className="flex font-bold items-center gap-2 min-w-[25%] ">
<div className="flex min-w-[25%] items-center gap-2 font-bold">
Upgrade your HELM experience - Free
<BsBoxArrowUpRight className="w-[14px] h-[14px]" />
<BsBoxArrowUpRight className="h-[14px] w-[14px]" />
</div>
</a>
<label className="text-muted">
@@ -156,7 +156,7 @@ export default function Header() {
</div>
</div>
<span className="w-px h-3/5 bg-gray-200 ml-3" />
<span className="ml-3 h-3/5 w-px bg-gray-200" />
{!clusterMode ? <ShutDownButton /> : null}
</div>
</div>

4
frontend/src/pages/Installed.tsx
View File

@@ -74,7 +74,7 @@ function Installed() {
}, [data, filterKey, selectedNamespaces]);
return (
<div className="flex flex-row w-full">
<div className="flex w-full flex-row">
<ClustersList
selectedCluster={context ?? ""}
filteredNamespaces={selectedNamespaces}
@@ -82,7 +82,7 @@ function Installed() {
installedReleases={data}
/>
<div className="p-5 w-[calc(100%-17rem)]">
<div className="w-[calc(100%-17rem)] p-5">
<InstalledPackagesHeader
isLoading={isLoading || isRefetching}
filteredReleases={filteredReleases}

2
frontend/src/pages/Repository.tsx
View File

@@ -59,7 +59,7 @@ function RepositoryPage() {
}, [repositories, repoFromParams]);
return (
<div className="flex flex-row p-5 gap-4">
<div className="flex flex-row gap-4 p-5">
<RepositoriesList
repositories={repositories}
onRepositoryChanged={handleRepositoryChanged}

22
frontend/src/pages/Revision.tsx
View File

@@ -31,7 +31,7 @@ function Revision() {
);
const sortedReleases = useMemo(
() => (releaseRevisions as ReleaseRevision[])?.sort(descendingSort),
() => releaseRevisions?.sort(descendingSort),
[releaseRevisions]
);
@@ -46,8 +46,8 @@ function Revision() {
return (
<div className="flex">
<div className="flex flex-col gap-2 w-1/6 min-h-screen bg-[#E8EDF2] pb-4">
<label className="mt-5 mx-5 text-sm text-dark font-semibold">
<div className="flex min-h-screen w-1/6 flex-col gap-2 bg-[#E8EDF2] pb-4">
<label className="mx-5 mt-5 text-sm font-semibold text-dark">
Revisions
</label>
{isLoadingHistory ? (
@@ -60,9 +60,9 @@ function Revision() {
)}
</div>
<div className="w-5/6 min-h-screen bg-body-background pb-4">
<div className="min-h-screen w-5/6 bg-body-background pb-4">
{isLoadingHistory ? (
<div className=" p-4">
<div className="p-4">
<Spinner />
</div>
) : selectedRelease ? (
@@ -81,12 +81,12 @@ function Revision() {
const RevisionSidebarSkeleton = () => {
return (
<>
<div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse h-[74px] w-[88%] bg-gray-100" />
<div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse h-[74px] w-[88%] bg-gray-100" />
<div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse h-[74px] w-[88%] bg-gray-100" />
<div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse h-[74px] w-[88%] bg-gray-100" />
<div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse h-[74px] w-[88%] bg-gray-100" />
<div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse h-[74px] w-[88%] bg-gray-100" />
<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" />
</>
);
};

5
frontend/yarn.lock
View File

@@ -5265,6 +5265,11 @@ prettier-linter-helpers@^1.0.0:
dependencies:
fast-diff "^1.1.2"
prettier-plugin-tailwindcss@^0.7.1:
version "0.7.1"
resolved "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz"
integrity sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==
prettier@^3.0.0, prettier@^3.7.1:
version "3.7.1"
resolved "https://registry.npmjs.org/prettier/-/prettier-3.7.1.tgz"