@pega/react-sdk-overrides 0.25.3 → 0.25.5

package/lib/infra/MultiStep/MultiStep.tsx

@@ -27,51 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
   }
 
-  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-
-  function _getVIconClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-icon-selected';
-    }
-
-    return 'psdk-vertical-step-icon';
-  }
-
-  function _getVLabelClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-label-selected';
-    }
-
-    return 'psdk-vertical-step-label';
-  }
-
   function _getVBodyClass(index: number): string {
-    if (index < arNavigationSteps.length - 1) {
-      return 'psdk-vertical-step-body psdk-vertical-step-line';
-    }
+    const baseClass = 'psdk-vertical-step-body';
+    const isNotLastStep = index < arNavigationSteps.length - 1;
 
-    return 'psdk-vertical-step-body';
+    return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
   }
 
-  function _getHIconClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-icon-selected';
-    }
-
-    return 'psdk-horizontal-step-icon';
-  }
+  function _getAutoFlexClass(currentStep): string {
+    const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
+    const totalSteps = arNavigationSteps.length;
+    const lastStep = arNavigationSteps[totalSteps - 1];
 
-  function _getHLabelClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-label-selected';
-    }
+    // Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
+    const isCurrentStepActive = currentStep.visited_status === 'current';
+    const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
 
-    return 'psdk-horizontal-step-label';
+    return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
   }
 
-  function _showHLine(index: number): boolean {
-    return index < arNavigationSteps.length - 1;
+  function isLastStep(index: number): boolean {
+    return index === arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -86,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             return (
               <React.Fragment key={mainStep.actionID}>
                 <div className='psdk-vertical-step'>
-                  <div className='psdk-vertical-step-header'>
-                    <div className={_getVIconClass(mainStep.visited_status)}>
+                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                    <div className={`psdk-vertical-step-icon`}>
                       <div className='psdk-vertical-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   <div className={_getVBodyClass(index)}>
                     {mainStep?.steps && (
@@ -122,9 +98,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </ul>
                     )}
                     {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                        {children}
-                      </AssignmentCard>
+                      <div style={{ paddingLeft: 20 }}>
+                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                          {children}
+                        </AssignmentCard>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -138,19 +116,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             {arNavigationSteps.map((mainStep, index) => {
               return (
                 <React.Fragment key={mainStep.actionID}>
-                  <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep)}>
+                  <div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
+                    <div className='psdk-horizontal-step-icon'>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep)}>
-                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
-                        {mainStep.name}
-                      </div>
-                    </div>
+                    <div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
-                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                  {!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
                 </React.Fragment>
               );
             })}

package/lib/infra/View/View.tsx

@@ -38,7 +38,8 @@ const NO_HEADER_TEMPLATES = [
   'WideNarrowDetails',
   'Confirmation',
   'DynamicTabs',
-  'DetailsSubTabs'
+  'DetailsSubTabs',
+  'ListView'
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {

package/lib/template/AppShell/AppShell.tsx

@@ -81,7 +81,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   const classes = useStyles();
   const actionsAPI = pConn.getActionsApi();
   const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
-  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | Blob | null>(null);
   // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [appName, setAppName] = useState('');
@@ -133,8 +133,8 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     }
   }, []);
 
-  const [iconURL, setIconURL] = useState('');
-  const [fullIconURL, setFullIconURL] = useState('');
+  const [iconURL, setIconURL] = useState<string | Blob>('');
+  const [fullIconURL, setFullIconURL] = useState<string | Blob>('');
   useEffect(() => {
     // using the default icon then fetch it from the static folder (not auth involved)
     if (
@@ -150,8 +150,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     // not using default icon to fetch it using the way which uses authentication
     else {
       PCore.getAssetLoader()
-        .getSvcImage(portalLogo)
-        .then(blob => window.URL.createObjectURL(blob))
+        .getSvcImageUrl(portalLogo)
         .then(data => {
           setIconURL(data);
           setFullIconURL(data);
@@ -165,8 +164,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   useEffect(() => {
     if (imageKey && portalTemplate === 'wss') {
       PCore.getAssetLoader()
-        .getSvcImage(imageKey)
-        .then(blob => window.URL.createObjectURL(blob))
+        .getSvcImageUrl(imageKey)
         .then(imagePath => setImageBlobUrl(imagePath));
     }
   }, []);

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -1,95 +1,22 @@
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CaseSummaryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
+  arPrimaryFields: any[];
+  arSecondaryFields: any[];
 }
 
 export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
-  const { getPConnect, children } = props;
-
-  const thePConn = getPConnect();
-  const theConfigProps: any = thePConn.getConfigProps();
-  // const { status, showStatus } = theConfigProps;
-  const status = theConfigProps.status;
-  const showStatus = theConfigProps.showStatus;
-  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'ModalContainer';
-  // from Constellation DX Components
-  // get the primary and secondary fields with the raw data (which has the non-resolved property values)
-  // const regionsRaw = getPConnect().getRawMetadata().children;
-  // const primaryFieldsRaw = regionsRaw[0].children;
-  // const secondaryFieldsRaw = regionsRaw[1].children;
-
-  // From other SDKs
-  // may want to move these into useEffect/useState combo
-  let arPrimaryFields: any[] = [];
-  let arSecondaryFields: any[] = [];
-
-  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
-    const { config, children } = pConnectMeta;
-    const pConnect = getPConnect();
-
-    const caseSummaryComponentObject: any = {};
-
-    const { type } = pConnectMeta;
-    const createdComponent = pConnect.createComponent({
-      type,
-      children: children ? [...children] : [],
-      config: {
-        ...config
-      }
-    });
-
-    caseSummaryComponentObject.value = createdComponent;
-    return caseSummaryComponentObject;
-  }
-
-  function prepareCaseSummaryData(summaryFieldChildren) {
-    const convertChildrenToSummaryData = kid => {
-      return kid?.map((childItem, index) => {
-        const childMeta = childItem.getPConnect().meta;
-        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
-        caseSummaryComponentObject.id = index + 1;
-        return caseSummaryComponentObject;
-      });
-    };
-    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
-  }
-
-  for (const child of children as ReactElement[]) {
-    const childPConn = (child as ReactElement).props.getPConnect();
-    const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
-    if (childPConnData.name.toLowerCase() === 'primary fields') {
-      arPrimaryFields = childPConnData.children;
-      arPrimaryFields.forEach(field => {
-        if (field.config?.value && typeof field.config?.value === 'string') {
-          field.config.value = localizedVal(field.config.value, localeCategory);
-        }
-      });
-    } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
-      const secondarySummaryFields = prepareCaseSummaryData(childPConn);
-      arSecondaryFields = childPConnData.children;
-      arSecondaryFields.forEach((field, index) => {
-        field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
-      });
-    }
-  }
-
-  // At this point, should hand off to another component for layout and rendering
-  //  of primary and secondary fields in the Case Summary
-
-  // debugging/investigation help
-  // console.log(`CaseSummary: arPrimaryFields: ${JSON.stringify(arPrimaryFields)}`);
-  // console.log(`CaseSummary: arSecondaryFields: ${JSON.stringify(arSecondaryFields)}`);
+  const { arPrimaryFields, arSecondaryFields } = props;
 
   return (
     <div id='CaseSummary'>
-      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
+      <CaseSummaryFields theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>
   );

package/lib/template/CaseView/CaseView.tsx

@@ -9,6 +9,7 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { prepareCaseSummaryData } from '@pega/react-sdk-components/lib/components/template/utils';
 
 interface CaseViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -41,9 +42,6 @@ const useStyles = makeStyles(theme => ({
     width: theme.spacing(8),
     height: theme.spacing(8),
     padding: theme.spacing(1)
-  },
-  caseViewIconImage: {
-    filter: 'var(--svg-color)'
   }
 }));
 
@@ -52,6 +50,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
   const VerticalTabs = getComponentFromMap('VerticalTabs');
   const DeferLoad = getComponentFromMap('DeferLoad');
+  const CaseSummary = getComponentFromMap('CaseSummary');
 
   const {
     getPConnect,
@@ -59,12 +58,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     header,
     subheader,
     children = [],
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    showIconInHeader = true,
-    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
+    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '', caseTypeIcon }
   } = props;
   const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
-
   const currentCaseID = props.caseInfo.ID;
   let isComponentMounted = true;
   const { displayOnlyFA } = useContext<any>(StoreContext);
@@ -84,9 +80,8 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
    */
   function getChildRegionByName(inName: string): any {
     for (const child of children as ReactElement[]) {
-      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type.toLowerCase();
-      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name.toLowerCase();
-
+      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type?.toLowerCase();
+      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name?.toLowerCase();
       if (theMetadataType === 'region' && theMetadataName === inName) {
         return child;
       }
@@ -95,13 +90,23 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     return null;
   }
 
-  const theSummaryRegion = getChildRegionByName('summary');
+  const theSummaryRegion = children && children[0];
+
+  const data = prepareCaseSummaryData(theSummaryRegion);
+  const primarySummaryFields = data.primarySummaryFields;
+  const secondarySummaryFields = data.secondarySummaryFields;
+
   const theStagesRegion = getChildRegionByName('stages');
   const theTodoRegion = getChildRegionByName('todo');
   const theUtilitiesRegion = getChildRegionByName('utilities');
   const theTabsRegion = getChildRegionByName('tabs');
 
-  const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
+  let iconForCaseType = caseTypeIcon ? caseTypeIcon.replace('pi pi-', '') : icon;
+
+  if (!iconForCaseType || iconForCaseType.includes('.')) {
+    iconForCaseType = 'polaris-solid';
+  }
+  const caseSvgIconUrl = Utils.getImageSrc(iconForCaseType, Utils.getSDKStaticConentUrl());
 
   const [activeVertTab, setActiveVertTab] = useState(0);
 
@@ -109,7 +114,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
 
   // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
-  const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
+  const theTabsRegionChildren = theTabsRegion?.props.getPConnect().getChildren();
 
   // vertTabInfo is sent to VerticalTabs component
   const vertTabInfo: object[] = [];
@@ -226,13 +231,13 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
                 }
                 avatar={
                   <Avatar className={classes.caseViewIconBox} variant='square'>
-                    <img src={svgCase} className={classes.caseViewIconImage} />
+                    <img src={caseSvgIconUrl} />
                   </Avatar>
                 }
               />
               {getActionButtonsHtml()}
               <Divider />
-              {theSummaryRegion}
+              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>

package/lib/template/DefaultPage/DefaultPage.tsx

@@ -0,0 +1,108 @@
+import { useMemo, Children } from 'react';
+import type { ReactNode } from 'react';
+import { Grid2 } from '@mui/material';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+export interface CommonPageProps {
+  /** Page title */
+  title: string;
+
+  /** Page icon */
+  icon: string;
+
+  /** Region children */
+  children: ReactNode | ReactNode[];
+
+  /** Dynamic page pconnect object */
+  // getPConnect: () => PConnect;
+
+  /** Enable GetNextWork in page */
+  enableGetNextWork?: boolean;
+
+  /** GetAI coaches configured in page */
+  // coaches?: GenAICoach[];
+
+  /** Locale reference */
+  localeReference: string;
+}
+interface DefaultPageProps extends CommonPageProps {
+  /** Default page layout one or two columns */
+  layout: 'one-column' | 'two-column' | 'wide-narrow' | 'narrow-wide' | 'dynamic';
+
+  /** Flag to enable banner/hero */
+  enableBanner?: boolean;
+
+  /** Banner - Heading displayed */
+  heading?: string;
+
+  /** Banner - Message displayed */
+  message?: string;
+
+  /** Banner - Theme of the image */
+  imageTheme?: 'light' | 'dark' | undefined;
+
+  /** Banner - Background image */
+  backgroundImage?: string;
+
+  /** Banner - Background color */
+  backgroundColor?: string;
+
+  /** Banner - Tint image */
+  tintImage?: boolean;
+
+  /** Flag to enable layout model */
+  // layoutModel?: GridLayoutModel | undefined;
+}
+
+const COLUMNS_WIDTHS = {
+  'one-column': [12],
+  'two-column': [6, 6],
+  'narrow-wide': [4, 8],
+  'wide-narrow': [8, 4]
+};
+
+export default function DefaultPage({
+  layout = 'one-column',
+  children,
+  enableBanner,
+  heading = '',
+  message = '',
+  imageTheme,
+  backgroundImage = '',
+  backgroundColor = '',
+  tintImage
+}: DefaultPageProps) {
+  const Banner = getComponentFromMap('Banner');
+
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  if (enableBanner) {
+    return (
+      <Banner
+        variant={layout === 'one-column' ? 'two-column' : layout}
+        a={[childArray[0]]}
+        b={[childArray[1]]}
+        banner={{
+          variant: imageTheme,
+          backgroundColor,
+          title: heading,
+          message,
+          backgroundImage,
+          tintImage
+        }}
+      />
+    );
+  }
+
+  return (
+    <Grid2 container spacing={1}>
+      {childArray.map((child, index) => (
+        <Grid2 key={index} size={COLUMNS_WIDTHS[layout][index]}>
+          {child}
+        </Grid2>
+      ))}
+    </Grid2>
+  );
+}

package/lib/template/DefaultPage/index.tsx

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