[appdef-2] : Fixes frontend issues (#7636)

* Fix UI issues

* Fix Scrollbar is not available after we pin the inspector.

* Fix button  jumping places if switched from extended monitor to laptop.

* Fix white background around canvas

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) => {
       </div>
     );
   }
-
   return (
     <div className="editor wrapper">
       <Confirm
@@ -1602,7 +1598,7 @@ const EditorComponent = (props) => {
               isMaintenanceOn={isMaintenanceOn}
               toggleAppMaintenance={toggleAppMaintenance}
             />
-            {!props.showComments && (
+            {!showComments && (
               <Selecto
                 dragContainer={'.canvas-container'}
                 selectableTargets={['.react-draggable']}
@@ -1634,7 +1630,7 @@ const EditorComponent = (props) => {
                     (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 && (
                       <>
                         <Container
-                          canvasWidth={canvasWidth}
+                          canvasWidth={getCanvasWidth()}
                           socket={socket}
                           appDefinition={appDefinition}
                           appDefinitionChanged={appDefinitionChanged}
@@ -1717,7 +1713,7 @@ const EditorComponent = (props) => {
                         />
                         <CustomDragLayer
                           snapToGrid={true}
-                          canvasWidth={canvasWidth}
+                          canvasWidth={getCanvasWidth()}
                           onDragging={(isDragging) => setIsDragging(isDragging)}
                         />
                       </>
@@ -1781,7 +1777,7 @@ const EditorComponent = (props) => {
                 ></WidgetManager>
               )}
             </div>
-            {config.COMMENT_FEATURE_ENABLE && props.showComments && (
+            {config.COMMENT_FEATURE_ENABLE && showComments && (
               <CommentNotifications socket={socket} pageId={currentPageId} />
             )}
           </div>
@@ -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 <Component {...props} currentState={currentState} showComments={showComments} currentLayout={currentLayout} />;
-};
-
-export const EditorFunc = withTranslation()(withRouter(withStore(EditorComponent)));
+export const EditorFunc = withTranslation()(withRouter(EditorComponent));

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}
                     />
                   )}
                 </div>

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
               </label>
               <hr style={{ margin: '0.75rem 0' }} />
               <div className="menu-options mb-0">
-                <Toggle onChange={onChange} value={showPageViwerPageNavitation} />
+                <Toggle onChange={onChange} value={isViewerNavigationDisabled} />
               </div>
             </div>
           </Popover.Body>

frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx

@@ -89,7 +89,7 @@ const LeftSidebarPageSelector = ({
               <GlobalSettings
                 darkMode={darkMode}
                 showHideViewerNavigationControls={showHideViewerNavigationControls}
-                showPageViwerPageNavitation={!appDefinition?.showViewerNavigation || false}
+                isViewerNavigationDisabled={!appDefinition?.showViewerNavigation}
               />
             }
           >

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]);

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 {
                   </div>
                 </div>
                 <hr />
-                {(this.state.isPublic || window?.public_config?.ENABLE_PRIVATE_APP_EMBED === 'true') && (
+                {(this?.props?.isPublic || window?.public_config?.ENABLE_PRIVATE_APP_EMBED === 'true') && (
                   <div className="shareable-link mb-3">
                     <label className="form-label" data-cy="iframe-link-label">
                       <small>

server/src/services/apps.service.ts

@@ -141,8 +141,8 @@ export class AppsService {
       appVersion.globalSettings = {
         hideHeader: false,
         appInMaintenance: false,
-        canvasMaxWidth: 1292,
-        canvasMaxWidthType: 'px',
+        canvasMaxWidth: 100,
+        canvasMaxWidthType: '%',
         canvasMaxHeight: 2400,
         canvasBackgroundColor: '#edeff5',
         backgroundFxQuery: '',