@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/template/HierarchicalForm/hooks.ts

@@ -0,0 +1,293 @@
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef,
+  Children,
+  type PropsWithChildren,
+  type SyntheticEvent,
+} from 'react';
+
+import { useGetTabsCount } from '@pega/sdk-react';
+import {
+  searchtabsClick as tabClick,
+  getActiveTabId,
+  getFirstVisibleTabId,
+} from '../SubTabs/tabUtils';
+import { getInstructions } from '../../helpers/template-utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+const ComponentName = 'HierarchicalForm';
+
+const getLandingPageViewName = (contextName: string) => {
+  const target = contextName.substring(0, contextName.lastIndexOf('_'));
+  const activeContainerItemID =
+    PCore.getContainerUtils().getActiveContainerItemName(target);
+  const containerItemData = PCore.getContainerUtils().getContainerItemData(
+    target,
+    activeContainerItemID,
+  );
+  return containerItemData?.view?.config?.name;
+};
+
+export interface HierarchicalFormProps extends PConnProps {
+  tabsVisibility?: Record<string, boolean>;
+  template?: string;
+  instructions?: string;
+  lastUpdateCaseTime?: string | number;
+}
+
+export function useHierarchicalForm(
+  props: PropsWithChildren<HierarchicalFormProps>,
+) {
+  const { children = [], getPConnect, tabsVisibility = {}, template } = props;
+  const [tabErrors, setTabErrors] = useState<Record<string, any>>({});
+  const tabErrorsRef = useRef<Record<string, any>>({});
+  const submitAttemptedRef = useRef(false);
+  const {
+    lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime'),
+  } = props;
+  const fullCaseId = getPConnect().getValue(
+    PCore.getConstants().CASE_INFO.CASE_INFO_ID,
+  );
+
+  const deferLoadedTabs: any = Children.toArray(children)[0];
+  deferLoadedTabs.props.getPConnect().setInheritedProp('template', template);
+
+  const navigationKey = useMemo(() => {
+    const parentNavKey = `${
+      getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID) ||
+      getLandingPageViewName(getPConnect().getContextName())
+    }`;
+    return `${parentNavKey}-${getPConnect().getMetadata()?.name}-${ComponentName}`;
+  }, []);
+
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  const storedTab = (
+    PCore.getNavigationUtils().getComponentState(navigationKey) as any
+  )?.activeTab;
+
+  const tabsFromChildren = deferLoadedTabs.props.getPConnect().getChildren();
+
+  const firstTabId = getFirstVisibleTabId(deferLoadedTabs, undefined);
+
+  const [currentTabId, setCurrentTabId] = useState(
+    getActiveTabId(tabsFromChildren, storedTab || firstTabId),
+  );
+  const [tabVisibilityStr, setTabVisibilityStr] = useState('');
+  const { data: tabData, refreshTabData } = useGetTabsCount(
+    deferLoadedTabs,
+    'hierarchical',
+    currentTabId,
+    template,
+  );
+
+  const handleCaseRefresh = (message: any) => {
+    if (message.subtype === 'tab') {
+      refreshTabData();
+    }
+  };
+
+  useEffect(() => {
+    let index = 0;
+    let caseSubId = '';
+    deferLoadedTabs.props
+      .getPConnect()
+      .getChildren()
+      ?.forEach((child: any) => {
+        const rawConfigProps = child.getPConnect().getRawConfigProps();
+        if ('visibility' in rawConfigProps) {
+          tabsVisibility[`${index}`] = rawConfigProps.visibility;
+        }
+        index += 1;
+      });
+
+    getPConnect().registerAdditionalProps({ tabsVisibility });
+    getPConnect().registerAdditionalProps({
+      lastUpdateCaseTime: '@P caseInfo.lastUpdateTime',
+    });
+
+    if (fullCaseId) {
+      caseSubId = PCore.getMessagingServiceManager()
+        .getCaseSubscription(fullCaseId)
+        .subscribe({ caseId: fullCaseId }, handleCaseRefresh);
+    }
+
+    return () => {
+      if (fullCaseId)
+        PCore.getMessagingServiceManager()
+          .getCaseSubscription(fullCaseId)
+          .unsubscribe(caseSubId);
+    };
+  }, []);
+
+  useEffect(() => {
+    refreshTabData();
+  }, [lastUpdateCaseTime]);
+
+  useEffect(() => {
+    const isVisibilityAvailable =
+      Object.values(tabsVisibility).length > 0 &&
+      Object.values(tabsVisibility).every(
+        (visibility) => typeof visibility === 'boolean',
+      );
+    if (isVisibilityAvailable) {
+      let str = '';
+      Object.keys(tabsVisibility).forEach((key) => {
+        str += key + tabsVisibility[key];
+      });
+      setTabVisibilityStr(str);
+    }
+  }, [tabsVisibility]);
+
+  useEffect(() => {
+    if (tabData && tabData.length) {
+      const activeTabId = getActiveTabId(tabData, currentTabId);
+      if (activeTabId !== currentTabId) {
+        setCurrentTabId(activeTabId);
+      }
+    }
+  }, [tabVisibilityStr, tabData]);
+
+  useEffect(() => {
+    PCore.getNavigationUtils().setComponentState(navigationKey, {
+      activeTab: currentTabId,
+    });
+    const activeTabNavKey = `${getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID)}-CaseView-ActiveTab`;
+    PCore.getNavigationUtils().setComponentState(activeTabNavKey, {
+      id: currentTabId,
+    });
+
+    return () => {
+      if (getPConnect().getContextName()?.includes('/modal')) {
+        PCore.getNavigationUtils().setComponentState(navigationKey, {
+          activeTab: firstTabId,
+        });
+      }
+    };
+  }, [currentTabId, children]);
+
+  const handleTabClick = useCallback(
+    (event: SyntheticEvent, id: string) => {
+      tabClick(id, tabData, currentTabId, setCurrentTabId);
+    },
+    [tabData, currentTabId],
+  );
+
+  const tabItems = useMemo(
+    () => tabData?.filter((tab: any) => tab.visibility()) ?? [],
+    [tabData, tabVisibilityStr],
+  );
+
+  const tabsRef = useRef(tabItems);
+  tabsRef.current = tabItems;
+
+  const updateTabErrorsOnViewMutate = useCallback(
+    (messageObject: any, tab: any) => {
+      if (!messageObject.type) {
+        return;
+      }
+      const previousTabErrors = tabErrorsRef.current;
+      let currentTabState = previousTabErrors[tab.id] || {};
+      const { MESSAGES_TYPE_ERROR } = PCore.getConstants().MESSAGES;
+      if (messageObject.type !== MESSAGES_TYPE_ERROR) {
+        delete currentTabState[messageObject.fieldName];
+        currentTabState =
+          Object.keys(currentTabState).length > 0 ? currentTabState : undefined;
+      } else {
+        currentTabState = {
+          ...currentTabState,
+          [messageObject.fieldName]: messageObject.messages,
+        };
+      }
+      const newErrors = { ...previousTabErrors, [tab.id]: currentTabState };
+      tabErrorsRef.current = newErrors;
+      setTabErrors(newErrors);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const rawConfig = '_rawConfig';
+    tabItems.forEach((tab: any) => {
+      PCore.getContextTreeManager().onViewMutate(
+        tab.getPConnect().getContextName(),
+        tab.getPConnect().getPageReference(),
+        tab.getPConnect()[rawConfig].config?.name,
+        (messageObject: any) => updateTabErrorsOnViewMutate(messageObject, tab),
+      );
+    });
+  }, [tabItems, updateTabErrorsOnViewMutate]);
+
+  const navigateToFirstErrorTab = useCallback(() => {
+    const currentErrors = tabErrorsRef.current;
+    const firstTabWithError = tabsRef.current.find((tab: any) => {
+      const tabErrorState = currentErrors[tab.id];
+      return tabErrorState && Object.keys(tabErrorState).length > 0;
+    });
+    if (firstTabWithError) {
+      submitAttemptedRef.current = false;
+      setCurrentTabId(firstTabWithError.id);
+    }
+  }, []);
+
+  const highlightFirstErrorTab = useCallback(() => {
+    submitAttemptedRef.current = true;
+    navigateToFirstErrorTab();
+  }, [navigateToFirstErrorTab]);
+
+  useEffect(() => {
+    const { CURRENT_ASSIGNMENT_UPDATED } =
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
+    PCore.getPubSubUtils().subscribe(
+      CURRENT_ASSIGNMENT_UPDATED,
+      () => {
+        tabErrorsRef.current = {};
+        submitAttemptedRef.current = false;
+        setTabErrors({});
+      },
+      'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm',
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.ERROR_ON_FINISH_ASSIGNMENT,
+      highlightFirstErrorTab,
+      'ERROR_ON_FINISH_ASSIGNMENT-HierarchicalForm',
+    );
+
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(
+        CURRENT_ASSIGNMENT_UPDATED,
+        'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm',
+      );
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.ERROR_ON_FINISH_ASSIGNMENT,
+        'ERROR_ON_FINISH_ASSIGNMENT-HierarchicalForm',
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (submitAttemptedRef.current) {
+      navigateToFirstErrorTab();
+    }
+  }, [tabErrors, navigateToFirstErrorTab]);
+
+  const processedTabs = useMemo(() => {
+    return tabItems.map((tab) => {
+      const errorKeys = Object.keys(tabErrors[tab.id] ?? {});
+      const errors =
+        errorKeys.length > 0
+          ? errorKeys.reduce(
+              (sum, fieldName) => sum + tabErrors[tab.id][fieldName].length,
+              0,
+            )
+          : undefined;
+      return { ...tab, errors };
+    });
+  }, [tabItems, tabErrors]);
+
+  return { currentTabId, handleTabClick, processedTabs, instructions };
+}

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

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

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

@@ -0,0 +1,72 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { Grid, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface InlineDashboardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  filterPosition?: string;
+}
+
+const useStyles = makeStyles((/* theme */) => ({
+  headerStyles: {
+    fontWeight: 500,
+    fontSize: '1.25rem'
+  },
+  containerStyles: {
+    marginTop: '1rem',
+    marginBottom: '1rem'
+  },
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  },
+  filterContainerStyles: {
+    display: 'grid',
+    gap: '1rem',
+    gridTemplateColumns: 'repeat(7, 1fr);'
+  },
+  inlineStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline',
+    marginTop: '1rem'
+  }
+}));
+
+export default function InlineDashboard(props: PropsWithChildren<InlineDashboardProps>) {
+  const classes = useStyles();
+
+  const { children, title, filterPosition } = props;
+  const childrenToRender = children as ReactElement[];
+
+  const direction = filterPosition === 'inline-start' ? 'row-reverse' : 'row';
+  return (
+    <>
+      <Typography variant='h4' className={classes.headerStyles}>
+        {title}
+      </Typography>
+
+      {filterPosition === 'block-start' && (
+        <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>
+          <Grid size={{ xs: 12 }} className={classes.colStyles}>
+            {childrenToRender[0]}
+          </Grid>
+          <Grid id='filters' size={{ xs: 12 }} className={classes.filterContainerStyles}>
+            {childrenToRender[1]}
+          </Grid>
+        </Grid>
+      )}
+      {filterPosition !== 'block-start' && (
+        <Grid container spacing={2} direction={direction} className={classes.containerStyles}>
+          <Grid size={{ xs: 9 }}>{childrenToRender[0]}</Grid>
+          <Grid id='filters' size={{ xs: 3 }} className={classes.inlineStyles}>
+            {childrenToRender[1]}
+          </Grid>
+        </Grid>
+      )}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,39 @@
+import { useMemo, Children, useEffect, useState, type PropsWithChildren } from 'react';
+
+import { buildFilterComponents } from '@pega/sdk-react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface InlineDashboardPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  icon?: string;
+  filterPosition?: string;
+}
+
+export default function InlineDashboardPage(props: PropsWithChildren<InlineDashboardPageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const InlineDashboard = getComponentFromRegistry('InlineDashboard');
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, getPConnect, icon = '', filterPosition = 'block-start' } = props;
+  const [filterComponents, setFilterComponents] = useState([]);
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  const allFilters = (getPConnect().getRawMetadata() as any).children[1];
+
+  useEffect(() => {
+    setFilterComponents(buildFilterComponents(getPConnect, allFilters));
+  }, []);
+
+  const inlineProps = { ...props };
+  inlineProps.children = [];
+  // Region layout views
+  inlineProps.children[0] = childArray[0];
+  // filter items
+  inlineProps.children[1] = filterComponents;
+
+  return <InlineDashboard {...inlineProps} />;
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "InlineDashboardPage",
+  "label": "Inline Dashboard",
+  "description": "Inline Dashboard Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "InlineDashboardPage.svg",
+  "properties": []
+}

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

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

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

@@ -0,0 +1,16 @@
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface ListPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  parameters: object;
+}
+
+export default function ListPage(props: ListPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromRegistry('ListView');
+
+  // special case for ListView - add in a prop
+  const listViewProps = { ...props, bInForm: false };
+  return <ListView {...listViewProps} />;
+}

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

@@ -0,0 +1,7 @@
+{
+  "name": "ListPage",
+  "type": "Template",
+  "subtype": "PAGE",
+  "label": "List page",
+  "properties": []
+}

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

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

package/templates/react-sdk-reference/src/components/template/ListView/DefaultViewMeta.ts

@@ -0,0 +1,220 @@
+const LOCALIZATON_ANNOTATION = '@L ';
+const PROPERTY_ANNOTATION = '@P .';
+const USER_ANNOTATION = '@USER .';
+const ASSOCIATED_ANNOTATION = '@ASSOCIATED .';
+const ASSOCIATION_ANNOTATION = '@CA ';
+
+const getDefaultConfig = (fieldMeta, classID, show) => {
+  const {
+    name,
+    label,
+    fieldID,
+    fieldType,
+    dataType,
+    type,
+    classID: fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    associationClassID,
+    associationID
+  } = fieldMeta;
+  return {
+    value: (associationClassID ? ASSOCIATION_ANNOTATION : PROPERTY_ANNOTATION).concat(fieldID),
+    label: LOCALIZATON_ANNOTATION.concat(name || label),
+    fieldType,
+    propertyType: dataType || type,
+    classID: classID || fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    show,
+    ...(associationClassID ? { associationLabel: LOCALIZATON_ANNOTATION.concat(category) } : {}),
+    associationID
+  };
+};
+
+export default function getDefaultViewMeta(fieldMeta, classID, showField) {
+  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } = fieldMeta;
+  const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
+  const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
+  let viewMeta;
+  switch (mapperKey) {
+    case 'True-False:pxCheckbox':
+      viewMeta = {
+        type: 'Checkbox',
+        config: {
+          ...defaultConfig,
+          trueLabel: '@L Yes',
+          falseLabel: '@L No',
+          caption: LOCALIZATON_ANNOTATION.concat(name || label),
+          label: undefined
+        }
+      };
+      break;
+    case 'Decimal:pxCurrency':
+      viewMeta = {
+        type: 'Currency',
+        config: defaultConfig
+      };
+      break;
+    case 'Date Time:pxDateTime':
+    case 'Date & time:pxDateTime':
+      viewMeta = {
+        type: 'DateTime',
+        config: defaultConfig
+      };
+      break;
+    case 'Date:pxDateTime':
+    case 'Date only:pxDateTime':
+      viewMeta = {
+        type: 'Date',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxNumber':
+      viewMeta = {
+        type: 'Decimal',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxEmail':
+      viewMeta = {
+        type: 'Email',
+        config: defaultConfig
+      };
+      break;
+    case 'Integer:pxInteger':
+      viewMeta = {
+        type: 'Integer',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxPercentage':
+      viewMeta = {
+        type: 'Percentage',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxPhone':
+      viewMeta = {
+        type: 'Phone',
+        config: {
+          ...defaultConfig,
+          datasource: {
+            source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+            fields: {
+              value: '@P .pyCallingCode'
+            }
+          }
+        }
+      };
+      break;
+    case 'TimeOfDay:pxDateTime':
+      viewMeta = {
+        type: 'Time',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxURL':
+    case 'Text:pxUrl':
+      viewMeta = {
+        type: 'URL',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxTextArea':
+      viewMeta = {
+        type: 'TextArea',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxRichTextEditor':
+      viewMeta = {
+        type: 'RichText',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxAutoComplete':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Search box',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'AutoComplete',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxDropdown':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Drop-down list',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'Dropdown',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxRadioButtons':
+      {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'RadioButtons',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxTextInput':
+      viewMeta = {
+        type: 'TextInput',
+        config: defaultConfig
+      };
+      break;
+    default:
+      viewMeta = {
+        type,
+        config: defaultConfig
+      };
+  }
+  return viewMeta;
+}

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

@@ -0,0 +1,10 @@
+.no-records {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}