@pega/custom-dx-components 8.8.8 → 8.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "8.8.8",
+  "version": "8.8.10",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -24,9 +24,8 @@
     "babel-loader": "^8.2.5",
     "chalk": "^5.0.1",
     "compression-webpack-plugin": "^10.0.0",
-    "crypto": "^1.0.1",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "^4.1.0",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "eslint": "^8.4.1",
     "execa": "^6.1.0",
     "file-loader": "6.2.0",

package/src/auth.js

@@ -1,14 +1,3 @@
-// Below imports needed for when this file is used for a Node apps/Jest tests
-// (can't do conditional imports...so should remove them for regular browser scenarios)
-
-import fetch from 'node-fetch';
-import open from 'open';
-import crypto from 'node:crypto';
-import https from 'node:https';
-import http from 'node:http';
-import fs from 'node:fs';
-
-
 class PegaAuth {
     constructor(ssKeyConfig) {
         if (typeof ssKeyConfig === "string") {
@@ -18,16 +7,17 @@ class PegaAuth {
             // object with config structure is passed in
             this.config = ssKeyConfig;
         }
+        this.urlencoded = 'application/x-www-form-urlencoded';
         this.isNode = typeof window === 'undefined';
-        this.crypto = this.isNode ? crypto : window.crypto;
-
-        // Tried both preferring the subtle and the webcrypto but both still yileded different behavior on digest
 
-        // Prefer webcrypto.subtle over regular subtle
-        // this.subtle = this.isNode ? (crypto.webcrypto ? crypto.webcrypto.subtle : crypto.subtle) : window.crypto.subtle;
-
-        // Prefer regular subtle over webcrypto.suble for now
-        this.subtle = this.isNode ? (crypto.subtle ? crypto.subtle : crypto.webcrypto.subtle) : window.crypto.subtle;
+        // For isNode path the below attributes are initialized on first method invocation
+        if (!this.isNode) {
+            this.crypto = window.crypto;
+            this.subtle = window.crypto.subtle;
+        }
+        if (!this.config.serverType) {
+            this.config.serverType = 'infinity';
+        }
     }
 
     #reloadConfig() {
@@ -42,7 +32,7 @@ class PegaAuth {
             } catch (e) {
                 try {
                     obj = JSON.parse(this.#atob(peConfig));
-                } catch (e) {
+                } catch (err) {
                     obj = {};
                 }
             }
@@ -56,10 +46,35 @@ class PegaAuth {
         }
     }
 
+    async #importSingleLib(libName, libProp) {
+        return import(libName).then((mod) => {
+            this[libProp] = mod.default;
+        }).catch((e) => {
+            console.error(`Library ${libName} failed to load`);
+        });
+    }
+
+    async #importNodeLibs() {
+        // Also current assumption is using Node 18 or better
+        return Promise.all([
+            this.#importSingleLib('node-fetch', 'fetch'),
+            this.#importSingleLib('open', 'open'),
+            this.#importSingleLib('node:crypto', 'crypto'),
+            this.#importSingleLib('node:https', 'https'),
+            this.#importSingleLib('node:http', 'http'),
+            this.#importSingleLib('node:fs', 'fs')
+        ]).then(() => {
+            this.subtle = this.crypto.subtle || this.crypto.webcrypto.subtle;
+            /* eslint-disable-next-line no-global-assign */
+            fetch = this.fetch;
+        });
+    }
+
     // For PKCE the authorize includes a code_challenge & code_challenge_method as well
     async #buildAuthorizeUrl(state) {
         const { serverType, clientId, redirectUri, authorizeUri, authService, sessionIndex, appAlias,
             userIdentifier, password, noPKCE, isolationId } = this.config;
+        const bInfinity = serverType === 'infinity';
 
         if (!noPKCE) {
             // Generate random string of 64 chars for verifier.  RFC 7636 says from 43-128 chars
@@ -83,63 +98,64 @@ class PegaAuth {
         }
 
         // Trim alias to include just the real alias piece
-        const addtlScope = appAlias ? '+app.alias.' + appAlias.replace(/^app\//, '') : '';
-        const scope = (serverType === 'infinity' ? `openid${addtlScope}` : 'user_info');
+        const addtlScope = appAlias ? `+app.alias.${appAlias.replace(/^app\//, '')}` : '';
+        const scope = (bInfinity ? `openid${addtlScope}` : 'user_info');
 
         // Add explicit creds if specified to try to avoid login popup
-        const moreAuthArgs = (serverType === 'infinity' ?
-            '&enable_psyncid=true' +
-            (authService ? `&authentication_service=${encodeURIComponent(authService)}` : '') +
-            (sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : '') +
-            (userIdentifier
-                ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}${password ? `&Password=${encodeURIComponent(this.#atob(password))}` : ''}` : '')
-            : `&isolationID=${isolationId}`);
+        const authServiceArg = authService ? `&authentication_service=${encodeURIComponent(authService)}` : '';
+        const sessionIndexArg = sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : '';
+        const userIdentifierArg = userIdentifier ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}` : '';
+        const passwordArg = password && userIdentifier ? `&Password=${encodeURIComponent(window.atob(password))}` : '';
+        const moreAuthArgs = bInfinity
+            ? `&enable_psyncid=true${authServiceArg}${sessionIndexArg}${userIdentifierArg}${passwordArg}`
+            : `&isolationID=${isolationId}`;
 
         let pkceArgs = '';
         if (!noPKCE) {
             const cc = await this.#getCodeChallenge(this.config.codeVerifier);
             pkceArgs = `&code_challenge=${cc}&code_challenge_method=S256`;
         }
-        const authUrl = `${authorizeUri}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scope}&state=${state}${pkceArgs}${moreAuthArgs}`;
-        // console.log(`authUrl: ${authUrl}`);
-        return authUrl;
+        return `${authorizeUri}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scope}&state=${state}${pkceArgs}${moreAuthArgs}`;
     }
 
     async login() {
+        if (this.isNode && !this.crypto) {
+            // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
+            await this.#importNodeLibs();
+        }
         const { grantType } = this.config;
         if (grantType && grantType !== 'authCode') {
             return this.getToken();
-        } else {
-            return this.#authCodeStart();
         }
+        return this.#authCodeStart();
     }
 
     // authCode login issues the authorize endpoint transaction and deals with redirects
+    /* eslint-disable-next-line sonarjs/cognitive-complexity */
     async #authCodeStart() {
         const fnGetRedirectUriOrigin = () => {
-            let redirectUri = this.config.redirectUri;
-            let nRootOffset = redirectUri.indexOf("//");
-            let nFirstPathOffset = nRootOffset !== -1 ? redirectUri.indexOf("/", nRootOffset + 2) : -1;
+            const redirectUri = this.config.redirectUri;
+            const nRootOffset = redirectUri.indexOf("//");
+            const nFirstPathOffset = nRootOffset !== -1 ? redirectUri.indexOf("/", nRootOffset + 2) : -1;
             return nFirstPathOffset !== -1 ? redirectUri.substring(0, nFirstPathOffset) : redirectUri;
         };
 
         const redirectOrigin = fnGetRedirectUriOrigin();
-        const state = this.isNode ? '' : this.#btoa(location.origin);
+        const state = this.isNode ? '' : this.#btoa(window.location.origin);
 
         return new Promise((resolve, reject) => {
-            /* eslint-disable consistent-return */
             this.#buildAuthorizeUrl(state).then((url) => {
                 let myWindow = null; // popup or iframe
-                let elIframe = null,
-                    elCloseBtn = null;
+                let elIframe = null;
+                let elCloseBtn = null;
                 const iframeTimeout = this.config.silentTimeout !== undefined ? this.config.silentTimeout : 5000;
                 let bWinIframe = !this.isNode &&
                     iframeTimeout > 0 &&
                     ((!!this.config.userIdentifier && !!this.config.password) ||
                         this.config.iframeLoginUI ||
                         this.config.authService !== 'pega');
-                let tmrAuthComplete = null,
-                    checkWindowClosed = null;
+                let tmrAuthComplete = null;
+                let checkWindowClosed = null;
                 const myWinOnLoad = () => {
                     try {
                         if (bWinIframe) {
@@ -152,8 +168,12 @@ class PegaAuth {
                         console.log("authjs(login): Exception trying to postMessage on load");
                     }
                 };
+                /* eslint-disable prefer-promise-reject-errors */
                 const fnOpenPopup = () => {
-                    myWindow = (this.isNode ? open : window.open)(url, '_blank', 'width=700,height=500,left=200,top=100');
+                    if (this.config.noPopups) {
+                        return reject("no-popups");
+                    }
+                    myWindow = (this.isNode ? this.open : window.open)(url, '_blank', 'width=700,height=500,left=200,top=100');
                     if (!myWindow) {
                         // Blocked by popup-blocker
                         return reject("blocked");
@@ -172,14 +192,17 @@ class PegaAuth {
                         }
                     }
                 };
+                /* eslint-enable prefer-promise-reject-errors */
                 const fnCloseIframe = () => {
                     elIframe.parentNode.removeChild(elIframe);
                     elCloseBtn.parentNode.removeChild(elCloseBtn);
-                    elIframe = elCloseBtn = null;
+                    elIframe = null;
+                    elCloseBtn = null;
                     bWinIframe = false;
                 };
                 const fnCloseAndReject = () => {
                     fnCloseIframe();
+                    /* eslint-disable-next-line prefer-promise-reject-errors */
                     reject("closed");
                 };
                 let authMessageReceiver = null;
@@ -192,11 +215,9 @@ class PegaAuth {
                         if (bWinIframe) {
                             clearTimeout(tmrAuthComplete);
                             fnCloseIframe();
-                        } else {
-                            if (!this.isNode) {
-                                clearInterval(checkWindowClosed);
-                                myWindow.close();
-                            }
+                        } else if (!this.isNode) {
+                            clearInterval(checkWindowClosed);
+                            myWindow.close();
                         }
                         resolve(token);
                     })
@@ -209,9 +230,9 @@ class PegaAuth {
                 if (bWinIframe) {
                     const nFrameZLevel = 99999;
                     elIframe = document.createElement('iframe');
-                    elIframe.id = 'pe' + this.config.clientId;
-                    const loginBoxWidth = 500,
-                        loginBoxHeight = 700;
+                    elIframe.id = `pe${this.config.clientId}`;
+                    const loginBoxWidth = 500;
+                    const loginBoxHeight = 700;
                     const oStyle = elIframe.style;
                     oStyle.position = 'absolute';
                     oStyle.display = 'none';
@@ -226,7 +247,8 @@ class PegaAuth {
                     elIframe.addEventListener('load', myWinOnLoad, true);
                     // Disallow iframe content attempts to navigate main window
                     elIframe.setAttribute('sandbox', 'allow-scripts allow-forms allow-same-origin');
-                    elIframe.setAttribute('src', url);
+                    // Adding prompt=none as this is standard OIDC way to communicate no UI is expected (expecting Pega security to support this one day)
+                    elIframe.setAttribute('src', `${url}&prompt=none`);
 
                     const svgCloseBtn = `<?xml version="1.0" encoding="UTF-8"?>
                       <svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -283,20 +305,19 @@ class PegaAuth {
                         const isHttp = redirectUri.startsWith('http:');
                         const nLocalhost = redirectUri.indexOf("localhost:");
                         const nSlash = redirectUri.indexOf('/', nLocalhost + 10);
-                        const nPort = parseInt(redirectUri.substring(nLocalhost + 10, nSlash));
-                        if (-1 !== nLocalhost) {
+                        const nPort = parseInt(redirectUri.substring(nLocalhost + 10, nSlash), 10);
+                        if (nLocalhost !== -1) {
                             const options = key && cert && !isHttp ? {
-                                key: fs.readFileSync(key),
-                                cert: fs.readFileSync(cert)
+                                key: this.fs.readFileSync(key),
+                                cert: this.fs.readFileSync(cert)
                             } : {};
-                            const server = (isHttp ? http : https).createServer(options, (req, res) => {
-                                const { method, url } = req;
+                            const server = (isHttp ? this.http : this.https).createServer(options, (req, res) => {
                                 const { winTitle, winBodyHtml } = this.config;
-                                // console.log(`HTTP request received: ${url}`);
+                                // console.log(`HTTP request received: ${req.url}`);
                                 res.writeHead(200, { 'Content-Type': 'text/html' });
                                 // Auto closing window for now.  Can always leave it up and allow authConfig props to set title and bodyHtml
                                 res.end(`<html><head><title>${winTitle}</title><script>window.close();</script></head><body>${winBodyHtml}</body></html>`);
-                                const queryString = url.split('?')[1];
+                                const queryString = req.url.split('?')[1];
                                 const urlParams = new URLSearchParams(queryString);
                                 const code = urlParams.get('code');
                                 if (code) {
@@ -306,6 +327,7 @@ class PegaAuth {
                                     fnGetTokenAndFinish(code);
                                 }
                             });
+                            /* eslint-enable no-undef */
                             server.listen(nPort);
                         }
                     }
@@ -323,7 +345,7 @@ class PegaAuth {
                         fnGetTokenAndFinish(code);
                     };
                     window.addEventListener('message', authMessageReceiver, false);
-                    window.authCodeCallback = function (code) {
+                    window.authCodeCallback = (code) => {
                         console.log('authjs(login): authCodeCallback used with code');
                         fnGetTokenAndFinish(code);
                     };
@@ -333,12 +355,13 @@ class PegaAuth {
     }
 
     // For PKCE token endpoint includes code_verifier
+    /* eslint-disable-next-line sonarjs/cognitive-complexity */
     getToken(authCode) {
         // Reload config to pick up the previously stored codeVerifier
         this.#reloadConfig();
 
         const { serverType, isolationId, clientId, clientSecret, redirectUri, tokenUri, codeVerifier, grantType,
-            sessionIndex, customTokenParams, userIdentifier, password, noPKCE, ignoreInvalidCerts } = this.config;
+            sessionIndex, customTokenParams, userIdentifier, password, noPKCE } = this.config;
 
         const bAuthCode = !grantType || grantType === 'authCode';
         if (bAuthCode && !authCode && !this.isNode) {
@@ -352,14 +375,14 @@ class PegaAuth {
         if (clientSecret) {
             formData.append('client_secret', clientSecret);
         }
+        /* eslint-disable camelcase */
         const fullGTName = {
             "authCode": "authorization_code",
             "clientCreds": "client_credentials",
             "customBearer": "custom-bearer",
             "passwordCreds": "password"
         }[grantType];
-        const grant_type = fullGTName ? fullGTName :
-            (grantType ? grantType : 'authorization_code');
+        const grant_type = fullGTName || grantType || 'authorization_code';
         formData.append('grant_type', grant_type);
         if (serverType === 'launchpad' && grantType !== 'authCode') {
             formData.append('isolation_ids', isolationId);
@@ -373,6 +396,7 @@ class PegaAuth {
         } else if (sessionIndex) {
             formData.append('session_index', sessionIndex);
         }
+        /* eslint-enable camelcase */
         if (grantType === 'customBearer' && customTokenParams) {
             Object.keys(customTokenParams).forEach((param) => {
                 formData.append(param, customTokenParams[param]);
@@ -382,13 +406,12 @@ class PegaAuth {
             formData.append('username', userIdentifier);
             formData.append('password', this.#atob(password));
         }
-        // console.log(`getToken form data: ${formData.toString()}`);
 
         return fetch(tokenUri, {
-            agent: this.isNode && ignoreInvalidCerts ? new https.Agent({ rejectUnauthorized: false }) : undefined,
+            agent: this.#getAgent(),
             method: 'POST',
             headers: new Headers({
-                'content-type': 'application/x-www-form-urlencoded'
+                'content-type': this.urlencoded
             }),
 
             body: formData.toString()
@@ -397,11 +420,10 @@ class PegaAuth {
             .then((token) => {
                 if (token.errors || token.error) {
                     // console.log(`formData: ${formData.toString()}`);
-                    // console.log(`Token endpoint error: ${JSON.stringify(token.errors ? token.errors : token)}`);
+                    console.log(`Token endpoint error: ${JSON.stringify(token.errors || token.error)}`);
                 } else {
                     // .expires_in contains the # of seconds before access token expires
                     // add property to keep track of current time when the token expires
-                    /* eslint-disable camelcase */
                     token.eA = Date.now() + token.expires_in * 1000;
                     if (this.config.codeVerifier) {
                         delete this.config.codeVerifier;
@@ -417,7 +439,6 @@ class PegaAuth {
                     this.#updateConfig();
                 }
                 return token;
-                /* eslint-enable camelcase */
             })
             .catch((e) => {
                 console.log(e);
@@ -426,7 +447,12 @@ class PegaAuth {
 
     /* eslint-disable camelcase */
     async refreshToken(refresh_token) {
-        const { clientId, clientSecret, tokenUri, ignoreInvalidCerts } = this.config;
+        const { clientId, clientSecret, tokenUri } = this.config;
+
+        if (this.isNode && !this.crypto) {
+            // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
+            await this.#importNodeLibs();
+        }
 
         const formData = new URLSearchParams();
         formData.append('client_id', clientId);
@@ -437,16 +463,16 @@ class PegaAuth {
         formData.append('refresh_token', refresh_token);
 
         return fetch(tokenUri, {
-            agent: this.isNode && ignoreInvalidCerts ? new https.Agent({ rejectUnauthorized: false }) : undefined,
+            agent: this.#getAgent(),
             method: 'POST',
             headers: new Headers({
-                'content-type': 'application/x-www-form-urlencoded'
+                'content-type': this.urlencoded
             }),
 
             body: formData.toString()
         })
             .then((response) => {
-                if (!response.ok && 401 === response.status) {
+                if (!response.ok && response.status === 401) {
                     return null;
                 }
                 return response.json();
@@ -469,13 +495,19 @@ class PegaAuth {
             // Must have a config structure to proceed
             return;
         }
-        const { clientId, clientSecret, revokeUri, ignoreInvalidCerts } = this.config;
+        const { clientId, clientSecret, revokeUri } = this.config;
+
+        if (this.isNode && !this.crypto) {
+            // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
+            await this.#importNodeLibs();
+        }
 
-        let hdrs = { 'content-type': 'application/x-www-form-urlencoded' };
+        const hdrs = { 'content-type': this.urlencoded };
         if (clientSecret) {
-            hdrs['authorization'] = 'Basic ' + this.#btoa(clientId + ':' + clientSecret);
+            const basicCreds = window.btoa(`${clientId}:${clientSecret}`);
+            hdrs.authorization = `Basic ${basicCreds}`;
         }
-        let aTknProps = ['access_token'];
+        const aTknProps = ['access_token'];
         if (refresh_token) {
             aTknProps.push('refresh_token');
         }
@@ -487,14 +519,14 @@ class PegaAuth {
             formData.append('token', prop === 'access_token' ? access_token : refresh_token);
             formData.append('token_type_hint', prop);
             fetch(revokeUri, {
-                agent: this.isNode && ignoreInvalidCerts ? new https.Agent({ rejectUnauthorized: false }) : undefined,
+                agent: this.#getAgent(),
                 method: 'POST',
                 headers: new Headers(hdrs),
                 body: formData.toString()
             })
                 .then((response) => {
                     if (!response.ok) {
-                        console.log('Error revoking ' + prop + ':' + response.status);
+                        console.log(`Error revoking ${prop}:${response.status}`);
                     }
                 })
                 .catch((e) => {
@@ -516,31 +548,27 @@ class PegaAuth {
             return new Promise((resolve) => {
                 return resolve(this.crypto.createHash("sha256").update(str).digest());
             });
-        } else {
-            return this.subtle.digest('SHA-256', new TextEncoder().encode(str));
         }
+        return this.subtle.digest('SHA-256', new TextEncoder().encode(str));
     }
 
-    /* btoa to work with node or browser - create B64 string*/
+    /* btoa to work with node or browser - create B64 string */
     #btoa(str) {
         if (this.isNode) {
             return Buffer.from(str, 'binary').toString('base64');
-        } else {
-            return window.btoa(str);
         }
+        return window.btoa(str);
     }
 
     /* atoa to work with node or browser - convert B64 to binary */
     #atob(str) {
         if (this.isNode) {
             return Buffer.from(str, 'base64').toString('binary');
-        } else {
-            return window.atob(str);
         }
+        return window.atob(str);
     }
 
     // Base64 encode
-    /* eslint-disable-next-line class-methods-use-this */
     #encode64(buff) {
         return this.#btoa(new Uint8Array(buff).reduce((s, b) => s + String.fromCharCode(b), ''));
     }
@@ -555,7 +583,7 @@ class PegaAuth {
     /* Calc code verifier if necessary
      */
     /* eslint-disable camelcase */
-    #getCodeChallenge(code_verifier) {
+    async #getCodeChallenge(code_verifier) {
         return this.#sha256Hash(code_verifier)
             .then((hashed) => {
                 return this.#base64UrlSafeEncode(hashed);
@@ -568,6 +596,13 @@ class PegaAuth {
             });
     }
     /* eslint-enable camelcase */
+
+    /*
+     * Return agent value for POST commands
+     */
+    #getAgent() {
+        return this.isNode && this.config.ignoreInvalidCerts ? new this.https.Agent({ rejectUnauthorized: false }) : undefined;
+    }
 }
 
 export default PegaAuth;

package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.jsx.mustache

@@ -14,7 +14,6 @@ import handleEvent from "./event-utils";
 import { suggestionsHandler } from './suggestions-handler';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
-import { } from "@pega/cosmos-react-core";
 
 export const formatExists = (formatterVal) => {
     const formatterValues = [

package/src/tasks/create/templates/Constellation/Template/DETAILS/demo.stories.jsx.mustache

@@ -14,6 +14,7 @@ const renderField = resolvedProps => {
     displayMode,
     value = '',
     label = '',
+    key,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     theme = useTheme()
   } = resolvedProps;
@@ -22,7 +23,7 @@ const renderField = resolvedProps => {
 
   let val =
     value !== '' ? (
-      <Text variant='h1' as='span'>
+      <Text variant='h1' as='span' key={key}>
         {value}
       </Text>
     ) : (
@@ -30,13 +31,22 @@ const renderField = resolvedProps => {
     );
 
   if (label === 'Create date/time')
-    val = <DateTimeDisplay value={value} variant='datetime' format='long' clockFormat={null} />;
+    val = (
+      <DateTimeDisplay
+        value={value}
+        variant='datetime'
+        format='long'
+        clockFormat={null}
+        key={key}
+      />
+    );
 
-  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} />;
+  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
 
   if (label === 'Create Operator')
     val = (
       <Button
+        key={key}
         variant='link'
         style={
           label !== null
@@ -49,15 +59,19 @@ const renderField = resolvedProps => {
     );
 
   if (variant === 'inline') {
-    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    val = value || (
+      <span aria-hidden='true' key={key}>
+        &ndash;&ndash;
+      </span>
+    );
   } else {
     val = (
-      <Text variant='h1' as='span'>
+      <Text variant='h1' as='span' key={key}>
         {val}
       </Text>
     );
   }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
 };
 
 export const base{{COMPONENT_CLASS_NAME}} = () => {