@pega/dx-component-builder-sdk 0.25.5 → 0.25.6

package/tests/assets/sdk-r/components/create/custom-constellation/widget/YourOrg_test25_test25PageWidget/index.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { withConfiguration, Table } from '@pega/cosmos-react-core';
+import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
+import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
+
+import StyledYourOrgTest25Test25PageWidgetWrapper from './styles';
+
+// interface for props
+interface YourOrgTest25Test25PageWidgetProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  datasource: Array<any>;
+  header: string;
+  description: string;
+  whatsnewlink: string;
+  image: string;
+}
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+function YourOrgTest25Test25PageWidget(props: YourOrgTest25Test25PageWidgetProps) {
+  const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
+  const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const PConnect = getPConnect();
+  const dataViewName = 'D_pyMyWorkList';
+  const context = PConnect.getContextName();
+
+  let details = [];
+  // @ts-ignore
+  if (datasource && datasource.source) {
+    // @ts-ignore
+    details = datasource.source.map(item => {
+      return item.name;
+    });
+  }
+
+  // setting up columns for the work list table
+  const columns = [
+    { renderer: 'caseType', label: PConnect.getLocalizedValue('Case type', '', '') },
+    { renderer: 'insKey', label: PConnect.getLocalizedValue('Key', '', '') },
+    { renderer: 'status', label: PConnect.getLocalizedValue('Status', '', '') },
+    { renderer: 'stage', label: PConnect.getLocalizedValue('Stage', '', '') }
+  ];
+
+  // going to get data for worklist to put into a table
+  // data comes from calling a PCore function to get
+  // get data from a data page and a PConnect function
+  // to get getContextName
+  useEffect(() => {
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
+      // @ts-ignore
+      .then((response: any) => {
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.pxProcessName,
+                insKey: entry.pxRefObjectInsName,
+                status: entry.pyAssignmentStatus,
+                stage: entry.pxTaskLabel,
+                id: index
+              };
+            })
+          );
+        } else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+      })
+      .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
+        console.log(error);
+      });
+  }, [context]);
+
+  return (
+    <StyledYourOrgTest25Test25PageWidgetWrapper>
+      <PegaAppAnnouncement
+        heading={header}
+        description={description}
+        details={details}
+        whatsNewLink={whatsnewlink}
+        image={image.replace(/ /g, '+')}
+      />
+      <br />
+      <Table
+        title={PConnect.getLocalizedValue('Work list', '', '')}
+        columns={columns}
+        data={worklist}
+        loading={isLoading}
+        loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
+      />
+    </StyledYourOrgTest25Test25PageWidgetWrapper>
+  );
+}
+
+export default withConfiguration(YourOrgTest25Test25PageWidget);

package/tests/assets/sdk-r/components/create/custom-constellation/widget/YourOrg_test25_test25PageWidget/mock.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+const configProps = {
+  label: 'App announcement',
+  header: 'Announcements',
+  description: 'Welcome to MediaCo Application for testing SDK frameworks.',
+  whatsnewlink: 'https://design.pega.com',
+  image:
+    'data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8 PC9zdmc ',
+  datasource: {
+    source: [
+      {
+        name: 'New React based UI rendering'
+      },
+      {
+        name: 'Support for followers and recents'
+      },
+      {
+        name: 'New authoring experience'
+      }
+    ],
+    fields: {}
+  }
+};
+export default configProps;

package/tests/assets/sdk-r/components/create/custom-constellation/widget/YourOrg_test25_test25PageWidget/styles.ts

@@ -0,0 +1,8 @@
+// individual style, comment out above, and uncomment here and add styles
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

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

@@ -26,6 +26,9 @@ export const BasePegaDxilMyTestText: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

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.css

@@ -8,7 +8,7 @@
 
 .background-style {
   background-color: transparent;
-  color: rgb(0, 0, 0);
+  color: var(--banner-text-color);
   width: 100%;
   height: 100%;
   text-align: center;

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 Grid2 from '@mui/material/Grid2';
 import './Banner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
@@ -37,14 +37,17 @@ export default function Banner(props: BannerProps) {
           </div>
         </div>
       </div>
-      <Grid container item xs={12} className='banner-layout' spacing={1}>
-        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+      <Grid2 container size={12} className='banner-layout' spacing={1}>
+        <Grid2
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
           {a}
-        </Grid>
-        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+        </Grid2>
+        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '0rem 1rem' }}>
           {b}
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </div>
   );
 }

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

@@ -7,12 +7,10 @@
   font-weight: bold;
   line-height: calc(0.5rem * 2.5);
   height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
   text-transform: uppercase;
 }
 
 .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 Grid2 from '@mui/material/Grid2';
+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';
@@ -34,7 +34,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
     if (field.config.value === null || field.config.value === '') {
       // Special handling for missing value
-      // eslint-disable-next-line sonarjs/no-small-switch
+
       switch (fieldTypeLower) {
         case 'caseoperator':
           return <Operator {...field.config} />;
@@ -43,11 +43,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         default:
           return (
             <TextField
+              variant='standard'
               value='---'
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true
+                }
               }}
             />
           );
@@ -61,11 +64,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'dropdown':
         return (
           <TextField
+            variant='standard'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -77,11 +83,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={fieldValue}
             label={fieldLabel}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -90,12 +99,15 @@ 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}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -105,13 +117,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`tel:${displayPhone}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                inputProps: {
-                  style: { cursor: 'pointer' },
-                  disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
                 }
               }}
             />
@@ -124,12 +137,15 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`mailto:${displayEmail}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true,
-                inputProps: { style: { cursor: 'pointer' } }
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
+                }
               }}
             />
           </a>
@@ -145,13 +161,16 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, {
               format: theFormat
             })}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -161,11 +180,14 @@ 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={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -175,11 +197,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'userreference':
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -198,13 +223,13 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
-    const arGridItems = theFieldsToRender.map((field: any) => {
+    const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (
-          <Grid item xs={6} key={field.config.label}>
+          <Grid2 size={{ xs: 6 }} key={field.config.label}>
             {getFieldValue(field)}
-          </Grid>
+          </Grid2>
         );
       }
 
@@ -238,8 +263,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   }
 
   return (
-    <Grid container className='psdk-case-summary-fields'>
+    <Grid2 container className='psdk-case-summary-fields'>
       {theFieldsAsGridItems}
-    </Grid>
+    </Grid2>
   );
 }

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

@@ -1,8 +1,7 @@
-/* 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 Grid2 from '@mui/material/Grid2';
+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 +47,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({
@@ -62,11 +61,11 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const dispValue = field.label;
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {dispValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -74,7 +73,6 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { type, value } = inField;
     let formattedVal = value;
 
-    // eslint-disable-next-line sonarjs/no-small-switch
     switch (type) {
       case 'date':
         formattedVal = format(value, type);
@@ -97,21 +95,21 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const formattedValue = formatItemValue(field);
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {formattedValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
   function getGridItem(field: any, keyVal: string) {
     return (
-      <Grid item xs={12} key={keyVal}>
+      <Grid2 size={{ xs: 12 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {field?.value}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -122,16 +120,16 @@ export default function DetailsFields(props: DetailsFieldsProps) {
       }
       if (isValidElement(field?.value)) {
         return (
-          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+          <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
             {getGridItem(field, `${index}-item`)}
-          </Grid>
+          </Grid2>
         );
       }
       return (
-        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+        <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
           {getGridItemLabel(field, `${index}-label`)}
           {getGridItemValue(field, `${index}-value`)}
-        </Grid>
+        </Grid2>
       );
     });
     return gridItems;

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 { type PropsWithChildren, useState } from 'react';
+import Grid2 from '@mui/material/Grid2';
+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
@@ -45,9 +45,9 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
-    <Grid container>
+    <Grid2 container>
       <div className={classes.fullWidth}>{children}</div>
-    </Grid>
+    </Grid2>
   );
 
   const headerClickHandler = () => {
@@ -55,8 +55,8 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   };
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
             {collapsible ? (
@@ -70,11 +70,10 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
           </div>
         )}
         {instructions && instructions !== 'none' && (
-          // eslint-disable-next-line react/no-danger
           <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
         )}
         {!collapsed && descAndChildren}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

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 Grid2 from '@mui/material/Grid2';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -20,11 +20,11 @@ export default function FieldGroupList(props: FieldGroupListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
-        <Grid container spacing={1}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
+        <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid item style={{ width: '100%' }}>
+            <Grid2 style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button
@@ -44,15 +44,15 @@ export default function FieldGroupList(props: FieldGroupListProps) {
               <br />
               {props.onAdd && <Divider />}
               <br />
-            </Grid>
+            </Grid2>
           ))}
           {props.onAdd && (
-            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
               +Add
             </Link>
           )}
-        </Grid>
-      </Grid>
-    </Grid>
+        </Grid2>
+      </Grid2>
+    </Grid2>
   );
 }