React New design changes for self service portal. by SambhuPega · Pull Request #599 · pegasystems/react-sdk

SambhuPega · 2026-03-09T09:24:50Z

React new design changes for the self service portal

SambhuPega · 2026-03-11T09:27:54Z

src/samples/mediaco/components/list-view/ListView.tsx

+  const [sourceList, setSourceList] = useState<any[] | null>(null);
+  const [galleryOpen, setGalleryOpen] = useState(false);
+
+  const configProps: any = pConn.getConfigProps();


get config props

SambhuPega · 2026-03-11T09:28:45Z

src/samples/mediaco/utils/TodoPortalContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState, useRef, type ReactNode, type MutableRefObject } from 'react';


is this file required or not

SambhuPega · 2026-03-11T09:33:05Z

src/common.css

 [class*='MuiInputAdornment-positionStart'] {
  margin-right: 0 !important;
 }
+


do we need mediaco styles in common

tumms2021389 · 2026-03-11T09:27:18Z

src/samples/mediaco/components/todo/Todo.tsx

+  if (!isMyWorklistChecked) {
+    const pegaMap = SdkComponentMap?.getPegaProvidedComponentMap?.();
+    const OOTBTodo = pegaMap?.['Todo'];
+    if (OOTBTodo) {
+      return <OOTBTodo {...props} />;
+    }
+    return null;
+  }


import OOTBTodo directly from '@pega/react-sdk-components'

tumms2021389 · 2026-03-11T09:28:53Z

src/samples/mediaco/utils/TodoPortalContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState, useRef, type ReactNode, type MutableRefObject } from 'react';


check why it is needed

tumms2021389 · 2026-03-11T09:29:42Z

src/samples/mediaco/mediaCoStyles.scss

@@ -1,2 +1,69 @@
 .mediaco {
+  // Action Buttons styles for MediaCo sample app - start


there is no import for this file anywhere

tumms2021389 · 2026-03-11T09:31:59Z

src/index.tsx

 import TopLevelApp from '../src/samples/TopLevelApp';
 import './common.css';

+// Suppress "Uncaught runtime errors" overlay for non-fatal Axios errors from


remove this

tumms2021389 · 2026-03-11T09:35:12Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

+        width: '100%',
+        minHeight: '100%',
+        backgroundColor: '#fff',
+        display: 'flex',
+        flexDirection: 'column'


move these inline styles to classes

tumms2021389 · 2026-03-11T09:35:47Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

+    const OOTBSelfServiceCaseView = SdkComponentMap.getPegaProvidedComponentMap().SelfServiceCaseView;
+    return <OOTBSelfServiceCaseView {...props} />;


same here, import from components repo directly

tumms2021389 · 2026-03-11T09:37:53Z

src/samples/mediaco/components/multi-step/MultiStep.tsx

+  // Delegate to OOTB MultiStep when not on the WSS portal
+  const isWssPortal = (PCore.getEnvironmentInfo() as any).environmentInfoObject?.pyPortalTemplate === 'wss';
+  if (!isWssPortal) {
+    const OOTBMultiStep = SdkComponentMap.getPegaProvidedComponentMap().MultiStep;


modify the import

tumms2021389 · 2026-03-11T09:38:27Z

src/samples/mediaco/components/list-view/ListView.tsx

+    const pegaMap = SdkComponentMap?.getPegaProvidedComponentMap?.();
+    const OOTBListView = pegaMap?.['ListView'];
+    if (OOTBListView) {
+      return <OOTBListView {...props} />;
+    }
+    return null;


update this

vishalshrm539 · 2026-03-11T09:48:33Z

src/samples/mediaco/utils/helpers.ts

@@ -0,0 +1,89 @@
+/**
+ * Utility to build the SDK static content URL for icon/image assets.
+ * Mirrors the Angular Utils.getSDKStaticContentUrl / getImageSrc pattern.


Remove this

vishalshrm539 · 2026-03-11T09:48:53Z

src/samples/mediaco/utils/helpers.ts

+}
+
+/**
+ * Fetch work list data from a data page (mirrors Angular fetchMyWorkList).


Remove mirrors Angular fetchMyWorkList

vishalshrm539 · 2026-03-11T09:49:08Z

src/common.css

+  border-color: #6750a4 !important;
+}
+
+/* ========== MediaCo WSS: Assignment-routed banner (matches Angular mat-card style) ========== */


Remove matches Angular mat-card style

vishalshrm539 · 2026-03-11T09:49:32Z

src/samples/mediaco/components/action-buttons/ActionButtons.tsx

+
+/**
+ * Custom ActionButtons for WSS (MediaCo) portal.
+ * Styled to match the Angular SDK's Material 3 button look:


Remove this too

vishalshrm539 · 2026-03-11T09:49:47Z

src/samples/mediaco/components/action-buttons/ActionButtons.tsx

+ * Styled to match the Angular SDK's Material 3 button look:
+ *   - Primary: filled pill buttons with purple background
+ *   - Secondary: outlined pill buttons
+ *   - Layout: left-aligned secondary, right-aligned primary (matching Angular's button-bar)


Remove matching Angular's button-bar

vishalshrm539 · 2026-03-11T09:50:04Z

src/samples/mediaco/components/list-view/helpers.ts

@@ -0,0 +1,53 @@
+/**
+ * ListView-specific helpers — co-located with the ListView component.
+ * Mirrors Angular's list-view/listViewHelpers.ts + utils.ts pattern.


Remove Angular mention

vishalshrm539 · 2026-03-11T09:50:17Z

src/samples/mediaco/components/self-service-case-view/SelfServiceCaseView.tsx

+        )}
+      </div>
+
+      {/* Main case view with flex layout (matching Angular SDK) */}


Remove matching Angular SDK

4manasa · 2026-03-11T11:27:36Z

src/samples/mediaco/components/action-buttons/ActionButtons.tsx

+  const isWssPortal = (PCore.getEnvironmentInfo() as any).environmentInfoObject?.pyPortalTemplate === 'wss';
+  if (!isWssPortal) {
+    const OOTBActionButtons = SdkComponentMap.getPegaProvidedComponentMap().ActionButtons;
+    return <OOTBActionButtons {...props} />;


Import from the components repo

SambhuPega added 2 commits March 4, 2026 15:49

v1 changes

4d7e676

New design updated after test 1

5f9e59a

SambhuPega requested review from 4manasa, samhere06, tammy-a11y, tumms2021389 and vishalshrm539 March 9, 2026 09:24

Added quick link layout fix and todo widget

57de3a7

SambhuPega commented Mar 11, 2026

View reviewed changes

tumms2021389 requested changes Mar 11, 2026

View reviewed changes

vishalshrm539 reviewed Mar 11, 2026

View reviewed changes

4manasa reviewed Mar 11, 2026

View reviewed changes

		@@ -0,0 +1,23 @@
		import { createContext, useContext, useState, useRef, type ReactNode, type MutableRefObject } from 'react';

		@@ -1,2 +1,69 @@
		.mediaco {
		// Action Buttons styles for MediaCo sample app - start

		const OOTBSelfServiceCaseView = SdkComponentMap.getPegaProvidedComponentMap().SelfServiceCaseView;
		return <OOTBSelfServiceCaseView {...props} />;

Conversation

SambhuPega commented Mar 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants