@pega/react-sdk-overrides 0.23.26 → 8.8.20

package/lib/template/PromotedFilters/PromotedFilters.tsx

@@ -1,13 +1,25 @@
 import React, { useCallback, useMemo, useState, createElement, Fragment } from 'react';
-import PropTypes from 'prop-types';
 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 Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+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';
 
-declare const PCore;
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// Can't use PromotedFilterProps until getContainerManager() knows about addTransientItem
+//  Currently just expects "object"
+// interface PromotedFilterProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   viewName: string,
+//   filters: Array<any>,
+//   listViewProps: any,
+//   pageClass: string,
+//   parameters?: object
+// }
+
+
 const localeCategory = 'SimpleTable';
 const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
   'TextInput',
@@ -55,7 +67,10 @@ function isValidInput(input) {
   return Object.values(input).findIndex((v) => v) >= 0;
 }
 
-export default function PromotedFilters(props) {
+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);
@@ -112,7 +127,7 @@ export default function PromotedFilters(props) {
           dataViewParameters: parameters
         };
 
-        if (!Utils.isEmptyObject(promotedFilters)) {
+        if (!isEmptyObject(promotedFilters)) {
           Query.query = { filter: { filterConditions: promotedFilters } };
         }
         setPayload(Query);
@@ -135,10 +150,10 @@ export default function PromotedFilters(props) {
       </div>
       <div>
         <Button key='1' type='button' onClick={clearFilterData} data-testid='clear' variant='contained' color='primary'>
-            {localizedVal('Clear', localeCategory)}
+          {localizedVal('Clear', localeCategory)}
         </Button>
         <Button style={{float: 'right'}} key='2' type='submit' onClick={getFilterData} data-testid='search' variant='contained' color='primary'>
-            {localizedVal('Search', localeCategory)}
+          {localizedVal('Search', localeCategory)}
         </Button>
       </div>
       {initTable && <ListView {...listViewProps} title='' payload={payload}
@@ -150,12 +165,3 @@ export default function PromotedFilters(props) {
     </Fragment>
   );
 }
-
-PromotedFilters.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  viewName: PropTypes.string.isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  listViewProps: PropTypes.objectOf(PropTypes.any).isRequired,
-  pageClass: PropTypes.string.isRequired,
-  parameters: PropTypes.object
-};

package/lib/template/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -1,23 +1,120 @@
+/* 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
+// interface SimpleTableProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   multiRecordDisplayAs: string,
+//   allowTableEdit: boolean,
+//   contextClass: any
+// }
 declare const PCore: any;
 
-export default function SimpleTable(props) {
-  const { getPConnect, multiRecordDisplayAs, allowTableEdit } = props;
+export default function SimpleTable(props /* : SimpleTableProps */) {
+  // 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) {
     let listName = getPConnect().getComponentConfig().referenceList;
     listName = PCore.getAnnotationUtils().getPropertyName(listName);
-    contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
+    // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
+    const theFieldMetadata = getPConnect().getFieldMetadata(listName);
+    if (theFieldMetadata) {
+      contextClass = theFieldMetadata['pageClass'];
+    } else {
+      contextClass = undefined;
+    }
   }
   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};
+    const simpleTableManualProps = { ...props, contextClass };
     if (allowTableEdit === false) {
       simpleTableManualProps.hideAddRow = true;
       simpleTableManualProps.hideDeleteRow = true;

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -31,6 +31,26 @@ import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface SimpleTableManualProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  hideAddRow?: boolean,
+  hideDeleteRow?: boolean,
+  // eslint-disable-next-line react/no-unused-prop-types
+  disableDragDrop?: boolean
+  referenceList?: Array<any>,
+  children?: Array<any>,
+  renderMode?: string,
+  presets?: Array<any>,
+  label?: string,
+  showLabel?: boolean,
+  dataPageName?: string,
+  contextClass?: string,
+  propertyLabel?: string,
+  fieldMetadata?: any
+}
+
 const useStyles = makeStyles((/* theme */) => ({
   label: {
     margin: '8px'
@@ -58,7 +78,6 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-declare const PCore: any;
 
 let menuColumnId = '';
 let menuColumnType = '';
@@ -66,7 +85,9 @@ let menuColumnLabel = '';
 
 const filterByColumns: Array<any> = [];
 let myRows: Array<any>;
-export default function SimpleTableManual(props) {
+
+
+export default function SimpleTableManual(props: SimpleTableManualProps) {
   const classes = useStyles();
   const {
     getPConnect,
@@ -113,7 +134,7 @@ export default function SimpleTableManual(props) {
   const resolvedList = getReferenceList(pConn);
   const pageReference = `${pConn.getPageReference()}${resolvedList}`;
   pConn.setReferenceList(resolvedList);
-  const menuIconOverride$ = Utils.getImageSrc('trash', PCore.getAssetLoader().getStaticServerUrl());
+  const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
   const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
   // NOTE: props has each child.config with datasource and value undefined
@@ -186,8 +207,8 @@ export default function SimpleTableManual(props) {
   };
 
   function generateRowsData() {
-    // if dataPageName property value exists then make a datapage fetch call and get the list of data.
-    if (dataPageName) {
+    // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
+    if (!referenceList.length && dataPageName) {
       getDataPage(dataPageName, parameters, context).then(listData => {
         const data = formatRowsData(listData);
         myRows = data;
@@ -231,7 +252,7 @@ export default function SimpleTableManual(props) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, '');  // 3rd arg null until typedef marked correctly as optional
     }
   };
 
@@ -239,7 +260,7 @@ export default function SimpleTableManual(props) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().deleteEntry(index, pageReference);
     } else {
-      pConn.getListActions().deleteEntry(index);
+      pConn.getListActions().deleteEntry(index, '');  // 2nd arg empty string until typedef marked correctly as optional
     }
   };
 

package/lib/template/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,21 +1,39 @@
-import PropTypes from 'prop-types';
 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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../../types/PConnProps';
+
+// Need to fix an error noted in comment below before typedefs will work correctly
+// interface SimpleTableSelectProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   label: string,
+//   referenceList: Array<object> | string,
+//   renderMode: string,
+//   showLabel: boolean,
+//   promptedFilters: Array<object>,
+//   viewName: string,
+//   parameters: any,
+//   readonlyContextList: Array<object> | string,
+//   dataRelationshipContext: string
+// }
 
-import PromotedFilters from '@pega/react-sdk-components/lib/components/template/PromotedFilters';
 
 const isSelfReferencedProperty = (param, referenceProp) => {
   const [, parentPropName] = param.split('.');
   return parentPropName === referenceProp;
 };
-declare const PCore;
+
 /**
  * SimpleTable react component
  * @param {*} props - props
  */
-export default function SimpleTableSelect(props) {
-  const { label, getPConnect, renderMode, showLabel, viewName, parameters, dataRelationshipContext } = 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() };
   if (propsToUse.showLabel === false) {
@@ -40,6 +58,7 @@ export default function SimpleTableSelect(props) {
     contextPageReference = pageReference.concat('.').concat(referenceProp);
   }
 
+  // Need to get this written so typedefs work
   const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
     ? pConn.getFieldMetadata(`@P .${referenceProp}`)
     : pConn.getCurrentPageFieldMetadata(contextPageReference);
@@ -104,27 +123,3 @@ export default function SimpleTableSelect(props) {
   }
   return <ListView {...listViewProps} />;
 }
-
-SimpleTableSelect.defaultProps = {
-  label: undefined,
-  renderMode: '',
-  showLabel: true,
-  promptedFilters: [],
-  viewName: '',
-  parameters: undefined,
-  readonlyContextList: [],
-  dataRelationshipContext: null
-};
-
-SimpleTableSelect.propTypes = {
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  referenceList: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]).isRequired,
-  renderMode: PropTypes.string,
-  showLabel: PropTypes.bool,
-  promptedFilters: PropTypes.arrayOf(PropTypes.object),
-  viewName: PropTypes.string,
-  parameters: PropTypes.objectOf(PropTypes.any),
-  readonlyContextList: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]),
-  dataRelationshipContext: PropTypes.string
-};

package/lib/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,18 +1,35 @@
-import PropTypes from "prop-types";
+import React from "react";
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-export default function SingleReferenceReadOnly(props) {
+// 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
+}
+
+
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
   const {
     getPConnect,
-    displayAs,
-    ruleClass,
-    label,
-    type,
-    displayMode,
-    referenceType,
-    hideLabel,
-    dataRelationshipContext,
+    displayAs = '',
+    ruleClass = '',
+    label = '',
+    type = '',
+    displayMode = '',
+    referenceType = '',
+    hideLabel = false,
+    dataRelationshipContext = null,
     config
   } = props;
+
   const editableComponents = ["AutoComplete", "SimpleTableSelect", "Dropdown"];
 
   if (editableComponents.includes(type)) {
@@ -28,7 +45,7 @@ export default function SingleReferenceReadOnly(props) {
     };
   }
 
-  return getPConnect().createComponent({
+  const component = getPConnect().createComponent({
     type: 'SemanticLink',
     config: {
       ...config,
@@ -38,29 +55,10 @@ export default function SingleReferenceReadOnly(props) {
       hideLabel,
       dataRelationshipContext
     }
-  });
-}
-
-SingleReferenceReadOnly.defaultProps = {
-  displayAs: "",
-  ruleClass: "",
-  label: "",
-  displayMode: "",
-  type: "",
-  referenceType: "",
-  hideLabel: false,
-  dataRelationshipContext: null
-};
+  },
+  null, null, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
 
-SingleReferenceReadOnly.propTypes = {
-  config: PropTypes.object,
-  getPConnect: PropTypes.func.isRequired,
-  displayAs: PropTypes.string,
-  ruleClass: PropTypes.string,
-  label: PropTypes.string,
-  displayMode: PropTypes.string,
-  type: PropTypes.string,
-  referenceType: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  dataRelationshipContext: PropTypes.string
-};
+  return (
+    <React.Fragment>{component}</React.Fragment>
+  )
+}

package/lib/template/SubTabs/SubTabs.tsx

@@ -1,11 +1,18 @@
 import React, { Fragment, useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import { Tab, Tabs } from "@material-ui/core";
 import { TabContext, TabPanel } from '@material-ui/lab';
 import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
 
-export default function SubTabs(props) {
-  const { children } = props;
+// SubTabs does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface SubTabsProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
+export default function SubTabs(props: SubTabsProps) {
+  const { children = [] } = props;
 
   const defaultTabIndex = 0;
   const deferLoadedTabs = children[0];
@@ -55,11 +62,3 @@ export default function SubTabs(props) {
     </Fragment>
   );
 }
-
-SubTabs.defaultProps = {
-   children: []
-}
-
-SubTabs.propTypes = {
-   children: PropTypes.arrayOf(PropTypes.node)
-};

package/lib/template/SubTabs/tabUtils.ts

@@ -1,6 +1,4 @@
 
-declare const PCore;
-
 export const getDeferFriendlyTabs = allTabs => {
   return allTabs.map(tab => {
     const theTabCompConfig = tab.getPConnect().getConfigProps();

package/lib/template/TwoColumn/TwoColumn/TwoColumn.tsx

@@ -1,8 +1,15 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Grid, GridSize } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 
+// TwoColumn does NOT have getPConnect. So, no need to extend from PConnProps
+interface TwoColumnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  templateCol?: string
+}
+
+
 const useStyles = makeStyles(() => ({
   colStyles: {
     display: "grid",
@@ -11,10 +18,10 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export default function TwoColumn(props) {
+export default function TwoColumn(props: TwoColumnProps) {
   const classes = useStyles();
 
- const {children, templateCol} = props;
+ const {children, templateCol = '1fr 1fr' } = props;
 
  if (children.length !== 2) {
   // eslint-disable-next-line no-console
@@ -44,15 +51,3 @@ export default function TwoColumn(props) {
    </Grid>
  )
 }
-
-TwoColumn.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // title: PropTypes.string,
-  templateCol: PropTypes.string,
-  // icon: PropTypes.string
-};
-
-TwoColumn.defaultProps = {
-  templateCol: "1fr 1fr",
-  // icon: ""
-};

package/lib/template/TwoColumn/TwoColumnPage/TwoColumnPage.tsx

@@ -1,13 +1,20 @@
 import React from "react";
-import PropTypes from "prop-types";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// TwoColumnPage does NOT have getPConnect. So, no need to extend from PConnProps
+interface TwoColumnPageProps{
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
 
-import TwoColumn from '@pega/react-sdk-components/lib/components/template/TwoColumn/TwoColumn';
 
 /*
  * The wrapper handles knowing how to take in just children
  *  and mapping to the TwoColumn template.
  */
-export default function TwoColumnPage(props) {
+export default function TwoColumnPage(props: TwoColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TwoColumn = getComponentFromMap('TwoColumn');
 
   return (
     <TwoColumn
@@ -15,10 +22,3 @@ export default function TwoColumnPage(props) {
     />
   );
 }
-
-TwoColumnPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-TwoColumnPage.defaultProps = {
-};

package/lib/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx

@@ -1,8 +1,15 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Grid, GridSize } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 
+// TwoColumnTab does NOT have getPConnect. So, no need to extend from PConnProps
+interface TwoColumnTabProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  templateCol?: string
+}
+
+
 const useStyles = makeStyles(() => ({
   colStyles: {
     display: "grid",
@@ -11,10 +18,10 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export default function TwoColumnTab(props) {
+export default function TwoColumnTab(props:TwoColumnTabProps) {
   const classes = useStyles();
 
- const {children, templateCol} = props;
+ const {children, templateCol = '1fr 1fr'} = props;
 
  if (children.length !== 2) {
   // eslint-disable-next-line no-console
@@ -44,12 +51,3 @@ export default function TwoColumnTab(props) {
    </Grid>
  )
 }
-
-TwoColumnTab.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  templateCol: PropTypes.string,
-};
-
-TwoColumnTab.defaultProps = {
-  templateCol: "1fr 1fr",
-};

package/lib/template/WideNarrow/WideNarrow/WideNarrow.tsx

@@ -1,10 +1,24 @@
 import React from "react";
-
 import './WideNarrow.css';
 
-export default function WideNarrow(props) {
+// WideNarrow does NOT have getPConnect. So, no need to extend from PConnProps
+interface WideNarrowProps {
+  // If any, enter additional props that only exist on this component
+  a: any,
+  b: any,
+  children?: Array<any>,
+  // eslint-disable-next-line react/no-unused-prop-types
+  title?: string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  cols?: string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  icon?: string
+}
+
+
+export default function WideNarrow(props: WideNarrowProps) {
   // const {a, b /*, cols, icon, title */ } = props;
-  const { a, b, children } = props;
+  const { a, b, children = [] } = props;
 
   return (
     <React.Fragment>