Merge pull request #11281 from ToolJet/fixes-ee-nakul

Fixes dark mode, mode theme in inspector, bg color in viewer, widget issues

frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx

@@ -2,12 +2,11 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Container } from './Container';
 import Grid from './Grid';
 import { EditorSelecto } from './Selecto';
-import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
 import { HotkeyProvider } from './HotkeyProvider';
 import './appCanvas.scss';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
-import { getCanvasWidth } from './appCanvasUtils';
+import { getCanvasWidth, computeViewerBackgroundColor } from './appCanvasUtils';
 import { NO_OF_GRIDS } from './appCanvasConstants';
 import cx from 'classnames';
 import FreezeVersionInfo from '@/AppBuilder/Header/FreezeVersionInfo';
@@ -38,9 +37,9 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => {
   const setIsComponentLayoutReady = useStore((state) => state.setIsComponentLayoutReady, shallow);
   const canvasMaxWidth = useAppCanvasMaxWidth({ mode: currentMode });
   const editorMarginLeft = useSidebarMargin(canvasContainerRef);
+  const isSidebarOpen = useStore((state) => state.isSidebarOpen, shallow);
   const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
-  const pageSwitchInProgress = useStore((state) => state.pageSwitchInProgress);
-  const setPageSwitchInProgress = useStore((state) => state.setPageSwitchInProgress);
+
   useEffect(() => {
     // Need to remove this if we shift setExposedVariable Logic outside of components
     // Currently present to run onLoadQueries after the component is mounted
@@ -67,15 +66,19 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => {
         ref={canvasContainerRef}
         className={cx(
           'canvas-container align-items-center page-container',
-          { 'dark-theme theme-dark': isAppDarkMode, close: !isViewerSidebarPinned }
-          // { 'hide-sidebar': !showLeftSidebar }
+          { 'dark-theme theme-dark': isAppDarkMode, close: !isViewerSidebarPinned },
+          { 'overflow-x-auto': (currentMode === 'edit' && isSidebarOpen) || currentMode === 'view' }
         )}
         style={{
           // transform: `scale(1)`,
           borderLeft: currentMode === 'edit' && editorMarginLeft + 'px solid',
           height: currentMode === 'edit' ? canvasContainerHeight : '100%',
-          backgroundColor: canvasBgColor,
-          // background: !isAppDarkMode ? '#EBEBEF' : '#2E3035',
+          background:
+            currentMode === 'view'
+              ? computeViewerBackgroundColor(isAppDarkMode, canvasBgColor)
+              : !isAppDarkMode
+              ? '#EBEBEF'
+              : '#2F3C4C',
           marginLeft:
             isViewerSidebarPinned && !isPagesSidebarHidden && currentLayout !== 'mobile' && currentMode !== 'edit'
               ? pageSidebarStyle === 'icon'

frontend/src/AppBuilder/AppCanvas/Container.jsx

@@ -5,7 +5,7 @@ import WidgetWrapper from './WidgetWrapper';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 import { useDrop } from 'react-dnd';
-import { addChildrenWidgetsToParent, addNewWidgetToTheEditor } from './appCanvasUtils';
+import { addChildrenWidgetsToParent, addNewWidgetToTheEditor, computeViewerBackgroundColor } from './appCanvasUtils';
 import { CANVAS_WIDTHS, NO_OF_GRIDS, WIDGETS_WITH_DEFAULT_CHILDREN } from './appCanvasConstants';
 import { useGridStore } from '@/_stores/gridStore';
 import NoComponentCanvasContainer from './NoComponentCanvasContainer';
@@ -40,7 +40,6 @@ export const Container = React.memo(
     const components = useStore((state) => state.getContainerChildrenMapping(id), shallow);
     const componentType = useStore((state) => state.getComponentTypeFromId(id), shallow);
     const addComponentToCurrentPage = useStore((state) => state.addComponentToCurrentPage, shallow);
-    const setSelectedComponents = useStore((state) => state.setSelectedComponents, shallow);
     const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab, shallow);
     const canvasBgColor = useStore(
       (state) => (id === 'canvas' ? state.getCanvasBackgroundColor('canvas', darkMode) : ''),
@@ -124,7 +123,12 @@ export const Container = React.memo(
           height: id === 'canvas' ? `${canvasHeight}` : '100%',
           // backgroundSize: '25.3953px 10px',
           backgroundSize: `${gridWidth}px 10px`,
-          backgroundColor: id === 'canvas' ? canvasBgColor : '#f0f0f0',
+          backgroundColor:
+            currentMode === 'view'
+              ? computeViewerBackgroundColor(darkMode, canvasBgColor)
+              : id === 'canvas'
+              ? canvasBgColor
+              : '#f0f0f0',
           width: getCanvasWidth(),
           maxWidth: (() => {
             // For Main Canvas

frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js

@@ -350,7 +350,14 @@ export function pasteComponents(parentId, copiedComponentObj) {
   const currentPageId = useStore.getState().getCurrentPageId();
   const { isCut = false, newComponents: pastedComponents = [], pageId, isCloning = false } = copiedComponentObj;
   // Prevent pasting if the parent subcontainer was deleted during a cut operation
-  if (parentId && !Object.keys(components).find((key) => parentId === key)) {
+  if (
+    parentId &&
+    !Object.keys(components).find(
+      (key) =>
+        parentId === key ||
+        (components?.[key]?.component.component === 'Tabs' && parentId?.split('-')?.slice(0, -1)?.join('-') === key)
+    )
+  ) {
     return;
   }
   if (parentId) {
@@ -444,10 +451,9 @@ export const getCanvasWidth = (currentLayout) => {
   }
 };
 
-export const computeCanvasBackgroundColor = (isAppDarkMode, canvasBgColor) => {
-  const canvasBackgroundColor = canvasBgColor ? canvasBgColor : '#edeff5';
-  if (['#2f3c4c', '#edeff5'].includes(canvasBackgroundColor)) {
-    return isAppDarkMode ? '#2f3c4c' : '#edeff5';
+export const computeViewerBackgroundColor = (isAppDarkMode, canvasBgColor) => {
+  if (['#2f3c4c', '#F2F2F5', '#edeff5'].includes(canvasBgColor)) {
+    return isAppDarkMode ? '#2f3c4c' : '#F2F2F5';
   }
-  return canvasBackgroundColor;
+  return canvasBgColor;
 };

frontend/src/AppBuilder/Header/AppVersionsManager.jsx

@@ -125,10 +125,7 @@ export const AppVersionsManager = function ({ darkMode }) {
     deleteVersionAction(
       appId,
       versionId,
-      (newVersionDef) => {
-        if (newVersionDef) {
-          setCurrentVersionId(newVersionDef.id);
-        }
+      () => {
         toast.dismiss(deleteingToastId);
         toast.success(`Version - ${decodeEntities(versionName)} Deleted`);
         resetDeleteModal();

frontend/src/AppBuilder/Header/EditorHeader.jsx

@@ -18,13 +18,6 @@ export const EditorHeader = ({ darkMode }) => {
       isSaving: state.app.isSaving,
       saveError: state.app.saveError,
       isVersionReleased: state.isVersionReleased,
-      user: state.user,
-      app: state.app,
-      appId: state.app.appId,
-      editingVersion: state.editingVersion,
-      updateReleasedVersionId: state.updateReleasedVersionId,
-      updateEditingVersion: state.updateEditingVersion,
-      featureAccess: state.featureAccess,
     }),
     shallow
   );

frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx

@@ -85,7 +85,7 @@ const LeftSidebarInspector = ({ darkMode, pinned, setPinned }) => {
 
     return jsontreeData;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables]);
+  }, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables, sortedGlobalVariables]);
 
   return (
     <div

frontend/src/AppBuilder/Viewer/DesktopHeader.jsx

@@ -21,7 +21,7 @@ const DesktopHeader = ({
 }) => {
   const { showDarkModeToggle, isReleasedVersionId } = useStore(
     (state) => ({
-      isReleasedVersionId: state?.releasedVersionId == state.selectedVersion?.id || state.isVersionReleased,
+      isReleasedVersionId: state?.releasedVersionId == state.currentVersionId || state.isVersionReleased,
       showDarkModeToggle: state.globalSettings.appMode === 'auto' || !state.globalSettings.appMode,
     }),
     shallow

frontend/src/AppBuilder/Viewer/Viewer.jsx

@@ -13,8 +13,6 @@ import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
 import ViewerSidebarNavigation from './ViewerSidebarNavigation';
 import { shallow } from 'zustand/shallow';
-import { computeCanvasBackgroundColor } from '@/AppBuilder/AppCanvas/appCanvasUtils';
-import { resolveReferences } from '@/_helpers/utils';
 import Popups from '../Popups';
 import TooljetBanner from './TooljetBanner';
 import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
@@ -65,7 +63,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
   );
   const getCurrentPageComponents = useStore((state) => state.getCurrentPageComponents(), shallow);
   const currentPageComponents = useMemo(() => getCurrentPageComponents, [getCurrentPageComponents]);
-  const changeDarkMode = useStore((state) => state.changeDarkMode);
   const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
   const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', darkMode), shallow);
 

frontend/src/AppBuilder/_hooks/useAppData.js

@@ -165,10 +165,23 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
         };
       }
 
-      const constantsResp =
-        isPublicAccess && appData.is_public
-          ? await orgEnvironmentConstantService.getConstantsFromPublicApp(slug)
-          : await orgEnvironmentConstantService.getConstantsFromApp();
+      let constantsResp;
+      if (mode === 'edit') {
+        let defaultEnvId = null;
+        if (editorEnvironment?.id == null) {
+          const envs = await appEnvironmentService.getAllEnvironments(appId);
+          const defaultEnv = envs.environments.find((env) => env?.is_default === true);
+          defaultEnvId = defaultEnv ? defaultEnv.id : null;
+        }
+        constantsResp = await orgEnvironmentConstantService.getConstantsFromEnvironment(
+          editorEnvironment?.id || defaultEnvId
+        );
+      } else {
+        constantsResp =
+          isPublicAccess && appData.is_public
+            ? await orgEnvironmentConstantService.getConstantsFromPublicApp(slug)
+            : await orgEnvironmentConstantService.getConstantsFromApp(slug);
+      }
 
       const pages = appData.pages.map((page) => {
         return page;

frontend/src/_components/DarkModeToggle.jsx

@@ -4,6 +4,8 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
 
 export const DarkModeToggle = function DarkModeToggle({
   darkMode = false,
@@ -11,8 +13,14 @@ export const DarkModeToggle = function DarkModeToggle({
   tooltipPlacement = 'bottom',
   showText = false,
 }) {
+  const setResolvedGlobals = useStore((state) => state.setResolvedGlobals, shallow);
+  const appMode = useStore((state) => state.globalSettings.appMode, shallow);
+
   const toggleDarkMode = () => {
     switchDarkMode(!darkMode);
+    if (appMode === 'auto') {
+      setResolvedGlobals('theme', { name: !darkMode ? 'dark' : 'light' });
+    }
   };
 
   const { t } = useTranslation();

frontend/src/_styles/theme.scss

@@ -766,7 +766,7 @@ button {
       right: 300px;
       left: 48px;
       overflow-y: scroll;
-      overflow-x: auto;
+      overflow-x: hidden;
       -webkit-box-pack: center;
       justify-content: center;
       -webkit-box-align: center;