@pega/react-sdk-overrides 23.1.10 → 23.1.12

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

@@ -1,30 +1,22 @@
-import React from "react";
-
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrowForm.css';
 
-// WideNarrowForm does NOT have getPConnect. So, no need to extend from PConnProps
-interface WideNarrowFormProps {
+interface WideNarrowFormProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>
 }
 
-export default function WideNarrowForm(props: WideNarrowFormProps) {
-  const {children} = props;
+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]}
-        </div>
-        <div className="psdk-narrow-column-column">
-          {children[1]}
+    <>
+      {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>
-    }
-    </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,21 +1,19 @@
-import React, { Children } from "react";
+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';
 
-// WideNarrowPage does NOT have getPConnect. So, no need to extend from PConnProps
-interface WideNarrowPageProps {
+interface WideNarrowPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  title: string,
-  templateCol?: string,
-  icon?: string
+  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: WideNarrowPageProps) {
+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');
 
@@ -24,13 +22,7 @@ export default function WideNarrowPage(props: WideNarrowPageProps) {
 
   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>
   );
 }

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,30 +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';
 
-// WssNavBar does NOT have getPConnect. So, no need to extend from PConnProps
-
-interface WssNavBarProps {
+interface WssNavBarProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  appInfo: any,
-  navLinks: Array<any>
-  operator: { currentUserInitials: string },
-  navDisplayOptions: { alignment: string, position: string},
+  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,
+  portalName: string;
+  imageSrc: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  fullImageSrc: string,
-   appName: any
+  fullImageSrc: string;
+  appName: any;
 }
 
-
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex'
@@ -57,6 +54,9 @@ export default function WssNavBar(props: WssNavBarProps) {
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
 
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
   const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElNav(event.currentTarget);
   };
@@ -73,10 +73,7 @@ export default function WssNavBar(props: WssNavBarProps) {
   };
 
   const navLinksContent = (
-    <Box id="nav-links"
-      sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
-      style={{ justifyContent: alignment }}
-    >
+    <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}
@@ -90,7 +87,7 @@ export default function WssNavBar(props: WssNavBarProps) {
       <AppBar position='static' color='primary'>
         <Container maxWidth='xl'>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
-            <Button id="appName" style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
+            <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />
               <span className={classes.appName}>{appInfo.appName}</span>
             </Button>
@@ -150,7 +147,7 @@ export default function WssNavBar(props: WssNavBarProps) {
                 onClose={handleCloseUserMenu}
               >
                 <MenuItem onClick={logout}>
-                  <Typography>Logout</Typography>
+                  <Typography>{localizedVal('Log off', localeCategory)}</Typography>
                 </MenuItem>
               </Menu>
             </Box>

package/lib/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,32 +1,29 @@
-import React from "react";
-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';
 
-// AppAnnouncement is one of the few components that does NOT have getPConnect.
-//  So, no need to extend PConnProps
-interface AppAnnouncementProps {
+interface AppAnnouncementProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  header?: string,
-  description?: string,
-  datasource?: any,
-  whatsnewlink?: string
+  header?: string;
+  description?: string;
+  datasource?: any;
+  whatsnewlink?: string;
 }
 
-
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
-    borderLeft: "6px solid",
+    borderLeft: '6px solid',
     borderLeftColor: theme.palette.primary.light
-  },
+  }
 }));
 
 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;
     });
   }
@@ -35,25 +32,29 @@ export default function AppAnnouncement(props: AppAnnouncementProps) {
 
   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>
   );
-};
+}

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

@@ -27,7 +27,7 @@
 
 .file-label::after {
   display: inline;
-  content: " *";
+  content: ' *';
   vertical-align: top;
   color: var(--app-neutral-dark-color);
 }
@@ -35,3 +35,62 @@
 .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;
+}