From 5694ff17d1f784ad8220078565ecb846d8c3184a Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 12 Nov 2024 11:31:14 +0530 Subject: [PATCH 1/3] Fixes dark mode, mode theme in inspector, bg color in viewer, widget copying in Tab --- .../src/AppBuilder/AppCanvas/AppCanvas.jsx | 13 +++++++----- .../src/AppBuilder/AppCanvas/Container.jsx | 10 ++++++--- .../AppBuilder/AppCanvas/appCanvasUtils.js | 18 ++++++++++------ .../AppBuilder/Header/AppVersionsManager.jsx | 5 +---- .../src/AppBuilder/Header/EditorHeader.jsx | 7 ------- .../LeftSidebarInspector.jsx | 2 +- .../src/AppBuilder/Viewer/DesktopHeader.jsx | 2 +- frontend/src/AppBuilder/Viewer/Viewer.jsx | 6 +----- .../Table/columns/autogenerateColumns.js | 9 +++++++- frontend/src/AppBuilder/_hooks/useAppData.js | 21 +++++++++++++++---- frontend/src/_components/DarkModeToggle.jsx | 8 +++++++ 11 files changed, 64 insertions(+), 37 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx index 63470acd85..947b6ee952 100644 --- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx +++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx @@ -7,7 +7,7 @@ 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,8 +38,7 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => { const setIsComponentLayoutReady = useStore((state) => state.setIsComponentLayoutReady, shallow); const canvasMaxWidth = useAppCanvasMaxWidth({ mode: currentMode }); const editorMarginLeft = useSidebarMargin(canvasContainerRef); - 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 @@ -71,8 +70,12 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => { // transform: `scale(1)`, borderLeft: 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 && 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 18d01867ef..e8a04aab0b 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'; @@ -63,9 +61,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod }), shallow ); - const getCurrentPageComponents = useStore((state) => state.getCurrentPageComponents, shallow); - const currentPageComponents = useMemo(() => getCurrentPageComponents(), [getCurrentPageComponents]); - const changeDarkMode = useStore((state) => state.changeDarkMode); + const currentPageComponents = useStore((state) => state.getCurrentPageComponents(), shallow); const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow); const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', darkMode), shallow); diff --git a/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js b/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js index 235205dbb3..98faa12da0 100644 --- a/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js +++ b/frontend/src/AppBuilder/Widgets/Table/columns/autogenerateColumns.js @@ -107,7 +107,14 @@ export default function autogenerateColumns( finalKeys.includes(column?.key || column?.name) ); - setTimeout(() => setProperty(id, 'columns', finalColumns, 'properties'), 10); + setTimeout( + () => + setProperty(id, 'columns', finalColumns, 'properties', 'value', false, 'canvas', { + skipUndoRedo: true, + saveAfterAction: true, + }), + 10 + ); } const dataTypeToColumnTypeMapping = { diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js index bb745f2568..a42919479a 100644 --- a/frontend/src/AppBuilder/_hooks/useAppData.js +++ b/frontend/src/AppBuilder/_hooks/useAppData.js @@ -163,10 +163,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(); From fbbc83276c3d5d427b921355f7b33b64cc856fce Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 12 Nov 2024 11:43:10 +0530 Subject: [PATCH 2/3] Fix --- frontend/src/AppBuilder/Viewer/Viewer.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx index e8a04aab0b..afea59a52c 100644 --- a/frontend/src/AppBuilder/Viewer/Viewer.jsx +++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx @@ -61,7 +61,8 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod }), shallow ); - const currentPageComponents = useStore((state) => state.getCurrentPageComponents(), shallow); + const getCurrentPageComponents = useStore((state) => state.getCurrentPageComponents(), shallow); + const currentPageComponents = useMemo(() => getCurrentPageComponents, [getCurrentPageComponents]); const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow); const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', darkMode), shallow); From 046a896a275f17be5d4a788528164bdcf48d6806 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 12 Nov 2024 13:11:21 +0530 Subject: [PATCH 3/3] Fix overflow auto on canvas container --- frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx | 5 +++-- frontend/src/_styles/theme.scss | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx index 947b6ee952..1a4667648e 100644 --- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx +++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx @@ -38,6 +38,7 @@ 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); useEffect(() => { // Need to remove this if we shift setExposedVariable Logic outside of components @@ -63,8 +64,8 @@ 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)`, diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index 50fb8d60f6..b24f77a154 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;