@pega/react-sdk-overrides 0.23.26 → 8.8.21

package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -5,6 +5,13 @@ import {
   Divider,
 } from '@material-ui/core';
 
+// LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface LeftAlignVerticalTabsProps {
+  // If any, enter additional props that only exist on this component
+}
+
+
 // LeftAlignVerticalTab is a specialized Tab that has styles to make it
 //  left aligned and full width of the container Tabs
 
@@ -22,6 +29,6 @@ const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
     display: 'block',
     textAlign: 'left',
   },
-}))((props) => <div><Tab {...props} /><Divider /></div>);
+}))((props: LeftAlignVerticalTabsProps) => <div><Tab {...props} /><Divider /></div>);
 
 export default LeftAlignVerticalTabs;

package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx

@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles'
 
 import Tabs from '@material-ui/core/Tabs';
-import LeftAlignVerticalTab from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// VerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
+interface VerticalTabsProps {
+  // If any, enter additional props that only exist on this component
+  tabconfig: Array<any>
+}
 
 
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)
@@ -31,9 +36,12 @@ const createCustomEvent = (eventName: string, additionalData: {[key: string]: st
 };
 
 
-export default function VerticalTabs(props) {
+export default function VerticalTabs(props: VerticalTabsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const LeftAlignVerticalTab = getComponentFromMap("LeftAlignVerticalTabs");
+
   // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig
-  const { tabconfig } = props;
+  const { tabconfig = [] } = props;
   const classes = useStyles();
   const [value, setValue] = useState(0);
 
@@ -65,11 +73,3 @@ export default function VerticalTabs(props) {
     </div>
   )
 }
-
-VerticalTabs.defaultProps = {
-  tabconfig: []
-};
-
-VerticalTabs.propTypes = {
-  tabconfig: PropTypes.arrayOf(PropTypes.object)
-};

package/lib/infra/View/View.tsx

@@ -1,16 +1,32 @@
 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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 
 // Need to import any templates that we might render
 
 import './View.css';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface ViewProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  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
@@ -29,14 +45,14 @@ const NO_HEADER_TEMPLATES = [
   'Confirmation'
 ];
 
-export default function View(props) {
+export default function View(props: 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,38 +73,12 @@ 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
@@ -139,24 +129,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) => {

package/lib/template/AppShell/AppShell.tsx

@@ -1,14 +1,32 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 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 { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import './AppShell.css';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface AppShellProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showAppName: boolean,
+  pages: Array<{
+    pxPageViewIcon: string,
+    pyClassName: string,
+    pyLabel: string,
+    pyRuleName: string,
+    pyURLContent: string,
+
+  }>,
+  caseTypes?:Array<object>,
+  children?: Array<any>,
+  portalTemplate: string,
+  portalName: string,
+  portalLogo : string,
+  navDisplayOptions: { alignment: string, position: string }
+}
 
-// 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';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -29,21 +47,27 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-declare const PCore;
+// 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:AppShellProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NavBar = getComponentFromMap("NavBar");
+  const WssNavBar = getComponentFromMap("WssNavBar");
 
-export default function AppShell(props) {
   const {
-    pages,
-    caseTypes,
+    pages = [],
+    caseTypes = [],
     showAppName,
-    children,
+    children = [],
     getPConnect,
     portalTemplate,
     portalName,
     portalLogo,
     navDisplayOptions
   } = props;
+
   const [open, setOpen] = useState(true);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   const [activeTab, setActiveTab] = useState(!pages ? null : pages[0]?.pyRuleName);
@@ -53,12 +77,13 @@ 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 localeReference = pConn.getValue('.pyLocaleReference', '');  // 2nd arg empty string until typedef marked correctly
   const [imageBlobUrl, setImageBlobUrl] = useState(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
@@ -70,7 +95,7 @@ export default function AppShell(props) {
   useEffect(() => {
     setAppName(PCore.getEnvironmentInfo().getApplicationName());
 
-    const tempMap = pConn.getChildren().map((child, index) => {
+    const tempMap: any = pConn.getChildren()?.map((child: any, index) => {
       const theChildComp = child.getPConnect().getComponentName();
       const theKey = `.${index}`;
       return (
@@ -93,11 +118,11 @@ export default function AppShell(props) {
       portalLogo.toLowerCase().includes('py-logo') ||
       portalLogo.toLowerCase().includes('py-full-logo')
     ) {
-      const portalLogoImage = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat(
+      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 {
@@ -111,7 +136,7 @@ export default function AppShell(props) {
         .catch(() => {
            // eslint-disable-next-line no-console
           console.error(
-            `Unable to load the image for the portal logo/icon with the insName:${portalLogo}`
+            `${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`
           );
         });
     }
@@ -145,7 +170,7 @@ 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,
@@ -173,19 +198,19 @@ export default function AppShell(props) {
           portalName={portalName}
           imageSrc={iconURL}
           fullImageSrc={fullIconURL}
-          appName={localeUtils.getLocaleValue(
+          appName={localizedVal(
             appNameToDisplay,
             '',
             `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
           )}
           appInfo={{
             imageSrc: iconURL,
-            appName: localeUtils.getLocaleValue(
+            appName: localizedVal(
               appNameToDisplay,
               '',
               `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
             ),
-            onClick: links[0] && links[0].onClick ? links[0].onClick : undefined
+            onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
           }}
           navLinks={links.filter((link, index) => {
             return index !== 0;
@@ -203,8 +228,13 @@ export default function AppShell(props) {
     <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>
@@ -213,16 +243,3 @@ export default function AppShell(props) {
     </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,37 @@
 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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// BannerPage does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface BannerPageProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  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: 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 +54,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,24 @@
 import React from "react";
-import PropTypes from "prop-types";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-import CaseSummaryFields from '@pega/react-sdk-components/lib/components/designSystemExtension/CaseSummaryFields';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface CaseSummaryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
+export default function CaseSummary(props: 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 { 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)
@@ -44,7 +55,3 @@ export default function CaseSummary(props) {
     </div>
   )
 }
-
-CaseSummary.propTypes = {
-  getPConnect: PropTypes.func.isRequired
-};