underpost 2.8.883 → 2.8.885

package/src/cli/repository.js

@@ -1,3 +1,9 @@
+/**
+ * Repository module for managing Git operations and configurations.
+ * @module src/cli/repository.js
+ * @namespace UnderpostRepository
+ */
+
 import { commitData } from '../client/components/core/CommonJs.js';
 import dotenv from 'dotenv';
 import { pbcopy, shellCd, shellExec } from '../server/process.js';
@@ -11,8 +17,23 @@ dotenv.config();
 
 const logger = loggerFactory(import.meta);
 
+/**
+ * @class UnderpostRepository
+ * @description Manages Git operations and configurations.
+ * This class provides a set of static methods to automate various
+ * Git operations, including cloning, pulling, and committing changes.
+ * @memberof UnderpostRepository
+ */
 class UnderpostRepository {
   static API = {
+    /**
+     * Clones a Git repository from GitHub.
+     * @param {string} [gitUri=`${process.env.GITHUB_USERNAME}/pwa-microservices-template`] - The URI of the GitHub repository (e.g., "username/repository").
+     * @param {object} [options={ bare: false, g8: false }] - Cloning options.
+     * @param {boolean} [options.bare=false] - If true, performs a bare clone.
+     * @param {boolean} [options.g8=false] - If true, uses the .g8 extension.
+     * @memberof UnderpostRepository
+     */
     clone(gitUri = `${process.env.GITHUB_USERNAME}/pwa-microservices-template`, options = { bare: false, g8: false }) {
       const gExtension = options.g8 === true ? '.g8' : '.git';
       const repoName = gitUri.split('/').pop();
@@ -26,6 +47,14 @@ class UnderpostRepository {
         },
       );
     },
+    /**
+     * Pulls updates from a GitHub repository.
+     * @param {string} [repoPath='./'] - The local path to the repository.
+     * @param {string} [gitUri=`${process.env.GITHUB_USERNAME}/pwa-microservices-template`] - The URI of the GitHub repository.
+     * @param {object} [options={ g8: false }] - Pulling options.
+     * @param {boolean} [options.g8=false] - If true, uses the .g8 extension.
+     * @memberof UnderpostRepository
+     */
     pull(
       repoPath = './',
       gitUri = `${process.env.GITHUB_USERNAME}/pwa-microservices-template`,
@@ -41,6 +70,18 @@ class UnderpostRepository {
         },
       );
     },
+    /**
+     * Creates a Git commit with a conventional commit message.
+     * @param {string} [repoPath='./'] - The local path to the repository.
+     * @param {string} [commitType='feat'] - The type of commit (e.g., 'feat', 'fix', 'docs', 'reset').
+     * @param {string} [subModule=''] - The submodule or scope of the commit.
+     * @param {string} [message=''] - The commit message.
+     * @param {object} [options={ copy: false, info: false, empty: false }] - Commit options.
+     * @param {boolean} [options.copy=false] - If true, copies the commit message to the clipboard.
+     * @param {boolean} [options.info=false] - If true, displays information about commit types.
+     * @param {boolean} [options.empty=false] - If true, allows an empty commit.
+     * @memberof UnderpostRepository
+     */
     commit(
       repoPath = './',
       commitType = 'feat',
@@ -65,9 +106,18 @@ class UnderpostRepository {
       shellExec(`cd ${repoPath} && git commit ${options?.empty ? `--allow-empty ` : ''}-m "${_message}"`);
     },
 
+    /**
+     * Pushes commits to a remote GitHub repository.
+     * @param {string} [repoPath='./'] - The local path to the repository.
+     * @param {string} [gitUri=`${process.env.GITHUB_USERNAME}/pwa-microservices-template`] - The URI of the GitHub repository.
+     * @param {object} [options={ f: false, g8: false }] - Push options.
+     * @param {boolean} [options.f=false] - If true, forces the push.
+     * @param {boolean} [options.g8=false] - If true, uses the .g8 extension.
+     * @memberof UnderpostRepository
+     */
     push(
       repoPath = './',
-      gitUri = `${process.env.GITHUB_USERNAME}/pwa-microservices-template}`,
+      gitUri = `${process.env.GITHUB_USERNAME}/pwa-microservices-template`,
       options = { f: false, g8: false },
     ) {
       const gExtension = options.g8 === true || options.G8 === true ? '.g8' : '.git';
@@ -90,11 +140,34 @@ class UnderpostRepository {
       );
     },
 
-    new(repositoryName, options = { dev: false, deployId: false, cluster: false }) {
+    /**
+     * Creates a new Underpost project, service, or configuration.
+     * @param {string} repositoryName - The name of the new project or service, or a deployId.
+     * @param {object} [options={ dev: false, deployId: false, cluster: false, subConf: '' }] - Creation options.
+     * @param {boolean} [options.dev=false] - If true, sets up a development project.
+     * @param {boolean} [options.deployId=false] - If true, creates deploy ID configuration files.
+     * @param {boolean} [options.cluster=false] - If true, creates cluster configuration files.
+     * @param {string} [options.subConf=''] - If provided, creates a sub-configuration for a deployId.
+     * @returns {Promise<void>} A promise that resolves when the operation is complete.
+     * @memberof UnderpostRepository
+     */
+    new(repositoryName, options = { dev: false, deployId: false, cluster: false, subConf: '' }) {
       return new Promise(async (resolve, reject) => {
         try {
           await logger.setUpInfo();
           actionInitLog();
+          if (options.subConf && typeof options.subConf === 'string') {
+            const deployId = repositoryName;
+            logger.info('Creating sub conf', {
+              deployId,
+              subConf: options.subConf,
+            });
+            fs.copySync(
+              `./engine-private/conf/${deployId}/conf.server.json`,
+              `./engine-private/conf/${deployId}/conf.server.dev.${options.subConf}.json`,
+            );
+            return resolve();
+          }
           if (repositoryName === 'service')
             return resolve(
               await UnderpostStartUp.API.listenPortController(UnderpostStartUp.API.listenServerFactory(), ':'),
@@ -126,12 +199,26 @@ class UnderpostRepository {
       });
     },
 
+    /**
+     * Gets a list of deleted files from a Git repository.
+     * @param {string} [path='.'] - The path to the repository.
+     * @returns {string[]} An array of deleted file paths.
+     * @memberof UnderpostRepository
+     */
     getDeleteFiles(path = '.') {
       const commandUntrack = `cd ${path} && git ls-files --deleted`;
       const diffUntrackOutput = shellExec(commandUntrack, { stdout: true, silent: true });
       return diffUntrackOutput.toString().split('\n').filter(Boolean);
     },
 
+    /**
+     * Gets a list of changed (modified and untracked) files in a Git repository.
+     * @param {string} [path='.'] - The path to the repository.
+     * @param {string} [extension=''] - An optional file extension to filter by.
+     * @param {boolean} [head=false] - If true, diffs against HEAD^.
+     * @returns {string[]} An array of changed file paths.
+     * @memberof UnderpostRepository
+     */
     getChangedFiles(path = '.', extension = '', head = false) {
       const extensionFilter = extension ? `-- '***.${extension}'` : '';
       const command = `cd ${path} && git diff ${head ? 'HEAD^ HEAD ' : ''}--name-only ${extensionFilter}`;
@@ -146,6 +233,12 @@ class UnderpostRepository {
         .concat(diffUntrackOutput.toString().split('\n').filter(Boolean))
         .filter((f) => !deleteFiles.includes(f));
     },
+    /**
+     * Updates the private configuration repository for a given deployId.
+     * @param {string} deployId - The deployment ID.
+     * @returns {{validVersion: boolean, engineVersion: string, deployVersion: string}} An object indicating if the versions are valid.
+     * @memberof UnderpostRepository
+     */
     privateConfUpdate(deployId) {
       shellCd(`/home/dd/engine`);
       const privateRepoName = `engine-${deployId.split('dd-')[1]}-private`;

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

@@ -831,6 +831,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 +853,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({
@@ -2191,14 +2177,13 @@ const Modal = {
       : { ...Modal.subMenuBtnClass, _: { btnSelector, labelSelector } };
 
     for (const keyDataBtn of Object.keys(_data)) {
-      const { btnSelector, labelSelector, open, top } = _data[keyDataBtn];
+      const { labelSelector, top } = _data[keyDataBtn];
       if (top)
         setTimeout(() => {
           top();
         });
-      if (open) continue;
       sa(labelSelector).forEach((el) => {
-        el.classList.add('hide');
+        if (!el.classList.contains('hide')) el.classList.add('hide');
         el.style.transition = null;
       });
 
@@ -2414,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,11 +2410,16 @@ const subMenuRender = async (subMenuId) => {
 
   if (!menuBtn || !menuContainer || !arrow) return;
 
-  // if (Modal.subMenuBtnClass[subMenuId] && !(isSubMenuOpen(subMenuId) && Modal.subMenuBtnClass[subMenuId].open === true))
-  //   Modal.subMenuBtnClass[subMenuId].open = false;
-
   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] = {
@@ -2442,8 +2432,7 @@ const subMenuRender = async (subMenuId) => {
   menuBtn.style.transition = '.3s';
   arrow.style.transition = '.3s';
 
-  if (Modal.subMenuBtnClass[subMenuId].open) {
-    Modal.subMenuBtnClass[subMenuId].open = false;
+  if (isSubMenuOpen(subMenuId)) {
     // Close animation
     menuContainer.style.overflow = 'hidden';
     menuContainer.style.height = '0px';
@@ -2453,8 +2442,12 @@ const subMenuRender = async (subMenuId) => {
       arrow.style.rotate = '0deg';
     });
   } else {
-    Modal.menuTextLabelAnimation('modal-menu', subMenuId);
-    Modal.subMenuBtnClass[subMenuId].open = true;
+    sa(`.menu-label-text-${subMenuId}`).forEach((el) => {
+      if (!el.classList.contains('hide')) el.classList.add('hide');
+    });
+    setTimeout(() => {
+      Modal.menuTextLabelAnimation('modal-menu', subMenuId);
+    });
     // Open animation
     setTimeout(top, 360);
     menuContainer.style.width = '320px';
@@ -2473,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,
 };