From 1f54b322075e27f6fef5053a0876ea52ce897f77 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 24 Jan 2023 12:30:47 +0100 Subject: [PATCH] fix(ui) - integrations slack and teams --- .../Integrations/SlackAddForm/SlackAddForm.js | 160 ++++++++++-------- .../Integrations/Teams/TeamsAddForm.tsx | 7 +- .../Integrations/Teams/TeamsChannelList.tsx | 2 +- frontend/app/duck/integrations/slack.js | 1 + frontend/app/duck/integrations/teams.js | 3 +- frontend/app/validate.js | 8 +- 6 files changed, 97 insertions(+), 84 deletions(-) diff --git a/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js b/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js index f018da3e5..26cfc9520 100644 --- a/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js +++ b/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js @@ -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 ( +
+
+ + + + + + + + +
+
+ - render() { - const { instance, saving, errors, onClose } = this.props; - return ( -
- - - - - - - - - -
-
- - - -
- - -
- - - {errors && ( -
- {errors.map((error) => ( - - {error} - - ))} -
- )} +
- ); - } + + +
+ + + {errors && ( +
+ {errors.map((error) => ( + + {error} + + ))} +
+ )} +
+ ); + } } 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); diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx index c99ed38f2..f13efc535 100644 --- a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx +++ b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx @@ -42,7 +42,8 @@ class TeamsAddForm extends React.PureComponent { } }; - 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 { 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 } diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx index 6b9533ca5..942e1e32c 100644 --- a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx +++ b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx @@ -20,7 +20,7 @@ function TeamsChannelList(props: { list: any, edit: (inst: any) => any, onEdit:
Integrate MS Teams with OpenReplay and share insights with the rest of the team, directly from the recording page.
- +
} size="small" diff --git a/frontend/app/duck/integrations/slack.js b/frontend/app/duck/integrations/slack.js index b8c4102a7..24f25be11 100644 --- a/frontend/app/duck/integrations/slack.js +++ b/frontend/app/duck/integrations/slack.js @@ -40,6 +40,7 @@ export default withRequestState( { fetchRequest: FETCH_LIST, saveRequest: SAVE, + updateRequest: UPDATE, removeRequest: REMOVE, }, reducer diff --git a/frontend/app/duck/integrations/teams.js b/frontend/app/duck/integrations/teams.js index c4158f52b..f9e22412e 100644 --- a/frontend/app/duck/integrations/teams.js +++ b/frontend/app/duck/integrations/teams.js @@ -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()), }; } diff --git a/frontend/app/validate.js b/frontend/app/validate.js index 76d588ac9..0e052f5fc 100644 --- a/frontend/app/validate.js +++ b/frontend/app/validate.js @@ -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) {