@pega/sdk 0.0.1

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

@@ -0,0 +1,349 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { SdkConfigAccess } from '@pega/auth/lib/sdk-auth-manager';
+
+dayjs.extend(customParseFormat);
+dayjs.extend(localizedFormat);
+dayjs.extend(relativeTime);
+
+export class Utils {
+  static lastControlID = 0;
+
+  static getSDKStaticConentUrl() {
+    const sdkConfigServer = SdkConfigAccess.getSdkConfigServer();
+
+    // NOTE: Needs a trailing slash! So add one if not provided
+    if (!sdkConfigServer.sdkContentServerUrl.endsWith('/')) {
+      sdkConfigServer.sdkContentServerUrl = `${sdkConfigServer.sdkContentServerUrl}/`;
+    }
+
+    return `${sdkConfigServer.sdkContentServerUrl}constellation/`;
+  }
+
+  static getUniqueControlID(): string {
+    const sPrefix = 'control-';
+
+    this.lastControlID += 1;
+
+    return sPrefix + this.lastControlID.toString();
+  }
+
+  static getOptionList(configProps: any, dataObject: any): any[] {
+    const listType = configProps.listType;
+    let arReturn: any[] = [];
+
+    if (listType) {
+      switch (listType.toLowerCase()) {
+        case 'associated':
+          // data source should be an array
+          if (typeof configProps.datasource === 'object') {
+            arReturn = configProps.datasource;
+          }
+          break;
+
+        case 'datapage':
+          // get data page
+          // eslint-disable-next-line no-case-declarations
+          const dataPage = configProps.datasource;
+          if (typeof dataPage === 'string' && dataObject[dataPage]) {
+            alert('need to handle data page');
+          } else {
+            let listSourceItems = configProps.listOutput;
+            if (typeof dataPage === 'object' && !Array.isArray(listSourceItems)) {
+              listSourceItems = dataPage.source ? dataPage.source : [];
+            }
+            (listSourceItems || []).forEach(item => {
+              item.value = item.text ? item.text : item.value;
+            });
+            arReturn = listSourceItems || [];
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    return arReturn;
+  }
+
+  static getInitials(userName: string): string {
+    let userInitials = userName;
+
+    if (userName && userName !== '') {
+      userInitials = userName.charAt(0);
+
+      if (userName.lastIndexOf(' ') > 0) {
+        const lastName = userName.substring(userName.lastIndexOf(' ') + 1);
+        userInitials += lastName.charAt(0);
+      } else if (userName.lastIndexOf('.') > 0) {
+        const lastName = userName.substring(userName.lastIndexOf('.') + 1);
+        userInitials += lastName.charAt(0);
+      }
+    } else {
+      userInitials = '';
+    }
+
+    return userInitials.toUpperCase();
+  }
+
+  static getImageSrc(name: string, serverUrl: string): string {
+    let iconName = name.replace('pi-', '').replace('pi ', '').trim();
+    if (iconName === 'line-chart') {
+      iconName = 'chart-line';
+    }
+
+    return this.getIconPath(serverUrl).concat(iconName).concat('.svg');
+  }
+
+  static getIconPath(serverUrl: string): string {
+    // Directory in the constellation folder where the icons will be
+    return serverUrl.concat('icons/');
+  }
+
+  static getBooleanValue(inValue: any): boolean {
+    let bReturn = false;
+
+    if (typeof inValue === 'string') {
+      // Experiment with having "" be true, too (and "on")
+      if (inValue.toLowerCase() === 'true' || inValue.toLowerCase() === 'on' || inValue === '') {
+        bReturn = true;
+      }
+    } else {
+      bReturn = inValue;
+    }
+
+    return bReturn;
+  }
+
+  // Note: Explored using formatters/format but that doesn't do the same as this function.  So not possible to just invoke
+  //  format and do away with all the separate Pega possible dateFormats.
+  static generateDate(dateVal, dateFormat) {
+    let sReturnDate = dateVal;
+
+    if (dateVal === null || dateVal === '') {
+      return dateVal;
+    }
+
+    // VRS: Dont think we need the below line.  Commenting out for now. (2020.05.20)
+    // dateTimeVal = dateTimeVal.replace("GMT", "+0000")
+    // Anything else would require a specific String pattern be specified as an argument to the dayjs constructor
+
+    // if date has a ".", then of the format YYYMMDD[T]HHmmss[.]SSS Z, need to change to YYYYMMDD
+    if (dateVal.indexOf('.') >= 0) {
+      // VRS: Dont think we need the dateVal.replace("GMT", "+0000").  Commenting out for now. (2020.05.20)
+      // dateVal = dayjs(dateVal.replace("GMT", "+0000"), "YYYYMMDD[T]HHmmss[.]SSS Z").format("YYYYMMDD");
+      // dateVal format appears to be YYYY-MM-DDThh:mm:ss.SSSZ (which is the default dayjs expected format)
+      // Don't change the dateVal passed to dayjs (rather just set a default sReturnDate--if that is what we want to do)
+      //  (better might be just doing that in a default switch block)
+      sReturnDate = dayjs(dateVal).format('YYYYMMDD');
+    }
+
+    switch (dateFormat) {
+      case 'Date-Short':
+        // 1/1/01
+        sReturnDate = dayjs(dateVal).format('M/D/YY');
+        break;
+      case 'Date-Short-YYYY':
+        // 1/1/2001
+        sReturnDate = dayjs(dateVal).format('M/D/YYYY');
+        break;
+      case 'Date-Short-Custom':
+        // 01/01/01
+        sReturnDate = dayjs(dateVal).format('MM/DD/YY');
+        break;
+      case 'Date-Short-Custom-YYYY':
+        // 01/01/2001
+        sReturnDate = dayjs(dateVal).format('L');
+        break;
+      case 'Date-Medium':
+        // Jan 1, 2001
+        sReturnDate = dayjs(dateVal).format('ll');
+        break;
+      case 'Date-DayMonthYear-Custom':
+        // 01-Jan-2001
+        sReturnDate = dayjs(dateVal).format('DD-MMM-YYYY');
+        break;
+      case 'Date-Full':
+        // Monday, January 1, 2001
+        sReturnDate = dayjs(dateVal).format('dddd, MMMM D, YYYY');
+        break;
+      case 'DateTime-Frame':
+      case 'DateTime-Frame-Short':
+      case 'DateTime-Since':
+        // 2 days, 5 hours ago
+        sReturnDate = dayjs(dateVal).fromNow();
+        break;
+      case 'Date-Long':
+        // January 1, 2001
+        sReturnDate = dayjs(dateVal).format('MMMM D, YYYY');
+        break;
+      case 'Date-ISO-8601':
+        // 2001/01/01 y/m/d
+        sReturnDate = dayjs(dateVal).format('YYYY/MM/DD');
+        break;
+      case 'Date-Gregorian-1':
+        // 01 January, 2001
+        sReturnDate = dayjs(dateVal).format('DD MMMM, YYYY');
+        break;
+      case 'Date-Gregorian-2':
+        // January 01, 2001
+        sReturnDate = dayjs(dateVal).format('MMMM DD, YYYY');
+        break;
+      case 'Date-Gregorian-3':
+        // 2001, January 01
+        sReturnDate = dayjs(dateVal).format('YYYY, MMMM DD');
+        break;
+      case 'DateTime-Custom':
+        break;
+      default:
+        break;
+    }
+
+    return sReturnDate;
+  }
+
+  // Note: Explored using formatters/format but that doesn't do the same as this function.  So not possible to just invoke
+  //  format and do away with all the separate Pega possible dateFormats.
+  static generateDateTime(dateTimeVal, dateFormat) {
+    let sReturnDate = dateTimeVal;
+
+    if (dateTimeVal === null || dateTimeVal === '') {
+      return dateTimeVal;
+    }
+
+    // VRS: Dont think we need the below line.  Commenting out for now. (2020.05.20)
+    // dateTimeVal = dateTimeVal.replace("GMT", "+0000")
+    // dateTimeVal format appears to be YYYY-MM-DDThh:mm:ss.SSSZ (which is the default dayjs expected format)
+    // Anything else would require a specific String pattern be specified as an argument to the dayjs constructor
+
+    switch (dateFormat) {
+      case 'DateTime-Short':
+        // 1/1/01 1:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('M/D/YY h:mm A');
+        break;
+      case 'DateTime-Short-Custom':
+        // 01/01/01 01:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MM/DD/YY hh:mm A');
+        break;
+      case 'DateTime-Short-YYYY-Custom':
+        // 01/01/2001 01:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('M/D/YYYY hh:mm A');
+        break;
+      case 'DateTime-Short-YYYY':
+        // 1/1/2001 1:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('M/D/YYYY h:mm A');
+        break;
+      case 'DateTime-Medium':
+        // Jan 1, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MMM D, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Long':
+        // January 1, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MMMM D, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-DayMonthYear-Custom':
+        // 01-Jan-2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('DD-MMM-YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Full':
+        // Monday, January 1, 2001 1:00 AM EDT
+        sReturnDate = dayjs(dateTimeVal).format('dddd, MMMM D, YYYY h:mm A z');
+        break;
+      case 'DateTime-Frame':
+      case 'DateTime-Frame-Short':
+      case 'DateTime-Since':
+        // 2 days, 5 hours ago
+        sReturnDate = dayjs(dateTimeVal).fromNow();
+        break;
+      case 'DateTime-ISO-8601':
+        // 2001/01/01 1:00:00 AM     y/m/d
+        sReturnDate = dayjs(dateTimeVal).format('YYYY/MM/DD h:mm:ss A');
+        break;
+      case 'DateTime-Gregorian-1':
+        // 01 January, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('DD MMMM, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Gregorian-2':
+        // January 01, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MMMM DD, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Gregorian-3':
+        // 2001, January 01 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('YYYY, MMMM DD h:mm:ss A');
+        break;
+      case 'DateTime-Custom':
+        break;
+      default:
+        break;
+    }
+
+    return sReturnDate;
+  }
+
+  static getSeconds(sTime): any {
+    return dayjs(sTime).valueOf();
+  }
+
+  static getIconFromFileType(fileType): string {
+    let icon = 'document-doc';
+    if (!fileType) return icon;
+    if (fileType.startsWith('audio')) {
+      icon = 'audio';
+    } else if (fileType.startsWith('video')) {
+      icon = 'video';
+    } else if (fileType.startsWith('image')) {
+      icon = 'picture';
+    } else if (fileType.includes('pdf')) {
+      icon = 'document-pdf';
+    } else {
+      const [, subtype] = fileType.split('/');
+      const foundMatch = sources => {
+        return sources.some(key => subtype.includes(key));
+      };
+
+      if (foundMatch(['excel', 'spreadsheet'])) {
+        icon = 'document-xls';
+      } else if (foundMatch(['zip', 'compressed', 'gzip', 'rar', 'tar'])) {
+        icon = 'document-compress';
+      }
+    }
+
+    return icon;
+  }
+
+  static getIconForAttachment(attachment) {
+    let icon;
+    switch (attachment.type) {
+      case 'FILE':
+        icon = this.getIconFromFileType(attachment.mimeType);
+        break;
+      case 'URL':
+        icon = 'chain';
+        break;
+      default:
+        icon = 'document-doc';
+    }
+    return icon;
+  }
+
+  static getLastChar(text) {
+    return text.charAt(text.length - 1);
+  }
+
+  static isObject(objValue) {
+    return objValue && typeof objValue === 'object' && objValue.constructor === Object;
+  }
+
+  static getMappedKey(key) {
+    const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
+    if (!mappedKey) {
+      return key;
+    }
+    return mappedKey;
+  }
+}
+
+export default Utils;

package/templates/react-sdk-reference/src/components/helpers/versionHelpers.ts

@@ -0,0 +1,14 @@
+/**
+ * versionHelpers.ts
+ *
+ * Container helper functions that can identify which version of
+ * PCore/PConnect is being run
+ */
+
+export const sdkVersion = '8.7';
+
+export function compareSdkPCoreVersions() {
+  // const theConstellationVersion = PCore.getPCoreVersion();
+
+  console.warn(`Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`);
+}

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

@@ -0,0 +1,8 @@
+// === Component map (registers all field/template/widget/designSystemExtension components) ===
+export {
+  getSampleComponentMap,
+  registerSampleComponents,
+} from './component-map';
+
+// === Infrastructure components from sdk-react ===
+export { sdkComponents } from '@pega/sdk-react';

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

@@ -0,0 +1,86 @@
+import { useContext, useState } from 'react';
+
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import DataReferenceAdvancedSearchContext from '../DataReference/DataReferenceAdvancedSearchContext';
+import { getFirstChildConfig } from '../DataReference/utils';
+
+export default function AdvancedSearch(props) {
+  const { getPConnect, targetObjectClass, localeReference } = props;
+  const SearchGroups = getComponentFromRegistry('SearchGroups');
+  const { dataReferenceConfigToChild, isCreateNewReferenceEnabled, disableStartingFieldsForReference, pyID, searchSelectCacheKey } = useContext(
+    DataReferenceAdvancedSearchContext
+  ) as any;
+
+  const { selectionMode, value: singleSelectFieldValue, readonlyContextList: multiSelectField } = dataReferenceConfigToChild;
+
+  let isSelectionExist = false;
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  if (selectionMode === MULTI) {
+    isSelectionExist = getPConnect().getValue(multiSelectField)?.length || false;
+  } else {
+    isSelectionExist = getPConnect().getValue(singleSelectFieldValue) || false;
+  }
+
+  const [showRecords, setShowRecords] = useState(isSelectionExist);
+
+  const pConn = getPConnect();
+  const rawViewMetadata = pConn.getRawMetadata();
+
+  const searchFieldsSet = new Set();
+  const searchFields: any = [];
+  rawViewMetadata.config.searchGroups.forEach(group => {
+    group.children.forEach(child => {
+      if (!searchFieldsSet.has(child.config.value) && !child.config.validator) {
+        searchFields.push(child);
+        searchFieldsSet.add(child.config.value);
+      }
+    });
+  });
+
+  const firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+  const [firstChildMeta] = rawViewMetadata.children;
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+
+  const editableFieldComp = firstChildPConnect().createComponent({
+    type: firstChildMeta.type,
+    config: {
+      ...getFirstChildConfig({
+        firstChildMeta,
+        getPConnect,
+        rawViewMetadata,
+        contextClass: targetObjectClass,
+        dataReferenceConfigToChild,
+        isCreateNewReferenceEnabled,
+        disableStartingFieldsForReference,
+        pyID
+      }),
+      searchFields,
+      showRecords,
+      label: localizedVal('Search results', 'DataReference'),
+      searchSelectCacheKey,
+      cache
+    }
+  });
+
+  const { selectionList, dataRelationshipContext } = editableFieldComp.props.getPConnect().getConfigProps();
+  const editableField = selectionMode === MULTI ? selectionList.substring(1) : dataRelationshipContext;
+
+  const searchGroupsProps = {
+    getPConnect,
+    editableField,
+    localeReference,
+    setShowRecords,
+    searchSelectCacheKey,
+    cache
+  };
+
+  return (
+    <>
+      <SearchGroups {...searchGroupsProps} />
+      {editableFieldComp}
+    </>
+  );
+}

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroup/persistUtils.ts

@@ -0,0 +1,52 @@
+import { Utils } from '../../../helpers/utils';
+
+const SKIP_CACHE_KEY = '';
+
+const getComponentStateKey = (getPConnect, propertyName: string) => {
+  const pConnect = getPConnect();
+  const caseID = `.${Utils.getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
+  const resolvedCaseID = pConnect.getValue(caseID);
+
+  if (!resolvedCaseID) {
+    return SKIP_CACHE_KEY;
+  }
+
+  return `Search-${resolvedCaseID}-${pConnect.getPageReference()}-${propertyName}-${pConnect.getCurrentView()}`;
+};
+
+const getComponentStateOptions = getPConnect => {
+  return { clearOnCancelForContext: getPConnect().getContextName() };
+};
+
+interface SearchCategory {
+  // tabId of search category selected
+  selectedCategory: string;
+}
+
+interface SearchGroup {
+  // searchFields can be any object based on what fields are authored.
+  searchFields: unknown;
+  activeGroupId: string;
+}
+
+const setComponentCache = ({
+  cacheKey,
+  state,
+  options
+}: {
+  cacheKey: string;
+  state: SearchCategory | SearchGroup;
+  options: ReturnType<typeof getComponentStateOptions>;
+}) => {
+  if (cacheKey !== SKIP_CACHE_KEY) {
+    (PCore.getNavigationUtils() as any).setComponentCache(cacheKey, state, options);
+  }
+};
+
+const componentCachePersistUtils = {
+  getComponentStateKey,
+  getComponentStateOptions,
+  setComponentCache
+};
+
+export default componentCachePersistUtils;