@pega/react-sdk-overrides 0.23.23 → 0.23.25

package/lib/designSystemExtension/Banner/Banner.tsx

@@ -6,7 +6,7 @@ export default function Banner(props) {
   const { a, b, banner } = props;
   const { title, message, backgroundImage } = banner;
   return (
-    <div>
+    <div style={{ marginBottom: '2rem' }}>
       <div
         className='background-image-style'
         style={{ backgroundImage: `url(${backgroundImage})` }}

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -0,0 +1,36 @@
+.quick-link-ul-list {
+  list-style: none;
+  padding: 0;
+  grid-template-columns: repeat(3, 1fr);
+  display: grid;
+  gap: calc(1rem);
+}
+
+.quick-link-list {
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 8px;
+}
+
+.quick-link-button {
+  text-transform: capitalize !important;
+  font-size: 16px !important;
+  color: white !important;
+  padding: calc(0.5rem * 2) !important;
+  height: 6rem;
+  width: 100%;
+  justify-content: start !important;
+}
+
+.quick-link-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  filter: invert(100%);
+}
+
+.quick-link-button-span {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+ }

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+import './WssQuickCreate.css';
+
+export default function WssQuickCreate(props) {
+  const { heading, actions } = props;
+
+  return (
+    <div>
+      <h1>{heading}</h1>
+      <ul 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>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}

package/lib/designSystemExtension/WssQuickCreate/index.tsx

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

package/lib/infra/View/View.tsx

@@ -30,7 +30,7 @@ const NO_HEADER_TEMPLATES = [
 ];
 
 export default function View(props) {
-  const { children, template, getPConnect, mode } = props;
+  const { children, template, getPConnect, mode, visibility, name: pageName } = props;
   let { label, showLabel = false } = props;
 
   // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
@@ -45,6 +45,13 @@ export default function View(props) {
     showLabel = true;
   }
 
+  const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
+  // As long as the template is defined in the dependencies of the view
+  // it will be loaded, otherwise fall back to single column
+  if (visibility === false) {
+    return '';
+  }
+
   // As long as the template is defined in the dependencies of the view
   // it will be loaded, otherwise fall back to single column
   //  JA - React SDK not using LazyComponentMap yet
@@ -88,7 +95,7 @@ export default function View(props) {
     // console.log(`View rendering template: ${template}`);
 
     // spreading because all props should go to the template
-    let RenderedTemplate = <ViewTemplate {...props}>{children}</ViewTemplate>;
+    let RenderedTemplate = <ViewTemplate key={key} {...props}>{children}</ViewTemplate>;
 
     if (FORMTEMPLATES.includes(template) && showLabel) {
       // Original:

package/lib/template/AppShell/AppShell.tsx

@@ -24,7 +24,6 @@ const useStyles = makeStyles(theme => ({
   wsscontent: {
     flexGrow: 1,
     height: '100vh',
-    overflow: 'auto',
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1)
   }

package/lib/template/DefaultForm/DefaultForm.css

@@ -23,3 +23,8 @@
 .psdk-default-form-three-column .grid-column {
   grid-column: 1 / span 3;
 }
+
+.psdk-default-form-instruction-text{
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,5 +1,5 @@
-import React, { createElement } from "react";
-import PropTypes from "prop-types";
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 
 import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
@@ -13,19 +13,19 @@ export default function DefaultForm(props) {
 
   let divClass: string;
 
-  const numCols = NumCols || "1";
+  const numCols = NumCols || '1';
   switch (numCols) {
-    case "1" :
-      divClass = "psdk-default-form-one-column";
+    case '1':
+      divClass = 'psdk-default-form-one-column';
       break;
-    case "2" :
-      divClass = "psdk-default-form-two-column";
+    case '2':
+      divClass = 'psdk-default-form-two-column';
       break;
-    case "3" :
-      divClass = "psdk-default-form-three-column";
+    case '3':
+      divClass = 'psdk-default-form-three-column';
       break;
-    default :
-      divClass = "psdk-default-form-one-column";
+    default:
+      divClass = 'psdk-default-form-one-column';
       break;
   }
 
@@ -35,15 +35,19 @@ export default function DefaultForm(props) {
   // to take the children and create components for them, put in an array and pass as the
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
-  // eslint-disable-next-line react/no-array-index-key
-  const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), {...kid, key: idx}));
+  const dfChildren = arChildren.map((kid, idx) =>
+    // eslint-disable-next-line react/no-array-index-key
+    createElement(createPConnectComponent(), { ...kid, key: idx })
+  );
 
   return (
-    <div className={divClass}>
-      <div>{instructionText}</div>
-      {dfChildren}
-    </div>
-  )
+    <>
+      {instructionText && (
+        <div className='psdk-default-form-instruction-text'>{instructionText}</div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
+  );
 }
 
 DefaultForm.propTypes = {
@@ -52,5 +56,5 @@ DefaultForm.propTypes = {
 };
 
 DefaultForm.defaultProps = {
-  NumCols: "1"
+  NumCols: '1'
 };

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -79,14 +79,17 @@ export default function FieldGroupTemplate(props) {
 
   pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
   const memoisedReadOnlyList = useMemo(() => {
-    return referenceList.map((item, index) => (
-      <FieldGroup
-        key={item[heading]}
-        name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
-      >
-        {buildView(pConn, index, lookForChildInConfig)}
-      </FieldGroup>
-    ));
+    return referenceList.map((item, index) => {
+      const key = item[heading] || `field-group-row-${index}`;
+      return (
+        <FieldGroup
+          key={key}
+          name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
+        >
+          {buildView(pConn, index, lookForChildInConfig)}
+        </FieldGroup>
+      );
+    });
   }, []);
 
   return <div>{memoisedReadOnlyList}</div>;

package/lib/template/WssNavBar/WssNavBar.css

@@ -3,3 +3,9 @@
   text-transform: capitalize !important;
   font-size: 1rem !important;
 }
+
+.nav-bar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 100;
+}

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -56,7 +56,7 @@ export default function WssNavBar(props) {
   };
 
   return (
-    <div id='NavBar'>
+    <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
         <Container maxWidth='xl'>
           <Toolbar disableGutters>

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import WssQuickCreate from '@pega/react-sdk-components/lib/components/designSystemExtension/WssQuickCreate';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+declare const PCore: any;
+
+export default function QuickCreate(props) {
+  const { getPConnect, heading, showCaseIcons, classFilter } = props;
+  const pConn = getPConnect();
+  const createCase = (className) => {
+    pConn
+      .getActionsApi()
+      .createWork(className, {})
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        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', PCore.getAssetLoader().getStaticServerUrl());
+      let label = '';
+      envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype) => {
+        if (casetype.pyWorkTypeImplementationClassName === item) {
+          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, PCore.getAssetLoader().getStaticServerUrl());
+          label = casetype.pyWorkTypeName ?? '';
+        }
+      });
+      if (label !== '') {
+        cases.push({
+          label,
+          onClick: () => {
+            createCase(item);
+          },
+          ...(showCaseIcons && { icon })
+        });
+      }
+    });
+  }
+
+  return (
+      <div>
+        <WssQuickCreate heading={heading} actions={cases}></WssQuickCreate>
+      </div>
+    );
+}

package/lib/widget/QuickCreate/index.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.23",
+  "version": "0.23.25",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [