@pega/react-sdk-overrides 0.23.26 → 0.23.27

package/lib/infra/View/View.tsx

@@ -1,16 +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 { SdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import ErrorBoundary from '@pega/react-sdk-components/lib/components/infra/ErrorBoundary';
+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
@@ -26,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;
 
@@ -57,45 +67,23 @@ export default function View(props) {
   //  JA - React SDK not using LazyComponentMap yet
   if (template /* && LazyComponentMap[template] */) {
     // const ViewTemplate = LazyComponentMap[template];
-    let ViewTemplate: any;
-
-    if (SdkComponentMap) {
-      // This is the node_modules version of react_pconnect!
-      const theLocalComponent = SdkComponentMap.getLocalComponentMap()[template];
-      if (theLocalComponent !== undefined) {
-        // eslint-disable-next-line no-console
-        console.log(`View component found ${template}: Local`);
-        ViewTemplate = theLocalComponent;
-      } else {
-        const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[template];
-        if (thePegaProvidedComponent !== undefined) {
-          // console.log(`View component found ${template}: Pega-provided`);
-          ViewTemplate = thePegaProvidedComponent;
-        } else {
-          // eslint-disable-next-line no-console
-          console.error(`View component can't find template type ${template}`);
-          ViewTemplate = ErrorBoundary;
-        }
-      }
-
-      if (template === 'ListView') {
-        // special case for ListView - add in a prop
-        const bInForm = true;
-        props = { ...props, bInForm };
-      }
-    } else {
-      // eslint-disable-next-line no-console
-      console.warn(`View: SdkComponentMap expected but not found.`);
-
-      // eslint-disable-next-line no-console
-      console.error(`View: Trying to render an unknown template: ${template}`);
+    const ViewTemplate: any = getComponentFromMap(template);
+
+    if (template === 'ListView') {
+      // special case for ListView - add in a prop
+      const bInForm = true;
+      props = { ...props, bInForm };
     }
 
     // for debugging/investigation
     // 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:
@@ -139,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,23 +45,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-declare const PCore;
-
-
-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();
@@ -53,24 +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 localeUtils = PCore.getLocaleUtils();
+  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 (
@@ -93,11 +102,9 @@ export default function AppShell(props) {
       portalLogo.toLowerCase().includes('py-logo') ||
       portalLogo.toLowerCase().includes('py-full-logo')
     ) {
-      const portalLogoImage = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat(
-        'pzpega-logo-mark.svg'
-      );
+      const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
       setIconURL(portalLogoImage);
-      setFullIconURL(`${PCore.getAssetLoader().getStaticServerUrl()}static/py-full-logo.svg`);
+      setFullIconURL(`${Utils.getSDKStaticConentUrl()}static/py-full-logo.svg`);
     }
     // not using default icon to fetch it using the way which uses authentication
     else {
@@ -109,10 +116,8 @@ export default function AppShell(props) {
           setFullIconURL(data);
         })
         .catch(() => {
-           // eslint-disable-next-line no-console
-          console.error(
-            `Unable to load the image for the portal logo/icon with the insName:${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]);
@@ -145,16 +150,13 @@ export default function AppShell(props) {
   const links = !pages
     ? []
     : pages.map(page => {
-        const name = localeUtils.getLocaleValue(page.pyLabel, '', localeReference);
+        const name = localizedVal(page.pyLabel, '', localeReference);
         return {
           text: name,
           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))
         };
       });
 
@@ -173,19 +175,11 @@ export default function AppShell(props) {
           portalName={portalName}
           imageSrc={iconURL}
           fullImageSrc={fullIconURL}
-          appName={localeUtils.getLocaleValue(
-            appNameToDisplay,
-            '',
-            `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
-          )}
+          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           appInfo={{
             imageSrc: iconURL,
-            appName: localeUtils.getLocaleValue(
-              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;
@@ -195,34 +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={appNameToDisplay}
+          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,13 +1,22 @@
-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 theConfigProps: any = thePConn.getConfigProps();
+  // const { status, showStatus } = theConfigProps;
+  const status = theConfigProps.status;
+  const showStatus = theConfigProps.showStatus;
 
   // from Constellation DX Components
   // get the primary and secondary fields with the raw data (which has the non-resolved property values)
@@ -17,15 +26,15 @@ 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[] = [];
 
-  for (const child of children) {
-    const childPConn = child.props.getPConnect();
+  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") {
+    } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
       arSecondaryFields = childPConnData.children;
     }
   }
@@ -38,13 +47,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": []
 }