import { observer } from 'mobx-react' ; import TitledSection from '../../layout/titledSection' ; import * as React from 'react' ; import ScopeItem from './ScopeItem' ; import { CanaryScope } from '../../domain/Kayenta' ; import Row from 'react-bootstrap/Row' ; export const ScopesSection = observer ( ( { controlScope , experimentScope , updateCanaryScope , testingType , touch , touched , errors , hasTheRunButtonBeenClicked , handleAddNewExtendedScopeParam , handleExtendedScopeParamKeyChange , handleExtendedScopeParamValueChange , handleExtendedScopeParamDelete , controlExtendedScopes , experimentExtendedScopes } ) : JSX . Element => { return ( < TitledSection title = "Scopes" additionalClassname = "scopes" > < Row > < ScopeItem scopeType = "control" scope = { controlScope } updateCanaryScope = { updateCanaryScope } touch = { touch } errors = { errors } touched = { touched } hasTheRunButtonBeenClicked = { hasTheRunButtonBeenClicked } handleAddNewExtendedScopeParam = { handleAddNewExtendedScopeParam } handleExtendedScopeParamKeyChange = { handleExtendedScopeParamKeyChange } handleExtendedScopeParamValueChange = { handleExtendedScopeParamValueChange } handleExtendedScopeParamDelete = { handleExtendedScopeParamDelete } extendedScopeParameters = { controlExtendedScopes } / > < ScopeItem scopeType = "experiment" scope = { experimentScope } updateCanaryScope = { updateCanaryScope } disabled = { testingType === 'AA' } touch = { touch } errors = { errors } touched = { touched } hasTheRunButtonBeenClicked = { hasTheRunButtonBeenClicked } handleAddNewExtendedScopeParam = { handleAddNewExtendedScopeParam } handleExtendedScopeParamKeyChange = { handleExtendedScopeParamKeyChange } handleExtendedScopeParamValueChange = { handleExtendedScopeParamValueChange } handleExtendedScopeParamDelete = { handleExtendedScopeParamDelete } extendedScopeParameters = { experimentExtendedScopes } / > < /Row> < /TitledSection>); } ) ;