@pega/react-sdk-overrides 8.8.21 → 8.23.11-debug

package/lib/infra/NavBar/NavBar.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import './NavBar.css';
 import {
@@ -34,23 +35,14 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
 
-
-interface NavBarProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  // eslint-disable-next-line react/no-unused-prop-types
-  appName?: string,
-  pages?: Array<any>,
-  caseTypes: Array<any>,
-  pConn?: any
-}
+declare const PCore: typeof PCoreType;
 
 
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
-  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
-  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />
+  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />
 };
 
 const drawerWidth = 300;
@@ -106,8 +98,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function NavBar(props: NavBarProps) {
-  const { pConn, pages = [], caseTypes = [] } = props;
+export default function NavBar(props) {
+  const { pConn, pages, caseTypes } = props;
 
   const classes = useStyles();
   const theme = useTheme();
@@ -300,3 +292,18 @@ export default function NavBar(props: NavBarProps) {
     </Drawer>
   );
 }
+
+NavBar.defaultProps = {
+  pConn: null,
+  appName: '',
+  pages: [],
+  caseTypes: []
+};
+
+NavBar.propTypes = {
+  pConn: PropTypes.object,
+  // eslint-disable-next-line react/no-unused-prop-types
+  appName: PropTypes.string,
+  pages: PropTypes.arrayOf(PropTypes.object),
+  caseTypes: PropTypes.arrayOf(PropTypes.object)
+};

package/lib/infra/Reference/Reference.tsx

@@ -1,18 +1,8 @@
 import React from "react";
+import PropTypes from "prop-types";
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface ReferenceProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  visibility?: boolean,
-  context?: string,
-  readOnly?: boolean,
-  displayMode?: string
-}
-
-
-export default function Reference(props: ReferenceProps) {
-  const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
+export default function Reference(props) {
+  const { visibility, context, getPConnect, readOnly, displayMode } = props;
 
   const pConnect = getPConnect();
   const referenceConfig = { ...pConnect.getComponentConfig() } || {};
@@ -51,3 +41,18 @@ export default function Reference(props: ReferenceProps) {
   }
   return null;
 }
+
+Reference.defaultProps = {
+  visibility: true,
+  context: null,
+  readOnly: false,
+  displayMode: null
+};
+
+Reference.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  visibility: PropTypes.bool,
+  context: PropTypes.string,
+  readOnly: PropTypes.bool,
+  displayMode: PropTypes.string
+};

package/lib/infra/Region/Region.tsx

@@ -1,13 +1,7 @@
 import React from "react";
+import PropTypes from "prop-types";
 
-// Region does NOT have getPConnect. So, no need to extend from PConnProps
-interface RegionProps {
-  // If any, enter additional props that only exist on this component
-  children: Array<any>
-}
-
-
-export default function Region(props: RegionProps) {
+export default function Region(props) {
   const { children } = props;
 
   return <React.Fragment>
@@ -17,3 +11,7 @@ export default function Region(props: RegionProps) {
     </>
   </React.Fragment>;
 }
+
+Region.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired
+};

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useRef, useState, useEffect, useContext, createElement } from "react";
 // import { Banner, ModalManager } from "@pega/cosmos-react-core";
+import PropTypes, { object } from "prop-types";
 import isEqual from 'lodash.isequal';
 // import ReAuthMessageModal from "../ReAuthenticationModal";
 import { Box, CircularProgress } from "@material-ui/core";
@@ -8,18 +9,6 @@ import { LazyMap as LazyComponentMap } from "@pega/react-sdk-components/lib/comp
 import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 
-// import type { PConnProps } from '../../../types/PConnProps';
-
-// Can't use RootContainerProps until getChildren() typedef is fixes to not return an array of 'never'
-// interface RootContainerProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   renderingMode?: string,
-//   routingInfo: { type: string, accessedOrder: Array<any>, items: any },
-//   children: Array<any>,
-//   skeleton: any,
-//   httpMessages: Array<any>
-// }
-
 // Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
 declare const PCore: any;
 
@@ -59,13 +48,13 @@ function getItemView(routingInfo, renderingMode) {
   return viewConfigs;
 }
 
-export default function RootContainer(props /* : RootContainerProps */) {
+const RootContainer = (props) => {
   const {
     getPConnect,
-    renderingMode = '',
-    children = [],
+    renderingMode,
+    children,
     skeleton,
-    httpMessages = [],
+    httpMessages,
     routingInfo
   } = props;
 
@@ -275,3 +264,23 @@ export default function RootContainer(props /* : RootContainerProps */) {
     );
   }
 };
+
+RootContainer.defaultProps = {
+  getPConnect: null,
+  renderingMode: null,
+  children: null,
+  routingInfo: object
+};
+
+RootContainer.propTypes = {
+  getPConnect: PropTypes.func,
+  renderingMode: PropTypes.string,
+  routingInfo: PropTypes.shape({
+    type: PropTypes.string,
+    accessedOrder: PropTypes.array,
+    items: PropTypes.object
+  }),
+  children: PropTypes.arrayOf(PropTypes.oneOfType( [PropTypes.object, PropTypes.string ]))
+};
+
+export default RootContainer;

package/lib/infra/Stages/Stages.tsx

@@ -1,16 +1,9 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { Breadcrumbs, Card, Typography } from "@material-ui/core";
 import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
 import DoneIcon from '@material-ui/icons/Done';
 import { makeStyles } from '@material-ui/core/styles';
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-
-interface StagesProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  stages: Array<any>
-}
-
 
 // Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
 declare const PCore: any;
@@ -64,7 +57,7 @@ function getFilteredStages(stages) {
 
 /* TODO - this component should be refactored and not exposed as top level DX Component -
   the stages should be created as part of the CaseView */
-export default function Stages(props: StagesProps) {
+export default function Stages(props) {
   const classes = useStyles();
 
   const { getPConnect, stages } = props;
@@ -73,7 +66,7 @@ export default function Stages(props: StagesProps) {
 
 
   const filteredStages = getFilteredStages(stages);
-  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, '');  // 2nd arg empty string until typedef allows optional
+  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID);
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
@@ -123,3 +116,8 @@ export default function Stages(props: StagesProps) {
     </Card>
   )
 }
+
+Stages.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  stages: PropTypes.arrayOf(PropTypes.object).isRequired
+};

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

@@ -5,13 +5,6 @@ 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
 
@@ -29,6 +22,6 @@ const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
     display: 'block',
     textAlign: 'left',
   },
-}))((props: LeftAlignVerticalTabsProps) => <div><Tab {...props} /><Divider /></div>);
+}))((props) => <div><Tab {...props} /><Divider /></div>);
 
 export default LeftAlignVerticalTabs;

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

@@ -1,14 +1,9 @@
 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 { 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>
-}
+import LeftAlignVerticalTab from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs';
 
 
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)
@@ -36,12 +31,9 @@ const createCustomEvent = (eventName: string, additionalData: {[key: string]: st
 };
 
 
-export default function VerticalTabs(props: VerticalTabsProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const LeftAlignVerticalTab = getComponentFromMap("LeftAlignVerticalTabs");
-
+export default function VerticalTabs(props) {
   // 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);
 
@@ -73,3 +65,11 @@ export default function VerticalTabs(props: VerticalTabsProps) {
     </div>
   )
 }
+
+VerticalTabs.defaultProps = {
+  tabconfig: []
+};
+
+VerticalTabs.propTypes = {
+  tabconfig: PropTypes.arrayOf(PropTypes.object)
+};

package/lib/infra/View/View.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 // import { FieldGroup } from "@pega/cosmos-react-core";
 // import { LazyMap as LazyComponentMap } from "../../components_map";
 
@@ -9,24 +10,6 @@ import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/
 // 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
@@ -45,14 +28,14 @@ const NO_HEADER_TEMPLATES = [
   'Confirmation'
 ];
 
-export default function View(props: ViewProps) {
+export default function View(props) {
   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: any = getPConnect().getInheritedProps();  // try to remove any when getInheritedProps typedefs are fixed
+  const inheritedProps = getPConnect().getInheritedProps();
   label = inheritedProps.label || label;
   showLabel = inheritedProps.showLabel || showLabel;
 
@@ -129,6 +112,24 @@ export default function View(props: ViewProps) {
   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,32 +1,14 @@
 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: {
@@ -51,23 +33,18 @@ const useStyles = makeStyles(theme => ({
 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);
@@ -77,13 +54,13 @@ export default function AppShell(props:AppShellProps) {
   const userName = envInfo.getOperatorName();
   const currentUserInitials = Utils.getInitials(userName);
   const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
-  const portalClass = pConn.getValue('.classID', '');  // 2nd arg empty string until typedef marked correctly
+  const portalClass = pConn.getValue('.classID');
   const envPortalName = envInfo.getPortalName();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   const classes = useStyles();
   const actionsAPI = pConn.getActionsApi();
-  const localeReference = pConn.getValue('.pyLocaleReference', '');  // 2nd arg empty string until typedef marked correctly
+  const localeReference = pConn.getValue('.pyLocaleReference');
   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
@@ -95,7 +72,7 @@ export default function AppShell(props:AppShellProps) {
   useEffect(() => {
     setAppName(PCore.getEnvironmentInfo().getApplicationName());
 
-    const tempMap: any = pConn.getChildren()?.map((child: any, index) => {
+    const tempMap = pConn.getChildren().map((child, index) => {
       const theChildComp = child.getPConnect().getComponentName();
       const theKey = `.${index}`;
       return (
@@ -210,7 +187,7 @@ export default function AppShell(props:AppShellProps) {
               '',
               `${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;
@@ -228,7 +205,6 @@ export default function AppShell(props:AppShellProps) {
     <NavContext.Provider value={{ open, setOpen }}>
       <div id='AppShell' className={classes.root}>
         <NavBar
-          getPConnect={getPConnect}
           pConn={getPConnect()}
           appName={localizedVal(
             appNameToDisplay,
@@ -243,3 +219,16 @@ export default function AppShell(props:AppShellProps) {
     </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,37 +1,21 @@
 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: BannerPageProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const Banner = getComponentFromMap('Banner');
-
+export default function BannerPage(props) {
   const {
     children,
-    layout = 'two-column',
-    heading = '',
-    message = '',
-    imageTheme = 'light',
-    backgroundImage = '',
-    backgroundColor = '',
-    tintImage = false
+    layout,
+    heading,
+    message,
+    imageTheme,
+    backgroundImage,
+    backgroundColor,
+    tintImage
   } = props;
 
   const childArray = useMemo(() => {
@@ -54,3 +38,24 @@ export default function BannerPage(props: BannerPageProps) {
     />
   );
 }
+
+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,24 +1,13 @@
 import React from "react";
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import PropTypes from "prop-types";
 
-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');
+import CaseSummaryFields from '@pega/react-sdk-components/lib/components/designSystemExtension/CaseSummaryFields';
 
+export default function CaseSummary(props) {
   const { getPConnect, children } = props;
   const thePConn = getPConnect();
   const theConfigProps = thePConn.getConfigProps();
-  // const { status, showStatus } = theConfigProps;
-  const status = theConfigProps["status"];
-  const showStatus = theConfigProps["showStatus"];
+  const { status, showStatus } = theConfigProps;
 
   // from Constellation DX Components
   // get the primary and secondary fields with the raw data (which has the non-resolved property values)
@@ -55,3 +44,7 @@ export default function CaseSummary(props: CaseSummaryProps) {
     </div>
   )
 }
+
+CaseSummary.propTypes = {
+  getPConnect: PropTypes.func.isRequired
+};