Merge pull request #9444 from ToolJet/appbuilder-1.6

Release v2.36.0 - App builder 1.6
ToolJet · Apr 24, 2024 · 711424c · 711424c
2 parents 8926ad3 + cfdc00f
commit 711424c
Show file tree

Hide file tree

Showing 141 changed files with 9,014 additions and 2,902 deletions.
diff --git a/.version b/.version
@@ -1 +1 @@
-2.35.4
+2.36.0
diff --git a/frontend/.version b/frontend/.version
@@ -1 +1 @@
-2.35.4
+2.36.0
diff --git a/frontend/assets/translations/en.json b/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": {

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/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",

diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx
@@ -31,38 +31,44 @@ 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 { useSuperStore } from '../_stores/superStore';
+import { ModuleContext } from '../_contexts/ModuleContext';
+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';
 
 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>
  );
 };
 
 class AppComponent extends React.Component {
+ static contextType = ModuleContext;
  constructor(props) {
  super(props);
 
  this.state = {
  currentUser: null,
  fetchedMetadata: false,
  darkMode: localStorage.getItem('darkMode') === 'true',
+ isEditorOrViewer: '',
  };
  }
  updateSidebarNAV = (val) => {
  this.setState({ sidebarNav: val });
  };
  fetchMetadata = () => {
  tooljetService.fetchMetaData().then((data) => {
- useAppDataStore.getState().actions.setMetadata(data);
+ useSuperStore.getState().modules[this.context].useAppDataStore.getState().actions.setMetadata(data);
  localStorage.setItem('currentVersion', data.installed_version);
  if (data.latest_version && lt(data.installed_version, data.latest_version) && data.version_ignored === false) {
  this.setState({ updateAvailable: true });
@@ -98,19 +104,19 @@ class AppComponent extends React.Component {
 
  switchDarkMode = (newMode) => {
  this.setState({ darkMode: newMode });
+ useSuperStore.getState().modules[this.context].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 +131,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 +192,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 +214,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 +227,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>
  }
  />

diff --git a/frontend/src/Editor/AppVersionsManager/AppVersionsManager.jsx b/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>

diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
@@ -67,6 +67,7 @@ import { EditorContext } from '@/Editor/Context/EditorContextWrapper';
 import { useTranslation } from 'react-i18next';
 import { useCurrentState } from '@/_stores/currentStateStore';
 import { useAppInfo } from '@/_stores/appDataStore';
+import { useModuleName } from '../_contexts/ModuleContext';
 import { isPDFSupported } from '@/_stores/utils';
 
 export const AllComponents = {
@@ -158,10 +159,12 @@ export const Box = memo(
  isResizing,
  adjustHeightBasedOnAlignment,
  currentLayout,
+ darkMode,
  }) => {
  const { t } = useTranslation();
  const backgroundColor = yellow ? 'yellow' : '';
  const currentState = useCurrentState();
+ const moduleName = useModuleName();
  const { events } = useAppInfo();
  const shouldAddBoxShadowAndVisibility = ['TextInput', 'PasswordInput', 'NumberInput', 'Text'];
 
@@ -204,7 +207,6 @@ export const Box = memo(
  ? validateProperties(resolvedGeneralStyles, componentMeta.generalStyles)
  : [resolvedGeneralStyles, []];
 
- const darkMode = localStorage.getItem('darkMode') === 'true';
  const { variablesExposedForPreview, exposeToCodeHinter } = useContext(EditorContext) || {};
 
  let styles = {

diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/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={() => {

diff --git a/frontend/src/Editor/CodeBuilder/Elements/BoxShadow.jsx b/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(() => {

diff --git a/frontend/src/Editor/CodeBuilder/Elements/Color.jsx b/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>