@pega/react-sdk-overrides 0.23.25 → 0.23.27

package/lib/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,6 +1,17 @@
-import React from 'react';
+import { PropsWithChildren, useState } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+
+// FieldGroupProps is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface FieldGroupProps {
+  // If any, enter additional props that only exist on this component
+  name?: string;
+  collapsible?: boolean;
+  instructions?: string;
+}
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -16,12 +27,22 @@ const useStyles = makeStyles(theme => ({
   },
   fullWidth: {
     width: '100%'
+  },
+  fieldGroupHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+    cursor: collapsible => (collapsible ? 'pointer' : 'auto')
+  },
+  instructionText: {
+    padding: '5px 0'
   }
 }));
 
-const FieldGroup = props => {
-  const { children, name } = props;
-  const classes = useStyles();
+export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
+  const { children, name, collapsible = false, instructions } = props;
+  const classes = useStyles(collapsible);
+  const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
     <Grid container>
@@ -29,20 +50,31 @@ const FieldGroup = props => {
     </Grid>
   );
 
+  const headerClickHandler = () => {
+    setCollapsed(current => !current);
+  };
+
   return (
-    <React.Fragment>
-      <Grid container spacing={4} justifyContent='space-between'>
-        <Grid item style={{ width: '100%' }}>
-          {name && (
-            <div className={classes.fieldMargin}>
-              <b>{props.name}</b>
-            </div>
-          )}
-          {descAndChildren}
-        </Grid>
+    <Grid container spacing={4} justifyContent='space-between'>
+      <Grid item style={{ width: '100%' }}>
+        {name && (
+          <div className={classes.fieldMargin}>
+            {collapsible ? (
+              <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>
+                {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
+                <b>{name}</b>
+              </span>
+            ) : (
+              <b>{name}</b>
+            )}
+          </div>
+        )}
+        {instructions && instructions !== 'none' && (
+          // eslint-disable-next-line react/no-danger
+          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+        )}
+        {!collapsed && descAndChildren}
       </Grid>
-    </React.Fragment>
+    </Grid>
   );
-};
-
-export default FieldGroup;
+}

package/lib/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -1,20 +1,22 @@
-import React from 'react';
-
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 import Link from '@material-ui/core/Link';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
-declare const PCore: any;
+// FieldGroupList is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface FieldGroupListProps {
+  // If any, enter additional props that only exist on this component
+  items: any[] | any;
+  onDelete: any;
+  onAdd: any;
+}
 
-const FieldGroupList = props => {
+export default function FieldGroupList(props: FieldGroupListProps) {
   let menuIconOverride$ = 'trash';
   if (menuIconOverride$) {
-    menuIconOverride$ = Utils.getImageSrc(
-      menuIconOverride$,
-      PCore.getAssetLoader().getStaticServerUrl()
-    );
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
   }
 
   return (
@@ -30,11 +32,12 @@ const FieldGroupList = props => {
                   style={{ float: 'right' }}
                   className='psdk-utility-button'
                   id={`delete-row-${item.id}`}
+                  aria-label='Delete Row'
                   onClick={() => {
                     props.onDelete(item.id);
                   }}
                 >
-                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>
+                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
                 </button>
               )}
               {item.children}
@@ -52,6 +55,4 @@ const FieldGroupList = props => {
       </Grid>
     </Grid>
   );
-};
-
-export default FieldGroupList;
+}

package/lib/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -1,9 +1,16 @@
-import React from 'react';
-
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 
+// FieldValueList is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface FieldValueListProps {
+  // If any, enter additional props that only exist on this component
+  name?: string;
+  value: any;
+  variant?: string;
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     marginRight: theme.spacing(1),
@@ -37,17 +44,13 @@ function formatItemValue(value) {
   return formattedVal;
 }
 
-const FieldValueList = props => {
+export default function FieldValueList(props: FieldValueListProps) {
   const { name, value, variant = 'inline' } = props;
   const classes = useStyles();
 
   function getGridItemLabel() {
     return (
-      <Grid
-        item
-        xs={variant === 'stacked' ? 12 : 6}
-        className={variant === 'stacked' ? classes.noPaddingBottom : ''}
-      >
+      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
@@ -59,16 +62,8 @@ const FieldValueList = props => {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid
-        item
-        xs={variant === 'stacked' ? 12 : 6}
-        className={variant === 'stacked' ? classes.noPaddingTop : ''}
-      >
-        <Typography
-          variant={variant === 'stacked' ? 'h6' : 'body2'}
-          component='span'
-          className={classes.fieldValue}
-        >
+      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+        <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
           {formattedValue}
         </Typography>
       </Grid>
@@ -76,13 +71,9 @@ const FieldValueList = props => {
   }
 
   return (
-    <React.Fragment>
-      <Grid container spacing={4} justifyContent='space-between'>
-        {getGridItemLabel()}
-        {getGridItemValue()}
-      </Grid>
-    </React.Fragment>
+    <Grid container spacing={4} justifyContent='space-between'>
+      {getGridItemLabel()}
+      {getGridItemValue()}
+    </Grid>
   );
-};
-
-export default FieldValueList;
+}

package/lib/designSystemExtension/Operator/Operator.tsx

@@ -1,127 +1,143 @@
-import React, {useState} from "react";
-import PropTypes from "prop-types";
+import React, { useState } from 'react';
 import TextField from '@material-ui/core/TextField';
 import Popover from '@material-ui/core/Popover';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-
 import { makeStyles } from '@material-ui/core/styles';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Operator is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface OperatorProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  createDateTime: string;
+  createLabel: string;
+  createOperator: { userName: string; userId: string };
+  updateDateTime: string;
+  updateLabel: string;
+  updateOperator: { userName: string; userId: string };
+}
 
-declare const PCore: any;
-
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(1),
-    margin: theme.spacing(1),
+    margin: theme.spacing(1)
   },
   popover: {
     padding: theme.spacing(1),
-    margin: theme.spacing(1),
+    margin: theme.spacing(1)
   }
 }));
 
-export default function Operator(props) {
+export default function Operator(props: OperatorProps) {
   // const componentName = "Operator";
-  const { caseOpConfig } = props;
   const classes = useStyles();
 
-  const fieldLabel = caseOpConfig.label.toLowerCase();
-  let caseOpLabel = "---";
-  let caseOpName = "---";
-  let caseOpId = "";
-  let caseTime = null;
-
-  if (fieldLabel === "create operator") {
-    caseOpLabel = caseOpConfig.createLabel;
-    caseOpName = caseOpConfig.createOperator.userName;
-    caseTime = caseOpConfig.createDateTime;
-    caseOpId = caseOpConfig.createOperator.userId;
-  } else if (fieldLabel === "update operator") {
-    caseOpLabel = caseOpConfig.updateLabel;
-    caseOpName = caseOpConfig.updateOperator.userName;
-    caseTime = caseOpConfig.updateDateTime;
-    caseOpId = caseOpConfig.updateOperator.userId;
+  const fieldLabel = props.label.toLowerCase();
+  let caseOpLabel = '---';
+  let caseOpName = '---';
+  let caseOpId = '';
+  let caseTime = '';
+
+  if (fieldLabel === 'create operator') {
+    caseOpLabel = props.createLabel;
+    caseOpName = props.createOperator.userName;
+    caseTime = props.createDateTime;
+    caseOpId = props.createOperator.userId;
+  } else if (fieldLabel === 'update operator') {
+    caseOpLabel = props.updateLabel;
+    caseOpName = props.updateOperator.userName;
+    caseTime = props.updateDateTime;
+    caseOpId = props.updateOperator.userId;
   }
 
   // Popover-related
   const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
-  const [popoverFields, setPopoverFields] = useState<Array<any>>([]);
+  const [popoverFields, setPopoverFields] = useState<any[]>([]);
 
   const popoverOpen = Boolean(popoverAnchorEl);
   const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
 
-  const handlePopoverClose = (() => {
+  const handlePopoverClose = () => {
     setPopoverAnchorEl(null);
-  })
+  };
 
   function showOperatorDetails(event) {
-
     const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
 
-    operatorPreviewPromise.then((res) => {
-      const fillerString = "---";
+    operatorPreviewPromise.then((res: any) => {
+      const fillerString = '---';
       let fields: any = [];
-      if (
-        res.data &&
-        res.data.pyOperatorInfo &&
-        res.data.pyOperatorInfo.pyUserName
-      ) {
+      if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
         fields = [
           {
-            id: "pyPosition",
-            name: "Position",
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
             value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
           },
           {
-            id: "pyOrganization",
-            name: "Organization",
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
             value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
           },
           {
-            id: "ReportToUserName",
-            name: "Reports to",
+            id: 'ReportToUserName',
+            name: localizedVal('Reports to', localeCategory),
             value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
           },
           {
-            id: "pyTelephone",
-            name: "Telephone",
-            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+            id: 'pyTelephone',
+            name: localizedVal('Telephone', localeCategory),
+            value: res.data.pyOperatorInfo.pyTelephone ? (
+              <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a>
+            ) : (
+              fillerString
+            )
           },
           {
-            id: "pyEmailAddress",
-            name: "Email address",
-            value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
+            id: 'pyEmailAddress',
+            name: localizedVal('Email address', localeCategory),
+            value: res.data.pyOperatorInfo.pyEmailAddress ? (
+              <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a>
+            ) : (
+              fillerString
+            )
           }
         ];
       } else {
         // eslint-disable-next-line no-console
-        console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
+        console.log(
+          `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
+        );
         fields = [
           {
-            id: "pyPosition",
-            name: "Position",
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
             value: fillerString
           },
           {
-            id: "pyOrganization",
-            name: "Organization",
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
             value: fillerString
           },
           {
-            id: "ReportToUserName",
-            name: "Reports to",
+            id: 'ReportToUserName',
+            name: localizedVal('Reports to', localeCategory),
             value: fillerString
           },
           {
-            id: "pyTelephone",
-            name: "Telephone",
+            id: 'pyTelephone',
+            name: localizedVal('Telephone', localeCategory),
             value: fillerString
           },
           {
-            id: "pyEmailAddress",
-            name: "Email address",
+            id: 'pyEmailAddress',
+            name: localizedVal('Email address', localeCategory),
             value: fillerString
           }
         ];
@@ -143,23 +159,33 @@ export default function Operator(props) {
     }
 
     // There are fields, so build the grid.
-    return <Grid container className={classes.popover} spacing={1}>
-      <Grid item xs={12}><Typography variant="h6">{caseOpName}</Typography></Grid>
-      {popoverFields.map((field) => {
-        return <React.Fragment key={field.id}>
-          <Grid container item xs={12} spacing={1}>
-            <Grid item xs={6}><Typography variant="caption">{field.name}</Typography></Grid>
-            <Grid item xs={6}><Typography variant="subtitle2">{field.value}</Typography></Grid>
-          </Grid>
-        </React.Fragment>
-      })}
-    </Grid>
-
+    return (
+      <Grid container className={classes.popover} spacing={1}>
+        <Grid item xs={12}>
+          <Typography variant='h6'>{caseOpName}</Typography>
+        </Grid>
+        {popoverFields.map(field => {
+          return (
+            <React.Fragment key={field.id}>
+              <Grid container item xs={12} spacing={1}>
+                <Grid item xs={6}>
+                  <Typography variant='caption'>{field.name}</Typography>
+                </Grid>
+                <Grid item xs={6}>
+                  <Typography variant='subtitle2'>{field.value}</Typography>
+                </Grid>
+              </Grid>
+            </React.Fragment>
+          );
+        })}
+      </Grid>
+    );
   }
 
   // End of popover-related
 
-  return <React.Fragment>
+  return (
+    <>
       <TextField
         defaultValue={caseOpName}
         label={caseOpLabel}
@@ -167,30 +193,23 @@ export default function Operator(props) {
         InputProps={{
           readOnly: true,
           disableUnderline: true,
-          inputProps: {style: {cursor: 'pointer'}}
+          inputProps: { style: { cursor: 'pointer' } }
         }}
       />
       <br />
-      {Utils.generateDateTime(caseTime, "DateTime-Since")}
+      {Utils.generateDateTime(caseTime, 'DateTime-Since')}
 
       <Popover
         id={popoverId}
         open={popoverOpen}
         anchorEl={popoverAnchorEl}
         onClose={handlePopoverClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center'}}
-        transformOrigin={{ vertical: 'top', horizontal: 'center'}}
-        PaperProps={{ style: {maxWidth: '45ch'}}}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+        PaperProps={{ style: { maxWidth: '45ch' } }}
       >
         {getPopoverGrid()}
       </Popover>
-    </React.Fragment>;
-
-}
-
-Operator.defaultProps = {
+    </>
+  );
 }
-
-Operator.propTypes = {
-  caseOpConfig: PropTypes.object.isRequired,
-};

package/lib/designSystemExtension/Pulse/Pulse.tsx

@@ -1,31 +1,33 @@
-import React from "react";
-// import PropTypes from "prop-types";
-import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
+import { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme) => ({
+// Pulse is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface PulseProps {
+  // If any, enter additional props that only exist on this component
+}
+
+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 Pulse(/* props */) {
-  // const { children } = props;
+export default function Pulse(props: PropsWithChildren<PulseProps>) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children } = props;
   const classes = useStyles();
 
   return (
-      <Card className={classes.root}>
-        <CardHeader title={<Typography variant="h6">Pulse</Typography>} />
-        <CardContent>
-          <Typography>Pulse</Typography>
-        </CardContent>
-      </Card>
-    );
+    <Card className={classes.root}>
+      <CardHeader title={<Typography variant='h6'>Pulse</Typography>} />
+      <CardContent>
+        <Typography>Pulse</Typography>
+      </CardContent>
+    </Card>
+  );
 }
-
-// Pulse.propTypes = {
-//   children: PropTypes.arrayOf(PropTypes.node).isRequired
-// };