@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/template/DataReference/SearchForm.tsx

@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import {
+  Tab,
+  Tabs,
+  Typography,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+  MenuItem,
+  Box,
+  TextField,
+} from '@mui/material';
+import Grid from '@mui/material/Grid';
+import { TabContext, TabPanel } from '@mui/lab';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+} from '@mui/material';
+
+import { useGetTabsCount } from '@pega/sdk-react';
+import {
+  searchtabsClick,
+  getActiveTabId,
+  getFirstVisibleTabId,
+} from '../SubTabs/tabUtils';
+import { getFieldMeta } from './utils';
+
+const publishEvent = ({ clearSelections, viewName }) => {
+  const payload: any = {};
+
+  if (clearSelections) {
+    payload.clearSelections = clearSelections;
+  }
+
+  if (viewName) {
+    payload.viewName = viewName;
+  }
+
+  PCore.getPubSubUtils().publish('update-advanced-search-selections', payload);
+};
+
+const checkIfSelectionsExist = (getPConnect) => {
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+  const {
+    selectionMode,
+    readonlyContextList,
+    contextPage,
+    contextClass,
+    name,
+  } = getPConnect().getConfigProps();
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const dataRelationshipContext = contextClass && name ? name : null;
+
+  const { compositeKeys } = getFieldMeta(getPConnect, dataRelationshipContext);
+
+  let selectionsExist = false;
+  if (isMultiSelectMode) {
+    selectionsExist = readonlyContextList?.length > 0;
+  } else if (contextPage) {
+    selectionsExist =
+      compositeKeys?.filter(
+        (key) => !['', null, undefined].includes(contextPage[key]),
+      )?.length > 0;
+  }
+  return selectionsExist;
+};
+
+const SearchForm = (props) => {
+  const { children, getPConnect, searchSelectCacheKey } = props;
+
+  const deferLoadedTabs = children[2];
+  const cache: any =
+    PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+  const { selectedCategory } = cache;
+  const firstTabId = getFirstVisibleTabId(deferLoadedTabs, selectedCategory);
+  const [open, setOpen] = useState(false);
+  const [currentTabId, setCurrentTabId] = useState(
+    getActiveTabId(
+      deferLoadedTabs.props.getPConnect().getChildren(),
+      firstTabId,
+    ),
+  );
+  const [nextTabId, setNextTabId] = useState(null); // State to store the next tab ID
+  const { getLocaleValue } = PCore.getLocaleUtils();
+
+  // @ts-ignore
+  const { data: tabData } = useGetTabsCount(
+    deferLoadedTabs,
+    'searchForm',
+    currentTabId,
+  );
+
+  const handleTabClick = (event) => {
+    const tabId: any = event.target.value;
+    const viewName = tabData
+      .find((tab) => tab.id === currentTabId)
+      .getPConnect()
+      .getConfigProps().name;
+
+    if (checkIfSelectionsExist(getPConnect)) {
+      setNextTabId(tabId); // Store the next tab ID
+      setOpen(true); // Open the dialog
+    } else {
+      // @ts-ignore
+      publishEvent({ viewName, tabId });
+      searchtabsClick(tabId, tabData, currentTabId, setCurrentTabId);
+    }
+  };
+
+  const clearSelectionAndSwitchTab = () => {
+    const viewName = tabData
+      .find((tab) => tab.id === currentTabId)
+      .getPConnect()
+      .getConfigProps().name;
+    publishEvent({ clearSelections: true, viewName });
+    searchtabsClick(nextTabId, tabData, currentTabId, setCurrentTabId);
+    setOpen(false);
+  };
+
+  const onDialogClose = () => {
+    setOpen(false); // Close the dialog
+  };
+
+  const tabItems = tabData?.filter((tab) => tab.visibility()) || [];
+  const propsToUse = { ...getPConnect().getInheritedProps() };
+
+  let searchCategoriesComp;
+  if (tabItems.length > 3) {
+    searchCategoriesComp = (
+      <Grid container spacing={2}>
+        <TextField
+          value={currentTabId}
+          select
+          onChange={handleTabClick}
+          fullWidth
+        >
+          {tabItems.map((tab) => (
+            <MenuItem key={tab.id} value={tab.id}>
+              {tab.name}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Grid>
+    );
+  } else if (tabItems.length > 1) {
+    searchCategoriesComp = (
+      <RadioGroup row value={currentTabId} onChange={handleTabClick}>
+        {tabItems.map((tab) => (
+          <FormControlLabel
+            key={tab.id}
+            value={tab.id}
+            control={<Radio />}
+            label={tab.name}
+          />
+        ))}
+      </RadioGroup>
+    );
+  }
+
+  return (
+    <Box display='flex' flexDirection='column' gap={2}>
+      <Typography variant='h5'>{propsToUse.label}</Typography>
+      {searchCategoriesComp}
+      <TabContext value={currentTabId}>
+        <Tabs
+          style={{ display: 'none' }}
+          value={currentTabId}
+          onChange={(e, newValue) => setCurrentTabId(newValue)}
+        >
+          {tabItems.map((tab) => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} />
+          ))}
+        </Tabs>
+        {tabItems.map((tab) => (
+          <TabPanel style={{ padding: '0px' }} key={tab.id} value={tab.id}>
+            <div className='search-form'>{tab.content}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+      <Dialog open={open} onClose={onDialogClose}>
+        <DialogTitle>
+          {getLocaleValue('Discard selections?', 'DataReference')}
+        </DialogTitle>
+        <DialogContent>
+          <div>
+            {getLocaleValue(
+              'When changing search categories, any previous selections will be lost.',
+              'DataReference',
+            )}
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onDialogClose} variant='outlined' color='primary'>
+            {getLocaleValue('Go back', 'ModalContainer')}
+          </Button>
+          <Button
+            onClick={clearSelectionAndSwitchTab}
+            variant='contained'
+            color='primary'
+          >
+            {getLocaleValue('Discard', 'ModalContainer')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
+
+export default SearchForm;

package/templates/react-sdk-reference/src/components/template/DataReference/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "DataReference",
+  "description": "Data Reference Template",
+  "type": "Template",
+  "icon": "DataReference.svg",
+  "subtype": "DATAVIEW",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/DataReference/index.tsx

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

package/templates/react-sdk-reference/src/components/template/DataReference/utils.ts

@@ -0,0 +1,90 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+export function getFieldMeta(getPConnect, dataRelationshipContext) {
+  const pConn = getPConnect();
+  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference = null;
+  if (dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  const fieldMetadata =
+    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+  });
+
+  return { compositeKeys, fieldMetadata };
+}
+
+/**
+ * returns array of self-referenced properties of the datasource
+ * Ex: returns ["@P .DataRef.pyGUID", "@P .DataRef.customerID"]
+ */
+const getCompositeKeys = (pConnect, property) => {
+  const fieldMetadata = pConnect.getFieldMetadata(property) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach(param => {
+    if (isSelfReferencedProperty(param, property)) {
+      compositeKeys.push(param);
+    }
+  });
+  return compositeKeys;
+};
+
+export const getFirstChildConfig = ({
+  firstChildMeta,
+  getPConnect,
+  rawViewMetadata,
+  contextClass,
+  dataReferenceConfigToChild,
+  isCreateNewReferenceEnabled,
+  disableStartingFieldsForReference,
+  pyID
+}) => {
+  const config = {
+    ...firstChildMeta.config,
+    ...dataReferenceConfigToChild
+  };
+  const compositeKeys = getCompositeKeys(getPConnect(), dataReferenceConfigToChild?.dataRelationshipContext);
+  return {
+    ...config,
+    viewName: getPConnect().getCurrentView(),
+    referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
+    parameters: rawViewMetadata.config.parameters,
+    localeReference: rawViewMetadata.config.localeReference,
+    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+    actions: firstChildMeta.type === 'SimpleTableSelect' &&
+      isCreateNewReferenceEnabled && [
+        {
+          action: 'ADD_CASE',
+          config: {
+            label: '@L Add',
+            caseType: contextClass,
+            inputFields: disableStartingFieldsForReference
+              ? {}
+              : {
+                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
+                }
+          }
+        }
+      ],
+    compositeKeys
+  };
+};

package/templates/react-sdk-reference/src/components/template/DefaultForm/DefaultForm.css

@@ -0,0 +1,34 @@
+.psdk-default-form-one-column {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
+.psdk-default-form-two-column .grid-column {
+  grid-column: 1 / span 2;
+}
+
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
+}
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/templates/react-sdk-reference/src/components/template/DefaultForm/DefaultForm.tsx

@@ -0,0 +1,74 @@
+import { createElement, type PropsWithChildren } from 'react';
+
+import { getInstructions } from '../../helpers/template-utils';
+import { PConnectComponent } from '@pega/sdk-react';
+import connectToState from '../../helpers/state-utils';
+
+import { getKeyForMappedField, mapStateToProps } from './utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+import './DefaultForm.css';
+
+interface DefaultFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  NumCols: string;
+  instructions: string;
+}
+
+const Child = connectToState(mapStateToProps)((props) => {
+  const { key, visibility, ...rest } = props;
+
+  return createElement(PConnectComponent, { ...rest, key, visibility });
+});
+
+export default function DefaultForm(
+  props: PropsWithChildren<DefaultFormProps>,
+) {
+  const { getPConnect, NumCols = '1' } = props;
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  let divClass: string;
+
+  const numCols = NumCols || '1';
+  switch (numCols) {
+    case '1':
+      divClass = 'psdk-default-form-one-column';
+      break;
+    case '2':
+      divClass = 'psdk-default-form-two-column';
+      break;
+    case '3':
+      divClass = 'psdk-default-form-three-column';
+      break;
+    default:
+      divClass = 'psdk-default-form-one-column';
+      break;
+  }
+
+  // debugger;
+
+  // repoint the children because they are in a region and we need to not render the region
+  // to take the children and create components for them, put in an array and pass as the
+  // defaultForm kids
+  const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
+  const dfChildren = arChildren?.map((kid) => (
+    <Child key={getKeyForMappedField(kid)} {...kid} />
+  ));
+
+  return (
+    <>
+      {instructions && (
+        <div className='psdk-default-form-instruction-text'>
+          {/* server performs sanitization method for instructions html content */}
+          {}
+          <div
+            key='instructions'
+            id='instruction-text'
+            dangerouslySetInnerHTML={{ __html: instructions }}
+          />
+        </div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
+  );
+}

package/templates/react-sdk-reference/src/components/template/DefaultForm/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "DefaultForm",
+  "label": "Default form",
+  "description": "DefaultForm Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/DefaultForm/index.tsx

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

package/templates/react-sdk-reference/src/components/template/DefaultForm/utils/index.ts

@@ -0,0 +1,26 @@
+export const mapStateToProps: any = (_, ownProps) => {
+  const { getPConnect } = ownProps;
+
+  return {
+    visibility: getPConnect().getComputedVisibility(),
+    getPConnect
+  };
+};
+
+export const getKeyForMappedField = field => {
+  if (Array.isArray(field)) {
+    return field
+      .map(item => {
+        return getKeyForMappedField(item);
+      })
+      .join('__');
+  }
+
+  const pConnect = field?.getPConnect?.();
+
+  if (pConnect?.meta) {
+    return JSON.stringify(pConnect.meta);
+  }
+
+  return crypto.randomUUID();
+};

package/templates/react-sdk-reference/src/components/template/DefaultPage/DefaultPage.tsx

@@ -0,0 +1,108 @@
+import { useMemo, Children } from 'react';
+import type { ReactNode } from 'react';
+import { Grid } from '@mui/material';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+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;
+}
+
+const COLUMNS_WIDTHS = {
+  'one-column': [12],
+  'two-column': [6, 6],
+  'narrow-wide': [4, 8],
+  'wide-narrow': [8, 4]
+};
+
+export default function DefaultPage({
+  layout = 'one-column',
+  children,
+  enableBanner,
+  heading = '',
+  message = '',
+  imageTheme,
+  backgroundImage = '',
+  backgroundColor = '',
+  tintImage
+}: DefaultPageProps) {
+  const Banner = getComponentFromRegistry('Banner');
+
+  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
+        }}
+      />
+    );
+  }
+
+  return (
+    <Grid container spacing={1}>
+      {childArray.map((child, index) => (
+        <Grid key={index} size={COLUMNS_WIDTHS[layout][index]}>
+          {child}
+        </Grid>
+      ))}
+    </Grid>
+  );
+}

package/templates/react-sdk-reference/src/components/template/DefaultPage/index.tsx

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

package/templates/react-sdk-reference/src/components/template/Details/Details/Details.tsx

@@ -0,0 +1,74 @@
+import { createElement } from 'react';
+import Grid from '@mui/material/Grid';
+
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface DetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  showLabel: boolean;
+  showHighlightedData: boolean;
+}
+
+export default function Details(props: DetailsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromRegistry('FieldGroup');
+
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // 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', 'DISPLAY_ONLY');
+  getPConnect().setInheritedProp('readOnly', true);
+  const children = (getPConnect().getChildren() as any[]).map(
+    (configObject, index) =>
+      createElement(PConnectComponent, {
+        ...configObject,
+
+        key: index.toString(),
+      }),
+  );
+
+  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+  let highlightedDataArr = [];
+  if (showHighlightedData) {
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any)
+      .config;
+    highlightedDataArr = highlightedData.map((field) => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+    });
+  }
+
+  return (
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid size={{ xs: 12 }} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid size={{ xs: 12 }} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/templates/react-sdk-reference/src/components/template/Details/Details/index.tsx

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