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

package/tests/assets/sdk-r/components/create/override-sdk/infra/DeferLoad/DeferLoad.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect, createElement } from 'react';
-import { Box, Card, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Card, CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DeferLoadProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -12,6 +12,7 @@ interface DeferLoadProps extends PConnProps {
   isChildDeferLoad?: boolean;
   isTab: boolean;
   deferLoadId: string;
+  lastUpdateCaseTime: any;
 }
 
 //
@@ -34,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function DeferLoad(props: DeferLoadProps) {
-  const { getPConnect, name, deferLoadId, isTab } = props;
+  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
   const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
@@ -69,8 +70,8 @@ export default function DeferLoad(props: DeferLoadProps) {
   const getViewOptions = () => ({
     viewContext: resourceType,
     pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal.classID, // 2nd arg empty string until typedef allows optional
-    container: isContainerPreview ? 'preview' : null,
-    containerName: isContainerPreview ? 'preview' : null,
+    container: isContainerPreview ? 'preview' : undefined,
+    containerName: isContainerPreview ? 'preview' : undefined,
     updateData: isContainerPreview
   });
 
@@ -95,7 +96,7 @@ export default function DeferLoad(props: DeferLoadProps) {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
       setContent(createElement(createPConnectComponent(), configObject));
       if (deferLoadId) {
         PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
@@ -113,16 +114,14 @@ export default function DeferLoad(props: DeferLoadProps) {
         getPConnect()
           .getActionsApi()
           .showData(name, dataContext, dataContextParameters, {
-            // @ts-ignore - Type 'boolean' is not assignable to type 'string'
             skipSemanticUrl: true,
-            // @ts-ignore
+            // @ts-expect-error
             isDeferLoaded: true
           })
           .then(data => {
             onResponse(data);
           });
       } else {
-        // eslint-disable-next-line no-console
         console.error('Cannot load the defer loaded view without container information');
       }
     } else if (resourceType === PAGE) {
@@ -141,11 +140,10 @@ export default function DeferLoad(props: DeferLoadProps) {
           onResponse(data.root);
         })
         .catch(error => {
-          // eslint-disable-next-line no-console
           console.log(`deferload: ${error}`);
         });
     }
-  }, [name, getPConnect, currentLoadedAssignment]);
+  }, [name, getPConnect, currentLoadedAssignment, lastUpdateCaseTime]);
   /* TODO Cosmos need to handle for now added a wrapper div with pos relative */
   let deferLoadContent;
   if (isLoading) {

package/tests/assets/sdk-r/components/create/override-sdk/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ErrorBoundaryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +23,6 @@ export default function ErrorBoundary(props: ErrorBoundaryProps) {
   const pConn = getPConnect();
 
   if (!isInternalError) {
-    // eslint-disable-next-line no-console
     console.error(`
   ${localizedVal('Unable to load the component', localeCategory)} ${pConn.getComponentName()}
   ${localizedVal('This might be due to the view metadata getting corrupted or the component file missing.', localeCategory)}
@@ -37,7 +36,6 @@ export default function ErrorBoundary(props: ErrorBoundaryProps) {
 
   if (pConn.getContainerName() === WORK_AREA || pConn.isInsideList() === true || pConn.getContainerName() === 'modal') {
     const { publish } = PCore.getPubSubUtils();
-    // @ts-ignore - second parameter “payload” for publish method should be optional
     publish(ERROR_WHILE_RENDERING);
     return null;
   }

package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/FlowContainer.tsx

@@ -0,0 +1,268 @@
+import { useState, useEffect, useContext } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import { Alert, Card, CardHeader, Avatar, Typography } from '@mui/material';
+
+import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/infra/Containers/container-helpers';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { withSimpleViewContainerRenderer } from '@pega/react-sdk-components/lib/components/infra/Containers/SimpleView/SimpleView';
+
+import { addContainerItem, getToDoAssignments, showBanner, hasContainerItems } from './helpers';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+interface FlowContainerProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  pageMessages: any[];
+  rootViewElement: React.ReactNode;
+  getPConnectOfActiveContainerItem: Function;
+  assignmentNames: string[];
+  activeContainerItemID: string;
+}
+
+//
+// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+// is totally at your own risk.
+//
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(1.5),
+    paddingBottom: theme.spacing(1.5),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  alert: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1)
+  },
+  avatar: {
+    backgroundColor: theme.palette.primary.light,
+    color: theme.palette.getContrastText(theme.palette.primary.light)
+  }
+}));
+
+export const FlowContainer = (props: FlowContainerProps) => {
+  // Get the proper implementation (local or Pega-provided) for these components that are emitted below
+  const Assignment = getComponentFromMap('Assignment');
+  const ToDo = getComponentFromMap('Todo'); // NOTE: ConstellationJS Engine uses "Todo" and not "ToDo"!!!
+  const AlertBanner = getComponentFromMap('AlertBanner');
+
+  const pCoreConstants = PCore.getConstants();
+  const { TODO } = pCoreConstants;
+  const todo_headerText = 'To do';
+
+  const {
+    getPConnect: getPConnectOfFlowContainer,
+    pageMessages,
+    rootViewElement,
+    getPConnectOfActiveContainerItem,
+    assignmentNames,
+    activeContainerItemID: itemKey
+  } = props;
+
+  const { displayOnlyFA } = useContext<any>(StoreContext);
+  const pConnectOfFlowContainer = getPConnectOfFlowContainer();
+  const isInitialized = isContainerInitialized(pConnectOfFlowContainer);
+  const hasItems = isInitialized && hasContainerItems(pConnectOfFlowContainer);
+  const getPConnect = getPConnectOfActiveContainerItem || getPConnectOfFlowContainer;
+  const thePConn = getPConnect();
+  const containerName = assignmentNames && assignmentNames.length > 0 ? assignmentNames[0] : '';
+  const bShowBanner = showBanner(getPConnect);
+  // const [init, setInit] = useState(true);
+  // const [fcState, setFCState] = useState({ hasError: false });
+
+  const [todo_showTodo, setShowTodo] = useState(false);
+  const [todo_caseInfoID, setCaseInfoID] = useState('');
+  const [todo_showTodoList, setShowTodoList] = useState(false);
+  const [todo_datasource, setTodoDatasource] = useState({});
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [todo_context, setTodoContext] = useState('');
+
+  const [caseMessages, setCaseMessages] = useState('');
+  const [bHasCaseMessages, setHasCaseMessages] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [checkSvg, setCheckSvg] = useState('');
+
+  const [buildName, setBuildName] = useState('');
+  const [bShowConfirm, setShowConfirm] = useState(false);
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+
+  const key = getPConnect()?.getCaseLocaleReference();
+  const classes = useStyles();
+
+  function getBuildName(): string {
+    const ourPConn = getPConnect();
+
+    const context = ourPConn.getContextName();
+    let viewContainerName = ourPConn.getContainerName();
+
+    if (!viewContainerName) viewContainerName = '';
+    return `${context.toUpperCase()}/${viewContainerName.toUpperCase()}`;
+  }
+
+  function getTodoVisibility() {
+    const caseViewMode = getPConnect().getValue('context_data.caseViewMode');
+    if (caseViewMode && caseViewMode === 'review') {
+      return true;
+    }
+    return !(caseViewMode && caseViewMode === 'perform');
+  }
+
+  function initComponent() {
+    const ourPConn = getPConnect();
+
+    // debugger;
+    setShowTodo(getTodoVisibility());
+
+    ourPConn.isBoundToState();
+
+    // debugger;
+    setBuildName(getBuildName());
+  }
+
+  useEffect(() => {
+    // from WC SDK connectedCallback (mount)
+    initComponent();
+  }, []);
+
+  useEffect(() => {
+    // @ts-expect-error - Property 'getMetadata' is private and only accessible within class 'C11nEnv'
+    if (isInitialized && pConnectOfFlowContainer.getMetadata().children && !hasItems) {
+      // ensuring not to add container items, if container already has items
+      // because during multi doc mode, we will have container items already in store
+      addContainerItem(pConnectOfFlowContainer);
+    }
+  }, [isInitialized, hasItems]);
+
+  // From SDK-WC updateSelf - so do this in useEffect that's run only when the props change...
+  useEffect(() => {
+    setBuildName(getBuildName());
+
+    // routingInfo was added as component prop in populateAdditionalProps
+    // let routingInfo = this.getComponentProp("routingInfo");
+
+    let loadingInfo: any;
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      loadingInfo = thePConn.getLoadingStatus();
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (ex) {
+      console.error(`${thePConn.getComponentName()}: loadingInfo catch block`);
+    }
+
+    const caseViewMode = thePConn.getValue('context_data.caseViewMode');
+    const { CASE_INFO: CASE_CONSTS } = pCoreConstants;
+    if (caseViewMode && caseViewMode === 'review') {
+      setTimeout(() => {
+        // updated for 8.7 - 30-Mar-2022
+        const todoAssignments = getToDoAssignments(thePConn);
+        setCaseInfoID(thePConn.getValue(CASE_CONSTS.CASE_INFO_ID));
+        setTodoDatasource({ source: todoAssignments });
+        setShowTodo(true);
+        setShowTodoList(false);
+      }, 100);
+    } else if (caseViewMode && caseViewMode === 'perform') {
+      // perform
+      // debugger;
+      setShowTodo(false);
+    }
+
+    // if have caseMessage show message and end
+    const theCaseMessages = localizedVal(thePConn.getValue('caseMessages'), localeCategory);
+
+    const rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), itemKey);
+    const bConfirmView = rootInfo && bShowBanner;
+
+    if (bConfirmView) {
+      // Temp fix for 8.7 change: confirmationNote no longer coming through in caseMessages$.
+      // So, if we get here and caseMessages$ is empty, use default value in DX API response
+      setCaseMessages(theCaseMessages || localizedVal('Thank you! The next step in this case has been routed appropriately.', localeCategory));
+      setHasCaseMessages(true);
+      setShowConfirm(true);
+
+      // debugger;
+      setCheckSvg(Utils.getImageSrc('check', Utils.getSDKStaticConentUrl()));
+    } else {
+      // debugger;
+      setHasCaseMessages(false);
+      setShowConfirm(false);
+    }
+  }, [props]);
+
+  const caseId = thePConn.getCaseSummary().content.pyID;
+  const urgency = getPConnect().getCaseSummary().assignments ? getPConnect().getCaseSummary().assignments?.[0].urgency : '';
+  const operatorInitials = Utils.getInitials(PCore.getEnvironmentInfo().getOperatorName() || '');
+
+  const displayPageMessages = () => {
+    let hasBanner = false;
+    const messages = pageMessages ? pageMessages.map(msg => localizedVal(msg.message, 'Messages')) : pageMessages;
+    hasBanner = messages && messages.length > 0;
+    return hasBanner && <AlertBanner id='flowContainerBanner' variant='urgent' messages={messages} />;
+  };
+
+  return (
+    <div style={{ textAlign: 'left' }} id={buildName} className='psdk-flow-container-top'>
+      {!bShowConfirm &&
+        (!todo_showTodo ? (
+          !displayOnlyFA ? (
+            <Card className={`${classes.root} psdk-root`}>
+              <CardHeader
+                id='assignment-header'
+                title={<Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>}
+                subheader={`${localizedVal('In', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
+                avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
+              />
+              {displayPageMessages()}
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <Assignment getPConnect={getPConnect} itemKey={itemKey}>
+                  {rootViewElement}
+                </Assignment>
+              </LocalizationProvider>
+            </Card>
+          ) : (
+            <Card className={`${classes.root} psdk-root`}>
+              <Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>
+              {displayPageMessages()}
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <Assignment getPConnect={getPConnect} itemKey={itemKey}>
+                  {rootViewElement}
+                </Assignment>
+              </LocalizationProvider>
+            </Card>
+          )
+        ) : (
+          <div>
+            <ToDo
+              key={Math.random()}
+              getPConnect={getPConnect}
+              caseInfoID={todo_caseInfoID}
+              datasource={todo_datasource}
+              showTodoList={todo_showTodoList}
+              headerText={todo_headerText}
+              type={TODO}
+              context={todo_context}
+              itemKey={itemKey}
+              isConfirm
+            />
+          </div>
+        ))}
+      {bHasCaseMessages && (
+        <div className={`${classes.alert} psdk-alert`}>
+          <Alert severity='success'>{caseMessages}</Alert>
+        </div>
+      )}
+      {bShowConfirm && bShowBanner && <div>{rootViewElement}</div>}
+    </div>
+  );
+};
+
+export default withSimpleViewContainerRenderer(FlowContainer);

package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/helpers.ts

@@ -0,0 +1,134 @@
+//  Moved PCore.getConstants() into each function in which it's used until we can
+//  make sure that this code isn't run until PCore is defined (after onPCoreReady)
+// const { CASE_INFO } = PCore.getConstants();
+
+export const addContainerItem = pConnect => {
+  const containerManager = pConnect.getContainerManager();
+  const contextName = pConnect.getContextName(); // here we will get parent context name, as flow container is child of view container
+  const caseViewMode = pConnect.getValue('context_data.caseViewMode');
+
+  let key;
+  let flowName;
+
+  if (caseViewMode !== 'review') {
+    const target = contextName.substring(0, contextName.lastIndexOf('_'));
+    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(target);
+    const containerItemData = PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
+
+    if (containerItemData) {
+      ({ key, flowName } = containerItemData);
+    }
+  }
+
+  containerManager.addContainerItem({
+    semanticURL: '',
+    key,
+    flowName,
+    caseViewMode: 'perform',
+    resourceType: 'ASSIGNMENT',
+    data: pConnect.getDataObject(contextName)
+  });
+};
+
+export const hasContainerItems = pConnect => {
+  const contextName = pConnect.getContextName();
+  const containerName = pConnect.getContainerName();
+  return PCore.getContainerUtils().hasContainerItems(`${contextName}/${containerName}`);
+};
+
+export const getActiveCaseActionName = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  const activeActionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
+  const activeAction = caseActions.find(action => action.ID === activeActionID);
+  return activeAction?.name || '';
+};
+
+export const getFirstCaseActionName = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  return caseActions[0]?.name || '';
+};
+
+export const hasNotificationMessages = pConnect => {
+  return !!pConnect.getValue('caseMessages');
+};
+
+export const isCaseWideLocalAction = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const actionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  if (caseActions && actionID) {
+    const activeAction = caseActions.find(caseAction => caseAction.ID === actionID);
+    return activeAction?.type === 'Case';
+  }
+  return false;
+};
+
+export const getChildCaseAssignments = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const childCases = pConnect.getValue(CASE_INFO.CHILD_ASSIGNMENTS);
+  let allAssignments = [];
+  if (childCases && childCases.length > 0) {
+    childCases.forEach(({ assignments, Name }) => {
+      if (assignments) {
+        const childCaseAssignments = assignments.map(assignment => ({
+          ...assignment,
+          caseName: Name
+        }));
+        allAssignments = allAssignments.concat(childCaseAssignments);
+      }
+    });
+  }
+  return allAssignments;
+};
+
+export const hasAssignments = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
+  const childCasesAssignments = getChildCaseAssignments(pConnect);
+
+  return !!(assignments || childCasesAssignments || isCaseWideLocalAction(pConnect));
+};
+
+export const showBanner = getPConnect => {
+  const pConnect = getPConnect();
+  return hasNotificationMessages(pConnect) || !hasAssignments(pConnect);
+};
+
+export const showTodo = pConnect => {
+  const caseViewMode = pConnect.getValue('context_data.caseViewMode');
+  return caseViewMode !== 'perform';
+};
+
+export const isRenderWithToDoWrapper = (getPConnect, options) => {
+  const pConnect = getPConnect();
+  const { showWithToDo } = options;
+  return showWithToDo && (!isCaseWideLocalAction(pConnect) || showTodo(pConnect));
+};
+
+export const getToDoAssignments = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  const assignmentLabel = pConnect.getValue(CASE_INFO.ASSIGNMENT_LABEL);
+  const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS) || [];
+  const childCasesAssignments = getChildCaseAssignments(pConnect) || [];
+  let childCasesAssignmentsCopy = JSON.parse(JSON.stringify(childCasesAssignments));
+
+  childCasesAssignmentsCopy = childCasesAssignmentsCopy.map(assignment => {
+    assignment.isChild = true;
+    return assignment;
+  });
+
+  const todoAssignments = [...assignments, ...childCasesAssignmentsCopy];
+  let todoAssignmentsCopy = JSON.parse(JSON.stringify(todoAssignments));
+
+  if (caseActions && !showTodo(pConnect)) {
+    todoAssignmentsCopy = todoAssignmentsCopy.map(assignment => {
+      assignment.name = getActiveCaseActionName(pConnect) || assignmentLabel;
+      return assignment;
+    });
+  }
+
+  return todoAssignmentsCopy;
+};

package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -1,5 +1,5 @@
-import { withStyles } from '@material-ui/core/styles';
-import { Tab, Divider } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
+import { Tab, Divider } from '@mui/material';
 
 // LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
 
@@ -18,7 +18,8 @@ interface LeftAlignVerticalTabsProps {
 const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
-    maxWidth: '100%'
+    maxWidth: '100%',
+    alignItems: 'flex-start'
   },
   wrapper: {
     display: 'block',

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+const useStyles = makeStyles((/* theme */) => ({
+  button: {
+    width: '50%',
+    margin: '4px'
+  },
+  div: {
+    display: 'flex',
+    margin: '8px'
+  }
+}));
+
+interface ListViewActionButtonsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  context: string;
+  closeActionsDialog: Function;
+}
+
+function ListViewActionButtons(props: ListViewActionButtonsProps) {
+  const { getPConnect, context, closeActionsDialog } = props;
+  const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  return (
+    <div className={classes.div}>
+      <Button
+        className={classes.button}
+        variant='contained'
+        color='secondary'
+        onClick={() => {
+          getPConnect().getActionsApi().cancelDataObject(context);
+        }}
+      >
+        {localizedVal('Cancel', localeCategory)}
+      </Button>
+      <Button
+        className={classes.button}
+        variant='contained'
+        color='primary'
+        disabled={isDisabled}
+        onClick={() => {
+          setIsDisabled(true);
+          getPConnect()
+            .getActionsApi()
+            .submitEmbeddedDataModal(context)
+            .then(() => {
+              closeActionsDialog();
+            })
+            .catch(err => {
+              console.log(err);
+            })
+            .finally(() => {
+              setIsDisabled(false);
+            });
+        }}
+      >
+        {localizedVal('Submit', localeCategory)}
+      </Button>
+    </div>
+  );
+}
+
+export default ListViewActionButtons;

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ListViewActionButtons/index.tsx

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