jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #682 from openreplay/fix-session-settings-admin

Browse source 
fix(ui) - session capture rate settings restrict to admin
This commit is contained in:
Shekar Siri 2022-08-17 20:22:24 +02:00 • committed by GitHub
commit 638a9dd52c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
View file

@ -1,76 +1,84 @@
import React, { useEffect, useState } from 'react';
import { Icon, Toggler, Button, Input, Loader } from 'UI';
import { Icon, Toggler, Button, Input, Loader, Popup } from 'UI';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { connect } from 'react-redux';
import cn from 'classnames';
function CaptureRate() {
function CaptureRate({ isAdmin = false }) {
const { settingsStore } = useStore();
const [changed, setChanged] = useState(false);
const [sessionSettings] = useState(settingsStore.sessionSettings)
const [loading] = useState(settingsStore.loadingCaptureRate)
const [sessionSettings] = useState(settingsStore.sessionSettings);
const [loading] = useState(settingsStore.loadingCaptureRate);
const captureRate = sessionSettings.captureRate;
const setCaptureRate = sessionSettings.changeCaptureRate
const captureAll = sessionSettings.captureAll
const setCaptureAll = sessionSettings.changeCaptureAll
const setCaptureRate = sessionSettings.changeCaptureRate;
const captureAll = sessionSettings.captureAll;
const setCaptureAll = sessionSettings.changeCaptureAll;
useEffect(() => {
settingsStore.fetchCaptureRate()
}, [])
settingsStore.fetchCaptureRate();
}, []);
const changeCaptureRate = (input: string) => {
setChanged(true);
setCaptureRate(input);
}
};
const toggleRate = () => {
const newValue = !captureAll;
setChanged(true)
if (newValue === true) {
setChanged(true);
if (newValue === true) {
const updateObj = {
rate:"100",
rate: '100',
captureAll: true,
}
settingsStore.saveCaptureRate(updateObj)
};
settingsStore.saveCaptureRate(updateObj);
} else {
setCaptureAll(newValue);
}
}
};
return (
<Loader loading={loading}>
<h3 className="text-lg">Recordings</h3>
<div className="my-1">The percentage of session you want to capture</div>
<div className="mt-2 mb-4 mr-1 flex items-center">
<Toggler
checked={captureAll}
name="test"
onChange={toggleRate}
/>
<span className="ml-2" style={{ color: captureAll ? '#000000' : '#999' }}>100%</span>
</div>
{!captureAll && (
<div className="flex items-center">
<div className="relative">
<Input
type="number"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => changeCaptureRate(e.target.value)}
value={captureRate.toString()}
style={{ height: '38px', width: '100px'}}
disabled={captureAll}
min={0}
max={100}
/>
<Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
</div>
<Popup content="You don't have permission to change." disabled={isAdmin} delay={0}>
<div className={cn('mt-2 mb-4 mr-1 flex items-center', { disabled: !isAdmin })}>
<Toggler checked={captureAll} name="test" onChange={toggleRate} />
<span className="ml-2" style={{ color: captureAll ? '#000000' : '#999' }}>
100%
</span>
</div>
</Popup>
{!captureAll && (
<div className="flex items-center">
<Popup content="You don't have permission to change." disabled={isAdmin} delay={0}>
<div className={cn("relative", { 'disabled' : !isAdmin })}>
<Input
type="number"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => changeCaptureRate(e.target.value)}
value={captureRate.toString()}
style={{ height: '38px', width: '100px' }}
disabled={captureAll}
min={0}
max={100}
/>
<Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
</div>
</Popup>
<span className="mx-3">of the sessions</span>
<Button
disabled={!changed}
variant="outline"
onClick={() => settingsStore.saveCaptureRate({
rate: captureRate,
captureAll,
}).finally(() => setChanged(false))}
onClick={() =>
settingsStore
.saveCaptureRate({
rate: captureRate,
captureAll,
})
.finally(() => setChanged(false))
}
>
Update
</Button>
@ -80,4 +88,6 @@ function CaptureRate() {
);
}
export default observer(CaptureRate);
export default connect((state: any) => ({
isAdmin: state.getIn(['user', 'account', 'admin']) || state.getIn(['user', 'account', 'superAdmin']),
}))(observer(CaptureRate));