remove constraint and name field

Composer/cypress/support/commands.js

@@ -77,6 +77,5 @@ Cypress.Commands.add('addEventHandler', handler => {
     cy.get(`[data-testid="eventTypeDropDown"]`).click();
     cy.getByText('consultDialog').click();
   }
-  cy.get('input[data-testid="triggerName"]').type(`__TestTrigger`);
   cy.get(`[data-testid="triggerFormSubmit"]`).click();
 });

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

@@ -16,18 +16,15 @@ import {
 import { StoreContext } from '../../store';
 import { DialogInfo } from '../../store/types';
 
-import { styles, dropdownStyles, name, dialogWindow, constraint } from './styles';
+import { styles, dropdownStyles, intent, dialogWindow } from './styles';
 
 const isValidName = name => {
   const nameRegex = /^[a-zA-Z0-9-_.]+$/;
   return nameRegex.test(name);
 };
 const validateForm = (data: TriggerFormData): TriggerFormDataErrors => {
   const errors: TriggerFormDataErrors = {};
-  const { name, $type, eventType } = data;
-  if (!name || !isValidName(name)) {
-    errors.name = formatMessage('Spaces and special characters are not allowed. Use letters, numbers, -, or _.');
-  }
+  const { $type, eventType } = data;
 
   if ($type === eventTypeKey && !eventType) {
     errors.eventType = formatMessage('please select a event type');
@@ -49,8 +46,7 @@ interface TriggerCreationModalProps {
 const initialFormData: TriggerFormData = {
   errors: {},
   $type: intentTypeKey,
-  name: '',
-  constraint: '',
+  intent: '',
   eventType: '',
 };
 
@@ -60,8 +56,8 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
   const { isOpen, onDismiss, onSubmit, dialogId } = props;
   const [formData, setFormData] = useState(initialFormData);
   const { state } = useContext(StoreContext);
-  const { dialogs, schemas } = state;
-
+  const { dialogs, schemas, luFiles } = state;
+  const luFile = luFiles.find(lu => lu.id === dialogId);
   const onClickSubmitButton = e => {
     e.preventDefault();
     const errors = validateForm(formData);
@@ -87,6 +83,10 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
     setFormData({ ...formData, eventType: option.key });
   };
 
+  const onSelectIntent = (e, option) => {
+    setFormData({ ...formData, intent: option.key });
+  };
+
   const updateForm = field => (e, newValue) => {
     setFormData({
       ...formData,
@@ -98,7 +98,14 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
       return { key: t, text: t };
     }
   );
+
+  const intents = get(luFile, 'parsedContent.LUISJsonStructure.intents', []);
+
+  const intentOptions = intents.map(t => {
+    return { key: t.name, text: t.name };
+  });
   const showEventDropDown = formData.$type === eventTypeKey;
+  const showIntentDropDown = formData.$type === intentTypeKey;
   return (
     <Dialog
       hidden={!isOpen}
@@ -136,21 +143,17 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
               data-testid={'eventTypeDropDown'}
             />
           )}
-          <TextField
-            label={formatMessage('What is the name of this trigger?')}
-            styles={name}
-            onChange={updateForm('name')}
-            errorMessage={formData.errors.name}
-            data-testid={'triggerName'}
-          />
-          <TextField
-            styles={constraint}
-            label={formatMessage('Constraint')}
-            multiline
-            resizable={false}
-            onChange={updateForm('constraint')}
-            data-testid={'triggerConstraint'}
-          />
+          {showIntentDropDown && (
+            <Dropdown
+              label={formatMessage('Which intent do you want to handle?')}
+              options={intentOptions}
+              styles={dropdownStyles}
+              onChange={onSelectIntent}
+              disabled={intentOptions.length === 0}
+              placeholder={intentOptions.length === 0 ? formatMessage('No intents configured for this dialog') : ''}
+              errorMessage={formData.errors.intent}
+            />
+          )}
         </Stack>
       </div>
       <DialogFooter>

Composer/packages/client/src/components/ProjectTree/styles.ts

@@ -152,7 +152,7 @@ export const textFieldlabel = {
   },
 };
 
-export const name = {
+export const intent = {
   fieldGroup: {
     width: 200,
   },
@@ -161,7 +161,3 @@ export const name = {
   },
   subComponentStyles: textFieldlabel,
 };
-
-export const constraint = {
-  subComponentStyles: textFieldlabel,
-};

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

@@ -18,14 +18,13 @@ export interface TriggerFormData {
   errors: TriggerFormDataErrors;
   $type: string;
   eventType: string;
-  name: string;
-  constraint: string;
+  intent: string;
 }
 
 export interface TriggerFormDataErrors {
   $type?: string;
-  name?: string;
   eventType?: string;
+  intent?: string;
 }
 
 export function getDialog(dialogs: DialogInfo[], dialogId: string) {
@@ -54,17 +53,18 @@ export function getFriendlyName(data) {
 
 export function insert(content, path: string, position: number | undefined, data: TriggerFormData) {
   const current = get(content, path, []);
-  const optionalAttributes: { constraint?: string; events?: string[] } = {};
-  if (data.constraint) {
-    optionalAttributes.constraint = data.constraint;
-  }
+  const optionalAttributes: { intent?: string; events?: string[] } = {};
   if (data.eventType) {
     optionalAttributes.events = [data.eventType];
   }
 
+  if (data.intent) {
+    optionalAttributes.intent = data.intent;
+  }
+
   const newStep = {
     $type: data.$type,
-    ...seedNewDialog(data.$type, { name: data.name }, optionalAttributes),
+    ...seedNewDialog(data.$type, {}, optionalAttributes),
   };
 
   const insertAt = typeof position === 'undefined' ? current.length : position;