@pega/react-sdk-overrides 0.25.2 → 0.25.3

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -1,13 +1,11 @@
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import { Link } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-/* although this is called the SemanticLink component, we are not yet displaying as a
-SemanticLink in SDK and only showing the value as a read only text field. */
+import semanticUtils from './utils';
 
+// eslint-disable-next-line
 const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
@@ -41,36 +39,170 @@ const useStyles = makeStyles(theme => ({
 
 interface SemanticLinkProps extends PConnFieldProps {
   // If any, enter additional props that only exist on SemanticLink here
-  // from previous PropTypes
   text: string;
+  resourcePayload: any;
+  resourceParams: any;
+  previewKey: string | null;
+  onClick: (event: any) => void;
+  testId: string;
+  referenceType: string | null;
+  dataRelationshipContext: string | null;
+  contextPage: any;
 }
 
 export default function SemanticLink(props: SemanticLinkProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldValueList = getComponentFromMap('FieldValueList');
+  const {
+    text,
+    resourcePayload = {},
+    resourceParams = {},
+    getPConnect,
+    previewKey,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onClick,
+    testId = '',
+    referenceType,
+    dataRelationshipContext = null,
+    contextPage,
+    ...restProps
+  } = props;
+  const { ACTION_OPENWORKBYHANDLE, ACTION_SHOWDATA }: any = PCore.getSemanticUrlUtils().getActions();
+  const pConnect = getPConnect();
+  const dataResourcePayLoad = resourcePayload?.resourceType === 'DATA' ? resourcePayload : null;
 
-  const { text, displayMode, label, hideLabel } = props;
-  const classes = useStyles();
+  const {
+    RESOURCE_TYPES: { DATA },
+    WORKCLASS,
+    CASE_INFO: { CASE_INFO_CLASSID }
+  } = PCore.getConstants();
 
-  if (displayMode === 'DISPLAY_ONLY' || (!displayMode && label !== undefined)) {
-    const value = text || '---';
-    return (
-      <Grid container spacing={1} style={{ padding: '4px 0px' }} id='semantic-link-grid'>
-        <Grid item xs={6}>
-          <Typography variant='body2' component='span' className={`${classes.fieldLabel} ${classes.fieldMargin}`}>
-            {label}
-          </Typography>
-        </Grid>
-        <Grid item xs={6}>
-          <Typography variant='body2' component='span' className={classes.fieldValue}>
-            {value}
-          </Typography>
-        </Grid>
-      </Grid>
+  let linkURL = '';
+  let payload = {};
+  let dataViewName;
+  let linkComponentProps = {
+    href: linkURL
+  };
+  if (text) {
+    (linkComponentProps as any).href = linkURL;
+  }
+  let isData = false;
+  const shouldTreatAsDataReference = !previewKey && resourcePayload.caseClassName;
+  if (contextPage?.classID) {
+    resourcePayload.caseClassName = contextPage.classID;
+  }
+  /* TODO : In case of duplicate search case the classID is Work- need to set it to
+  the current case class ID */
+  if (resourcePayload.caseClassName === WORKCLASS) {
+    resourcePayload.caseClassName = pConnect.getValue(CASE_INFO_CLASSID);
+  }
+
+  function showDataAction() {
+    if (dataResourcePayLoad && dataResourcePayLoad.resourceType === 'DATA') {
+      const { content } = dataResourcePayLoad;
+      const lookUpDataPageInfo = PCore.getDataTypeUtils().getLookUpDataPageInfo(dataResourcePayLoad?.className);
+      const lookUpDataPage = PCore.getDataTypeUtils().getLookUpDataPage(dataResourcePayLoad?.className);
+      if (lookUpDataPageInfo) {
+        const { parameters }: any = lookUpDataPageInfo;
+        payload = Object.keys(parameters).reduce((acc, param) => {
+          const paramValue = parameters[param];
+          return {
+            ...acc,
+            [param]: PCore.getAnnotationUtils().isProperty(paramValue) ? content[PCore.getAnnotationUtils().getPropertyName(paramValue)] : paramValue
+          };
+        }, {});
+      }
+      getPConnect()
+        .getActionsApi()
+        .showData('pyDetails', lookUpDataPage, {
+          ...payload
+        });
+    }
+    if ((referenceType && referenceType.toUpperCase() === DATA) || shouldTreatAsDataReference) {
+      getPConnect()
+        .getActionsApi()
+        .showData('pyDetails', dataViewName, {
+          ...payload
+        });
+    }
+  }
+
+  function openLinkClick(e) {
+    if (!e.metaKey && !e.ctrlKey) {
+      e.preventDefault();
+      if (
+        (dataResourcePayLoad && dataResourcePayLoad.resourceType === 'DATA') ||
+        (referenceType && referenceType.toUpperCase() === DATA) ||
+        shouldTreatAsDataReference
+      ) {
+        showDataAction();
+      } else if (previewKey) {
+        getPConnect().getActionsApi().openWorkByHandle(previewKey, resourcePayload.caseClassName);
+      }
+    }
+  }
+
+  if ((referenceType && referenceType.toUpperCase() === DATA) || shouldTreatAsDataReference) {
+    try {
+      isData = true;
+      // @ts-expect-error
+      const dataRefContext = semanticUtils.getDataReferenceInfo(pConnect, dataRelationshipContext, contextPage);
+      dataViewName = dataRefContext.dataContext;
+      payload = dataRefContext.dataContextParameters as any;
+    } catch (error) {
+      console.log('Error in getting the data reference info', error);
+    }
+  } else if (resourcePayload && resourcePayload.resourceType === 'DATA') {
+    isData = true;
+    dataViewName = PCore.getDataTypeUtils().getLookUpDataPage(resourcePayload.className);
+    const lookUpDataPageInfo = PCore.getDataTypeUtils().getLookUpDataPageInfo(resourcePayload.className);
+    const { content } = resourcePayload;
+    if (lookUpDataPageInfo) {
+      const { parameters }: any = lookUpDataPageInfo;
+      payload = Object.keys(parameters).reduce((acc, param) => {
+        const paramValue = parameters[param];
+        return {
+          ...acc,
+          [param]: PCore.getAnnotationUtils().isProperty(paramValue) ? content[PCore.getAnnotationUtils().getPropertyName(paramValue)] : paramValue
+        };
+      }, {});
+    } else {
+      const keysInfo = PCore.getDataTypeUtils().getDataPageKeys(dataViewName) ?? [];
+      payload = keysInfo.reduce((acc, curr) => {
+        return {
+          ...acc,
+          [curr.keyName]: content[curr.isAlternateKeyStorage ? curr.linkedField : curr.keyName]
+        };
+      }, {});
+    }
+  }
+
+  if (isData && dataViewName && payload) {
+    linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(
+      ACTION_SHOWDATA,
+      { pageName: 'pyDetails', dataViewName },
+      {
+        ...payload
+      }
     );
+  } else {
+    // BUG-678282 fix to handle scenario when workID was not populated.
+    // Check renderParentLink in Caseview / CasePreview
+    resourceParams.objectID = resourceParams.workID === '' && typeof previewKey === 'string' ? previewKey.split(' ')[1] : resourceParams.workID;
+    if (previewKey) {
+      resourceParams.id = previewKey;
+    }
+    linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_OPENWORKBYHANDLE, resourcePayload, resourceParams);
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={text} variant='stacked' />;
+  if (text) {
+    linkComponentProps = {
+      ...linkComponentProps,
+      href: linkURL
+    };
   }
+
+  return (
+    <Link component='button' {...linkComponentProps} {...restProps} onClick={openLinkClick} data-testid={testId}>
+      {text}
+    </Link>
+  );
 }

package/lib/field/SemanticLink/utils.ts

@@ -32,7 +32,7 @@ function getDataReferenceInfo(pConnect, dataRelationshipContext) {
     dataContext = name;
     for (const [key, value] of Object.entries(parameters)) {
       const property =
-        // @ts-ignore - Property 'getLeafPropertyName' is private and only accessible within class 'AnnotationUtils'
+        // @ts-expect-error - Property 'getLeafPropertyName' is private and only accessible within class 'AnnotationUtils'
         dataRelationshipContext !== null ? annotationUtils.getPropertyName(value as string) : annotationUtils.getLeafPropertyName(value);
       payload[key] = pConnect.getValue(`.${property}`);
     }

package/lib/field/TextContent/TextContent.tsx

@@ -38,7 +38,6 @@ export default function TextContent(props: TextContentProps) {
       break;
 
     default:
-      // eslint-disable-next-line no-console
       console.error(`TextContent got an expected displayAs prop: ${displayAs}`);
       break;
   }

package/lib/field/UserReference/UserReference.tsx

@@ -89,7 +89,6 @@ const UserReference = (props: UserReferenceProps) => {
           setDropDownDataSource(ddDataSource);
         })
         .catch(err => {
-          // eslint-disable-next-line no-console
           console.error(err);
         });
     }

package/lib/helpers/attachmentHelpers.ts

@@ -1,20 +1,67 @@
+import { useCallback } from 'react';
 import download from 'downloadjs';
 
-export const validateMaxSize = (fileObj: any, maxSizeInMB: string): boolean => {
-  const fileSize = (fileObj.size / 1048576).toFixed(2);
-  return parseFloat(fileSize) < parseFloat(maxSizeInMB);
+export const isContentBinary = headers => {
+  return headers && headers['content-transfer-encoding'] === 'binary';
 };
 
-export const fileDownload = (data, fileName, ext) => {
+export const isContentBase64 = headers => {
+  return headers && headers['content-transfer-encoding'] === 'base64';
+};
+
+export const fileDownload = (data, fileName, ext, headers) => {
   const name = ext ? `${fileName}.${ext}` : fileName;
   // Temp fix: downloading EMAIl type attachment as html file
   if (ext === 'html') {
-    download(data, name, 'text/html');
+    download(isContentBase64(headers) ? atob(data) : data, name, 'text/html');
+  } else if (isContentBinary(headers)) {
+    download(data, name);
   } else {
     download(atob(data), name);
   }
 };
 
+export const fileDownloadVar = (content, type, name, extension) => {
+  if (type === 'FILE' || type === undefined) {
+    fileDownload(content.data, name, extension, content.headers);
+  } else if (type === 'URL') {
+    let { data } = content;
+    if (!/^(http|https):\/\//.test(data)) {
+      data = `//${data}`;
+    }
+    window.open(content.data, '_blank');
+  } else if (type === 'EMAIL') {
+    // Temp Fix: for EMAIL type attachment
+    fileDownload(content.data, name, 'html', content.headers);
+  }
+};
+
+export const useFileDownload = context => {
+  return useCallback(
+    ({ ID, name, extension, type, category, responseType }) => {
+      if (category !== 'pxDocument') {
+        PCore.getAttachmentUtils()
+          .downloadAttachment(ID, context, responseType)
+          .then(content => {
+            fileDownloadVar(content, type, name, extension);
+          })
+
+          .catch(console.error);
+      } else {
+        PCore.getAttachmentUtils()
+          // @ts-expect-error
+          .downloadDocument(ID, context, responseType)
+          .then(content => {
+            fileDownloadVar(content, type, name, extension);
+          })
+
+          .catch(console.error);
+      }
+    },
+    [context]
+  );
+};
+
 export const getIconFromFileType = (fileType): string => {
   let icon = 'document-doc';
   if (!fileType) return icon;
@@ -42,35 +89,9 @@ export const getIconFromFileType = (fileType): string => {
   return icon;
 };
 
-export const getIconForAttachment = (inThis: any, attachment: any): string => {
-  let icon;
-  switch (attachment.type) {
-    case 'FILE':
-      icon = inThis.getIconFromFileType(attachment.mimeType);
-      break;
-    case 'URL':
-      icon = 'chain';
-      break;
-    default:
-      icon = 'document-doc';
-  }
-  return icon;
+export const validateMaxSize = (fileObj: any, maxSizeInMB: string): boolean => {
+  const fileSize = (fileObj.size / 1048576).toFixed(2);
+  return parseFloat(fileSize) < parseFloat(maxSizeInMB);
 };
 
-export const buildFilePropsFromResponse = (
-  respObj
-): {
-  props: { meta: string; name: string; icon: string };
-  responseProps: any;
-} => {
-  return {
-    props: {
-      meta: `${respObj.pyCategoryName}, ${respObj.pxCreateOperator}`,
-      name: respObj.pyAttachName,
-      icon: getIconFromFileType(respObj.pyMimeFileExtension)
-    },
-    responseProps: {
-      ...respObj
-    }
-  };
-};
+export const isFileUploadedToServer = file => file.responseProps && !file.responseProps.ID?.includes('temp');

package/lib/helpers/common-utils.ts

@@ -1,4 +1,4 @@
-export function isEmptyObject(obj: Object): boolean {
+export function isEmptyObject(obj: object): boolean {
   return Object.keys(obj).length === 0;
 }
 
@@ -16,7 +16,7 @@ export function getGenericFieldsLocalizedValue(path: string, key: string): strin
 
   // Split the path and traverse the object
   const pathParts = path.split('.');
-  let currentObj = localeStore;
+  let currentObj: any = localeStore;
 
   for (const part of pathParts) {
     if (!currentObj[part]) return key;

package/lib/helpers/data_page.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const getDataPage = (dataPageName, parameters, context) => {
   let dataViewParams;
   if (parameters) {

package/lib/helpers/formatters/CurrencyMap.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-template-curly-in-string */
-
 type CurrencyMapType = {
   name: string;
   symbolFormat: string;

package/lib/helpers/simpleTableHelpers.ts

@@ -89,6 +89,51 @@ export const getApiContext = (processedData, pConnect, reorderCB) => {
   };
 };
 
+const PRIMARY_FIELDS = 'pyPrimaryFields';
+const SUPPORTED_FIELD_TYPES = [
+  'Address',
+  'TextArea',
+  'TextInput',
+  'Phone',
+  'Email',
+  'Time',
+  'URL',
+  'Percentage',
+  'Integer',
+  'Decimal',
+  'Date',
+  'DateTime',
+  'Currency',
+  'Checkbox',
+  'Dropdown',
+  'AutoComplete',
+  'UserReference',
+  'RichText'
+];
+
+export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
+  let primaryFields: any = [];
+  let configFields: any = [];
+
+  if (primaryFieldsViewIndex > -1) {
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    if (Array.isArray(primaryFieldVMD)) {
+      primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    } else if (primaryFieldVMD?.classID === contextClass) {
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    }
+
+    if (primaryFields.length) {
+      primaryFields = primaryFields.filter(primaryField => SUPPORTED_FIELD_TYPES.includes(primaryField.type));
+    }
+  }
+
+  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  // filter duplicate fields after combining raw fields and primary fields
+  return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
+};
+
 export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, name, propertyLabel, isDataObject, parameters) => {
   return {
     name,
@@ -126,11 +171,80 @@ export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, nam
   };
 };
 
-export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+export function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+/**
+ * [getFieldLabel]
+ * Description - A utility that returns resolved field label for "@FL" annotation i.e from data model.
+ * @param {Object} fieldConfig
+ * @returns {string} resolved label string
+ *
+ * example:
+ * fieldConfig = {label: "@FL .pyID", classID: "TestCase-Work"};
+ * return "Case ID"
+ */
+export function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+  return fieldLabel;
+}
+
+export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
+  const labelsOfFields: any = [];
+  const { columnsRawConfig = [] } = options;
+  fields.forEach((field, idx) => {
+    const rawColumnConfig = columnsRawConfig[idx]?.config;
+    if (field.config.value === PRIMARY_FIELDS) {
+      labelsOfFields.push('');
+    } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
+      labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
+    } else {
+      labelsOfFields.push(field.config.label || field.config.caption);
+    }
+  });
+
+  if (primaryFieldsViewIndex > -1) {
+    const totalPrimaryFieldsColumns = configFields.length - fields.length + 1;
+    if (totalPrimaryFieldsColumns) {
+      const primaryFieldLabels: any = [];
+      for (let i = primaryFieldsViewIndex; i < primaryFieldsViewIndex + totalPrimaryFieldsColumns; i += 1) {
+        let label = configFields[i].config?.label;
+        if (isFLProperty(label)) {
+          label = getFieldLabel(configFields[i].config);
+        } else if (label.startsWith('@')) {
+          label = label.substring(3);
+        }
+        if (pConnect) {
+          label = pConnect.getLocalizedValue(label);
+        }
+        primaryFieldLabels.push(label);
+      }
+      labelsOfFields.splice(primaryFieldsViewIndex, 1, ...primaryFieldLabels);
+    } else {
+      labelsOfFields.splice(primaryFieldsViewIndex, 1);
+    }
+  }
+  return labelsOfFields;
+};
+
+export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+  const { primaryFieldsViewIndex, fields } = options;
+
+  // get resolved field labels for primary fields raw config included in configFields
+  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
+    columnsRawConfig: pConnect.getRawConfigProps()?.children.find(item => item?.name === 'Columns')?.children
+  });
+
   const fieldDefs = configFields.map((field, index) => {
     return {
       type: 'text',
-      label: fields[index].config.label || fields[index].config.caption,
+      label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
       name: field.config.value.substr(4),
@@ -213,7 +327,7 @@ export function createPConnect(contextName, referenceList, pageReference): any {
   };
 
   // create PConnect object
-  const config = { meta: {}, options };
+  const config: any = { meta: {}, options };
   const { getPConnect } = PCore.createPConnect(config);
 
   return getPConnect();
@@ -235,7 +349,6 @@ export const filterData = filterByColumns => {
             filterValue =
               filterObj.containsFilterValue !== null && filterObj.containsFilterValue !== '' ? Utils.getSeconds(filterObj.containsFilterValue) : null;
 
-            // eslint-disable-next-line sonarjs/no-nested-switch
             switch (filterObj.containsFilter) {
               case 'notequal':
                 // becasue filterValue is in minutes, need to have a range of less than 60 secons
@@ -302,7 +415,6 @@ export const filterData = filterByColumns => {
             value = item[filterObj.ref].toLowerCase();
             filterValue = filterObj.containsFilterValue.toLowerCase();
 
-            // eslint-disable-next-line sonarjs/no-nested-switch
             switch (filterObj.containsFilter) {
               case 'contains':
                 if (value.indexOf(filterValue) < 0) {

package/lib/helpers/utils.ts

@@ -48,7 +48,6 @@ export class Utils {
           // eslint-disable-next-line no-case-declarations
           const dataPage = configProps.datasource;
           if (typeof dataPage === 'string' && dataObject[dataPage]) {
-            // eslint-disable-next-line no-alert
             alert('need to handle data page');
           } else {
             let listSourceItems = configProps.listOutput;
@@ -337,6 +336,14 @@ export class Utils {
   static isObject(objValue) {
     return objValue && typeof objValue === 'object' && objValue.constructor === Object;
   }
+
+  static getMappedKey(key) {
+    const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
+    if (!mappedKey) {
+      return key;
+    }
+    return mappedKey;
+  }
 }
 
 export default Utils;

package/lib/helpers/versionHelpers.ts

@@ -10,6 +10,5 @@ export const sdkVersion = '8.7';
 export function compareSdkPCoreVersions() {
   // const theConstellationVersion = PCore.getPCoreVersion();
 
-  // eslint-disable-next-line no-console
   console.warn(`Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`);
 }

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -1,6 +1,6 @@
 import makeStyles from '@mui/styles/makeStyles';
 import Button from '@mui/material/Button';
-import { Grid, Divider } from '@mui/material';
+import { Grid2, Divider } from '@mui/material';
 
 // ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
 interface ActionButtonsProps {
@@ -10,13 +10,18 @@ interface ActionButtonsProps {
   onButtonPress: any;
 }
 
-const useStyles = makeStyles((/* theme */) => ({
-  button: {
-    padding: '0px 5px'
-  },
+const useStyles = makeStyles(theme => ({
   divider: {
     marginTop: '10px',
     marginBottom: '10px'
+  },
+  secondaryButton: {
+    backgroundColor: theme.actionButtons.secondary.backgroundColor,
+    color: theme.actionButtons.secondary.color
+  },
+  primaryButton: {
+    backgroundColor: theme.actionButtons.primary.backgroundColor,
+    color: theme.actionButtons.primary.color
   }
 }));
 
@@ -33,42 +38,44 @@ export default function ActionButtons(props: ActionButtonsProps) {
   return (
     <>
       <Divider className={classes.divider} />
-      <Grid container spacing={4} justifyContent='space-between'>
-        <Grid item>
-          <Grid container spacing={1}>
+      <Grid2 container spacing={4} justifyContent='space-between'>
+        <Grid2>
+          <Grid2 container spacing={1}>
             {arSecondaryButtons.map(sButton => (
-              <Grid item key={sButton.name}>
+              <Grid2 key={sButton.name}>
                 <Button
-                  variant='contained'
+                  className={classes.secondaryButton}
                   color='secondary'
+                  variant='contained'
                   onClick={() => {
                     _onButtonPress(sButton.jsAction, 'secondary');
                   }}
                 >
                   {localizedVal(sButton.name, localeCategory)}
                 </Button>
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
-        </Grid>
-        <Grid item>
-          <Grid container spacing={1}>
+          </Grid2>
+        </Grid2>
+        <Grid2>
+          <Grid2 container spacing={1}>
             {arMainButtons.map(mButton => (
-              <Grid item key={mButton.name}>
+              <Grid2 key={mButton.name}>
                 <Button
-                  variant='contained'
+                  className={classes.primaryButton}
                   color='primary'
+                  variant='contained'
                   onClick={() => {
                     _onButtonPress(mButton.jsAction, 'primary');
                   }}
                 >
                   {localizedVal(mButton.name, localeCategory)}
                 </Button>
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
-        </Grid>
-      </Grid>
+          </Grid2>
+        </Grid2>
+      </Grid2>
     </>
   );
 }

package/lib/infra/Assignment/Assignment.tsx

@@ -13,7 +13,7 @@ interface AssignmentProps extends PConnProps {
   itemKey: string;
   isInModal: boolean;
   banners: any[];
-  // eslint-disable-next-line react/no-unused-prop-types
+
   actionButtons: any[];
 }
 
@@ -133,7 +133,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   function showToast(message: string) {
     const theMessage = `Assignment: ${message}`;
-    // eslint-disable-next-line no-console
+
     console.error(theMessage);
     setSnackbarMessage(message);
     setShowSnackbar(true);