@pega/react-sdk-overrides 0.23.26 → 0.23.27

package/lib/field/TextInput/TextInput.tsx

@@ -1,30 +1,52 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
-export default function TextInput(props) {
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TextInputProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  fieldMetadata?: any;
+}
+
+export default function TextInput(props: TextInputProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    /* onChange, onBlur */
     readOnly,
     testId,
     fieldMetadata,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).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,20 +65,29 @@ 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
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       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/TextInput/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Text (single line)",
   "type": "Field",
   "subtype": "Text",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/TextInput/index.tsx

@@ -1 +1 @@
-export { default } from './TextInput';
+export { default } from './TextInput';

package/lib/field/Time/Time.tsx

@@ -1,24 +1,20 @@
-import React from 'react';
 import { KeyboardTimePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
-import dayjs from 'dayjs';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import dayjs from 'dayjs';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TimeProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Time here
+}
 
-export default function Time(props) {
-  const {
-    label,
-    required,
-    disabled,
-    value,
-    validatemessage,
-    status,
-    onChange,
-    readOnly,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+export default function Time(props: TimeProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const TextInput = getComponentFromMap('TextInput');
+
+  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   if (displayMode === 'LABELS_LEFT') {
@@ -33,6 +29,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 +70,7 @@ export default function Time(props) {
       format='hh:mm a'
       value={timeValue}
       onChange={handleChange}
+      InputProps={{ inputProps: { ...testProp } }}
     />
   );
 }

package/lib/field/Time/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Time only",
   "type": "Field",
   "subtype": "TimeOfDay",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/URL/URL.tsx

@@ -1,12 +1,20 @@
-import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface URLComponentProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on URLComponent here
+}
 
 // NOTE: that we had to change the name from URL to URLComponent
 //  Otherwise, we were getting all kinds of weird errors when we
 //  referred to URL as a component.
-export default function URLComponent(props) {
+export default function URLComponent(props: URLComponentProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const TextInput = getComponentFromMap('TextInput');
+
   const {
     label,
     required,
@@ -17,9 +25,11 @@ export default function URLComponent(props) {
     onChange,
     onBlur,
     readOnly,
+    testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -35,13 +45,19 @@ export default function URLComponent(props) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   return (
     <TextField
       type='url'
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       required={required}
       disabled={disabled}
@@ -50,6 +66,7 @@ export default function URLComponent(props) {
       error={status === 'error'}
       label={label}
       value={value}
+      InputProps={{ inputProps: { ...testProp } }}
     />
   );
 }

package/lib/field/URL/config-ext.json

@@ -4,6 +4,5 @@
   "description": "URL",
   "type": "Field",
   "subtype": "Text-URL",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/URL/index.tsx

@@ -1 +1 @@
-export { default } from './URL';
+export { default } from './URL';

package/lib/field/UserReference/UserReference.tsx

@@ -1,31 +1,56 @@
-import React, { Fragment, memo, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { memo, useEffect, useState } from 'react';
 import { Typography } from '@material-ui/core';
-import AutoComplete from '@pega/react-sdk-components/lib/components/field/AutoComplete';
-import Dropdown from '@pega/react-sdk-components/lib/components/field/Dropdown';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
-declare const PCore: any;
 const DROPDOWN_LIST = 'Drop-down list';
 const SEARCH_BOX = 'Search box';
 
-const UserReference = props => {
+interface UserReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on URLComponent here
+  displayAs?: string;
+  label?: string;
+  value?: any;
+  testId?: string;
+  placeholder?: string;
+  helperText?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  validatemessage?: string;
+  showAsFormattedText?: boolean;
+  additionalProps?: object;
+  hideLabel?: boolean;
+  variant?: string;
+  onChange?: any;
+}
+
+const UserReference = (props: UserReferenceProps) => {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AutoComplete = getComponentFromMap('AutoComplete');
+  const Dropdown = getComponentFromMap('Dropdown');
+
   const {
-    label,
-    displayAs,
+    label = '',
+    displayAs = '',
     getPConnect,
-    value,
-    testId,
-    helperText,
-    validatemessage,
-    placeholder,
-    showAsFormattedText,
-    additionalProps,
-    hideLabel,
-    readOnly,
-    required,
-    disabled,
-    onChange
+    value = '',
+    testId = '',
+    helperText = '',
+    validatemessage = '',
+    placeholder = '',
+    showAsFormattedText = false,
+    additionalProps = {},
+    hideLabel = false,
+    readOnly = false,
+    required = false,
+    disabled = false,
+    onChange,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    variant = 'inline'
   } = props;
   const [dropDownDataSource, setDropDownDataSource] = useState([]);
   const [userName, setUserName] = useState('');
@@ -40,7 +65,7 @@ const UserReference = props => {
         // if same user ref field is referred in view as editable & readonly formatted text
         // referenced users won't be available, so get user details from dx api
         const { getOperatorDetails } = PCore.getUserApi();
-        getOperatorDetails(userId).then(res => {
+        getOperatorDetails(userId).then((res: any) => {
           if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
             setUserName(res.data.pyOperatorInfo.pyUserName);
           }
@@ -50,9 +75,12 @@ const UserReference = props => {
       const queryPayload = {
         dataViewName: OPERATORS_DP
       };
+
       PCore.getRestClient()
+        // @ts-ignore - Argument of type '{ queryPayload: { dataViewName: string; }; }' is not assignable to parameter of type 'RestApiOptionsObject'
+        // @ts-ignore - Expected 3 arguments, but got 2
         .invokeRestApi('getListData', { queryPayload })
-        .then(res => {
+        .then((res: any) => {
           const ddDataSource = res.data.data.map(listItem => ({
             key: listItem.pyUserIdentifier,
             value: listItem.pyUserName
@@ -71,7 +99,7 @@ const UserReference = props => {
   if (readOnly && showAsFormattedText) {
     if (userId) {
       userReferenceComponent = (
-        <Fragment>
+        <>
           {/*
             TODO: This has to be replaced with Operator Component
           */}
@@ -79,7 +107,7 @@ const UserReference = props => {
             <Typography variant='caption'>{label}</Typography>
             <Typography variant='body1'>{userName}</Typography>
           </div>
-        </Fragment>
+        </>
       );
     }
   } else {
@@ -148,40 +176,6 @@ const UserReference = props => {
   return userReferenceComponent;
 };
 
-UserReference.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  displayAs: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.objectOf(PropTypes.any)]),
-  testId: PropTypes.string,
-  placeholder: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  validatemessage: PropTypes.string,
-  showAsFormattedText: PropTypes.bool,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  hideLabel: PropTypes.bool
-};
-
-UserReference.defaultProps = {
-  displayAs: null,
-  label: null,
-  value: null,
-  readOnly: false,
-  testId: null,
-  placeholder: null,
-  helperText: null,
-  disabled: false,
-  required: false,
-  validatemessage: null,
-  showAsFormattedText: false,
-  additionalProps: {},
-  variant: 'inline',
-  hideLabel: false
-};
-
 // as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
 // same key value pairs in obj. hence using custom comparison function on when to re-render
 const comparisonFn = (prevProps, nextProps) => {

package/lib/field/UserReference/UserReferenceUtils.ts

@@ -1,4 +1,4 @@
-export const getUserId = (user) => {
+export const getUserId = user => {
   let userId = '';
   if (typeof user === 'object' && user !== null && user.userId) {
     userId = user.userId;
@@ -8,6 +8,6 @@ export const getUserId = (user) => {
   return userId;
 };
 
-export const isUserNameAvailable = (user) => {
+export const isUserNameAvailable = user => {
   return typeof user === 'object' && user !== null && user.userName;
 };

package/lib/field/UserReference/config-ext.json

@@ -3,6 +3,5 @@
   "description": "User reference",
   "type": "Field",
   "subtype": "DATA_CAPTURE",
-  "properties": [
-  ]
+  "properties": []
 }

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

@@ -1,6 +1,6 @@
 import download from 'downloadjs';
 
-export const validateMaxSize = (fileObj, maxSizeInMB) => {
+export const validateMaxSize = (fileObj: any, maxSizeInMB: string): boolean => {
   const fileSize = (fileObj.size / 1048576).toFixed(2);
   return parseFloat(fileSize) < parseFloat(maxSizeInMB);
 };
@@ -15,7 +15,7 @@ export const fileDownload = (data, fileName, ext) => {
   }
 };
 
-export const getIconFromFileType = (fileType) => {
+export const getIconFromFileType = (fileType): string => {
   let icon = 'document-doc';
   if (!fileType) return icon;
   if (fileType.startsWith('audio')) {
@@ -28,8 +28,8 @@ export const getIconFromFileType = (fileType) => {
     icon = 'document-pdf';
   } else {
     const [, subtype] = fileType.split('/');
-    const foundMatch = (sources) => {
-      return sources.some((key) => subtype.includes(key));
+    const foundMatch = sources => {
+      return sources.some(key => subtype.includes(key));
     };
 
     if (foundMatch(['excel', 'spreadsheet'])) {
@@ -42,22 +42,27 @@ export const getIconFromFileType = (fileType) => {
   return icon;
 };
 
-export const getIconForAttachment = (attachment) => {
+export const getIconForAttachment = (inThis: any, attachment: any): string => {
   let icon;
   switch (attachment.type) {
-    case "FILE":
-      icon = this.getIconFromFileType(attachment.mimeType);
+    case 'FILE':
+      icon = inThis.getIconFromFileType(attachment.mimeType);
       break;
-    case "URL":
-      icon = "chain";
+    case 'URL':
+      icon = 'chain';
       break;
     default:
-      icon = "document-doc";
+      icon = 'document-doc';
   }
   return icon;
 };
 
-export const buildFilePropsFromResponse = (respObj) => {
+export const buildFilePropsFromResponse = (
+  respObj
+): {
+  props: { meta: string; name: string; icon: string };
+  responseProps: any;
+} => {
   return {
     props: {
       meta: `${respObj.pyCategoryName}, ${respObj.pxCreateOperator}`,

package/lib/helpers/case-utils.tsx

@@ -0,0 +1,99 @@
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+/**
+ * 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 AlertBanner = getComponentFromMap('AlertBanner');
+  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
+                } as any);
+              }
+        }
+      />
+    );
+  });
+
+  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,8 @@
+export function isEmptyObject(obj: Object): boolean {
+  return Object.keys(obj).length === 0;
+}
+
+export function isInfinity23OrHigher() {
+  const pCoreVersion = PCore.getPCoreVersion();
+  return ['8.23.0', '23.1.1'].includes(pCoreVersion);
+}

package/lib/helpers/data_page.ts

@@ -1,16 +1,13 @@
-declare const PCore;
-
 // eslint-disable-next-line import/prefer-default-export
 export const getDataPage = (dataPageName, parameters, context) => {
   let dataViewParams;
-  if(parameters){
+  if (parameters) {
     dataViewParams = {
-      'dataViewParameters': parameters
+      dataViewParameters: parameters
     };
   }
   return new Promise((resolve, reject) => {
-    PCore.getDataApiUtils()
-      .getData(dataPageName, dataViewParams, context)
+    (PCore.getDataApiUtils().getData(dataPageName, dataViewParams, context) as any)
       .then(response => {
         resolve(response.data.data);
       })