MM-47091 : Migrate "components/integrations/abstract_outgoing_webhook.jsx" and tests to TypeScript (#23977)

This commit is contained in:
Austin DeNoble 2023-07-20 08:59:57 -04:00 committed by GitHub
parent e377d985cd
commit 949a7875cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 309 additions and 156 deletions

View File

@ -6,7 +6,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
>
<BackstageHeader>
<Link
to="/test/integrations/outgoing_webhooks"
to="/team_name/integrations/outgoing_webhooks"
>
<MemoizedFormattedMessage
defaultMessage="Outgoing Webhooks"
@ -14,8 +14,8 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
/>
</Link>
<MemoizedFormattedMessage
defaultMessage="add"
id="add"
defaultMessage="Header"
id="header_id"
/>
</BackstageHeader>
<div
@ -43,10 +43,10 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
<input
className="form-control"
id="displayName"
maxLength="64"
maxLength={64}
onChange={[Function]}
type="text"
value=""
value="testOutgoingWebhook"
/>
<div
className="form__help"
@ -76,10 +76,10 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
<input
className="form-control"
id="description"
maxLength="500"
maxLength={500}
onChange={[Function]}
type="text"
value=""
value="testing"
/>
<div
className="form__help"
@ -109,7 +109,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
<select
className="form-control"
onChange={[Function]}
value="application/x-www-form-urlencoded"
value="test_content_type"
>
<option
value="application/x-www-form-urlencoded"
@ -164,10 +164,11 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
className="col-md-5 col-sm-8"
>
<Connect(ChannelSelect)
id="channelId"
onChange={[Function]}
selectDm={false}
selectOpen={true}
value=""
selectPrivate={false}
value="88cxd9wpzpbpfp8pad78xj75pr"
/>
<div
className="form__help"
@ -197,10 +198,13 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
<textarea
className="form-control"
id="triggerWords"
maxLength="1000"
maxLength={1000}
onChange={[Function]}
rows="3"
value=""
rows={3}
value="test
trigger
word
"
/>
<div
className="form__help"
@ -229,6 +233,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
>
<select
className="form-control"
id="triggerWhen"
onChange={[Function]}
value={0}
>
@ -271,10 +276,12 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
<textarea
className="form-control"
id="callbackUrls"
maxLength="1000"
maxLength={1000}
onChange={[Function]}
rows="3"
value=""
rows={3}
value="callbackUrl1.com
callbackUrl2.com
"
/>
<div
className="form__help"
@ -314,7 +321,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
/>
<Link
className="btn btn-link btn-sm"
to="/test/integrations/outgoing_webhooks"
to="/team_name/integrations/outgoing_webhooks"
>
<MemoizedFormattedMessage
defaultMessage="Cancel"
@ -326,12 +333,12 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
id="saveWebhook"
onClick={[Function]}
spinning={false}
spinningText="loading"
spinningText="Loading"
type="submit"
>
<MemoizedFormattedMessage
defaultMessage="save"
id="save"
defaultMessage="Footer"
id="footer_id"
/>
</SpinnerButton>
</div>

View File

@ -9,6 +9,8 @@ import ChannelSelect from 'components/channel_select';
import AbstractIncomingWebhook from 'components/integrations/abstract_incoming_webhook';
import {Team} from '@mattermost/types/teams';
type AbstractIncomingWebhookProps = React.ComponentProps<typeof AbstractIncomingWebhook>;
describe('components/integrations/AbstractIncomingWebhook', () => {
const team: Team = {id: 'team_id',
create_at: 0,
@ -55,7 +57,7 @@ describe('components/integrations/AbstractIncomingWebhook', () => {
},
);
const requiredProps = {
const requiredProps: AbstractIncomingWebhookProps = {
team,
header,
footer,
@ -80,10 +82,9 @@ describe('components/integrations/AbstractIncomingWebhook', () => {
});
test('should match snapshot, displays client error when no initial hook', () => {
const newInitialHook = {};
const props = {...requiredProps, initialHook: newInitialHook};
const props = {...requiredProps};
delete props.initialHook;
const wrapper = shallow(<AbstractIncomingWebhook {...props}/>);
wrapper.find('.btn-primary').simulate('click', {preventDefault() {
return jest.fn();
}});

View File

@ -55,7 +55,7 @@ interface Props {
/**
* The hook used to set the initial state
*/
initialHook?: IncomingWebhook | Record<string, never>;
initialHook?: IncomingWebhook;
/**
* Whether to allow configuration of the default post username.
@ -77,10 +77,10 @@ export default class AbstractIncomingWebhook extends PureComponent<Props, State>
constructor(props: Props | Readonly<Props>) {
super(props);
this.state = this.getStateFromHook(this.props.initialHook || {});
this.state = this.getStateFromHook(this.props.initialHook);
}
getStateFromHook = (hook: IncomingWebhook | Record<string, never>) => {
getStateFromHook = (hook?: IncomingWebhook) => {
return {
displayName: hook?.display_name || '',
description: hook?.description || '',

View File

@ -1,42 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
describe('components/integrations/AbstractOutgoingWebhook', () => {
const emptyFunction = jest.fn();
const props = {
team: {
id: 'test-team-id',
name: 'test',
},
action: emptyFunction,
enablePostUsernameOverride: false,
enablePostIconOverride: false,
header: {id: 'add', defaultMessage: 'add'},
footer: {id: 'save', defaultMessage: 'save'},
loading: {id: 'loading', defaultMessage: 'loading'},
renderExtra: '',
serverError: '',
};
test('should match snapshot', () => {
const wrapper = shallow(<AbstractOutgoingWebhook {...props}/>);
expect(wrapper).toMatchSnapshot();
});
test('should render username in case of enablePostUsernameOverride is true ', () => {
const usernameTrueProps = {...props, enablePostUsernameOverride: true};
const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
expect(wrapper.find('#username')).toHaveLength(1);
});
test('should render username in case of enablePostUsernameOverride is true ', () => {
const iconUrlTrueProps = {...props, enablePostIconOverride: true};
const wrapper = shallow(<AbstractOutgoingWebhook {...iconUrlTrueProps}/>);
expect(wrapper.find('#iconURL')).toHaveLength(1);
});
});

View File

@ -0,0 +1,165 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
import ChannelSelect from 'components/channel_select';
import {Team} from '@mattermost/types/teams';
describe('components/integrations/AbstractOutgoingWebhook', () => {
const team: Team = {
id: 'team_id',
create_at: 0,
update_at: 0,
delete_at: 0,
display_name: 'team_name',
name: 'team_name',
description: 'team_description',
email: 'team_email',
type: 'I',
company_name: 'team_company_name',
allowed_domains: 'team_allowed_domains',
invite_id: 'team_invite_id',
allow_open_invite: false,
scheme_id: 'team_scheme_id',
group_constrained: false,
};
const header = {id: 'header_id', defaultMessage: 'Header'};
const footer = {id: 'footer_id', defaultMessage: 'Footer'};
const loading = {id: 'loading_id', defaultMessage: 'Loading'};
const initialHook = {
display_name: 'testOutgoingWebhook',
channel_id: '88cxd9wpzpbpfp8pad78xj75pr',
creator_id: 'test_creator_id',
description: 'testing',
id: 'test_id',
team_id: 'test_team_id',
token: 'test_token',
trigger_words: ['test', 'trigger', 'word'],
trigger_when: 0,
callback_urls: ['callbackUrl1.com', 'callbackUrl2.com'],
content_type: 'test_content_type',
create_at: 0,
update_at: 0,
delete_at: 0,
user_id: 'test_user_id',
username: '',
icon_url: '',
channel_locked: false,
};
const action = jest.fn().mockImplementation(
() => {
return new Promise<void>((resolve) => {
process.nextTick(() => resolve());
});
},
);
const requiredProps = {
team,
header,
footer,
loading,
initialHook,
enablePostUsernameOverride: false,
enablePostIconOverride: false,
renderExtra: '',
serverError: '',
action,
};
test('should match snapshot', () => {
const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
expect(wrapper).toMatchSnapshot();
});
test('should not render username in case of enablePostUsernameOverride is false ', () => {
const usernameTrueProps = {...requiredProps};
const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
expect(wrapper.find('#username')).toHaveLength(0);
});
test('should not render post icon override in case of enablePostIconOverride is false ', () => {
const iconUrlTrueProps = {...requiredProps};
const wrapper = shallow(<AbstractOutgoingWebhook {...iconUrlTrueProps}/>);
expect(wrapper.find('#iconURL')).toHaveLength(0);
});
test('should render username in case of enablePostUsernameOverride is true ', () => {
const usernameTrueProps = {...requiredProps, enablePostUsernameOverride: true};
const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
expect(wrapper.find('#username')).toHaveLength(1);
});
test('should render post icon override in case of enablePostIconOverride is true ', () => {
const iconUrlTrueProps = {...requiredProps, enablePostIconOverride: true};
const wrapper = shallow(<AbstractOutgoingWebhook {...iconUrlTrueProps}/>);
expect(wrapper.find('#iconURL')).toHaveLength(1);
});
test('should update state.channelId when on channel change', () => {
const newChannelId = 'new_channel_id';
const evt = {
preventDefault: jest.fn(),
target: {value: newChannelId},
};
const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
wrapper.find(ChannelSelect).simulate('change', evt);
expect(wrapper.state('channelId')).toBe(newChannelId);
});
test('should update state.description when on description change', () => {
const newDescription = 'new_description';
const evt = {
preventDefault: jest.fn(),
target: {value: newDescription},
};
const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
wrapper.find('#description').simulate('change', evt);
expect(wrapper.state('description')).toBe(newDescription);
});
test('should update state.username on post username change', () => {
const usernameTrueProps = {...requiredProps, enablePostUsernameOverride: true};
const newUsername = 'new_username';
const evt = {
preventDefault: jest.fn(),
target: {value: newUsername},
};
const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
wrapper.find('#username').simulate('change', evt);
expect(wrapper.state('username')).toBe(newUsername);
});
test('should update state.triggerWhen on selection change', () => {
const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
expect(wrapper.state('triggerWhen')).toBe(0);
const selector = wrapper.find('#triggerWhen');
selector.simulate('change', {target: {value: 1}});
console.log('selector: ', selector.debug());
expect(wrapper.state('triggerWhen')).toBe(1);
});
test('should call action function', () => {
const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
wrapper.find('#displayName').simulate('change', {target: {value: 'name'}});
wrapper.find('.btn-primary').simulate('click', {preventDefault() {
return jest.fn();
}});
expect(action).toBeCalled();
expect(action).toHaveBeenCalledTimes(1);
});
});

View File

@ -1,83 +1,97 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import PropTypes from 'prop-types';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import React, {ChangeEventHandler, FormEvent, MouseEvent} from 'react';
import {FormattedMessage, MessageDescriptor} from 'react-intl';
import {Link} from 'react-router-dom';
import {localizeMessage} from 'utils/utils';
import {Team} from '@mattermost/types/teams';
import BackstageHeader from 'components/backstage/components/backstage_header';
import ChannelSelect from 'components/channel_select';
import FormError from 'components/form_error';
import SpinnerButton from 'components/spinner_button';
import ExternalLink from 'components/external_link';
import {DocLinks} from 'utils/constants';
import {OutgoingWebhook} from '@mattermost/types/integrations';
export default class AbstractOutgoingWebhook extends React.PureComponent {
static propTypes = {
interface State {
callbackUrls: string;
channelId: string;
clientError: JSX.Element | null;
contentType: string;
description: string;
displayName: string;
iconURL: string;
saving: boolean;
triggerWhen: number;
triggerWords: string;
username: string;
}
/**
* The current team
*/
team: PropTypes.object.isRequired,
interface Props {
/**
* The header text to render, has id and defaultMessage
*/
header: PropTypes.object.isRequired,
/**
* The current team
*/
team: Team;
/**
* The footer text to render, has id and defaultMessage
*/
footer: PropTypes.object.isRequired,
/**
* The header text to render, has id and defaultMessage
*/
header: MessageDescriptor;
/**
* The spinner loading text to render, has id and defaultMessage
*/
loading: PropTypes.object.isRequired,
/**
* The footer text to render, has id and defaultMessage
*/
footer: MessageDescriptor;
/**
* Any extra component/node to render
*/
renderExtra: PropTypes.node.isRequired,
/**
* The spinner loading text to render, has id and defaultMessage
*/
loading: MessageDescriptor;
/**
* The server error text after a failed action
*/
serverError: PropTypes.string.isRequired,
/**
* Any extra component/node to render
*/
renderExtra: React.ReactNode;
/**
* The hook used to set the initial state
*/
initialHook: PropTypes.object,
/**
* The server error text after a failed action
*/
serverError: string;
/**
* The async function to run when the action button is pressed
*/
action: PropTypes.func.isRequired,
/**
* The hook used to set the initial state
*/
initialHook?: OutgoingWebhook;
/**
* Whether to allow configuration of the default post username.
*/
enablePostUsernameOverride: PropTypes.bool.isRequired,
/**
* The async function to run when the action button is pressed
*/
action: (hook: OutgoingWebhook) => Promise<void>;
/**
* Whether to allow configuration of the default post icon.
*/
enablePostIconOverride: PropTypes.bool.isRequired,
};
/**
* Whether to allow configuration of the default post username.
*/
enablePostUsernameOverride: boolean;
constructor(props) {
/**
* Whether to allow configuration of the default post icon.
*/
enablePostIconOverride: boolean;
}
export default class AbstractOutgoingWebhook extends React.PureComponent<Props, State> {
constructor(props: Props | Readonly<Props>) {
super(props);
this.state = this.getStateFromHook(this.props.initialHook || {});
this.state = this.getStateFromHook(this.props.initialHook);
}
getStateFromHook = (hook) => {
getStateFromHook = (hook?: OutgoingWebhook) => {
let triggerWords = '';
if (hook.trigger_words) {
if (hook?.trigger_words) {
let i = 0;
for (i = 0; i < hook.trigger_words.length; i++) {
triggerWords += hook.trigger_words[i] + '\n';
@ -85,7 +99,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
}
let callbackUrls = '';
if (hook.callback_urls) {
if (hook?.callback_urls) {
let i = 0;
for (i = 0; i < hook.callback_urls.length; i++) {
callbackUrls += hook.callback_urls[i] + '\n';
@ -93,21 +107,21 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
}
return {
displayName: hook.display_name || '',
description: hook.description || '',
contentType: hook.content_type || 'application/x-www-form-urlencoded',
channelId: hook.channel_id || '',
displayName: hook?.display_name || '',
description: hook?.description || '',
contentType: hook?.content_type || 'application/x-www-form-urlencoded',
channelId: hook?.channel_id || '',
triggerWords,
triggerWhen: hook.trigger_when || 0,
triggerWhen: hook?.trigger_when || 0,
callbackUrls,
saving: false,
clientError: null,
username: hook.username || '',
iconURL: hook.icon_url || '',
username: hook?.username || '',
iconURL: hook?.icon_url || '',
};
};
handleSubmit = (e) => {
handleSubmit = (e: MouseEvent<HTMLElement> | FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (this.state.saving) {
@ -116,7 +130,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
this.setState({
saving: true,
clientError: '',
clientError: null,
});
const triggerWords = [];
@ -171,67 +185,73 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
team_id: this.props.team.id,
channel_id: this.state.channelId,
trigger_words: triggerWords,
trigger_when: parseInt(this.state.triggerWhen, 10),
trigger_when: this.state.triggerWhen,
callback_urls: callbackUrls,
display_name: this.state.displayName,
content_type: this.state.contentType,
description: this.state.description,
username: this.state.username,
icon_url: this.state.iconURL,
id: this.props.initialHook?.id || '',
create_at: this.props.initialHook?.create_at || 0,
update_at: this.props.initialHook?.update_at || 0,
delete_at: this.props.initialHook?.delete_at || 0,
creator_id: this.props.initialHook?.creator_id || '',
token: this.props.initialHook?.token || '',
};
this.props.action(hook).then(() => this.setState({saving: false}));
};
updateDisplayName = (e) => {
updateDisplayName: ChangeEventHandler<HTMLInputElement> = (e) => {
this.setState({
displayName: e.target.value,
});
};
updateDescription = (e) => {
updateDescription: ChangeEventHandler<HTMLInputElement> = (e) => {
this.setState({
description: e.target.value,
});
};
updateContentType = (e) => {
updateContentType: ChangeEventHandler<HTMLSelectElement> = (e) => {
this.setState({
contentType: e.target.value,
});
};
updateChannelId = (e) => {
updateChannelId: ChangeEventHandler<HTMLSelectElement> = (e) => {
this.setState({
channelId: e.target.value,
});
};
updateTriggerWords = (e) => {
updateTriggerWords: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
this.setState({
triggerWords: e.target.value,
});
};
updateTriggerWhen = (e) => {
updateTriggerWhen: ChangeEventHandler<HTMLSelectElement> = (e) => {
this.setState({
triggerWhen: e.target.value,
triggerWhen: parseInt(e.target.value, 10),
});
};
updateCallbackUrls = (e) => {
updateCallbackUrls: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
this.setState({
callbackUrls: e.target.value,
});
};
updateUsername = (e) => {
updateUsername: ChangeEventHandler<HTMLInputElement> = (e) => {
this.setState({
username: e.target.value,
});
};
updateIconURL = (e) => {
updateIconURL: ChangeEventHandler<HTMLInputElement> = (e) => {
this.setState({
iconURL: e.target.value,
});
@ -241,9 +261,9 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
const contentTypeOption1 = 'application/x-www-form-urlencoded';
const contentTypeOption2 = 'application/json';
var headerToRender = this.props.header;
var footerToRender = this.props.footer;
var renderExtra = this.props.renderExtra;
const headerToRender = this.props.header;
const footerToRender = this.props.footer;
const renderExtra = this.props.renderExtra;
return (
<div className='backstage-content'>
@ -278,7 +298,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
<input
id='displayName'
type='text'
maxLength='64'
maxLength={64}
className='form-control'
value={this.state.displayName}
onChange={this.updateDisplayName}
@ -305,7 +325,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
<input
id='description'
type='text'
maxLength='500'
maxLength={500}
className='form-control'
value={this.state.description}
onChange={this.updateDescription}
@ -377,10 +397,11 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
</label>
<div className='col-md-5 col-sm-8'>
<ChannelSelect
id='channelId'
value={this.state.channelId}
onChange={this.updateChannelId}
selectOpen={true}
selectPrivate={false}
selectDm={false}
/>
<div className='form__help'>
<FormattedMessage
@ -403,8 +424,8 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
<div className='col-md-5 col-sm-8'>
<textarea
id='triggerWords'
rows='3'
maxLength='1000'
rows={3}
maxLength={1000}
className='form-control'
value={this.state.triggerWords}
onChange={this.updateTriggerWords}
@ -429,6 +450,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
</label>
<div className='col-md-5 col-sm-8'>
<select
id='triggerWhen'
className='form-control'
value={this.state.triggerWhen}
onChange={this.updateTriggerWhen}
@ -465,8 +487,8 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
<div className='col-md-5 col-sm-8'>
<textarea
id='callbackUrls'
rows='3'
maxLength='1000'
rows={3}
maxLength={1000}
className='form-control'
value={this.state.callbackUrls}
onChange={this.updateCallbackUrls}
@ -507,7 +529,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
<input
id='username'
type='text'
maxLength='22'
maxLength={22}
className='form-control'
value={this.state.username}
onChange={this.updateUsername}
@ -536,7 +558,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
<input
id='iconURL'
type='text'
maxLength='1024'
maxLength={1024}
className='form-control'
value={this.state.iconURL}
onChange={this.updateIconURL}
@ -568,7 +590,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
className='btn btn-primary'
type='submit'
spinning={this.state.saving}
spinningText={localizeMessage(this.props.loading.id, this.props.loading.defaultMessage)}
spinningText={localizeMessage(this.props.loading.id as string, this.props.loading.defaultMessage as string)}
onClick={this.handleSubmit}
id='saveWebhook'
>

View File

@ -6,7 +6,7 @@ import {useHistory} from 'react-router-dom';
import {t} from 'utils/i18n';
import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook.jsx';
import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
import {Team} from '@mattermost/types/teams';
import {OutgoingWebhook} from '@mattermost/types/integrations';

View File

@ -10,7 +10,7 @@ import {ServerError} from '@mattermost/types/errors';
import {getHistory} from 'utils/browser_history';
import ConfirmModal from 'components/confirm_modal';
import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook.jsx';
import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
import LoadingScreen from 'components/loading_screen';
const HEADER = {id: 'integrations.edit', defaultMessage: 'Edit'};