From c1a42e7012753be87f66bfc7336dd2468fab2996 Mon Sep 17 00:00:00 2001
From: arpitnath <arpitnath42@gmail.com>
Date: Tue, 15 Aug 2023 03:36:40 +0530
Subject: [PATCH] v2 api for global settings

---
 frontend/src/Editor/EditorFunc.jsx            | 49 ++++-----------
 frontend/src/Editor/Header/GlobalSettings.jsx | 59 ++++++++-----------
 frontend/src/_services/appVersion.service.js  |  6 +-
 frontend/src/_stores/utils.js                 |  7 +++
 server/src/controllers/apps.controller.v2.ts  | 23 ++++++++
 server/src/services/apps.service.ts           |  4 ++
 6 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx
index b6cd82805a..2bc04a8450 100644
--- a/frontend/src/Editor/EditorFunc.jsx
+++ b/frontend/src/Editor/EditorFunc.jsx
@@ -78,31 +78,6 @@ function setWindowTitle(name) {
 
 const decimalToHex = (alpha) => (alpha === 0 ? '00' : Math.round(255 * alpha).toString(16));
 
-const defaultDefinition = (darkMode) => {
-  const defaultPageId = uuid();
-  return {
-    showViewerNavigation: true,
-    homePageId: defaultPageId,
-    pages: {
-      [defaultPageId]: {
-        components: {},
-        handle: 'home',
-        name: 'Home',
-        index: 0,
-      },
-    },
-    globalSettings: {
-      hideHeader: false,
-      appInMaintenance: false,
-      canvasMaxWidth: 1292,
-      canvasMaxWidthType: 'px',
-      canvasMaxHeight: 2400,
-      canvasBackgroundColor: darkMode ? '#2f3c4c' : '#edeff5',
-      backgroundFxQuery: '',
-    },
-  };
-};
-
 const EditorComponent = (props) => {
   const { socket } = createWebsocketConnection(props?.params?.id);
   const mounted = useMounted();
@@ -569,7 +544,6 @@ const EditorComponent = (props) => {
   };
 
   const computeCanvasBackgroundColor = () => {
-    //!Global settings needs to be out
     const { canvasBackgroundColor } = appDefinition?.globalSettings ?? '#edeff5';
     if (['#2f3c4c', '#edeff5'].includes(canvasBackgroundColor)) {
       return props.darkMode ? '#2f3c4c' : '#edeff5';
@@ -604,19 +578,20 @@ const EditorComponent = (props) => {
 
   const handleEditorMarginLeftChange = (value) => setEditorMarginLeft(value);
 
-  const globalSettingsChanged = (key, value) => {
+  const globalSettingsChanged = (globalOptions) => {
     const copyOfAppDefinition = JSON.parse(JSON.stringify(appDefinition));
     const newAppDefinition = _.cloneDeep(copyOfAppDefinition);
 
-    if (value?.[1]?.a == undefined) newAppDefinition.globalSettings[key] = value;
-    else {
-      const hexCode = `${value?.[0]}${decimalToHex(value?.[1]?.a)}`;
-      newAppDefinition.globalSettings[key] = hexCode;
+    for (const [key, value] of Object.entries(globalOptions)) {
+      if (value?.[1]?.a == undefined) newAppDefinition.globalSettings[key] = value;
+      else {
+        const hexCode = `${value?.[0]}${decimalToHex(value?.[1]?.a)}`;
+        newAppDefinition.globalSettings[key] = hexCode;
+      }
     }
 
     updateEditorState({
       isSaving: true,
-      // appDefinition,
     });
 
     appDefinitionChanged(newAppDefinition, {
@@ -776,11 +751,11 @@ const EditorComponent = (props) => {
   // !--------
   const setAppDefinitionFromVersion = (version, shouldWeEditVersion = true) => {
     if (version?.id !== props.editingVersion?.id) {
-      appDefinitionChanged(defaults(version.definition, defaultDefinition(props.darkMode)), {
-        skipAutoSave: true,
-        skipYmapUpdate: true,
-        versionChanged: true,
-      });
+      // appDefinitionChanged(defaults(version.definition, defaultDefinition(props.darkMode)), {
+      //   skipAutoSave: true,
+      //   skipYmapUpdate: true,
+      //   versionChanged: true,
+      // });
       if (version?.id === currentVersionId) {
         updateEditorState({
           canUndo: false,
diff --git a/frontend/src/Editor/Header/GlobalSettings.jsx b/frontend/src/Editor/Header/GlobalSettings.jsx
index 9b169ea7dc..a8abcc7bb5 100644
--- a/frontend/src/Editor/Header/GlobalSettings.jsx
+++ b/frontend/src/Editor/Header/GlobalSettings.jsx
@@ -49,12 +49,6 @@ export const GlobalSettings = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentState.components]);
 
-  React.useEffect(() => {
-    backgroundFxQuery &&
-      globalSettingsChanged('canvasBackgroundColor', resolveReferences(backgroundFxQuery, realState));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(resolveReferences(backgroundFxQuery, realState))]);
-
   const popoverContent = (
     <div id="global-settings-popover" className={cx({ 'theme-dark': darkMode, disabled: isVersionReleased })}>
       <div bsPrefix="global-settings-popover">
@@ -73,7 +67,7 @@ export const GlobalSettings = ({
                   className="form-check-input"
                   type="checkbox"
                   checked={hideHeader}
-                  onChange={(e) => globalSettingsChanged('hideHeader', e.target.checked)}
+                  onChange={(e) => globalSettingsChanged({ hideHeader: e.target.checked })}
                 />
               </div>
             </div>
@@ -104,7 +98,7 @@ export const GlobalSettings = ({
                     placeholder={'0'}
                     onChange={(e) => {
                       const width = e.target.value;
-                      if (!Number.isNaN(width) && width >= 0) globalSettingsChanged('canvasMaxWidth', width);
+                      if (!Number.isNaN(width) && width >= 0) globalSettingsChanged({ canvasMaxWidth: width });
                     }}
                     value={canvasMaxWidth}
                   />
@@ -114,12 +108,17 @@ export const GlobalSettings = ({
                     aria-label="Select canvas width type"
                     onChange={(event) => {
                       const newCanvasMaxWidthType = event.currentTarget.value;
-                      globalSettingsChanged('canvasMaxWidthType', newCanvasMaxWidthType);
+
+                      const options = {
+                        canvasMaxWidthType: newCanvasMaxWidthType,
+                      };
+
                       if (newCanvasMaxWidthType === '%') {
-                        globalSettingsChanged('canvasMaxWidth', 100);
+                        options.canvasMaxWidth = 100;
                       } else if (newCanvasMaxWidthType === 'px') {
-                        globalSettingsChanged('canvasMaxWidth', 1292);
+                        options.canvasMaxWidth = 1292;
                       }
+                      globalSettingsChanged(options);
                     }}
                   >
                     <option value="%" selected={canvasMaxWidthType === '%'}>
@@ -132,27 +131,7 @@ export const GlobalSettings = ({
                 </div>
               </div>
             </div>
-            {/* <div className="d-flex mb-3">
-              <span className="w-full m-auto" data-cy={`label-max-canvas-height`}>
-                {t('leftSidebar.Settings.maxHeightOfCanvas', 'Max height of canvas')}
-              </span>
-              <div className="position-relative">
-                <div className="input-with-icon">
-                  <input
-                    data-cy="maximum-canvas-height-input-field"
-                    type="text"
-                    className={`form-control form-control-sm maximum-canvas-height-input-field`}
-                    placeholder={'0'}
-                    onChange={(e) => {
-                      const height = e.target.value;
-                      if (!Number.isNaN(height) && height <= 2400) globalSettingsChanged('canvasMaxHeight', height);
-                    }}
-                    value={canvasMaxHeight}
-                  />
-                  <span className="input-group-text">px</span>
-                </div>
-              </div>
-            </div> */}
+
             <div className="d-flex align-items-center">
               <span className="w-full" data-cy={`label-bg-canvas`}>
                 {t('leftSidebar.Settings.backgroundColorOfCanvas', 'Background color of canvas')}
@@ -167,8 +146,12 @@ export const GlobalSettings = ({
                       onFocus={() => setShowPicker(true)}
                       color={canvasBackgroundColor}
                       onChangeComplete={(color) => {
-                        globalSettingsChanged('canvasBackgroundColor', [color.hex, color.rgb]);
-                        globalSettingsChanged('backgroundFxQuery', color.hex);
+                        const options = {
+                          canvasBackgroundColor: [color.hex, color.rgb],
+                          backgroundFxQuery: color.hex,
+                        };
+
+                        globalSettingsChanged(options);
                       }}
                     />
                   </div>
@@ -208,8 +191,12 @@ export const GlobalSettings = ({
                       className="canvas-hinter-wrap"
                       lineNumbers={false}
                       onChange={(color) => {
-                        globalSettingsChanged('canvasBackgroundColor', resolveReferences(color, realState));
-                        globalSettingsChanged('backgroundFxQuery', color);
+                        const options = {
+                          canvasBackgroundColor: resolveReferences(color, realState),
+                          backgroundFxQuery: color,
+                        };
+
+                        globalSettingsChanged(options);
                       }}
                     />
                   )}
diff --git a/frontend/src/_services/appVersion.service.js b/frontend/src/_services/appVersion.service.js
index 131702c17c..248a1e6729 100644
--- a/frontend/src/_services/appVersion.service.js
+++ b/frontend/src/_services/appVersion.service.js
@@ -68,7 +68,11 @@ function autoSaveApp(appId, versionId, diff, type, pageId, operation, isUserSwit
 
   let body = {};
 
-  if (!type || (type === 'pages' && operation === 'create') || operation === 'delete') {
+  if (type === 'pages' && (operation === 'create' || operation === 'delete')) {
+    body = {
+      ...diff,
+    };
+  } else if (!type || type === 'global_settings') {
     body = {
       ...diff,
     };
diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js
index 7ab32bf566..f15a6387df 100644
--- a/frontend/src/_stores/utils.js
+++ b/frontend/src/_stores/utils.js
@@ -53,6 +53,7 @@ const updateFor = (appDiff, currentPageId, opts) => {
   const componentUpdates = ['componentAdded', 'componentDefinitionChanged', 'componentDeleted', 'containerChanges'];
   const pageUpdates = ['pageDefinitionChanged', 'pageSortingChanged', 'deletePageRequest', 'addNewPage'];
   const appUpdates = ['homePageChanged'];
+  const globalSettings = ['globalSettings'];
 
   const options = _.keys(opts);
 
@@ -66,6 +67,12 @@ const updateFor = (appDiff, currentPageId, opts) => {
       type: null,
       operation: 'update',
     };
+  } else if (_.intersection(options, globalSettings).length > 0) {
+    return {
+      updateDiff: appDiff,
+      type: 'global_settings',
+      operation: 'update',
+    };
   }
 };
 
diff --git a/server/src/controllers/apps.controller.v2.ts b/server/src/controllers/apps.controller.v2.ts
index 6b3660812c..a7f19770c0 100644
--- a/server/src/controllers/apps.controller.v2.ts
+++ b/server/src/controllers/apps.controller.v2.ts
@@ -116,6 +116,29 @@ export class AppsControllerV2 {
 
     return await this.appsService.updateAppVersion(version, appVersionUpdateDto);
   }
+  @UseGuards(JwtAuthGuard)
+  @UseInterceptors(ValidAppInterceptor)
+  @Put(':id/versions/:versionId/global_settings')
+  async updateGlobalSettings(
+    @User() user,
+    @Param('id') id,
+    @Param('versionId') versionId,
+    @Body() appVersionUpdateDto: AppVersionUpdateDto
+  ) {
+    const version = await this.appsService.findVersion(versionId);
+    const app = version.app;
+
+    if (app.id !== id) {
+      throw new BadRequestException();
+    }
+    const ability = await this.appsAbilityFactory.appsActions(user, id);
+
+    if (!ability.can('updateVersions', app)) {
+      throw new ForbiddenException('You do not have permissions to perform this action');
+    }
+
+    return await this.appsService.updateAppVersion(version, appVersionUpdateDto);
+  }
 
   //components api
   @UseGuards(JwtAuthGuard)
diff --git a/server/src/services/apps.service.ts b/server/src/services/apps.service.ts
index 535c8891b0..c06dcab80e 100644
--- a/server/src/services/apps.service.ts
+++ b/server/src/services/apps.service.ts
@@ -675,6 +675,10 @@ export class AppsService {
       editableParams['homePageId'] = body.homePageId;
     }
 
+    if (body?.globalSettings) {
+      editableParams['globalSettings'] = body.globalSettings;
+    }
+
     return await this.appVersionsRepository.update(version.id, editableParams);
   }