fix: trigger creation bug

Composer/cypress/integration/TriggerCreation.spec.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+context('Creating a new bot', () => {
+    beforeEach(() => {
+        cy.visit(Cypress.env('COMPOSER_URL'));
+        cy.createBot('EmptyBot');
+    });
+
+    it('can create different kinds of triggers ', () => {
+        cy.visitPage('Design Flow');
+        cy.findByTestId('recognizerTypeDropdown').click();
+        cy.findByText('Regular Expression').click();
+
+        //onintent trigger
+        cy.findByTestId('AddFlyout').click();
+        cy.findByTestId('FlyoutNewTrigger').click();
+        cy.findByTestId('triggerTypeDropDown').click();
+        cy.get('[title="Intent recognized"]').click();
+        cy.findByTestId('TriggerName').type('myTrigger1');
+        cy.findByTestId('RegExField').type('test');
+        cy.findByTestId('triggerFormSubmit').click();
+        cy.findAllByText('myTrigger1').should('exist');
+
+        //on Dialog Event trigger
+        cy.findByTestId('AddFlyout').click();
+        cy.findByTestId('FlyoutNewTrigger').click();
+        cy.findByTestId('triggerTypeDropDown').click();
+        cy.get('[title="Dialog events"]').click();
+        cy.findByTestId('eventTypeDropDown').within(() => {
+            cy.get('.ms-ComboBox-Input').type('myTrigger2');
+        });
+        cy.findByTestId('triggerFormSubmit').click();
+        cy.findAllByText('Custom Event').should('exist');
+
+        //on activity trigger
+        cy.findByTestId('AddFlyout').click();
+        cy.findByTestId('FlyoutNewTrigger').click();
+        cy.findByTestId('triggerTypeDropDown').click();
+        cy.get('[title="Activities"]').click();
+        cy.findByTestId('activityTypeDropDown').click();
+        cy.findByText('Activities (Activity received)').click();
+        cy.findByTestId('triggerFormSubmit').click();
+        cy.findAllByText('Activities').should('exist');
+    });
+});

Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx

@@ -38,43 +38,50 @@ import { styles, dropdownStyles, dialogWindow, intent } from './styles';
 
 const nameRegex = /^[a-zA-Z0-9-_.]+$/;
 const validateForm = (
+  selectedType: string,
   data: TriggerFormData,
   isRegEx: boolean,
   regExIntents: [{ intent: string; pattern: string }]
 ): TriggerFormDataErrors => {
   const errors: TriggerFormDataErrors = {};
   const { $kind, event: eventName, intent, triggerPhrases, regexEx } = data;
 
-  if ($kind === eventTypeKey && !eventName) {
+  if (selectedType === eventTypeKey && $kind === eventTypeKey && !eventName) {
     errors.event = formatMessage('Please select a event type');
   }
 
-  if ($kind === activityTypeKey && !eventName) {
-    errors.event = formatMessage('Please select an activity type');
+  if (selectedType === eventTypeKey && !$kind) {
+    errors.event = formatMessage('Please select a event type');
+  }
+
+  if (selectedType === activityTypeKey && !$kind) {
+    errors.activity = formatMessage('Please select an activity type');
   }
 
-  if (!$kind) {
+  if (!selectedType) {
     errors.$kind = formatMessage('Please select a trigger type');
   }
 
-  if ($kind === intentTypeKey && (!intent || !nameRegex.test(intent))) {
+  if (selectedType === intentTypeKey && (!intent || !nameRegex.test(intent))) {
     errors.intent = formatMessage(
       'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _'
     );
   }
 
-  if ($kind === intentTypeKey && isRegEx && regExIntents.find(ri => ri.intent === intent)) {
+  if (selectedType === intentTypeKey && isRegEx && regExIntents.find(ri => ri.intent === intent)) {
     errors.intent = `regEx ${intent} is already defined`;
   }
 
-  if ($kind === intentTypeKey && isRegEx && !regexEx) {
+  if (selectedType === intentTypeKey && isRegEx && !regexEx) {
     errors.regexEx = formatMessage('Please input regEx pattern');
   }
 
-  if ($kind === intentTypeKey && !isRegEx && !triggerPhrases) {
+  if (selectedType === intentTypeKey && !isRegEx && !triggerPhrases) {
     errors.triggerPhrases = formatMessage('Please input trigger phrases');
   }
-  if (data.errors.triggerPhrases) {
+
+  //errors from lu parser
+  if (data.errors.triggerPhrases && selectedType === intentTypeKey && !isRegEx) {
     errors.triggerPhrases = data.errors.triggerPhrases;
   }
   return errors;
@@ -103,7 +110,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
   const isNone = !get(dialogFile, 'content.recognizer');
   const initialFormData: TriggerFormData = {
     errors: {},
-    $kind: '',
+    $kind: isNone ? '' : intentTypeKey,
     event: '',
     intent: '',
     triggerPhrases: '',
@@ -112,9 +119,23 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
   const [formData, setFormData] = useState(initialFormData);
   const [selectedType, setSelectedType] = useState(isNone ? '' : intentTypeKey);
 
+  const showIntentName = selectedType === intentTypeKey;
+  const showRegExDropDown = selectedType === intentTypeKey && isRegEx;
+  const showTriggerPhrase = selectedType === intentTypeKey && !isRegEx;
+  const showEventDropDown = selectedType === eventTypeKey;
+  const showActivityDropDown = selectedType === activityTypeKey;
+
+  const eventTypes: IComboBoxOption[] = getEventTypes();
+  const activityTypes: IDropdownOption[] = getActivityTypes();
+  let triggerTypeOptions: IDropdownOption[] = getTriggerTypes();
+
+  if (isNone) {
+    triggerTypeOptions = triggerTypeOptions.filter(t => t.key !== intentTypeKey);
+  }
+
   const onClickSubmitButton = e => {
     e.preventDefault();
-    const errors = validateForm(formData, isRegEx, regexIntents);
+    const errors = validateForm(selectedType, formData, isRegEx, regexIntents);
 
     if (Object.keys(errors).length) {
       setFormData({
@@ -140,13 +161,16 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
     onDismiss();
   };
 
-  const eventTypes: IComboBoxOption[] = getEventTypes();
-  const activityTypes: IDropdownOption[] = getActivityTypes();
-  let triggerTypeOptions: IDropdownOption[] = getTriggerTypes();
-
   const onSelectTriggerType = (e, option) => {
     setSelectedType(option.key || '');
-    setFormData({ ...initialFormData, $kind: option.key });
+
+    if (option.key == activityTypeKey || option.key == eventTypeKey) {
+      setFormData({ ...initialFormData, $kind: '' });
+    }
+
+    if (option.key !== activityTypeKey && option.key !== eventTypeKey) {
+      setFormData({ ...initialFormData, $kind: option.key });
+    }
   };
 
   const handleEventChange = (
@@ -167,7 +191,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
     }
   };
 
-  const onSelectSpecifiedType = (_e: any, option?: IDropdownOption) => {
+  const handleActivityChange = (_e: any, option?: IDropdownOption) => {
     if (option) {
       setFormData({ ...formData, $kind: option.key as string });
     }
@@ -181,7 +205,9 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
 
   const onNameChange = (e, name) => {
     const errors = formData.errors;
-    errors.triggerPhrases = getLuDiagnostics(name, formData.triggerPhrases);
+    if (showTriggerPhrase) {
+      errors.triggerPhrases = getLuDiagnostics(name, formData.triggerPhrases);
+    }
     setFormData({ ...formData, intent: name, errors });
   };
 
@@ -195,15 +221,6 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
     setFormData({ ...formData, triggerPhrases: body, errors });
   };
 
-  if (isNone) {
-    triggerTypeOptions = triggerTypeOptions.filter(t => t.key !== intentTypeKey);
-  }
-  const showIntentName = selectedType === intentTypeKey;
-  const showRegExDropDown = selectedType === intentTypeKey && isRegEx;
-  const showTriggerPhrase = selectedType === intentTypeKey && !isRegEx;
-  const showEventDropDown = selectedType === eventTypeKey;
-  const showActivityDropDown = selectedType === activityTypeKey;
-
   return (
     <Dialog
       hidden={!isOpen}
@@ -250,8 +267,8 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
               label={formatMessage('Which activity type')}
               options={activityTypes}
               styles={dropdownStyles}
-              onChange={onSelectSpecifiedType}
-              errorMessage={formData.errors.event}
+              onChange={handleActivityChange}
+              errorMessage={formData.errors.activity}
               data-testid={'activityTypeDropDown'}
             />
           )}
@@ -274,7 +291,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
               label={formatMessage('Please input regex pattern')}
               onChange={onChangeRegEx}
               errorMessage={formData.errors.regexEx}
-              data-testid={'RegExDropDown'}
+              data-testid="RegExField"
             />
           )}
           {showTriggerPhrase && (

Composer/packages/client/src/utils/dialogUtil.ts

@@ -40,6 +40,7 @@ export interface TriggerFormDataErrors {
   event?: string;
   triggerPhrases?: string;
   regexEx?: string;
+  activity?: string;
 }
 
 export function getDialog(dialogs: DialogInfo[], dialogId: string) {

Composer/packages/extensions/adaptive-form/src/components/fields/RecognizerField.tsx

@@ -58,6 +58,7 @@ const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = props => {
           responsiveMode={ResponsiveMode.large}
           selectedKey={selectedType}
           onChange={handleChangeRecognizerType}
+          data-testid={'recognizerTypeDropdown'}
         />
       ) : (
         `Unable to determine recognizer type from data: ${value}`

Composer/packages/extensions/adaptive-form/src/defaultUiSchema.ts

@@ -136,7 +136,7 @@ const DefaultUISchema: UISchema = {
   [SDKKinds.OnActivity]: {
     ...triggerUiSchema,
     label: () => formatMessage('Activities'),
-    subtitle: () => formatMessage('Activity recieved'),
+    subtitle: () => formatMessage('Activity received'),
   },
   [SDKKinds.OnBeginDialog]: {
     ...triggerUiSchema,

Composer/packages/lib/shared/src/labelMap.ts

@@ -126,7 +126,7 @@ export const ConceptLabels: { [key in ConceptLabelKey]?: LabelOverride } = {
   },
   [SDKKinds.OnActivity]: {
     title: formatMessage('Activities'),
-    subtitle: formatMessage('Activity recieved'),
+    subtitle: formatMessage('Activity received'),
   },
   [SDKKinds.OnBeginDialog]: {
     title: formatMessage('Dialog started'),