Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Commit

Permalink
fix: normalize app create button locations (#612)
Browse files Browse the repository at this point in the history 
Buttons should be aligned to right
Import should have explicit button for file and another for import
  • Loading branch information
@mattmazzola
mattmazzola authored Jun 18, 2018
1 parent 6879134 commit abaa4f7
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 33 deletions.
15 changes: 15 additions & 0 deletions src/components/modals/ActionCreatorEditor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,19 @@
}
.cl-action-creator--disqualifying-entities .ms-TagItem-text--highlight {
background-color: var(--color-successBackground);
}

.cl-action-creator-file-picker {
display: grid;
grid-template: auto / min-content 1fr;
grid-gap: 1em;
}

.cl-action-creator-file-button {
white-space: nowrap;
}

.cl-action-creator-fieldset {
display: grid;
grid-gap: 1em;
}
93 changes: 65 additions & 28 deletions src/components/modals/AppCreator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,15 @@ interface ComponentState {
appNameVal: string
localeVal: string
localeOptions: OF.IDropdownOption[]
file: File | null
}

class AppCreator extends React.Component<Props, ComponentState> {
state: ComponentState = {
appNameVal: '',
localeVal: '',
localeOptions: []
localeOptions: [],
file: null,
}

constructor(p: Props) {
Expand Down Expand Up @@ -117,7 +119,8 @@ class AppCreator extends React.Component<Props, ComponentState> {
}
}
}
onClickCreate() {

onClickCreate = () => {
const appInput = this.getAppInput()
this.props.onSubmit(appInput, null)
}
Expand All @@ -127,7 +130,7 @@ class AppCreator extends React.Component<Props, ComponentState> {
onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
// On enter attempt to create the model if required fields are set
// Not on import as explicit button press is required to pick the file
if (this.props.creatorType !== AppCreatorType.IMPORT && event.keyCode === 13 && this.state.appNameVal) {
if (this.props.creatorType !== AppCreatorType.IMPORT && event.key === 'Enter' && this.state.appNameVal) {
this.onClickCreate();
}
}
Expand Down Expand Up @@ -155,7 +158,13 @@ class AppCreator extends React.Component<Props, ComponentState> {
return value ? "" : this.props.intl.formatMessage(messages.fieldErrorRequired);
}

onImport(importFile: File) {
onChangeFile = (file: File) => {
this.setState({
file
})
}

onClickImport = () => {
let reader = new FileReader()
reader.onload = (e: Event) => {
try {
Expand All @@ -167,7 +176,7 @@ class AppCreator extends React.Component<Props, ComponentState> {
this.props.setErrorDisplay(ErrorType.Error, error.message, ["Invalid file contents"], AT.CREATE_APPLICATION_ASYNC)
}
}
reader.readAsText(importFile);
reader.readAsText(this.state.file)
}

getTitle(): JSX.Element {
Expand All @@ -180,10 +189,10 @@ class AppCreator extends React.Component<Props, ComponentState> {
/>)
case AppCreatorType.IMPORT:
return (
<FormattedMessage
id={FM.APPCREATOR_IMPORT_TITLE}
defaultMessage="Import a Conversation Learner Model"
/>)
<FormattedMessage
id={FM.APPCREATOR_IMPORT_TITLE}
defaultMessage="Import a Conversation Learner Model"
/>)
case AppCreatorType.COPY:
return (
<FormattedMessage
Expand All @@ -201,7 +210,7 @@ class AppCreator extends React.Component<Props, ComponentState> {
id: FM.APPCREATOR_FIELDS_IMPORT_NAME_LABEL,
defaultMessage: "New Model Name"
})
:
:
intl.formatMessage({
id: FM.APPCREATOR_FIELDS_NAME_LABEL,
defaultMessage: "Name"
Expand All @@ -211,6 +220,7 @@ class AppCreator extends React.Component<Props, ComponentState> {
render() {
const { intl } = this.props
const invalidName = this.onGetNameErrorMessage(this.state.appNameVal) !== ""
const invalidImport = invalidName || this.state.file === null
return (
<Modal
isOpen={this.props.open}
Expand All @@ -223,7 +233,7 @@ class AppCreator extends React.Component<Props, ComponentState> {
{this.getTitle()}
</span>
</div>
<div>
<div className="cl-action-creator-fieldset">
<OF.TextField
data-testid="app-create-input-name"
onGetErrorMessage={value => this.onGetNameErrorMessage(value)}
Expand All @@ -246,31 +256,58 @@ class AppCreator extends React.Component<Props, ComponentState> {
options={this.state.localeOptions}
onChanged={this.localeChanged}
disabled={true}
/* Disabled until trainer can support more than english */
/* Disabled until trainer can support more than english */
/>
}
</div>
<div className='cl-modal_footer'>
<div className="cl-modal-buttons">
<div className="cl-modal-buttons_primary">
{this.props.creatorType === AppCreatorType.IMPORT &&
<FilePicker
extensions={['cl']}
onChange={(fileObject: File) => this.onImport(fileObject)}
onError={(err: string) => setErrorDisplay(ErrorType.Error, err, null, null)}
>
{this.props.creatorType === AppCreatorType.IMPORT &&
<div>
<OF.Label>Import File</OF.Label>
<FilePicker
extensions={['cl']}
onChange={this.onChangeFile}
onError={(err: string) => setErrorDisplay(ErrorType.Error, err, null, null)}
>
<div className="cl-action-creator-file-picker">
<OF.PrimaryButton
disabled={invalidName}
className="cl-action-creator-file-button"
ariaDescription={this.props.intl.formatMessage({
id: FM.APPCREATOR_LOCATEBUTTON_ARIADESCRIPTION,
defaultMessage: 'Import from File'
id: FM.APPCREATOR_CHOOSE_FILE_BUTTON_ARIADESCRIPTION,
defaultMessage: 'Choose a file'
})}
text={this.props.intl.formatMessage({
id: FM.APPCREATOR_LOCATEBUTTON_TEXT,
defaultMessage: 'Import'
id: FM.APPCREATOR_CHOOSE_FILE_BUTTON_TEXT,
defaultMessage: 'Choose'
})}
/>
</FilePicker>
<OF.TextField
disabled={true}
value={this.state.file
? this.state.file.name
: ''}
/>
</div>
</FilePicker>
</div>
}
</div>
<div className='cl-modal_footer'>
<div className="cl-modal-buttons">
<div className="cl-modal-buttons_secondary" />
<div className="cl-modal-buttons_primary">
{this.props.creatorType === AppCreatorType.IMPORT &&
<OF.PrimaryButton
disabled={invalidImport}
data-testid="app-create-button-submit"
onClick={this.onClickImport}
ariaDescription={this.props.intl.formatMessage({
id: FM.APPCREATOR_IMPORT_BUTTON_ARIADESCRIPTION,
defaultMessage: 'Import from File'
})}
text={this.props.intl.formatMessage({
id: FM.APPCREATOR_IMPORT_BUTTON_TEXT,
defaultMessage: 'Import'
})}
/>
}
{this.props.creatorType === AppCreatorType.NEW &&
<OF.PrimaryButton
Expand Down
2 changes: 1 addition & 1 deletion src/components/modals/TutorialImporter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ class TutorialImporter extends React.Component<Props, ComponentState> {
</div>

<div className="cl-modal_footer cl-modal-buttons">
<div className="cl-modal-buttons_secondary" />
<div className="cl-modal-buttons_primary">
{this.state.moreInfoApp === null ?
<OF.PrimaryButton
Expand Down Expand Up @@ -204,7 +205,6 @@ class TutorialImporter extends React.Component<Props, ComponentState> {
}
</div>
</div>

</Modal>
);

Expand Down
12 changes: 8 additions & 4 deletions src/react-intl-messages.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,10 @@ export enum FM {
APPCREATOR_COPYBUTTON_TEXT = 'AppCreator.copyButton.text',
APPCREATOR_CREATEBUTTON_ARIADESCRIPTION = 'AppCreator.createButton.ariaDescription',
APPCREATOR_CREATEBUTTON_TEXT = 'AppCreator.createButton.text',
APPCREATOR_LOCATEBUTTON_ARIADESCRIPTION = 'AppCreator.importButton.ariaDescription',
APPCREATOR_LOCATEBUTTON_TEXT = 'AppCreator.importButton.text',
APPCREATOR_IMPORT_BUTTON_ARIADESCRIPTION = 'AppCreator.importButton.ariaDescription',
APPCREATOR_IMPORT_BUTTON_TEXT = 'AppCreator.importButton.text',
APPCREATOR_CHOOSE_FILE_BUTTON_ARIADESCRIPTION = 'AppCreator.chooseFileButton.ariaDescription',
APPCREATOR_CHOOSE_FILE_BUTTON_TEXT = 'AppCreator.chooseFileButton.text',
APPCREATOR_CANCELBUTTON_ARIADESCRIPTION = 'AppCreator.cancelButton.ariaDescription',
APPCREATOR_CANCELBUTTON_TEXT = 'AppCreator.cancelButton.text',

Expand Down Expand Up @@ -705,8 +707,10 @@ export default {
[FM.APPCREATOR_COPYBUTTON_TEXT]: 'Copy',
[FM.APPCREATOR_CREATEBUTTON_ARIADESCRIPTION]: 'Create',
[FM.APPCREATOR_CREATEBUTTON_TEXT]: 'Create',
[FM.APPCREATOR_LOCATEBUTTON_ARIADESCRIPTION]: 'Locate File',
[FM.APPCREATOR_LOCATEBUTTON_TEXT]: 'Locate File',
[FM.APPCREATOR_IMPORT_BUTTON_ARIADESCRIPTION]: 'Import application',
[FM.APPCREATOR_IMPORT_BUTTON_TEXT]: 'Import',
[FM.APPCREATOR_CHOOSE_FILE_BUTTON_ARIADESCRIPTION]: 'Locate File',
[FM.APPCREATOR_CHOOSE_FILE_BUTTON_TEXT]: 'Locate File',
[FM.APPCREATOR_CANCELBUTTON_ARIADESCRIPTION]: 'Cancel',
[FM.APPCREATOR_CANCELBUTTON_TEXT]: 'Cancel',

Expand Down

0 comments on commit abaa4f7

Please sign in to comment.