@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/template/DataReference/DataReference.tsx

@@ -1,13 +1,30 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import SingleReferenceReadonly from '@pega/react-sdk-components/lib/components/template/SingleReferenceReadOnly';
-import MultiReferenceReadonly from '@pega/react-sdk-components/lib/components/template/MultiReferenceReadOnly';
+import { PropsWithChildren, ReactElement, useEffect, useMemo, useState } from 'react';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// ReferenceProps can't be used until getComponentConfig() is NOT private
+interface DataReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  showLabel: any;
+  displayMode: string;
+  allowAndPersistChangesInReviewMode: boolean;
+  referenceType: string;
+  selectionMode: string;
+  displayAs: string;
+  ruleClass: string;
+  parameters: string[]; // need to fix
+  hideLabel: boolean;
+}
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
-declare const PCore: any;
+export default function DataReference(props: PropsWithChildren<DataReferenceProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');
+  const MultiReferenceReadonly = getComponentFromMap('MultiReferenceReadOnly');
 
-export default function DataReference(props) {
   const {
     children,
     getPConnect,
@@ -22,14 +39,14 @@ export default function DataReference(props) {
     parameters,
     hideLabel
   } = props;
-  let childrenToRender = children;
+  let childrenToRender = children as ReactElement[];
   const pConn = getPConnect();
   const [dropDownDataSource, setDropDownDataSource] = useState(null);
-  const propsToUse = { label, showLabel, ...pConn.getInheritedProps() };
+  const propsToUse: any = { label, showLabel, ...pConn.getInheritedProps() };
   if (propsToUse.showLabel === false) {
     propsToUse.label = '';
   }
-  const rawViewMetadata = pConn.getRawMetadata();
+  const rawViewMetadata: any = pConn.getRawMetadata();
   const viewName = rawViewMetadata.name;
   const [firstChildMeta] = rawViewMetadata.children;
   const refList = rawViewMetadata.config.referenceList;
@@ -40,32 +57,34 @@ export default function DataReference(props) {
 
   /* Only for dropdown when it has param use data api to get the data back and add it to datasource */
   useEffect(() => {
-    if (
-      firstChildMeta?.type === "Dropdown" &&
-      rawViewMetadata.config?.parameters
-    ) {
+    if (firstChildMeta?.type === 'Dropdown' && rawViewMetadata.config?.parameters) {
       const { value, key, text } = firstChildMeta.config.datasource.fields;
-      PCore.getDataApiUtils()
-        .getData(refList, {
-          dataViewParameters: parameters
-        })
-        .then((res) => {
+      (
+        PCore.getDataApiUtils().getData(
+          refList,
+          {
+            dataViewParameters: parameters
+          } as any,
+          ''
+        ) as Promise<any>
+      )
+        .then(res => {
           if (res.data.data !== null) {
             const ddDataSource = res.data.data
-              .map((listItem) => ({
-                key: listItem[key.split(" .", 2)[1]],
-                text: listItem[text.split(" .", 2)[1]],
-                value: listItem[value.split(" .", 2)[1]]
+              .map(listItem => ({
+                key: listItem[key.split(' .', 2)[1]],
+                text: listItem[text.split(' .', 2)[1]],
+                value: listItem[value.split(' .', 2)[1]]
               }))
-              .filter((item) => item.key);
+              .filter(item => item.key);
             // Filtering out undefined entries that will break preview
             setDropDownDataSource(ddDataSource);
           } else {
-            const ddDataSource: any = []
+            const ddDataSource: any = [];
             setDropDownDataSource(ddDataSource);
           }
         })
-        .catch((err) => {
+        .catch(err => {
           // eslint-disable-next-line no-console
           console.error(err?.stack);
           return Promise.resolve({
@@ -76,7 +95,7 @@ export default function DataReference(props) {
   }, [firstChildMeta, rawViewMetadata, parameters]);
 
   if (firstChildMeta?.type !== 'Region') {
-    firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+    firstChildPConnect = getPConnect().getChildren()?.[0].getPConnect;
     /* remove refresh When condition from those old view so that it will not be used for runtime */
     if (firstChildMeta.config?.readOnly) {
       delete firstChildMeta.config.readOnly;
@@ -107,10 +126,9 @@ export default function DataReference(props) {
   const handleSelection = event => {
     const caseKey = pConn.getCaseInfo().getKey();
     const refreshOptions = { autoDetectRefresh: true };
-    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName')) {
-      getPConnect()
-        .getActionsApi()
-        .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName'), null, refreshOptions);
+    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName', '')) {
+      // 2nd arg empty string until typedef marked correctly
+      getPConnect().getActionsApi().refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName', ''), null, refreshOptions); // 2nd arg empty string until typedef marked correctly
       PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
     } else {
       const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
@@ -120,45 +138,41 @@ export default function DataReference(props) {
     // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
     const propValue = event?.id || event?.target.value;
     if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
-      PCore.getDataApiUtils()
-        .getCaseEditLock(caseKey)
-        .then(caseResponse => {
-          const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
-          let curr = {};
-          const commitData = curr;
+      (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>).then(caseResponse => {
+        const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
+        let curr = {};
+        const commitData = curr;
 
-          pageTokens.forEach(el => {
-            if (el !== '') {
-              curr[el] = {};
-              curr = curr[el];
-            }
-          });
+        pageTokens.forEach(el => {
+          if (el !== '') {
+            curr[el] = {};
+            curr = curr[el];
+          }
+        });
 
-          // expecting format like {Customer: {pyID:"C-100"}}
-          const propArr = propName.split('.');
-          propArr.forEach((element, idx) => {
-            if (idx + 1 === propArr.length) {
-              curr[element] = propValue;
-            } else {
-              curr[element] = {};
-              curr = curr[element];
-            }
-          });
+        // expecting format like {Customer: {pyID:"C-100"}}
+        const propArr = propName.split('.');
+        propArr.forEach((element, idx) => {
+          if (idx + 1 === propArr.length) {
+            curr[element] = propValue;
+          } else {
+            curr[element] = {};
+            curr = curr[element];
+          }
+        });
 
-          PCore.getDataApiUtils()
-            .updateCaseEditFieldsData(
-              caseKey,
-              { [caseKey]: commitData },
-              caseResponse.headers.etag,
-              pConn.getContextName()
-            )
-            .then(response => {
-              PCore.getContainerUtils().updateChildContainersEtag(
-                pConn.getContextName(),
-                response.headers.etag
-              );
-            });
+        (
+          PCore.getDataApiUtils().updateCaseEditFieldsData(
+            caseKey,
+            { [caseKey]: commitData },
+            caseResponse.headers.etag,
+            pConn.getContextName()
+          ) as Promise<any>
+        ).then(response => {
+          PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), response.data.data.caseInfo.lastUpdateTime);
+          PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
         });
+      });
     }
   };
 
@@ -169,7 +183,10 @@ export default function DataReference(props) {
     const { type, config } = firstChildMeta;
     if (firstChildMeta?.type !== 'Region') {
       pConn.clearErrorMessages({
-        property: propName
+        // Need to add empty string for category and context to match typdef
+        property: propName,
+        category: '',
+        context: ''
       });
       if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {
         return (
@@ -183,68 +200,51 @@ export default function DataReference(props) {
             ruleClass={ruleClass}
             referenceType={referenceType}
             hideLabel={hideLabel}
-            dataRelationshipContext={
-              rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null
-            }
+            dataRelationshipContext={rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null}
           />
         );
       }
 
       if (isDisplayModeEnabled && selectionMode === SELECTION_MODE.MULTI) {
-        return (
-          <MultiReferenceReadonly
-            config={config}
-            getPConnect={firstChildPConnect}
-            label={propsToUse.label}
-            hideLabel={hideLabel}
-          />
-        );
+        return <MultiReferenceReadonly config={config} getPConnect={firstChildPConnect} label={propsToUse.label} hideLabel={hideLabel} />;
       }
 
       // In the case of a datasource with parameters you cannot load the dropdown before the parameters
-      if (
-        type === 'Dropdown' &&
-        rawViewMetadata.config?.parameters &&
-        dropDownDataSource === null
-      ) {
+      if (type === 'Dropdown' && rawViewMetadata.config?.parameters && dropDownDataSource === null) {
         return null;
       }
 
-      return firstChildPConnect().createComponent({
-        type,
-        config: {
-          ...config,
-          required: propsToUse.required,
-          visibility: propsToUse.visibility,
-          disabled: propsToUse.disabled,
-          label: propsToUse.label,
-          viewName: getPConnect().getCurrentView(),
-          parameters: rawViewMetadata.config.parameters,
-          readOnly: false,
-          localeReference: rawViewMetadata.config.localeReference,
-          ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
-          dataRelationshipContext:
-            rawViewMetadata.config.contextClass && rawViewMetadata.config.name
-              ? rawViewMetadata.config.name
-              : null,
-          hideLabel,
-          onRecordChange: handleSelection
-        }
-      });
+      return firstChildPConnect().createComponent(
+        {
+          type,
+          config: {
+            ...config,
+            required: propsToUse.required,
+            visibility: propsToUse.visibility,
+            disabled: propsToUse.disabled,
+            label: propsToUse.label,
+            viewName: getPConnect().getCurrentView(),
+            parameters: rawViewMetadata.config.parameters,
+            readOnly: false,
+            localeReference: rawViewMetadata.config.localeReference,
+            ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
+            dataRelationshipContext: rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null,
+            hideLabel,
+            onRecordChange: handleSelection
+          }
+        },
+        '',
+        '',
+        {}
+      ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
     }
-  }, [
-    firstChildMeta.config?.datasource?.source,
-    parameters,
-    dropDownDataSource,
-    propsToUse.required,
-    propsToUse.disabled
-  ]);
+  }, [firstChildMeta.config?.datasource?.source, parameters, dropDownDataSource, propsToUse.required, propsToUse.disabled]);
 
   // Only include the views region for rendering when it has content
   if (firstChildMeta?.type !== 'Region') {
     const viewsRegion = rawViewMetadata.children[1];
     if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
-      childrenToRender = [recreatedFirstChild, ...children.slice(1)];
+      childrenToRender = [recreatedFirstChild, ...(children as ReactElement[]).slice(1)];
     } else {
       childrenToRender = [recreatedFirstChild];
     }
@@ -255,36 +255,8 @@ export default function DataReference(props) {
   ) : (
     <div>
       {childrenToRender.map(child => (
-        <React.Fragment>{child}</React.Fragment>
+        <>{child}</>
       ))}
     </div>
   );
 }
-
-DataReference.defaultProps = {
-  label: undefined,
-  showLabel: undefined,
-  displayMode: undefined,
-  allowAndPersistChangesInReviewMode: false,
-  referenceType: '',
-  selectionMode: '',
-  displayAs: '',
-  ruleClass: '',
-  parameters: undefined,
-  hideLabel: false
-};
-
-DataReference.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  showLabel: PropTypes.func,
-  displayMode: PropTypes.string,
-  allowAndPersistChangesInReviewMode: PropTypes.bool,
-  referenceType: PropTypes.string,
-  selectionMode: PropTypes.string,
-  displayAs: PropTypes.string,
-  ruleClass: PropTypes.string,
-  parameters: PropTypes.arrayOf(PropTypes.string), // need to fix
-  hideLabel: PropTypes.bool
-};

package/lib/template/DataReference/config-ext.json

@@ -4,6 +4,5 @@
   "type": "Template",
   "icon": "DataReference.svg",
   "subtype": "DATAVIEW",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/DefaultForm/DefaultForm.css

@@ -16,15 +16,19 @@
   gap: calc(1rem);
 }
 
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
-.psdk-default-form-instruction-text{
+.psdk-default-form-instruction-text {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,15 +1,29 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
+import { createElement, PropsWithChildren } from 'react';
 
 import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
+
+import { getKeyForMappedField, mapStateToProps } from './utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './DefaultForm.css';
 
-export default function DefaultForm(props) {
-  const { getPConnect, NumCols } = props;
+interface DefaultFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  NumCols: string;
+  instructions: string;
+}
+
+const Child = connectToState(mapStateToProps)(props => {
+  const { key, visibility, ...rest } = props;
+
+  return createElement(createPConnectComponent(), { ...rest, key, visibility });
+});
+
+export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>) {
+  const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
-  const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, '');
 
   let divClass: string;
 
@@ -35,26 +49,18 @@ export default function DefaultForm(props) {
   // to take the children and create components for them, put in an array and pass as the
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
-  const dfChildren = arChildren.map((kid, idx) =>
-    // eslint-disable-next-line react/no-array-index-key
-    createElement(createPConnectComponent(), { ...kid, key: idx })
-  );
+  const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
   return (
     <>
-      {instructionText && (
-        <div className='psdk-default-form-instruction-text'>{instructionText}</div>
+      {instructions && (
+        <div className='psdk-default-form-instruction-text'>
+          {/* server performs sanitization method for instructions html content */}
+          {/* eslint-disable react/no-danger */}
+          <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+        </div>
       )}
       <div className={divClass}>{dfChildren}</div>
     </>
   );
 }
-
-DefaultForm.propTypes = {
-  // children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  NumCols: PropTypes.string
-};
-
-DefaultForm.defaultProps = {
-  NumCols: '1'
-};

package/lib/template/DefaultForm/config-ext.json

@@ -4,6 +4,5 @@
   "description": "DefaultForm Template",
   "type": "Template",
   "subtype": "FORM",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/DefaultForm/utils/index.ts

@@ -0,0 +1,33 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export const mapStateToProps: any = (_, ownProps) => {
+  const { getPConnect } = ownProps;
+
+  return {
+    visibility: getPConnect().getComputedVisibility(),
+    getPConnect
+  };
+};
+
+export const getKeyForMappedField = field => {
+  if (Array.isArray(field)) {
+    return field
+      .map(item => {
+        return getKeyForMappedField(item);
+      })
+      .join('__');
+  }
+
+  const pConnect = field?.getPConnect?.();
+
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.name) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.name}`;
+  }
+
+  // Using label as a fallback if name is not defined.
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.label) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.label}`;
+  }
+
+  return uuidv4();
+};

package/lib/template/Details/Details/Details.tsx

@@ -1,10 +1,21 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
+import { createElement } from 'react';
 import Grid from '@material-ui/core/Grid';
+
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface DetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  showLabel: boolean;
+  showHighlightedData: boolean;
+}
+
+export default function Details(props: DetailsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
 
-export default function Details(props) {
   const { label, showLabel, getPConnect, showHighlightedData } = props;
 
   // Get the inherited props from the parent to determine label settings
@@ -14,20 +25,18 @@ export default function Details(props) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = getPConnect()
-    .getChildren()
-    .map((configObject, index) =>
-      createElement(createPConnectComponent(), {
-        ...configObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-      })
-    );
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(createPConnectComponent(), {
+      ...configObject,
+      // eslint-disable-next-line react/no-array-index-key
+      key: index.toString()
+    })
+  );
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map(field => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 
@@ -37,7 +46,7 @@ export default function Details(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -62,16 +71,3 @@ export default function Details(props) {
     </FieldGroup>
   );
 }
-
-Details.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-Details.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -1,17 +1,23 @@
-import { useState, useEffect, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
-import React from 'react';
+import { Children, PropsWithChildren, useEffect, useState } from 'react';
 import { Tab, Tabs, TextField } from '@material-ui/core';
 import { TabContext, TabPanel } from '@material-ui/lab';
 
-export default function DetailsSubTabs(props) {
-  const { children, label, showLabel, getPConnect } = props;
+import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface DetailsSubTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+}
+
+export default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsProps>) {
+  const { children = [], label, showLabel = true, getPConnect } = props;
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const defaultTabIndex = 0;
-  const deferLoadedTabs = children[0];
+  const deferLoadedTabs = Children.toArray(children)[0];
   let availableTabs = [];
 
   useEffect(() => {
@@ -32,7 +38,7 @@ export default function DetailsSubTabs(props) {
   };
 
   return (
-    <Fragment>
+    <>
       {propsToUse.showLabel && <TextField>{propsToUse.label}</TextField>}
       <TabContext value={currentTabId.toString()}>
         <Tabs onChange={handleTabClick} value={currentTabId}>
@@ -47,19 +53,6 @@ export default function DetailsSubTabs(props) {
           </TabPanel>
         ))}
       </TabContext>
-    </Fragment>
+    </>
   );
 }
-
-DetailsSubTabs.defaultProps = {
-  children: [],
-  label: undefined,
-  showLabel: true
-};
-
-DetailsSubTabs.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node),
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired
-};

package/lib/template/Details/DetailsSubTabs/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Details (Sub tabs)",
   "type": "Template",
   "subtype": "DETAILS",
-  "properties": [
-  ]
+  "properties": []
 }