Skip to content

Commit f1c9877

Browse files
mohammadllmohammadll
authored
Merge pull request #134 from MiladSadeghi/master
Fix UI/UX Issues in Docker Compose and Helm Template Pages
2 parents 8b5f0c1 + e3481c8 commit f1c9877

24 files changed

Lines changed: 500 additions & 351 deletions

‎web/src/components/form/form-input.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@ export const FormInput = ({
1111
isNumber,
1212
inputType,
1313
inputClass,
14+
showError = true,
1415
...props
1516
}: FormFieldProps) => {
17+
const { className, ...restProps } = props;
18+
1619
const {
1720
register,
1821
formState: { errors },
@@ -24,12 +27,12 @@ export const FormInput = ({
2427
return (
2528
<Form.Field
2629
className={cn('form-field relative', {
27-
'mb-6': errorMessage,
30+
'mb-6': errorMessage && showError,
2831
})}
2932
name={name}
3033
>
3134
{label && (
32-
<div className="flex items-baseline justify-between mb-1">
35+
<div className="mb-1 flex items-baseline justify-between">
3336
<Form.Label className="form-label">{label}</Form.Label>
3437
</div>
3538
)}
@@ -38,18 +41,18 @@ export const FormInput = ({
3841
type={inputType}
3942
className={cn(
4043
'w-full rounded-md border border-gray-500 px-3 py-2 outline-none transition-all focus:border-orange-base',
41-
props.className,
44+
inputClass,
4245
{
4346
'border-red-500 dark:border': errorMessage,
4447
},
4548
)}
4649
{...register(name, { ...(isNumber && { valueAsNumber: true }) })}
47-
{...props}
50+
{...restProps}
4851
/>
4952
</Form.Control>
50-
{errorMessage && (
53+
{showError && errorMessage && (
5154
<div className="absolute left-0 top-full">
52-
<Form.Message className="ml-auto text-sm text-red-500 form-message">
55+
<Form.Message className="form-message ml-auto text-sm text-red-500">
5356
{errorMessage}
5457
</Form.Message>
5558
</div>

‎web/src/hooks/useDownload.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const useDownload = ({
3030
document.body.appendChild(link);
3131
link.click();
3232
document.body.removeChild(link);
33+
URL.revokeObjectURL(link.href);
3334
}
3435
}, [isSuccess, data]);
3536

‎web/src/lib/helper.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,16 @@ export const getNestedValue = (obj: any, path: string) => {
55
};
66

77
export const convertKVtoObject = (
8-
kvArray: Array<{ key: string; value: string } | null>,
8+
kvArray: Array<{ key: string; value: string } | null> | null,
99
) => {
1010
return kvArray?.reduce(
1111
(acc, curr) => {
12-
1312
if (curr && acc) {
1413
acc[curr.key] = curr?.value;
15-
1614
}
1715
return acc;
1816
},
19-
{} as Record<string, string> | null,
17+
{} as { [key: string]: string } | null,
2018
);
2119
};
2220

‎web/src/pages/basic/basic.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { usePost } from '@/core/react-query';
55
import { BasicBody, BasicMessage, BasicResponse } from './basic.types';
66
import { API } from '@/enums/api.enums';
77
import { BeatLoader } from 'react-spinners';
8+
import { isAxiosError } from 'axios';
89

910
const Basic: FC = () => {
1011
const { mutateAsync } = usePost<BasicResponse, BasicBody>(API.Basic, 'basic');
@@ -54,16 +55,22 @@ const Basic: FC = () => {
5455
} catch (error) {
5556
console.log(error);
5657
setMessages((prev) => prev.slice(0, -1));
57-
toast.error('Something went wrong');
58+
if (isAxiosError(error)) {
59+
if (error.response?.data.detail) {
60+
toast.error(error.response.data.detail);
61+
} else {
62+
toast.error('Something went wrong');
63+
}
64+
}
5865
}
5966
};
6067

6168
return (
6269
<div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
6370
<div className="w-full max-w-[1024px]">
64-
<div className="w-full rounded-md p-2">
65-
<div className="flex h-full w-full items-center justify-center gap-3">
66-
<div className="flex w-full flex-col">
71+
<div className="w-full p-2 rounded-md">
72+
<div className="flex items-center justify-center w-full h-full gap-3">
73+
<div className="flex flex-col w-full">
6774
<label htmlFor="min_token" className="mb-2">
6875
Min Token
6976
</label>
@@ -72,10 +79,10 @@ const Basic: FC = () => {
7279
type="number"
7380
value={minToken}
7481
onChange={(e) => setMinToken(e.target.value)}
75-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
82+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
7683
/>
7784
</div>
78-
<div className="flex w-full flex-col">
85+
<div className="flex flex-col w-full">
7986
<label htmlFor="max_token" className="mb-2">
8087
Max Token
8188
</label>
@@ -84,10 +91,10 @@ const Basic: FC = () => {
8491
type="number"
8592
value={maxToken}
8693
onChange={(e) => setMaxToken(e.target.value)}
87-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
94+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
8895
/>
8996
</div>
90-
<div className="flex w-full flex-col">
97+
<div className="flex flex-col w-full">
9198
<label htmlFor="service" className="mb-2">
9299
Service
93100
</label>
@@ -96,7 +103,7 @@ const Basic: FC = () => {
96103
type="text"
97104
value={service}
98105
onChange={(e) => setService(e.target.value)}
99-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
106+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
100107
/>
101108
</div>
102109
</div>
@@ -107,14 +114,14 @@ const Basic: FC = () => {
107114
>
108115
{messages.map((message) =>
109116
message.role === 'user' ? (
110-
<div className="chat chat-end max-w-full">
111-
<div className="chat-bubble bg-gray-600 text-white">
117+
<div className="max-w-full chat chat-end">
118+
<div className="text-white bg-gray-600 chat-bubble">
112119
{message.content}
113120
</div>
114121
</div>
115122
) : (
116-
<div className="chat chat-start max-w-full">
117-
<div className="chat-bubble text-white">
123+
<div className="max-w-full chat chat-start">
124+
<div className="text-white chat-bubble">
118125
{message.loading ? (
119126
<BeatLoader color="#e3e3e3" size={10} />
120127
) : (
@@ -131,12 +138,12 @@ const Basic: FC = () => {
131138
value={input}
132139
onChange={(e) => setInput(e.target.value)}
133140
rows={2}
134-
className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
141+
className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
135142
/>
136143
<button
137144
disabled={!input}
138145
onClick={handleSendMessage}
139-
className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
146+
className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
140147
>
141148
<Send className="size-6 stroke-[#121212]" />
142149
</button>

‎web/src/pages/bug-fix/bug-fix.tsx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BugFixBody, BugFixMessage, BugFixResponse } from './bug-fix.types';
55
import { usePost } from '@/core/react-query';
66
import { toast } from 'sonner';
77
import { BeatLoader } from 'react-spinners';
8+
import { isAxiosError } from 'axios';
89

910
const BugFix: FC = () => {
1011
const { mutateAsync } = usePost<BugFixResponse, BugFixBody>(
@@ -57,18 +58,23 @@ const BugFix: FC = () => {
5758
),
5859
);
5960
} catch (error) {
60-
console.log(error);
6161
setMessages((prev) => prev.slice(0, -1));
62-
toast.error('Something went wrong');
62+
if (isAxiosError(error)) {
63+
if (error.response?.data.detail) {
64+
toast.error(error.response.data.detail);
65+
} else {
66+
toast.error('Something went wrong');
67+
}
68+
}
6369
}
6470
};
6571

6672
return (
6773
<div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
6874
<div className="w-full max-w-[1024px]">
69-
<div className="w-full rounded-md p-2">
70-
<div className="flex h-full w-full items-center justify-center gap-3">
71-
<div className="flex w-full flex-col">
75+
<div className="w-full p-2 rounded-md">
76+
<div className="flex items-center justify-center w-full h-full gap-3">
77+
<div className="flex flex-col w-full">
7278
<label htmlFor="min_token" className="mb-2">
7379
Min Token
7480
</label>
@@ -77,10 +83,10 @@ const BugFix: FC = () => {
7783
type="number"
7884
value={minToken}
7985
onChange={(e) => setMinToken(e.target.value)}
80-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
86+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
8187
/>
8288
</div>
83-
<div className="flex w-full flex-col">
89+
<div className="flex flex-col w-full">
8490
<label htmlFor="max_token" className="mb-2">
8591
Max Token
8692
</label>
@@ -89,10 +95,10 @@ const BugFix: FC = () => {
8995
type="number"
9096
value={maxToken}
9197
onChange={(e) => setMaxToken(e.target.value)}
92-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
98+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
9399
/>
94100
</div>
95-
<div className="flex w-full flex-col">
101+
<div className="flex flex-col w-full">
96102
<label htmlFor="service" className="mb-2">
97103
Service
98104
</label>
@@ -101,10 +107,10 @@ const BugFix: FC = () => {
101107
type="text"
102108
value={service}
103109
onChange={(e) => setService(e.target.value)}
104-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
110+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
105111
/>
106112
</div>
107-
<div className="flex w-full flex-col">
113+
<div className="flex flex-col w-full">
108114
<label htmlFor="version" className="mb-2">
109115
Version
110116
</label>
@@ -113,7 +119,7 @@ const BugFix: FC = () => {
113119
type="text"
114120
value={version}
115121
onChange={(e) => setVersion(e.target.value)}
116-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
122+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
117123
/>
118124
</div>
119125
</div>
@@ -124,14 +130,14 @@ const BugFix: FC = () => {
124130
>
125131
{messages.map((message) =>
126132
message.role === 'user' ? (
127-
<div className="chat chat-end max-w-full">
128-
<div className="chat-bubble bg-gray-600 text-white">
133+
<div className="max-w-full chat chat-end">
134+
<div className="text-white bg-gray-600 chat-bubble">
129135
{message.content}
130136
</div>
131137
</div>
132138
) : (
133-
<div className="chat chat-start max-w-full">
134-
<div className="chat-bubble text-white">
139+
<div className="max-w-full chat chat-start">
140+
<div className="text-white chat-bubble">
135141
{message.loading ? (
136142
<BeatLoader color="#e3e3e3" size={10} />
137143
) : (
@@ -148,12 +154,12 @@ const BugFix: FC = () => {
148154
value={bugDescription}
149155
onChange={(e) => setBugDescription(e.target.value)}
150156
rows={2}
151-
className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
157+
className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
152158
/>
153159
<button
154160
disabled={!bugDescription}
155161
onClick={handleSendMessage}
156-
className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
162+
className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
157163
>
158164
<Send className="size-6 stroke-[#121212]" />
159165
</button>

‎web/src/pages/docker-compose/components/network-fields.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FormInput } from '@/components/form/form-input';
55
import { FormCheckbox } from '@/components/form/form-checkbox';
66
import { FormSelect } from '@/components/form/form-select';
77

8-
const defaultNetworkDrivers = ['bridge', 'host', 'none', 'overlay'] as const;
8+
const defaultNetworkDrivers = ['Bridge', 'Host', 'None', 'Overlay'] as const;
99

1010
const NetworkFields: FC = () => {
1111
const { control, watch } = useFormContext();
@@ -15,7 +15,7 @@ const NetworkFields: FC = () => {
1515
name: 'networks.app_network',
1616
});
1717

18-
const customNetwork = watch('networks.custom');
18+
const customNetwork = watch('networks.external_network');
1919

2020
const handleRemoveNetwork = (index: number) => {
2121
remove(index);
@@ -25,13 +25,12 @@ const NetworkFields: FC = () => {
2525
const networkData = customNetwork
2626
? {
2727
network_name: '',
28-
external: false,
2928
name: '',
3029
}
3130
: {
3231
network_name: '',
3332
driver: {
34-
label: 'bridge',
33+
label: 'Bridge',
3534
value: 'bridge',
3635
},
3736
};
@@ -52,11 +51,14 @@ const NetworkFields: FC = () => {
5251
Add <Plus className="size-3" />
5352
</button>
5453
</div>
55-
<FormCheckbox label="Custom" name="networks.custom" />
54+
<FormCheckbox
55+
label="External Network"
56+
name="networks.external_network"
57+
/>
5658
</div>
5759

5860
<div className="space-y-4">
59-
<div className="w-full rounded-md border border-gray-500 p-5">
61+
<div className="flex w-full flex-col gap-4 rounded-md border border-gray-500 p-5">
6062
{fields.map((field, index) => (
6163
<div key={field.id} className="mb-4">
6264
<div className="mb-4 flex items-center justify-between">
@@ -72,19 +74,12 @@ const NetworkFields: FC = () => {
7274
</div>
7375

7476
<div>
75-
{customNetwork && (
76-
<div className="mb-2 flex justify-end">
77-
<FormCheckbox
78-
name={`networks.app_network.${index}.external`}
79-
label="External Network"
80-
/>
81-
</div>
82-
)}
8377
<div className="flex items-center gap-3 [&>div]:flex-1">
8478
<FormInput
8579
name={`networks.app_network.${index}.network_name`}
8680
label="App Network"
8781
placeholder="network_name"
82+
showError={false}
8883
/>
8984
{!customNetwork && (
9085
<FormSelect
@@ -101,6 +96,7 @@ const NetworkFields: FC = () => {
10196
name={`networks.app_network.${index}.name`}
10297
label="Name"
10398
placeholder="Name"
99+
showError={false}
104100
/>
105101
)}
106102
</div>

0 commit comments

Comments
 (0)