@pega/react-sdk-overrides 8.23.11 → 23.1.11

package/lib/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -1,18 +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';
 
-const FieldGroupList = props => {
+// 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;
+}
+
+export default function FieldGroupList(props: FieldGroupListProps) {
   let menuIconOverride$ = 'trash';
   if (menuIconOverride$) {
-    menuIconOverride$ = Utils.getImageSrc(
-      menuIconOverride$,
-      Utils.getSDKStaticConentUrl()
-    );
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
   }
 
   return (
@@ -28,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}
@@ -50,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,131 +1,144 @@
-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 };
+  displayLabel?: any;
+}
 
-import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
-
-declare const PCore: typeof PCoreType;
-
-
-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();
+  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
           }
@@ -148,23 +161,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}
@@ -172,30 +195,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
-// };

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,122 @@
+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 => ({
+  fieldLabel: {
+    position: 'relative',
+    transform: 'translate(0, 0px) scale(1)',
+    marginBottom: '5px',
+    color: theme.palette.text.secondary
+  }
+}));
+
+interface RichTextEditorProps {
+  id?: string;
+  defaultValue: string;
+  label: string;
+  labelHidden: boolean;
+  info: string;
+  testId: string;
+  placeholder: string;
+  disabled: boolean;
+  required: boolean;
+  readOnly: boolean;
+  error: boolean;
+  onBlur: React.EventHandler<any>;
+  onChange: React.EventHandler<any>;
+}
+
+const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const classes = useStyles();
+  const uid = useUID();
+  const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
+
+  const editorRef: any = useConsolidatedRef(ref);
+  let richTextComponent: any = null;
+
+  useAfterInitialEffect(() => {
+    editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
+  }, [readOnly, disabled]);
+
+  const filePickerCallback = cb => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+          Note: Now we need to register the blob in TinyMCEs image blob
+          registry. In the next release this part hopefully won't be
+          necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        const blobCache = editorRef.current.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  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 }} />;
+  } else {
+    richTextComponent = (
+      <Editor
+        tinymceScriptSrc='tinymce/tinymce.min.js'
+        onInit={(_evt, editor) => {
+          editorRef.current = editor;
+        }}
+        id={id}
+        initialValue={defaultValue}
+        disabled={disabled}
+        init={{
+          placeholder,
+          menubar: false,
+          statusbar: false,
+          min_height: 130,
+          plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+          autoresize_bottom_margin: 0,
+          toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+          toolbar_location: 'bottom',
+          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+          branding: false,
+          paste_data_images: true,
+          file_picker_types: 'image',
+          file_picker_callback: filePickerCallback
+        }}
+        onBlur={onBlur}
+        onEditorChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <FormControl data-test-id={testId} error={error} required={required}>
+      {!labelHidden && (
+        <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
+          {label}
+        </InputLabel>
+      )}
+      {richTextComponent}
+      {info && <FormHelperText>{info}</FormHelperText>}
+    </FormControl>
+  );
+});
+
+export default RichTextEditor;

package/lib/designSystemExtension/RichTextEditor/index.tsx

@@ -0,0 +1 @@
+export { default } from './RichTextEditor';

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,25 +1,34 @@
-import React from 'react';
 import { Button } from '@material-ui/core';
 import './WssQuickCreate.css';
 
-export default function WssQuickCreate(props) {
+// WssQuickCreate is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface WssQuickCreateProps {
+  // If any, enter additional props that only exist on this component
+  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>