underpost 2.8.884 → 2.8.886

package/src/cli/test.js

@@ -1,3 +1,9 @@
+/**
+ * Test module for running tests on the application.
+ * @module src/cli/test.js
+ * @namespace UnderpostTest
+ */
+
 import { timer } from '../client/components/core/CommonJs.js';
 import { MariaDB } from '../db/mariadb/MariaDB.js';
 import { getNpmRootPath } from '../server/conf.js';
@@ -7,6 +13,11 @@ import UnderpostDeploy from './deploy.js';
 
 const logger = loggerFactory(import.meta);
 
+/**
+ * @class UnderpostTest
+ * @description Manages the test of the application.
+ * @memberof UnderpostTest
+ */
 class UnderpostTest {
   static API = {
     /**
@@ -20,15 +31,35 @@ class UnderpostTest {
      * @static
      * @method setUpInfo
      * @returns {Promise<void>}
-     * @memberof Underpost
+     * @memberof UnderpostTest
      */
     async setUpInfo() {
       return await setUpInfo(logger);
     },
+    /**
+     * @method run
+     * @description Runs the test of the application.
+     * @memberof UnderpostTest
+     */
     run() {
       actionInitLog();
       shellExec(`cd ${getNpmRootPath()}/underpost && npm run test`);
     },
+    /**
+     * @method callback
+     * @description Manages the test of the application.
+     * @param {string} deployList - The list of deployments to test.
+     * @param {object} options - The options for the test.
+     * @param {boolean} options.itc - If true, tests the inside container.
+     * @param {boolean} options.sh - If true, tests the shell.
+     * @param {boolean} options.logs - If true, tests the logs.
+     * @param {string} options.podName - The name of the pod to test.
+     * @param {string} options.podStatus - The status of the pod to test.
+     * @param {string} options.kindType - The type of the kind to test.
+     * @param {number} options.deltaMs - The delta time in milliseconds.
+     * @param {number} options.maxAttempts - The maximum number of attempts.
+     * @memberof UnderpostTest
+     */
     async callback(deployList = '', options = { itc: false, sh: false, logs: false }) {
       if (
         options.podName &&
@@ -86,6 +117,16 @@ class UnderpostTest {
         }
       } else return UnderpostTest.API.run();
     },
+    /**
+     * @method statusMonitor
+     * @description Monitors the status of a pod.
+     * @param {string} podName - The name of the pod to monitor.
+     * @param {string} status - The status of the pod to monitor.
+     * @param {string} kindType - The type of the kind to monitor.
+     * @param {number} deltaMs - The delta time in milliseconds.
+     * @param {number} maxAttempts - The maximum number of attempts.
+     * @memberof UnderpostTest
+     */
     statusMonitor(podName, status = 'Running', kindType = '', deltaMs = 1000, maxAttempts = 60 * 5) {
       if (!(kindType && typeof kindType === 'string')) kindType = 'pods';
       return new Promise(async (resolve) => {

package/src/client/components/core/Css.js

@@ -690,14 +690,6 @@ const scrollBarLightRender = () => {
     .join('');
 };
 
-/**
- * Adjust hex color brightness toward white/black ("mix") or by modifying HSL lightness ("hsl").
- *
- * @param {string} hex - Color as '#rrggbb', 'rrggbb', '#rgb', or 'rgb'.
- * @param {number} factor - -1..1 or -100..100 (percent). Positive = lighten, negative = darken.
- * @param {{mode?: 'mix'|'hsl'}} [options]
- * @returns {string} - Adjusted color as '#rrggbb' (lowercase).
- */
 function adjustHex(hex, factor = 0.1, options = {}) {
   if (typeof hex !== 'string') throw new TypeError('hex must be a string');
   if (typeof factor !== 'number') throw new TypeError('factor must be a number');
@@ -831,6 +823,14 @@ const subThemeManager = {
           color: ${this.lightColor};
           background-color: ${lightenHex(this.lightColor, 0.8)};
         }
+        .main-sub-btn-active {
+          color: ${this.lightColor};
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+        .main-sub-btn-active:hover {
+          color: ${this.lightColor};
+          background-color: rgba(0, 0, 0, 0.2);
+        }
       </style>`;
     };
   },
@@ -845,6 +845,14 @@ const subThemeManager = {
           color: ${lightenHex(this.darkColor, 0.8)};
           background-color: ${darkenHex(this.darkColor, 0.75)};
         }
+        .main-sub-btn-active {
+          color: ${lightenHex(this.darkColor, 0.8)};
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+        .main-sub-btn-active:hover {
+          color: ${lightenHex(this.darkColor, 0.8)};
+          background-color: rgba(255, 255, 255, 0.2);
+        }
       </style>`;
     };
   },

package/src/client/components/core/Docs.js

@@ -8,7 +8,7 @@ import { htmls, s } from './VanillaJs.js';
 // https://mintlify.com/docs/quickstart
 
 const Docs = {
-  RenderModal: async function (type, modalOptions) {
+  RenderModal: async function (type) {
     const docData = this.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
@@ -35,7 +35,7 @@ const Docs = {
       observer: true,
       barMode: 'top-bottom-bar',
       query: true,
-      ...modalOptions,
+      RouterInstance: Modal.Data['modal-docs'].options.RouterInstance,
     });
     Modal.Data[ModalId].onObserverListener[ModalId] = () => {
       if (s(`.iframe-${ModalId}`))
@@ -118,25 +118,17 @@ const Docs = {
     const { idModal } = options;
     this.Tokens[idModal] = options;
     setTimeout(() => {
-      const cleanActive = () => {
-        s(`.btn-docs-src`).classList.remove('main-btn-menu-active');
-        s(`.btn-docs-api`).classList.remove('main-btn-menu-active');
-        s(`.btn-docs-coverage`).classList.remove('main-btn-menu-active');
-      };
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
-        cleanActive();
-        await this.RenderModal('src', options.modalOptions);
+        await this.RenderModal('src');
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
-        cleanActive();
-        await this.RenderModal('api', options.modalOptions);
+        await this.RenderModal('api');
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
-        cleanActive();
-        await this.RenderModal('coverage', options.modalOptions);
+        await this.RenderModal('coverage');
       };
 
       s(`.btn-docs-coverage-link`).onclick = () => {

package/src/client/components/core/Modal.js

@@ -21,6 +21,8 @@ import {
   getProxyPath,
   setPath,
   coreUI,
+  sanitizeRoute,
+  getQueryParams,
 } from './Router.js';
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
@@ -90,11 +92,6 @@ const Modal = {
       query: options.query ? `${window.location.search}` : undefined,
       getTop: () => {
         const result = windowGetH() - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar);
-        // TODO: mobile padding gap on init size top height, Iphone SE responsive case
-        // logger.warn('getTop', {
-        //   top: result,
-        //   height: Modal.Data[idModal].getHeight(),
-        // });
         return result;
       },
       getHeight: () => {
@@ -120,6 +117,10 @@ const Modal = {
               }px`
             : `-${ops?.open ? '0px' : originSlideMenuWidth}px`
         }`,
+      center: () => {
+        top = `${windowGetH() / 2 - height / 2}px`;
+        left = `${windowGetW() / 2 - width / 2}px`;
+      },
     };
 
     if (options && 'mode' in options) {
@@ -1169,6 +1170,7 @@ const Modal = {
                 });
                 EventsUI.onClick(`.action-btn-home`, async () => {
                   await Modal.onHomeRouterEvent();
+                  subMenuHandler(Object.keys(options.RouterInstance.Routes()));
                   Object.keys(this.Data[idModal].onHome).map((keyListener) => this.Data[idModal].onHome[keyListener]());
                 });
                 EventsUI.onClick(`.action-btn-app-icon`, () => s(`.action-btn-home`).click());
@@ -1349,7 +1351,6 @@ const Modal = {
                   removeEvent();
                 }
               });
-              // TODO: mobile padding gap on init size top height, Iphone SE responsive case
               setTimeout(window.onresize);
             });
           })();
@@ -1387,10 +1388,7 @@ const Modal = {
       return;
     }
 
-    if (idModal !== 'main-body' && options.mode !== 'view' && !options.disableCenter) {
-      top = `${windowGetH() / 2 - height / 2}px`;
-      left = `${windowGetW() / 2 - width / 2}px`;
-    }
+    if (idModal !== 'main-body' && options.mode !== 'view' && !options.disableCenter) Modal.Data[idModal].center();
 
     const render = html` <style class="style-${idModal}">
         .${idModal} {
@@ -1860,26 +1858,14 @@ const Modal = {
       s(`.btn-maximize-${idModal}`).style.display = null;
 
       // Restore original dimensions and position
+      this.Data[idModal].center();
       modal.style.transform = '';
-      modal.style.height = '';
-      left = 0;
-      width = 300;
-      modal.style.left = `${left}px`;
+      modal.style.height = `${height}px`;
+      modal.style.left = left;
+      modal.style.top = top;
       modal.style.width = `${width}px`;
       modal.style.overflow = '';
 
-      // Reset drag position
-      dragPosition = { x: 0, y: 0 };
-
-      // Set new position
-      modal.style.transform = `translate(0, 0)`;
-
-      // Adjust top position based on top bar visibility
-      const heightDefaultTopBar = 40; // Default top bar height if not specified
-      s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
-        ? `0px`
-        : `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
-
       // Re-enable drag after restore
       if (dragInstance) {
         dragInstance.updateOptions({
@@ -2413,7 +2399,7 @@ const buildBadgeToolTipMenuOption = (id, sideKey = 'left') => {
 };
 
 const isSubMenuOpen = (subMenuId) => {
-  return s(`.down-arrow-submenu-${subMenuId}`).style.rotate === '180deg';
+  return s(`.down-arrow-submenu-${subMenuId}`) && s(`.down-arrow-submenu-${subMenuId}`).style.rotate === '180deg';
 };
 
 const subMenuRender = async (subMenuId) => {
@@ -2425,7 +2411,15 @@ const subMenuRender = async (subMenuId) => {
   if (!menuBtn || !menuContainer || !arrow) return;
 
   const top = () => {
-    menuContainer.style.top = menuBtn.offsetTop + Modal.Data['modal-menu'].options.heightTopBar + 'px';
+    let value = menuBtn.offsetTop + Modal.Data['modal-menu'].options.heightTopBar;
+
+    const isHidden = s('.main-body-btn-ui-open').classList.contains('hide');
+    const isTopBottom = Modal.Data['modal-menu'].options.barMode === 'top-bottom-bar';
+
+    if (!isTopBottom && isHidden) value -= 51;
+    else if (!isHidden) value += 51;
+
+    menuContainer.style.top = `${value}px`;
   };
 
   Modal.subMenuBtnClass[subMenuId] = {
@@ -2472,4 +2466,29 @@ const subMenuRender = async (subMenuId) => {
   }, 500);
 };
 
-export { Modal, renderMenuLabel, renderViewTitle, buildBadgeToolTipMenuOption, subMenuRender, isSubMenuOpen };
+const subMenuHandler = (routes, route) => {
+  route = sanitizeRoute(route);
+  for (let _route of routes) {
+    _route = sanitizeRoute(_route);
+    if (_route !== route) {
+      if (isSubMenuOpen(_route)) subMenuRender(_route);
+    }
+  }
+  setTimeout(() => {
+    let cid = getQueryParams().cid;
+    if (s(`.main-sub-btn-active`)) s(`.main-sub-btn-active`).classList.remove('main-sub-btn-active');
+    if (cid && s(`.btn-${route}-${cid}`)) {
+      s(`.btn-${route}-${cid}`).classList.add('main-sub-btn-active');
+    }
+  });
+};
+
+export {
+  Modal,
+  renderMenuLabel,
+  renderViewTitle,
+  buildBadgeToolTipMenuOption,
+  subMenuRender,
+  isSubMenuOpen,
+  subMenuHandler,
+};

package/src/client/components/core/Router.js

@@ -7,7 +7,7 @@
 import { titleFormatted } from './CommonJs.js';
 import { loggerFactory } from './Logger.js';
 import { htmls, s } from './VanillaJs.js';
-import { Modal } from './Modal.js';
+import { Modal, subMenuHandler } from './Modal.js';
 import { Worker } from './Worker.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
@@ -162,6 +162,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
 
     if (path === pushPath) {
       for (const event of Object.keys(RouterEvents)) RouterEvents[event](routerEvent);
+      subMenuHandler(Object.keys(Routes()), route);
       setDocTitle(route);
       return Routes()[`/${route}`].render();
     }
@@ -256,14 +257,15 @@ const closeModalRouteChangeEvent = (options = {}) => {
  * @param {string} options.route - The route associated with the modal view.
  * @memberof PwaRouter
  */
-const handleModalViewRoute = (options = { route: '' }) => {
-  const { route } = options;
+const handleModalViewRoute = (options = { RouterInstance: { Routes: () => {} }, route: '' }) => {
+  const { route, RouterInstance } = options;
   if (!route) return;
 
   let path = window.location.pathname;
   if (path !== '/' && path[path.length - 1] === '/') path = path.slice(0, -1);
   const proxyPath = getProxyPath();
   const newPath = `${proxyPath}${route}`;
+  if (RouterInstance && RouterInstance.Routes) subMenuHandler(Object.keys(RouterInstance.Routes()), route);
 
   if (path !== newPath) {
     setPath(newPath);
@@ -311,4 +313,5 @@ export {
   getProxyPath,
   setPath,
   setQueryParams,
+  sanitizeRoute,
 };