@@ -32,6 +32,8 @@ interface IQueryEngineProps {
32
32
}
33
33
34
34
const QueryEngineEdit : React . FC < IQueryEngineProps > = ( { token } ) => {
35
+ const [ isModalOpen , setIsModalOpen ] = useState ( false ) ;
36
+ const [ activeJob , setActiveJob ] = useState ( false )
35
37
const [ formError , setFormError ] = useState ( false )
36
38
const [ formSubmitted , setFormSubmitted ] = useState ( false )
37
39
const [ deleting , setDeleting ] = useState ( false )
@@ -45,10 +47,20 @@ const QueryEngineEdit: React.FC<IQueryEngineProps> = ({ token }) => {
45
47
46
48
const [ queryEngines , setQueryEngines ] = useState < QueryEngine [ ] > ( [ ] )
47
49
const [ queryEngine , setQueryEngine ] = useState < QueryEngine | null > ( null )
48
-
49
50
const [ createEngineIsMultimodal , setCreateEngineIsMultimodal ] = useState ( false )
50
51
const [ createEngineEmbeddingOptions , setCreateEngineEmbeddingOptions ] = useState < { option : string ; value : string ; } [ ] > ( [ ] )
51
52
53
+ const openDeleteModal = ( ) => {
54
+ setIsModalOpen ( true )
55
+ const modalToggle = document . getElementById ( 'delete-queryEngine-modal' )
56
+ modalToggle . checked = true
57
+ }
58
+ const closeDeleteModal = ( ) => {
59
+ setIsModalOpen ( false )
60
+ const modalToggle = document . getElementById ( 'delete-queryEngine-modal' )
61
+ modalToggle . checked = false
62
+ }
63
+
52
64
const { isLoading, data : engineList } = useQuery (
53
65
[ "QueryEngines" ] ,
54
66
fetchAllEngines ( token ) ,
@@ -123,8 +135,9 @@ const QueryEngineEdit: React.FC<IQueryEngineProps> = ({ token }) => {
123
135
124
136
const deleteQueryEngineDetails = async ( ) => {
125
137
if ( ! queryEngine ) throw new Error ( "No id of queryEngine to delete" )
126
- setDeleting ( true )
127
138
139
+ setDeleting ( true )
140
+ setActiveJob ( true )
128
141
deleteQEngine . mutate (
129
142
queryEngine ,
130
143
{
@@ -136,13 +149,24 @@ const QueryEngineEdit: React.FC<IQueryEngineProps> = ({ token }) => {
136
149
durationMs : 4000 ,
137
150
} )
138
151
}
152
+ setDeleting ( false )
153
+ setActiveJob ( false )
154
+ closeDeleteModal ( )
155
+ navigate ( "/queryengines" )
139
156
} ,
140
157
onError : ( ) => {
141
- // TODO
158
+ setAlert ( {
159
+ message : "Error occurred deleting" ,
160
+ type : ALERT_TYPE . ERROR ,
161
+ durationMs : 4000 ,
162
+ } )
163
+ setDeleting ( false )
164
+ setActiveJob ( false )
165
+ closeDeleteModal ( )
166
+ navigate ( "/queryengines/admin" )
142
167
}
143
168
}
144
169
)
145
- navigate ( "/queryengines/admin" )
146
170
}
147
171
148
172
useEffect ( ( ) => {
@@ -204,12 +228,9 @@ const QueryEngineEdit: React.FC<IQueryEngineProps> = ({ token }) => {
204
228
View Details
205
229
</ button >
206
230
</ Link >
207
- < label
208
- htmlFor = "delete-queryEngine-modal"
209
- className = "absolute right-0 top-0 z-10"
210
- >
231
+ < button className = "absolute right-0 top-0 z-10" onClick = { openDeleteModal } >
211
232
< TrashIcon className = "text-dim hover:text-normal w-8 cursor-pointer text-error transition" />
212
- </ label >
233
+ </ button >
213
234
</ >
214
235
) }
215
236
< div className = "flex flex-col" >
@@ -247,9 +268,12 @@ const QueryEngineEdit: React.FC<IQueryEngineProps> = ({ token }) => {
247
268
</ h3 >
248
269
< p className = "py-4" > This action cannot be undone</ p >
249
270
< div className = "modal-action" >
250
- < label htmlFor = "delete-queryEngine-modal" className = "btn btn-outline" >
271
+ { activeJob && (
272
+ < i className = "i-svg-spinners-180-ring text-info group-hover:text-base-content/100 transition h-6 w-6 shrink-0" > </ i >
273
+ ) }
274
+ < button className = "btn btn-outline" onClick = { closeDeleteModal } >
251
275
Cancel
252
- </ label >
276
+ </ button >
253
277
< button
254
278
className = "btn btn-error"
255
279
disabled = { deleting }
0 commit comments