@pega/sdk 0.0.14 → 0.0.15

package/templates/react-sdk-reference/src/PortalApp.tsx

@@ -3,20 +3,17 @@
  * in full portal mode.
  *
  * Flow:
- *   1. Auth via AuthClient → @pega/auth (mainRedirect: true for portal)
- *   2. Bootstrap via BootstrapClient.loadPortal()
+ *   1. PegaRuntimeProvider (mode="portal") authenticates via full-page redirect
+ *   2. It bootstraps via BootstrapClient.loadPortal()
  *   3. PConnectComponent renders the full portal UI via registered sample components
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useMemo } from 'react';
 
-import { PConnectComponent, PegaStoreContext, registerComponentCreator } from '@pega/sdk-react';
+import { PConnectComponent, PegaRuntimeProvider, PegaStoreContext, usePegaRuntime } from '@pega/sdk-react';
 
 import { registerSampleComponents } from './components/component-map';
 import { AppProviders } from './AppProviders';
-import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
-import { AuthClient } from '@pega/auth';
 
 import { FallbackComponent } from './FallbackComponent';
 
@@ -35,104 +32,30 @@ function RootComponent({ renderProps, registry }: { renderProps: Record<string,
 
 // ─── Portal App ─────────────────────────────────────────────────────────────
 function PortalApp() {
-  const [isPegaReady, setIsPegaReady] = useState(false);
-  const [rootProps, setRootProps] = useState<Record<string, unknown> | null>(null);
-  const authClientRef = useRef<AuthClient | null>(null);
-  const registryRef = useRef<unknown>(null);
-
-  const { search } = useLocation();
-  const query = useMemo(() => new URLSearchParams(search), [search]);
-
-  // Capture query params into sessionStorage
-  useEffect(() => {
-    const portalParam = query.get('portal');
-    if (portalParam) {
-      sessionStorage.setItem('rsdk_portalName', portalParam);
-    }
-    const localeParam = query.get('locale');
-    if (localeParam) {
-      sessionStorage.setItem('rsdk_locale', localeParam);
-    }
-  }, [query]);
-
-  // ── Auth + Bootstrap portal on mount ─────────────────────────────────
-  useEffect(() => {
-    let cancelled = false;
-
-    async function bootstrap() {
-      const auth = new AuthClient();
-      authClientRef.current = auth;
-
-      const locale = sessionStorage.getItem('rsdk_locale') || undefined;
-      await auth.login({ appName: 'portal', mainRedirect: true, locale });
-      if (cancelled) return;
-
-      sessionStorage.setItem('isLoggedIn', 'true');
-
-      const {
-        BootstrapClient,
-        compareSdkPCoreVersions,
-        createComponentRegistry,
-        // @ts-ignore
-      } = PCore.getInitialiser().getSdkCore();
-
-      // Create component registry + register sample components
-      const registry = createComponentRegistry();
-      registerSampleComponents(registry);
-      registerComponentCreator(registry, FallbackComponent);
-      registryRef.current = registry;
-
-      // Determine which portal to load
-      const sdkConfig = (await getSdkConfig()) as Record<string, Record<string, unknown>>;
-      const appPortal = sdkConfig.serverConfig.appPortal as string;
-      const excludePortals = (sdkConfig.serverConfig.excludePortals ?? []) as string[];
-
-      const queryPortal = sessionStorage.getItem('rsdk_portalName');
-      const portalName = queryPortal || appPortal || undefined;
-
-      const client = new BootstrapClient({
-        sdkConfig: {
-          serverConfig: { infinityRestServerUrl: '', appAlias: '' },
-          authConfig: { clientId: '' },
-        },
-        componentRegistry: registry,
-        targetId: 'pega-root',
-      });
-
-      console.log(`Loading portal: ${portalName}, excluding portals: ${excludePortals}`);
-      const result = await client.loadPortal({
-        portalName,
-        excludePortals,
-        onPCoreReady: () => {
-          compareSdkPCoreVersions();
-        },
-      });
-
-      if (cancelled) return;
-
-      setRootProps(result.rootProps);
-      setIsPegaReady(true);
-    }
-
-    bootstrap().catch(console.error);
+  return (
+    <PegaRuntimeProvider
+      mode="portal"
+      registerComponents={registerSampleComponents}
+      fallback={FallbackComponent}
+      loadingComponent={
+        <div className="loading-container">
+          <span className="loading-text">Authenticating and loading portal...</span>
+        </div>
+      }
+    >
+      <PortalContent />
+    </PegaRuntimeProvider>
+  );
+}
 
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+function PortalContent() {
+  const { bootstrapResult, componentRegistry } = usePegaRuntime();
 
-  // ── Render ──────────────────────────────────────────────────────────────
-  if (!isPegaReady || !rootProps) {
-    return (
-      <div className="loading-container">
-        <span className="loading-text">Authenticating and loading portal...</span>
-      </div>
-    );
-  }
+  if (!bootstrapResult) return null;
 
   return (
     <div id="pega-root">
-      <RootComponent renderProps={rootProps} registry={registryRef.current} />
+      <RootComponent renderProps={bootstrapResult.rootProps} registry={componentRegistry} />
     </div>
   );
 }

package/templates/react-sdk-reference/src/components/component-map.ts

@@ -11,6 +11,7 @@ import DateTime from './field/DateTime';
 import Decimal from './field/Decimal';
 import Dropdown from './field/Dropdown';
 import Email from './field/Email/Email';
+import EmbeddedDataMulti from './field/EmbeddedDataMulti';
 import Group from './field/Group';
 import Integer from './field/Integer';
 import Location from './field/Location';
@@ -94,17 +95,24 @@ import ToDo from './widget/ToDo';
 
 // Design System Extension
 import AlertBanner from './designSystemExtension/AlertBanner';
+import AssignmentHeader from './designSystemExtension/AssignmentHeader';
 import Banner from './designSystemExtension/Banner';
 import CaseSummaryFields from './designSystemExtension/CaseSummaryFields';
 import DetailsFields from './designSystemExtension/DetailsFields';
 import FieldGroup from './designSystemExtension/FieldGroup';
 import FieldGroupList from './designSystemExtension/FieldGroupList';
 import FieldValueList from './designSystemExtension/FieldValueList';
+import ModalDialog from './designSystemExtension/ModalDialog';
 import Operator from './designSystemExtension/Operator';
 import Pulse from './designSystemExtension/Pulse';
 import RichTextEditor from './designSystemExtension/RichTextEditor';
+import Toast from './designSystemExtension/Toast';
 import WssQuickCreate from './designSystemExtension/WssQuickCreate';
 
+// Infra (sample-specific)
+import DataViewActionButtons from './infra/ModalViewContainer/DataViewActionButtons';
+import ListViewActionButtons from './infra/ModalViewContainer/ListViewActionButtons';
+
 // Infra (provided by @pega/sdk-react)
 import {
   ActionButtons,
@@ -135,6 +143,7 @@ function getSampleComponentMap(): Record<string, React.ComponentType<Record<stri
     Decimal,
     Dropdown,
     Email,
+    EmbeddedDataMulti,
     Group,
     Integer,
     Location,
@@ -218,22 +227,27 @@ function getSampleComponentMap(): Record<string, React.ComponentType<Record<stri
 
     // Design System Extension
     AlertBanner,
+    AssignmentHeader,
     Banner,
     CaseSummaryFields,
     DetailsFields,
     FieldGroup,
     FieldGroupList,
     FieldValueList,
+    ModalDialog,
     Operator,
     Pulse,
     RichTextEditor,
+    Toast,
     WssQuickCreate,
 
     // Infra (sample-specific)
     ActionButtons,
-    DeferLoad,
     DashboardFilter,
+    DataViewActionButtons,
+    DeferLoad,
     LeftAlignVerticalTabs,
+    ListViewActionButtons,
     NavBar,
     Stages,
     VerticalTabs,

package/templates/react-sdk-reference/src/components/designSystemExtension/AssignmentHeader/AssignmentHeader.tsx

@@ -0,0 +1,15 @@
+import Typography from '@mui/material/Typography';
+
+interface AssignmentHeaderProps {
+  title: string;
+}
+
+export default function AssignmentHeader(props: AssignmentHeaderProps) {
+  const { title } = props;
+
+  return (
+    <Typography variant="h6" id="assignment-header" sx={{ mb: 2 }}>
+      {title}
+    </Typography>
+  );
+}

package/templates/react-sdk-reference/src/components/designSystemExtension/AssignmentHeader/index.tsx

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

package/templates/react-sdk-reference/src/components/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -55,7 +55,7 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   };
 
   return (
-    <Grid container spacing={4} justifyContent="space-between">
+    <Grid container spacing={4} sx={{ justifyContent: 'space-between' }}>
       <Grid style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>

package/templates/react-sdk-reference/src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -20,7 +20,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent="space-between">
+    <Grid container spacing={4} sx={{ justifyContent: 'space-between' }}>
       <Grid style={{ width: '100%' }}>
         <Grid container spacing={1}>
           {props.items.map((item) => (

package/templates/react-sdk-reference/src/components/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -32,6 +32,16 @@ const useStyles = makeStyles((theme) => ({
   noPaddingBottom: {
     paddingBottom: '0 !important',
   },
+  htmlContent: {
+    '& ul': {
+      paddingLeft: '30px',
+      listStyleType: 'disc',
+    },
+    '& ol': {
+      paddingLeft: '30px',
+      listStyleType: 'decimal',
+    },
+  },
 }));
 
 function formatItemValue(value) {
@@ -48,15 +58,17 @@ function formatItemValue(value) {
 export default function FieldValueList(props: FieldValueListProps) {
   const { name, value, variant = 'inline', isHtml = false } = props;
   const classes = useStyles();
+  const isCompact = variant === 'inline-compact';
 
   function getGridItemLabel() {
     return (
       <Grid
-        size={{ xs: variant === 'stacked' ? 12 : 4 }}
+        size={{ xs: variant === 'stacked' ? 12 : isCompact ? 'auto' : 4 }}
         className={variant === 'stacked' ? classes.noPaddingBottom : ''}
       >
         <Typography variant="body2" component="span" className={`${classes.fieldLabel}`}>
           {name}
+          {isCompact ? ':' : ''}
         </Typography>
       </Grid>
     );
@@ -67,11 +79,11 @@ export default function FieldValueList(props: FieldValueListProps) {
 
     return (
       <Grid
-        size={{ xs: variant === 'stacked' || !name ? 12 : 8 }}
+        size={{ xs: variant === 'stacked' || !name ? 12 : isCompact ? 'grow' : 8 }}
         className={variant === 'stacked' ? classes.noPaddingTop : ''}
       >
         {isHtml ? (
-          <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
+          <div className={classes.htmlContent} dangerouslySetInnerHTML={{ __html: formattedValue }} />
         ) : (
           <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component="span" className={classes.fieldValue}>
             {formattedValue}
@@ -82,7 +94,7 @@ export default function FieldValueList(props: FieldValueListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent="space-between">
+    <Grid container spacing={isCompact ? 1 : 4} sx={{ justifyContent: isCompact ? undefined : 'space-between' }}>
       {name ? getGridItemLabel() : null}
       {getGridItemValue()}
     </Grid>

package/templates/react-sdk-reference/src/components/designSystemExtension/ModalDialog/ModalDialog.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+
+interface ModalDialogProps {
+  id: string;
+  title?: string;
+  actions?: ReactNode;
+}
+
+export default function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {
+  const { id, title, actions, children } = props;
+
+  return (
+    <Dialog open aria-labelledby={`form-dialog-title-${id}`} maxWidth="md" fullWidth>
+      <DialogTitle id={`form-dialog-title-${id}`} className="psdk-dialog-title" sx={{ mx: 2, mt: 2, mb: 0 }}>
+        {title}
+      </DialogTitle>
+      <DialogContent className="psdk-dialog-content" sx={{ pt: '8px !important', mx: 2, mt: 0, mb: 2 }}>
+        {children}
+      </DialogContent>
+      {actions}
+    </Dialog>
+  );
+}

package/templates/react-sdk-reference/src/components/designSystemExtension/ModalDialog/index.tsx

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

package/templates/react-sdk-reference/src/components/designSystemExtension/Toast/Toast.tsx

@@ -0,0 +1,35 @@
+import type { SyntheticEvent } from 'react';
+import IconButton from '@mui/material/IconButton';
+import Snackbar from '@mui/material/Snackbar';
+import CloseIcon from '@mui/icons-material/Close';
+
+interface ToastProps {
+  open: boolean;
+  message: string;
+  onClose: () => void;
+  autoHideDuration?: number;
+}
+
+export default function Toast(props: ToastProps) {
+  const { open, message, onClose, autoHideDuration = 3000 } = props;
+
+  function handleClose(_event: SyntheticEvent | Event, reason?: string) {
+    if (reason === 'clickaway') return;
+    onClose();
+  }
+
+  return (
+    <Snackbar
+      open={open}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      autoHideDuration={autoHideDuration}
+      onClose={handleClose}
+      message={message}
+      action={
+        <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      }
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/designSystemExtension/Toast/index.tsx

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