Basic implemenattion of Default Page template (#494)

* Basic implemenattion of Default Page template

* Basic implemenattion of Default Page template

* made minor changes

* fixed the lint

---------

Co-authored-by: Sharma <[email protected]>
Co-authored-by: manasa <[email protected]>

Author: 3 people

packages/react-sdk-components/src/components/helpers/simpleTableHelpers.ts

@@ -238,7 +238,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
 
   // get resolved field labels for primary fields raw config included in configFields
   const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
-    columnsRawConfig: pConnect.getRawConfigProps()?.children.find(item => item?.name === 'Columns')?.children
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
   });
 
   const fieldDefs = configFields.map((field, index) => {

packages/react-sdk-components/src/components/template/DefaultPage/DefaultPage.tsx

@@ -0,0 +1,88 @@
+import { useMemo, Children } from 'react';
+import type { ReactNode } from 'react';
+import Banner from '../../designSystemExtension/Banner';
+
+export interface CommonPageProps {
+  /** Page title */
+  title: string;
+
+  /** Page icon */
+  icon: string;
+
+  /** Region children */
+  children: ReactNode | ReactNode[];
+
+  /** Dynamic page pconnect object */
+  // getPConnect: () => PConnect;
+
+  /** Enable GetNextWork in page */
+  enableGetNextWork?: boolean;
+
+  /** GetAI coaches configured in page */
+  // coaches?: GenAICoach[];
+
+  /** Locale reference */
+  localeReference: string;
+}
+interface DefaultPageProps extends CommonPageProps {
+  /** Default page layout one or two columns */
+  layout: 'one-column' | 'two-column' | 'wide-narrow' | 'narrow-wide' | 'dynamic';
+
+  /** Flag to enable banner/hero */
+  enableBanner?: boolean;
+
+  /** Banner - Heading displayed */
+  heading?: string;
+
+  /** Banner - Message displayed */
+  message?: string;
+
+  /** Banner - Theme of the image */
+  imageTheme?: 'light' | 'dark' | undefined;
+
+  /** Banner - Background image */
+  backgroundImage?: string;
+
+  /** Banner - Background color */
+  backgroundColor?: string;
+
+  /** Banner - Tint image */
+  tintImage?: boolean;
+
+  /** Flag to enable layout model */
+  // layoutModel?: GridLayoutModel | undefined;
+}
+
+export default function DefaultPage({
+  layout = 'one-column',
+  children,
+  enableBanner,
+  heading = '',
+  message = '',
+  imageTheme,
+  backgroundImage = '',
+  backgroundColor = '',
+  tintImage
+}: DefaultPageProps) {
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  if (enableBanner) {
+    return (
+      <Banner
+        variant={layout === 'one-column' ? 'two-column' : layout}
+        a={[childArray[0]]}
+        b={[childArray[1]]}
+        banner={{
+          variant: imageTheme,
+          backgroundColor,
+          title: heading,
+          message,
+          backgroundImage,
+          tintImage
+        }}
+      />
+    );
+  }
+}

packages/react-sdk-components/src/components/template/DefaultPage/index.tsx

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

packages/react-sdk-components/src/components/template/SelfServiceCaseView/SelfServiceCaseView.tsx

@@ -0,0 +1,3 @@
+export default function SelfServiceCaseView(props) {
+  console.log('SelfServiceCaseView props:', props);
+}

packages/react-sdk-components/src/components/template/SelfServiceCaseView/index.tsx

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

packages/react-sdk-components/src/sdk-pega-component-map.js

@@ -32,6 +32,7 @@ import Date from './components/field/Date';
 import DateTime from './components/field/DateTime';
 import Decimal from './components/field/Decimal';
 import DefaultForm from './components/template/DefaultForm';
+import DefaultPage from './components/template/DefaultPage';
 import DeferLoad from './components/infra/DeferLoad';
 import Details from './components/template/Details/Details';
 import DetailsSubTabs from './components/template/Details/DetailsSubTabs';
@@ -85,6 +86,7 @@ import RootContainer from './components/infra/RootContainer/RootContainer';
 import ScalarList from './components/field/ScalarList';
 import SearchForm from './components/template/DataReference/SearchForm';
 import SearchGroups from './components/template/AdvancedSearch/SearchGroups';
+import SelfServiceCaseView from './components/template/SelfServiceCaseView';
 import SemanticLink from './components/field/SemanticLink';
 import SelectableCard from './components/field/SelectableCard';
 import SimpleTable from './components/template/SimpleTable/SimpleTable';
@@ -152,6 +154,7 @@ const pegaSdkComponentMap = {
   DateTime,
   Decimal,
   DefaultForm,
+  DefaultPage,
   DeferLoad,
   Details,
   DetailsSubTabs,
@@ -206,6 +209,7 @@ const pegaSdkComponentMap = {
   SearchForm,
   SearchGroups,
   SelectableCard,
+  SelfServiceCaseView,
   SemanticLink,
   SimpleTable,
   SimpleTableManual,