feat: safe mode updates

packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/StyledWrapper.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  max-width: 800px;
+
+  span.beta-tag {
+    display: flex;
+    align-items: center;
+    padding: 0.1rem 0.25rem;
+    font-size: 0.75rem;
+    border-radius: 0.25rem;
+    color: ${(props) => props.theme.colors.text.green};
+    border: solid 1px ${(props) => props.theme.colors.text.green} !important;
+  }
+
+  span.developer-mode-warning {
+    font-weight: 400;
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/index.js

@@ -2,8 +2,9 @@ import { saveCollectionSecurityConfig } from 'providers/ReduxStore/slices/collec
 import { useDispatch } from 'react-redux';
 import toast from 'react-hot-toast';
 import { useState } from 'react';
-import Portal from 'components/Portal/index';
+import Portal from 'components/Portal';
-import Modal from 'components/Modal/index';
+import Modal from 'components/Modal';
+import StyledWrapper from './StyledWrapper';
 
 const AppModeModal = ({ collection, onClose }) => {
   const dispatch = useDispatch();
@@ -31,7 +32,7 @@ const AppModeModal = ({ collection, onClose }) => {
     <Portal>
       <Modal
         size="sm"
-        title={'App Mode'}
+        title={'Scripting Sandbox'}
         confirmText="Save"
         handleConfirm={handleSave}
         hideCancel={true}
@@ -39,61 +40,58 @@ const AppModeModal = ({ collection, onClose }) => {
         disableCloseOnOutsideClick={true}
         disableEscapeKey={true}
       >
-        <div className="flex flex-col gap-4">
+        <StyledWrapper>
-          <div className="text-xs opacity-70">Choose a app mode for this collection.</div>
+          <div>
-          <div className="flex flex-col gap-4">
+            The collection might include JavaScript code in Variables, Scripts, Tests, and Assertions.
-            <div className="flex flex-col gap-2">
-              <label htmlFor="restricted" className="flex flex-row gap-2 cursor-pointer items-start">
-                <input
-                  type="radio"
-                  id="restricted"
-                  name="appMode"
-                  value="restricted"
-                  checked={selectedAppMode === 'restricted'}
-                  onChange={handleAppModeChange}
-                  className="cursor-pointer mt-1"
-                />
-                <div className="flex flex-col gap-1">
-                  Restricted
-                  <div className="opacity-50 text-xs">Code execution is not allowed.</div>
-                </div>
-              </label>
-              <label htmlFor="safe" className="flex flex-row gap-2 cursor-pointer items-start">
-                <input
-                  type="radio"
-                  id="safe"
-                  name="appMode"
-                  value="safe"
-                  checked={selectedAppMode === 'safe'}
-                  onChange={handleAppModeChange}
-                  className="cursor-pointer mt-1"
-                />
-                <div className="flex flex-col gap-1">
-                  Safe
-                  <div className="opacity-50 text-xs">Code is executed in isolated-vm.</div>
-                </div>
-              </label>
-              <label htmlFor="developer" className="flex flex-row gap-2 cursor-pointer items-start">
-                <input
-                  type="radio"
-                  id="developer"
-                  name="appMode"
-                  value="developer"
-                  checked={selectedAppMode === 'developer'}
-                  onChange={handleAppModeChange}
-                  className="cursor-pointer mt-1"
-                />
-                <div className="flex flex-col gap-1">
-                  Developer
-                  <div className="opacity-50 text-xs">Code execution is fully anabled.</div>
-                </div>
-              </label>
-            </div>
-            {/* <button onClick={handleSave} className="submit btn btn-sm btn-secondary w-fit">
-              Save
-            </button> */}
           </div>
-        </div>
+
+          <div className='text-muted mt-6'>
+            Please choose the security level for the JavaScript code execution.
+          </div>
+
+          <div className="flex flex-col mt-4">
+            <label htmlFor="safe" className="flex flex-row items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                id="safe"
+                name="appMode"
+                value="safe"
+                checked={selectedAppMode === 'safe'}
+                onChange={handleAppModeChange}
+                className="cursor-pointer"
+              />
+              <span className={selectedAppMode === 'safe' ? 'font-medium' : 'font-normal'}>
+                Safe Mode
+              </span>
+              <span className='beta-tag'>BETA</span>
+            </label>
+            <p className='text-sm text-muted mt-1'>
+              JavaScript code is executed in a secure sandbox and cannot excess your filesystem or execute system commands.
+            </p>
+
+            <label htmlFor="developer" className="flex flex-row gap-2 mt-6 cursor-pointer">
+              <input
+                type="radio"
+                id="developer"
+                name="appMode"
+                value="developer"
+                checked={selectedAppMode === 'developer'}
+                onChange={handleAppModeChange}
+                className="cursor-pointer"
+              />
+              <span className={selectedAppMode === 'developer' ? 'font-medium' : 'font-normal'}>
+                Developer Mode
+                <span className='ml-1 developer-mode-warning'>(use only if you trust the collections authors)</span>
+              </span>
+            </label>
+            <p className='text-sm text-muted mt-1'>
+              JavaScript code has access to the filesystem, can execute system commands and access sensitive information.
+            </p>
+            <small className='text-muted mt-6'>
+              * SAFE mode has been introduced v1.25 onwards and is in beta. Please report any issues on github.
+            </small>
+          </div>
+        </StyledWrapper>
       </Modal>
     </Portal>
   );

packages/bruno-app/src/components/SecuritySettings/StyledWrapper.js

@@ -17,45 +17,6 @@ const StyledWrapper = styled.div`
     font-weight: 400;
     color: ${(props) => props.theme.colors.text.yellow};
   }
-
-  div.tabs {
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
-      color: var(--color-tab-inactive);
-      cursor: pointer;
-
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      }
-    }
-  }
-  table {
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-
-      li {
-        background-color: ${(props) => props.theme.bg} !important;
-      }
-    }
-  }
-
-  .muted {
-    color: ${(props) => props.theme.colors.text.muted};
-  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/SecuritySettings/index.js

@@ -30,7 +30,7 @@ const SecuritySettings = ({ collection }) => {
       <div className='font-semibold mt-2'>Scripting Sandbox</div>
 
       <div className='mt-4'>
-        Bruno allows JavaScript code to be executed within Variables, Scripts, Tests, and Assertions. <br/>
+      The collection might include JavaScript code in Variables, Scripts, Tests, and Assertions.
       </div>
 
       <div className="flex flex-col mt-4">
@@ -70,7 +70,7 @@ const SecuritySettings = ({ collection }) => {
             </span>
           </label>
           <p className='text-sm text-muted mt-1'>
-            JavaScript code has access to the filesystem, execute system commands and access sensitive information.
+            JavaScript code has access to the filesystem, can execute system commands and access sensitive information.
           </p>
         </div>
         <button onClick={handleSave} className="submit btn btn-sm btn-secondary w-fit mt-6">