Merge branch 'main' of https://github.com/ToolJet/ToolJet into feat/grid-revamp

.version

@@ -1 +1 @@
-2.32.2
+2.32.3

frontend/.version

@@ -1 +1 @@
-2.32.2
+2.32.3

frontend/src/Editor/Box.jsx

@@ -156,6 +156,7 @@ export const Box = memo(
     const backgroundColor = yellow ? 'yellow' : '';
     const currentState = useCurrentState();
     const { events } = useAppInfo();
+    const shouldAddBoxShadowAndVisibility = ['TextInput', 'PasswordInput', 'NumberInput', 'Text'];
 
     const componentMeta = useMemo(() => {
       return componentTypes.find((comp) => component.component === comp.component);
@@ -171,14 +172,18 @@ export const Box = memo(
       mode === 'edit' && component.validate
         ? validateProperties(resolvedProperties, componentMeta.properties)
         : [resolvedProperties, []];
+    if (shouldAddBoxShadowAndVisibility.includes(component.component)) {
+      validatedProperties.visibility = validatedProperties.visibility !== false ? true : false;
+    }
 
     const resolvedStyles = resolveStyles(component, currentState, null, customResolvables);
-
     const [validatedStyles, styleErrors] =
       mode === 'edit' && component.validate
         ? validateProperties(resolvedStyles, componentMeta.styles)
         : [resolvedStyles, []];
-
+    if (!shouldAddBoxShadowAndVisibility.includes(component.component)) {
+      validatedStyles.visibility = validatedStyles.visibility !== false ? true : false;
+    }
     const resolvedGeneralProperties = resolveGeneralProperties(component, currentState, null, customResolvables);
     const [validatedGeneralProperties, generalPropertiesErrors] =
       mode === 'edit' && component.validate
@@ -186,7 +191,7 @@ export const Box = memo(
         : [resolvedGeneralProperties, []];
 
     const resolvedGeneralStyles = resolveGeneralStyles(component, currentState, null, customResolvables);
-    resolvedStyles.visibility = resolvedStyles.visibility !== false ? true : false;
+
     const [validatedGeneralStyles, generalStylesErrors] =
       mode === 'edit' && component.validate
         ? validateProperties(resolvedGeneralStyles, componentMeta.generalStyles)
@@ -276,13 +281,12 @@ export const Box = memo(
         ...{ validationObject: component.definition.validation, currentState },
         customResolveObjects: customResolvables,
       });
-    const shouldAddBoxShadow = ['TextInput', 'PasswordInput', 'NumberInput', 'Text'];
     return (
       <OverlayTrigger
         placement={inCanvas ? 'auto' : 'top'}
         delay={{ show: 500, hide: 0 }}
         trigger={
-          inCanvas && shouldAddBoxShadow.includes(component.component)
+          inCanvas && shouldAddBoxShadowAndVisibility.includes(component.component)
             ? !validatedProperties.tooltip?.toString().trim()
               ? null
               : ['hover', 'focus']
@@ -295,7 +299,7 @@ export const Box = memo(
             props,
             text: inCanvas
               ? `${
-                  shouldAddBoxShadow.includes(component.component)
+                  shouldAddBoxShadowAndVisibility.includes(component.component)
                     ? validatedProperties.tooltip
                     : validatedGeneralProperties.tooltip
                 }`
@@ -332,7 +336,7 @@ export const Box = memo(
               exposedVariables={exposedVariables}
               styles={{
                 ...validatedStyles,
-                ...(!shouldAddBoxShadow.includes(component.component)
+                ...(!shouldAddBoxShadowAndVisibility.includes(component.component)
                   ? { boxShadow: validatedGeneralStyles?.boxShadow }
                   : {}),
               }}

frontend/src/_components/OrganizationLogin/GithubSsoModal.jsx

@@ -135,7 +135,7 @@ export function GithubSSOModal({ settings, onClose, onUpdateSSOSettings, isInsta
       >
         <div>
           <label className="switch">
-            <input type="checkbox" checked={enabled} onChange={onToggleChange} />
+            <input type="checkbox" checked={enabled} onChange={onToggleChange} data-cy="github-toggle-input" />
             <span className="slider round"></span>
           </label>
           <span className="sso-type-header" data-cy="card-title" style={{ marginBottom: '0px', fontWeight: '500' }}>

frontend/src/_components/OrganizationLogin/GoogleSsoModal.jsx

@@ -105,7 +105,7 @@ export function GoogleSSOModal({ settings, onClose, onUpdateSSOSettings, isInsta
       >
         <div>
           <label className="switch">
-            <input type="checkbox" checked={enabled} onChange={onToggleChange} />
+            <input type="checkbox" checked={enabled} onChange={onToggleChange} data-cy="google-enable-toggle" />
             <span className="slider round"></span>
           </label>
           <span className="sso-type-header" data-cy="card-title" style={{ marginBottom: '0px', fontWeight: '500' }}>

frontend/src/_components/OrganizationLogin/SsoConfiguration.jsx

@@ -241,24 +241,35 @@ class SSOConfiguration extends React.Component {
     const isEnabled = this.state[isEnabledKey];
 
     return (
-      <div className="sso-option" key={key} onClick={() => this.openModal(key)}>
+      <div className="sso-option" key={key} onClick={() => this.openModal(key)} data-cy="sso-card">
         <div className="sso-option-label">
           {
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+              data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-icon`}
+            >
               {this.getSSOIcon(key)}
-              <span style={{ marginLeft: 8 }}>{name}</span>
+              <span style={{ marginLeft: 8 }} data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-label`}>
+                {name}
+              </span>
               {
                 <img
                   src="/assets/images/EditIcon.png"
                   className="option-icon"
                   style={{ width: '14px', height: '14px', marginLeft: '8px' }}
+                  data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-edit-icon`}
                 />
               }
             </div>
           }
         </div>
         <label className="switch" onClick={(e) => e.stopPropagation()}>
-          <input type="checkbox" checked={isEnabled} onChange={() => this.toggleSSOOption(key)} />
+          <input
+            type="checkbox"
+            checked={isEnabled}
+            onChange={() => this.toggleSSOOption(key)}
+            data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-toggle`}
+          />
           <span className="slider round"></span>
         </label>
       </div>
@@ -270,7 +281,9 @@ class SSOConfiguration extends React.Component {
 
     return (
       <div className="sso-configuration">
-        <h4 style={{ fontSize: '12px' }}>SSO</h4>
+        <h4 style={{ fontSize: '12px' }} data-cy="sso-header">
+          SSO
+        </h4>
         <div
           className={`sso-option ${showDropdown ? 'clicked' : ''}`}
           style={{ paddingLeft: '0px', marginBottom: '1px' }}
@@ -290,6 +303,7 @@ class SSOConfiguration extends React.Component {
                 justifyContent: 'flex-start',
               }}
               bsPrefix="no-caret-dropdown-toggle"
+              data-testid="instance-sso-toggle"
             >
               <div
                 className="sso-option-label"
@@ -301,6 +315,7 @@ class SSOConfiguration extends React.Component {
                   paddingBottom: '6px',
                   height: '34px',
                 }}
+                data-cy="instance-sso-card"
               >
                 Default SSO {defaultSSO ? `(${this.state.inheritedInstanceSSO})` : ''}
                 <SolidIcon className="option-icon" name={showDropdown ? 'cheveronup' : 'cheverondown'} fill={'grey'} />
@@ -311,6 +326,7 @@ class SSOConfiguration extends React.Component {
               <Dropdown.Item
                 eventKey="Google"
                 disabled={!defaultSSO || this.isOptionEnabled('google') || !this.isInstanceOptionEnabled('google')} // Disable the item if defaultSSO is false
+                data-cy="dropdown-options-google"
               >
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                   {this.getSSOIcon('google')}
@@ -320,6 +336,7 @@ class SSOConfiguration extends React.Component {
               <Dropdown.Item
                 eventKey="GitHub"
                 disabled={!defaultSSO || this.isOptionEnabled('git') || !this.isInstanceOptionEnabled('git')} // Disable the item if defaultSSO is false
+                data-cy="dropdown-options-git"
               >
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                   {this.getSSOIcon('git')}
@@ -334,7 +351,9 @@ class SSOConfiguration extends React.Component {
             <span className="slider round"></span>
           </label>
         </div>
-        <p className="sso-note">Display default SSO for workspace URL login</p>
+        <p className="sso-note" data-cy="instance-sso-helper-text">
+          Display default SSO for workspace URL login
+        </p>
         {this.renderSSOOption('google', 'Google')}
         {this.renderSSOOption('git', 'GitHub')}
         {showModal && currentSSO === 'google' && (

frontend/src/_components/OrganizationLogin/WorkspaceSSOEnableModal.jsx

@@ -15,12 +15,12 @@ function WorkspaceSSOEnableModal({ show, ssoKey, saveSettings, setShowModal, res
 
   const modalContent = (
     <div>
-      <p>
+      <p data-cy="modal-message">
         Enabling <strong>{ssoKey.charAt(0).toUpperCase() + ssoKey.slice(1)}</strong> at the workspace level will
         override any <strong>{ssoKey.charAt(0).toUpperCase() + ssoKey.slice(1)}</strong> configurations set at the
         instance level.
       </p>
-      <p>Are you sure you want to continue?</p>
+      <p data-cy="confirmation-text">Are you sure you want to continue?</p>
     </div>
   );
 
@@ -29,14 +29,14 @@ function WorkspaceSSOEnableModal({ show, ssoKey, saveSettings, setShowModal, res
       <ButtonSolid variant="tertiary" onClick={handleClose} data-cy="cancel-button">
         Cancel
       </ButtonSolid>
-      <ButtonSolid variant="primary" onClick={handleEnable}>
+      <ButtonSolid variant="primary" onClick={handleEnable} data-cy="enable-button">
         Enable
       </ButtonSolid>
     </>
   );
 
   const ModalTitle = () => (
-    <strong style={{ fontWeight: 500, fontSize: 'medium' }}>
+    <strong style={{ fontWeight: 500, fontSize: 'medium' }} data-cy="modal-title">
       Enable {ssoKey.charAt(0).toUpperCase() + ssoKey.slice(1)}
     </strong>
   );

server/.version

@@ -1 +1 @@
-2.32.2
+2.32.3