Merge branch 'main' into dev

backend/Dockerfile

@@ -38,7 +38,8 @@ ENV TZ=UTC \
     GROUP_CACHE=cache \
     AWS_REGION_WEB=eu-central-1 \
     AWS_REGION_IOS=eu-west-1 \
-    AWS_REGION_ASSETS=eu-central-1
+    AWS_REGION_ASSETS=eu-central-1 \
+    ASSETS_SIZE_LIMIT=6291456
 
 
 ARG SERVICE_NAME

backend/pkg/env/vars.go

@@ -36,6 +36,10 @@ func Uint64(key string) uint64 {
 	return n
 }
 
+func Int(key string) int {
+	return int(Uint64(key))
+}
+
 func Bool(key string) bool {
 	v := String(key)
 	if v != "true" && v != "false" {

backend/services/assets/cacher/cacher.go

@@ -17,7 +17,6 @@ import (
 	"openreplay/backend/pkg/storage"
 )
 
-const BODY_LIMIT = 6 * (1 << 20) // 6 Mb
 const MAX_CACHE_DEPTH = 5
 
 type cacher struct {
@@ -26,9 +25,10 @@ type cacher struct {
 	httpClient *http.Client 	// Docs: "Clients are safe for concurrent use by multiple goroutines."
 	rewriter *assets.Rewriter // Read only
 	Errors chan error
+	sizeLimit int
 }
 
-func NewCacher(region string, bucket string, origin string) *cacher {
+func NewCacher(region string, bucket string, origin string, sizeLimit int) *cacher {
 	rewriter := assets.NewRewriter(origin)
 	return &cacher{
 		timeoutMap: newTimeoutMap(),
@@ -39,8 +39,9 @@ func NewCacher(region string, bucket string, origin string) *cacher {
         TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
       },
 		},
-		rewriter: rewriter,
-		Errors: make(chan error),
+		rewriter:   rewriter,
+		Errors:     make(chan error),
+		sizeLimit:  sizeLimit,
 	}
 }
 
@@ -72,12 +73,12 @@ func (c *cacher) cacheURL(requestURL string, sessionID uint64, depth byte, conte
 		c.Errors <- errors.Wrap(fmt.Errorf("Status code is %v, ", res.StatusCode), context)
 		return
 	}
-	data, err := ioutil.ReadAll(io.LimitReader(res.Body, BODY_LIMIT+1))
+	data, err := ioutil.ReadAll(io.LimitReader(res.Body, int64(c.sizeLimit+1)))
 	if err != nil {
 		c.Errors <- errors.Wrap(err, context)
 		return
 	}
-	if len(data) > BODY_LIMIT {
+	if len(data) > c.sizeLimit {
 		c.Errors <- errors.Wrap(errors.New("Maximum size exceeded"), context)
 		return
 	}

backend/services/assets/main.go

@@ -26,6 +26,7 @@ func main() {
 		env.String("AWS_REGION"),
 		env.String("S3_BUCKET_ASSETS"),
 		env.String("ASSETS_ORIGIN"),
+		env.Int("ASSETS_SIZE_LIMIT"),
 	)
 
 	consumer := queue.NewMessageConsumer(

frontend/app/components/BugFinder/SessionCaptureRate/SessionCaptureRate.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Input, Slider, Button, Popup, CircularLoader } from 'UI';
 import { saveCaptureRate, editCaptureRate } from 'Duck/watchdogs';
 import { connect } from 'react-redux';
@@ -12,8 +12,10 @@ function isPercent(val) {
 
 const SessionCaptureRate = props => {
   const { captureRate, saveCaptureRate, editCaptureRate, loading, onClose } = props;
-  const sampleRate = captureRate.get('rate');
-  if (sampleRate == null) return null;
+  const _sampleRate = captureRate.get('rate');
+  if (_sampleRate == null) return null;
+
+  const [sampleRate, setSampleRate] = useState(_sampleRate)
 
   const captureAll = captureRate.get('captureAll');
 
@@ -46,7 +48,7 @@ const SessionCaptureRate = props => {
             name="sampleRate"
             disabled={ captureAll }
             value={ captureAll ? '100' : sampleRate }            
-            onChange={ ({ target: { value }}) => isPercent(value) && editCaptureRate(+value) }            
+            onChange={ ({ target: { value }}) => isPercent(value) && setSampleRate(+value) }            
             size="small"
             className={stl.inputField}
           />

frontend/app/components/BugFinder/WatchDogs/components/RehydrateSlidePanel/RehydrateSlidePanel.js

@@ -26,6 +26,7 @@ const RehydrateSlidePanel = props => {
       onClose={ onClose }
       size="small"
       content={
+        isModalDisplayed && (
         <div className="px-4">
           <hr className="mb-3" />
           <div>
@@ -33,6 +34,7 @@ const RehydrateSlidePanel = props => {
             <SessionCaptureRate onClose={ onClose } />
           </div>          
         </div>
+        )
       }      
     />
   );

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

@@ -75,7 +75,7 @@ export default class IntegrationForm extends React.PureComponent {
         <Form>
           {!ignoreProject &&
             <Form.Field>
-              <label>{ 'Site' }</label>
+              <label>{ 'OpenReplay Project' }</label>
               <SiteDropdown
                 value={ currentSiteId }
                 onChange={ this.onChangeSelect }

frontend/app/components/Header/SiteDropdown.js

@@ -5,6 +5,7 @@ import { hasSiteId, siteChangeAvaliable } from 'App/routes';
 import { STATUS_COLOR_MAP, GREEN } from 'Types/site';
 import { Icon, SlideModal } from 'UI';
 import { pushNewSite } from 'Duck/user'
+import { init } from 'Duck/site';
 import styles from './siteDropdown.css';
 import cn from 'classnames';
 import NewSiteForm from '../Client/Sites/NewSiteForm';
@@ -15,7 +16,8 @@ import NewSiteForm from '../Client/Sites/NewSiteForm';
   siteId: state.getIn([ 'user', 'siteId' ]),
 }), {
   setSiteId,
-  pushNewSite
+  pushNewSite,
+  init
 })
 export default class SiteDropdown extends React.PureComponent {
   state = { showProductModal: false }
@@ -28,6 +30,11 @@ export default class SiteDropdown extends React.PureComponent {
     }
   };
 
+  newSite = () => {
+    this.props.init({})
+    this.setState({showProductModal: true})
+  }
+
   render() {
     const { sites, siteId, location: { pathname } } = this.props;
     const { showProductModal } = this.state;
@@ -62,7 +69,7 @@ export default class SiteDropdown extends React.PureComponent {
           </ul>
           <div
             className={cn(styles.btnNew, 'flex items-center justify-center py-3 cursor-pointer')}
-            onClick={() => this.setState({showProductModal: true})}
+            onClick={this.newSite}
           >
             <Icon 
               name="plus"
@@ -78,7 +85,7 @@ export default class SiteDropdown extends React.PureComponent {
           title="New Project"
           size="small"
           isDisplayed={ showProductModal }
-          content={ <NewSiteForm onClose={ this.closeModal } /> }
+          content={ showProductModal && <NewSiteForm onClose={ this.closeModal } /> }
           onClose={ this.closeModal }          
         />
       </div>

frontend/app/components/Session_/EventsBlock/EventSearch/EventSearch.js

@@ -18,6 +18,7 @@ export default function EventSearch(props) {
               value={value}
               onChange={onChange}
               style={{ height: '32px' }}
+              autocomplete="off"
             />
             <div
               onClick={() => { setShowSearch(!showSearch); clearSearch() }}

frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js

@@ -12,7 +12,7 @@ const tracker = new Tracker({
 tracker.start();`
 
 function InstallDocs({ site }) {
-  const _usageCode = usageCode.replace('PROJECT_ID', site.projectKeKey)
+  const _usageCode = usageCode.replace('PROJECT_ID', site.projectKey)
   return (
     <div>
       <div className="mb-3">

tracker/tracker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "keywords": [
     "logging",
     "replay"

tracker/tracker/src/main/index.ts

@@ -53,7 +53,7 @@ function processOptions(obj: any): obj is Options {
       }
     } else {
       console.warn("OpenReplay: projectKey is expected to have a string type.")
-      obj.projectKey = obj.projectID.toString()
+      obj.projectKey = obj.projectKey.toString()
     }
   }
   if (typeof obj.sessionToken !== 'string' && obj.sessionToken != null) {