@@ -23,19 +23,6 @@ type NotificationsConfigProps = {
2323 handleModelChange : ( model : ICreateJobModel ) => void ;
2424} ;
2525
26- type NotificationEventsSelectProps = {
27- id : string ;
28- availableEvents : string [ ] ;
29- selectChange : ( e : SelectChangeEvent < string > ) => void ;
30- disabled : boolean ;
31- } ;
32-
33- type SelectedEventsChipsProps = {
34- selectedEvents : string [ ] ;
35- deleteSelectedEvent : ( eventToDelete : string ) => ( ) => void ;
36- disabled : boolean ;
37- } ;
38-
3926export function NotificationsConfig (
4027 props : NotificationsConfigProps
4128) : JSX . Element | null {
@@ -169,15 +156,15 @@ export function NotificationsConfig(
169156 />
170157 < NotificationEventsSelect
171158 id = { props . id }
172- availableEvents = { props . notificationEvents . filter (
159+ value = { props . notificationEvents . filter (
173160 e => ! selectedEvents . includes ( e )
174161 ) }
175- selectChange = { selectChange }
162+ onChange = { selectChange }
176163 disabled = { ! enableNotification }
177164 />
178165 < SelectedEventsChips
179- selectedEvents = { selectedEvents }
180- deleteSelectedEvent = { deleteSelectedEvent }
166+ value = { selectedEvents }
167+ onChange = { deleteSelectedEvent }
181168 disabled = { ! enableNotification }
182169 />
183170 < FormControlLabel
@@ -194,6 +181,13 @@ export function NotificationsConfig(
194181 ) ;
195182}
196183
184+ type NotificationEventsSelectProps = {
185+ id : string ;
186+ value : string [ ] ;
187+ onChange : ( e : SelectChangeEvent < string > ) => void ;
188+ disabled : boolean ;
189+ } ;
190+
197191function NotificationEventsSelect ( props : NotificationEventsSelectProps ) {
198192 const trans = useTranslator ( 'jupyterlab' ) ;
199193 const label = trans . __ ( 'Notification Events' ) ;
@@ -208,10 +202,10 @@ function NotificationEventsSelect(props: NotificationEventsSelectProps) {
208202 labelId = { labelId }
209203 id = { props . id }
210204 label = { label }
211- onChange = { props . selectChange }
205+ onChange = { props . onChange }
212206 disabled = { props . disabled }
213207 >
214- { props . availableEvents . map ( e => (
208+ { props . value . map ( e => (
215209 < MenuItem key = { e } value = { e } >
216210 { e }
217211 </ MenuItem >
@@ -221,15 +215,21 @@ function NotificationEventsSelect(props: NotificationEventsSelectProps) {
221215 ) ;
222216}
223217
218+ type SelectedEventsChipsProps = {
219+ value : string [ ] ;
220+ onChange : ( eventToDelete : string ) => ( ) => void ;
221+ disabled : boolean ;
222+ } ;
223+
224224function SelectedEventsChips ( props : SelectedEventsChipsProps ) {
225225 return (
226226 < Cluster gap = { 3 } justifyContent = "flex-start" >
227- { props . selectedEvents . map ( e => (
227+ { props . value . map ( e => (
228228 < Chip
229229 key = { e }
230230 label = { e }
231231 variant = "outlined"
232- onDelete = { props . deleteSelectedEvent ( e ) }
232+ onDelete = { props . onChange ( e ) }
233233 disabled = { props . disabled }
234234 />
235235 ) ) }
0 commit comments