@pega/react-sdk-overrides 8.23.10 → 8.23.11-debug

package/lib/field/TextInput/TextInput.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { TextField } from '@material-ui/core';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 export default function TextInput(props) {
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    /* onChange, onBlur */
     readOnly,
     testId,
     fieldMetadata,
@@ -19,12 +20,22 @@ export default function TextInput(props) {
     displayMode,
     hideLabel
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
+
   const helperTextToDisplay = validatemessage || helperText;
 
+  const [inputValue, setInputValue] = useState();
   const maxLength = fieldMetadata?.maxLength;
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
@@ -43,6 +54,15 @@ export default function TextInput(props) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       fullWidth
@@ -52,11 +72,11 @@ export default function TextInput(props) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
     />
   );

package/lib/field/Time/Time.tsx

@@ -17,7 +17,8 @@ export default function Time(props) {
     readOnly,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    testId
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -33,6 +34,12 @@ export default function Time(props) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm') : null;
     onChange({ value: theValue });
@@ -68,6 +75,7 @@ export default function Time(props) {
       format='hh:mm a'
       value={timeValue}
       onChange={handleChange}
+      InputProps={{ inputProps: { ...testProp } }}
     />
   );
 }

package/lib/field/URL/URL.tsx

@@ -17,6 +17,7 @@ export default function URLComponent(props) {
     onChange,
     onBlur,
     readOnly,
+    testId,
     helperText,
     displayMode,
     hideLabel
@@ -35,6 +36,12 @@ export default function URLComponent(props) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   return (
     <TextField
       type='url'
@@ -50,6 +57,7 @@ export default function URLComponent(props) {
       error={status === 'error'}
       label={label}
       value={value}
+      InputProps={{ inputProps: { ...testProp } }}
     />
   );
 }

package/lib/field/UserReference/UserReference.tsx

@@ -5,7 +5,9 @@ import AutoComplete from '@pega/react-sdk-components/lib/components/field/AutoCo
 import Dropdown from '@pega/react-sdk-components/lib/components/field/Dropdown';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 errors)
 declare const PCore: any;
+
 const DROPDOWN_LIST = 'Drop-down list';
 const SEARCH_BOX = 'Search box';
 

package/lib/helpers/{attachmentHelpers.js → attachmentHelpers.ts}

@@ -42,11 +42,11 @@ export const getIconFromFileType = (fileType) => {
   return icon;
 };
 
-export const getIconForAttachment = (attachment) => {
+export const getIconForAttachment = (inThis:any , attachment:any) => {
   let icon;
   switch (attachment.type) {
     case "FILE":
-      icon = this.getIconFromFileType(attachment.mimeType);
+      icon = inThis.getIconFromFileType(attachment.mimeType);
       break;
     case "URL":
       icon = "chain";

package/lib/helpers/auth.js

@@ -228,7 +228,12 @@ class PegaAuth {
                           fnCloseIframe();
                       } else {
                           clearInterval(checkWindowClosed);
-                          myWindow.close();
+                          try {
+                            myWindow.close();
+                          } catch (e) {
+                            // eslint-disable-next-line no-console
+                            console.warn(`attempt to close opened window failed`);
+                          }
                       }
                       resolve(token);
                   })
@@ -239,8 +244,10 @@ class PegaAuth {
               /* Handler to receive the auth code */
               authMessageReceiver = (event) => {
                   // Check origin to make sure it is the redirect origin
-                  if( event.origin !== redirectOrigin )
-                      return;
+                  if( event.origin !== redirectOrigin ) {
+                    // eslint-disable-next-line no-console
+                    console.info(`Received event from unexpected origin: ${event.origin} (was expecting: ${redirectOrigin})`);
+                  }
                   if( !event.data || !event.data.type || event.data.type !== "PegaAuth" )
                       return;
                   // eslint-disable-next-line no-console

package/lib/helpers/authManager.js

@@ -139,7 +139,7 @@ const initOAuth = (bInit) => {
     if( 'silentTimeout' in sdkConfigAuth ) {
       authConfig.silentTimeout = sdkConfigAuth.silentTimeout;
     }
-    if( bNoInitialRedirect ) {
+    if( bNoInitialRedirect && sdkConfigAuth.mashupUserIdentifier && sdkConfigAuth.mashupPassword ) {
       authConfig.userIdentifier = sdkConfigAuth.mashupUserIdentifier;
       authConfig.password = sdkConfigAuth.mashupPassword;
     }
@@ -154,15 +154,21 @@ const initOAuth = (bInit) => {
     let sSI = sessionStorage.getItem("rsdk_CI");
     if( sSI ) {
       try {
-          const oSI = JSON.parse(sSI);
-          if( oSI.authorizeUri !== authConfig.authorizeUri ||
-              oSI.appAlias !== authConfig.appAlias ||
-              oSI.clientId !== authConfig.clientId ||
-              oSI.userIdentifier !== authConfig.userIdentifier ||
-              oSI.password !== authConfig.password) {
-              clearAuthMgr();
-              sSI = null;
+        const oSI = JSON.parse(sSI);
+        const aProps = ['authorizeUri', 'appAlias', 'clientId', 'authService', 'userIdentifier'];
+        for( let i = 0; i < aProps.length; i += 1 ) {
+          const prop = aProps[i];
+          const currValue = oSI[prop];
+          const newValue = authConfig[prop];
+          if( currValue !== newValue ) {
+            // eslint-disable-next-line no-console
+            console.warn(`Clearing credentials due to mismatch for property: ${prop};` +
+              `currValue (${currValue}) does not match new desired value (${newValue})`);
+            clearAuthMgr();
+            sSI = null;
+            break;
           }
+        }
       } catch(e) {
         // do nothing
       }
@@ -269,21 +275,18 @@ const constellationInit = (authConfig, tokenInfo, authTokenUpdated, fnReauth) =>
     window.myLoadPortal = bootstrapShell.loadPortal;
     window.myLoadDefaultPortal = bootstrapShell.loadDefaultPortal;
 
-    bootstrapShell.bootstrapWithAuthHeader(constellationBootConfig, 'shell').then(() => {
+    bootstrapShell.bootstrapWithAuthHeader(constellationBootConfig, 'pega-root').then(() => {
       // eslint-disable-next-line no-console
       console.log('Bootstrap successful!');
       gbC11NBootstrapInProgress = false;
 
       // Setup listener for the reauth event
       if( tokenInfo ) {
-        // eslint-disable-next-line no-undef
         PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_FULL_REAUTH, fnReauth, "authFullReauth");
       } else {
         // customReauth event introduced with 8.8
-        // eslint-disable-next-line no-undef
         const sEvent = PCore.getConstants().PUB_SUB_EVENTS.EVENT_CUSTOM_REAUTH;
         if( sEvent ) {
-          // eslint-disable-next-line no-undef
           PCore.getPubSubUtils().subscribe(sEvent, fnReauth, "doReauth");
         }
       }

package/lib/helpers/case-utils.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import AlertBanner from '@pega/react-sdk-components/lib/components/designSystemExtension/AlertBanner';
+
+declare let PCore: any;
+
+/**
+ * Function that accepts array of messages as input and group them by their type and returns the resulting object
+ * @param {Array} inputMessages
+ * Eg: [
+ * {message: 'First Name is required', type: 'error'},
+ * {message: 'Last Name is required', type: 'error'},
+ * {message: 'Address field should be clear and precise', type: 'info'}
+ * ]
+ *
+ * @returns {object}
+ *
+ * Eg: {
+ *  error: ['First Name is required', 'Last Name is required'],
+ *  info: ['Address field should be clear and precise']
+ * }
+ */
+
+function getMessagesGrouped(inputMessages) {
+  const messages = {};
+
+  if (inputMessages && inputMessages instanceof Array && inputMessages.length > 0) {
+    inputMessages.forEach(item => {
+      const { message, type } = item;
+      messages[type] = [...(messages[type] || []), message];
+    });
+  }
+  return messages;
+}
+
+/**
+ * Function accepts a error type and variant of the banner
+ * @param {string} type
+ * Eg: 'error'
+ * @returns {string}
+ * Eg: 'urgent'
+ */
+function getVariant(type) {
+  const { BANNER_VARIANT_SUCCESS, BANNER_VARIANT_INFO, BANNER_VARIANT_URGENT, MESSAGES } =
+    PCore.getConstants();
+  const { MESSAGES_TYPE_ERROR, MESSAGES_TYPE_INFO, MESSAGES_TYPE_SUCCESS } = MESSAGES;
+
+  let variant;
+  switch (type) {
+    case MESSAGES_TYPE_ERROR:
+      variant = BANNER_VARIANT_URGENT;
+      break;
+    case MESSAGES_TYPE_INFO:
+      variant = BANNER_VARIANT_INFO;
+      break;
+    case MESSAGES_TYPE_SUCCESS:
+      variant = BANNER_VARIANT_SUCCESS;
+      break;
+    default:
+      variant = '';
+  }
+  return variant;
+}
+
+function getBanners(config) {
+  const { target, pageMessages, httpMessages } = config;
+  const { PAGE } = PCore.getConstants();
+  const { clearMessages } = PCore.getMessageManager();
+  const banners: any = [];
+  const groupedPageMessages = getMessagesGrouped(pageMessages);
+
+  Object.keys(groupedPageMessages).forEach(type => {
+    const messagesByType = groupedPageMessages[type];
+    const variant = getVariant(type);
+    const pageMessagesBannerID = `${target}_${PAGE}_${type}`.toLowerCase().replace('/', '_');
+    banners.push(
+      <AlertBanner
+        id={pageMessagesBannerID}
+        variant={variant}
+        messages={messagesByType}
+        onDismiss={
+          variant === 'urgent'
+            ? ''
+            : () => {
+                clearMessages({
+                  category: PAGE,
+                  type,
+                  context: target
+                });
+              }
+        }
+      />
+    );
+  });
+
+  if (httpMessages && httpMessages.length > 0) {
+    banners.push(
+      <AlertBanner id='modalViewContainerBanner' variant='urgent' messages={httpMessages} />
+    );
+  }
+
+  return banners;
+}
+
+export { getMessagesGrouped, getBanners };

package/lib/helpers/common-utils.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export function isEmptyObject(obj: Object): Boolean {
+  return Object.keys(obj).length === 0;
+}