From 1944cb657629aef7405fdbf9f3dd8306907dc0fb Mon Sep 17 00:00:00 2001 From: Karuna Vengurlekar Date: Thu, 10 Sep 2026 17:02:15 +0530 Subject: [PATCH] Add shortcode and test oidc.md file --- assets/js/expandable-table.js | 46 +++++++ assets/scss/_styles_project.scss | 116 ++++++++++++++++++ .../modules/oidc.md | 20 +++ layouts/partials/scripts.html | 5 +- layouts/shortcodes/expandable-table.html | 27 ++++ 5 files changed, 212 insertions(+), 2 deletions(-) create mode 100644 assets/js/expandable-table.js create mode 100644 layouts/shortcodes/expandable-table.html diff --git a/assets/js/expandable-table.js b/assets/js/expandable-table.js new file mode 100644 index 00000000000..cca5bcf9df3 --- /dev/null +++ b/assets/js/expandable-table.js @@ -0,0 +1,46 @@ +(function () { + 'use strict'; + + function init() { + document.querySelectorAll('.expandable-table-btn').forEach(function (btn) { + btn.addEventListener('click', function () { + var wrap = btn.closest('.expandable-table-wrap'); + var modal = wrap.nextElementSibling; + openModal(wrap, modal); + }); + }); + } + + function openModal(wrap, modal) { + var body = modal.querySelector('.expandable-table-body'); + body.innerHTML = ''; + body.appendChild(wrap.querySelector('.expandable-table-inner').cloneNode(true)); + + modal.removeAttribute('hidden'); + document.body.classList.add('expandable-table-open'); + + var closeBtn = modal.querySelector('.expandable-table-close'); + closeBtn.focus(); + + function close() { + modal.setAttribute('hidden', ''); + document.body.classList.remove('expandable-table-open'); + btn.focus(); + modal.querySelector('.expandable-table-overlay').removeEventListener('click', close); + document.removeEventListener('keydown', onKey); + } + + var btn = wrap.querySelector('.expandable-table-btn'); + closeBtn.onclick = close; + modal.querySelector('.expandable-table-overlay').addEventListener('click', close); + + function onKey(e) { if (e.key === 'Escape') close(); } + document.addEventListener('keydown', onKey); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 57d4cea4224..297b74304d7 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -688,4 +688,120 @@ img.ToC-icon{ overflow-y: auto; padding-top: 1.25rem; } +} + +// Expandable table modal + +.expandable-table-wrap { + margin-bottom: $spacer; + + .expandable-table-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 0.25rem; + } + + .expandable-table-btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + font-size: 0.75rem; + padding: 0.2rem 0.5rem; + border: 1px solid $gray-border; + color: $link-color; + background: transparent; + border-radius: 4px; + white-space: nowrap; + + &:hover { + background: $gray-100; + border-color: $link-color; + } + + &:focus { + outline: 2px solid $link-color; + outline-offset: 2px; + } + } + + .expandable-table-inner { + overflow-x: auto; + border: 1px solid $gray-border; + border-radius: 4px; + } +} + +body.expandable-table-open { + overflow: hidden; +} + +.expandable-table-modal { + position: fixed; + inset: 0; + z-index: 1060; + display: flex; + align-items: center; + justify-content: center; + + &[hidden] { display: none; } + + .expandable-table-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.5); + } + + .expandable-table-dialog { + position: relative; + z-index: 1; + width: 90%; + max-width: 1100px; + max-height: 85vh; + background: white; + border-radius: 6px; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + overflow: hidden; + } + + .expandable-table-header { + padding: 0.75rem 1rem; + border-bottom: 1px solid $gray-border; + background: $gray-100; + display: flex; + justify-content: flex-end; + + .expandable-table-close { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.875rem; + + &:focus { + outline: 2px solid $link-color; + outline-offset: 2px; + } + } + } + + .expandable-table-body { + overflow: auto; + padding: 1.25rem; + + .expandable-table-inner { + border: none; + border-radius: 0; + overflow: visible; + } + + table { width: 100%; margin-bottom: 0; } + } +} + +@include media-breakpoint-down(md) { + .expandable-table-modal .expandable-table-dialog { + width: 95%; + max-height: 90vh; + } } \ No newline at end of file diff --git a/content/en/docs/marketplace/platform-supported-content/modules/oidc.md b/content/en/docs/marketplace/platform-supported-content/modules/oidc.md index a32f2ccca85..9ec1072318f 100644 --- a/content/en/docs/marketplace/platform-supported-content/modules/oidc.md +++ b/content/en/docs/marketplace/platform-supported-content/modules/oidc.md @@ -201,6 +201,8 @@ If your app is already developed using Mendix 9 or above, but uses the community This section provides an overview of updates for the OIDC SSO module across different versions. It includes new dependencies, snippet replacements, and microflow renaming to ensure a smooth transition while migrating to higher module versions. +{{% expandable-table %}} + | Mendix Version | OIDC SSO Module Version | Important Migration Changes | Additional Information | | --- | --- | --- | --- | | 10.24.0 and above | 4.7.0 | - | A new constant (`EnableAudienceValidation`) has been introduced for API security. Because it is enabled by default, you need to configure the **Resource path** and **Expected audience** value. You can disable audience validation, but Mendix does not recommend this. | @@ -222,6 +224,8 @@ This section provides an overview of updates for the OIDC SSO module across diff | 9.24.2 and above | 3.0.0 (migrating to 3.0.0 and above) | Include [UserCommons](https://marketplace.mendix.com/link/component/223053) module as a dependency. | New UserCommons module | | | | Set `OIDC.Startup` microflow as part of the after-startup microflow. | Assign UserProvisioning for existing IdP configurations. | +{{% /expandable-table %}} + ## Design-time App Configuration{#app-configuration} This section shows you how to configure your app to use OIDC for SSO. @@ -234,11 +238,15 @@ If you are using OIDC module version 3.1.0 and above, you need to configure your Ensure that you have allocated the following user roles to the OIDC module and UserCommons (in version 3.0.0 and above) roles: +{{% expandable-table %}} + | User Role | OIDC Module Role | | --- | --- | | Administrator | OIDC.Administrator, UserCommons.Administrator | | User | OIDC.User | +{{% /expandable-table %}} + {{< figure src="/attachments/appstore/platform-supported-content/modules/oidc/user-roles.png" alt="User roles tab showing Administrator and User roles with their assigned module roles" >}} ### End User Login When Using Single or Multiple IdPs @@ -620,6 +628,8 @@ You can set up custom user provisioning by setting constants when you deploy you You can set up custom user provisioning by setting the following constants. You can set default values when you build your app, but you can override these in the app's environment. +{{% expandable-table %}} + | Constant | Use | Notes | Example | | --- | --- | --- | --- | | `CustomUserEntity` | a custom user entity | in the form `modulename.entityname` – a specialization of `System.User` | `Administration.Account` | @@ -632,6 +642,8 @@ You can set up custom user provisioning by setting the following constants. You | `CustomUserProvisioning` | a custom microflow to use for user provisioning | *optional* – in the form `modulename.microflowname` – the microflow name must begin with the string `UC_CustomProvisioning` | `Mymodule.UC_CustomProvisioning` | | `DisableMxAdmin` | deactivates Mx admin | *optional* | `True` | +{{% /expandable-table %}} + {{% alert color="info" %}} You may have a requirement that users log in to your application only via SSO. However, when you deploy your app on the Mendix Cloud, the platform may still create an MxAdmin user with a local password. From version 2.1.0 of the UserCommons module, if the flag for the `DisableMxAdmin` constant is set to `True`, the MxAdmin user will be deactivated via the startup microflow `ASU_UserCommons_StartUp`. {{% /alert %}} @@ -687,12 +699,16 @@ If the standard configuration meets your needs and your application does not hav In the default configuration, the custom user entity is set as `Administration.Account`, the principal attribute is set as `Name`, and the default attribute mapping is provided. +{{% expandable-table %}} + | IdP Attribute | Configured Entity Attribute | | -------------------- | --------------------------- | | email | Email | | name | FullName | | sub | Name | +{{% /expandable-table %}} + ##### Modifying Default Attribute Mapping{#modify-default} You may need a different or custom attribute mapping, for example, if you are configuring OIDC SSO and SCIM together and need a common identifier. For more information, see the [User Identifiers in the OIDC and SCIM Protocols](#user-identifiers-in-the-oidc-and-scim-protocols) section below. @@ -756,12 +772,16 @@ The section below shows the methods to configure user provisioning when using OI By default, the `CUSTOM_UserProvisioning` microflow in the **USE_ME** > **1. Configuration** folder of the OIDC module uses the `OIDC_CustomUserParsing_Standard` microflow. This applies to the following mapping: +{{% expandable-table %}} + | ID-token Provided by your IdP | Attribute of `Administration.Account` Object | | ----------------------------- | ----------------------------- | | sub | Name | | name | Fullname | | email | Email | +{{% /expandable-table %}} + {{% alert color="warning" %}} Do not change the `UserProvisioning_StandardOIDC` microflow. This may cause problems if you upgrade to a newer version of the OIDC SSO module. Apply customizations to the `CUSTOM_UserProvisioning` microflow only. {{% /alert %}} diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index ea4a2b7fbea..5aa0696fdc2 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -74,8 +74,9 @@ {{ $jsSearch = resources.Get "js/offline-search.js" -}} {{ end -}} - -{{ $jsArray := slice $jsBs $jsBase $jsAnchor $jsLodashDebouncd $jsLodashThrottle $jsProgressTracking $jsSearch $jsPlantuml $jsMarkmap $jsDrawio -}} +{{ $jsExpandableTable := resources.Get "js/expandable-table.js" }} + +{{ $jsArray := slice $jsBs $jsBase $jsAnchor $jsLodashDebouncd $jsLodashThrottle $jsProgressTracking $jsExpandableTable $jsSearch $jsPlantuml $jsMarkmap $jsDrawio -}} {{ if .Page.Store.Get "hasmermaid" -}} {{- partial "scripts/mermaid.html" . -}} diff --git a/layouts/shortcodes/expandable-table.html b/layouts/shortcodes/expandable-table.html new file mode 100644 index 00000000000..95f13a7c750 --- /dev/null +++ b/layouts/shortcodes/expandable-table.html @@ -0,0 +1,27 @@ +{{ $_hugo_config := `{ "version": 1 }` }} +
+
+ +
+
+ {{ .Inner | markdownify | safeHTML }} +
+
+ +