@pega/react-sdk-overrides 23.1.10 → 23.1.11

package/lib/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -1,5 +1,3 @@
-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';
@@ -10,19 +8,15 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 //  So, no need to extend PConnProps
 interface FieldGroupListProps {
   // If any, enter additional props that only exist on this component
-  items: Array<any> | any,
-  onDelete: any,
-  onAdd: any
+  items: any[] | any;
+  onDelete: any;
+  onAdd: any;
 }
 
-
 export default function FieldGroupList(props: FieldGroupListProps) {
   let menuIconOverride$ = 'trash';
   if (menuIconOverride$) {
-    menuIconOverride$ = Utils.getImageSrc(
-      menuIconOverride$,
-      Utils.getSDKStaticConentUrl()
-    );
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
   }
 
   return (
@@ -38,11 +32,12 @@ export default function FieldGroupList(props: FieldGroupListProps) {
                   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}
@@ -60,4 +55,4 @@ export default function FieldGroupList(props: FieldGroupListProps) {
       </Grid>
     </Grid>
   );
-};
+}

package/lib/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -1,19 +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{
+interface FieldValueListProps {
   // If any, enter additional props that only exist on this component
-  name?: string,
-  value: any,
-  variant?: string
+  name?: string;
+  value: any;
+  variant?: string;
 }
 
-
 const useStyles = makeStyles(theme => ({
   root: {
     marginRight: theme.spacing(1),
@@ -53,11 +50,7 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   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>
@@ -69,16 +62,8 @@ export default function FieldValueList(props: FieldValueListProps) {
     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>
@@ -86,11 +71,9 @@ export default function FieldValueList(props: FieldValueListProps) {
   }
 
   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>
   );
-};
+}

package/lib/designSystemExtension/Operator/Operator.tsx

@@ -1,142 +1,144 @@
-import React, {useState} from "react";
+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{
+interface OperatorProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  caseOpConfig: {
-    label: string,
-    createDateTime: string,
-    createLabel: string,
-    createOperator: { userName: string, userId: string },
-    updateDateTime: string,
-    updateLabel: string,
-    updateOperator: { userName: string, userId: string }
-  }
+  label: string;
+  createDateTime: string;
+  createLabel: string;
+  createOperator: { userName: string; userId: string };
+  updateDateTime: string;
+  updateLabel: string;
+  updateOperator: { userName: string; userId: string };
+  displayLabel?: 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: OperatorProps) {
   // const componentName = "Operator";
-  const { caseOpConfig } = props;
   const classes = useStyles();
 
-  const fieldLabel = caseOpConfig.label.toLowerCase();
-  let caseOpLabel = "---";
-  let caseOpName = "---";
-  let caseOpId = "";
-  let caseTime = "";
-
-  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();
+  const displayLabel = props?.displayLabel?.toLowerCase();
+  let caseOpLabel = '---';
+  let caseOpName = '---';
+  let caseOpId = '';
+  let caseTime = '';
+
+  if (fieldLabel === 'create operator' || displayLabel === 'create operator') {
+    caseOpLabel = props.createLabel;
+    caseOpName = props.createOperator.userName;
+    caseTime = props.createDateTime;
+    caseOpId = props.createOperator.userId;
+  } else if (fieldLabel === 'update operator' || displayLabel === '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: localizedVal("Position", localeCategory),
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
             value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
           },
           {
-            id: "pyOrganization",
-            name: localizedVal("Organization", localeCategory),
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
             value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
           },
           {
-            id: "ReportToUserName",
+            id: 'ReportToUserName',
             name: localizedVal('Reports to', localeCategory),
             value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
           },
           {
-            id: "pyTelephone",
+            id: 'pyTelephone',
             name: localizedVal('Telephone', localeCategory),
-            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+            value: res.data.pyOperatorInfo.pyTelephone ? (
+              <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a>
+            ) : (
+              fillerString
+            )
           },
           {
-            id: "pyEmailAddress",
+            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
+            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: localizedVal("Position", localeCategory),
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
             value: fillerString
           },
           {
-            id: "pyOrganization",
-            name: localizedVal("Organization", localeCategory),
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
             value: fillerString
           },
           {
-            id: "ReportToUserName",
+            id: 'ReportToUserName',
             name: localizedVal('Reports to', localeCategory),
             value: fillerString
           },
           {
-            id: "pyTelephone",
+            id: 'pyTelephone',
             name: localizedVal('Telephone', localeCategory),
             value: fillerString
           },
           {
-            id: "pyEmailAddress",
+            id: 'pyEmailAddress',
             name: localizedVal('Email address', localeCategory),
             value: fillerString
           }
@@ -159,23 +161,33 @@ export default function Operator(props: OperatorProps) {
     }
 
     // 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}
@@ -183,23 +195,23 @@ export default function Operator(props: OperatorProps) {
         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>;
-
+    </>
+  );
 }

package/lib/designSystemExtension/Pulse/Pulse.tsx

@@ -1,35 +1,33 @@
-import React from "react";
-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';
 
 // 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
-  children?: Array<any>
 }
 
-
-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 Pulse(props: PulseProps) {
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+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>
+  );
 }

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
+
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   fieldLabel: {
     position: 'relative',
     transform: 'translate(0, 0px) scale(1)',
@@ -40,7 +41,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
     editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
   }, [readOnly, disabled]);
 
-  const filePickerCallback = (cb) => {
+  const filePickerCallback = cb => {
     const input = document.createElement('input');
     input.setAttribute('type', 'file');
     input.setAttribute('accept', 'image/*');
@@ -73,11 +74,11 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
   if (readOnly) {
     const value = defaultValue || '--';
     // eslint-disable-next-line react/no-danger
-    richTextComponent = <div key={id} id={id} className="readonly-richtext-editor" dangerouslySetInnerHTML={{ __html: value }} />;
+    richTextComponent = <div key={id} id={id} className='readonly-richtext-editor' dangerouslySetInnerHTML={{ __html: value }} />;
   } else {
     richTextComponent = (
       <Editor
-        tinymceScriptSrc="tinymce/tinymce.min.js"
+        tinymceScriptSrc='tinymce/tinymce.min.js'
         onInit={(_evt, editor) => {
           editorRef.current = editor;
         }}
@@ -108,7 +109,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
   return (
     <FormControl data-test-id={testId} error={error} required={required}>
       {!labelHidden && (
-        <InputLabel id="demo-simple-select-error-label" className={classes.fieldLabel}>
+        <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
           {label}
         </InputLabel>
       )}

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@material-ui/core';
 import './WssQuickCreate.css';
 
@@ -6,29 +5,30 @@ import './WssQuickCreate.css';
 //  So, no need to extend PConnProps
 interface WssQuickCreateProps {
   // If any, enter additional props that only exist on this component
-  heading: string,
-  actions?: Array<any>
+  heading: string;
+  actions?: any[];
 }
 
-
 export default function WssQuickCreate(props: WssQuickCreateProps) {
   const { heading, actions } = props;
 
   return (
     <div>
-      <h1 id="quick-links-heading" className='quick-link-heading'>{heading}</h1>
-      <ul id="quick-links" className='quick-link-ul-list'>
+      <h1 id='quick-links-heading' className='quick-link-heading'>
+        {heading}
+      </h1>
+      <ul id='quick-links' className='quick-link-ul-list'>
         {actions &&
           actions.map(element => {
             return (
-            <li className='quick-link-list' key={element.label}>
-              <Button className='quick-link-button' onClick={element.onClick}>
-                <span className='quick-link-button-span'>
-                  {element.icon && <img className='quick-link-icon' src={element.icon}/>}
-                  <span>{element.label}</span>
-                </span>
-              </Button>
-            </li>
+              <li className='quick-link-list' key={element.label}>
+                <Button className='quick-link-button' onClick={element.onClick}>
+                  <span className='quick-link-button-span'>
+                    {element.icon && <img className='quick-link-icon' src={element.icon} />}
+                    <span>{element.label}</span>
+                  </span>
+                </Button>
+              </li>
             );
           })}
       </ul>