@pega/react-sdk-overrides 23.1.10 → 23.1.12

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

@@ -4,6 +4,5 @@
   "description": "Attachments",
   "type": "Widget",
   "subtype": "CASE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/widget/Followers/Followers.tsx

@@ -1,16 +1,13 @@
-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';
-// import { green } from "@material-ui/core/colors";
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Followers does NOT have getPConnect. So, no need to extend from PConnProps
-interface FollowersProps {
+interface FollowersProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>
 }
 
-
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),
@@ -19,24 +16,30 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(1)
     // borderLeft: "6px solid",
     // borderLeftColor: green[300]
-  },
+  }
 }));
 
-export default function Followers(props: FollowersProps) {
-  const componentName = "Followers";
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+export default function Followers(props: PropsWithChildren<FollowersProps>) {
+  const componentName = 'Followers';
+  // 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" component="div">{componentName} - <em>unsupported</em></Typography>} />
-        <CardContent>
-          <Typography>{componentName} content</Typography>
-        </CardContent>
-      </Card>
-    );
+    <Card className={classes.root}>
+      <CardHeader
+        title={
+          <Typography variant='h6' component='div'>
+            {componentName} - <em>unsupported</em>
+          </Typography>
+        }
+      />
+      <CardContent>
+        <Typography>{componentName} content</Typography>
+      </CardContent>
+    </Card>
+  );
 }

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

@@ -4,6 +4,5 @@
   "description": "Followers",
   "type": "Widget",
   "subtype": "CASE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -1,63 +1,89 @@
-import React from "react";
+import { useEffect, useState } from 'react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-// import type { PConnProps } from '../../../types/PConnProps';
-
-// Can't add PConnTypes until we can resolve type problems with
-//  2nd arg to createWork
-// interface QuickCreateProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-// }
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+interface QuickCreateProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  heading: string;
+  showCaseIcons: boolean;
+  classFilter: any[];
+}
 
-export default function QuickCreate(props /* : QuickCreateProps */) {
+export default function QuickCreate(props: QuickCreateProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const WssQuickCreate = getComponentFromMap('WssQuickCreate');
 
   const { getPConnect, heading, showCaseIcons, classFilter } = props;
   const pConn = getPConnect();
-  const createCase = (className) => {
+  const createCase = className => {
     pConn
       .getActionsApi()
-      .createWork(className, { })
-      .catch((error) => {
+      .createWork(className, {} as any)
+      .catch(error => {
         // eslint-disable-next-line no-console
-        console.log('Error in case creation: ', error?.message)
+        console.log('Error in case creation: ', error?.message);
       });
   };
 
-  const cases: any = [];
-  const envInfo = PCore.getEnvironmentInfo();
-  if (
-    classFilter &&
-    envInfo.environmentInfoObject &&
-    envInfo.environmentInfoObject.pyCaseTypeList &&
-    envInfo.environmentInfoObject.pyCaseTypeList.length > 0
-  ) {
-    classFilter.forEach((item) => {
-      let icon = Utils.getImageSrc('polaris-solid', Utils.getSDKStaticConentUrl());
-      let label = '';
-      envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype) => {
-        if (casetype.pyWorkTypeImplementationClassName === item) {
-          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl());
-          label = casetype.pyWorkTypeName ?? '';
+  const [quickCreatecases, setCases] = useState([]);
+
+  /* If the classFilter is empty and has no entries - we will default to the default set of case types
+     It will usually come from the envInfo but for Launchpad, this is not populated - instead get the list of cases from the store */
+  useEffect(() => {
+    const cases: any = [];
+    const defaultCases: any = [];
+    const envInfo = PCore.getEnvironmentInfo();
+    if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
+      envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
+        if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
+          defaultCases.push({
+            classname: casetype.pyWorkTypeImplementationClassName,
+            onClick: () => {
+              createCase(casetype.pyWorkTypeImplementationClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyWorkTypeName
+          });
         }
       });
-      if (label !== '') {
-        cases.push({
-          label,
-          onClick: () => {
-            createCase(item);
-          },
-          ...(showCaseIcons && { icon })
+    } else {
+      const pConnectInAppContext = PCore.createPConnect({
+        options: { context: PCore.getConstants().APP.APP }
+      }).getPConnect();
+      const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal') as any;
+      pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
+        if (casetype.pyClassName && casetype.pyLabel) {
+          defaultCases.push({
+            classname: casetype.pyClassName,
+            onClick: () => {
+              createCase(casetype.pyClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyLabel
+          });
+        }
+      });
+    }
+
+    /* If classFilter is not empty - filter from the list of defaultCases */
+    if (classFilter?.length > 0) {
+      classFilter.forEach(item => {
+        defaultCases.forEach(casetype => {
+          if (casetype.classname === item) {
+            cases.push(casetype);
+          }
         });
-      }
-    });
-  }
+      });
+      setCases(cases);
+    } else {
+      setCases(defaultCases);
+    }
+  }, []);
 
   return (
-      <div>
-        <WssQuickCreate heading={heading} actions={cases}></WssQuickCreate>
-      </div>
-    );
+    <div>
+      <WssQuickCreate heading={heading} actions={quickCreatecases} />
+    </div>
+  );
 }

package/lib/widget/SummaryItem/SummaryItem.css

@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: row;
   padding: 0.25rem 0rem 0.25rem 0.25rem;
-  margin-bottom: 0.5rem
+  margin-bottom: 0.5rem;
 }
 
 .psdk-utility-card-icon {
@@ -43,17 +43,17 @@
 }
 
 .psdk-utility-card {
-display: flex;
-align-items: center;
-border: 0.0625rem solid rgb(207, 207, 207);
-border-radius: calc(0.25rem);
-min-height: 3rem;
+  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;
+  background: none;
+  border: none;
+  cursor: pointer;
 }
 
 .psdk-utility-action {

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -1,37 +1,36 @@
-import React, { useState } from "react";
-import { Utils } from "@pega/react-sdk-components/lib/components/helpers/utils";
-import './SummaryItem.css'
-import  { IconButton, Menu, MenuItem } from '@material-ui/core';
+import { useState } from 'react';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// SummaryItem does NOT have getPConnect. So, no need to extend from PConnProps
+import './SummaryItem.css';
 
-interface SummaryItemProps {
+interface SummaryItemProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  menuIconOverride$: string,
-  menuIconOverrideAction$: any,
-  arItems$: Array<any> | any
+  menuIconOverride$: string;
+  menuIconOverrideAction$: any;
+  arItems$: any[] | any;
 }
 
-
-export default function SummaryItem(props:SummaryItemProps) {
-  let imagePath$ = "";
+export default function SummaryItem(props: SummaryItemProps) {
+  let imagePath$ = '';
   let menuIconOverride$;
-  menuIconOverride$ = props.menuIconOverride$
+  menuIconOverride$ = props.menuIconOverride$;
   imagePath$ = Utils.getIconPath(Utils.getSDKStaticConentUrl());
   const item = props.arItems$;
-  const srcImg = `${imagePath$}${item.visual.icon}.svg`
+  const srcImg = `${imagePath$}${item.visual.icon}.svg`;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   if (menuIconOverride$) {
-    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$ , Utils.getSDKStaticConentUrl());
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
   }
 
   function removeAttachment() {
-    props.menuIconOverrideAction$(item)
+    props.menuIconOverrideAction$(item);
   }
 
-  const handleClick = (event) => {
+  const handleClick = event => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -40,49 +39,50 @@ export default function SummaryItem(props:SummaryItemProps) {
   };
 
   return (
-    <div className="psdk-utility-card">
-      <div className="psdk-utility-card-icon">
-        <img className="psdk-utility-card-svg-icon" src={srcImg}></img>
+    <div className='psdk-utility-card'>
+      <div className='psdk-utility-card-icon'>
+        <img className='psdk-utility-card-svg-icon' src={srcImg} />
       </div>
-      <div className="psdk-utility-card-main">
-        {item.primary.type !== 'URL' && (<div className="psdk-utility-card-main-primary-label">{item.primary.name}</div>)}
-        {item.primary.type === 'URL' && (<div className="psdk-utility-card-main-primary-url">
-          <button type="button" className="psdk-link-button">
-            {item.primary.name}&nbsp;
-            <img className="psdk-utility-card-actions-svg-icon" src={`${imagePath$}${item.primary.icon}.svg`}></img>
-          </button>
-        </div>)}
-        {item.secondary.text && (<div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>)}
+      <div className='psdk-utility-card-main'>
+        {item.primary.type !== 'URL' && <div className='psdk-utility-card-main-primary-label'>{item.primary.name}</div>}
+        {item.primary.type === 'URL' && (
+          <div className='psdk-utility-card-main-primary-url'>
+            <button type='button' className='psdk-link-button'>
+              {item.primary.name}&nbsp;
+              <img className='psdk-utility-card-actions-svg-icon' src={`${imagePath$}${item.primary.icon}.svg`} />
+            </button>
+          </div>
+        )}
+        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
       </div>
-      <div className="psdk-utility-action">
-        {menuIconOverride$ && (<button type="button" className="psdk-utility-button" onClick={removeAttachment}>
-            <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$}></img>
-        </button>)}
-        {!menuIconOverride$ && (<div>
-          <IconButton
-            id="setting-button"
-            aria-controls={open ? 'file-menu' : undefined}
-            aria-expanded={open ? 'true' : undefined}
-            aria-haspopup="true"
-            onClick={handleClick}
-          >
-          <MoreVertIcon />
-          </IconButton>
-          <Menu style={{marginTop: '3rem'}}
-            id="file-menu"
-            anchorEl={anchorEl}
-            keepMounted
-            open={Boolean(anchorEl)}
-            onClose={handleClose}
-          >
-          {item.actions && item.actions.map((option) => (
-            <MenuItem style={{fontSize: '14px'}} key={option.id || option.text} onClick={option.onClick}>
-              {option.text}
-            </MenuItem>
-          ))}
-          </Menu>
-        </div>)}
+      <div className='psdk-utility-action'>
+        {menuIconOverride$ && (
+          <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={removeAttachment}>
+            <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+          </button>
+        )}
+        {!menuIconOverride$ && (
+          <div>
+            <IconButton
+              id='setting-button'
+              aria-controls={open ? 'file-menu' : undefined}
+              aria-expanded={open ? 'true' : undefined}
+              aria-haspopup='true'
+              onClick={handleClick}
+            >
+              <MoreVertIcon />
+            </IconButton>
+            <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+              {item.actions &&
+                item.actions.map(option => (
+                  <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>
+                    {option.text}
+                  </MenuItem>
+                ))}
+            </Menu>
+          </div>
+        )}
       </div>
     </div>
-  )
+  );
 }

package/lib/widget/SummaryItem/index.tsx

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

package/lib/widget/SummaryList/SummaryList.tsx

@@ -1,25 +1,22 @@
-import React 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';
 
-// SummaryList does NOT have getPConnect. So, no need to extend from PConnProps
-
-interface SummaryListProps {
+interface SummaryListProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  arItems$: Array<any>,
-  menuIconOverride$?: string,
-  menuIconOverrideAction$?: any
+  arItems$: any[];
+  menuIconOverride$?: string;
+  menuIconOverrideAction$?: any;
 }
 
-
 export default function SummaryList(props: SummaryListProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const SummaryItem = getComponentFromMap('SummaryItem');
 
-  const { menuIconOverride$: menuOverride = ""} = props;
+  const { menuIconOverride$: menuOverride = '' } = props;
   return (
     <div>
       {props.arItems$.map(file => (
-        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$}></SummaryItem>
+        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$} />
       ))}
     </div>
   );

package/lib/widget/ToDo/ToDo.css

@@ -18,9 +18,9 @@
 
 .psdk-assignment-count {
   background-color: var(--app-primary-light-color);
-  margin: .5rem;
+  margin: 0.5rem;
   border-radius: 45%;
-  padding: 0.15rem .4rem;
+  padding: 0.15rem 0.4rem;
 }
 
 .psdk-todo-id {
@@ -48,7 +48,7 @@
 
 .psdk-todo-assignment {
   display: inline-flex;
-  width:100%;
+  width: 100%;
   padding: 0.625rem 0rem;
 }
 
@@ -86,7 +86,7 @@
   text-align: center;
 }
 
-.psdk-todo-avatar-header{
+.psdk-todo-avatar-header {
   display: flex;
   align-items: center;
   padding: 16px;