@pega/dx-component-builder-sdk 0.23.5 → 0.23.7

package/tests/assets/components/SDK-React/create/override-sdk/template/ListView/utils.ts

@@ -13,13 +13,49 @@ export const formatConstants = {
   WorkLink: 'WorkLink',
 };
 
+class DataApi {
+  mappedPropertyToOriginalProperty: any;
+  originalPropertyToMappedProperty: any;
+  constructor() {
+    ;
+    this.originalPropertyToMappedProperty = {};
+    this.mappedPropertyToOriginalProperty = {};
+    this.setPropertyMaps = this.setPropertyMaps.bind(this);
+    this.getMappedProperty = this.getMappedProperty.bind(this);
+    this.getOriginalProperty = this.getOriginalProperty.bind(this);
+  }
+
+  setPropertyMaps(originalToMappedPropertyObj = {}, mappedToOriginalPropertyObj = {}) {
+    this.originalPropertyToMappedProperty = {
+      ...this.originalPropertyToMappedProperty,
+      ...originalToMappedPropertyObj
+    };
+    this.mappedPropertyToOriginalProperty = {
+      ...this.mappedPropertyToOriginalProperty,
+      ...mappedToOriginalPropertyObj
+    };
+  }
+
+  getMappedProperty(propertyName) {
+    return this.originalPropertyToMappedProperty[propertyName] ?? propertyName;
+  }
+
+  getOriginalProperty(propertyName) {
+    return this.mappedPropertyToOriginalProperty[propertyName] ?? propertyName;
+  }
+}
+
 export async function getContext(componentConfig) {
   const {
     promisesArray = [], // array of promises which can be invoked paralelly,
   } = componentConfig;
   const promisesResponseArray = await Promise.all(promisesArray);
+  const dataApi = new DataApi();
   return {
     promisesResponseArray,
+    setPropertyMaps: dataApi.setPropertyMaps,
+    getMappedProperty: dataApi.getMappedProperty,
+    getOriginalProperty: dataApi.getOriginalProperty,
   };
 }
 
@@ -34,7 +70,7 @@ export async function getContext(componentConfig) {
  * getFieldNameFromEmbeddedFieldName('!P!Organisation:Name') return 'Organisation.Name'
  * getFieldNameFromEmbeddedFieldName('!PL!Employees:Name') return 'Employees.Name'
  */
- export function getFieldNameFromEmbeddedFieldName(propertyName) {
+export function getFieldNameFromEmbeddedFieldName(propertyName) {
   let value = propertyName;
   if (value.startsWith(PAGE) || value.startsWith(PAGELIST)) {
     value = value.substring(value.lastIndexOf('!') + 1);
@@ -49,7 +85,7 @@ export async function getContext(componentConfig) {
  * @ignore
  * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields.
  */
- export function updateMetaEmbeddedFieldID(metaFields) {
+export function updateMetaEmbeddedFieldID(metaFields) {
   return metaFields.forEach((metaField) => {
     if (metaField.fieldID?.startsWith(PAGE) || metaField.fieldID?.startsWith(PAGELIST)) {
       metaField.fieldID = getFieldNameFromEmbeddedFieldName(metaField.fieldID);
@@ -65,6 +101,94 @@ export const isEmbeddedField = (field) => {
   return field?.indexOf('.') > 0;
 };
 
+/**
+ * [isPageListProperty]
+ * Description    -        checking if propertyName is pageList or not
+ * @ignore
+ * @param {string} propertyName   PropertyName
+ * @returns {boolean}  true if property is pageList else false
+ *
+ * @example <caption>Example for isPageListProperty </caption>
+ * isPageListProperty('!PL!Employees.Name') return true
+ * isPageListProperty('!P!Employees.Name') return false
+ * isPageListProperty('Name') return false
+ */
+export function isPageListProperty(propertyName) {
+  return propertyName.startsWith(PAGELIST);
+}
+
+export const isPageListInPath = (propertyName, currentClassID) => {
+  if (!propertyName.includes('.')) {
+    return false;
+  }
+  const [first, ...rest] = propertyName.split('.');
+  const metadata = PCore.getMetadataUtils().getPropertyMetadata(first, currentClassID);
+  if (metadata?.type === 'Page List') {
+    return true;
+  }
+  return isPageListInPath(rest.join('.'), metadata?.pageClass);
+};
+
+/**
+ * [getEmbeddedFieldName]
+ * Description    -               converting normal field name to embedded field starting with !P! or !PL!
+ * @ignore
+ * @param {string} propertyName   Field name
+ * @param {string} classID        classID of datapage
+ * @returns {string}              returns converted string with !P! or !PL! and :
+ *
+ * @example <caption>Example for getEmbeddedFieldName </caption>
+ * For page property, getEmbeddedFieldName('Organisation.Name') return '!P!Organisation:Name'
+ * For pageList property, getEmbeddedFieldName('Employees.Name') return '!PL!Employees:Name'
+ */
+
+export function getEmbeddedFieldName(propertyName, classID) {
+  let value = propertyName;
+  if (isPageListInPath(value, classID)) {
+    value = `!PL!${value.replace(/\./g, ':')}`;
+  } else {
+    value = `!P!${value.replace(/\./g, ':')}`;
+  }
+  return value;
+}
+
+/**
+ * [preparePropertyMaps]
+ * Description    -        preparing maps for property names and set it in dataApi context
+ * @ignore
+ * @param {Array} fields   fields array
+ * @param {string} classID  classID of datapage
+ * @param {string} context  dataApi context
+ * @returns {boolean} true if pageListProperty is present
+ */
+export function preparePropertyMaps(fields, classID, context) {
+  const { setPropertyMaps } = context;
+  const maps = fields.reduce(
+    (acc, field) => {
+      let { value } = field.config;
+      if (value.startsWith('@')) {
+        value = value.substring(value.indexOf(' ') + 1);
+        if (value[0] === '.') value = value.substring(1);
+      }
+      let name = value;
+      // Preparing name for embedded property
+      if (isEmbeddedField(name)) {
+        name = getEmbeddedFieldName(name, classID);
+      }
+      if (isPageListProperty(name) && !acc[2]) {
+        acc[2] = true;
+      }
+      acc[0][value] = name;
+      acc[1][name] = value;
+
+      return acc;
+    },
+    [{}, {}, false]
+  );
+  setPropertyMaps(maps[0], maps[1]);
+  return maps[2];
+}
+
 /**
  * [getConfigEmbeddedFieldsMeta]
  * Description    -           Get the metadata for configured embedded fields
@@ -74,7 +198,7 @@ export const isEmbeddedField = (field) => {
  * @returns {Array}           Metadata of configured embedded fields
  */
 export function getConfigEmbeddedFieldsMeta(configFields, classID) {
-  const configEmbeddedFieldsMeta:Array<any> = [];
+  const configEmbeddedFieldsMeta: Array<any> = [];
   configFields.forEach((field) => {
     let value = field;
     if (isEmbeddedField(value)) {
@@ -117,7 +241,7 @@ const oldToNewFieldTypeMapping = {
  * @ignore
  * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields.
  */
- function updateFieldType(metaFields) {
+function updateFieldType(metaFields) {
   metaFields.forEach((metaField) => {
     if (metaField.type) metaField.type = oldToNewFieldTypeMapping[metaField.type] || metaField.type;
   });
@@ -143,7 +267,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {string}  classID          Class ID from the response
  * @returns {Array}                    List of fields with updated meta objects.
  */
- function generateViewMetaData(rawFields, classID, showField) {
+function generateViewMetaData(rawFields, classID, showField) {
   return rawFields.map((item) => getDefaultViewMeta(item, classID, showField));
 }
 
@@ -157,7 +281,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {string}  classID           Class ID from the response
  * @returns {Array}                     List of all fields with their meta updated.
  */
- function getConfigFields(configFields, primaryFields, metaFields, classID) {
+function getConfigFields(configFields, primaryFields, metaFields, classID) {
   const presetConfigFields = configFields;
   const primaryFieldsViewIndex = presetConfigFields.findIndex((field) => field.config.value === 'pyPrimaryFields');
   if (!primaryFields || !primaryFields.length) {
@@ -174,9 +298,9 @@ function getPresetMetaAttribute(attribute) {
       (primaryField) =>
         !presetConfigFields.some((presetConfigField) => presetConfigField.config.value.split('.')[1] === primaryField)
     );
-    const uncommonFieldsRawMeta:Array<any> = [];
+    const uncommonFieldsRawMeta: Array<any> = [];
     uncommonFieldsList.forEach((uncommonField) => {
-      const uncommonFieldMeta= metaFields.find((metaField) => metaField.fieldID === uncommonField);
+      const uncommonFieldMeta = metaFields.find((metaField) => metaField.fieldID === uncommonField);
       if (uncommonFieldMeta) uncommonFieldsRawMeta.push(uncommonFieldMeta);
     });
     const uncommonFieldsConfigMeta = generateViewMetaData(uncommonFieldsRawMeta, classID, true);
@@ -198,7 +322,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {Array}     metaFields          List of all metafields
  * @returns {object}                        Table config object
  */
- export function getTableConfigFromPresetMeta(
+export function getTableConfigFromPresetMeta(
   presetMeta,
   isMetaWithPresets,
   getPConnect,
@@ -283,7 +407,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {object} response -
  * @returns {Set} Set of columns from the report response
  */
- function getReportColumns(response) {
+function getReportColumns(response) {
   const {
     data: { data: reportColumns }
   } = response;
@@ -307,7 +431,7 @@ function getPresetMetaAttribute(attribute) {
  *                   config.value - Raw value
  * @returns {string} value - Value with out any annotations or "."
  */
- function getConfigFieldValue(config) {
+function getConfigFieldValue(config) {
   let { value } = config;
   if (value.startsWith('@')) {
     value = value.substring(value.indexOf(' ') + 1);
@@ -342,7 +466,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {string}  fieldID      Filter
  * @returns {object}              config with its field value equal to fieldID, which means an authored field
  */
- function findAuthoredField(configFields, fieldID) {
+function findAuthoredField(configFields, fieldID) {
   return configFields.find((configField) => {
     const val = getConfigFieldValue(configField.config);
     return val === fieldID;
@@ -357,7 +481,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {object}  item        Field item to copy displayAs and category information
  * @param   {string}  classId     classID from the response
  */
- function findAndUpdateAuthoredFieldConfig(configFields, item, classId) {
+function findAndUpdateAuthoredFieldConfig(configFields, item, classId) {
   const authoredField = findAuthoredField(configFields, item.fieldID);
   if (authoredField?.config) {
     if (item.displayAs) {
@@ -389,7 +513,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {boolean} showDynamicFields Flag indicating whether fields are fetched dynamically at runtime
  * @returns {boolean}                  true If the field is an extra field else false.
  */
- function isAnExtraField(configFields, configFieldSet, reportColumnsSet, item, classId, showDynamicFields) {
+function isAnExtraField(configFields, configFieldSet, reportColumnsSet, item, classId, showDynamicFields) {
   // Is the field already present in authoring metadata?
   // Mutates config fields to copy displayAs and category information
   if (configFieldSet.has(item.fieldID)) {
@@ -413,7 +537,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {boolean} showDynamicFields Flag indicating whether fields are fetched dynamically at runtime
  * @returns {Array}                    List of extra fields with their meta updated.
  */
- function prepareExtraFields(
+function prepareExtraFields(
   metaFields,
   configFields,
   configFieldSet,
@@ -446,8 +570,8 @@ function populateRenderingOptions(name, config, field) {
   }
 }
 export function initializeColumns(
-  fields:Array<any> = [],
-  getMappedProperty:any = null
+  fields: Array<any> = [],
+  getMappedProperty: any = null
 ) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -497,9 +621,9 @@ export const getItemKey = (fields) => {
 };
 
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '') {
-  const queryFields:Array<any> = [];
+  const queryFields: Array<any> = [];
   fields.forEach((field) => {
-    const patchFields:Array<any> = [];
+    const patchFields: Array<any> = [];
     if (field.cellRenderer === 'WorkLink') {
       if (field.customObject && field.customObject.isAssignmentLink) {
         const associationName = field.name.includes(':') ? `${field.name.split(':')[0]}:` : '';
@@ -532,6 +656,23 @@ export function preparePatchQueryFields(fields, isDataObject = false, classID =
   return queryFields;
 }
 
+/**
+ * Update the renderer type for the properties of type Page.
+ */
+export function updatePageFieldsConfig(configFields, parentClassID) {
+  return configFields.forEach((item) => {
+    const {
+      type,
+      config: { value }
+    } = item;
+    const propertyName = PCore.getAnnotationUtils().getPropertyName(value);
+    if (isEmbeddedField(value) && !isPageListInPath(propertyName, parentClassID)) {
+      item.config.componentType = type;
+      item.type = 'PagePropertyRenderer';
+    }
+  });
+}
+
 export const readContextResponse = async (context, params) => {
   const {
     getPConnect,
@@ -544,7 +685,7 @@ export const readContextResponse = async (context, params) => {
   } = params;
   const { promisesResponseArray, apiContext: otherContext } = context;
   // eslint-disable-next-line sonarjs/no-unused-collection
-  const listOfComponents:Array<any> = [];
+  const listOfComponents: Array<any> = [];
   const {
     data: { fields: metaFields, classID, isQueryable }
   } = promisesResponseArray[0];
@@ -564,7 +705,7 @@ export const readContextResponse = async (context, params) => {
 
 
   if (isDataObject) {
-    const compositeKeys:Array<any> = [];
+    const compositeKeys: Array<any> = [];
     const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach((item) =>
@@ -619,13 +760,19 @@ export const readContextResponse = async (context, params) => {
       showDynamicFields
     );
 
+    if (isQueryable) {
+      updatePageFieldsConfig(configFields, classID);
+      preparePropertyMaps([...configFields, ...extraFields], classID, context);
+    }
+
+    const { getMappedProperty } = context;
 
     fields = initializeColumns(
-      [...configFields, ...extraFields],
+      [...configFields, ...extraFields], getMappedProperty
     );
     const patchQueryFields = preparePatchQueryFields(fields, isDataObject, classID);
     const itemKey = getItemKey(fields);
-    tableConfig = { fieldDefs: fields, patchQueryFields, itemKey, isQueryable}
+    tableConfig = { fieldDefs: fields, patchQueryFields, itemKey, isQueryable };
   });
   const meta = tableConfig;
   setListContext({

package/tests/assets/components/SDK-React/create/override-sdk/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -1,15 +1,14 @@
 import React from "react";
-// import type { PConnProps } from '../../../types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Can't use PConn props until proper props for createComponent in typedefs
-// interface MultiReferenceReadOnlyProps extends PConnProps {
-//   config: { referenceList: any, readonlyContextList: any },
-//   label: string,
-//   hideLabel: boolean
-// }
+interface MultiReferenceReadOnlyProps extends PConnProps {
+  config: { referenceList: any, readonlyContextList: any },
+  label: string,
+  hideLabel: boolean
+}
 
 
-export default function MultiReferenceReadOnly(props /* : MultiReferenceReadOnlyProps */) {
+export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
   const { getPConnect, label = '', hideLabel = false, config } = props;
   const { referenceList, readonlyContextList } = config;
 
@@ -29,7 +28,8 @@ export default function MultiReferenceReadOnly(props /* : MultiReferenceReadOnly
       label,
       hideLabel
     }
-  });
+  },
+  '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
    return (
     <React.Fragment>{component}</React.Fragment>

package/tests/assets/components/SDK-React/create/override-sdk/template/NarrowWideDetails/NarrowWideDetails.tsx

@@ -2,11 +2,11 @@ import React, { createElement } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { GridSize } 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 type { PConnProps } from '../../../../types/PConnProps';
 
-// Can't use PConnProps until getPConnect().getChildren() types are ok
-//  and createComponent types are ok
+// Can't use PConnProps until getPConnect().getChildren() type is ok
 // interface NarrowWideDetailsProps extends PConnProps {
 //   // If any, enter additional props that only exist on this component
 //   showLabel?: boolean,
@@ -18,6 +18,9 @@ import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemEx
 const COLUMN_WIDTHS = [4, 8];
 
 export default function NarrowWideDetails(props /* : NarrowWideDetailsProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
   const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
@@ -50,7 +53,8 @@ export default function NarrowWideDetails(props /* : NarrowWideDetailsProps */)
         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
     });
   }
 

package/tests/assets/components/SDK-React/create/override-sdk/template/NarrowWidePage/NarrowWidePage.tsx

@@ -1,6 +1,6 @@
 import React, { Children } from "react";
 // import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import NarrowWide from '@pega/react-sdk-components/lib/components/template/NarrowWide/NarrowWide';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 
 // NarrowWidePage does NOT have getPConnect. So, no need to extend from PConnProps
@@ -18,6 +18,9 @@ interface NarrowWidePageProps {
  * to the Cosmos template.
  */
 export default function NarrowWidePage(props: NarrowWidePageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NarrowWide = getComponentFromMap('NarrowWide');
+
   const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
   const childArray = Children.toArray(children);
 

package/tests/assets/components/SDK-React/create/override-sdk/template/OneColumnPage/OneColumnPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import OneColumn from '@pega/react-sdk-components/lib/components/template/OneColumn/OneColumn';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // OneColumnPage does NOT have getPConnect. So, no need to extend from PConnProps
 interface OneColumnPageProps{
@@ -13,6 +13,8 @@ interface OneColumnPageProps{
  *  and mapping to the TwoColumn template.
  */
 export default function OneColumnPage(props: OneColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const OneColumn = getComponentFromMap('OneColumn');
 
   return (
     <OneColumn

package/tests/assets/components/SDK-React/create/override-sdk/template/PromotedFilters/PromotedFilters.tsx

@@ -2,8 +2,8 @@ import React, { useCallback, useMemo, useState, createElement, Fragment } from '
 import Button from '@material-ui/core/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import './PromotedFilters.css';
 
 // import type { PConnProps } from '../../../types/PConnProps';
@@ -68,6 +68,9 @@ function isValidInput(input) {
 }
 
 export default function PromotedFilters(props /* : PromotedFilterProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const { getPConnect, viewName, filters, listViewProps, pageClass, parameters } = props;
   const [initTable, setInitTable] = useState(false);

package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTable/SimpleTable.tsx

@@ -1,6 +1,9 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react';
-import FieldGroupTemplate from '@pega/react-sdk-components/lib/components/template/FieldGroupTemplate';
-import SimpleTableManual from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTableManual';
+import { buildMetaForListView, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
+import { useRef } from 'react';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
 // import type { PConnProps } from '../../../../types/PConnProps';
 
 // Can't use SimpleTableProps until getComponentConfig() and getFieldMetadata() are NOT private
@@ -10,10 +13,30 @@ import SimpleTableManual from '@pega/react-sdk-components/lib/components/templat
 //   allowTableEdit: boolean,
 //   contextClass: any
 // }
-
+declare const PCore: any;
 
 export default function SimpleTable(props /* : SimpleTableProps */) {
-  const { getPConnect, multiRecordDisplayAs, allowTableEdit } = props;
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+  const FieldGroupTemplate = getComponentFromMap('FieldGroupTemplate');
+  const SimpleTableManual = getComponentFromMap('SimpleTableManual');
+
+  const {
+    getPConnect,
+    multiRecordDisplayAs,
+    allowTableEdit,
+    label: labelProp,
+    propertyLabel,
+    displayMode,
+    fieldMetadata,
+    hideLabel,
+    parameters,
+    isDataObject,
+    type,
+    ruleClass,
+    authorContext,
+    name
+  } = props;
 
   let { contextClass } = props;
   if (!contextClass) {
@@ -30,8 +53,68 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
   if (multiRecordDisplayAs === 'fieldGroup') {
     const fieldGroupProps = { ...props, contextClass };
     return <FieldGroupTemplate {...fieldGroupProps} />;
+  }
+
+  const label = labelProp || propertyLabel;
+  const propsToUse = { label, ...getPConnect().getInheritedProps() };
+  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
+
+  if (
+    fieldMetadata &&
+    fieldMetadata.type === 'Page List' &&
+    fieldMetadata.dataRetrievalType === 'refer'
+  ) {
+    const {
+      children: [{ children: rawFields }],
+      parameters: rawParams
+    } = getPConnect().getRawMetadata().config;
+    if (isDisplayModeEnabled && hideLabel) {
+      propsToUse.label = '';
+    }
+
+    const metaForListView = buildMetaForListView(
+      fieldMetadata,
+      rawFields,
+      type,
+      ruleClass,
+      name,
+      propsToUse.label,
+      isDataObject,
+      parameters // resolved params
+    );
+
+    const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));
+    metaForPConnect.config.parameters =
+      rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
+
+    const { referenceListStr: referenceList } = getContext(getPConnect());
+    let requiredContextForQueryInDisplayMode = {};
+    if (isDisplayModeEnabled) {
+      requiredContextForQueryInDisplayMode = {
+        referenceList
+      };
+    }
+    const options = {
+      context: getPConnect().getContextName(),
+      pageReference: getPConnect().getPageReference(),
+      ...requiredContextForQueryInDisplayMode
+    };
+
+    const refToPConnect = useRef(
+      PCore.createPConnect({ meta: metaForPConnect, options }).getPConnect
+    ).current; // getPConnect should be created only once.
+    /* BUG-637178 : need to send context */
+    const listViewProps = {
+      ...metaForListView.config,
+      getPConnect: refToPConnect,
+      displayMode,
+      fieldName: authorContext,
+      bInForm: true
+    };
+    const listViewComponent = <ListView {...listViewProps} />;
+    return listViewComponent;
   } else {
-    const simpleTableManualProps = {...props, contextClass, hideAddRow: false, hideDeleteRow: false, disableDragDrop: false};
+    const simpleTableManualProps = { ...props, contextClass };
     if (allowTableEdit === false) {
       simpleTableManualProps.hideAddRow = true;
       simpleTableManualProps.hideDeleteRow = true;

package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
-import SimpleTable from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTable';
-
-import PromotedFilters from '@pega/react-sdk-components/lib/components/template/PromotedFilters';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // import type { PConnProps } from '../../../../types/PConnProps';
 
@@ -31,6 +28,11 @@ const isSelfReferencedProperty = (param, referenceProp) => {
  * @param {*} props - props
  */
 export default function SimpleTableSelect(props /* : SimpleTableSelectProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+  const SimpleTable = getComponentFromMap('SimpleTable');
+  const PromotedFilters = getComponentFromMap('PromotedFilters');
+
   const { label, getPConnect, renderMode = '', showLabel = true, viewName = '', parameters, dataRelationshipContext = null } = props;
 
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };

package/tests/assets/components/SDK-React/create/override-sdk/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,21 +1,21 @@
-// import type { PConnProps } from '../../../types/PConnProps';
+import React from "react";
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Need to fix an error noted in comment below before typedefs will work correctly
-// interface SingleReferenceReadOnlyProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   config: any,
-//   displayAs?: string,
-//   ruleClass?: string,
-//   label?: string,
-//   displayMode?: string,
-//   type: string,
-//   referenceType?: string,
-//   hideLabel?: boolean,
-//   dataRelationshipContext?: string
-// }
+interface SingleReferenceReadOnlyProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  config: any,
+  displayAs?: string,
+  ruleClass?: string,
+  label?: string,
+  displayMode?: string,
+  type: string,
+  referenceType?: string,
+  hideLabel?: boolean,
+  dataRelationshipContext?: string
+}
 
 
-export default function SingleReferenceReadOnly(props /* : SingleReferenceReadOnlyProps */) {
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
   const {
     getPConnect,
     displayAs = '',
@@ -44,8 +44,7 @@ export default function SingleReferenceReadOnly(props /* : SingleReferenceReadOn
     };
   }
 
-  // Need to correct typedefs for createComponent for typedefs to work in this file
-  return getPConnect().createComponent({
+  const component = getPConnect().createComponent({
     type: 'SemanticLink',
     config: {
       ...config,
@@ -55,5 +54,10 @@ export default function SingleReferenceReadOnly(props /* : SingleReferenceReadOn
       hideLabel,
       dataRelationshipContext
     }
-  });
+  },
+  '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+
+  return (
+    <React.Fragment>{component}</React.Fragment>
+  )
 }