@pega/react-sdk-overrides 24.2.11 → 25.1.11

package/lib/template/DataReference/utils.ts

@@ -0,0 +1,90 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+export function getFieldMeta(getPConnect, dataRelationshipContext) {
+  const pConn = getPConnect();
+  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference = null;
+  if (dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  const fieldMetadata =
+    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+  });
+
+  return { compositeKeys, fieldMetadata };
+}
+
+/**
+ * returns array of self-referenced properties of the datasource
+ * Ex: returns ["@P .DataRef.pyGUID", "@P .DataRef.customerID"]
+ */
+const getCompositeKeys = (pConnect, property) => {
+  const fieldMetadata = pConnect.getFieldMetadata(property) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach(param => {
+    if (isSelfReferencedProperty(param, property)) {
+      compositeKeys.push(param);
+    }
+  });
+  return compositeKeys;
+};
+
+export const getFirstChildConfig = ({
+  firstChildMeta,
+  getPConnect,
+  rawViewMetadata,
+  contextClass,
+  dataReferenceConfigToChild,
+  isCreateNewReferenceEnabled,
+  disableStartingFieldsForReference,
+  pyID
+}) => {
+  const config = {
+    ...firstChildMeta.config,
+    ...dataReferenceConfigToChild
+  };
+  const compositeKeys = getCompositeKeys(getPConnect(), dataReferenceConfigToChild?.dataRelationshipContext);
+  return {
+    ...config,
+    viewName: getPConnect().getCurrentView(),
+    referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
+    parameters: rawViewMetadata.config.parameters,
+    localeReference: rawViewMetadata.config.localeReference,
+    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+    actions: firstChildMeta.type === 'SimpleTableSelect' &&
+      isCreateNewReferenceEnabled && [
+        {
+          action: 'ADD_CASE',
+          config: {
+            label: '@L Add',
+            caseType: contextClass,
+            inputFields: disableStartingFieldsForReference
+              ? {}
+              : {
+                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
+                }
+          }
+        }
+      ],
+    compositeKeys
+  };
+};

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,11 +1,11 @@
-import { createElement, PropsWithChildren } from 'react';
+import { createElement, type PropsWithChildren } from 'react';
 
 import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
 import { getKeyForMappedField, mapStateToProps } from './utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './DefaultForm.css';
 
@@ -56,7 +56,7 @@ export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>)
       {instructions && (
         <div className='psdk-default-form-instruction-text'>
           {/* server performs sanitization method for instructions html content */}
-          {/* eslint-disable react/no-danger */}
+          {}
           <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
         </div>
       )}

package/lib/template/DefaultForm/utils/index.ts

@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 export const mapStateToProps: any = (_, ownProps) => {
   const { getPConnect } = ownProps;
 
@@ -24,5 +22,5 @@ export const getKeyForMappedField = field => {
     return JSON.stringify(pConnect.meta);
   }
 
-  return uuidv4();
+  return crypto.randomUUID();
 };

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';

package/lib/template/Details/Details/Details.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function Details(props: DetailsProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function Details(props: DetailsProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={12} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 12 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={12} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 12 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -1,9 +1,9 @@
-import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
 
 import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsSubTabsProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsThreeColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={4} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 4 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={4} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 4 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsTwoColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={6} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 6 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={6} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 6 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -4,7 +4,7 @@ import { TabContext, TabPanel } from '@mui/lab';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 const useStyles = makeStyles(() => ({
   tab: {

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useLayoutEffect, useMemo } from 'react';
 
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FieldGroupTemplateProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -15,6 +14,7 @@ interface FieldGroupTemplateProps extends PConnProps {
   displayMode?: string;
   fieldHeader?: string;
   allowTableEdit: boolean;
+  allowActions?: any;
 }
 
 export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
@@ -31,6 +31,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     heading = '',
     displayMode,
     fieldHeader,
+    allowActions,
     allowTableEdit: allowAddEdit
   } = props;
   const pConn = getPConnect();
@@ -40,9 +41,14 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
   const HEADING = heading ?? 'Row';
 
+  const hasAllowActions = Object.keys(allowActions ?? {}).length > 0;
+  const { allowAdd: actionAdd, allowDelete: actionDelete } = allowActions ?? {};
+  const allowAdd = hasAllowActions ? (actionAdd ?? true) : (allowAddEdit ?? true);
+  const allowDelete = hasAllowActions ? (actionDelete ?? true) : (allowAddEdit ?? true);
+
   useLayoutEffect(() => {
     if (!isReadonlyMode) {
-      // @ts-ignore - Expected 3 arguments, but got 1
+      // @ts-expect-error - Expected 3 arguments, but got 1
       pConn.getListActions().initDefaultPageInstructions(resolvedList);
     }
   }, [referenceList?.length]);
@@ -73,7 +79,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
         pConn.getListActions().deleteEntry(index);
       }
     };
-    if (referenceList.length === 0 && allowAddEdit !== false) {
+    if (referenceList.length === 0 && allowAdd) {
       addFieldGroupItem();
     }
 
@@ -88,8 +94,8 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     return (
       <FieldGroupList
         items={MemoisedChildren}
-        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}
-        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}
+        onAdd={allowAdd ? addFieldGroupItem : undefined}
+        onDelete={allowDelete ? deleteFieldGroupItem : undefined}
       />
     );
   }

package/lib/template/HierarchicalForm/HierarchicalForm.tsx

@@ -0,0 +1,58 @@
+import { type PropsWithChildren } from 'react';
+import { Tab, Tabs, Box, Badge, Tooltip } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+
+import { useHierarchicalForm, type HierarchicalFormProps } from './hooks';
+
+export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFormProps>) {
+  const { currentTabId, handleTabClick, processedTabs, instructions } = useHierarchicalForm(props);
+
+  if (!currentTabId) {
+    return null;
+  }
+
+  return (
+    <Box display='flex' flexDirection='column'>
+      {instructions && (
+        <Box mb={2}>
+          <div dangerouslySetInnerHTML={{ __html: instructions }} />
+        </Box>
+      )}
+      <Box sx={{ flexGrow: 1 }}>
+        <TabContext value={currentTabId.toString()}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs onChange={handleTabClick} value={currentTabId.toString()} variant='scrollable'>
+              {processedTabs.map((tab: any) => {
+                const tabLabel = tab.name || tab.label;
+                return (
+                  <Tab
+                    key={tab.id}
+                    sx={{ textTransform: 'none' }}
+                    label={
+                      tab.errors ? (
+                        <Tooltip title={`${tabLabel} has errors`} placement='top'>
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <span>{tabLabel}</span>
+                            <Badge badgeContent={tab.errors} color='error' sx={{ '& .MuiBadge-badge': { position: 'static', transform: 'none' } }} />
+                          </Box>
+                        </Tooltip>
+                      ) : (
+                        tabLabel
+                      )
+                    }
+                    value={tab.id?.toString()}
+                  />
+                );
+              })}
+            </Tabs>
+          </Box>
+          {processedTabs.map((tab: any) => (
+            <TabPanel key={tab.id} value={tab.id?.toString()} tabIndex={+tab.id} keepMounted sx={{ px: 0 }}>
+              <div>{tab.content ? tab.content : 'No content exists'}</div>
+            </TabPanel>
+          ))}
+        </TabContext>
+      </Box>
+    </Box>
+  );
+}