[OGUI-1813] Save objectTree separator position in local storage (#3188)

* Add local storage for panel separation distribution

Author: generatedkeys

QualityControl/public/common/enums/storageKeys.enum.js

@@ -18,5 +18,6 @@
  * @readonly
  */
 export const StorageKeysEnum = Object.freeze({
+  OBJECT_VIEW_LEFT_PANEL_WIDTH: 'object-view-left-panel-width',
   OBJECT_VIEW_INFO_VISIBILITY_SETTING: 'object-view-info-visibility-setting',
 });

QualityControl/public/object/QCObject.js

@@ -12,11 +12,12 @@
  * or submit itself to any jurisdiction.
  */
 
-import { RemoteData, iconArrowTop } from '/js/src/index.js';
+import { RemoteData, iconArrowTop, BrowserStorage } from '/js/src/index.js';
 import ObjectTree from './ObjectTree.class.js';
 import { prettyFormatDate, setBrowserTabTitle } from './../common/utils.js';
 import { isObjectOfTypeChecker } from './../library/qcObject/utils.js';
 import { BaseViewModel } from '../common/abstracts/BaseViewModel.js';
+import { StorageKeysEnum } from '../common/enums/storageKeys.enum.js';
 
 /**
  * Model namespace for all about QC's objects (not javascript objects)
@@ -56,7 +57,18 @@ export default class QCObject extends BaseViewModel {
     this.scrollTop = 0;
     this.scrollHeight = 0;
 
-    this.leftPanelWidthPercent = 50;
+    this._initializeLeftPanelWidth();
+  }
+
+  /**
+   * Initialize left panel width from local storage or set to default
+   * @returns {undefined}
+   */
+  _initializeLeftPanelWidth() {
+    const DEFAULT_PANEL_WIDTH = 50;
+    this.leftPanelWidthStorage = new BrowserStorage(StorageKeysEnum.OBJECT_VIEW_LEFT_PANEL_WIDTH);
+    const storedWidth = this.leftPanelWidthStorage.getLocalItem(this.model.session.personid.toString());
+    this.leftPanelWidthPercent = storedWidth ?? DEFAULT_PANEL_WIDTH;
   }
 
   /**
@@ -65,6 +77,7 @@ export default class QCObject extends BaseViewModel {
    * @returns {undefined}
    */
   setLeftPanelWidthPercent(widthPercent) {
+    this.leftPanelWidthStorage.setLocalItem(this.model.session.personid.toString(), widthPercent);
     this.leftPanelWidthPercent = widthPercent;
     this.notify();
   }

QualityControl/test/public/pages/object-tree.test.js

@@ -13,6 +13,8 @@
 
 import { strictEqual, ok, deepStrictEqual } from 'node:assert';
 import { delay } from '../../testUtils/delay.js';
+import { getLocalStorage } from '../../testUtils/localStorage.js';
+import { StorageKeysEnum } from '../../../public/common/enums/storageKeys.enum.js';
 
 const OBJECT_TREE_PAGE_PARAM = '?page=objectTree';
 const SORTING_BUTTON_PATH = 'header > div > div > div:nth-child(3) > div > button';
@@ -79,6 +81,73 @@ export const objectTreePageTests = async (url, page, timeout = 5000, testParent)
     },
   );
 
+  await testParent.test(
+    'should have default panel width of 50% when width is null in localStorage',
+    { timeout },
+    async () => {
+      const defaultValue = '50%';
+      const panelWidth = await page.evaluate(() =>
+        document.querySelector('section > div > div > div:nth-child(1)').style.width);
+      const personId = await page.evaluate(() => window.model.session.personid);
+      const storedPanelWidth = await getLocalStorage(
+        page,
+        `${StorageKeysEnum.OBJECT_VIEW_LEFT_PANEL_WIDTH}-${personId}`,
+      );
+      strictEqual(storedPanelWidth, null);
+      strictEqual(panelWidth, defaultValue);
+    },
+  );
+
+  await testParent.test(
+    'should change and store panel width when dragging the divider',
+    { timeout },
+    async () => {
+      const dragAmount = 35;
+      const [container, divider] = await Promise.all([
+        page.$('body > div.absolute-fill.flex-column > div > section'),
+        page.$('section > div > div > div:nth-child(2)'),
+      ]);
+      const [containerBB, dividerBB] = await Promise.all([container.boundingBox(), divider.boundingBox()]);
+
+      const centerX = dividerBB.x + dividerBB.width / 2;
+      const centerY = dividerBB.y + dividerBB.height / 2;
+      const targetX = containerBB.x + containerBB.width * (dragAmount / 100);
+
+      await page.mouse.move(centerX, centerY);
+      await page.mouse.down();
+      await page.mouse.move(targetX, centerY, { steps: 5 });
+      await page.mouse.up();
+      await delay(300);
+
+      const [personId, panelWidth] = await page.evaluate(() => [
+        window.model.session.personid,
+        document.querySelector('section > div > div > div:nth-child(1)').style.width,
+      ]);
+      const storedWidth = await getLocalStorage(page, `${StorageKeysEnum.OBJECT_VIEW_LEFT_PANEL_WIDTH}-${personId}`);
+
+      strictEqual(panelWidth, `${dragAmount}%`);
+      strictEqual(storedWidth, dragAmount.toString());
+    },
+  );
+
+  await testParent.test(
+    'should maintain panel width from localStorage on page reload',
+    { timeout },
+    async () => {
+      const dragAmount = 35;
+      await page.reload({ waitUntil: 'networkidle0' });
+      await page.evaluate(() => document.querySelector('tr.object-selectable:nth-child(2)').click());
+      await delay(500);
+      await page.evaluate(() => document.querySelector('tr.object-selectable:nth-child(3)').click());
+      await delay(500);
+      await page.evaluate(() => document.querySelector('tr.object-selectable:nth-child(4)').click());
+      await delay(1000);
+      const panelWidth = await page.evaluate(() =>
+        document.querySelector('section > div > div > div:nth-child(1)').style.width);
+      strictEqual(panelWidth, `${dragAmount}%`);
+    },
+  );
+
   await testParent.test(
     'should correctly render the path as first in the object info panel',
     { timeout },