fix(ui) - integrations slack and teams
This commit is contained in:
Shekar Siri
parent
d34112c54f
commit
1f54b32207
6 changed files with 97 additions and 84 deletions
|
|
@ -6,86 +6,100 @@ import { confirm } from 'UI';
|
|||
import { remove } from 'Duck/integrations/slack';
|
||||
|
||||
class SlackAddForm extends React.PureComponent {
|
||||
componentWillUnmount() {
|
||||
this.props.init({});
|
||||
componentWillUnmount() {
|
||||
this.props.init({});
|
||||
}
|
||||
|
||||
save = () => {
|
||||
const instance = this.props.instance;
|
||||
if (instance.exists()) {
|
||||
this.props.update(this.props.instance);
|
||||
} else {
|
||||
this.props.save(this.props.instance);
|
||||
}
|
||||
};
|
||||
|
||||
save = () => {
|
||||
const instance = this.props.instance;
|
||||
if (instance.exists()) {
|
||||
this.props.update(this.props.instance);
|
||||
} else {
|
||||
this.props.save(this.props.instance);
|
||||
}
|
||||
};
|
||||
remove = async (id) => {
|
||||
if (
|
||||
await confirm({
|
||||
header: 'Confirm',
|
||||
confirmButton: 'Yes, delete',
|
||||
confirmation: `Are you sure you want to permanently delete this channel?`,
|
||||
})
|
||||
) {
|
||||
this.props.remove(id);
|
||||
}
|
||||
};
|
||||
|
||||
remove = async (id) => {
|
||||
if (
|
||||
await confirm({
|
||||
header: 'Confirm',
|
||||
confirmButton: 'Yes, delete',
|
||||
confirmation: `Are you sure you want to permanently delete this channel?`,
|
||||
})
|
||||
) {
|
||||
this.props.remove(id);
|
||||
}
|
||||
};
|
||||
write = ({ target: { name, value } }) => this.props.edit({ [name]: value });
|
||||
|
||||
write = ({ target: { name, value } }) => this.props.edit({ [name]: value });
|
||||
render() {
|
||||
const { instance, saving, errors, onClose } = this.props;
|
||||
return (
|
||||
<div className="p-5" style={{ minWidth: '300px' }}>
|
||||
<Form>
|
||||
<Form.Field>
|
||||
<label>Name</label>
|
||||
<Input
|
||||
name="name"
|
||||
value={instance.name}
|
||||
onChange={this.write}
|
||||
placeholder="Enter any name"
|
||||
type="text"
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label>URL</label>
|
||||
<Input
|
||||
name="endpoint"
|
||||
value={instance.endpoint}
|
||||
onChange={this.write}
|
||||
placeholder="Slack webhook URL"
|
||||
type="text"
|
||||
/>
|
||||
</Form.Field>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex">
|
||||
<Button
|
||||
onClick={this.save}
|
||||
disabled={!instance.validate()}
|
||||
loading={saving}
|
||||
variant="primary"
|
||||
className="float-left mr-2"
|
||||
>
|
||||
{instance.exists() ? 'Update' : 'Add'}
|
||||
</Button>
|
||||
|
||||
render() {
|
||||
const { instance, saving, errors, onClose } = this.props;
|
||||
return (
|
||||
<div className="p-5" style={{ minWidth: '300px' }}>
|
||||
<Form>
|
||||
<Form.Field>
|
||||
<label>Name</label>
|
||||
<Input name="name" value={instance.name} onChange={this.write} placeholder="Enter any name" type="text" />
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label>URL</label>
|
||||
<Input name="endpoint" value={instance.endpoint} onChange={this.write} placeholder="Slack webhook URL" type="text" />
|
||||
</Form.Field>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex">
|
||||
<Button
|
||||
onClick={this.save}
|
||||
disabled={!instance.validate()}
|
||||
loading={saving}
|
||||
variant="primary"
|
||||
className="float-left mr-2"
|
||||
>
|
||||
{instance.exists() ? 'Update' : 'Add'}
|
||||
</Button>
|
||||
|
||||
<Button onClick={onClose}>{'Cancel'}</Button>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => this.remove(instance.webhookId)} disabled={!instance.exists()}>
|
||||
{'Delete'}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
{errors && (
|
||||
<div className="my-3">
|
||||
{errors.map((error) => (
|
||||
<Message visible={errors} size="mini" error key={error}>
|
||||
{error}
|
||||
</Message>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Button onClick={onClose}>{'Cancel'}</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<Button onClick={() => this.remove(instance.webhookId)} disabled={!instance.exists()}>
|
||||
{'Delete'}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
{errors && (
|
||||
<div className="my-3">
|
||||
{errors.map((error) => (
|
||||
<Message visible={errors} size="mini" error key={error}>
|
||||
{error}
|
||||
</Message>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
(state) => ({
|
||||
instance: state.getIn(['slack', 'instance']),
|
||||
saving: state.getIn(['slack', 'saveRequest', 'loading']),
|
||||
errors: state.getIn(['slack', 'saveRequest', 'errors']),
|
||||
}),
|
||||
{ edit, save, init, remove, update }
|
||||
(state) => ({
|
||||
instance: state.getIn(['slack', 'instance']),
|
||||
saving:
|
||||
state.getIn(['slack', 'saveRequest', 'loading']) ||
|
||||
state.getIn(['slack', 'updateRequest', 'loading']),
|
||||
errors: state.getIn(['slack', 'saveRequest', 'errors']),
|
||||
}),
|
||||
{ edit, save, init, remove, update }
|
||||
)(SlackAddForm);
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@ class TeamsAddForm extends React.PureComponent<Props> {
|
|||
}
|
||||
};
|
||||
|
||||
write = ({ target: { name, value } }: { target: { name: string, value: string }}) => this.props.edit({ [name]: value });
|
||||
write = ({ target: { name, value } }: { target: { name: string; value: string } }) =>
|
||||
this.props.edit({ [name]: value });
|
||||
|
||||
render() {
|
||||
const { instance, saving, errors, onClose } = this.props;
|
||||
|
|
@ -107,7 +108,9 @@ class TeamsAddForm extends React.PureComponent<Props> {
|
|||
export default connect(
|
||||
(state: any) => ({
|
||||
instance: state.getIn(['teams', 'instance']),
|
||||
saving: state.getIn(['teams', 'saveRequest', 'loading']),
|
||||
saving:
|
||||
state.getIn(['teams', 'saveRequest', 'loading']) ||
|
||||
state.getIn(['teams', 'updateRequest', 'loading']),
|
||||
errors: state.getIn(['teams', 'saveRequest', 'errors']),
|
||||
}),
|
||||
{ edit, save, init, remove, update }
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ function TeamsChannelList(props: { list: any, edit: (inst: any) => any, onEdit:
|
|||
<div className="text-base text-left">
|
||||
Integrate MS Teams with OpenReplay and share insights with the rest of the team, directly from the recording page.
|
||||
</div>
|
||||
<DocLink className="mt-4 text-base" label="Integrate MS Teams" url="https://docs.openreplay.com/integrations/ms-teams" />
|
||||
<DocLink className="mt-4 text-base" label="Integrate MS Teams" url="https://docs.openreplay.com/integrations/msteams" />
|
||||
</div>
|
||||
}
|
||||
size="small"
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ export default withRequestState(
|
|||
{
|
||||
fetchRequest: FETCH_LIST,
|
||||
saveRequest: SAVE,
|
||||
updateRequest: UPDATE,
|
||||
removeRequest: REMOVE,
|
||||
},
|
||||
reducer
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export default withRequestState(
|
|||
{
|
||||
fetchRequest: FETCH_LIST,
|
||||
saveRequest: SAVE,
|
||||
updateRequest: UPDATE,
|
||||
removeRequest: REMOVE,
|
||||
},
|
||||
reducer
|
||||
|
|
@ -63,7 +64,7 @@ export function save(instance) {
|
|||
export function update(instance) {
|
||||
return {
|
||||
types: UPDATE.toArray(),
|
||||
call: (client) => client.put(`/integrations/msteams/${instance.webhookId}`, instance.toData()),
|
||||
call: (client) => client.post(`/integrations/msteams/${instance.webhookId}`, instance.toData()),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,7 @@ export function validateIP(value) {
|
|||
|
||||
export function validateURL(value) {
|
||||
if (typeof value !== 'string') return false;
|
||||
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
|
||||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
|
||||
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
|
||||
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
|
||||
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
|
||||
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
|
||||
return !!pattern.test(value);
|
||||
return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value);
|
||||
}
|
||||
|
||||
function escapeRegexp(s) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue