Merge main to develop

.version

@@ -1 +1 @@
-2.35.4
+2.38.0

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/userPermissions.cy.js

@@ -210,7 +210,7 @@ describe("User permissions", () => {
     );
     cy.get(
       '[data-cy="go-to-workspace-constants-option-button"]'
-    ).verifyVisibleElement("have.text", "Go to workspace constants");
+    ).verifyVisibleElement("have.text", "Go to Workspace constants");
     cy.logoutApi();
   });
 });

frontend/.version

@@ -1 +1 @@
-2.35.4
+2.38.0

frontend/assets/translations/en.json

@@ -706,7 +706,7 @@
             "columnType": "Column type",
             "columnName": "Column name",
             "overflow": "Overflow",
-            "key": "key",
+            "key": "Key",
             "textColor": "Text color",
             "validation": "Validation",
             "regex": "Regex",
@@ -716,8 +716,8 @@
             "values": "Values",
             "labels": "Labels",
             "cellBgColor": "Cell background color",
-            "dateDisplayformat": "Date display format",
-            "dateParseformat": "Date parse format",
+            "dateDisplayformat": "Date format",
+            "dateParseformat": "Date",
             "showTime": "show time",
             "makeEditable": "make editable",
             "buttonText": "Button text",
@@ -727,7 +727,10 @@
             "addColumn": "Add column",
             "addNewColumn": "Add new column",
             "noActionMessage": "This table doesn't have any action buttons",
-            "horizontalAlignment": "horizontal alignment"
+            "horizontalAlignment":"Horizontal alignment",
+            "textAlignment":"Text alignment",
+            "deciamalPlaces":"Decimal Places",
+            "imageFit":"Image fit"
         },
         "Button": {
             "displayName": "Button",
@@ -947,6 +950,7 @@
             "maxWidthOfCanvas": "Max width of canvas",
             "maxHeightOfCanvas": "Max height of canvas",
             "backgroundColorOfCanvas": "Canvas background",
+            "appMode": "App mode",
             "exportApp": "Export app"
         },
         "Back": {

frontend/assets/translations/es.json

@@ -355,7 +355,7 @@
         "blankPage": {
             "welcomeToToolJet": "¡Bienvenido a ToolJet!",
             "getStartedCreateNewApp": "Puedes empezar creando una nueva aplicación o creando una aplicación usando una plantilla en la biblioteca de ToolJet.",
-            "importApplication": "Importar una aplicación",
+            "importApplication": "Importar una aplicación"
         },
         "foldersSection": {
             "allApplications": "Todas las aplicaciones",
@@ -387,11 +387,11 @@
         "templateCard": {
             "use": "Usar",
             "preview": "Prevista",
-            "leadGeneretion": "Generación de líderes",
+            "leadGeneretion": "Generación de líderes"
         },
         "templateLibraryModal": {
             "select": "Seleccionar plantilla",
-            "createAppfromTemplate": "Crear aplicación desde plantilla",
+            "createAppfromTemplate": "Crear aplicación desde plantilla"
         }
     },
     "confirmationPage": {
@@ -662,7 +662,7 @@
             "setColor": "Establecer color",
             "structure": "Estructura",
             "checkedValues": "Valores marcados",
-            "expandedValues": "Valores expandidos",
+            "expandedValues": "Valores expandidos"
         },
         "Table": {
             "displayName": "Tabla",
@@ -689,7 +689,7 @@
             "remove": "Eliminar",
             "addButton": "+ Agregar botón",
             "addColumn": "+ Agregar columna",
-            "noActionMessage": "Esta tabla no tiene botones de acción",
+            "noActionMessage": "Esta tabla no tiene botones de acción"
         },
         "Button": {
             "displayName": "Botón",
@@ -898,7 +898,7 @@
             "text": "Comentarios",
             "tip": "Habilitar comentarios",
             "commentBody": "No hay comentarios para desplegar",
-            "typeComment": "Escriba su comentario aquí",
+            "typeComment": "Escriba su comentario aquí"
         },
         "Settings": {
             "text": "Ajustes",
@@ -907,7 +907,7 @@
             "maintenanceMode": "Modo de mantenimiento",
             "maxWidthOfCanvas": "Ancho máximo del lienzo",
             "maxHeightOfCanvas": "Altura máxima del lienzo",
-            "backgroundColorOfCanvas": "Color de fondo del lienzo",
+            "backgroundColorOfCanvas": "Color de fondo del lienzo"
         },
         "Back": {
             "text": "Atrás",

frontend/package.json

@@ -62,7 +62,7 @@
     "react-circular-progressbar": "^2.1.0",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-datepicker": "^4.10.0",
+    "react-datepicker": "^4.25.0",
     "react-dates": "^21.8.0",
     "react-datetime": "^3.2.0",
     "react-dnd": "^16.0.1",

frontend/src/App/App.jsx

@@ -31,17 +31,20 @@ import 'react-tooltip/dist/react-tooltip.css';
 import { getWorkspaceIdOrSlugFromURL } from '@/_helpers/routes';
 import ErrorPage from '@/_components/ErrorComponents/ErrorPage';
 import WorkspaceConstants from '@/WorkspaceConstants';
-import { useAppDataStore } from '@/_stores/appDataStore';
+import cx from 'classnames';
+import useAppDarkMode from '@/_hooks/useAppDarkMode';
 import { ManageOrgUsers } from '@/ManageOrgUsers';
 import { ManageGroupPermissions } from '@/ManageGroupPermissions';
 import OrganizationLogin from '@/_components/OrganizationLogin/OrganizationLogin';
 import { ManageOrgVars } from '@/ManageOrgVars';
+import { useAppDataStore } from '@/_stores/appDataStore';
 
 const AppWrapper = (props) => {
+  const { isAppDarkMode } = useAppDarkMode();
   return (
     <Suspense fallback={null}>
       <BrowserRouter basename={window.public_config?.SUB_PATH || '/'}>
-        <AppWithRouter props={props} />
+        <AppWithRouter props={props} isAppDarkMode={isAppDarkMode} />
       </BrowserRouter>
     </Suspense>
   );
@@ -55,6 +58,7 @@ class AppComponent extends React.Component {
       currentUser: null,
       fetchedMetadata: false,
       darkMode: localStorage.getItem('darkMode') === 'true',
+      isEditorOrViewer: '',
     };
   }
   updateSidebarNAV = (val) => {
@@ -98,19 +102,19 @@ class AppComponent extends React.Component {
 
   switchDarkMode = (newMode) => {
     this.setState({ darkMode: newMode });
+    useAppDataStore.getState().actions.updateIsTJDarkMode(newMode);
     localStorage.setItem('darkMode', newMode);
   };
 
   render() {
-    const { updateAvailable, darkMode } = this.state;
-
+    const { updateAvailable, darkMode, isEditorOrViewer } = this.state;
     let toastOptions = {
       style: {
         wordBreak: 'break-all',
       },
     };
 
-    if (darkMode) {
+    if (isEditorOrViewer === 'viewer' ? this.props.isAppDarkMode : darkMode) {
       toastOptions = {
         className: 'toast-dark-mode',
         style: {
@@ -125,7 +129,12 @@ class AppComponent extends React.Component {
     const { updateSidebarNAV } = this;
     return (
       <>
-        <div className={`main-wrapper ${darkMode ? 'theme-dark dark-theme' : ''}`} data-cy="main-wrapper">
+        <div
+          className={cx('main-wrapper', {
+            'theme-dark dark-theme': !isEditorOrViewer && darkMode,
+          })}
+          data-cy="main-wrapper"
+        >
           {updateAvailable && (
             <div className="alert alert-info alert-dismissible" role="alert">
               <h3 className="mb-1">Update available</h3>
@@ -181,7 +190,11 @@ class AppComponent extends React.Component {
                 path="/:workspaceId/apps/:slug/:pageHandle?/*"
                 element={
                   <PrivateRoute>
-                    <AppLoader switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
+                    <AppLoader
+                      switchDarkMode={this.switchDarkMode}
+                      darkMode={darkMode}
+                      setEditorOrViewer={(value) => this.setState({ isEditorOrViewer: value })}
+                    />
                   </PrivateRoute>
                 }
               />
@@ -199,7 +212,11 @@ class AppComponent extends React.Component {
                 path="/applications/:slug/:pageHandle?"
                 element={
                   <PrivateRoute>
-                    <Viewer switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
+                    <Viewer
+                      switchDarkMode={this.switchDarkMode}
+                      darkMode={this.props.isAppDarkMode}
+                      setEditorOrViewer={(value) => this.setState({ isEditorOrViewer: value })}
+                    />
                   </PrivateRoute>
                 }
               />
@@ -208,7 +225,11 @@ class AppComponent extends React.Component {
                 path="/applications/:slug/versions/:versionId/:pageHandle?"
                 element={
                   <PrivateRoute>
-                    <Viewer switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
+                    <Viewer
+                      switchDarkMode={this.switchDarkMode}
+                      darkMode={this.props.isAppDarkMode}
+                      setEditorOrViewer={(value) => this.setState({ isEditorOrViewer: value })}
+                    />
                   </PrivateRoute>
                 }
               />

frontend/src/Editor/AppVersionsManager/AppVersionsManager.jsx

@@ -19,6 +19,7 @@ export const AppVersionsManager = function ({
   onVersionDelete,
   isEditable = true,
   isViewer,
+  darkMode,
 }) {
   const [appVersionStatus, setGetAppVersionStatus] = useState(appVersionLoadingStatus.loading);
   const [deleteVersion, setDeleteVersion] = useState({
@@ -53,8 +54,6 @@ export const AppVersionsManager = function ({
     };
   }, [appVersions]);
 
-  const darkMode = localStorage.getItem('darkMode') === 'true';
-
   const selectVersion = (id) => {
     appVersionService
       .getAppVersionData(appId, id)
@@ -173,8 +172,8 @@ export const AppVersionsManager = function ({
             value={editingVersion?.id}
             onChange={(id) => selectVersion(id)}
             {...customSelectProps}
-            className={` ${darkMode && 'dark-theme'}`}
             isEditable={isEditable}
+            darkMode={darkMode}
           />
         </div>
       </div>

frontend/src/Editor/Box.jsx

@@ -158,6 +158,7 @@ export const Box = memo(
     isResizing,
     adjustHeightBasedOnAlignment,
     currentLayout,
+    darkMode,
   }) => {
     const { t } = useTranslation();
     const backgroundColor = yellow ? 'yellow' : '';
@@ -204,7 +205,6 @@ export const Box = memo(
         ? validateProperties(resolvedGeneralStyles, componentMeta.generalStyles)
         : [resolvedGeneralStyles, []];
 
-    const darkMode = localStorage.getItem('darkMode') === 'true';
     const { variablesExposedForPreview, exposeToCodeHinter } = useContext(EditorContext) || {};
 
     let styles = {

frontend/src/Editor/CodeBuilder/CodeHinter.jsx

@@ -43,6 +43,8 @@ import { Input } from './Elements/Input';
 import { Icon } from './Elements/Icon';
 import { Visibility } from './Elements/Visibility';
 import { NumberInput } from './Elements/NumberInput';
+import TableRowHeightInput from './Elements/TableRowHeightInput';
+
 import { validateProperty } from '../component-properties-validation';
 
 const HIDDEN_CODE_HINTER_LABELS = ['Table data', 'Column data', 'Text Format', 'TextComponentTextInput'];
@@ -63,6 +65,7 @@ const AllElements = {
   Icon,
   Visibility,
   NumberInput,
+  TableRowHeightInput,
 };
 
 export function CodeHinter({
@@ -407,7 +410,15 @@ export function CodeHinter({
 
   const fxBtn = () => (
     <div className="col-auto pt-0 fx-common">
-      {!['Type', 'selectRowOnCellEdit', 'Select row on cell edit', ' ', 'Padding', 'Width'].includes(paramLabel) && ( //add some key if these extends
+      {![
+        'Type',
+        'selectRowOnCellEdit',
+        'Select row on cell edit',
+        ' ',
+        'Padding',
+        'Width',
+        'Make all columns editable',
+      ].includes(paramLabel) && ( //add some key if these extends
         <FxButton
           active={codeShow}
           onPress={() => {

frontend/src/Editor/CodeBuilder/Elements/BoxShadow.jsx

@@ -29,7 +29,7 @@ export const BoxShadow = ({ value, onChange, cyLabel }) => {
 
   const colorPickerStyle = {
     position: 'absolute',
-    bottom: '260px',
+    top: '-220px',
   };
 
   useEffect(() => {

frontend/src/Editor/CodeBuilder/Elements/Color.jsx

@@ -45,8 +45,9 @@ export const Color = ({ value, onChange, pickerStyle = {}, cyLabel, asBoxShadowP
           // This is fix when color picker don't have much space to open in bottom side
           { 'inspector-color-input-popover': colorPickerPosition === 'top' }
         )}
+        style={{ zIndex: 10000 }}
       >
-        <Popover.Body className={!asBoxShadowPopover && 'boxshadow-picker'}>
+        <Popover.Body className={!asBoxShadowPopover && 'boxshadow-picker'} style={{ padding: '0px' }}>
           <>{ColorPicker()}</>
         </Popover.Body>
       </Popover>