@@ -14,31 +14,38 @@ import {
1414 EuiDraggable ,
1515 EuiButton ,
1616 EuiToolTip ,
17+ euiDragDropReorder ,
18+ DragDropContextProps ,
1719} from '@elastic/eui' ;
1820import { i18n } from '@kbn/i18n' ;
1921import { css } from '@emotion/css' ;
20- import { cloneDeep } from 'lodash' ;
2122import React from 'react' ;
22- import { ALWAYS_CONDITION } from '../../../util/condition' ;
2323import { NestedView } from '../../nested_view' ;
24- import { useRoutingStateContext } from './hooks/routing_state' ;
2524import { CurrentStreamEntry } from './current_stream_entry' ;
2625import { NewRoutingStreamEntry } from './new_routing_stream_entry' ;
2726import { RoutingStreamEntry } from './routing_stream_entry' ;
27+ import {
28+ useStreamRoutingEvents ,
29+ useStreamsRoutingSelector ,
30+ } from './state_management/stream_routing_state_machine' ;
2831
2932export function ChildStreamList ( { availableStreams } : { availableStreams : string [ ] } ) {
30- const {
31- routingAppState : {
32- childUnderEdit,
33- selectChildUnderEdit,
34- childStreams,
35- onChildStreamDragEnd,
36- onChildStreamDragStart,
37- draggingChildStream,
38- hasChildStreamsOrderChanged,
39- } ,
40- definition,
41- } = useRoutingStateContext ( ) ;
33+ const { changeRule, createNewRule, editRule, reorderRules } = useStreamRoutingEvents ( ) ;
34+ const routingSnapshot = useStreamsRoutingSelector ( ( snapshot ) => snapshot ) ;
35+
36+ const { currentRuleId, definition, routing } = routingSnapshot . context ;
37+ const canCreateRoutingRules = routingSnapshot . can ( { type : 'routingRule.create' } ) ;
38+ const canReorderRoutingRules = routingSnapshot . can ( { type : 'routingRule.reorder' , routing } ) ;
39+ const canManageRoutingRules = definition . privileges . manage ;
40+ const shouldDisplayCreateButton = definition . privileges . simulate ;
41+
42+ const handlerItemDrag : DragDropContextProps [ 'onDragEnd' ] = ( { source, destination } ) => {
43+ if ( source && destination ) {
44+ const items = euiDragDropReorder ( routing , source . index , destination . index ) ;
45+ reorderRules ( items ) ;
46+ }
47+ } ;
48+
4249 return (
4350 < EuiFlexGroup
4451 direction = "column"
@@ -61,11 +68,11 @@ export function ChildStreamList({ availableStreams }: { availableStreams: string
6168 defaultMessage : 'Routing rules' ,
6269 } ) }
6370 </ EuiText >
64- { definition . privileges . simulate && (
71+ { shouldDisplayCreateButton && (
6572 < EuiFlexItem grow = { false } >
6673 < EuiToolTip
6774 content = {
68- ! definition . privileges . manage
75+ ! canManageRoutingRules
6976 ? i18n . translate ( 'xpack.streams.streamDetailRouting.rules.onlySimulate' , {
7077 defaultMessage :
7178 "You don't have sufficient privileges to create new streams, only simulate." ,
@@ -77,15 +84,8 @@ export function ChildStreamList({ availableStreams }: { availableStreams: string
7784 iconType = "plus"
7885 size = "s"
7986 data-test-subj = "streamsAppStreamDetailRoutingAddRuleButton"
80- onClick = { ( ) => {
81- selectChildUnderEdit ( {
82- isNew : true ,
83- child : {
84- destination : `${ definition . stream . name } ,
85- if : cloneDeep ( ALWAYS_CONDITION ) ,
86- } ,
87- } ) ;
88- } }
87+ onClick = { createNewRule }
88+ disabled = { ! canCreateRoutingRules }
8989 >
9090 { i18n . translate ( 'xpack.streams.streamDetailRouting.addRule' , {
9191 defaultMessage : 'Create child stream' ,
@@ -104,56 +104,40 @@ export function ChildStreamList({ availableStreams }: { availableStreams: string
104104 ` }
105105 >
106106 < CurrentStreamEntry definition = { definition } />
107- < EuiDragDropContext onDragEnd = { onChildStreamDragEnd } onDragStart = { onChildStreamDragStart } >
107+ < EuiDragDropContext onDragEnd = { handlerItemDrag } >
108108 < EuiDroppable droppableId = "routing_children_reordering" spacing = "none" >
109109 < EuiFlexGroup direction = "column" gutterSize = "xs" >
110- { childStreams . map ( ( child , i ) => (
111- < EuiFlexItem key = { ` ${ child . destination } - ${ i } -flex-item` } grow = { false } >
110+ { routing . map ( ( routingRule , pos ) => (
111+ < EuiFlexItem key = { routingRule . id } grow = { false } >
112112 < EuiDraggable
113- key = { child . destination }
114- index = { i }
115- isDragDisabled = { ! definition . privileges . manage }
116- draggableId = { child . destination }
113+ index = { pos }
114+ isDragDisabled = { ! canReorderRoutingRules }
115+ draggableId = { routingRule . id }
117116 hasInteractiveChildren = { true }
118117 customDragHandle = { true }
119118 spacing = "none"
120119 >
121- { ( provided ) => (
120+ { ( provided , snapshot ) => (
122121 < NestedView
123- key = { i }
124- last = { ! childUnderEdit ?. isNew && i === childStreams . length - 1 }
125- isBeingDragged = { draggingChildStream === child . destination }
122+ last = { pos === routing . length - 1 }
123+ isBeingDragged = { snapshot . isDragging }
126124 >
127- < RoutingStreamEntry
128- draggableProvided = { provided }
129- disableEditButton = {
130- hasChildStreamsOrderChanged || ! definition . privileges . manage
131- }
132- child = {
133- ! childUnderEdit ?. isNew &&
134- child . destination === childUnderEdit ?. child . destination
135- ? childUnderEdit . child
136- : child
137- }
138- edit = {
139- ! childUnderEdit ?. isNew &&
140- child . destination === childUnderEdit ?. child . destination
141- }
142- onEditStateChange = { ( ) => {
143- if ( child . destination === childUnderEdit ?. child . destination ) {
144- selectChildUnderEdit ( undefined ) ;
145- } else {
146- selectChildUnderEdit ( { isNew : false , child } ) ;
147- }
148- } }
149- onChildChange = { ( newChild ) => {
150- selectChildUnderEdit ( {
151- isNew : false ,
152- child : newChild ,
153- } ) ;
154- } }
155- availableStreams = { availableStreams }
156- />
125+ { routingRule . isNew ? (
126+ < NewRoutingStreamEntry />
127+ ) : (
128+ < RoutingStreamEntry
129+ availableStreams = { availableStreams }
130+ draggableProvided = { provided }
131+ isEditing = { currentRuleId === routingRule . id }
132+ isEditingEnabled = { routingSnapshot . can ( {
133+ type : 'routingRule.edit' ,
134+ id : routingRule . id ,
135+ } ) }
136+ onChange = { changeRule }
137+ onEditIconClick = { editRule }
138+ routingRule = { routingRule }
139+ />
140+ ) }
157141 </ NestedView >
158142 ) }
159143 </ EuiDraggable >
@@ -162,23 +146,6 @@ export function ChildStreamList({ availableStreams }: { availableStreams: string
162146 </ EuiFlexGroup >
163147 </ EuiDroppable >
164148 </ EuiDragDropContext >
165- { childUnderEdit ?. isNew && (
166- < NestedView last >
167- < NewRoutingStreamEntry
168- child = { childUnderEdit . child }
169- onChildChange = { ( newChild ) => {
170- if ( ! newChild ) {
171- selectChildUnderEdit ( undefined ) ;
172- return ;
173- }
174- selectChildUnderEdit ( {
175- isNew : true ,
176- child : newChild ,
177- } ) ;
178- } }
179- />
180- </ NestedView >
181- ) }
182149 </ EuiFlexGroup >
183150 </ EuiFlexGroup >
184151 ) ;
0 commit comments