fix(ui) - integrations slack and teams

frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js

@@ -40,11 +40,23 @@ class SlackAddForm extends React.PureComponent {
         <Form>
           <Form.Field>
             <label>Name</label>
-                        <Input name="name" value={instance.name} onChange={this.write} placeholder="Enter any name" type="text" />
+            <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" />
+            <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">
@@ -84,7 +96,9 @@ class SlackAddForm extends React.PureComponent {
 export default connect(
   (state) => ({
     instance: state.getIn(['slack', 'instance']),
-        saving: state.getIn(['slack', 'saveRequest', 'loading']),
+    saving:
+      state.getIn(['slack', 'saveRequest', 'loading']) ||
+      state.getIn(['slack', 'updateRequest', 'loading']),
     errors: state.getIn(['slack', 'saveRequest', 'errors']),
   }),
   { edit, save, init, remove, update }

frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx

@@ -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 }

frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx

@@ -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"

frontend/app/duck/integrations/slack.js

@@ -40,6 +40,7 @@ export default withRequestState(
     {
         fetchRequest: FETCH_LIST,
         saveRequest: SAVE,
+        updateRequest: UPDATE,
         removeRequest: REMOVE,
     },
     reducer

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()),
     };
 }
 

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) {