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

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 semi: true
singleQuote: false singleQuote: false
bracketSpacing: true 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", "husky": "^9.1.7",
"lint-staged": "^16.2.7", "lint-staged": "^16.2.7",
"prettier": "^3.7.1", "prettier": "^3.7.1",
"prettier-plugin-tailwindcss": "^0.7.1",
"storybook": "10.0.8", "storybook": "10.0.8",
"tailwindcss": "^4.1.17", "tailwindcss": "^4.1.17",
"typescript": "^5.9.3", "typescript": "^5.9.3",
@@ -10281,6 +10282,85 @@
"node": ">=6.0.0" "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": { "node_modules/pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "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", "husky": "^9.1.7",
"lint-staged": "^16.2.7", "lint-staged": "^16.2.7",
"prettier": "^3.7.1", "prettier": "^3.7.1",
"prettier-plugin-tailwindcss": "^0.7.1",
"storybook": "10.0.8", "storybook": "10.0.8",
"tailwindcss": "^4.1.17", "tailwindcss": "^4.1.17",
"typescript": "^5.9.3", "typescript": "^5.9.3",
@@ -60,7 +61,8 @@
"npm run lint:fix", "npm run lint:fix",
"npm run prettier: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": { "scripts": {
"dev": "vite", "dev": "vite",

4
frontend/src/App.tsx
View File

@@ -22,9 +22,9 @@ const queryClient = new QueryClient({
const PageLayout = () => { const PageLayout = () => {
return ( return (
<div className="flex flex-col h-screen"> <div className="flex h-screen flex-col">
<Header /> <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 /> <Outlet />
</div> </div>
</div> </div>

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

@@ -27,7 +27,7 @@ export default function Button(props: ButtonProps): JSX.Element {
<> <>
<button <button
onClick={props.onClick} 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} disabled={props.disabled}
> >
{props.children} {props.children}

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

@@ -107,7 +107,7 @@ function ClustersList({
}; };
return ( 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 ? ( {!clusterMode ? (
<> <>
<label className="font-bold">Clusters</label> <label className="font-bold">Clusters</label>
@@ -115,10 +115,10 @@ function ClustersList({
return ( return (
<span <span
key={cluster.Name} 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 <input
className="cursor-pointer data-cy-clustersInput" className="data-cy-clustersInput cursor-pointer"
onChange={(e) => { onChange={(e) => {
onClusterChange(e.target.value); onClusterChange(e.target.value);
}} }}
@@ -137,11 +137,11 @@ function ClustersList({
</> </>
) : null} ) : null}
<label className="font-bold mt-4">Namespaces</label> <label className="mt-4 font-bold">Namespaces</label>
{namespaces {namespaces
?.sort((a, b) => a.name.localeCompare(b.name)) ?.sort((a, b) => a.name.localeCompare(b.name))
?.map((namespace) => ( ?.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 <input
type="checkbox" type="checkbox"
id={namespace.name} id={namespace.name}

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

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

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

@@ -80,7 +80,7 @@ export default function InstalledPackageCard({
ref={ref} ref={ref}
className={`${ className={`${
borderLeftColor[release.status] 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" isMouseOver && "custom-shadow-lg"
}`} }`}
onMouseOver={handleMouseOver} onMouseOver={handleMouseOver}
@@ -90,31 +90,31 @@ export default function InstalledPackageCard({
<img <img
src={release.icon || HelmGrayIcon} src={release.icon || HelmGrayIcon}
alt="helm release icon" 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="col-span-11 -mb-5">
<div className="grid grid-cols-11"> <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} {release.name}
</div> </div>
<div className="col-span-3"> <div className="col-span-3">
<StatusLabel status={release.status} /> <StatusLabel status={release.status} />
</div> </div>
<div className="col-span-2 font-bold">{release.chart}</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} #{release.revision}
</div> </div>
<div className="col-span-1 font-bold text-xs"> <div className="col-span-1 text-xs font-bold">
{release.namespace} {release.namespace}
</div> </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>
<div <div
className="grid grid-cols-11 text-xs mt-3" className="mt-3 grid grid-cols-11 text-xs"
style={{ marginBottom: "12px" }} 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} {release.description}
</div> </div>
<div className="col-span-3 mr-2"> <div className="col-span-3 mr-2">
@@ -124,11 +124,11 @@ export default function InstalledPackageCard({
<Spinner size={4} /> <Spinner size={4} />
)} )}
</div> </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> <span>CHART VERSION</span>
{(canUpgrade || installRepoSuggestion) && ( {(canUpgrade || installRepoSuggestion) && (
<div <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}`} title={`upgrade available: ${latestVersionData?.version} from ${latestVersionData?.repository}`}
> >
{canUpgrade && !installRepoSuggestion ? ( {canUpgrade && !installRepoSuggestion ? (

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

@@ -18,21 +18,21 @@ export default function InstalledPackagesHeader({
); );
return ( return (
<div className="custom-shadow rounded-t-md"> <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="flex items-center justify-between rounded-t-md bg-white px-2 py-0.5 font-inter">
<div className="flex items-center"> <div className="flex items-center">
<img <img
src={HeaderLogo} src={HeaderLogo}
alt="Helm-DashBoard" 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" numOfPackages || "0"
})`}</h2> })`}</h2>
</div> </div>
<div className="w-1/3"> <div className="w-1/3">
<input <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..." placeholder="Filter..."
type="text" type="text"
onChange={(ev) => setFilterKey(ev.target.value)} onChange={(ev) => setFilterKey(ev.target.value)}
@@ -41,7 +41,7 @@ export default function InstalledPackagesHeader({
</div> </div>
{showNoPackageAlert && ( {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. Looks like you don&apos;t have any charts installed.
&quot;Repository&quot; section may be a good place to start. &quot;Repository&quot; section may be a good place to start.
</div> </div>

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

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

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

@@ -6,7 +6,7 @@ import { useShutdownHelmDashboard } from "../API/other";
function ShutDownButton() { function ShutDownButton() {
const { mutate: signOut, status } = useShutdownHelmDashboard(); const { mutate: signOut, status } = useShutdownHelmDashboard();
const handleClick = async () => { const handleClick = () => {
signOut(); signOut();
}; };
@@ -22,7 +22,7 @@ function ShutDownButton() {
<button <button
onClick={handleClick} onClick={handleClick}
title="Shut down the Helm Dashboard application" 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" /> <BsPower className="w-6" />
</button> </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"> <div role="status">
<svg <svg
aria-hidden="true" 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" viewBox="0 0 100 101"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

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

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

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

@@ -17,15 +17,15 @@ export const Default = {
tabs: [ tabs: [
{ {
name: "tab1", 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", 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", 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", 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 { export default function TextInput(props: TextInputProps): JSX.Element {
return ( return (
<div className="mb-6"> <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} {props.label}
{/* if prop.isMandatory is true, add a whitespace and a red star to signify it*/} {/* if prop.isMandatory is true, add a whitespace and a red star to signify it*/}
{props.isMandatory ? <span className="text-red-500"> *</span> : ""} {props.isMandatory ? <span className="text-red-500"> *</span> : ""}
@@ -32,7 +32,7 @@ export default function TextInput(props: TextInputProps): JSX.Element {
<input <input
type="text" type="text"
placeholder={props.placeholder} 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> </div>
); );

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

@@ -20,7 +20,7 @@ export default function Tooltip({
<div <div
id={id} id={id}
role="tooltip" 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} {title}
<div className="tooltip-arrow" data-popper-arrow></div> <div className="tooltip-arrow" data-popper-arrow></div>
@@ -29,14 +29,14 @@ export default function Tooltip({
<button <button
data-tooltip-target="tooltip-default" data-tooltip-target="tooltip-default"
type="button" 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 Default tooltip
</button> </button>
<div <div
id="tooltip-default" id="tooltip-default"
role="tooltip" 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 Tooltip content
<div className="tooltip-arrow" data-popper-arrow></div> <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" target="_blank"
rel="noreferrer" 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 Troubleshoot in Komodor
<RiExternalLinkLine className="ml-2 text-lg" /> <RiExternalLinkLine className="ml-2 text-lg" />
</button> </button>

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

@@ -62,21 +62,21 @@ function DropDown({ items }: DropDownProps) {
Y: e.pageY, Y: e.pageY,
})); }));
}} }}
className="flex items-center justify-between cursor-pointer" className="flex cursor-pointer items-center justify-between"
> >
Help Help
<img src={ArrowDownIcon} className="ml-2 w-[10px] h-[10px]" /> <img src={ArrowDownIcon} className="ml-2 h-[10px] w-[10px]" />
</button> </button>
</div> </div>
{popupState.isOpen && ( {popupState.isOpen && (
<div <div
ref={modalRef} 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) => ( {items.map((item) => (
<Fragment key={item.id}> <Fragment key={item.id}>
{item.isSeparator ? ( {item.isSeparator ? (
<div className="bg-gray-300 h-[1px]" /> <div className="h-[1px] bg-gray-300" />
) : ( ) : (
<div <div
onClick={() => { onClick={() => {
@@ -86,9 +86,9 @@ function DropDown({ items }: DropDownProps) {
isOpen: false, 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 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", justifyContent: "space-between",
}} }}
> >
<span className={`${statusColor} font-bold text-xs`}> <span className={`${statusColor} text-xs font-bold`}>
● {status.toUpperCase()} ● {status.toUpperCase()}
</span> </span>
{isRollback && <AiOutlineReload size={14} />} {isRollback && <AiOutlineReload size={14} />}

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

@@ -80,10 +80,10 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
isOpen={isOpen} isOpen={isOpen}
onClose={onClose} onClose={onClose}
bottomContent={ 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 <button
data-cy="add-chart-repository-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} onClick={addRepository}
disabled={isLoading} disabled={isLoading}
> >
@@ -95,7 +95,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
> >
<div className="flex gap-x-3"> <div className="flex gap-x-3">
<label className="flex-1" htmlFor="name"> <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 <input
value={formData.name} value={formData.name}
onChange={(e) => onChange={(e) =>
@@ -109,11 +109,11 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
data-cy="add-chart-name" data-cy="add-chart-name"
type="text" type="text"
placeholder="Komodorio" 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>
<label className="flex-1" htmlFor="url"> <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 <input
value={formData.url} value={formData.url}
onChange={(e) => onChange={(e) =>
@@ -127,7 +127,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
data-cy="add-chart-url" data-cy="add-chart-url"
type="text" type="text"
placeholder="https://helm-charts.komodor.io" 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> </label>
</div> </div>
@@ -144,7 +144,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
required required
id="username" id="username"
type="text" 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>
<label className="flex-1" htmlFor="password"> <label className="flex-1" htmlFor="password">
@@ -159,7 +159,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
required required
id="password" id="password"
type="text" 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>
</div> </div>

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

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

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

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

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

@@ -11,13 +11,13 @@ export const ChartValues = ({
return ( return (
<div className="w-1/2"> <div className="w-1/2">
<label <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" htmlFor="grid-user-defined-values"
> >
Chart Value Reference: Chart Value Reference:
</label> </label>
<pre <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={ dangerouslySetInnerHTML={
chartValues && !loading chartValues && !loading
? { ? {

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

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

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

@@ -169,7 +169,7 @@ export const InstallReleaseChartModal = ({
window.location.reload(); window.location.reload();
}, },
onError: (error) => { 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`); navigate(`/${response.namespace}/${response.name}/installed/revision/1`);
}, },
onError: (error) => { 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"> <div className="font-bold">
{`${text}`} {`${text}`}
{(isUpgrade || releaseValues) && ( {(isUpgrade || releaseValues) && (
<span className="text-green-700 ml-1">{chartName}</span> <span className="ml-1 text-green-700">{chartName}</span>
)} )}
</div> </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) { if (isLoading && !error) {
return ( return (
<div className="flex text-lg items-end"> <div className="flex items-end text-lg">
<Spinner /> <Spinner />
Calculating diff... Calculating diff...
</div> </div>
@@ -47,7 +47,7 @@ export const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
<h4 className="text-xl">Manifest changes:</h4> <h4 className="text-xl">Manifest changes:</h4>
{error ? ( {error ? (
<p className="text-red-600 text-lg"> <p className="text-lg text-red-600">
Failed to get upgrade info: {error.toString()} Failed to get upgrade info: {error.toString()}
</p> </p>
) : diff ? ( ) : diff ? (

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

@@ -22,7 +22,7 @@ export const UserDefinedValues = ({
return ( return (
<div className="w-1/2"> <div className="w-1/2">
<label <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" htmlFor="grid-user-defined-values"
> >
User-Defined Values: User-Defined Values:
@@ -32,7 +32,7 @@ export const UserDefinedValues = ({
defaultValue={initialValue} defaultValue={initialValue}
onChange={(e) => setUserDefinedValues(e.target.value)} onChange={(e) => setUserDefinedValues(e.target.value)}
rows={14} 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> ></textarea>
</div> </div>
); );

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

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

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

@@ -71,7 +71,7 @@ const Modal = ({
const getTitle = (title: string | ReactNode) => { const getTitle = (title: string | ReactNode) => {
if (typeof title === "string") 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; else return title;
}; };
@@ -85,7 +85,7 @@ const Modal = ({
maxHeight: "95vh", maxHeight: "95vh",
overflow: "hidden", 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 && !containerClassNames.includes("bg-")) (containerClassNames && !containerClassNames.includes("bg-"))
? "bg-white" ? "bg-white"
@@ -93,17 +93,17 @@ const Modal = ({
} ${containerClassNames ?? ""}`} } ${containerClassNames ?? ""}`}
> >
{title && ( {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)} {getTitle(title)}
{onClose ? ( {onClose ? (
<button <button
type="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" data-modal-hide="staticModal"
onClick={() => onClose()} onClick={() => onClose()}
> >
<svg <svg
className="w-5 h-5" className="h-5 w-5"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -118,20 +118,20 @@ const Modal = ({
) : null} ) : null}
</div> </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} {children}
</div> </div>
{bottomContent ? ( {bottomContent ? (
<div className="p-5 text-sm">{bottomContent}</div> <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) => ( {actions?.map((action) => (
<button <button
key={action.id} key={action.id}
type="button" type="button"
className={ className={
action.isLoading action.isLoading
? `flex items-center font-bold justify-around gap-1 ${getClassName( ? `flex items-center justify-around gap-1 font-bold ${getClassName(
action action
)}` )}`
: `${getClassName(action)} ` : `${getClassName(action)} `

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

@@ -21,11 +21,11 @@ function ChartViewer({ chart }: ChartViewerProps) {
<> <>
<div <div
data-cy="chart-viewer-install-button" 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} onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut} 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" /> <img src={chart.icon} className="h-4" />
{chart.name} {chart.name}
</span> </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">{chart.version}</span>
<span className="col-span-1 text-center"> <span className="col-span-1 text-center">
<button <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" showInstallButton ? "visible" : "invisible"
}`} }`}
onClick={() => setShowInstallModal(true)} onClick={() => setShowInstallModal(true)}

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

@@ -30,7 +30,7 @@ function RepositoriesList({
return ( 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> <label className="font-bold">Repositories</label>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
{repositories?.map((repository) => ( {repositories?.map((repository) => (
@@ -60,7 +60,7 @@ function RepositoriesList({
data-cy="install-repository-button" data-cy="install-repository-button"
type="button" type="button"
style={{ marginTop: "10px" }} 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)} onClick={() => setShowAddRepositoryModal(true)}
> >
+ Add Repository + Add Repository
@@ -68,7 +68,7 @@ function RepositoriesList({
<p className="text-xs"> <p className="text-xs">
Charts developers: you can also add local directories as chart source. Charts developers: you can also add local directories as chart source.
Use{" "} 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. CLI switch to specify it.
</p> </p>
</div> </div>

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

@@ -75,7 +75,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
if (repository === undefined) { if (repository === undefined) {
return ( 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 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. one with the &quot;Add Repository&quot; button on the left side bar.
</div> </div>
@@ -83,10 +83,10 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
} }
return ( return (
<div className="flex flex-col p-6 gap-3 bg-white custom-shadow border rounded-md"> <div className="custom-shadow flex flex-col gap-3 rounded-md border bg-white p-6">
<span className="text-muted font-bold text-xs">REPOSITORY</span> <span className="text-xs font-bold text-muted">REPOSITORY</span>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-dark text-3xl font-semibold"> <span className="text-3xl font-semibold text-dark">
{repository?.name} {repository?.name}
</span> </span>
@@ -97,7 +97,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
update.mutate(); 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.isPending ? <Spinner size={4} /> : <BsArrowRepeat />}
Update Update
</span> </span>
@@ -107,7 +107,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
removeRepository(); 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 />} {isRemoveLoading ? <Spinner size={4} /> : <BsTrash3 />}
Remove Remove
</span> </span>
@@ -118,15 +118,15 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
value={searchValue} value={searchValue}
type="text" type="text"
placeholder="Filter..." 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>
</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> URL: <span className="font-bold">{repository?.url}</span>
</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-2">CHART NAME</span>
<span className="col-span-6">DESCRIPTION</span> <span className="col-span-6">DESCRIPTION</span>
<span className="col-span-1 text-center">VERSION</span> <span className="col-span-1 text-center">VERSION</span>
@@ -141,7 +141,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
)} )}
{showNoChartsAlert && ( {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 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. one with the &quot;Add Repository&quot; button on the left side bar.
</div> </div>

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

@@ -162,13 +162,13 @@ export default function RevisionDetails({
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<header className="flex flex-wrap justify-between"> <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} {chart}
</h1> </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"> <div className="flex flex-col">
<Button <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)} onClick={() => setIsReconfigureModalOpen(true)}
disabled={isLoadingLatestVersion || isRefetchingLatestVersion} 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}` `/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} Add repository for it: {latestVerData[0].repository}
</span> </span>
) : ( ) : (
<span <span
onClick={() => refetchLatestVersion()} onClick={() => refetchLatestVersion()}
className="underline cursor-pointer text-xs" className="cursor-pointer text-xs underline"
> >
Check for new version Check for new version
</span> </span>
@@ -230,7 +230,7 @@ export default function RevisionDetails({
{" "} {" "}
<Button <Button
onClick={handleRunTests} 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 /> <BsCheckCircle />
Run tests Run tests
@@ -242,7 +242,7 @@ export default function RevisionDetails({
onClose={() => setShowTestResults(false)} onClose={() => setShowTestResults(false)}
> >
{isRunningTests ? ( {isRunningTests ? (
<div className="flex mr-2 items-center"> <div className="mr-2 flex items-center">
<Spinner /> Waiting for completion.. <Spinner /> Waiting for completion..
</div> </div>
) : ( ) : (
@@ -263,10 +263,10 @@ export default function RevisionDetails({
: isNewerVersion(installedRevision.chart_ver, latestVerData?.[0]?.version); : isNewerVersion(installedRevision.chart_ver, latestVerData?.[0]?.version);
return ( 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} /> <StatusLabel status={release.status} />
<Header /> <Header />
<div className="flex flex-row gap-6 text-sm -mt-4"> <div className="-mt-4 flex flex-row gap-6 text-sm">
<span> <span>
Revision <span className="font-semibold">#{release.revision}</span> Revision <span className="font-semibold">#{release.revision}</span>
</span> </span>
@@ -306,7 +306,7 @@ export default function RevisionDetails({
function RevisionTag({ caption, text }: RevisionTagProps) { function RevisionTag({ caption, text }: RevisionTagProps) {
return ( 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>{caption}:</span>
<span className="font-bold"> {text}</span> <span className="font-bold"> {text}</span>
</span> </span>
@@ -352,7 +352,7 @@ const Rollback = ({
: revisionInt; : revisionInt;
const rollbackTitle = ( const rollbackTitle = (
<div className="font-semibold text-lg"> <div className="text-lg font-semibold">
Rollback <span className="text-red-500">{chart}</span> from revision{" "} Rollback <span className="text-red-500">{chart}</span> from revision{" "}
{installedRevision.revision} to {rollbackRevision} {installedRevision.revision} to {rollbackRevision}
</div> </div>
@@ -441,7 +441,7 @@ const Rollback = ({
<> <>
<Button <Button
onClick={handleRollback} 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 /> <BsArrowRepeat />
Rollback to #{rollbackRevision} Rollback to #{rollbackRevision}
@@ -470,7 +470,7 @@ const Uninstall = () => {
}, },
}); });
const uninstallTitle = ( const uninstallTitle = (
<div className="font-semibold text-lg"> <div className="text-lg font-semibold">
Uninstall <span className="text-red-500">{chart}</span> from namespace{" "} Uninstall <span className="text-red-500">{chart}</span> from namespace{" "}
<span className="text-red-500">{namespace}</span> <span className="text-red-500">{namespace}</span>
</div> </div>
@@ -480,7 +480,7 @@ const Uninstall = () => {
<> <>
<Button <Button
onClick={() => setIsOpen(true)} 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 /> <BsTrash3 />
Uninstall Uninstall
@@ -507,7 +507,7 @@ const Uninstall = () => {
key={ key={
resource.apiVersion + resource.kind + resource.metadata.name 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 <span
style={{ style={{

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

@@ -134,7 +134,7 @@ function RevisionDiff({
return ( return (
<div> <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"> <div className="flex items-center">
<input <input
checked={viewMode === "view"} checked={viewMode === "view"}
@@ -143,7 +143,7 @@ function RevisionDiff({
type="radio" type="radio"
value="view" value="view"
name="notes-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 <label
htmlFor="view" htmlFor="view"
@@ -160,7 +160,7 @@ function RevisionDiff({
type="radio" type="radio"
value="diff-with-previous" value="diff-with-previous"
name="notes-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 <label
htmlFor="diff-with-previous" htmlFor="diff-with-previous"
@@ -177,7 +177,7 @@ function RevisionDiff({
type="radio" type="radio"
value="diff-with-specific-revision" value="diff-with-specific-revision"
name="notes-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 <label
htmlFor="diff-with-specific-revision" htmlFor="diff-with-specific-revision"
@@ -186,7 +186,7 @@ function RevisionDiff({
<div> <div>
Diff with specific revision: Diff with specific revision:
<input <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" type="text"
value={specificVersion} value={specificVersion}
onChange={(e) => setSpecificVersion(Number(e.target.value))} onChange={(e) => setSpecificVersion(Number(e.target.value))}
@@ -201,7 +201,7 @@ function RevisionDiff({
type="checkbox" type="checkbox"
onChange={handleUserDefinedCheckbox} onChange={handleUserDefinedCheckbox}
checked={!!userDefinedValue} 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 <label
htmlFor="user-define-only-checkbox" htmlFor="user-define-only-checkbox"
@@ -214,8 +214,8 @@ function RevisionDiff({
</div> </div>
{isLoading ? <Spinner /> : ""} {isLoading ? <Spinner /> : ""}
{viewMode === VIEW_MODE_VIEW_ONLY && content ? ( {viewMode === VIEW_MODE_VIEW_ONLY && content ? (
<div className="bg-white overflow-x-auto w-full p-3 relative"> <div className="relative w-full overflow-x-auto bg-white p-3">
<pre className="bg-white rounded-sm font-sf-mono"> <pre className="rounded-sm bg-white font-sf-mono">
{parse(content)} {parse(content)}
</pre> </pre>
</div> </div>
@@ -223,7 +223,7 @@ function RevisionDiff({
"" ""
)} )}
<div <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 //@ts-ignore
ref={diffElement} ref={diffElement}
></div> ></div>

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

@@ -30,11 +30,11 @@ export default function RevisionResource({ isLatest }: Props) {
return ( return (
<table <table
cellPadding={6} 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> <tr>
<td className="pl-6 rounded-sm">RESOURCE TYPE</td> <td className="rounded-sm pl-6">RESOURCE TYPE</td>
<td>NAME</td> <td>NAME</td>
<td>STATUS</td> <td>STATUS</td>
<td>STATUS MESSAGE</td> <td>STATUS MESSAGE</td>
@@ -44,7 +44,7 @@ export default function RevisionResource({ isLatest }: Props) {
{isLoading ? ( {isLoading ? (
<Spinner /> <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?.length ? (
resources resources
.sort(function (a, b) { .sort(function (a, b) {
@@ -65,7 +65,7 @@ export default function RevisionResource({ isLatest }: Props) {
)) ))
) : ( ) : (
<tr> <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.{" "} Looks like you don&apos;t have any resources.{" "}
<RiExternalLinkLine className="ml-2 text-lg" /> <RiExternalLinkLine className="ml-2 text-lg" />
</div> </div>
@@ -99,14 +99,14 @@ const ResourceRow = ({
return ( return (
<> <>
<tr className="min-w-[100%] min-h[70px] text-sm py-2"> <tr className="min-h[70px] min-w-[100%] py-2 text-sm">
<td className="pl-6 rounded-sm text-sm font-normal w-48">{kind}</td> <td className="w-48 rounded-sm pl-6 text-sm font-normal">{kind}</td>
<td className="font-bold text-sm w-56">{name}</td> <td className="w-56 text-sm font-bold">{name}</td>
<td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td> <td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td>
<td className="rounded-sm text-gray-100"> <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 && ( {message && (
<div className="text-gray-500 font-thin">{message}</div> <div className="font-thin text-gray-500">{message}</div>
)} )}
{(badgeType === "error" || badgeType === "warning") && ( {(badgeType === "error" || badgeType === "warning") && (
<Troubleshoot /> <Troubleshoot />
@@ -115,7 +115,7 @@ const ResourceRow = ({
</td> </td>
<td className="rounded-sm"> <td className="rounded-sm">
{isLatest && reason !== "NotFound" ? ( {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}> <Button className="px-1 text-xs" onClick={toggleDrawer}>
Describe Describe
</Button> </Button>
@@ -171,10 +171,10 @@ const DescribeResource = ({
const badgeType = getBadgeType(status); const badgeType = getBadgeType(status);
return ( 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>
<div className="flex gap-3"> <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> <Badge type={badgeType}>{reason}</Badge>
</div> </div>
<p className="m-0 mt-4 font-inter text-sm font-normal">{kind}</p> <p className="m-0 mt-4 font-inter text-sm font-normal">{kind}</p>
@@ -183,7 +183,7 @@ const DescribeResource = ({
<div className="flex items-center gap-4 pr-4"> <div className="flex items-center gap-4 pr-4">
<a <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" 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" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
@@ -197,7 +197,7 @@ const DescribeResource = ({
aria-label="Close" aria-label="Close"
onClick={closeDrawer} onClick={closeDrawer}
> >
<img src={closeIcon} alt="close" className="w-[16px] h-[16px]" /> <img src={closeIcon} alt="close" className="h-[16px] w-[16px]" />
</button> </button>
</div> </div>
</div> </div>
@@ -207,7 +207,7 @@ const DescribeResource = ({
) : ( ) : (
<div className="h-full overflow-y-auto"> <div className="h-full overflow-y-auto">
<pre <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" }} style={{ overflow: "unset" }}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: yamlFormattedData, __html: yamlFormattedData,

6
frontend/src/components/revision/RevisionsList.tsx
View File

@@ -40,18 +40,18 @@ export default function RevisionsList({
} }
onClick={() => changeRelease(release.revision)} onClick={() => changeRelease(release.revision)}
key={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 release.revision === selectedRevision
? "border-revision-dark bg-white" ? "border-revision-dark bg-white"
: "border-revision-light bg-body-background" : "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} /> <StatusLabel status={release.status} isRollback={isRollback} />
<span className="font-bold">#{release.revision}</span> <span className="font-bold">#{release.revision}</span>
</div> </div>
<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={{ style={{
width: "100%", width: "100%",
display: "flex", display: "flex",

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

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

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

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

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

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

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

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

5
frontend/yarn.lock
View File

@@ -5265,6 +5265,11 @@ prettier-linter-helpers@^1.0.0:
dependencies: dependencies:
fast-diff "^1.1.2" 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: prettier@^3.0.0, prettier@^3.7.1:
version "3.7.1" version "3.7.1"
resolved "https://registry.npmjs.org/prettier/-/prettier-3.7.1.tgz" resolved "https://registry.npmjs.org/prettier/-/prettier-3.7.1.tgz"