fix: prevent crash when multivalue is removed for condition (#41)

* fix: prevent crash when multivalue is removed for condition

* chore: fix paths

Author: Matt Mazzola

packages/ui/src/Utils/actionCondition.ts

@@ -5,6 +5,7 @@
 import * as CLM from '@conversationlearner/models'
 import * as OF from 'office-ui-fabric-react'
 import produce from 'immer'
+import { PreBuilts } from '../types'
 
 export interface IConditionalTag extends OF.ITag {
     condition: CLM.Condition | null
@@ -165,3 +166,24 @@ export const getUpdatedActionsUsingCondition = (actions: CLM.ActionBase[], exist
         return actionsUsingCondition
     }, [])
 }
+
+/**
+ * Given entity return true if entity can be used in condition false otherwise
+ */
+export const isEntityAllowedInCondition = (entity: CLM.EntityBase): boolean => {
+    if (entity.entityType === CLM.EntityType.ENUM) {
+        return true
+    }
+
+    if (entity.entityType === CLM.EntityType.LUIS
+        && entity.resolverType === PreBuilts.Number
+        && entity.isResolutionRequired === true) {
+        return true
+    }
+
+    if (entity.isMultivalue === true) {
+        return true
+    }
+
+    return false
+}

packages/ui/src/components/modals/ConditionModal.tsx

@@ -9,28 +9,9 @@ import * as CLM from '@conversationlearner/models'
 import { injectIntl, InjectedIntlProps } from 'react-intl'
 import { FM } from '../../react-intl-messages'
 import { Position } from 'office-ui-fabric-react/lib/utilities/positioning'
-import { PreBuilts } from 'src/types'
-import { conditionDisplay, convertConditionToConditionalTag, isConditionEqual } from '../../Utils/actionCondition'
+import { conditionDisplay, convertConditionToConditionalTag, isConditionEqual, isEntityAllowedInCondition } from '../../Utils/actionCondition'
 import './ConditionModal.css'
 
-const entityIsAllowedInCondition = (entity: CLM.EntityBase): boolean => {
-    if (entity.entityType === CLM.EntityType.ENUM) {
-        return true
-    }
-
-    if (entity.entityType === CLM.EntityType.LUIS
-        && entity.resolverType === PreBuilts.Number
-        && entity.isResolutionRequired === true) {
-        return true
-    }
-
-    if (entity.isMultivalue === true) {
-        return true
-    }
-
-    return false
-}
-
 interface EntityOption extends OF.IDropdownOption {
     data: CLM.EntityBase
 }
@@ -105,7 +86,7 @@ type Props = InjectedIntlProps
 const Component: React.FC<Props> = (props) => {
     // Entity Dropdown
     const entityOptions = props.entities
-        .filter(entityIsAllowedInCondition)
+        .filter(isEntityAllowedInCondition)
         .map(e => convertEntityToDropdownOption(e))
         .sort((a, b) => a.text.localeCompare(b.text))
 

packages/ui/src/components/modals/EntityCreatorEditor/EntityCreatorContainer.tsx

@@ -16,7 +16,7 @@ import { withRouter } from 'react-router-dom'
 import { RouteComponentProps } from 'react-router'
 import Component, { IEnumValueForDisplay } from './EntityCreatorComponent'
 import { autobind } from 'core-decorators'
-import { getUniqueConditions, getUpdatedActionsUsingCondition } from 'src/Utils/actionCondition'
+import { getUniqueConditions, getUpdatedActionsUsingCondition, isEntityAllowedInCondition } from 'src/Utils/actionCondition'
 import { NONE_RESOLVER_KEY } from '../../../types/const'
 
 const entityNameMaxLength = 30
@@ -29,6 +29,7 @@ const initState: ComponentState = {
     entityResolverVal: NONE_RESOLVER_KEY,
     isPrebuilt: false,
     isMultivalueVal: false,
+    isMultiValueDisabled: false,
     isNegatableVal: false,
     isResolutionRequired: false,
     enumValues: [],
@@ -53,6 +54,7 @@ interface ComponentState {
     entityResolverVal: string
     isPrebuilt: boolean
     isMultivalueVal: boolean
+    isMultiValueDisabled: boolean
     isNegatableVal: boolean
     isResolutionRequired: boolean
     enumValues: (CLM.EnumValue | null)[]
@@ -172,12 +174,15 @@ class Container extends React.Component<Props, ComponentState> {
                         ? NONE_RESOLVER_KEY
                         : nextProps.entity.resolverType
 
+                    const isMultiValueDisabled = this.isMultiValueDisabled(nextProps.entity, this.props.actions)
+
                     this.setState({
                         entityNameVal: nextProps.entity.entityName,
                         entityTypeVal: entityType,
                         entityResolverVal: resolverType,
                         isPrebuilt: isPrebuilt,
                         isMultivalueVal: nextProps.entity.isMultivalue,
+                        isMultiValueDisabled,
                         isNegatableVal: nextProps.entity.isNegatible,
                         isResolutionRequired: nextProps.entity.isResolutionRequired,
                         title: nextProps.intl.formatMessage({
@@ -325,6 +330,13 @@ class Container extends React.Component<Props, ComponentState> {
         return newOrEditedEntity
     }
 
+    isMultiValueDisabled(entity: CLM.EntityBase, actions: CLM.ActionBase[]) {
+        // If entity is already used in condition and changing multivalue to false would prevent entity from being valid in condition
+        const entityWithMultiValueFalse: CLM.EntityBase = { ...entity, isMultivalue: false }
+        return actions.some(a => a.requiredConditions.some(condition => condition.entityId === entity.entityId)) === true
+            && isEntityAllowedInCondition(entityWithMultiValueFalse) === false
+    }
+
     @autobind
     async onClickSaveCreate() {
         const newOrEditedEntity = this.convertStateToEntity(this.state, this.props.entity ? this.props.entity : undefined)
@@ -849,7 +861,7 @@ class Container extends React.Component<Props, ComponentState> {
             onKeyDownName={this.onKeyDownName}
 
             isMultiValue={this.state.isMultivalueVal}
-            isMultiValueDisabled={false}
+            isMultiValueDisabled={this.state.isMultiValueDisabled}
             onChangeMultiValue={this.onChangeMultivalue}
 
             isNegatable={this.state.isNegatableVal}