import * as React from 'react' ; import { observer } from 'mobx-react' ; import TitledSection from '../../layout/titledSection' ; import { TextInputGroup } from '../../layout/TextInputGroup' ; import './NameAndDescriptionSection.scss' ; import { SelectInputGroup } from '../../layout/SelectInputGroup' ; import { metricSourceTypes } from '../../metricSources' ; export const NameAndDescriptionSection = observer ( ( { metricSourceType , name , description , updateMetricSourceType , updateConfigName , updateConfigDescription , touch , touched , errors , hasTheCopyOrSaveButtonBeenClicked , hasConfiguredMetrics } ) : JSX . Element => { return ( < TitledSection title = "Metadata" additionalClassname = "name-and-description" > < SelectInputGroup options = { metricSourceTypes ( ) } name = "metric-source-type" label = "Metric Source Type" value = { metricSourceType } onChange = { ( value ) => { updateMetricSourceType ( value ) ; } } disabled = { hasConfiguredMetrics } disabledMessage = "You must delete all metrics from the metrics section to change the metric source type" onBlur = { ( ) => { touch ( 'metricSourceType' ) ; } } touched = { touched [ 'metricSourceType' ] } error = { errors [ 'metricSourceType' ] } / > < TextInputGroup name = "config-name" label = "Configuration Name" value = { name } tooltipHeader = "Name" tooltipText = "Text name for your configuration. This name will later be part of the path to your canary config file." onChange = { ( e ) => { updateConfigName ( e . target . value ) ; } } onBlur = { ( ) => { touch ( 'metricGroupName' ) ; } } touched = { touched [ 'metricGroupName' ] || hasTheCopyOrSaveButtonBeenClicked } error = { errors [ 'metricGroupName' ] } / > < TextInputGroup name = "config-description" label = "Configuration Description" value = { description } tooltipHeader = "Description" tooltipText = "Text description of what this configuration will be used for." area = { true } rows = { 1 } onChange = { ( e ) => { updateConfigDescription ( e . target . value ) ; } } onBlur = { ( ) => { touch ( 'description' ) ; } } touched = { touched [ 'description' ] || hasTheCopyOrSaveButtonBeenClicked } error = { errors [ 'description' ] } / > < /TitledSection>); } ) ;