@@ -95,6 +95,9 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
9595 const { id : propId = "" } = dataset || e ?. currentTarget . dataset || { } ;
9696 const property = propId ? properties . find ( ( p ) => p . id === propId ) : newProp ;
9797 if ( property ) {
98+ if ( ! property . key ) {
99+ return ;
100+ }
98101 const oldId = property . id ;
99102 const payload : PropertiesEditPayload = {
100103 id : entityId ,
@@ -104,13 +107,15 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
104107 if ( oldId && oldId != property . key ) {
105108 payload . deleted_properties = [ { key : oldId } ] ;
106109 }
107- dispatch ( createSendActionNameAction ( id , module , props . onEdit , payload ) ) ;
110+ if ( payload . properties ?. length || payload . deleted_properties ?. length ) {
111+ dispatch ( createSendActionNameAction ( id , module , props . onEdit , payload ) ) ;
112+ }
108113 }
109114 setNewProp ( ( np ) => ( { ...np , key : "" , value : "" } ) ) ;
110115 setFocusName ( "" ) ;
111116 }
112117 } ,
113- [ isDefined , props . onEdit , entityId , properties , newProp , id , dispatch , module , setFocusName , updateVars ]
118+ [ isDefined , props . onEdit , entityId , properties , newProp , id , dispatch , module , setFocusName , updateVars ] ,
114119 ) ;
115120 const cancelProperty = useCallback (
116121 ( e ?: MouseEvent < HTMLElement > , dataset ?: DOMStringMap ) => {
@@ -120,12 +125,12 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
120125 const property = entProperties . find ( ( [ key ] ) => key === propId ) ;
121126 property &&
122127 setProperties ( ( ps ) =>
123- ps . map ( ( p ) => ( p . id === property [ 0 ] ? { ...p , key : property [ 0 ] , value : property [ 1 ] } : p ) )
128+ ps . map ( ( p ) => ( p . id === property [ 0 ] ? { ...p , key : property [ 0 ] , value : property [ 1 ] } : p ) ) ,
124129 ) ;
125130 setFocusName ( "" ) ;
126131 }
127132 } ,
128- [ isDefined , entProperties , setFocusName ]
133+ [ isDefined , entProperties , setFocusName ] ,
129134 ) ;
130135
131136 const onKeyDown = useCallback (
@@ -142,7 +147,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
142147 }
143148 }
144149 } ,
145- [ editProperty , cancelProperty ]
150+ [ editProperty , cancelProperty ] ,
146151 ) ;
147152
148153 const deleteProperty = useCallback (
@@ -156,11 +161,11 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
156161 createSendActionNameAction ( id , module , props . onEdit , {
157162 id : entityId ,
158163 deleted_properties : [ property ] ,
159- } )
164+ } ) ,
160165 ) ;
161166 setFocusName ( "" ) ;
162167 } ,
163- [ props . onEdit , entityId , id , dispatch , module , properties , setFocusName ]
168+ [ props . onEdit , entityId , id , dispatch , module , properties , setFocusName ] ,
164169 ) ;
165170
166171 useEffect ( ( ) => {
@@ -170,7 +175,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
170175 id : k ,
171176 key : k ,
172177 value : v ,
173- } ) )
178+ } ) ) ,
174179 ) ;
175180 } , [ show , entProperties ] ) ;
176181
@@ -232,8 +237,9 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
232237 data-id = { property . id }
233238 onClick = { editProperty }
234239 size = "small"
240+ disabled = { ! property . key || ! isDefined }
235241 >
236- < CheckCircle color = "primary" />
242+ < CheckCircle color = { disableColor ( "primary" , ! property . key || ! isDefined ) } />
237243 </ IconButton >
238244 </ Tooltip >
239245 < Tooltip title = "Cancel" >
@@ -295,7 +301,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
295301 onClick = { onFocus }
296302 sx = { hoverSx }
297303 >
298- { active && focusName == "new-property" ? (
304+ { active && ! notEditableReason && focusName == "new-property" ? (
299305 < >
300306 < Grid size = { 4 } >
301307 < TextField
@@ -318,14 +324,21 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
318324 variant = "outlined"
319325 sx = { FieldNoMaxWidth }
320326 disabled = { ! isDefined }
321- slotProps = { { htmlInput : { onKeyDown, "data-enter" : true } } }
327+ slotProps = { { htmlInput : { onKeyDown, "data-enter" : true } } }
322328 />
323329 </ Grid >
324330 < Grid size = { 2 } container alignContent = "center" alignItems = "center" justifyContent = "center" >
325331 < Tooltip title = "Apply" >
326- < IconButton sx = { IconPaddingSx } onClick = { editProperty } size = "small" >
327- < CheckCircle color = "primary" />
328- </ IconButton >
332+ < span >
333+ < IconButton
334+ sx = { IconPaddingSx }
335+ onClick = { editProperty }
336+ size = "small"
337+ disabled = { ! newProp . key || ! isDefined }
338+ >
339+ < CheckCircle color = { disableColor ( "primary" , ! newProp . key || ! isDefined ) } />
340+ </ IconButton >
341+ </ span >
329342 </ Tooltip >
330343 < Tooltip title = "Cancel" >
331344 < IconButton sx = { IconPaddingSx } onClick = { cancelProperty } size = "small" >
0 commit comments