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

package/tests/assets/sdk-r/components/create/override-sdk/template/SubTabs/tabUtils.ts

@@ -19,7 +19,8 @@ export const getVisibleTabs = (allTabs, uuid) => {
         const { name: viewName, deferLoadId = `${viewName}_${uuid}_${index}` } = config;
         child.getPConnect().registerAdditionalProps({
           deferLoadId,
-          isChildDeferLoad: true
+          isChildDeferLoad: true,
+          lastUpdateCaseTime: '@P caseInfo.lastUpdateTime'
         });
       }
       index += 1;
@@ -66,3 +67,119 @@ export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabIt
   PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());
   PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());
 };
+
+export const searchtabsClick = (id, mainTabs, currentTabId, setCurrentTabId) => {
+  const currentTab = mainTabs.find(item => item.id === currentTabId && item.visibility());
+  const currentPConn = currentTab?.getPConnect();
+  const { deferLoadId } = currentPConn?.getConfigProps() ?? {};
+  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());
+
+  setCurrentTabId(id);
+  const nextActiveTab = mainTabs.find(item => item.id === id && item.visibility());
+  if (mainTabs && nextActiveTab?.content === null) {
+    nextActiveTab.content = nextActiveTab.getPConnect().getComponent();
+  }
+
+  const nextPConn = nextActiveTab.getPConnect();
+  const { deferLoadId: activeId } = nextPConn.getConfigProps();
+  PCore.getDeferLoadManager().activate(activeId, nextPConn.getContextName());
+  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn.getContextName());
+};
+
+export const getTabLabel = tabPConnect => {
+  const config = tabPConnect.getConfigProps();
+
+  const label = config.inheritedProps?.find(obj => obj.prop === 'label')?.value;
+
+  if (label) {
+    return label;
+  }
+  if (config.label) {
+    return config.label;
+  }
+
+  if (tabPConnect.getReferencedView()?.config?.label) {
+    return tabPConnect.getReferencedView()?.config?.label;
+  }
+
+  return PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+};
+
+export const getActiveTabId = (mainTabs, currentTabId) => {
+  let firstVisibleTabId = null;
+  let updatedActiveId = currentTabId;
+  let isCurrentTabFound = false;
+
+  if (!mainTabs?.length) {
+    return updatedActiveId;
+  }
+
+  for (let i = 0; i < mainTabs.length; i += 1) {
+    const tab = mainTabs[i];
+    const tabConfig = tab.getPConnect().getConfigProps();
+    const tabId = tab?.id || `${tab.getPConnect().viewName}-${tabConfig.name || getTabLabel(tab.getPConnect())}-${i}`;
+    const isTabVisible = !Object.hasOwn(tabConfig, 'visibility') || tabConfig.visibility === true;
+    if (isTabVisible && !firstVisibleTabId) {
+      firstVisibleTabId = tabId;
+      if (isCurrentTabFound) {
+        updatedActiveId = firstVisibleTabId;
+        break;
+      }
+    }
+    if (tabId === currentTabId) {
+      isCurrentTabFound = true;
+      if (isTabVisible) {
+        break;
+      } else if (firstVisibleTabId) {
+        updatedActiveId = firstVisibleTabId;
+        break;
+      }
+    }
+  }
+  return updatedActiveId;
+};
+/**
+ *
+ * @param {*} deferLoadedTabs list of deferLoadedTabs
+ * @param {string} tabViewName (optional) if provided, tabId of the given tabView will be returned
+ * @returns {string} a tab id is returned
+ */
+export const getFirstVisibleTabId = (deferLoadedTabs, tabViewName) => {
+  let tabIndex = 0;
+
+  const viewName = deferLoadedTabs?.props?.getPConnect()?.options?.viewName;
+
+  const deferTabsChildren = deferLoadedTabs.props.getPConnect().getChildren();
+  if (tabViewName) {
+    const firstVisibleTab = deferTabsChildren?.find((item, index) => {
+      const tabConfig = item.getPConnect().getConfigProps();
+      if (tabViewName === tabConfig.name) {
+        tabIndex = index;
+        return true;
+      }
+      return false;
+    });
+    const tabConfig = firstVisibleTab.getPConnect().getConfigProps();
+
+    return `${viewName}-${tabConfig.name || getTabLabel(firstVisibleTab.getPConnect())}-${tabIndex}`;
+  }
+
+  const firstVisibleTab = deferLoadedTabs.props
+    .getPConnect()
+    .getChildren()
+    ?.find((item, index) => {
+      const tabConfig = item.getPConnect().getConfigProps();
+      if (!('visibility' in tabConfig) || tabConfig.visibility === true) {
+        tabIndex = index;
+        return true;
+      }
+      return false;
+    });
+
+  if (!firstVisibleTab) {
+    return null;
+  }
+
+  const tabConfig = firstVisibleTab.getPConnect().getConfigProps();
+  return `${viewName}-${tabConfig.name || getTabLabel(firstVisibleTab.getPConnect())}-${tabIndex}`;
+};

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumn/TwoColumn.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +23,6 @@ export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 
@@ -43,13 +42,13 @@ export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+    <Grid2 container spacing={1}>
+      <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
         {childrenToRender[0]}
-      </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+      </Grid2>
+      <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
         {childrenToRender[1]}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnPage/TwoColumnPage.tsx

@@ -1,5 +1,5 @@
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnTab/TwoColumnTab.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnTabProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +23,6 @@ export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 
@@ -43,13 +42,13 @@ export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>
   bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+    <Grid2 container spacing={1}>
+      <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
         {childrenToRender[0]}
-      </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+      </Grid2>
+      <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
         {childrenToRender[1]}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrow/WideNarrow.tsx

@@ -1,16 +1,16 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
 interface WideNarrowProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   a: any;
   b: any;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   title?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   cols?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   icon?: string;
 }
 

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,10 +1,10 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@material-ui/core/Grid';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface WideNarrowDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -26,7 +26,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[])?.map((configObject, index) => {
     let theConfigObject: object = configObject;
@@ -36,7 +36,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
 
     return createElement(createPConnectComponent(), {
       ...theConfigObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     });
   });
@@ -66,21 +66,21 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
   return (
     <FieldGroup name={theName}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children?.map((child, i) => (
-          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowForm/WideNarrowForm.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrowForm.css';
 
 interface WideNarrowFormProps extends PConnProps {

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowPage/WideNarrowPage.tsx

@@ -1,6 +1,6 @@
-import { Children, PropsWithChildren } from 'react';
+import { Children, type PropsWithChildren } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface WideNarrowPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/tests/assets/sdk-r/components/create/override-sdk/template/WssNavBar/WssNavBar.css

@@ -1,5 +1,5 @@
 .link-style {
-  color: white !important;
+  color: var(--app-text-color) !important;
   text-transform: capitalize !important;
   font-size: 1rem !important;
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/WssNavBar/WssNavBar.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Box from '@material-ui/core/Box';
-import Toolbar from '@material-ui/core/Toolbar';
-import Container from '@material-ui/core/Container';
-import { IconButton, Menu, MenuItem, Typography, Button } from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import MenuIcon from '@material-ui/icons/Menu';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Container from '@mui/material/Container';
+import { IconButton, Menu, MenuItem, Typography, Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import MenuIcon from '@mui/icons-material/Menu';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WssNavBar.css';
 
 interface WssNavBarProps extends PConnProps {
@@ -17,10 +17,10 @@ interface WssNavBarProps extends PConnProps {
   navLinks: any[];
   operator: { currentUserInitials: string };
   navDisplayOptions: { alignment: string; position: string };
-  // eslint-disable-next-line react/no-unused-prop-types
+
   portalName: string;
   imageSrc: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   fullImageSrc: string;
   appName: any;
 }
@@ -36,10 +36,10 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   appListLogo: {
-    width: '3.6rem'
+    maxWidth: '100%',
+    height: '3rem'
   },
   appName: {
-    color: 'white',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(4),
     fontSize: '1.5rem'
@@ -85,7 +85,7 @@ export default function WssNavBar(props: WssNavBarProps) {
   return (
     <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
-        <Container maxWidth='xl'>
+        <Container maxWidth={false}>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
             <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />
@@ -128,7 +128,7 @@ export default function WssNavBar(props: WssNavBarProps) {
             {position === 'inline' && <>{navLinksContent}</>}
 
             <Box sx={{ flexGrow: 0 }}>
-              <IconButton onClick={handleOpenUserMenu}>
+              <IconButton onClick={handleOpenUserMenu} size='large'>
                 <Avatar>{operator.currentUserInitials}</Avatar>
               </IconButton>
               <Menu

package/tests/assets/sdk-r/components/create/override-sdk/widget/ActionButtonsForFileUtil/ActionButtonsForFileUtil.css

@@ -11,17 +11,3 @@
   justify-content: center;
   display: flex;
 }
-
-.primary-button {
-  background-color: #3f51b5 !important;
-  color: white !important;
-  padding: 6px 14px !important;
-  text-transform: unset !important;
-  font-size: 14px;
-}
-
-.secondary-button {
-  box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%);
-  text-transform: unset !important;
-  padding: 6px 14px !important;
-}

package/tests/assets/sdk-r/components/create/override-sdk/widget/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@material-ui/core';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { Button } from '@mui/material';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './ActionButtonsForFileUtil.css';
 
 interface ActionButtonsForFileUtilProps extends PConnProps {
@@ -15,14 +15,14 @@ export default function ActionButtonsForFileUtil(props: ActionButtonsForFileUtil
     <div className='psdk-actions'>
       <div className='psdk-action-buttons'>
         {props.arSecondaryButtons.map(file => (
-          <Button className='secondary-button' key={file.actionID} onClick={props.secondaryAction}>
+          <Button className='secondary-button' color='secondary' variant='contained' key={file.actionID} onClick={props.secondaryAction}>
             {file.name}
           </Button>
         ))}
       </div>
       <div className='psdk-action-buttons'>
         {props.arMainButtons.map(file => (
-          <Button className='primary-button' key={file.actionID} onClick={props.primaryAction}>
+          <Button className='primary-button' color='primary' variant='contained' key={file.actionID} onClick={props.primaryAction}>
             {file.name}
           </Button>
         ))}

package/tests/assets/sdk-r/components/create/override-sdk/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,6 +1,6 @@
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface AppAnnouncementProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.css

@@ -34,6 +34,7 @@
 
 .file-error {
   color: var(--app-error-color);
+  font-size: 14px;
 }
 
 .psdk-utility-card {
@@ -41,6 +42,10 @@
   flex-direction: row;
   padding: 0.25rem 0rem 0.25rem 0.25rem;
   margin-bottom: 0.5rem;
+  align-items: center;
+  border: 0.0625rem solid var(--utility-card-border-color);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
 }
 
 .psdk-utility-card-icon {
@@ -53,6 +58,7 @@
 .psdk-utility-card-svg-icon {
   width: 2.5rem;
   display: inline-block;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-card-main {
@@ -70,14 +76,7 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
   display: inline-block;
-}
-
-.psdk-utility-card {
-  display: flex;
-  align-items: center;
-  border: 0.0625rem solid rgb(207, 207, 207);
-  border-radius: calc(0.25rem);
-  min-height: 3rem;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-button {