@pega/react-sdk-overrides 0.23.6

package/lib/templates/SimpleTable/SimpleTableManual/index.tsx

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

package/lib/templates/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -0,0 +1,129 @@
+import PropTypes from 'prop-types';
+import React from "react";
+import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
+import SimpleTable from '@pega/react-sdk-components/lib/components/templates/SimpleTable';
+
+import PromotedFilters from '@pega/react-sdk-components/lib/components/templates/PromotedFilters';
+
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  return parentPropName === referenceProp;
+};
+declare const PCore;
+/**
+ * SimpleTable react component
+ * @param {*} props - props
+ */
+export default function SimpleTableSelect(props) {
+  const { label, getPConnect, renderMode, showLabel, viewName, parameters, dataRelationshipContext } = 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();
+  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 = null;
+  if (props.dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
+    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
+    : pConn.getCurrentPageFieldMetadata(contextPageReference);
+
+  const compositeKeys: Array<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().config.promotedFilters ?? [];
+
+  const isSearchable = filters.length > 0;
+
+  if (isSearchable) {
+    return (
+      <PromotedFilters
+        getPConnect={getPConnect}
+        viewName={viewName}
+        filters={filters}
+        listViewProps={listViewProps}
+        pageClass={pageClass}
+      />
+    );
+  }
+  return <ListView {...listViewProps} />;
+}
+
+SimpleTableSelect.defaultProps = {
+  label: undefined,
+  renderMode: '',
+  showLabel: true,
+  promptedFilters: [],
+  viewName: '',
+  parameters: undefined,
+  readonlyContextList: [],
+  dataRelationshipContext: null
+};
+
+SimpleTableSelect.propTypes = {
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  referenceList: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]).isRequired,
+  renderMode: PropTypes.string,
+  showLabel: PropTypes.bool,
+  promptedFilters: PropTypes.arrayOf(PropTypes.object),
+  viewName: PropTypes.string,
+  parameters: PropTypes.objectOf(PropTypes.any),
+  readonlyContextList: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]),
+  dataRelationshipContext: PropTypes.string
+};

package/lib/templates/SimpleTable/SimpleTableSelect/index.tsx

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

package/lib/templates/SimpleTable/helpers.ts

@@ -0,0 +1,360 @@
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+declare const PCore;
+
+export const TABLE_CELL = "SdkRenderer";
+export const DELETE_ICON = "DeleteIcon";
+
+// BUG-615253: Workaround for autosize in table with lazy loading components
+/* istanbul ignore next */
+function getFieldWidth(field, label) {
+  let width;
+  switch (field.type) {
+    case "Time":
+      width = 150;
+      break;
+    case "Date":
+      width = 160;
+      break;
+    case "DateTime":
+      width = 205;
+      break;
+    case "AutoComplete":
+    case "TextArea":
+      width = 190;
+      break;
+    case "Currency":
+    case "TextInput":
+      width = 182;
+      break;
+    case "Checkbox":
+      // eslint-disable-next-line no-case-declarations
+      const text = document.createElement("span");
+      document.body.appendChild(text);
+      text.style.fontSize = "13px";
+      text.style.position = "absolute";
+      text.innerHTML = label;
+      width = Math.ceil(text.clientWidth) + 30;
+      document.body.removeChild(text);
+      break;
+    default:
+      width = 180;
+  }
+  return width;
+}
+
+export const getContext = (thePConn) => {
+  const contextName = thePConn.getContextName();
+  const pageReference = thePConn.getPageReference();
+  let { referenceList } = thePConn.getStateProps().config;
+  const pageReferenceForRows = referenceList.startsWith(".")
+    ? `${pageReference}.${referenceList.substring(1)}`
+    : referenceList;
+
+  // removing "caseInfo.content" prefix to avoid setting it as a target while preparing pageInstructions
+  referenceList = pageReferenceForRows.replace(
+    PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT,
+    ""
+  );
+
+  return {
+    contextName,
+    referenceListStr: referenceList,
+    pageReferenceForRows
+  };
+};
+
+export const populateRowKey = (rawData) => {
+  return rawData.map((row, index) => {
+    return { ...row, index };
+  });
+};
+
+export const getApiContext = (processedData, pConnect, reorderCB) => {
+  return {
+    fetchData: () => {
+      return new Promise((resolve) => {
+        resolve({
+          data: processedData,
+          filteredRecordCount: processedData.length,
+          totalRecordCount: processedData.length
+        });
+      });
+    },
+    fetchPersonalizations: () => {
+      return Promise.resolve({});
+    },
+    applyRowReorder: (sourceKey, destinationKey) => {
+      // indexes are keys for simple table so, it should work.
+      reorderCB();
+      return Promise.resolve(
+        pConnect
+          .getListActions()
+          .reorder(parseInt(sourceKey, 10), parseInt(destinationKey, 10))
+      );
+    }
+  };
+};
+
+export const buildMetaForListView = (
+  fieldMetadata,
+  fields,
+  type,
+  ruleClass,
+  name,
+  propertyLabel,
+  parameters
+) => {
+  return {
+    name,
+    config: {
+      type,
+      referenceList: fieldMetadata.datasource.name,
+      parameters: parameters ?? fieldMetadata.datasource.parameters,
+      personalization: false,
+      grouping: true,
+      globalSearch: true,
+      reorderFields: true,
+      toggleFieldVisibility: true,
+      personalizationId: "" /* TODO */,
+      template: "ListView",
+      presets: [
+        {
+          name: "presets",
+          template: "Table",
+          config: {},
+          children: [
+            {
+              name: "Columns",
+              type: "Region",
+              children: fields
+            }
+          ],
+          label: propertyLabel,
+          id: "P_" /* TODO */
+        }
+      ],
+      ruleClass
+    }
+  };
+};
+
+export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+  const fieldDefs = configFields.map((field, index) => {
+    return {
+      type: "text",
+      label: fields[index].config.label || fields[index].config.caption,
+      fillAvailableSpace: !!field.config.fillAvailableSpace,
+      id: index,
+      name: field.config.value.substr(4),
+      cellRenderer: TABLE_CELL,
+      sort: false,
+      noContextMenu: true,
+      showMenu: false,
+      meta: {
+        ...field
+      },
+      // BUG-615253: Workaround for autosize in table with lazy loading components
+      width: getFieldWidth(field, fields[index].config.label)
+    };
+  });
+
+  // ONLY add DELETE_ICON to fields when the table is requested as EDITABLE
+  if (showDeleteButton) {
+    fieldDefs.push({
+      type: "text",
+      id: fieldDefs.length,
+      cellRenderer: DELETE_ICON,
+      sort: false,
+      noContextMenu: true,
+      showMenu: false,
+      // BUG-615253: Workaround for autosize in table with lazy loading components
+      width: 46
+    });
+  }
+
+  return fieldDefs;
+};
+
+export const createMetaForTable = (fields, renderMode) => {
+  return {
+    height: {
+      minHeight: "auto",
+      fitHeightToElement: "fitHeightToElement",
+      deltaAdjustment: "deltaAdjustment",
+      autoSize: true
+    },
+    fieldDefs: fields,
+    itemKey: "index",
+    grouping: false,
+    reorderFields: false,
+    reorderItems: renderMode === "Editable",
+    dragHandle: renderMode === "Editable",
+    globalSearch: false,
+    personalization: false,
+    toggleFieldVisibility: false,
+    toolbar: false,
+    footer: false,
+    filterExpression: null,
+    editing: false,
+    timezone: PCore.getEnvironmentInfo().getTimeZone()
+  };
+};
+
+/**
+ * This method returns a callBack function for Add action.
+ * @param {object} pConnect - PConnect object
+ * @param {number} index - index of the page list to add
+ */
+export const getAddRowCallback = (pConnect, index) => {
+  return () => pConnect.getListActions().insert({}, index);
+};
+
+/**
+ * This method creates a PConnect object with proper options for Add and Delete actions
+ * @param {string} contextName - contextName
+ * @param {string} referenceList - referenceList
+ * @param {string} pageReference - pageReference
+ */
+export const createPConnect = (contextName, referenceList, pageReference) => {
+  const options = {
+    context: contextName,
+    pageReference,
+    referenceList
+  };
+
+  // create PConnect object
+  const config = { meta: {}, options };
+  const { getPConnect } = PCore.createPConnect(config);
+
+  return getPConnect();
+};
+
+export const filterData = (filterByColumns) => {
+  return function filteringData(item) {
+    let bKeep = true;
+    for (const filterObj of filterByColumns) {
+      if (
+        filterObj.containsFilterValue !== '' ||
+        filterObj.containsFilter === 'null' ||
+        filterObj.containsFilter === 'notnull'
+      ) {
+        let value: any;
+        let filterValue: any;
+
+        switch (filterObj.type) {
+          case 'Date':
+          case 'DateTime':
+          case 'Time':
+            value =
+              item[filterObj.ref] !== null ?? item[filterObj.ref] !== ''
+                ? Utils.getSeconds(item[filterObj.ref])
+                : null;
+            filterValue =
+              filterObj.containsFilterValue !== null && filterObj.containsFilterValue !== ''
+                ? Utils.getSeconds(filterObj.containsFilterValue)
+                : null;
+
+            // eslint-disable-next-line sonarjs/no-nested-switch
+            switch (filterObj.containsFilter) {
+              case 'notequal':
+                // becasue filterValue is in minutes, need to have a range of less than 60 secons
+
+                if (value !== null && filterValue !== null) {
+                  // get rid of milliseconds
+                  value /= 1000;
+                  filterValue /= 1000;
+
+                  const diff = value - filterValue;
+                  if (diff >= 0 && diff < 60) {
+                    bKeep = false;
+                  }
+                }
+
+                break;
+
+              case 'equal':
+                  // becasue filterValue is in minutes, need to have a range of less than 60 secons
+
+                  if (value !== null && filterValue !== null) {
+                    // get rid of milliseconds
+                    value /= 1000;
+                    filterValue /= 1000;
+
+                    const diff = value - filterValue;
+                    if (diff !== 0) {
+                      bKeep = false;
+                    }
+                  }
+
+              break;
+
+              case 'after':
+                if (value < filterValue) {
+                  bKeep = false;
+                }
+                break;
+
+              case 'before':
+                if (value > filterValue) {
+                  bKeep = false;
+                }
+                break;
+
+              case 'null':
+                if (value !== null) {
+                  bKeep = false;
+                }
+                break;
+
+              case 'notnull':
+                if (value === null) {
+                  bKeep = false;
+                }
+                break;
+
+              default:
+                break;
+            }
+            break;
+
+          default:
+            value = item[filterObj.ref].toLowerCase();
+            filterValue = filterObj.containsFilterValue.toLowerCase();
+
+            // eslint-disable-next-line sonarjs/no-nested-switch
+            switch (filterObj.containsFilter) {
+              case 'contains':
+                if (value.indexOf(filterValue) < 0) {
+                  bKeep = false;
+                }
+                break;
+
+              case 'equals':
+                if (value !== filterValue) {
+                  bKeep = false;
+                }
+                break;
+
+              case 'startswith':
+                if (value.indexOf(filterValue) !== 0) {
+                  bKeep = false;
+                }
+                break;
+
+              default:
+                break;
+            }
+
+            break;
+        }
+      }
+
+      // if don't keep stop filtering
+      if (!bKeep) {
+        break;
+      }
+    }
+    return bKeep;
+  }
+}

package/lib/templates/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -0,0 +1,66 @@
+import PropTypes from "prop-types";
+
+export default function SingleReferenceReadOnly(props) {
+  const {
+    getPConnect,
+    displayAs,
+    ruleClass,
+    label,
+    type,
+    displayMode,
+    referenceType,
+    hideLabel,
+    dataRelationshipContext,
+    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
+    };
+  }
+
+  return getPConnect().createComponent({
+    type: 'SemanticLink',
+    config: {
+      ...config,
+      label,
+      displayMode,
+      referenceType,
+      hideLabel,
+      dataRelationshipContext
+    }
+  });
+}
+
+SingleReferenceReadOnly.defaultProps = {
+  displayAs: "",
+  ruleClass: "",
+  label: "",
+  displayMode: "",
+  type: "",
+  referenceType: "",
+  hideLabel: false,
+  dataRelationshipContext: null
+};
+
+SingleReferenceReadOnly.propTypes = {
+  config: PropTypes.object,
+  getPConnect: PropTypes.func.isRequired,
+  displayAs: PropTypes.string,
+  ruleClass: PropTypes.string,
+  label: PropTypes.string,
+  displayMode: PropTypes.string,
+  type: PropTypes.string,
+  referenceType: PropTypes.string,
+  hideLabel: PropTypes.bool,
+  dataRelationshipContext: PropTypes.string
+};

package/lib/templates/SingleReferenceReadOnly/index.tsx

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

package/lib/templates/SubTabs/SubTabs.tsx

@@ -0,0 +1,65 @@
+import React, { Fragment, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Tab, Tabs } from "@material-ui/core";
+import { TabContext, TabPanel } from '@material-ui/lab';
+import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
+
+export default function SubTabs(props) {
+  const { children } = props;
+
+  const defaultTabIndex = 0;
+  const deferLoadedTabs = children[0];
+  const availableTabs = getVisibleTabs(deferLoadedTabs, "tabsSubs");
+  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
+
+  const [tabItems, setTabitem] = useState<Array<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 (
+    <Fragment>
+      <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>
+    </Fragment>
+  );
+}
+
+SubTabs.defaultProps = {
+   children: []
+}
+
+SubTabs.propTypes = {
+   children: PropTypes.arrayOf(PropTypes.node)
+};

package/lib/templates/SubTabs/index.tsx

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

package/lib/templates/SubTabs/tabUtils.ts

@@ -0,0 +1,73 @@
+
+declare const PCore;
+
+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
+        });
+      }
+      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());
+};