@pega/sdk 0.0.1

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

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

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

@@ -0,0 +1,122 @@
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+import type { PConnProps } from '@pega/sdk-react';
+
+interface SimpleTableSelectProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  referenceList: object[] | string;
+  renderMode: string;
+  showLabel: boolean;
+  promptedFilters: object[];
+  viewName: string;
+  parameters: any;
+  readonlyContextList: object[] | string;
+  dataRelationshipContext: string;
+}
+
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  return parentPropName === referenceProp;
+};
+
+/**
+ * SimpleTable react component
+ * @param {*} props - props
+ */
+export default function SimpleTableSelect(props: SimpleTableSelectProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromRegistry('ListView');
+  const SimpleTable = getComponentFromRegistry('SimpleTable');
+  const PromotedFilters = getComponentFromRegistry('PromotedFilters');
+
+  const { label, getPConnect, renderMode = '', showLabel = true, viewName = '', parameters, dataRelationshipContext = null } = props;
+
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+  if (propsToUse.showLabel === false) {
+    propsToUse.label = '';
+  }
+
+  const pConn = getPConnect();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+  const { selectionMode, selectionList } = pConn.getConfigProps() as any;
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  if (isMultiSelectMode && renderMode === 'ReadOnly') {
+    return <SimpleTable {...props} showLabel={propsToUse.showLabel} />;
+  }
+
+  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: string | null = null;
+  if (props.dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  // Need to get this written so typedefs work
+  const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
+    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
+    : pConn.getCurrentPageFieldMetadata(contextPageReference);
+
+  const compositeKeys: any[] = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    }
+  });
+
+  // setting default row height for select table
+  const defaultRowHeight = '2';
+
+  const additionalTableConfig = {
+    rowDensity: false,
+    enableFreezeColumns: false,
+    autoSizeColumns: false,
+    resetColumnWidths: false,
+    defaultFieldDef: {
+      showMenu: false,
+      noContextMenu: true,
+      grouping: false
+    },
+    itemKey: '$key',
+    defaultRowHeight
+  };
+
+  const listViewProps = {
+    ...props,
+    title: propsToUse.label,
+    personalization: false,
+    grouping: false,
+    expandGroups: false,
+    reorderFields: false,
+    showHeaderIcons: false,
+    editing: false,
+    globalSearch: true,
+    toggleFieldVisibility: false,
+    basicMode: true,
+    additionalTableConfig,
+    compositeKeys,
+    viewName,
+    parameters
+  };
+
+  const filters = (getPConnect().getRawMetadata() as any).config.promotedFilters ?? [];
+
+  const isSearchable = filters.length > 0;
+
+  if (isSearchable) {
+    return (
+      <PromotedFilters
+        getPConnect={getPConnect}
+        viewName={viewName}
+        filters={filters}
+        listViewProps={listViewProps}
+        pageClass={pageClass}
+        parameters={parameters}
+      />
+    );
+  }
+  return <ListView {...listViewProps} />;
+}

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

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

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

@@ -0,0 +1,207 @@
+import { createElement, Fragment, useState } from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+import { Utils } from '../../../helpers/utils';
+import { SIMPLE_TABLE_MANUAL_READONLY } from '../../../field/ObjectReference/utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface SimpleTableSelectReadonlyProps extends PConnProps {
+  label?: string;
+  referenceList: object[] | string;
+  readonlyContextList?: object[];
+  primaryField?: string;
+  referenceType?: string;
+  selectionKey?: string;
+  selectionList?: string;
+  hideLabel?: boolean;
+  variant?: string;
+  displayAs?: string;
+  displayMode?: string;
+}
+
+export default function SimpleTableSelectReadonly(
+  props: SimpleTableSelectReadonlyProps,
+) {
+  const {
+    label = '',
+    getPConnect,
+    readonlyContextList = [],
+    primaryField = '',
+    referenceType = '',
+    selectionKey = '',
+    selectionList = '',
+    hideLabel = false,
+    displayAs = 'readonly',
+    displayMode,
+  } = props;
+
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const { DATA, CASE } = PCore.getConstants().RESOURCE_TYPES;
+  const pConn = getPConnect();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'SimpleTableSelectReadOnly';
+  const PComponent = PConnectComponent;
+
+  const openModal = () => {
+    const rawConfig = (getPConnect().getRawMetadata() as any).config;
+    const rawFields = rawConfig?.presets?.[0].children?.[0]?.children || [];
+
+    const caseFields = rawFields
+      .filter(
+        (field: any) =>
+          field.config.value.includes(`@P .${Utils.getMappedKey('pyID')}`) ||
+          field.config.value.includes(`@P ${primaryField}`),
+      )
+      .map((field: any) => field.config.value);
+
+    const dataFields = rawFields
+      .filter((field: any) => field.config.value.includes(`@P ${primaryField}`))
+      .map((field: any) => field.config.value);
+
+    const defaultFields: any[] = rawConfig?.detailsDisplay || [];
+    if (
+      defaultFields?.length === 2 &&
+      defaultFields[0].config.value === defaultFields[1].config.value
+    ) {
+      defaultFields.splice(0, 1);
+    }
+    defaultFields.forEach((field: any) => {
+      if (
+        (referenceType.toUpperCase() === CASE &&
+          !caseFields.includes(field?.config?.value)) ||
+        (referenceType.toUpperCase() === DATA &&
+          !dataFields.includes(field?.config?.value))
+      ) {
+        (
+          getPConnect().getRawMetadata() as any
+        ).config?.presets?.[0].children?.[0]?.children?.unshift(field);
+      }
+    });
+
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
+  const renderModal = () => {
+    const SimpleTableManual = getComponentFromRegistry('SimpleTableManual');
+
+    let readonlyContextObject: { referenceList?: object[] } | undefined;
+    if (typeof props.referenceList === 'string') {
+      readonlyContextObject = { referenceList: readonlyContextList };
+    }
+
+    return (
+      <Dialog open={modalOpen} onClose={closeModal} maxWidth='md' fullWidth>
+        <DialogTitle>{label}</DialogTitle>
+        <DialogContent>
+          <SimpleTableManual
+            {...props}
+            {...readonlyContextObject}
+            classId={SIMPLE_TABLE_MANUAL_READONLY}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeModal} variant='contained'>
+            {localizedVal('Close', localeCategory)}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  };
+
+  let displayComp: any;
+
+  if (readonlyContextList && readonlyContextList.length > 0) {
+    const listLength = readonlyContextList.length;
+    const filteredList = ['combobox', 'checkboxgroup'].includes(displayAs)
+      ? readonlyContextList
+      : readonlyContextList.slice(0, 5);
+
+    displayComp = (
+      <div>
+        {filteredList.map((child: any, index: number) => {
+          const selectionKeyProp = selectionKey.substring(1);
+          const primaryFieldProp = primaryField?.substring(1);
+          const selectionListProp = selectionList?.substring(1);
+          const referenceLabel = child[primaryFieldProp] || '';
+
+          let resourcePayload = {};
+          let resourceParams = {};
+          let previewKey = '';
+
+          if (referenceType.toUpperCase() === CASE) {
+            previewKey = child[Utils.getMappedKey('pzInsKey')];
+            resourcePayload = { caseClassName: child.classID };
+            resourceParams = { workID: child[selectionKeyProp] };
+          }
+
+          const metadata = {
+            type: 'SemanticLink',
+            config: {
+              text: referenceLabel,
+              resourceParams,
+              resourcePayload,
+              previewKey,
+              referenceType,
+            },
+          };
+
+          const childPConnectConfig = PCore.createPConnect({
+            meta: metadata,
+            options: {
+              context: pConn.getContextName(),
+              pageReference: `${pConn.getPageReference()}.${selectionListProp}[${index}]`,
+            },
+          });
+
+          return (
+            <Fragment key={child[selectionKeyProp]}>
+              {createElement(PComponent, { ...childPConnectConfig })}
+              {index + 1 !== filteredList.length && ', '}
+            </Fragment>
+          );
+        })}
+        {listLength > 5 &&
+          !['combobox', 'checkboxgroup'].includes(displayAs) && (
+            <Link component='button' onClick={openModal} underline='hover'>
+              ({listLength} {localizedVal('Total', localeCategory)})
+            </Link>
+          )}
+      </div>
+    );
+  }
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return displayComp ?? <Typography variant='body2'>---</Typography>;
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'baseline',
+        gap: '0.5rem',
+      }}
+    >
+      {!hideLabel && label && (
+        <Typography variant='body2' color='text.secondary'>
+          {label}
+        </Typography>
+      )}
+      {displayComp}
+      {renderModal()}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,71 @@
+import { FormControl, FormLabel } from '@mui/material';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface SingleReferenceReadOnlyProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  config: any;
+  displayAs?: string;
+  ruleClass?: string;
+  label?: string;
+  displayMode?: string;
+  type: string;
+  referenceType?: string;
+  hideLabel?: boolean;
+  dataRelationshipContext?: string;
+}
+
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
+  const {
+    getPConnect,
+    displayAs = '',
+    ruleClass = '',
+    label = '',
+    type = '',
+    displayMode = '',
+    referenceType = '',
+    hideLabel = false,
+    dataRelationshipContext = null,
+    config
+  } = props;
+
+  const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];
+
+  if (editableComponents.includes(type)) {
+    config.caseClass = ruleClass;
+    config.text = config.primaryField;
+    config.caseID = config.value;
+    config.contextPage = `@P .${dataRelationshipContext}`;
+    config.resourceParams = {
+      workID: displayAs === 'table' ? config.selectionKey : config.value
+    };
+    config.resourcePayload = {
+      caseClassName: ruleClass
+    };
+  }
+
+  const component = getPConnect().createComponent(
+    {
+      type: 'SemanticLink',
+      config: {
+        ...config,
+        label,
+        displayMode,
+        referenceType,
+        hideLabel,
+        dataRelationshipContext
+      }
+    },
+    '',
+    0,
+    {}
+  ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+
+  return (
+    <>
+      <FormControl variant='standard' sx={{ display: 'flex', flexDirection: 'row' }}>
+        <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
+        {component}
+      </FormControl>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,46 @@
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+
+import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface SubTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function SubTabs(props: PropsWithChildren<SubTabsProps>) {
+  const { children = [] } = props;
+
+  const defaultTabIndex = 0;
+  const deferLoadedTabs = Children.toArray(children)[0];
+  const availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');
+  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
+
+  const [tabItems, setTabitem] = useState<any[]>([]);
+  useEffect(() => {
+    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);
+    setTabitem(tempTabItems);
+  }, [currentTabId]);
+
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  return (
+    <TabContext value={currentTabId.toString()}>
+      <Tabs onChange={handleTabClick} value={currentTabId} variant='scrollable'>
+        {tabItems.map((tab: any) => (
+          <Tab key={tab.id} label={tab.name} value={tab.id} />
+        ))}
+      </Tabs>
+
+      {tabItems.map((tab: any) => (
+        <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
+          <div>{tab.content ? tab.content : 'No content exists'}</div>
+        </TabPanel>
+      ))}
+    </TabContext>
+  );
+}

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

@@ -0,0 +1,8 @@
+{
+  "name": "SubTabs",
+  "label": "Sub tabs",
+  "description": "Sub tabs view",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

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

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

package/templates/react-sdk-reference/src/components/template/SubTabs/tabUtils.ts

@@ -0,0 +1,185 @@
+export const getDeferFriendlyTabs = allTabs => {
+  return allTabs.map(tab => {
+    const theTabCompConfig = tab.getPConnect().getConfigProps();
+    return { type: 'DeferLoad', config: theTabCompConfig };
+  });
+};
+
+export const getVisibleTabs = (allTabs, uuid) => {
+  let index = 0;
+  return allTabs.props
+    .getPConnect()
+    .getChildren()
+    ?.filter(child => {
+      // US-402838: Filter out tab entries if the config object does not contain the visibility attribute or it evaluates to the boolean true,
+      const config = child.getPConnect().getConfigProps();
+
+      // BUG-642335 - adding isChildDeferLoad prop
+      if (child.getPConnect().getComponentName() === 'DeferLoad') {
+        const { name: viewName, deferLoadId = `${viewName}_${uuid}_${index}` } = config;
+        child.getPConnect().registerAdditionalProps({
+          deferLoadId,
+          isChildDeferLoad: true,
+          lastUpdateCaseTime: '@P caseInfo.lastUpdateTime'
+        });
+      }
+      index += 1;
+      return !('visibility' in config) || config.visibility === true;
+    });
+};
+
+export const getTransientTabs = (availableTabs, currentTabId, tabItems) => {
+  return (
+    availableTabs?.map((child, i) => {
+      const config = child.getPConnect().getConfigProps();
+      const tabLabel =
+        config.label ||
+        config.inheritedProps?.find(obj => obj.prop === 'label')?.value ||
+        PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      const tabContent = () => {
+        if (i.toString() === currentTabId) {
+          return tabItems?.[i.toString()]?.content ? tabItems?.[i.toString()]?.content : child.getPConnect().getComponent();
+        }
+        return tabItems?.[i.toString()]?.content;
+      };
+      return {
+        name: tabLabel,
+        id: i.toString(),
+        content: tabContent()
+      };
+    }) || []
+  );
+};
+
+export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabItems) => {
+  const currentPConn = availableTabs[currentTabId].getPConnect();
+  const { deferLoadId } = currentPConn.getConfigProps();
+  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());
+
+  setCurrentTabId(id);
+  const index = parseInt(id, 10);
+  if (tabItems[index]?.content === null) {
+    tabItems[index].content = availableTabs[index].getPConnect().getComponent();
+  }
+
+  const nextPConn = availableTabs[id].getPConnect();
+  const { deferLoadId: activeId } = nextPConn?.getConfigProps() || {};
+  PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());
+  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());
+};
+
+export const searchtabsClick = (id, mainTabs, currentTabId, setCurrentTabId) => {
+  const currentTab = mainTabs.find(item => item.id === currentTabId && item.visibility());
+  const currentPConn = currentTab?.getPConnect();
+  const { deferLoadId } = currentPConn?.getConfigProps() ?? {};
+  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());
+
+  setCurrentTabId(id);
+  const nextActiveTab = mainTabs.find(item => item.id === id && item.visibility());
+  if (mainTabs && nextActiveTab?.content === null) {
+    nextActiveTab.content = nextActiveTab.getPConnect().getComponent();
+  }
+
+  const nextPConn = nextActiveTab.getPConnect();
+  const { deferLoadId: activeId } = nextPConn.getConfigProps();
+  PCore.getDeferLoadManager().activate(activeId, nextPConn.getContextName());
+  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn.getContextName());
+};
+
+export const getTabLabel = tabPConnect => {
+  const config = tabPConnect.getConfigProps();
+
+  const label = config.inheritedProps?.find(obj => obj.prop === 'label')?.value;
+
+  if (label) {
+    return label;
+  }
+  if (config.label) {
+    return config.label;
+  }
+
+  if (tabPConnect.getReferencedView()?.config?.label) {
+    return tabPConnect.getReferencedView()?.config?.label;
+  }
+
+  return PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+};
+
+export const getActiveTabId = (mainTabs, currentTabId) => {
+  let firstVisibleTabId = null;
+  let updatedActiveId = currentTabId;
+  let isCurrentTabFound = false;
+
+  if (!mainTabs?.length) {
+    return updatedActiveId;
+  }
+
+  for (let i = 0; i < mainTabs.length; i += 1) {
+    const tab = mainTabs[i];
+    const tabConfig = tab.getPConnect().getConfigProps();
+    const tabId = tab?.id || `${tab.getPConnect().viewName}-${tabConfig.name || getTabLabel(tab.getPConnect())}-${i}`;
+    const isTabVisible = !Object.hasOwn(tabConfig, 'visibility') || tabConfig.visibility === true;
+    if (isTabVisible && !firstVisibleTabId) {
+      firstVisibleTabId = tabId;
+      if (isCurrentTabFound) {
+        updatedActiveId = firstVisibleTabId;
+        break;
+      }
+    }
+    if (tabId === currentTabId) {
+      isCurrentTabFound = true;
+      if (isTabVisible) {
+        break;
+      } else if (firstVisibleTabId) {
+        updatedActiveId = firstVisibleTabId;
+        break;
+      }
+    }
+  }
+  return updatedActiveId;
+};
+/**
+ *
+ * @param {*} deferLoadedTabs list of deferLoadedTabs
+ * @param {string} tabViewName (optional) if provided, tabId of the given tabView will be returned
+ * @returns {string} a tab id is returned
+ */
+export const getFirstVisibleTabId = (deferLoadedTabs, tabViewName) => {
+  let tabIndex = 0;
+
+  const viewName = deferLoadedTabs?.props?.getPConnect()?.options?.viewName;
+
+  const deferTabsChildren = deferLoadedTabs.props.getPConnect().getChildren();
+  if (tabViewName) {
+    const firstVisibleTab = deferTabsChildren?.find((item, index) => {
+      const tabConfig = item.getPConnect().getConfigProps();
+      if (tabViewName === tabConfig.name) {
+        tabIndex = index;
+        return true;
+      }
+      return false;
+    });
+    const tabConfig = firstVisibleTab.getPConnect().getConfigProps();
+
+    return `${viewName}-${tabConfig.name || getTabLabel(firstVisibleTab.getPConnect())}-${tabIndex}`;
+  }
+
+  const firstVisibleTab = deferLoadedTabs.props
+    .getPConnect()
+    .getChildren()
+    ?.find((item, index) => {
+      const tabConfig = item.getPConnect().getConfigProps();
+      if (!('visibility' in tabConfig) || tabConfig.visibility === true) {
+        tabIndex = index;
+        return true;
+      }
+      return false;
+    });
+
+  if (!firstVisibleTab) {
+    return null;
+  }
+
+  const tabConfig = firstVisibleTab.getPConnect().getConfigProps();
+  return `${viewName}-${tabConfig.name || getTabLabel(firstVisibleTab.getPConnect())}-${tabIndex}`;
+};

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

@@ -0,0 +1,12 @@
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}