diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx index 79d924bcdd..57abd32263 100644 --- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx +++ b/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' diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx index 8b6e27f4e6..d2f6625488 100644 --- a/frontend/src/AppBuilder/AppCanvas/Container.jsx +++ b/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 diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index fd706e7cb1..6171473174 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/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; }; diff --git a/frontend/src/AppBuilder/Header/AppVersionsManager.jsx b/frontend/src/AppBuilder/Header/AppVersionsManager.jsx index 52752794d5..c4dba6d3da 100644 --- a/frontend/src/AppBuilder/Header/AppVersionsManager.jsx +++ b/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(); diff --git a/frontend/src/AppBuilder/Header/EditorHeader.jsx b/frontend/src/AppBuilder/Header/EditorHeader.jsx index d5ac4b767d..d346ff0826 100644 --- a/frontend/src/AppBuilder/Header/EditorHeader.jsx +++ b/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 ); diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx index 6b816e0ecf..6bc5bbd974 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx +++ b/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 (
{ 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 diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx index a9c26bb121..a7c30059ad 100644 --- a/frontend/src/AppBuilder/Viewer/Viewer.jsx +++ b/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); diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js index fd1a07c994..80406fe740 100644 --- a/frontend/src/AppBuilder/_hooks/useAppData.js +++ b/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; diff --git a/frontend/src/_components/DarkModeToggle.jsx b/frontend/src/_components/DarkModeToggle.jsx index 2f0ef8474c..c492117dd7 100644 --- a/frontend/src/_components/DarkModeToggle.jsx +++ b/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(); diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index b17f035373..13d3f9b88f 100644 --- a/frontend/src/_styles/theme.scss +++ b/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;