Skip to content

Commit 94c0a5c

Browse files
MiladSadeghiMiladSadeghi
committed
refactor(argocd): improve ArgoCD UI for better usability
1 parent ce8a660 commit 94c0a5c

7 files changed

Lines changed: 152 additions & 41 deletions

File tree

‎web/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@emotion/react": "^11.13.3",
1515
"@tanstack/react-query": "^5.59.19",
1616
"axios": "^1.7.7",
17+
"clsx": "^2.1.1",
1718
"i": "^0.3.7",
1819
"next-themes": "^0.4.3",
1920
"npm": "^10.9.0",
@@ -22,6 +23,7 @@
2223
"react-hook-form": "^7.53.2",
2324
"react-icons": "^5.3.0",
2425
"react-router-dom": "^6.27.0",
26+
"tailwind-merge": "^2.5.5",
2527
"uuid": "^11.0.3",
2628
"zustand": "^5.0.1"
2729
},

‎web/pnpm-lock.yaml‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/src/components/internal-ui/PlatformBox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface PlatformProps<FormData, RequestData> {
1212
mapperFunction: (data: FormData) => RequestData;
1313
}
1414

15-
const PlatformBox = <FormData extends {}, RequestData extends {}>({
15+
const PlatformBox = <FormData extends object, RequestData extends object>({
1616
serviceName,
1717
defaultValues,
1818
endpoint,
@@ -36,7 +36,7 @@ const PlatformBox = <FormData extends {}, RequestData extends {}>({
3636
<div className="flex flex-col ">
3737
<FormProvider {...formMethods}>
3838
<form onSubmit={handleFormSubmit}>
39-
<div className="flex flex-col justify-between w-full border items-center gap-y-5 border-orange-300 p-8">
39+
<div className="flex flex-col items-center justify-between w-full p-8 border border-orange-300 gap-y-5">
4040
<HStack lg={{ gap: 5 }} md={{ gap: 3 }}>
4141
<p className="font-bold">{serviceName}: </p>
4242
{fieldProperties.map((field) => (

‎web/src/features/constants.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,8 @@ export enum TerraformIAMFields {
7575
export enum TerraformArgocdFields {
7676
AUTO_PRUNE = "autoPrune",
7777
SELF_HEAL = "selfHeal",
78-
APPLY_OUT_OF_SYNC_ONLY = "applyOutOfSyncOnly",
79-
CREATE_NAMESPACE = "createNamespace",
80-
FAIL_OR_SHARE_RESOURCE = "failOrShareResource",
8178
ARGOCD_REPOSITORY = "argocdRepository",
82-
ARGOCD_CLUSTER = "argocdCluster",
79+
APPLICATION_DEPENDS_REPOSITORY = "applicationDependsRepository",
8380
}
8481

8582
export enum UserType {

‎web/src/features/terraform/components/Argocd.tsx‎

Lines changed: 122 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,129 @@
1-
import PlatformBox from "../../../components/internal-ui/PlatformBox";
2-
import useFindPlatform from "../../../hooks/useFindPlatform";
3-
import { TerraformServices } from "../../constants";
4-
import {
5-
ApiRequestTerraformArgocd,
6-
TerraformArgocdFormData,
7-
} from "../../models";
1+
import { useEffect, useState } from "react";
2+
import { cn } from "../../../utils/tailwind";
3+
import { FaChevronDown } from "react-icons/fa";
4+
import apiClient from "../../../utils/apiClient";
5+
import { Endpoints } from "../../constants";
6+
import { useMutation } from "@tanstack/react-query";
87

98
const Argocd = () => {
10-
const { platform } = useFindPlatform(TerraformServices.ARGOCD);
9+
const [buttons, setButtons] = useState({
10+
auto_prune: false,
11+
self_heal: false,
12+
argocd_repository: false,
13+
application_depends_repository: false
14+
});
1115

12-
return (
13-
<>
14-
{platform && (
15-
<PlatformBox
16-
defaultValues={platform.defaultValues as TerraformArgocdFormData}
17-
endpoint={platform.endpoint}
18-
fieldProperties={platform.fieldProperties}
19-
mapperFunction={
20-
platform.mapperFunction as () => ApiRequestTerraformArgocd
16+
const [menus, setMenus] = useState({
17+
argocd_application: false,
18+
sync_policy: false
19+
});
20+
21+
const [error, setError] = useState(false);
22+
23+
const {data, isPending, isError, isSuccess, mutate} = useMutation<{output: string}, Error, {body: {argocd_application: {sync_policy: {auto_prune: boolean, self_heal: boolean}}, argocd_repository: boolean, application_depends_repository: boolean}}>({
24+
mutationKey: ["argocd"],
25+
mutationFn: async ({body}) => {
26+
return await apiClient.post(Endpoints.POST_IAC_ARGOCD, {...body});
27+
}
28+
})
29+
30+
useEffect(() => {
31+
if (isError) {
32+
setError(true);
33+
setTimeout(() => {
34+
setError(false);
35+
}, 3000);
36+
}
37+
}, [isError]);
38+
39+
useEffect(() => {
40+
if (isSuccess && data) {
41+
const {output} = data;
42+
const link = document.createElement('a');
43+
link.href = output;
44+
document.body.appendChild(link);
45+
link.click();
46+
47+
document.body.removeChild(link);
48+
49+
}
50+
}, [isSuccess, data])
51+
52+
const handleButtons = (button: keyof typeof buttons) => {
53+
setButtons({...buttons, [button]: !buttons[button]})
54+
}
55+
56+
const handleMenus = (menu: keyof typeof menus) => {
57+
setMenus({...menus, [menu]: !menus[menu]})
58+
}
59+
60+
const handleSubmit = async () => {
61+
const body = {
62+
"argocd_application": {
63+
"sync_policy": {
64+
"auto_prune": buttons.auto_prune,
65+
"self_heal": buttons.self_heal
2166
}
22-
serviceName={platform.serviceName}
23-
/>
24-
)}
25-
</>
67+
},
68+
"argocd_repository": buttons.argocd_repository,
69+
"application_depends_repository": buttons.application_depends_repository
70+
}
71+
72+
mutate({body})
73+
}
74+
75+
return (
76+
<div className="flex flex-col items-center justify-center">
77+
<div className="w-full bg-orange-800 divide-y-2 divide-gray-300 rounded-md max-w-96">
78+
<div className="divide-y-2 divide-gray-300">
79+
<button className="flex items-center justify-between w-full px-4 py-2" onClick={() => handleMenus("argocd_application")}>
80+
<p>Argocd Application</p>
81+
<FaChevronDown className={cn('transition-all', {"rotate-180": menus.argocd_application})} />
82+
</button>
83+
<div className={cn("divide-y-2 divide-gray-300 max-h-0 overflow-hidden transition-all ease-linear duration-300", {"max-h-96": !menus.argocd_application})}>
84+
<button className="flex items-center justify-between w-full py-2 pl-10 pr-4" onClick={() => handleMenus("sync_policy")}>
85+
<p>Sync Policy</p>
86+
<FaChevronDown className={cn('transition-all', {"rotate-180": menus.sync_policy})} />
87+
</button>
88+
<div className={cn("divide-y-2 divide-gray-300 max-h-0 overflow-hidden transition-all ease-linear duration-300", {"max-h-96": !menus.sync_policy})}>
89+
<div className="py-2 pl-16 pr-4">
90+
<div className="flex items-center justify-between">
91+
<p>Auto Prune</p>
92+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
93+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.auto_prune,
94+
}) } checked={buttons.auto_prune} onClick={() => handleButtons("auto_prune")} />
95+
</div>
96+
</div>
97+
<div className="py-2 pl-16 pr-4">
98+
<div className="flex items-center justify-between">
99+
<p>Self Heal</p>
100+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
101+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.self_heal,
102+
}) } checked={buttons.self_heal} onClick={() => handleButtons("self_heal")} />
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
<div className="px-4 py-2">
108+
<div className="flex items-center justify-between">
109+
<p>Argocd Repository</p>
110+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
111+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.argocd_repository,
112+
}) } checked={buttons.argocd_repository} onClick={() => handleButtons("argocd_repository")} />
113+
</div>
114+
</div>
115+
<div className="px-4 py-2">
116+
<div className="flex items-center justify-between">
117+
<p>Application Depends Repository</p>
118+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
119+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.application_depends_repository,
120+
}) } checked={buttons.application_depends_repository} onClick={() => handleButtons("application_depends_repository")} />
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
<button disabled={isPending} onClick={handleSubmit} className="w-full py-2 mt-4 text-center transition-all bg-orange-800 rounded-md btn max-w-96 hover:bg-orange-900">{isPending ? <div className="flex items-center justify-center gap-4 disabled:opacity-80"><span className="loading loading-spinner"></span>Loading</div>: error ? "Error" : "Submit"}</button>
126+
</div>
26127
);
27128
};
28129

‎web/src/features/terraform/constants.ts‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -81,25 +81,13 @@ const argocdFieldProperties: Checkboxprops[] = [
8181
fieldName: TerraformArgocdFields.SELF_HEAL,
8282
label: "Self heal",
8383
},
84-
{
85-
fieldName: TerraformArgocdFields.APPLY_OUT_OF_SYNC_ONLY,
86-
label: "Apply out of sync only",
87-
},
88-
{
89-
fieldName: TerraformArgocdFields.CREATE_NAMESPACE,
90-
label: "Create namespace",
91-
},
92-
{
93-
fieldName: TerraformArgocdFields.FAIL_OR_SHARE_RESOURCE,
94-
label: "Fail or share resource",
95-
},
9684
{
9785
fieldName: TerraformArgocdFields.ARGOCD_REPOSITORY,
9886
label: "ARGOCD repository",
9987
},
10088
{
101-
fieldName: TerraformArgocdFields.ARGOCD_CLUSTER,
102-
label: "ARGOCD cluster",
89+
fieldName: TerraformArgocdFields.APPLICATION_DEPENDS_REPOSITORY ,
90+
label: "Application depends repository",
10391
},
10492
];
10593

‎web/src/utils/tailwind.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import clsx, { ClassValue } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
3+
4+
export const cn = (...inputs: ClassValue[]) => {
5+
return twMerge(clsx(inputs));
6+
};

0 commit comments

Comments
 (0)