@pega/react-sdk-overrides 8.23.11 → 23.1.11

package/lib/infra/View/View.tsx

@@ -1,15 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-// import { FieldGroup } from "@pega/cosmos-react-core";
-// import { LazyMap as LazyComponentMap } from "../../components_map";
+import { PropsWithChildren } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Need to import any templates that we might render
 
 import './View.css';
+
+interface ViewProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  template?: string;
+  label?: string;
+  showLabel: boolean;
+  mode?: string;
+  title?: string;
+  visibility?: boolean;
+  name?: string;
+  bInForm?: boolean;
+}
+
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
 // Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -25,17 +35,18 @@ const NO_HEADER_TEMPLATES = [
   'DetailsThreeColumn',
   'NarrowWideDetails',
   'WideNarrowDetails',
-  'Confirmation'
+  'Confirmation',
+  'DynamicTabs'
 ];
 
-export default function View(props) {
+export default function View(props: PropsWithChildren<ViewProps>) {
   const { children, template, getPConnect, mode, visibility, name: pageName } = props;
-  let { label, showLabel = false } = props;
+  let { label = '', showLabel = false } = props;
 
   // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
   // Putting this logic here instead of copy/paste in every Form template index.js
 
-  const inheritedProps = getPConnect().getInheritedProps();
+  const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
   label = inheritedProps.label || label;
   showLabel = inheritedProps.showLabel || showLabel;
 
@@ -68,7 +79,11 @@ export default function View(props) {
     // console.log(`View rendering template: ${template}`);
 
     // spreading because all props should go to the template
-    let RenderedTemplate = <ViewTemplate key={key} {...props}>{children}</ViewTemplate>;
+    let RenderedTemplate = (
+      <ViewTemplate key={key} {...props}>
+        {children}
+      </ViewTemplate>
+    );
 
     if (FORMTEMPLATES.includes(template) && showLabel) {
       // Original:
@@ -112,25 +127,6 @@ export default function View(props) {
   return null;
 }
 
-View.defaultProps = {
-  label: undefined,
-  showLabel: undefined,
-  mode: undefined
-};
-
-View.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.array
-  ]) /* array might be empty */,
-  template: PropTypes.string /* .isRequired */,
-  getPConnect: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  showLabel: PropTypes.bool,
-  mode: PropTypes.string,
-  title: PropTypes.string
-};
-
 // Adapted from Constellation DX Component to add in additional props for some templates
 View.additionalProps = (state, getPConnect) => {
   const thePConn = getPConnect();

package/lib/template/AppShell/AppShell.css

@@ -1,40 +1,39 @@
 .appshell-top {
-    display: flex;
-    background-color: var(--app-background-color);
+  display: flex;
+  background-color: var(--app-background-color);
 }
 
-
 .appshell-main {
-    position: relative;
-    min-height: 100vh;
-    display: block;
-    width: 100%;
+  position: relative;
+  min-height: 100vh;
+  display: block;
+  width: 100%;
 }
 
 .psdk-icon {
-    padding: 0rem 0.125rem;
-    min-width: unset;
+  padding: 0rem 0.125rem;
+  min-width: unset;
 }
 
 .progress-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    background-color: whitesmoke;
-    position: fixed;
-    z-index: 999;
-    top: 0rem;
-    left: 0rem;
-    opacity: 0.5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: whitesmoke;
+  position: fixed;
+  z-index: 999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
 }
 
 .progress-spinner {
-    text-align: center;
+  text-align: center;
 }
 
 ::ng-deep snack-bar-container.snackbar-newline {
-    white-space: pre-line;
+  white-space: pre-line;
 }

package/lib/template/AppShell/AppShell.tsx

@@ -1,14 +1,30 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Avatar from '@material-ui/core/Avatar';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import './AppShell.css';
 
-// AppShell can emit NavBar or WssNavBar
-import NavBar from '@pega/react-sdk-components/lib/components/infra/NavBar';
-import WssNavBar from '@pega/react-sdk-components/lib/components/template/WssNavBar';
+interface AppShellProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showAppName: boolean;
+  pages: {
+    pxPageViewIcon: string;
+    pyClassName: string;
+    pyLabel: string;
+    pyRuleName: string;
+    pyURLContent: string;
+  }[];
+  caseTypes?: object[];
+  portalTemplate: string;
+  portalName: string;
+  portalLogo: string;
+  navDisplayOptions: { alignment: string; position: string };
+}
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -29,24 +45,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
-declare const PCore: any;
-
-
-export default function AppShell(props) {
-  const {
-    pages,
-    caseTypes,
-    showAppName,
-    children,
-    getPConnect,
-    portalTemplate,
-    portalName,
-    portalLogo,
-    navDisplayOptions
-  } = props;
+export default function AppShell(props: PropsWithChildren<AppShellProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NavBar = getComponentFromMap('NavBar');
+  const WssNavBar = getComponentFromMap('WssNavBar');
+
+  const { pages = [], caseTypes = [], showAppName, children = [], getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
+
   const [open, setOpen] = useState(true);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [activeTab, setActiveTab] = useState(!pages ? null : pages[0]?.pyRuleName);
   const pConn = getPConnect();
   const envInfo = PCore.getEnvironmentInfo();
@@ -54,25 +61,25 @@ export default function AppShell(props) {
   const userName = envInfo.getOperatorName();
   const currentUserInitials = Utils.getInitials(userName);
   const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
-  const portalClass = pConn.getValue('.classID');
+  const portalClass = pConn.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
   const envPortalName = envInfo.getPortalName();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   const classes = useStyles();
   const actionsAPI = pConn.getActionsApi();
-  const localeReference = pConn.getValue('.pyLocaleReference');
-  const [imageBlobUrl, setImageBlobUrl] = useState(null);
+  const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
   // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [appName, setAppName] = useState('');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [mapChildren, setMapChildren] = useState([]);
 
   // Initial setting of appName and mapChildren
   useEffect(() => {
     setAppName(PCore.getEnvironmentInfo().getApplicationName());
 
-    const tempMap = pConn.getChildren().map((child, index) => {
+    const tempMap: any = (pConn.getChildren() as any)?.map((child: any, index) => {
       const theChildComp = child.getPConnect().getComponentName();
       const theKey = `.${index}`;
       return (
@@ -95,9 +102,7 @@ export default function AppShell(props) {
       portalLogo.toLowerCase().includes('py-logo') ||
       portalLogo.toLowerCase().includes('py-full-logo')
     ) {
-      const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat(
-        'pzpega-logo-mark.svg'
-      );
+      const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
       setIconURL(portalLogoImage);
       setFullIconURL(`${Utils.getSDKStaticConentUrl()}static/py-full-logo.svg`);
     }
@@ -111,10 +116,8 @@ export default function AppShell(props) {
           setFullIconURL(data);
         })
         .catch(() => {
-           // eslint-disable-next-line no-console
-          console.error(
-            `${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`
-          );
+          // eslint-disable-next-line no-console
+          console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
   }, [portalLogo]);
@@ -153,10 +156,7 @@ export default function AppShell(props) {
           name,
           icon: page.pxPageViewIcon.replace('pi pi-', ''),
           active: page.pyRuleName === activeTab,
-          onClick: () =>
-            !page.pyURLContent || page.pyURLContent === ''
-              ? showPage(page.pyRuleName, page.pyClassName)
-              : openURL(page.pyURLContent)
+          onClick: () => (!page.pyURLContent || page.pyURLContent === '' ? showPage(page.pyRuleName, page.pyClassName) : openURL(page.pyURLContent))
         };
       });
 
@@ -175,19 +175,11 @@ export default function AppShell(props) {
           portalName={portalName}
           imageSrc={iconURL}
           fullImageSrc={fullIconURL}
-          appName={localizedVal(
-            appNameToDisplay,
-            '',
-            `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
-          )}
+          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           appInfo={{
             imageSrc: iconURL,
-            appName: localizedVal(
-              appNameToDisplay,
-              '',
-              `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
-            ),
-            onClick: links[0] && links[0].onClick ? links[0].onClick : undefined
+            appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
+            onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
           }}
           navLinks={links.filter((link, index) => {
             return index !== 0;
@@ -197,38 +189,22 @@ export default function AppShell(props) {
         />
         <div className={classes.wsscontent}>{children}</div>
       </div>
-
     );
   }
 
   return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
     <NavContext.Provider value={{ open, setOpen }}>
       <div id='AppShell' className={classes.root}>
         <NavBar
+          getPConnect={getPConnect}
           pConn={getPConnect()}
-          appName={localizedVal(
-            appNameToDisplay,
-            '',
-            `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
-          )}
+          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           pages={pages}
           caseTypes={caseTypes}
-        ></NavBar>
+        />
         <div className={classes.content}>{children}</div>
       </div>
     </NavContext.Provider>
   );
 }
-
-AppShell.defaultProps = {
-  pages: [],
-  caseTypes: [],
-  children: []
-};
-AppShell.propTypes = {
-  showAppName: PropTypes.bool /* .isRequired */,
-  pages: PropTypes.arrayOf(PropTypes.object),
-  caseTypes: PropTypes.arrayOf(PropTypes.object),
-  children: PropTypes.arrayOf(PropTypes.node),
-  getPConnect: PropTypes.func.isRequired
-};

package/lib/template/BannerPage/BannerPage.tsx

@@ -1,21 +1,35 @@
-import { useMemo, Children } from 'react';
-import PropTypes from 'prop-types';
-import Banner from '@pega/react-sdk-components/lib/components/designSystemExtension/Banner';
-import React from 'react';
+import { Children, PropsWithChildren, useMemo } 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';
+
+interface BannerPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  heading?: string;
+  message?: string;
+  imageTheme?: string;
+  backgroundImage?: string;
+  backgroundColor?: string;
+  tintImage?: boolean;
+}
 
 /*
  * BannerPage template.
  */
-export default function BannerPage(props) {
+export default function BannerPage(props: PropsWithChildren<BannerPageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const Banner = getComponentFromMap('Banner');
+
   const {
     children,
-    layout,
-    heading,
-    message,
-    imageTheme,
-    backgroundImage,
-    backgroundColor,
-    tintImage
+    layout = 'two-column',
+    heading = '',
+    message = '',
+    imageTheme = 'light',
+    backgroundImage = '',
+    backgroundColor = '',
+    tintImage = false
   } = props;
 
   const childArray = useMemo(() => {
@@ -38,24 +52,3 @@ export default function BannerPage(props) {
     />
   );
 }
-
-BannerPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  layout: PropTypes.string,
-  heading: PropTypes.string,
-  message: PropTypes.string,
-  imageTheme: PropTypes.string,
-  backgroundImage: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  tintImage: PropTypes.bool
-};
-
-BannerPage.defaultProps = {
-  layout: 'two-column',
-  heading: '',
-  message: '',
-  imageTheme: 'light',
-  backgroundImage: '',
-  backgroundColor: '',
-  tintImage: false
-};

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -1,14 +1,24 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { PropsWithChildren, ReactElement } 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';
 
-import CaseSummaryFields from '@pega/react-sdk-components/lib/components/designSystemExtension/CaseSummaryFields';
+interface CaseSummaryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
-export default function CaseSummary(props) {
   const { getPConnect, children } = props;
-  const thePConn = getPConnect();
-  const theConfigProps = thePConn.getConfigProps();
-  const { status, showStatus } = theConfigProps;
 
+  const thePConn = getPConnect();
+  const theConfigProps: any = thePConn.getConfigProps();
+  // const { status, showStatus } = theConfigProps;
+  const status = theConfigProps.status;
+  const showStatus = theConfigProps.showStatus;
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'ModalContainer';
   // from Constellation DX Components
   // get the primary and secondary fields with the raw data (which has the non-resolved property values)
   // const regionsRaw = getPConnect().getRawMetadata().children;
@@ -17,16 +27,57 @@ export default function CaseSummary(props) {
 
   // From other SDKs
   // may want to move these into useEffect/useState combo
-  let arPrimaryFields:Array<any> = [];
-  let arSecondaryFields:Array<any> = [];
+  let arPrimaryFields: any[] = [];
+  let arSecondaryFields: any[] = [];
+
+  /* eslint-disable @typescript-eslint/no-shadow */
+  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
 
-  for (const child of children) {
-    const childPConn = child.props.getPConnect();
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  function prepareCaseSummaryData(summaryFieldChildren) {
+    const convertChildrenToSummaryData = kid => {
+      return kid?.map((childItem, index) => {
+        const childMeta = childItem.getPConnect().meta;
+        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        caseSummaryComponentObject.id = index + 1;
+        return caseSummaryComponentObject;
+      });
+    };
+    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
+  }
+
+  for (const child of children as ReactElement[]) {
+    const childPConn = (child as ReactElement).props.getPConnect();
     const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
-    if (childPConnData.name.toLowerCase() === "primary fields") {
+    if (childPConnData.name.toLowerCase() === 'primary fields') {
       arPrimaryFields = childPConnData.children;
-    } else if (childPConnData.name.toLowerCase() === "secondary fields") {
+      arPrimaryFields.forEach(field => {
+        if (field.config?.value && typeof field.config?.value === 'string') {
+          field.config.value = localizedVal(field.config.value, localeCategory);
+        }
+      });
+    } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
+      const secondarySummaryFields = prepareCaseSummaryData(childPConn);
       arSecondaryFields = childPConnData.children;
+      arSecondaryFields.forEach((field, index) => {
+        field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
+      });
     }
   }
 
@@ -38,13 +89,9 @@ export default function CaseSummary(props) {
   // console.log(`CaseSummary: arSecondaryFields: ${JSON.stringify(arSecondaryFields)}`);
 
   return (
-    <div id="CaseSummary">
+    <div id='CaseSummary'>
       <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>
-  )
+  );
 }
-
-CaseSummary.propTypes = {
-  getPConnect: PropTypes.func.isRequired
-};

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

@@ -4,6 +4,5 @@
   "description": "Case summary template",
   "type": "Template",
   "subtype": "SUMMARY",
-  "properties": [
-  ]
+  "properties": []
 }