Skip to content

Commit

Permalink
update new trigger modal according to design
Browse files Browse the repository at this point in the history
  • Loading branch information
@liweitian
liweitian committed Dec 18, 2019
1 parent 4ea1b2a commit 3db13e6
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 42 deletions.
88 changes: 57 additions & 31 deletions Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import get from 'lodash/get';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { DialogInfo } from '@bfc/indexers';
import get from 'lodash/get';

import {
addNewTrigger,
Expand All @@ -25,15 +26,15 @@ import {
getEventTypes,
getActivityTypes,
getMessageTypes,
regexRecognizerKey,
} from '../../utils/dialogUtil';
import { StoreContext } from '../../store';

import { styles, dropdownStyles, dialogWindow } from './styles';
import { styles, dropdownStyles, dialogWindow, intent, triggerPhrases } from './styles';

const nameRegex = /^[a-zA-Z0-9-_.]+$/;
const validateForm = (data: TriggerFormData): TriggerFormDataErrors => {
const errors: TriggerFormDataErrors = {};
const { $type, specifiedType } = data;
const { $type, specifiedType, intent, triggerPhrases } = data;

if ($type === eventTypeKey && !specifiedType) {
errors.specifiedType = formatMessage('Please select a event type');
Expand All @@ -46,21 +47,37 @@ const validateForm = (data: TriggerFormData): TriggerFormDataErrors => {
if (!$type) {
errors.$type = formatMessage('Please select a trigger type');
}

if (!intent || !nameRegex.test(intent)) {
errors.intent = formatMessage(
'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _'
);
}

if (!triggerPhrases) {
errors.triggerPhrases = formatMessage('Please input trigger phrases');
}
return errors;
};

interface LuFilePayload {
id: string;
content: string;
}

interface TriggerCreationModalProps {
dialogId: string;
isOpen: boolean;
onDismiss: () => void;
onSubmit: (dialog: DialogInfo) => void;
onSubmit: (dialog: DialogInfo, luFilePayload: LuFilePayload) => void;
}

const initialFormData: TriggerFormData = {
errors: {},
$type: intentTypeKey,
intent: '',
specifiedType: '',
intent: '',
triggerPhrases: '',
};

const triggerTypeOptions: IDropdownOption[] = getTriggerTypes();
Expand All @@ -71,7 +88,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
const { state } = useContext(StoreContext);
const { dialogs, luFiles } = state;
const luFile = luFiles.find(lu => lu.id === dialogId);
const dialogFile = dialogs.find(dialog => dialog.id === dialogId);
// const dialogFile = dialogs.find(dialog => dialog.id === dialogId);
const onClickSubmitButton = e => {
e.preventDefault();
const errors = validateForm(formData);
Expand All @@ -83,38 +100,39 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
});
return;
}
const newContent = get(luFile, 'content', '') + '\n\r' + '# ' + formData.intent + '\r' + formData.triggerPhrases;

const updateLuFile = {
id: dialogId,
content: newContent,
};

const newDialog = addNewTrigger(dialogs, dialogId, formData);
onSubmit(newDialog);
onSubmit(newDialog, updateLuFile);
onDismiss();
};

const onSelectTriggerType = (e, option) => {
setFormData({ ...initialFormData, $type: option.key });
};

const onSelectIntent = (e, option) => {
setFormData({ ...formData, intent: option.key });
};

const onSelectSpecifiedTypeType = (e, option) => {
setFormData({ ...formData, specifiedType: option.key });
};

const onNameChange = (e, name) => {
setFormData({ ...formData, intent: name });
};

const onTriggerPhrasesChange = (e, triggerPhrases) => {
setFormData({ ...formData, triggerPhrases: triggerPhrases });
};

const eventTypes: IDropdownOption[] = getEventTypes();
const activityTypes: IDropdownOption[] = getActivityTypes();
const messageTypes: IDropdownOption[] = getMessageTypes();

const isRegEx = get(dialogFile, 'content.recognizer.$type', '') === regexRecognizerKey;

const regexIntents = get(dialogFile, 'content.recognizer.intents', []);
const luisIntents = get(luFile, 'parsedContent.LUISJsonStructure.intents', []);
const intents = isRegEx ? regexIntents : luisIntents;

const intentOptions = intents.map(t => {
return { key: t.name || t.intent, text: t.name || t.intent };
});

const showIntentDropDown = formData.$type === intentTypeKey;
const showIntentFields = formData.$type === intentTypeKey;
const showEventDropDown = formData.$type === eventTypeKey;
const showActivityDropDown = formData.$type === activityTypeKey;
const showMessageDropDown = formData.$type === messageTypeKey;
Expand Down Expand Up @@ -178,15 +196,23 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
data-testid={'messageTypeDropDown'}
/>
)}
{showIntentDropDown && (
<Dropdown
label={formatMessage('Which intent do you want to handle? (Optional)')}
options={intentOptions}
styles={dropdownStyles}
onChange={onSelectIntent}
disabled={intentOptions.length === 0}
placeholder={intentOptions.length === 0 ? formatMessage('No intents configured for this dialog') : ''}
{showIntentFields && (
<TextField
label={formatMessage('What is the name of this trigger')}
styles={intent}
onChange={onNameChange}
errorMessage={formData.errors.intent}
data-testid="TriggerName"
/>
)}
{showIntentFields && (
<TextField
label={formatMessage('Trigger phrases')}
styles={triggerPhrases}
onChange={onTriggerPhrasesChange}
data-testid="TriggerPhrases"
errorMessage={formData.errors.triggerPhrases}
multiline
/>
)}
</Stack>
Expand Down
17 changes: 11 additions & 6 deletions Composer/packages/client/src/components/ProjectTree/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export const dropdownStyles = {
fontWeight: FontWeights.semibold,
},
dropdown: {
width: '300px',
width: '400px',
},
root: {
paddingBottom: '20px',
Expand All @@ -145,7 +145,7 @@ export const dialogWindow = css`
display: flex;
flex-direction: column;
width: 400px;
height: 250px;
height: 300px;
`;

export const textFieldlabel = {
Expand All @@ -159,11 +159,16 @@ export const textFieldlabel = {
};

export const intent = {
fieldGroup: {
width: 200,
root: {
width: '400px',
},
};

export const triggerPhrases = {
root: {
height: '90px',
width: '400px',
},
fieldGroup: {
height: 80,
},
subComponentStyles: textFieldlabel,
};
11 changes: 8 additions & 3 deletions Composer/packages/client/src/pages/design/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,14 +172,19 @@ function DesignPage(props) {
setTriggerModalVisibility(true);
};

const onTriggerCreationSubmit = dialog => {
const payload = {
const onTriggerCreationSubmit = (dialog, luFile) => {
const dialogPayload = {
id: dialog.id,
content: dialog.content,
};
const luFilePayload = {
id: luFile.id,
content: luFile.content,
};
const index = get(dialog, 'content.triggers', []).length - 1;
actions.selectTo(`triggers[${index}]`);
actions.updateDialog(payload);
actions.updateLuFile(luFilePayload);
actions.updateDialog(dialogPayload);
};

function handleSelect(id, selected = '') {
Expand Down
5 changes: 3 additions & 2 deletions Composer/packages/client/src/utils/dialogUtil.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,16 @@ interface DialogsMap {
export interface TriggerFormData {
errors: TriggerFormDataErrors;
$type: string;
intent: string;
specifiedType: string;
intent: string;
triggerPhrases: string;
}

export interface TriggerFormDataErrors {
$type?: string;
intent?: string;
specifiedType?: string;
triggerPhrases?: string;
}

export function getDialog(dialogs: DialogInfo[], dialogId: string) {
Expand Down Expand Up @@ -67,7 +69,6 @@ export function insert(content, path: string, position: number | undefined, data
if (data.intent) {
optionalAttributes.intent = data.intent;
}

const newStep = {
$type: data.$type,
...seedNewDialog(data.$type, {}, optionalAttributes),
Expand Down

0 comments on commit 3db13e6

Please sign in to comment.