@pega/sdk 0.0.4 → 0.0.6

package/templates/react-native-sdk-reference/src/components/infra/Containers/SimpleView/helper.ts

@@ -0,0 +1,128 @@
+import { createElement, useEffect } from 'react';
+
+import { PConnectComponent } from '@pega/sdk-react';
+import { isContainerInitialized } from '../helper';
+
+const processRootViewDetails = (rootView: any, containerItem: any, options: any) => {
+  const { config: { context: viewContext, name: viewName } = {} } = rootView;
+  const { context: containerContext } = containerItem;
+  const { parentGetPConnect } = options;
+  let resolvedViewName = viewName;
+  let resolvedViewContext = viewContext;
+
+  const isAnnotedViewName = PCore.getAnnotationUtils().isProperty(viewName);
+  const isAnnotedViewContext = PCore.getAnnotationUtils().isProperty(viewContext);
+
+  // resolving annoted view context
+  if (isAnnotedViewContext) {
+    const viewContextProperty = PCore.getAnnotationUtils().getPropertyName(viewContext);
+    resolvedViewContext = PCore.getStoreValue(
+      `.${viewContextProperty}`,
+      viewContextProperty.startsWith('.') ? parentGetPConnect().getPageReference() : '',
+      containerContext,
+    );
+  }
+
+  if (!resolvedViewContext) {
+    resolvedViewContext = parentGetPConnect().getPageReference();
+  }
+
+  // resolving annoted view name
+  if (isAnnotedViewName) {
+    const viewNameProperty = PCore.getAnnotationUtils().getPropertyName(viewName);
+    resolvedViewName = PCore.getStoreValue(`.${viewNameProperty}`, resolvedViewContext, containerContext);
+  }
+
+  /* Special case where context and viewname are dynamic values
+    Use case - split for each shape
+
+    Ex - (caseInfo.content.SCRequestWorkQueues[1]):context --> .pyViewName:viewName
+  */
+  if (isAnnotedViewName && isAnnotedViewContext && resolvedViewName !== '') {
+    /* Allow context processor to resolve view and context when both are dynamic */
+    resolvedViewName = viewName;
+    resolvedViewContext = viewContext;
+  }
+
+  return {
+    viewName: resolvedViewName,
+    viewContext: resolvedViewContext,
+  };
+};
+
+export const getPConnectOfActiveContainerItem = (containerInfo: any, options: any) => {
+  const { accessedOrder, items } = containerInfo;
+  const { isAssignmentView = false, parentGetPConnect } = options;
+  const containerName = parentGetPConnect().getContainerName();
+  const { CONTAINER_NAMES } = PCore.getContainerUtils();
+  const { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants();
+
+  if (accessedOrder && items) {
+    const activeContainerItemKey = accessedOrder[accessedOrder.length - 1];
+
+    if (
+      items[activeContainerItemKey] &&
+      items[activeContainerItemKey].view &&
+      Object.keys(items[activeContainerItemKey].view).length > 0
+    ) {
+      const activeContainerItem = items[activeContainerItemKey];
+      const target = activeContainerItemKey.substring(0, activeContainerItemKey.lastIndexOf('_'));
+
+      const { view: rootView, context } = activeContainerItem;
+      const { viewName, viewContext } = processRootViewDetails(rootView, activeContainerItem, { parentGetPConnect });
+
+      if (!viewName) return null;
+
+      const config = {
+        meta: rootView,
+        options: {
+          context,
+          pageReference: viewContext || parentGetPConnect().getPageReference(),
+          containerName,
+          containerItemID: activeContainerItemKey,
+          parentPageReference: parentGetPConnect().getPageReference(),
+          hasForm:
+            isAssignmentView ||
+            containerName === CONTAINER_NAMES.WORKAREA ||
+            containerName === CONTAINER_NAMES.MODAL ||
+            viewName === CREATE_DETAILS_VIEW_NAME,
+          target,
+        },
+      };
+
+      return PCore.createPConnect(config).getPConnect;
+    }
+  }
+  return null;
+};
+
+export const getActiveContainerRootViewElement = (containerInfo: any, options: any) => {
+  const getPConnect = getPConnectOfActiveContainerItem(containerInfo, options);
+  if (getPConnect) {
+    return createElement(PConnectComponent, { getPConnect });
+  }
+  return null;
+};
+
+export const getActiveContainerItemID = (containerInfo: any) => {
+  const { accessedOrder } = containerInfo;
+  if (accessedOrder && accessedOrder.length > 0) {
+    return accessedOrder[accessedOrder.length - 1];
+  }
+  return '';
+};
+
+export const useContainerInitializer = (getPConnect: any, mode: any) => {
+  const pConnect = getPConnect();
+  const containerName = pConnect.getContainerName();
+  const containerManager = pConnect.getContainerManager();
+
+  useEffect(() => {
+    if (!isContainerInitialized(pConnect)) {
+      containerManager.initializeContainers({
+        type: mode,
+        name: containerName,
+      });
+    }
+  });
+};

package/templates/react-native-sdk-reference/src/components/infra/Containers/SimpleView/index.tsx

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+
+import {
+  getActiveContainerItemID,
+  getActiveContainerRootViewElement,
+  getPConnectOfActiveContainerItem,
+  useContainerInitializer,
+} from './helper';
+
+const SimpleViewContainer = (props: any) => {
+  const { CONTAINER_TYPE } = PCore.getConstants();
+
+  const {
+    getPConnect,
+    mode = CONTAINER_TYPE.SINGLE,
+    routingInfo: containerInfo,
+    isAssignmentView,
+    options = {},
+  } = props;
+
+  const rootViewElement = useMemo(() => {
+    return getActiveContainerRootViewElement(containerInfo, {
+      isAssignmentView,
+      parentGetPConnect: getPConnect,
+    });
+  }, [containerInfo, isAssignmentView, getPConnect]);
+
+  useContainerInitializer(getPConnect, options.mode || mode);
+
+  return rootViewElement;
+};
+
+export const withSimpleViewContainerRenderer =
+  (Component: any, options: any = {}) =>
+  (props: any) => {
+    const { CONTAINER_TYPE } = PCore.getConstants();
+
+    const { getPConnect, mode = CONTAINER_TYPE.SINGLE, routingInfo: containerInfo, isAssignmentView } = props;
+
+    const rootViewElement = <SimpleViewContainer {...props} options={options} />;
+    const activeContainerItemID = getActiveContainerItemID(containerInfo);
+    const getPConnectOfActiveItem = getPConnectOfActiveContainerItem(containerInfo, {
+      isAssignmentView,
+      parentGetPConnect: getPConnect,
+    });
+
+    useContainerInitializer(getPConnect, options.mode || mode);
+
+    return (
+      <Component
+        {...props}
+        rootViewElement={rootViewElement}
+        activeContainerItemID={activeContainerItemID}
+        getPConnectOfActiveContainerItem={getPConnectOfActiveItem}
+      />
+    );
+  };
+
+export default SimpleViewContainer;

package/templates/react-native-sdk-reference/src/components/infra/Containers/ViewContainer/ViewContainer.tsx

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+
+import { useEffect } from 'react';
+import { withSimpleViewContainerRenderer } from '../SimpleView';
+import { isContainerInitialized } from '../helper';
+import { addContainerItem, setContainerLimit } from './helper';
+
+function ViewContainer(props: any) {
+  const { rootViewElement, getPConnect, name, mode, limit } = props;
+
+  const pConnect = getPConnect();
+  const isInitialized = isContainerInitialized(pConnect);
+
+  useEffect(() => {
+    if (isInitialized) {
+      setContainerLimit({
+        pConnect,
+        name,
+        mode,
+        limit,
+      });
+      // if (!PCore.checkIfSemanticURL())
+      addContainerItem(pConnect);
+      //   if (!skipSemanticUrl) configureBrowserBookmark(pConnect);
+    }
+  }, [isInitialized]);
+
+  return <View>{rootViewElement}</View>;
+}
+
+export default withSimpleViewContainerRenderer(ViewContainer);

package/templates/react-native-sdk-reference/src/components/infra/Containers/ViewContainer/helper.ts

@@ -0,0 +1,39 @@
+export const setContainerLimit = (data: any) => {
+  const { name, mode, limit, pConnect } = data;
+  const { CONTAINER_TYPE } = PCore.getConstants();
+  if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
+    /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
+    PCore.getContainerUtils().setContainerLimit(`${pConnect.getContextName()}/${name}`, limit);
+  }
+};
+
+export const addContainerItem = (pConnect: any) => {
+  const containerManager = pConnect.getContainerManager();
+  const context = pConnect.getContextName();
+  containerManager.addContainerItem({
+    context,
+    semanticURL: '',
+  });
+};
+
+export const configureBrowserBookmark = (pConnect: any) => {
+  const context = pConnect.getContextName();
+  const containerName = pConnect.getContainerName();
+  const navPages = pConnect.getValue('pyPortal.pyPrimaryNavPages');
+  let defaultViewLabel = '';
+  if (Array.isArray(navPages) && navPages.length > 0) {
+    if (navPages[0].NavigationPages?.[0]?.pyLabel) {
+      // Handle first item as group
+      defaultViewLabel = navPages[0].NavigationPages[0].pyLabel;
+    } else if (navPages[0].pyLabel) {
+      defaultViewLabel = navPages[0].pyLabel;
+    }
+  }
+  PCore.configureForBrowserBookmark({
+    context,
+    containerName,
+    acName: containerName,
+    semanticURL: '',
+    defaultViewLabel,
+  });
+};

package/templates/react-native-sdk-reference/src/components/infra/Containers/ViewContainer/index.ts

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

package/templates/react-native-sdk-reference/src/components/infra/Containers/helper.ts

@@ -0,0 +1,9 @@
+export const isContainerInitialized = (pConnect: any) => {
+  const context = pConnect.getContextName();
+  const containerName = pConnect.getContainerName();
+  return PCore.getContainerUtils().isContainerInitialized(context, containerName);
+};
+
+export default {
+  isContainerInitialized,
+};

package/templates/react-native-sdk-reference/src/components/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,53 @@
+import { Text, View } from 'react-native';
+import { PConnProps } from '../../../types/PConnProps';
+
+interface ErrorBoundaryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  isInternalError?: boolean;
+}
+
+export default function ErrorBoundary(props: ErrorBoundaryProps) {
+  const errorMsg = PCore.getErrorHandler().getGenericFailedMessage();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+  const ERROR_TEXT = localizedVal(errorMsg, localeCategory);
+  const WORK_AREA = 'workarea';
+  const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
+  const { getPConnect, isInternalError = false } = props;
+
+  const theErrorDiv = (
+    <View>
+      <Text>{ERROR_TEXT}</Text>
+    </View>
+  );
+
+  if (!getPConnect) {
+    return theErrorDiv;
+  }
+
+  const pConn = getPConnect();
+
+  if (!isInternalError) {
+    console.error(`
+  ${localizedVal('Unable to load the component', localeCategory)} ${pConn.getComponentName()}
+  ${localizedVal(
+    'This might be due to the view metadata getting corrupted or the component file missing.',
+    localeCategory,
+  )}
+  Raw metadata for the component: ${JSON.stringify(pConn.getRawMetadata())}
+`);
+  }
+
+  if ((pConn.getConfigProps() as any).type === 'page') {
+    return theErrorDiv;
+  }
+
+  if (pConn.getContainerName() === WORK_AREA || pConn.isInsideList() === true || pConn.getContainerName() === 'modal') {
+    const { publish } = PCore.getPubSubUtils();
+    // @ts-ignore - second parameter “payload” for publish method should be optional
+    publish(ERROR_WHILE_RENDERING);
+    return null;
+  }
+
+  return theErrorDiv;
+}

package/templates/react-native-sdk-reference/src/components/infra/ErrorBoundary/index.tsx

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

package/templates/react-native-sdk-reference/src/components/infra/MultiStep/MultiStep.tsx

@@ -0,0 +1,24 @@
+import { View } from 'react-native';
+import AssignmentCard from '../AssignmentCard';
+
+export default function MultiStep(props: any) {
+  const { getPConnect, children, actionButtons, onButtonPress, arNavigationSteps } = props;
+
+  function buttonPress(sAction: string, sButtonType: string) {
+    onButtonPress(sAction, sButtonType);
+  }
+
+  return (
+    <View>
+      <AssignmentCard
+        getPConnect={getPConnect}
+        actionButtons={actionButtons}
+        onButtonPress={buttonPress}
+        showSteps={true}
+        steps={arNavigationSteps}
+      >
+        {children}
+      </AssignmentCard>
+    </View>
+  );
+}

package/templates/react-native-sdk-reference/src/components/infra/MultiStep/index.ts

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

package/templates/react-native-sdk-reference/src/components/infra/Reference/Reference.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+
+import resolveContext from './utils';
+
+export default function Reference(props: any) {
+  const { visibility, context, getPConnect, readOnly, displayMode } = props;
+
+  const pConnect = getPConnect();
+  const referenceConfig = { ...pConnect.getComponentConfig() };
+
+  useEffect(() => {
+    pConnect.registerAdditionalProps({
+      classID: `@P ${context}.classID`,
+    });
+  }, []);
+
+  delete referenceConfig?.name;
+  delete referenceConfig?.type;
+  delete referenceConfig?.visibility;
+
+  const viewMetadata = pConnect.getReferencedView();
+  if (!viewMetadata) {
+    return null;
+  }
+
+  if (viewMetadata.config.template === 'CaseView') {
+    const utilitiesIndex = viewMetadata.children?.findIndex((child: any) => child.name === 'Utilities');
+    if (utilitiesIndex !== -1) {
+      // Utilities found in metadata
+      const mappedID = PCore.getEnvironmentInfo().getKeyMapping('pyID') ?? 'pyID';
+      const caseID = pConnect.getValue(`.${mappedID}`);
+      const unSupportedWidgets = ['FileUtility', 'Followers', 'RelatedCases', 'Stakeholders', 'Tags'];
+      if (!caseID) {
+        viewMetadata.children[utilitiesIndex].children = viewMetadata.children[utilitiesIndex].children.filter(
+          (widget: any) => !unSupportedWidgets.includes(widget.type),
+        );
+      }
+    }
+  }
+
+  const viewObject = {
+    ...viewMetadata,
+    config: {
+      ...viewMetadata.config,
+      ...referenceConfig,
+    },
+  };
+
+  const viewComponent = pConnect.createComponent(viewObject, null, null, {
+    pageReference: context && context.startsWith('@CLASS') ? '' : resolveContext(context),
+  });
+
+  if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
+    const inheritedProps = pConnect.getInheritedProps();
+    referenceConfig.inheritedProps = Object.keys(inheritedProps).map((prop) => ({ prop, value: inheritedProps[prop] }));
+  }
+
+  viewComponent.props.getPConnect().setInheritedConfig({
+    ...referenceConfig,
+    readOnly,
+    displayMode,
+  });
+
+  if (visibility !== false) {
+    return <>{viewComponent}</>;
+  }
+  return null;
+}

package/templates/react-native-sdk-reference/src/components/infra/Reference/index.tsx

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

package/templates/react-native-sdk-reference/src/components/infra/Reference/utils.ts

@@ -0,0 +1,16 @@
+/**
+ * Resolve the context when using pagelist OR pagegroup that may contain brackets
+ * @param context string contains full path of view context
+ * @returns resloved context
+ */
+export default function resolveContext(context: string | null | undefined): string | null {
+  if (!context) {
+    return null;
+  }
+  const regex = /\((\d+)\)/g;
+  context = context.replace(regex, (_match, number) => {
+    const index = parseInt(number, 10) - 1;
+    return `[${index}]`;
+  });
+  return context;
+}

package/templates/react-native-sdk-reference/src/components/infra/Region/Region.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+
+// Region does NOT have getPConnect. So, no need to extend from PConnProps
+type RegionProps = Record<string, never>;
+
+export default function Region(props: PropsWithChildren<RegionProps>) {
+  const { children } = props;
+
+  return <>{children}</>;
+}

package/templates/react-native-sdk-reference/src/components/infra/Region/index.tsx

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

package/templates/react-native-sdk-reference/src/components/infra/View/View.tsx

@@ -0,0 +1,49 @@
+import pegaSdkComponentMap from '../../../sdk-pega-component-map';
+
+export default function View(props: any) {
+  const { children, template, getPConnect, visibility, name: pageName } = props;
+  // const { PAGE_TYPES: { PAGE, LANDINGPAGE, LISTPAGE } = {}, MODAL } =
+  //   PCore.getConstants();
+
+  const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
+  // As long as the template is defined in the dependencies of the view
+  // it will be loaded, otherwise fall back to single column
+  if (visibility === false) {
+    return '';
+  }
+
+  if (template) {
+    const ViewTemplate: any = pegaSdkComponentMap[template];
+    if (template === 'ListView') {
+      // special case for ListView - add in a prop
+      const bInForm = true;
+      props = { ...props, bInForm };
+    }
+
+    // spreading because all props should go to the template
+    const RenderedTemplate = (
+      <ViewTemplate key={key} {...props}>
+        {children}
+      </ViewTemplate>
+    );
+
+    return RenderedTemplate;
+  }
+
+  if (children) {
+    return <>{children}</>;
+  }
+
+  return null;
+}
+
+View.additionalProps = (state: any, getPconnect: any) => {
+  const { template } = getPconnect().getConfigProps();
+
+  if (template) {
+    const ViewTemplate: any = PCore.getComponentsRegistry().getLazyComponent(template);
+    return ViewTemplate?.additionalProps?.(state, getPconnect);
+  }
+
+  return {};
+};

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

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+
+import { Text } from 'react-native-paper';
+import { View } from 'react-native';
+
+import { PConnectComponent } from '@pega/sdk-react';
+import { getInstructions } from '../../helpers/template-utils';
+
+import { getKeyForMappedField } from './utils';
+import { PConnProps } from '@/types/PConnProps';
+
+interface DefaultFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  NumCols: string;
+  instructions: string;
+}
+
+export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>) {
+  const { getPConnect } = props;
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  // 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) => <PConnectComponent key={getKeyForMappedField(kid)} {...kid} />);
+
+  return (
+    <>
+      {instructions && (
+        <View style={{ paddingTop: 15, paddingBottom: 15 }}>
+          <Text>{instructions}</Text>
+        </View>
+      )}
+      <View>{dfChildren}</View>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,28 @@
+import { v4 as uuidv4 } from 'uuid';
+
+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 uuidv4();
+};

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

@@ -0,0 +1,82 @@
+import React, { createElement } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import FieldGroup from '../../design-system/FieldGroup';
+import { PConnectComponent } from '@pega/sdk-react';
+import { PConnProps } from '@/types/PConnProps';
+
+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) {
+  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 && (
+        <View style={styles.highlightedContainer}>
+          {highlightedDataArr.map((child, i) => (
+            <View style={styles.fullWidthItem} key={`hf-${i + 1}`}>
+              {child}
+            </View>
+          ))}
+        </View>
+      )}
+      <View style={styles.childrenContainer}>
+        {children.map((child, i) => (
+          <View style={styles.fullWidthItem} key={`r-${i + 1}`}>
+            {child}
+          </View>
+        ))}
+      </View>
+    </FieldGroup>
+  );
+}
+
+const styles = StyleSheet.create({
+  highlightedContainer: {
+    paddingBottom: 16,
+  },
+  childrenContainer: {
+    // Add spacing between children if needed
+  },
+  fullWidthItem: {
+    width: '100%',
+    marginBottom: 8,
+  },
+});

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

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