@pega/dx-component-builder-sdk 24.1.12 → 24.2.11

package/tests/assets/sdk-a/components/createAll/override-sdk/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -37,11 +37,11 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$ = '';
+  portalApp$: string | undefined = '';
   portalLogoImage$: string;
   showAppName$ = false;
 
-  portalOperator$: string;
+  portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
   actionsAPI: any;
@@ -129,7 +129,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
       this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
       this.showAppName$ = this.configProps$.showAppName;
 
       this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/attachment/attachment.component.ts

@@ -120,7 +120,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
   updateSelf() {
     const configProps: AttachmentProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AttachmentProps;
-    const stateProps: any = this.pConn$.getStateProps();
+    const stateProps = this.pConn$.getStateProps();
     const { value, label, extensions, displayMode } = configProps;
 
     if (configProps.required != null) {
@@ -149,7 +149,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
     this.validateMessage = this.angularPConnectData.validateMessage;
     this.extensions$ = extensions;
-    this.valueRef = (this.pConn$.getStateProps() as any).value;
+    this.valueRef = this.pConn$.getStateProps().value;
     this.valueRef = this.valueRef.startsWith('.') ? this.valueRef.substring(1) : this.valueRef;
     this.displayMode = displayMode;
     /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
@@ -277,7 +277,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       this.updateAttachmentState(this.pConn$, this.getAttachmentKey(this.valueRef), [...currentAttachmentList, ...attachmentsList]);
       if (file.inProgress) {
         // @ts-ignore - 3rd parameter "responseEncoding" should be optional
-        PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
+        PCore.getAttachmentUtils().cancelRequest(file.ID, this.pConn$.getContextName());
       }
     }
 
@@ -317,14 +317,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
           )} ${this.extensions$.replaceAll('.', '')}`;
         }
         if (f.props.error) {
-          const fieldName = (this.pConn$.getStateProps() as any).value;
+          const fieldName = this.pConn$.getStateProps().value;
           const context = this.pConn$.getContextName();
           PCore.getMessageManager().addMessages({
             messages: [
               {
                 type: 'error',
-                // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
-                message: pConn.getLocalizedValue('Error with one or more files', '', '')
+                message: this.pConn$.getLocalizedValue('Error with one or more files', '', '')
               }
             ],
             property: fieldName,
@@ -348,7 +347,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
   }
 
   clearFieldErrorMessages() {
-    const fieldName = (this.pConn$.getStateProps() as any).value;
+    const fieldName = this.pConn$.getStateProps().value;
     const context = this.pConn$.getContextName();
     PCore.getMessageManager().clearMessages({
       type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
@@ -376,14 +375,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
             f.props.icon = this.utils.getIconFromFileType(f.type);
             f.props.name = this.pConn$.getLocalizedValue('Unable to upload file', '', '');
             f.inProgress = false;
-            const fieldName = (this.pConn$.getStateProps() as any).value;
+            const fieldName = this.pConn$.getStateProps().value;
             const context = this.pConn$.getContextName();
             // set errors to property to block submit even on errors in file upload
             PCore.getMessageManager().addMessages({
               messages: [
                 {
                   type: 'error',
-                  // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                   message: this.pConn$.getLocalizedValue('Error with one or more files', '', '')
                 }
               ],

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/feed-container/feed-container.component.ts

@@ -25,8 +25,8 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
-  userName$: string;
-  imageKey$: string;
+  userName$: string | undefined;
+  imageKey$: string | undefined;
 
   currentUserInitials$: string;
   currentUserName$: string;
@@ -65,7 +65,7 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.userName$ = PCore.getEnvironmentInfo().getOperatorName();
     this.imageKey$ = PCore.getEnvironmentInfo().getOperatorImageInsKey();
-    this.updateCurrentUserName(this.userName$);
+    this.updateCurrentUserName(this.userName$ ?? '');
 
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
@@ -402,11 +402,11 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   }
 
   getMessageData() {
-    const messageIDs = (this.pConn$.getConfigProps() as any).messageIDs;
-    const userName = (this.pConn$.getConfigProps() as any).currentUser;
+    const messageIDs = this.pConn$.getConfigProps().messageIDs;
+    const userName = this.pConn$.getConfigProps().currentUser;
     const imageKey = this.pConn$.getValue('OperatorID.pyImageInsKey');
 
-    const oData: any = this.pConn$.getDataObject();
+    const oData = this.pConn$.getDataObject();
 
     if (messageIDs && messageIDs.length > 0) {
       this.pulseMessages$ = JSON.parse(JSON.stringify(oData.pulse.messages));
@@ -532,7 +532,7 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
 
       // If feedAPI is defined then only post message
       if (this.feedAPI) {
-        this./* feedAPI. */ postMessage((this.pConn$.getConfigProps() as any).value, this.pulseConversation);
+        this./* feedAPI. */ postMessage(this.pConn$.getConfigProps().value, this.pulseConversation);
       } else {
         console.log("We don't support Pulse yet");
       }

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.ts

@@ -106,7 +106,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     this.createModalButtons();
 
     PCore.getPubSubUtils().subscribe(
-      (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
+      PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
       this.updateSelf.bind(this),
       'caseAttachmentsUpdateFromCaseview'
     );
@@ -117,10 +117,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       this.angularPConnectData.unsubscribeFn();
     }
 
-    PCore.getPubSubUtils().unsubscribe(
-      (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
-      'caseAttachmentsUpdateFromCaseview'
-    );
+    PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, 'caseAttachmentsUpdateFromCaseview');
   }
 
   // Callback passed when subscribing to store change

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.html

@@ -2,7 +2,7 @@
   <div class="psdk-todo-header">
     <div *ngIf="showTodoList$" class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
     <div id="worklist" class="psdk-todo-text">{{ headerText$ }}</div>
-    <div *ngIf="showTodoList$" class="psdk-assignment-count">{{ assignmentCount$ }}</div>
+    <div *ngIf="showTodoList$" class="psdk-assignment-count">{{ count }}</div>
   </div>
   <br /><br />
   <div *ngIf="showTodoList$" class="psdk-display-divider"></div>
@@ -36,7 +36,7 @@
   </div>
 </div>
 
-<div *ngIf="assignmentCount$ > 3">
+<div *ngIf="count > 3">
   <div *ngIf="bShowMore$; else showLess" class="psdk-todo-show-more">
     <button mat-stroked-button (click)="_showMore()">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>
   </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.ts

@@ -1,10 +1,54 @@
-import { Component, OnInit, Input, NgZone, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
+import { updateWorkList } from '@pega/angular-sdk-components';
+
+const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
+  return PCore.getDataPageUtils()
+    .getDataAsync(
+      datapage,
+      context,
+      {},
+      {
+        pageNumber: 1,
+        pageSize: numberOfRecords
+      },
+      {
+        select: Object.keys(fields).map(key => ({ field: PCore.getAnnotationUtils().getPropertyName(fields[key]) })),
+        sortBy: [
+          { field: 'pxUrgencyAssign', type: 'DESC' },
+          { field: 'pxDeadlineTime', type: 'ASC' },
+          { field: 'pxCreateDateTime', type: 'DESC' }
+        ]
+      },
+      {
+        invalidateCache: true,
+        additionalApiParams: {
+          includeTotalCount
+        }
+      }
+    )
+    .then(response => {
+      return {
+        ...response,
+        data: (Array.isArray(response?.data) ? response.data : []).map(row =>
+          Object.keys(fields).reduce((obj, key) => {
+            obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
+            return obj;
+          }, {})
+        )
+      };
+    });
+};
+
+const getMappedValue = value => {
+  const mappedValue = PCore.getEnvironmentInfo().getKeyMapping(value);
+  return mappedValue === null ? value : mappedValue;
+};
 
 interface ToDoProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +67,7 @@ interface ToDoProps {
   standalone: true,
   imports: [CommonModule, MatButtonModule]
 })
-export class TodoComponent implements OnInit, OnDestroy, OnChanges {
+export class TodoComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() caseInfoID$: string;
   @Input() datasource$: any;
@@ -36,9 +80,8 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   @Input() isConfirm;
 
   configProps$: ToDoProps;
-  currentUser$: string;
+  currentUser$: string | undefined;
   currentUserInitials$ = '--';
-  assignmentCount$: number;
   bShowMore$ = true;
   arAssignments$: any[];
   assignmentsSource$: any;
@@ -49,99 +92,62 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
   showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
   canPerform: boolean;
+  count: number;
 
   constructor(
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
   ngOnInit() {
     this.CONSTS = PCore.getConstants();
-    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED }: any = PCore.getEvents().getCaseEvent();
-
-    PCore.getPubSubUtils().subscribe(
-      PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
-      () => {
-        this.updateToDo();
-      },
-      'updateToDo'
-    );
-
-    PCore.getPubSubUtils().subscribe(
-      CREATE_STAGE_SAVED,
-      () => {
-        this.updateList();
-      },
-      CREATE_STAGE_SAVED
-    );
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 
-    PCore.getPubSubUtils().subscribe(
-      CREATE_STAGE_DELETED,
-      () => {
-        this.updateList();
-      },
-      CREATE_STAGE_DELETED
-    );
+    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => this.updateToDo(), 'updateToDo');
+    PCore.getPubSubUtils().subscribe(CREATE_STAGE_SAVED, () => this.updateList(), CREATE_STAGE_SAVED);
+    PCore.getPubSubUtils().subscribe(CREATE_STAGE_DELETED, () => this.updateList(), CREATE_STAGE_DELETED);
 
     this.updateToDo();
   }
 
   ngOnDestroy() {
-    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED }: any = PCore.getEvents().getCaseEvent();
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'updateToDo');
-
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_SAVED, CREATE_STAGE_SAVED);
-
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DELETED, CREATE_STAGE_DELETED);
   }
 
-  ngOnChanges() {
-    // don't update until we'va had an init
-    if (PCore) {
-      this.updateToDo();
-    }
-  }
-
-  updateWorkList(key) {
-    PCore.getDataApiUtils()
-      // @ts-ignore - 2nd parameter "payload" and 3rd parameter "context" should be optional in getData method
-      .getData(key)
-      .then(responseData => {
-        const dataObject = {};
-        dataObject[key] = {
-          pxResults: responseData.data.data
-        };
-
-        this.pConn$.updateState(dataObject);
-        this.updateToDo();
-      })
-      .catch(err => {
-        console.error(err?.stack);
-      });
-  }
-
   updateList() {
-    this.updateWorkList('D_pyMyWorkList');
+    const {
+      WORK_BASKET: {
+        DATA_PAGES: { D__PY_MY_WORK_LIST }
+      }
+    } = PCore.getConstants();
+    updateWorkList(getPConnect, getMappedValue(D__PY_MY_WORK_LIST));
   }
 
   updateToDo() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ToDoProps;
 
-    if (this.headerText$ == undefined) {
-      this.headerText$ = this.configProps$.headerText;
-    }
-
-    this.datasource$ = this.configProps$.datasource ? this.configProps$.datasource : this.datasource$;
-    this.myWorkList$ = this.configProps$.myWorkList ? this.configProps$.myWorkList : this.myWorkList$;
+    this.headerText$ = this.headerText$ || this.configProps$.headerText;
+    this.datasource$ = this.datasource$ || this.configProps$.datasource;
+    this.myWorkList$ = this.myWorkList$ || this.configProps$.myWorkList;
 
     this.assignmentsSource$ = this.datasource$?.source || this.myWorkList$?.source;
 
     if (this.showTodoList$) {
-      this.assignmentCount$ = this.assignmentsSource$ != null ? this.assignmentsSource$.length : 0;
-      this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
+      if (this.assignmentsSource$) {
+        this.count = this.assignmentsSource$ ? this.assignmentsSource$.length : 0;
+        this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
+      } else if (this.myWorkList$.datapage) {
+        fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, 3, true, this.context$).then(responseData => {
+          this.deferLoadWorklistItems(responseData);
+        });
+      } else {
+        this.arAssignments$ = [];
+      }
     } else {
       // get caseInfoId assignment.
       // eslint-disable-next-line no-lonely-if
@@ -153,7 +159,12 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
     this.canPerform = this.arAssignments$?.[0]?.canPerform === 'true' || this.arAssignments$?.[0]?.canPerform === true;
 
     this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
-    this.currentUserInitials$ = this.utils.getInitials(this.currentUser$);
+    this.currentUserInitials$ = this.utils.getInitials(this.currentUser$ ?? '');
+  }
+
+  deferLoadWorklistItems(responseData) {
+    this.count = responseData.totalCount;
+    this.arAssignments$ = responseData.data;
   }
 
   getID(assignment: any) {
@@ -182,15 +193,6 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
     return this.type$ === this.CONSTS.TODO ? assignment.name : assignment.stepName;
   }
 
-  initAssignments(): any[] {
-    if (this.assignmentsSource$) {
-      this.assignmentCount$ = this.assignmentsSource$.length;
-      return this.topThreeAssignments(this.assignmentsSource$);
-    }
-    // turn off todolist
-    return [];
-  }
-
   getCaseInfoAssignment(assignmentsSource: any[], caseInfoID: string) {
     const result: any[] = [];
     for (const source of assignmentsSource) {
@@ -207,18 +209,26 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   _showMore() {
-    this.ngZone.run(() => {
-      this.bShowMore$ = false;
+    this.bShowMore$ = false;
+
+    const { WORKLIST } = PCore.getConstants();
+
+    if (this.type$ === WORKLIST && this.count && this.count > this.arAssignments$.length && !this.assignmentsSource$) {
+      fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, this.count, false, this.context$).then(
+        response => {
+          this.arAssignments$ = response.data;
+        }
+      );
+    } else {
       this.arAssignments$ = this.assignmentsSource$;
-    });
+    }
   }
 
   _showLess() {
-    this.ngZone.run(() => {
-      this.bShowMore$ = true;
+    this.bShowMore$ = true;
+    const { WORKLIST } = PCore.getConstants();
 
-      this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
-    });
+    this.arAssignments$ = this.type$ === WORKLIST ? this.arAssignments$.slice(0, 3) : this.topThreeAssignments(this.assignmentsSource$);
   }
 
   isChildCase(assignment) {

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/index.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import StyledPegaDxilMyTestTextWrapper from './styles';
 
 interface PegaDxilMyTestTextProps extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Banner/Banner.tsx

@@ -1,4 +1,4 @@
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import './Banner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -13,6 +13,5 @@
 
 .psdk-case-summary-fields {
   padding: calc(2 * 0.5rem);
-  display: grid;
   grid-row-gap: calc(2 * 0.5rem);
 }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
 
 import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
@@ -43,6 +43,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         default:
           return (
             <TextField
+              variant='standard'
               value='---'
               label={field.config.label}
               InputProps={{
@@ -61,6 +62,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'dropdown':
         return (
           <TextField
+            variant='standard'
             value={field.config.value}
             label={field.config.label}
             InputProps={{
@@ -77,6 +79,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={fieldValue}
             label={fieldLabel}
             InputProps={{
@@ -90,6 +93,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'status':
         return (
           <TextField
+            variant='standard'
             className='psdk-csf-status-style'
             value={field.config.value}
             label={field.config.label}
@@ -105,6 +109,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`tel:${displayPhone}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
               InputProps={{
@@ -124,6 +129,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`mailto:${displayEmail}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
               InputProps={{
@@ -145,6 +151,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, {
               format: theFormat
             })}
@@ -161,6 +168,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
             InputProps={{
@@ -175,6 +183,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'userreference':
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
             InputProps={{

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/DetailsFields/DetailsFields.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -48,7 +48,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { label } = thePConn.getConfigProps();
     const configObj = thePConn?.getReferencedView();
     configObj.config.readOnly = true;
-    configObj.config.displayMode = 'LABELS_LEFT';
+    configObj.config.displayMode = 'DISPLAY_ONLY';
     const propToUse = { ...thePConn.getInheritedProps() };
     configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
     fieldComponents.push({

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,8 +1,8 @@
 import { PropsWithChildren, useState } from 'react';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 // FieldGroupProps is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Divider from '@material-ui/core/Divider';
-import Link from '@material-ui/core/Link';
+import Grid from '@mui/material/Grid';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -47,7 +47,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
             </Grid>
           ))}
           {props.onAdd && (
-            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
               +Add
             </Link>
           )}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 // FieldValueList is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -189,6 +189,7 @@ export default function Operator(props: OperatorProps) {
   return (
     <>
       <TextField
+        variant='standard'
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}