@pega/react-sdk-overrides 0.23.25 → 0.23.27

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

@@ -1,14 +1,25 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
-import Grid from '@material-ui/core/Grid';
-import { GridSize } from '@material-ui/core/Grid';
+import { createElement } from 'react';
+import Grid, { GridSize } from '@material-ui/core/Grid';
+
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface WideNarrowDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel?: boolean;
+  label?: string;
+  showHighlightedData?: boolean;
+}
 
 const COLUMN_WIDTHS = [8, 4];
 
-export default function WideNarrowDetails(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -17,20 +28,23 @@ export default function WideNarrowDetails(props) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = getPConnect()
-    .getChildren()
-    .map((configObject, index) =>
-      createElement(createPConnectComponent(), {
-        ...configObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-      })
-    );
+  const children = (getPConnect().getChildren() as any[])?.map((configObject, index) => {
+    let theConfigObject: object = configObject;
+    if (!theConfigObject) {
+      theConfigObject = {};
+    }
+
+    return createElement(createPConnectComponent(), {
+      ...theConfigObject,
+      // eslint-disable-next-line react/no-array-index-key
+      key: index.toString()
+    });
+  });
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map(field => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 
@@ -40,12 +54,17 @@ export default function WideNarrowDetails(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
+  let theName = '';
+  if (propsToUse?.showLabel && propsToUse.label) {
+    theName = propsToUse.label;
+  }
+
   return (
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+    <FieldGroup name={theName}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
         <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
@@ -56,7 +75,7 @@ export default function WideNarrowDetails(props) {
         </Grid>
       )}
       <Grid container spacing={1}>
-        {children.map((child, i) => (
+        {children?.map((child, i) => (
           <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
             {child}
           </Grid>
@@ -65,16 +84,3 @@ export default function WideNarrowDetails(props) {
     </FieldGroup>
   );
 }
-
-WideNarrowDetails.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-WideNarrowDetails.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/WideNarrow/WideNarrowDetails/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Details (Wide-narrow) template",
   "type": "Template",
   "subtype": "DETAILS",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/WideNarrow/WideNarrowForm/WideNarrowForm.css

@@ -9,7 +9,6 @@
   float: left;
   padding: 0rem 0.3125rem 0rem 0rem;
   height: 100%;
-
 }
 
 .psd-wide-narrow-column .psdk-wide-column-column {
@@ -17,5 +16,4 @@
   float: left;
   padding: 0rem 0rem 0rem 0.3125rem;
   height: 100%;
-
 }

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

@@ -1,24 +1,22 @@
-import React from "react";
-
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrowForm.css';
 
-export default function WideNarrowForm(props) {
-  const {children} = props;
+interface WideNarrowFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function WideNarrowForm(props: PropsWithChildren<WideNarrowFormProps>) {
+  const { children } = props;
 
   return (
-    <React.Fragment>
-    {children && children.length === 2 &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          {children[0]}
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-wide-narrow-column'>
+          <div className='psdk-wide-column-column'>{children[0]}</div>
+          <div className='psdk-narrow-column-column'>{children[1]}</div>
         </div>
-        <div className="psdk-narrow-column-column">
-          {children[1]}
-        </div>
-      </div>
-    }
-    </React.Fragment>
-
-  )
-
+      )}
+    </>
+  );
 }

package/lib/template/WideNarrow/WideNarrowForm/config-ext.json

@@ -4,6 +4,5 @@
   "description": "WideNarrow Template",
   "type": "Template",
   "subtype": "FORM",
-  "properties": [
-  ]
+  "properties": []
 }

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

@@ -1,38 +1,28 @@
-import React, { Children } from "react";
-import PropTypes from "prop-types";
+import { Children, PropsWithChildren } 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 { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import WideNarrow from '@pega/react-sdk-components/lib/components/template/WideNarrow/WideNarrow';
+interface WideNarrowPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  templateCol?: string;
+  icon?: string;
+}
 
 /*
  * The wrapper handles knowing how to take in just children and mapping
  * to the Cosmos template.
  */
-export default function WideNarrowPage(props) {
-  const { children, title, templateCol, icon } = props;
+export default function WideNarrowPage(props: PropsWithChildren<WideNarrowPageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WideNarrow = getComponentFromMap('WideNarrow');
+
+  const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
   const childArray = Children.toArray(children);
 
   return (
     <div>
-    <WideNarrow
-        a={childArray[0]}
-        b={childArray[1]}
-        title={title}
-        cols={templateCol}
-        icon={icon?.replace("pi pi-", "")}
-      />
+      <WideNarrow a={childArray[0]} b={childArray[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />
     </div>
   );
 }
-
-WideNarrowPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  title: PropTypes.string.isRequired,
-  templateCol: PropTypes.string,
-  icon: PropTypes.string
-};
-
-WideNarrowPage.defaultProps = {
-  templateCol: "1fr 1fr",
-  icon: ""
-};

package/lib/template/WideNarrow/WideNarrowPage/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Wide-narrow Page Template",
   "type": "Template",
   "subtype": "PAGE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/WideNarrow/WideNarrowPage/index.tsx

@@ -1 +1 @@
-export { default } from './WideNarrowPage';
+export { default } from './WideNarrowPage';

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -4,13 +4,27 @@ import AppBar from '@material-ui/core/AppBar';
 import Box from '@material-ui/core/Box';
 import Toolbar from '@material-ui/core/Toolbar';
 import Container from '@material-ui/core/Container';
-import { IconButton, Menu, MenuItem, Typography } from '@material-ui/core';
-import { Button } from '@material-ui/core';
+import { IconButton, Menu, MenuItem, Typography, Button } from '@material-ui/core';
 import Avatar from '@material-ui/core/Avatar';
 import MenuIcon from '@material-ui/icons/Menu';
-import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WssNavBar.css';
 
+interface WssNavBarProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  appInfo: any;
+  navLinks: any[];
+  operator: { currentUserInitials: string };
+  navDisplayOptions: { alignment: string; position: string };
+  // eslint-disable-next-line react/no-unused-prop-types
+  portalName: string;
+  imageSrc: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  fullImageSrc: string;
+  appName: any;
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex'
@@ -32,9 +46,9 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function WssNavBar(props) {
+export default function WssNavBar(props: WssNavBarProps) {
   const { appInfo, navLinks, operator, navDisplayOptions } = props;
-  const { alignment } = navDisplayOptions;
+  const { alignment, position } = navDisplayOptions;
   const classes = useStyles();
 
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
@@ -55,12 +69,22 @@ export default function WssNavBar(props) {
     setAnchorElUser(null);
   };
 
+  const navLinksContent = (
+    <Box id='nav-links' sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }} style={{ justifyContent: alignment }}>
+      {navLinks.map(link => (
+        <Button className='link-style' key={link.text} onClick={link.onClick}>
+          {link.text}
+        </Button>
+      ))}
+    </Box>
+  );
+
   return (
     <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
         <Container maxWidth='xl'>
-          <Toolbar disableGutters>
-            <Button style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
+          <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
+            <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />
               <span className={classes.appName}>{appInfo.appName}</span>
             </Button>
@@ -98,16 +122,7 @@ export default function WssNavBar(props) {
               </Menu>
             </Box>
 
-            <Box
-              sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
-              style={{ justifyContent: alignment }}
-            >
-              {navLinks.map(link => (
-                <Button className='link-style' key={link.text} onClick={link.onClick}>
-                  {link.text}
-                </Button>
-              ))}
-            </Box>
+            {position === 'inline' && <>{navLinksContent}</>}
 
             <Box sx={{ flexGrow: 0 }}>
               <IconButton onClick={handleOpenUserMenu}>
@@ -134,6 +149,7 @@ export default function WssNavBar(props) {
               </Menu>
             </Box>
           </Toolbar>
+          {position === 'below' && <>{navLinksContent}</>}
         </Container>
       </AppBar>
     </div>

package/lib/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,22 +1,29 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from "@material-ui/core";
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-const useStyles = makeStyles((theme) => ({
+interface AppAnnouncementProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  header?: string;
+  description?: string;
+  datasource?: any;
+  whatsnewlink?: string;
+}
+
+const useStyles = makeStyles(theme => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
-    borderLeft: "6px solid",
+    borderLeft: '6px solid',
     borderLeftColor: theme.palette.primary.light
-  },
+  }
 }));
 
-const AppAnnouncement = (props) => {
-  const { header, description, datasource, whatsnewlink } = props;
+export default function AppAnnouncement(props: AppAnnouncementProps) {
+  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
   if (datasource && datasource.source) {
-    details = datasource.source.map((item) => {
+    details = datasource.source.map(item => {
       return item.name;
     });
   }
@@ -25,43 +32,29 @@ const AppAnnouncement = (props) => {
 
   const handleClick = () => {
     window.open(whatsnewlink);
-  }
+  };
 
   return (
-    <Card title="AppAnnouncement" className={classes.root}>
-      <CardHeader title={<Typography variant="h6">{header}</Typography>} />
+    <Card title='AppAnnouncement' className={classes.root}>
+      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
       <CardContent>
-        <Typography variant="body1" gutterBottom>{description}</Typography>
-        {
-          details.map((itm, idx) => {
-            const theKey = `AppAnn-item-${idx}`;
-            return (
-              <Typography key={theKey} variant="body2">- {itm}</Typography>
-            )
-          })
-        }
+        <Typography variant='body1' gutterBottom>
+          {description}
+        </Typography>
+        {details.map((itm, idx) => {
+          const theKey = `AppAnn-item-${idx}`;
+          return (
+            <Typography key={theKey} variant='body2'>
+              - {itm}
+            </Typography>
+          );
+        })}
       </CardContent>
       <CardActions>
-        <Button color="primary" onClick={handleClick} size="small">See what&apos;s new</Button>
+        <Button color='primary' onClick={handleClick} size='small'>
+          See what&apos;s new
+        </Button>
       </CardActions>
     </Card>
   );
-};
-
-AppAnnouncement.propTypes = {
-  header: PropTypes.string,
-  description: PropTypes.string,
-  datasource: PropTypes.instanceOf(Object),
-  whatsnewlink: PropTypes.string,
-  // image: PropTypes.string
-};
-
-AppAnnouncement.defaultProps = {
-  header: "",
-  description: "",
-  // image: "",
-  datasource: [],
-  whatsnewlink: ""
-};
-
-export default AppAnnouncement;
+}

package/lib/widget/AppAnnouncement/config-ext.json

@@ -4,6 +4,5 @@
   "description": "App announcement widget",
   "type": "Widget",
   "subtype": "PAGE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/widget/Attachment/Attachment.css

@@ -4,7 +4,15 @@
 }
 
 .file-div {
-  border: 1px dashed #262626;
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-color);
   width: 100%;
   padding: 0.5rem;
   text-align: center;
@@ -17,9 +25,72 @@
   left: 47%;
 }
 
-file-label::after {
+.file-label::after {
   display: inline;
-  content: " *";
+  content: ' *';
   vertical-align: top;
-  color: rgb(217, 28, 41);
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-color);
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+  align-content: center;
+  display: flex;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-utility-card {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.psdk-utility-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.file-disabled {
+  opacity: 0.4;
 }