Skip to content

Commit 6b07ce3

Browse files
mohammadllmohammadll
authored
Merge pull request #99 from MiladSadeghi/master
refactor(argocd): improve ArgoCD UI for better usability
2 parents bda80c4 + 31378f5 commit 6b07ce3

7 files changed

Lines changed: 169 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: 139 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,146 @@
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";
7+
import { AxiosResponse } from "axios";
88

99
const Argocd = () => {
10-
const { platform } = useFindPlatform(TerraformServices.ARGOCD);
10+
const [buttons, setButtons] = useState({
11+
auto_prune: false,
12+
self_heal: false,
13+
argocd_repository: false,
14+
application_depends_repository: false
15+
});
16+
17+
const [menus, setMenus] = useState({
18+
argocd_application: true,
19+
sync_policy: true
20+
});
21+
22+
const [error, setError] = useState(false);
23+
24+
const {data, isPending, isError, isSuccess, mutate} = useMutation<AxiosResponse, Error, {body: {argocd_application: {sync_policy: {auto_prune: boolean, self_heal: boolean}} | null, argocd_repository: boolean, application_depends_repository: boolean}}>({
25+
mutationKey: ["argocd"],
26+
mutationFn: async ({body}) => {
27+
await apiClient.post(Endpoints.POST_IAC_ARGOCD, {...body});
28+
return await apiClient.get(`${Endpoints.GET_DOWNLOAD_TERRAFORM}MyTerraform/argocd`, {responseType: "blob"});
29+
}
30+
})
31+
32+
useEffect(() => {
33+
if (isError) {
34+
setError(true);
35+
setTimeout(() => {
36+
setError(false);
37+
}, 3000);
38+
}
39+
}, [isError]);
40+
41+
useEffect(() => {
42+
if (isSuccess && data) {
43+
const blob = new Blob([data.data], { type: data.headers['content-type'] });
44+
const link = document.createElement('a');
45+
link.href = URL.createObjectURL(blob);
46+
link.download = "Argocd.zip";
47+
document.body.appendChild(link);
48+
link.click();
49+
document.body.removeChild(link);
50+
}
51+
}, [isSuccess, data])
52+
53+
useEffect(() => {
54+
if (!menus.argocd_application) {
55+
setButtons({
56+
...buttons,
57+
auto_prune: false,
58+
self_heal: false
59+
})
60+
}
61+
}, [menus])
62+
63+
const handleButtons = (button: keyof typeof buttons) => {
64+
setButtons({...buttons, [button]: !buttons[button]})
65+
}
66+
67+
const handleMenus = (menu: keyof typeof menus) => {
68+
setMenus({...menus, [menu]: !menus[menu]})
69+
}
70+
71+
const handleSubmit = async () => {
72+
const body = {
73+
argocd_application: (
74+
menus.argocd_application
75+
? {
76+
sync_policy: {
77+
auto_prune: buttons.auto_prune,
78+
self_heal: buttons.self_heal
79+
}
80+
}
81+
: null
82+
),
83+
argocd_repository: buttons.argocd_repository,
84+
application_depends_repository: buttons.application_depends_repository
85+
};
86+
87+
mutate({body})
88+
}
1189

1290
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
21-
}
22-
serviceName={platform.serviceName}
23-
/>
24-
)}
25-
</>
91+
<div className="flex flex-col items-center justify-center">
92+
<div className="w-full bg-orange-800 divide-y-2 divide-gray-300 rounded-md max-w-96">
93+
<div className="divide-y-2 divide-gray-300">
94+
<div className="flex items-center justify-between w-full px-4 py-2">
95+
<p>Argocd Application</p>
96+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
97+
'bg-[#5b6372] hover:bg-[#5b6372]': !menus.argocd_application,
98+
}) } checked={menus.argocd_application} onChange={() => {handleMenus("argocd_application")}} />
99+
</div>
100+
<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})}>
101+
<button className="flex items-center justify-between w-full py-2 pl-10 pr-4" onClick={() => handleMenus("sync_policy")}>
102+
<p>Sync Policy</p>
103+
<FaChevronDown className={cn('transition-all', {"rotate-180": menus.sync_policy})} />
104+
</button>
105+
<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})}>
106+
<div className="py-2 pl-16 pr-4">
107+
<div className="flex items-center justify-between">
108+
<p>Auto Prune</p>
109+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
110+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.auto_prune,
111+
}) } checked={buttons.auto_prune} onChange={() => handleButtons("auto_prune")} />
112+
</div>
113+
</div>
114+
<div className="py-2 pl-16 pr-4">
115+
<div className="flex items-center justify-between">
116+
<p>Self Heal</p>
117+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
118+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.self_heal,
119+
}) } checked={buttons.self_heal} onChange={() => handleButtons("self_heal")} />
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
<div className="px-4 py-2">
125+
<div className="flex items-center justify-between">
126+
<p>Argocd Repository</p>
127+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
128+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.argocd_repository,
129+
}) } checked={buttons.argocd_repository} onChange={() => handleButtons("argocd_repository")} />
130+
</div>
131+
</div>
132+
<div className="px-4 py-2">
133+
<div className="flex items-center justify-between">
134+
<p>Application Depends Repository</p>
135+
<input type="checkbox" className={cn('border-orange-[#2e323a] toggle [--tglbg:#2e323a] bg-orange-300 hover:bg-orange-400', {
136+
'bg-[#5b6372] hover:bg-[#5b6372]': !buttons.application_depends_repository,
137+
}) } checked={buttons.application_depends_repository} onChange={() => handleButtons("application_depends_repository")} />
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
<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>
143+
</div>
26144
);
27145
};
28146

‎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)