mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-54842] Convert LocalizedInput of 'abstract_command.tsx' to regular input component (#24886)

Просмотр исходного кода
Этот коммит содержится в:
Rafael Kristoforus Yanto
2023-10-17 20:50:01 +08:00
коммит произвёл GitHub
родитель f86ec9da18
Коммит 09adf9ae91
5 изменённых файлов: 100 добавлений и 166 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

162
webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
Просмотреть файл

@@ -106,17 +106,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="trigger" id="trigger"
maxLength={128} maxLength={128}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Command trigger e.g. \\"hello\\" not including the slash"
Object {
"defaultMessage": "Command trigger e.g. \\"hello\\" not including the slash",
"id": "add_command.trigger.placeholder",
}
}
type="text" type="text"
value="trigger" value="trigger"
/> />
@@ -174,17 +169,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="url" id="url"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Must start with http:// or https://"
Object {
"defaultMessage": "Must start with http:// or https://",
"id": "add_command.url.placeholder",
}
}
type="text" type="text"
value="https://google.com/command" value="https://google.com/command"
/> />
@@ -255,17 +245,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="username" id="username"
maxLength={64} maxLength={64}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Username"
Object {
"defaultMessage": "Username",
"id": "add_command.username.placeholder",
}
}
type="text" type="text"
value="username" value="username"
/> />
@@ -294,17 +279,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="iconUrl" id="iconUrl"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="https://www.example.com/myicon.png"
Object {
"defaultMessage": "https://www.example.com/myicon.png",
"id": "add_command.iconUrl.placeholder",
}
}
type="text" type="text"
value="https://google.com/icon" value="https://google.com/icon"
/> />
@@ -364,17 +344,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="autocompleteHint" id="autocompleteHint"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Example: [Patient Name]"
Object {
"defaultMessage": "Example: [Patient Name]",
"id": "add_command.autocompleteHint.placeholder",
}
}
type="text" type="text"
value="auto_complete_hint" value="auto_complete_hint"
/> />
@@ -403,17 +378,12 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="description" id="description"
maxLength={128} maxLength={128}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Example: \\"Returns search results for patient records\\""
Object {
"defaultMessage": "Example: \\"Returns search results for patient records\\"",
"id": "add_command.autocompleteDescription.placeholder",
}
}
type="text" type="text"
value="auto_complete_desc" value="auto_complete_desc"
/> />
@@ -576,17 +546,12 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="trigger" id="trigger"
maxLength={128} maxLength={128}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Command trigger e.g. \\"hello\\" not including the slash"
Object {
"defaultMessage": "Command trigger e.g. \\"hello\\" not including the slash",
"id": "add_command.trigger.placeholder",
}
}
type="text" type="text"
value="trigger" value="trigger"
/> />
@@ -644,17 +609,12 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="url" id="url"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Must start with http:// or https://"
Object {
"defaultMessage": "Must start with http:// or https://",
"id": "add_command.url.placeholder",
}
}
type="text" type="text"
value="https://google.com/command" value="https://google.com/command"
/> />
@@ -725,17 +685,12 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="username" id="username"
maxLength={64} maxLength={64}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Username"
Object {
"defaultMessage": "Username",
"id": "add_command.username.placeholder",
}
}
type="text" type="text"
value="username" value="username"
/> />
@@ -764,17 +719,12 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="iconUrl" id="iconUrl"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="https://www.example.com/myicon.png"
Object {
"defaultMessage": "https://www.example.com/myicon.png",
"id": "add_command.iconUrl.placeholder",
}
}
type="text" type="text"
value="https://google.com/icon" value="https://google.com/icon"
/> />
@@ -834,17 +784,12 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="autocompleteHint" id="autocompleteHint"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Example: [Patient Name]"
Object {
"defaultMessage": "Example: [Patient Name]",
"id": "add_command.autocompleteHint.placeholder",
}
}
type="text" type="text"
value="auto_complete_hint" value="auto_complete_hint"
/> />
@@ -873,17 +818,12 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="description" id="description"
maxLength={128} maxLength={128}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Example: \\"Returns search results for patient records\\""
Object {
"defaultMessage": "Example: \\"Returns search results for patient records\\"",
"id": "add_command.autocompleteDescription.placeholder",
}
}
type="text" type="text"
value="auto_complete_desc" value="auto_complete_desc"
/> />
@@ -1046,17 +986,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="trigger" id="trigger"
maxLength={128} maxLength={128}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Command trigger e.g. \\"hello\\" not including the slash"
Object {
"defaultMessage": "Command trigger e.g. \\"hello\\" not including the slash",
"id": "add_command.trigger.placeholder",
}
}
type="text" type="text"
value="" value=""
/> />
@@ -1114,17 +1049,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="url" id="url"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Must start with http:// or https://"
Object {
"defaultMessage": "Must start with http:// or https://",
"id": "add_command.url.placeholder",
}
}
type="text" type="text"
value="https://google.com/command" value="https://google.com/command"
/> />
@@ -1195,17 +1125,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="username" id="username"
maxLength={64} maxLength={64}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Username"
Object {
"defaultMessage": "Username",
"id": "add_command.username.placeholder",
}
}
type="text" type="text"
value="username" value="username"
/> />
@@ -1234,17 +1159,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="iconUrl" id="iconUrl"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="https://www.example.com/myicon.png"
Object {
"defaultMessage": "https://www.example.com/myicon.png",
"id": "add_command.iconUrl.placeholder",
}
}
type="text" type="text"
value="https://google.com/icon" value="https://google.com/icon"
/> />
@@ -1304,17 +1224,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="autocompleteHint" id="autocompleteHint"
maxLength={1024} maxLength={1024}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Example: [Patient Name]"
Object {
"defaultMessage": "Example: [Patient Name]",
"id": "add_command.autocompleteHint.placeholder",
}
}
type="text" type="text"
value="auto_complete_hint" value="auto_complete_hint"
/> />
@@ -1343,17 +1258,12 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<div <div
className="col-md-5 col-sm-8" className="col-md-5 col-sm-8"
> >
<LocalizedInput <input
className="form-control" className="form-control"
id="description" id="description"
maxLength={128} maxLength={128}
onChange={[Function]} onChange={[Function]}
placeholder={ placeholder="Example: \\"Returns search results for patient records\\""
Object {
"defaultMessage": "Example: \\"Returns search results for patient records\\"",
"id": "add_command.autocompleteDescription.placeholder",
}
}
type="text" type="text"
value="auto_complete_desc" value="auto_complete_desc"
/> />

47
webapp/channels/src/components/integrations/abstract_command.test.tsx
Просмотреть файл

@@ -1,13 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import {shallow} from 'enzyme';
import React from 'react'; import React from 'react';
import type {FormEvent} from 'react'; import type {FormEvent} from 'react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import AbstractCommand from 'components/integrations/abstract_command'; import AbstractCommand from 'components/integrations/abstract_command';
import type {AbstractCommand as AbstractCommandClass} from 'components/integrations/abstract_command';
import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
import {TestHelper} from 'utils/test_helper'; import {TestHelper} from 'utils/test_helper';
describe('components/integrations/AbstractCommand', () => { describe('components/integrations/AbstractCommand', () => {
@@ -56,14 +57,14 @@ describe('components/integrations/AbstractCommand', () => {
}; };
test('should match snapshot', () => { test('should match snapshot', () => {
const wrapper = shallow<AbstractCommand>( const wrapper = shallowWithIntl(
<AbstractCommand {...baseProps}/>, <AbstractCommand {...baseProps}/>,
); );
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('should match snapshot when header/footer/loading is a string', () => { test('should match snapshot when header/footer/loading is a string', () => {
const wrapper = shallow<AbstractCommand>( const wrapper = shallowWithIntl(
<AbstractCommand <AbstractCommand
{...baseProps} {...baseProps}
header='Header as string' header='Header as string'
@@ -77,7 +78,7 @@ describe('components/integrations/AbstractCommand', () => {
test('should match snapshot, displays client error', () => { test('should match snapshot, displays client error', () => {
const newSeverError = 'server error'; const newSeverError = 'server error';
const props = {...baseProps, serverError: newSeverError}; const props = {...baseProps, serverError: newSeverError};
const wrapper = shallow<AbstractCommand>( const wrapper = shallowWithIntl(
<AbstractCommand {...props}/>, <AbstractCommand {...props}/>,
); );
@@ -89,7 +90,7 @@ describe('components/integrations/AbstractCommand', () => {
}); });
test('should call action function', () => { test('should call action function', () => {
const wrapper = shallow<AbstractCommand>( const wrapper = shallowWithIntl(
<AbstractCommand {...baseProps}/>, <AbstractCommand {...baseProps}/>,
); );
@@ -100,9 +101,10 @@ describe('components/integrations/AbstractCommand', () => {
}); });
test('should match object returned by getStateFromCommand', () => { test('should match object returned by getStateFromCommand', () => {
const wrapper = shallow<AbstractCommand>( const wrapper = shallowWithIntl(
<AbstractCommand {...baseProps}/>, <AbstractCommand {...baseProps}/>,
); );
const instance = wrapper.instance() as AbstractCommandClass;
const expectedOutput = { const expectedOutput = {
autocomplete: true, autocomplete: true,
@@ -119,63 +121,65 @@ describe('components/integrations/AbstractCommand', () => {
username: 'username', username: 'username',
}; };
expect(wrapper.instance().getStateFromCommand(command)).toEqual(expectedOutput); expect(instance.getStateFromCommand(command)).toEqual(expectedOutput);
}); });
test('should match state when method is called', () => { test('should match state when method is called', () => {
const wrapper = shallow<AbstractCommand>( const wrapper = shallowWithIntl(
<AbstractCommand {...baseProps}/>, <AbstractCommand {...baseProps}/>,
); );
const instance = wrapper.instance() as AbstractCommandClass;
const displayName = 'new display_name'; const displayName = 'new display_name';
const displayNameEvent = {preventDefault: jest.fn(), target: {value: displayName}} as any; const displayNameEvent = {preventDefault: jest.fn(), target: {value: displayName}} as any;
wrapper.instance().updateDisplayName(displayNameEvent); instance.updateDisplayName(displayNameEvent);
expect(wrapper.state('displayName')).toEqual(displayName); expect(wrapper.state('displayName')).toEqual(displayName);
const description = 'new description'; const description = 'new description';
const descriptionEvent = {preventDefault: jest.fn(), target: {value: description}} as any; const descriptionEvent = {preventDefault: jest.fn(), target: {value: description}} as any;
wrapper.instance().updateDescription(descriptionEvent); instance.updateDescription(descriptionEvent);
expect(wrapper.state('description')).toEqual(description); expect(wrapper.state('description')).toEqual(description);
const trigger = 'new trigger'; const trigger = 'new trigger';
const triggerEvent = {preventDefault: jest.fn(), target: {value: trigger}} as any; const triggerEvent = {preventDefault: jest.fn(), target: {value: trigger}} as any;
wrapper.instance().updateTrigger(triggerEvent); instance.updateTrigger(triggerEvent);
expect(wrapper.state('trigger')).toEqual(trigger); expect(wrapper.state('trigger')).toEqual(trigger);
const url = 'new url'; const url = 'new url';
const urlEvent = {preventDefault: jest.fn(), target: {value: url}} as any; const urlEvent = {preventDefault: jest.fn(), target: {value: url}} as any;
wrapper.instance().updateUrl(urlEvent); instance.updateUrl(urlEvent);
expect(wrapper.state('url')).toEqual(url); expect(wrapper.state('url')).toEqual(url);
const method = 'P'; const method = 'P';
const methodEvent = {preventDefault: jest.fn(), target: {value: method}} as any; const methodEvent = {preventDefault: jest.fn(), target: {value: method}} as any;
wrapper.instance().updateMethod(methodEvent); instance.updateMethod(methodEvent);
expect(wrapper.state('method')).toEqual(method); expect(wrapper.state('method')).toEqual(method);
const username = 'new username'; const username = 'new username';
const usernameEvent = {preventDefault: jest.fn(), target: {value: username}} as any; const usernameEvent = {preventDefault: jest.fn(), target: {value: username}} as any;
wrapper.instance().updateUsername(usernameEvent); instance.updateUsername(usernameEvent);
expect(wrapper.state('username')).toEqual(username); expect(wrapper.state('username')).toEqual(username);
const iconUrl = 'new iconUrl'; const iconUrl = 'new iconUrl';
const iconUrlEvent = {preventDefault: jest.fn(), target: {value: iconUrl}} as any; const iconUrlEvent = {preventDefault: jest.fn(), target: {value: iconUrl}} as any;
wrapper.instance().updateIconUrl(iconUrlEvent); instance.updateIconUrl(iconUrlEvent);
expect(wrapper.state('iconUrl')).toEqual(iconUrl); expect(wrapper.state('iconUrl')).toEqual(iconUrl);
const trueUpdateAutocompleteEvent = {target: {checked: true}} as any; const trueUpdateAutocompleteEvent = {target: {checked: true}} as any;
const falseeUpdateAutocompleteEvent = {target: {checked: false}} as any; const falseeUpdateAutocompleteEvent = {target: {checked: false}} as any;
wrapper.instance().updateAutocomplete(trueUpdateAutocompleteEvent); instance.updateAutocomplete(trueUpdateAutocompleteEvent);
expect(wrapper.state('autocomplete')).toEqual(true); expect(wrapper.state('autocomplete')).toEqual(true);
wrapper.instance().updateAutocomplete(falseeUpdateAutocompleteEvent); instance.updateAutocomplete(falseeUpdateAutocompleteEvent);
expect(wrapper.state('autocomplete')).toEqual(false); expect(wrapper.state('autocomplete')).toEqual(false);
const autocompleteHint = 'new autocompleteHint'; const autocompleteHint = 'new autocompleteHint';
const autocompleteHintEvent = {preventDefault: jest.fn(), target: {value: autocompleteHint}} as any; const autocompleteHintEvent = {preventDefault: jest.fn(), target: {value: autocompleteHint}} as any;
wrapper.instance().updateAutocompleteHint(autocompleteHintEvent); instance.updateAutocompleteHint(autocompleteHintEvent);
expect(wrapper.state('autocompleteHint')).toEqual(autocompleteHint); expect(wrapper.state('autocompleteHint')).toEqual(autocompleteHint);
const autocompleteDescription = 'new autocompleteDescription'; const autocompleteDescription = 'new autocompleteDescription';
const autocompleteDescriptionEvent = {preventDefault: jest.fn(), target: {value: autocompleteDescription}} as any; const autocompleteDescriptionEvent = {preventDefault: jest.fn(), target: {value: autocompleteDescription}} as any;
wrapper.instance().updateAutocompleteDescription(autocompleteDescriptionEvent); instance.updateAutocompleteDescription(autocompleteDescriptionEvent);
expect(wrapper.state('autocompleteDescription')).toEqual(autocompleteDescription); expect(wrapper.state('autocompleteDescription')).toEqual(autocompleteDescription);
}); });
@@ -188,13 +192,14 @@ describe('components/integrations/AbstractCommand', () => {
}, },
); );
const props = {...baseProps, action: newAction}; const props = {...baseProps, action: newAction};
const wrapper = shallow<AbstractCommand>( const wrapper = shallowWithIntl(
<AbstractCommand {...props}/>, <AbstractCommand {...props}/>,
); );
const instance = wrapper.instance() as AbstractCommandClass;
expect(newAction).toHaveBeenCalledTimes(0); expect(newAction).toHaveBeenCalledTimes(0);
const evt = {preventDefault: jest.fn()} as unknown as FormEvent<Element>; const evt = {preventDefault: jest.fn()} as unknown as FormEvent<Element>;
const handleSubmit = wrapper.instance().handleSubmit; const handleSubmit = instance.handleSubmit;
handleSubmit(evt); handleSubmit(evt);
expect(wrapper.state('saving')).toEqual(true); expect(wrapper.state('saving')).toEqual(true);
expect(wrapper.state('clientError')).toEqual(''); expect(wrapper.state('clientError')).toEqual('');

53
webapp/channels/src/components/integrations/abstract_command.tsx
Просмотреть файл

@@ -3,8 +3,7 @@
import React from 'react'; import React from 'react';
import type {ChangeEvent} from 'react'; import type {ChangeEvent} from 'react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage, type MessageDescriptor, injectIntl, type IntlShape} from 'react-intl';
import type {MessageDescriptor} from 'react-intl';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import type {Command} from '@mattermost/types/integrations'; import type {Command} from '@mattermost/types/integrations';
@@ -13,11 +12,9 @@ import type {Team} from '@mattermost/types/teams';
import BackstageHeader from 'components/backstage/components/backstage_header'; import BackstageHeader from 'components/backstage/components/backstage_header';
import ExternalLink from 'components/external_link'; import ExternalLink from 'components/external_link';
import FormError from 'components/form_error'; import FormError from 'components/form_error';
import LocalizedInput from 'components/localized_input/localized_input';
import SpinnerButton from 'components/spinner_button'; import SpinnerButton from 'components/spinner_button';
import {Constants, DeveloperLinks} from 'utils/constants'; import {Constants, DeveloperLinks} from 'utils/constants';
import {t} from 'utils/i18n';
import * as Utils from 'utils/utils'; import * as Utils from 'utils/utils';
const REQUEST_POST = 'P'; const REQUEST_POST = 'P';
@@ -64,6 +61,8 @@ type Props = {
* The async function to run when the action button is pressed * The async function to run when the action button is pressed
*/ */
action: (command: Command) => Promise<void>; action: (command: Command) => Promise<void>;
intl: IntlShape;
} }
type State= { type State= {
@@ -81,7 +80,7 @@ type State= {
autocompleteDescription: string; autocompleteDescription: string;
} }
export default class AbstractCommand extends React.PureComponent<Props, State> { export class AbstractCommand extends React.PureComponent<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@@ -330,14 +329,17 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
/> />
</label> </label>
<div className='col-md-5 col-sm-8'> <div className='col-md-5 col-sm-8'>
<LocalizedInput <input
id='autocompleteHint' id='autocompleteHint'
type='text' type='text'
maxLength={1024} maxLength={1024}
className='form-control' className='form-control'
value={this.state.autocompleteHint} value={this.state.autocompleteHint}
onChange={this.updateAutocompleteHint} onChange={this.updateAutocompleteHint}
placeholder={{id: t('add_command.autocompleteHint.placeholder'), defaultMessage: 'Example: [Patient Name]'}} placeholder={this.props.intl.formatMessage({
id: 'add_command.autocompleteHint.placeholder',
defaultMessage: 'Example: [Patient Name]',
})}
/> />
<div className='form__help'> <div className='form__help'>
<FormattedMessage <FormattedMessage
@@ -361,14 +363,17 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
/> />
</label> </label>
<div className='col-md-5 col-sm-8'> <div className='col-md-5 col-sm-8'>
<LocalizedInput <input
id='description' id='description'
type='text' type='text'
maxLength={128} maxLength={128}
className='form-control' className='form-control'
value={this.state.autocompleteDescription} value={this.state.autocompleteDescription}
onChange={this.updateAutocompleteDescription} onChange={this.updateAutocompleteDescription}
placeholder={{id: t('add_command.autocompleteDescription.placeholder'), defaultMessage: 'Example: "Returns search results for patient records"'}} placeholder={this.props.intl.formatMessage({
id: 'add_command.autocompleteDescription.placeholder',
defaultMessage: 'Example: "Returns search results for patient records"',
})}
/> />
<div className='form__help'> <div className='form__help'>
<FormattedMessage <FormattedMessage
@@ -462,14 +467,17 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
/> />
</label> </label>
<div className='col-md-5 col-sm-8'> <div className='col-md-5 col-sm-8'>
<LocalizedInput <input
id='trigger' id='trigger'
type='text' type='text'
maxLength={Constants.MAX_TRIGGER_LENGTH} maxLength={Constants.MAX_TRIGGER_LENGTH}
className='form-control' className='form-control'
value={this.state.trigger} value={this.state.trigger}
onChange={this.updateTrigger} onChange={this.updateTrigger}
placeholder={{id: t('add_command.trigger.placeholder'), defaultMessage: 'Command trigger e.g. "hello" not including the slash'}} placeholder={this.props.intl.formatMessage({
id: 'add_command.trigger.placeholder',
defaultMessage: 'Command trigger e.g. "hello" not including the slash',
})}
/> />
<div className='form__help'> <div className='form__help'>
<FormattedMessage <FormattedMessage
@@ -515,14 +523,17 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
/> />
</label> </label>
<div className='col-md-5 col-sm-8'> <div className='col-md-5 col-sm-8'>
<LocalizedInput <input
id='url' id='url'
type='text' type='text'
maxLength={1024} maxLength={1024}
className='form-control' className='form-control'
value={this.state.url} value={this.state.url}
onChange={this.updateUrl} onChange={this.updateUrl}
placeholder={{id: t('add_command.url.placeholder'), defaultMessage: 'Must start with http:// or https://'}} placeholder={this.props.intl.formatMessage({
id: 'add_command.url.placeholder',
defaultMessage: 'Must start with http:// or https://',
})}
/> />
<div className='form__help'> <div className='form__help'>
<FormattedMessage <FormattedMessage
@@ -575,14 +586,17 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
/> />
</label> </label>
<div className='col-md-5 col-sm-8'> <div className='col-md-5 col-sm-8'>
<LocalizedInput <input
id='username' id='username'
type='text' type='text'
maxLength={64} maxLength={64}
className='form-control' className='form-control'
value={this.state.username} value={this.state.username}
onChange={this.updateUsername} onChange={this.updateUsername}
placeholder={{id: t('add_command.username.placeholder'), defaultMessage: 'Username'}} placeholder={this.props.intl.formatMessage({
id: 'add_command.username.placeholder',
defaultMessage: 'Username',
})}
/> />
<div className='form__help'> <div className='form__help'>
<FormattedMessage <FormattedMessage
@@ -603,14 +617,17 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
/> />
</label> </label>
<div className='col-md-5 col-sm-8'> <div className='col-md-5 col-sm-8'>
<LocalizedInput <input
id='iconUrl' id='iconUrl'
type='text' type='text'
maxLength={1024} maxLength={1024}
className='form-control' className='form-control'
value={this.state.iconUrl} value={this.state.iconUrl}
onChange={this.updateIconUrl} onChange={this.updateIconUrl}
placeholder={{id: t('add_command.iconUrl.placeholder'), defaultMessage: 'https://www.example.com/myicon.png'}} placeholder={this.props.intl.formatMessage({
id: 'add_command.iconUrl.placeholder',
defaultMessage: 'https://www.example.com/myicon.png',
})}
/> />
<div className='form__help'> <div className='form__help'>
<FormattedMessage <FormattedMessage
@@ -679,3 +696,5 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
); );
} }
} }
export default injectIntl(AbstractCommand);

2
webapp/channels/src/components/integrations/add_command/__snapshots__/add_command.test.tsx.snap
Просмотреть файл

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/integrations/AddCommand should match snapshot 1`] = ` exports[`components/integrations/AddCommand should match snapshot 1`] = `
<AbstractCommand <injectIntl(AbstractCommand)
action={[Function]} action={[Function]}
footer="Save" footer="Save"
header="Add" header="Add"

2
webapp/channels/src/components/integrations/edit_command/__snapshots__/edit_command.test.tsx.snap
Просмотреть файл

@@ -29,7 +29,7 @@ exports[`components/integrations/EditCommand should have match renderExtra 1`] =
`; `;
exports[`components/integrations/EditCommand should match snapshot 1`] = ` exports[`components/integrations/EditCommand should match snapshot 1`] = `
<AbstractCommand <injectIntl(AbstractCommand)
action={[Function]} action={[Function]}
footer={ footer={
Object { Object {