add showHeaderInPublic switch in app setting

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

@@ -18,6 +18,7 @@ import { StringControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ApplicationCategoriesEnum } from "constants/applicationConstants";
+import { BoolControl } from "../controls/boolControl";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -182,6 +183,7 @@ const childrenMap = {
   description: withDefault(StringControl, ''),
   icon: IconControl,
   category: dropdownControl(AppCategories, ApplicationCategoriesEnum.BUSINESS),
+  showHeaderInPublic: withDefault(BoolControl, true),
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   themeId: valueComp<string>(DEFAULT_THEMEID),
   customShortcuts: CustomShortcutsComp,
@@ -202,6 +204,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     description,
     icon,
     category,
+    showHeaderInPublic,
   } = props;
   const THEME_OPTIONS = themeList?.map((theme) => ({
     label: theme.name,
@@ -255,6 +258,11 @@ function AppSettingsModal(props: ChildrenInstance) {
             tooltip: trans("aggregation.iconTooltip"),
           })}
         </div>
+        <div style={{ margin: '20px 0'}}>
+          {showHeaderInPublic.propertyView({
+            label: trans("appSetting.showPublicHeader"),
+          })}
+        </div>
         {maxWidth.propertyView({
           dropdownLabel: trans("appSetting.canvasMaxWidth"),
           inputLabel: trans("appSetting.userDefinedMaxWidth"),

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2087,6 +2087,7 @@ export const en = {
     "appTitle": "Title",
     "appDescription": "Description",
     "appCategory": "Category",
+    "showPublicHeader": "Show header in public view"
   },
   "customShortcut": {
     "title": "Custom Shortcuts",

client/packages/lowcoder/src/pages/editor/editorView.tsx

@@ -4,7 +4,7 @@ import { default as Sider} from "antd/es/layout/Sider";
 import { PreloadComp } from "comps/comps/preLoadComp";
 import UIComp from "comps/comps/uiComp";
 import { EditorContext } from "comps/editorState";
-import { AppUILayoutType } from "constants/applicationConstants";
+import { AppPathParams, AppUILayoutType } from "constants/applicationConstants";
 import { Layers } from "constants/Layers";
 import { TopHeaderHeight } from "constants/style";
 import { trans } from "i18n";
@@ -38,7 +38,7 @@ import React, {
 } from "react";
 import { Helmet } from "react-helmet";
 import { useDispatch, useSelector } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { setEditorExternalStateAction } from "redux/reduxActions/configActions";
 import { currentApplication } from "redux/selectors/applicationSelector";
 import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
@@ -274,6 +274,7 @@ const aggregationSiderItems = [
 
 function EditorView(props: EditorViewProps) {
   const { uiComp } = props;
+  const params = useParams<AppPathParams>();
   const editorState = useContext(EditorContext);
   const { readOnly, hideHeader } = useContext(ExternalEditorContext);
   const application = useSelector(currentApplication);
@@ -296,6 +297,11 @@ function EditorView(props: EditorViewProps) {
   const [prePanelStatus, setPrePanelStatus] =
     useState<PanelStatus>(DefaultPanelStatus);
 
+  const isViewMode = params.viewMode === 'view';
+
+  const appSettingsComp = editorState.getAppSettingsComp();
+  const { showHeaderInPublic } = appSettingsComp.getView();
+
   const togglePanel: TogglePanel = useCallback(
     (key) => {
       let newPanelStatus;
@@ -363,7 +369,7 @@ function EditorView(props: EditorViewProps) {
     return () => window.removeEventListener(eventType, updateSize);
   }, []);
 
-  const hideBodyHeader = useTemplateViewMode();
+  const hideBodyHeader = useTemplateViewMode() || (isViewMode && !showHeaderInPublic);
 
   // we check if we are on the public cloud
   const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
@@ -430,7 +436,6 @@ function EditorView(props: EditorViewProps) {
     savePanelStatus({ ...panelStatus, left });
     setMenuKey(params.key);
   };
-  const appSettingsComp = editorState.getAppSettingsComp();
 
   return (
     <Height100Div