Update width and height on updateModalSettings (#3524)

SAP · Nov 14, 2023 · e84bfdc · e84bfdc
1 parent eaa99cd
commit e84bfdc
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/client/luigi-client.d.ts b/client/luigi-client.d.ts
@@ -429,8 +429,10 @@ export declare interface LinkManager {
    * In addition, you can specify if a new history entry will be created with the updated URL.
    * @memberof linkManager
    * @param {Object} updatedModalSettings possibility to update the active modal.
-   * @param {Object} updatedModalSettings.title update the `title` of the active modal.
-   * @param {Object} updatedModalSettings.size update the `size` of the active modal.
+   * @param {string} updatedModalSettings.title update the `title` of the active modal.
+   * @param {string} updatedModalSettings.size update the `size` of the active modal.
+   * @param {string} updatedModalSettings.width lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
+   * @param {string} updatedModalSettings.height lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    * @param {boolean} addHistoryEntry adds an entry in the history, by default it's `false`.
    * @example
    * LuigiClient.linkManager().updateModalSettings({title:'LuigiModal', size:'l'});

diff --git a/core/src/Modal.svelte b/core/src/Modal.svelte
@@ -256,9 +256,12 @@
       if (e.data.updatedModalSettings.size) {
         settings.size = e.data.updatedModalSettings.size;
         await setModalSize();
+      } else if (e.data.updatedModalSettings.width && e.data.updatedModalSettings.height) {
+        settings.height = e.data.updatedModalSettings.height;
+        settings.width = e.data.updatedModalSettings.width;
       }
-      if(LuigiConfig.getConfigBooleanValue('routing.showModalPathInUrl')){
-        Routing.updateModalDataInUrl(RoutingHelpers.getModalPathFromPath(), {'title':settings.title, 'size':settings.size}, e.data.addHistoryEntry);   
+      if (LuigiConfig.getConfigBooleanValue('routing.showModalPathInUrl')) {
+        Routing.updateModalDataInUrl(RoutingHelpers.getModalPathFromPath(), {'title': settings.title, 'size': settings.size, 'height': settings.height, 'width': settings.width}, e.data.addHistoryEntry);   
       }
     }
   };

diff --git a/test/e2e-js-test-application/public/examples/microfrontends/multipurpose.html b/test/e2e-js-test-application/public/examples/microfrontends/multipurpose.html
@@ -51,6 +51,12 @@ <h1 id="title">Multi purpose demo page</h1>
       </button>
       <button id="vgDataUpdate" onclick="vgDataUpdate()">Set view group data</button>
       <button class="transferVars" onclick="applyCSS()">ApplyCSS</button>
+      <button
+        class="updateModalSettingsBtn"
+        onclick="LuigiClient.linkManager().updateModalSettings({ 'title': 'test' });"
+      >
+        updateModalSettings
+      </button>
     </div>
 
     <script>

diff --git a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-navigation.cy.js b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-navigation.cy.js
@@ -90,6 +90,27 @@ describe('JS-TEST-APP', () => {
         cy.get('.lui-modal-mf').should('have.attr', 'style', 'width:80%;height:80%;');
         cy.get('[aria-label="close"]').click();
       });
+      it('Update modal settings', () => {
+        newConfig.routing.showModalPathInUrl = true;
+        cy.visitTestApp('/', newConfig);
+        cy.get('[configversion="js-test-app-core-api-nav-test"]');
+        cy.window().then(win => {
+          win.Luigi.navigation().openAsModal('/home/two', { width: '50rem', height: '70rem' });
+        });
+        cy.get('.lui-modal-mf').should('exist');
+        cy.get('.lui-modal-mf').should('have.attr', 'style', 'width:50rem;height:70rem;');
+        cy.url().should('include', 'width%22%3A%2250rem');
+        cy.url().should('include', 'height%22%3A%2270rem');
+        cy.url().should('not.contain', '/title%22%3A%22test/');
+        cy.getIframeBody({}, 0, '.iframeModalCtn').then(result => {
+          cy.wrap(result)
+            .contains('updateModalSettings')
+            .click();
+          cy.url().should('include', 'width%22%3A%2250rem');
+          cy.url().should('include', 'height%22%3A%2270rem');
+          cy.url().should('include', 'title%22%3A%22test');
+        });
+      });
     });
     describe('Normal navigation', () => {
       let newConfig;