diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 84225b68e6..e38a0db5af 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -99,7 +99,7 @@ const EditorComponent = (props) => { currentSidebarTab, isLoading, defaultComponentStateComputed, - + showComments, showLeftSidebar, queryConfirmationList, } = useEditorState(); @@ -120,6 +120,8 @@ const EditorComponent = (props) => { areOthersOnSameVersionAndPage, } = useAppInfo(); + const currentState = useCurrentState(); + const [currentPageId, setCurrentPageId] = useState(null); const [zoomLevel, setZoomLevel] = useState(1); const [isQueryPaneDragging, setIsQueryPaneDragging] = useState(false); @@ -179,7 +181,7 @@ const EditorComponent = (props) => { useCurrentStateStore.getState().actions.setCurrentState({ globals: { - ...props.currentState.globals, + ...currentState.globals, currentUser: userVars, }, }); @@ -236,6 +238,13 @@ const EditorComponent = (props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [JSON.stringify({ appDefinition, lastKeyPressTimestamp })]); + useEffect(() => { + if (!isEmpty(canvasContainerRef?.current)) { + canvasContainerRef.current.scrollLeft += editorMarginLeft; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [editorMarginLeft]); + const handleMessage = (event) => { const { data } = event; @@ -341,7 +350,7 @@ const EditorComponent = (props) => { }); const globals = { - ...props.currentState.globals, + ...currentState.globals, theme: { name: props?.darkMode ? 'dark' : 'light' }, urlparams: JSON.parse(JSON.stringify(queryString.parse(props.location.search))), }; @@ -435,25 +444,13 @@ const EditorComponent = (props) => { setZoomLevel(zoom); }; - const [canvasWidth, setCanvasWidth] = useState(1092); - const getCanvasWidth = () => { const canvasBoundingRect = document.getElementsByClassName('canvas-area')[0]?.getBoundingClientRect(); const _canvasWidth = canvasBoundingRect?.width; - - if (_canvasWidth) { - setCanvasWidth(_canvasWidth); - } + return _canvasWidth; }; - useEffect(() => { - if (mounted) { - getCanvasWidth(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentLayout]); - const computeCanvasContainerHeight = () => { // 45 = (height of header) // 85 = (the height of the query panel header when minimised) + (height of header) @@ -497,7 +494,7 @@ const EditorComponent = (props) => { const changeDarkMode = (newMode) => { useCurrentStateStore.getState().actions.setCurrentState({ globals: { - ...props.currentState.globals, + ...currentState.globals, theme: { name: newMode ? 'dark' : 'light' }, }, }); @@ -605,7 +602,9 @@ const EditorComponent = (props) => { return Object.entries(appDefinition?.pages).map(([id, page]) => ({ ...page, id })); }; - const handleEditorMarginLeftChange = (value) => setEditorMarginLeft(value); + const handleEditorMarginLeftChange = (value) => { + setEditorMarginLeft(value); + }; const globalSettingsChanged = (globalOptions) => { const copyOfAppDefinition = JSON.parse(JSON.stringify(appDefinition)); @@ -1079,8 +1078,8 @@ const EditorComponent = (props) => { let newComponents = _appDefinition?.pages[currentPageId].components; for (const selectedComponent of selectedComponents) { - let top = newComponents[selectedComponent.id].layouts[props.currentLayout].top; - let left = newComponents[selectedComponent.id].layouts[props.currentLayout].left; + let top = newComponents[selectedComponent.id].layouts[currentLayout].top; + let left = newComponents[selectedComponent.id].layouts[currentLayout].left; switch (direction) { case 'ArrowLeft': @@ -1097,8 +1096,8 @@ const EditorComponent = (props) => { break; } - newComponents[selectedComponent.id].layouts[props.currentLayout].top = top; - newComponents[selectedComponent.id].layouts[props.currentLayout].left = left; + newComponents[selectedComponent.id].layouts[currentLayout].top = top; + newComponents[selectedComponent.id].layouts[currentLayout].left = left; } _appDefinition.pages[currentPageId].components = newComponents; @@ -1463,9 +1462,9 @@ const EditorComponent = (props) => { const showHideViewerNavigation = () => { const copyOfAppDefinition = JSON.parse(JSON.stringify(appDefinition)); const newAppDefinition = _.cloneDeep(copyOfAppDefinition); - + console.log(newAppDefinition.showViewerNavigation, 'Bedore'); newAppDefinition.showViewerNavigation = !newAppDefinition.showViewerNavigation; - + console.log(newAppDefinition.showViewerNavigation, 'newAppDefinition.showViewerNavigation'); appDefinitionChanged(newAppDefinition, { generalAppDefinitionChanged: true, }); @@ -1473,8 +1472,6 @@ const EditorComponent = (props) => { // !------- - const currentState = props?.currentState; - const appVersionPreviewLink = editingVersion ? `/applications/${appId}/versions/${editingVersion.id}/${currentState.page.handle}` : ''; @@ -1514,7 +1511,6 @@ const EditorComponent = (props) => { ); } - return (
{ isMaintenanceOn={isMaintenanceOn} toggleAppMaintenance={toggleAppMaintenance} /> - {!props.showComments && ( + {!showComments && ( { (editorMarginLeft ? editorMarginLeft - 1 : editorMarginLeft) + `px solid ${computeCanvasBackgroundColor()}`, height: computeCanvasContainerHeight(), - background: !props.darkMode && '#f4f6fa', + background: !props.darkMode ? '#EBEBEF' : '#2E3035', }} onMouseUp={(e) => { if (['real-canvas', 'modal'].includes(e.target.className)) { @@ -1691,7 +1687,7 @@ const EditorComponent = (props) => { {defaultComponentStateComputed && ( <> { /> setIsDragging(isDragging)} /> @@ -1781,7 +1777,7 @@ const EditorComponent = (props) => { > )}
- {config.COMMENT_FEATURE_ENABLE && props.showComments && ( + {config.COMMENT_FEATURE_ENABLE && showComments && ( )} @@ -1791,18 +1787,4 @@ const EditorComponent = (props) => { ); }; -const withStore = (Component) => (props) => { - const { showComments, currentLayout } = useEditorStore( - (state) => ({ - showComments: state?.showComments, - currentLayout: state?.currentLayout, - }), - shallow - ); - - const currentState = useCurrentState(); - - return ; -}; - -export const EditorFunc = withTranslation()(withRouter(withStore(EditorComponent))); +export const EditorFunc = withTranslation()(withRouter(EditorComponent)); diff --git a/frontend/src/Editor/Header/index.js b/frontend/src/Editor/Header/index.js index 610a8129c0..75faef7e70 100644 --- a/frontend/src/Editor/Header/index.js +++ b/frontend/src/Editor/Header/index.js @@ -37,7 +37,6 @@ export default function EditorHeader({ const { updateState } = useAppDataActions(); const { isSaving, appId, appName, app, isPublic } = useAppInfo(); - const handleSlugChange = (newSlug) => { updateState({ slug: newSlug }); }; @@ -155,6 +154,7 @@ export default function EditorHeader({ M={M} handleSlugChange={handleSlugChange} darkMode={darkMode} + isPublic={isPublic ?? false} /> )} diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx index 407eb03e02..cda8280925 100644 --- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx +++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx @@ -4,7 +4,7 @@ import { useAppVersionStore } from '@/_stores/appVersionStore'; import { shallow } from 'zustand/shallow'; import SolidIcon from '@/_ui/Icon/SolidIcons'; -export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, showPageViwerPageNavitation }) => { +export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, isViewerNavigationDisabled }) => { const { isVersionReleased, enableReleasedVersionPopupState } = useAppVersionStore( (state) => ({ isVersionReleased: state.isVersionReleased, @@ -35,7 +35,7 @@ export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, sho
- +
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx index ba57454e8c..f39a5e2ad9 100644 --- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx +++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx @@ -89,7 +89,7 @@ const LeftSidebarPageSelector = ({ } > diff --git a/frontend/src/Editor/LeftSidebar/index.jsx b/frontend/src/Editor/LeftSidebar/index.jsx index cd7a2eda30..993c8c37ec 100644 --- a/frontend/src/Editor/LeftSidebar/index.jsx +++ b/frontend/src/Editor/LeftSidebar/index.jsx @@ -44,7 +44,6 @@ export const LeftSidebar = forwardRef((props, ref) => { updatePageHandle, showHideViewerNavigationControls, updateOnSortingPages, - apps, clonePage, setEditorMarginLeft, @@ -93,6 +92,8 @@ export const LeftSidebar = forwardRef((props, ref) => { useEffect(() => { if (!selectedSidebarItem) { setEditorMarginLeft(0); + } else { + setEditorMarginLeft(350); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedSidebarItem]); diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx index 6114a4a228..273802ad11 100644 --- a/frontend/src/Editor/ManageAppUsers.jsx +++ b/frontend/src/Editor/ManageAppUsers.jsx @@ -11,6 +11,7 @@ import { Link } from 'react-router-dom'; import { getPrivateRoute } from '@/_helpers/routes'; import SolidIcon from '@/_ui/Icon/SolidIcons'; import { getSubpath } from '@/_helpers/utils'; +import { useAppDataStore } from '@/_stores/appDataStore'; class ManageAppUsersComponent extends React.Component { constructor(props) { @@ -19,7 +20,6 @@ class ManageAppUsersComponent extends React.Component { this.state = { showModal: false, - isPublic: false, appId: null, slugError: null, isLoading: true, @@ -32,7 +32,7 @@ class ManageAppUsersComponent extends React.Component { componentDidMount() { const appId = this.props.appId; this.fetchAppUsers(appId); - this.setState({ appId, isPublic: this.props.isPublic }); + this.setState({ appId }); } fetchAppUsers = (appId) => { @@ -78,11 +78,11 @@ class ManageAppUsersComponent extends React.Component { }; toggleAppVisibility = () => { - const newState = !this.state.isPublic; + const newState = !this.props.isPublic; this.setState({ ischangingVisibility: true, }); - + useAppDataStore.getState().actions.updateState({ isPublic: newState }); // eslint-disable-next-line no-unused-vars appService .setVisibility(this.state.appId, newState) @@ -101,6 +101,7 @@ class ManageAppUsersComponent extends React.Component { toast('Application visibility set to private'); } }) + .catch((error) => { this.setState({ ischangingVisibility: false, @@ -135,7 +136,7 @@ class ManageAppUsersComponent extends React.Component { }, 500); render() { - const { isLoading, app, slugError, isSlugVerificationInProgress, appId } = this.state; + const { isLoading, slugError, isSlugVerificationInProgress, appId } = this.state; const appLink = `${window.public_config?.TOOLJET_HOST}${getSubpath() ? getSubpath() : ''}/applications/`; const shareableLink = appLink + (this.props.slug || appId); @@ -177,7 +178,7 @@ class ManageAppUsersComponent extends React.Component { className="form-check-input color-slate12" type="checkbox" onClick={this.toggleAppVisibility} - checked={this.state.isPublic} + checked={this?.props?.isPublic} disabled={this.state.ischangingVisibility} data-cy="make-public-app-toggle" /> @@ -224,7 +225,7 @@ class ManageAppUsersComponent extends React.Component {
- {(this.state.isPublic || window?.public_config?.ENABLE_PRIVATE_APP_EMBED === 'true') && ( + {(this?.props?.isPublic || window?.public_config?.ENABLE_PRIVATE_APP_EMBED === 'true') && (