feat(ui): added success notif for settings updates

frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx

@@ -5,6 +5,7 @@ import { Button, Modal, Form, Icon, Checkbox } from 'UI';
 import { confirm } from 'UI/Confirmation';
 import stl from './SaveSearchModal.css';
 import cn from 'classnames';
+import { toast } from 'react-toastify';
 
 interface Props {
   filter: any;
@@ -20,7 +21,7 @@ interface Props {
 function SaveSearchModal(props: Props) {
   const { savedSearch, filter, loading, show, closeHandler } = props;
   const [name, setName] = useState(savedSearch ? savedSearch.name : '');
-  
+
   const onNameChange = ({ target: { value } }) => {
     props.edit({ name: value });
     // setName(value);
@@ -29,9 +30,14 @@ function SaveSearchModal(props: Props) {
   const onSave = () => {
     const { filter, closeHandler } = props;
     // if (name.trim() === '') return;
-    props.save(savedSearch.exists() ? savedSearch.searchId : null).then(function() {
+    props.save(savedSearch.exists() ? savedSearch.searchId : null)
+    .then(() => {
       // this.props.fetchFunnelsList();
+      toast.success(`${savedSearch.exists() ? 'Updated' : 'Saved'} Successfully`);
       closeHandler();
+    })
+    .catch(e => {
+      toast.error('Something went wrong, please try again');
     });
   }
 
@@ -48,13 +54,13 @@ function SaveSearchModal(props: Props) {
   }
 
   const onChangeOption = (e, { checked, name }) => props.edit({ [ name ]: checked })
-    
+
 
   return (
     <Modal size="tiny" open={ show }>
       <Modal.Header className={ stl.modalHeader }>
         <div>{ 'Save Search' }</div>
-        <Icon 
+        <Icon
           role="button"
           tabIndex="-1"
           color="gray-dark"
@@ -78,7 +84,7 @@ function SaveSearchModal(props: Props) {
             />
           </Form.Field>
 
-          <Form.Field>              
+          <Form.Field>
             <div className={cn("flex items-center", { 'disabled': savedSearch.exists() && savedSearch.userId !== props.userId })}>
               <Checkbox
                 name="isPublic"
@@ -123,6 +129,6 @@ export default connect(state => ({
   userId: state.getIn([ 'user', 'account', 'id' ]),
   savedSearch: state.getIn([ 'search', 'savedSearch' ]),
   filter: state.getIn(['search', 'instance']),
-  loading: state.getIn([ 'search', 'saveRequest', 'loading' ]) || 
+  loading: state.getIn([ 'search', 'saveRequest', 'loading' ]) ||
     state.getIn([ 'search', 'updateRequest', 'loading' ]),
-}), { edit, save, remove })(SaveSearchModal);
+}), { edit, save, remove })(SaveSearchModal);

frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx

@@ -18,50 +18,59 @@ function CaptureRate(props) {
         });
     }, [])
 
+    const toggleRate = () => {
+            if (captureAll === false) {
+                settingsStore.saveCaptureRate({ captureAll: true })
+            }
+            setCaptureAll(!captureAll)
+            setChanged(true)
+    }
+
     return useObserver(() => (
         <Loader loading={loading}>
-            <h3 className="text-lg">Capture Rate</h3>
-            <div className="my-1">What percentage of your user sessions do you want to record and monitor?</div>
-            <div className="mt-2 mb-4">
+            <h3 className="text-lg">Recordings</h3>
+            <div className="my-1">What percentage of user sessions do you want to Capture?</div>
+            <div className="mt-2 mb-4 mr-1 flex items-center">
                 <Toggler
                     checked={captureAll}
                     name="test"
-                    onChange={() => {
-                        setCaptureAll(!captureAll)
-                        setChanged(true)
-                    }}
-                    label="Capture 100% of the sessions"
+                    onChange={toggleRate}
                 />
+                <span style={{ color: captureAll ? '#000000' : '#999' }}>100%</span>
             </div>
+           {!captureAll && (
             <div className="flex items-center">
-                <div className="relative">
-                    <Input
-                        type="number"
-                        value={captureRate}
-                        style={{ height: '38px', width: '100px'}}
-                        onChange={(e, { value }) => {
-                            setCaptureRate(value)
-                            setChanged(true);
-                        }}
-                        disabled={captureAll}
-                        min={0}
-                        minValue={0}
-                    />
-                    <Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
+                    <div className="relative">
+                        <Input
+                            type="number"
+                            value={captureRate}
+                            style={{ height: '38px', width: '100px'}}
+                            onChange={(e, { value }) => {
+                                setCaptureRate(value)
+                                setChanged(true);
+                            }}
+                            disabled={captureAll}
+                            min={0}
+                            minValue={0}
+                        />
+                        <Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
+                    </div>
+                    <span className="mx-3">of the sessions</span>
+                    <Button
+                        disabled={!changed}
+                        outline
+                        size="medium"
+                        onClick={() => settingsStore.saveCaptureRate({
+                            rate: captureRate,
+                            captureAll,
+                        }).finally(() => setChanged(false))}
+                    >
+                        Update
+                    </Button>
                 </div>
-                <span className="mx-3">of the sessions</span>
-                <Button
-                    disabled={!changed}
-                    outline
-                    size="medium"
-                    onClick={() => settingsStore.saveCaptureRate({
-                        rate: captureRate,
-                        captureAll,
-                    }).finally(() => setChanged(false))}
-                >Update</Button>
-            </div>
+            )}
         </Loader>
     ));
 }
 
-export default CaptureRate;
+export default CaptureRate;

frontend/app/components/shared/SessionSettings/components/DefaultPlaying.tsx

@@ -2,24 +2,31 @@ import React from 'react';
 import { Toggler } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
+import { toast } from 'react-toastify';
 
 function DefaultPlaying(props) {
     const { settingsStore } = useStore();
     const sessionSettings = useObserver(() => settingsStore.sessionSettings)
-    
+
+    const toggleSkipToIssue = () => {
+        sessionSettings.updateKey('skipToIssue', !sessionSettings.skipToIssue)
+        toast.success("Default playing option saved successfully");
+    }
+
+
     return useObserver(() => (
         <>
-            <h3 className="text-lg">Default Playing Options</h3>
+            <h3 className="text-lg">Default Playing Option</h3>
             <div className="my-1">Always start playing the session from the first issue.</div>
             <div className="mt-2">
                 <Toggler
                     checked={sessionSettings.skipToIssue}
                     name="test"
-                    onChange={() => sessionSettings.updateKey('skipToIssue', !sessionSettings.skipToIssue)} 
+                    onChange={toggleSkipToIssue}
                 />
             </div>
         </>
     ));
 }
 
-export default DefaultPlaying;
+export default DefaultPlaying;

frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx

@@ -3,6 +3,7 @@ import Select from 'Shared/Select';
 import { Button, Input } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
+import { toast } from 'react-toastify';
 
 const numberOptions = [
     { label: 'Less than', value: '<' },
@@ -19,18 +20,27 @@ function ListingVisibility(props) {
     const sessionSettings = useObserver(() => settingsStore.sessionSettings)
     const [durationSettings, setDurationSettings] = React.useState(sessionSettings.durationFilter);
 
+    const changeSettings = (changes) => {
+        setDurationSettings({ ...durationSettings, ...changes });
+        setChanged(true);
+    }
+    const saveSettings = () => {
+        sessionSettings.updateKey('durationFilter', durationSettings);
+        setChanged(false);
+        toast.success("Listing visibility settings saved successfully");
+    }
+
     return (
         <>
             <h3 className="text-lg">Listing Visibility</h3>
-            <div className="my-1">Do not show sessions duration with.</div>
+            <div className="my-1">Do not show sessions with duration.</div>
             <div className="grid grid-cols-12 gap-2 mt-2">
                 <div className="col-span-4">
                     <Select
                         options={numberOptions}
                         defaultValue={numberOptions[0].value}
                         onChange={({ value }) => {
-                            setDurationSettings({ ...durationSettings, operator: value });
-                            setChanged(true);
+                            changeSettings({ operator: value })
                         }}
                     />
                 </div>
@@ -42,8 +52,7 @@ function ListingVisibility(props) {
                         placeholder="E.g 10"
                         style={{ height: '38px', width: '100%'}}
                         onChange={(e, { value }) => {
-                            setDurationSettings({ ...durationSettings, count: value });
-                            setChanged(true);
+                            changeSettings({ count: value })
                         }}
                     />
                 </div>
@@ -52,16 +61,12 @@ function ListingVisibility(props) {
                         defaultValue={periodOptions[1].value}
                         options={periodOptions}
                         onChange={({ value }) => {
-                            setDurationSettings({ ...durationSettings, countType: value });
-                            setChanged(true);
+                            changeSettings({ countType: value })
                         }}
                     />
                 </div>
                 <div className="col-span-3">
-                    <Button outline size="medium" disabled={!changed} onClick={() => {
-                        sessionSettings.updateKey('durationFilter', durationSettings);
-                        setChanged(false);
-                    }}>Update</Button>
+                    <Button outline size="medium" disabled={!changed} onClick={saveSettings}>Update</Button>
                 </div>
             </div>
         </>