@pega/dx-component-builder-sdk 0.23.9 → 0.23.11

package/tests/assets/sdk-r/components/create/override-sdk/infra/DashboardFilter/filterUtils.tsx

@@ -0,0 +1,160 @@
+/* eslint-disable prefer-template */
+/** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
+
+import { Grid, Link } from '@material-ui/core';
+
+import DashboardFilter from './DashboardFilter';
+
+export const createFilter = (value, fieldId, comparator = 'EQ') => {
+  return {
+    condition: {
+      lhs: {
+        field: fieldId
+      },
+      comparator,
+      rhs: {
+        value
+      }
+    }
+  };
+};
+
+export const combineFilters = (filterList, existingFilters) => {
+  if (filterList && filterList.length) {
+    // Need to combine them
+    if (existingFilters) {
+      return { AND: [existingFilters, ...filterList] };
+    }
+
+    // No existing, just return the one(s) from the list
+    if (filterList.length > 1) {
+      return { AND: [...filterList] };
+    }
+
+    return filterList[0];
+  }
+
+  // No filter list,
+  return existingFilters;
+};
+
+export const createFilterComponent = (getPConnect, filterMeta, index) => {
+  const name = filterMeta.config.value.substring(4);
+  let cleanedName = name;
+  if (name.indexOf('.') !== -1) {
+    cleanedName = name.substring(name.indexOf('.') + 1);
+  }
+  let propInfo: any = PCore.getMetadataUtils().getPropertyMetadata(cleanedName, filterMeta.config.ruleClass);
+  if (!propInfo) {
+    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+    propInfo = PCore.getMetadataUtils().getPropertyMetadata(cleanedName);
+  }
+  const { type: propertyType } = propInfo || { type: 'Text' };
+  const isNumber = propertyType && (propertyType === 'Decimal' || propertyType === 'Integer');
+  filterMeta.isNumber = isNumber;
+  const { filterType, datasource } = filterMeta.config;
+  const type = filterType || filterMeta.type;
+  const filterProp = `.pyDashboardFilter${index}`;
+  if (type === 'DateTime') {
+    return <DashboardFilter key={name} getPConnect={getPConnect} name={name} filterProp={filterProp} metadata={filterMeta} type={filterMeta.type} />;
+  }
+  if (datasource && datasource.fields) {
+    datasource.fields.key = datasource.fields.value;
+  }
+  if (filterMeta.config.listType === 'associated' && propInfo && propInfo.datasource) {
+    filterMeta.config.datasource = propInfo.datasource.records;
+  }
+  filterMeta.config.value = `@P ${filterProp}`;
+  filterMeta.type = filterMeta.config.displayAs || type;
+  filterMeta.config.placeholder = 'ALL';
+  return (
+    <DashboardFilter key={name} getPConnect={getPConnect} name={name} filterProp={filterProp} metadata={filterMeta} type={filterMeta.type}>
+      {getPConnect().createComponent(filterMeta, '', '', {})}
+    </DashboardFilter>
+  );
+};
+
+export const buildFilterComponents = (getPConnect, allFilters) => {
+  const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
+  if (filterComponents && filterComponents.length > 0) {
+    filterComponents.push(
+      <Grid>
+        <Link
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            // @ts-ignore - second parameter “payload” for publish method should be optional
+            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
+          }}
+        >
+          Clear All
+        </Link>
+      </Grid>
+    );
+  }
+  return filterComponents;
+};
+
+export const convertDateToGMT = value => {
+  const { valueAsISOString: date } = value;
+  return date ? date.substring(0, date.indexOf('T')) : date;
+};
+
+export const getFilterExpression = (filterValue, name, metadata) => {
+  if (filterValue === '') {
+    return null;
+  }
+  let comparator = 'EQ';
+  if (metadata.type === 'TextInput' && !metadata.isNumber) {
+    comparator = 'CONTAINS';
+  }
+
+  if (metadata.config.filterType && metadata.config.filterType === 'RelativeDates') {
+    const fieldSource = metadata.config.datasource.filter(source => source.key === filterValue)[0];
+    const relativeDateExpression = JSON.parse(fieldSource.json);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const fields = [
+      {
+        name: relativeDateExpression.condition.lhs.field,
+        type: 'DATE_TIME'
+      }
+    ];
+    return '';
+  }
+
+  return createFilter(filterValue, name, comparator);
+};
+
+/**
+ * Returns ConfigurableLayout mapped content. With pre-populated default layout configs.
+ * @returns {object[]} ConfigurableLayout content.
+ */
+export function getLayoutDataFromRegion(regionData) {
+  const defaultLayoutConfig = {
+    width: 'full',
+    fillAvailable: true,
+    minWidth: [300, 'px']
+  };
+
+  return regionData.props
+    ?.getPConnect()
+    ?.getChildren()
+    ?.map((item, index) => {
+      const itemPConnect = item?.getPConnect();
+
+      return {
+        id: itemPConnect?.getComponentName() ? `${itemPConnect.getComponentName()}--${index}` : `item--${index}`,
+        content: itemPConnect?.getComponent(),
+        layoutConfig: {
+          ...defaultLayoutConfig,
+          ...itemPConnect?.getConfigProps().layoutConfig
+        }
+      };
+    });
+}
+
+export const getFormattedDate = date => {
+  if (!date) {
+    return date;
+  }
+  return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
+};

package/tests/assets/sdk-r/components/create/override-sdk/infra/DashboardFilter/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/DeferLoad/DeferLoad.tsx

@@ -0,0 +1,166 @@
+import { useState, useEffect, createElement } from 'react';
+import { Box, Card, CircularProgress } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface DeferLoadProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  name: string;
+  isChildDeferLoad?: boolean;
+  isTab: boolean;
+  deferLoadId: string;
+}
+
+//
+// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+// is totally at your own risk.
+//
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  }
+}));
+
+export default function DeferLoad(props: DeferLoadProps) {
+  const { getPConnect, name, deferLoadId, isTab } = props;
+  const [content, setContent] = useState<any>(null);
+  const [isLoading, setLoading] = useState(true);
+  const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
+
+  const classes = useStyles();
+
+  const pConnect = getPConnect();
+  const constants = PCore.getConstants();
+
+  const theRequestedAssignment = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL, ''); // 2nd arg empty string until typedef allows optional
+  if (theRequestedAssignment !== currentLoadedAssignment) {
+    // console.log(`DeferLoad: currentLoadedAssignment about to change from ${currentLoadedAssignment} to ${theRequestedAssignment}`);
+    setCurrentLoadedAssignment(theRequestedAssignment);
+  }
+
+  const { CASE, PAGE, DATA } = constants.RESOURCE_TYPES;
+  const loadViewCaseID = pConnect.getValue(constants.PZINSKEY, '') || pConnect.getValue(constants.CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef allows optional
+  let containerName;
+  let containerItemData;
+  const targetName = pConnect.getTarget();
+  if (targetName) {
+    containerName = PCore.getContainerUtils().getActiveContainerItemName(targetName);
+
+    containerItemData = PCore.getContainerUtils().getContainerItemData(targetName, containerName);
+  }
+
+  const { resourceType = CASE } = containerItemData || {
+    resourceType: loadViewCaseID ? CASE : PAGE
+  };
+  const isContainerPreview = /preview_[0-9]*/g.test(pConnect.getContextName());
+
+  const getViewOptions = () => ({
+    viewContext: resourceType,
+    pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal.classID, // 2nd arg empty string until typedef allows optional
+    container: isContainerPreview ? 'preview' : null,
+    containerName: isContainerPreview ? 'preview' : null,
+    updateData: isContainerPreview
+  });
+
+  const onResponse = data => {
+    setLoading(false);
+    if (deferLoadId) {
+      PCore.getDeferLoadManager().start(
+        name,
+        getPConnect().getCaseInfo().getKey(),
+        getPConnect().getPageReference().replace('caseInfo.content', ''),
+        getPConnect().getContextName(),
+        deferLoadId
+      );
+    }
+
+    if (data && !(data.type && data.type === 'error')) {
+      const config = {
+        meta: data,
+        options: {
+          context: pConnect.getContextName(),
+          pageReference: pConnect.getPageReference()
+        }
+      };
+      const configObject = PCore.createPConnect(config);
+      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      setContent(createElement(createPConnectComponent(), configObject));
+      if (deferLoadId) {
+        PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (resourceType === DATA) {
+      // Rendering defer loaded tabs in data context
+      if (containerName) {
+        const dataContext = PCore.getStoreValue('.dataContext', 'dataInfo', containerName);
+        const dataContextParameters = PCore.getStoreValue('.dataContextParameters', 'dataInfo', containerName);
+
+        getPConnect()
+          .getActionsApi()
+          .showData(name, dataContext, dataContextParameters, {
+            // @ts-ignore - Type 'boolean' is not assignable to type 'string'
+            skipSemanticUrl: true,
+            // @ts-ignore
+            isDeferLoaded: true
+          })
+          .then(data => {
+            onResponse(data);
+          });
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('Cannot load the defer loaded view without container information');
+      }
+    } else if (resourceType === PAGE) {
+      // Rendering defer loaded tabs in case/ page context
+      getPConnect()
+        .getActionsApi()
+        .loadView(encodeURI(loadViewCaseID), name, getViewOptions())
+        .then(data => {
+          onResponse(data);
+        });
+    } else {
+      getPConnect()
+        .getActionsApi()
+        .refreshCaseView(encodeURI(loadViewCaseID), name, '') // 3rd arg empty string until typedef allows optional
+        .then(data => {
+          onResponse(data.root);
+        });
+    }
+  }, [name, getPConnect, currentLoadedAssignment]);
+  /* TODO Cosmos need to handle for now added a wrapper div with pos relative */
+  let deferLoadContent;
+  if (isLoading) {
+    deferLoadContent = (
+      <div style={{ position: 'relative', height: '100px' }}>
+        <Box textAlign='center'>
+          <CircularProgress />
+        </Box>
+      </div>
+    );
+  } else {
+    deferLoadContent = !isTab ? (
+      <div className={classes.root}>{content}</div>
+    ) : (
+      <Card id='DeferLoad' className={classes.root}>
+        <>{content}</>
+      </Card>
+    );
+  }
+
+  return deferLoadContent;
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/DeferLoad/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+import { PConnProps } from '@pega/react-sdk-components/lib/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 = <div>{ERROR_TEXT}</div>;
+
+  if (!getPConnect) {
+    return theErrorDiv;
+  }
+
+  const pConn = getPConnect();
+
+  if (!isInternalError) {
+    // eslint-disable-next-line no-console
+    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/tests/assets/sdk-r/components/create/override-sdk/infra/ErrorBoundary/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -0,0 +1,34 @@
+import { withStyles } from '@material-ui/core/styles';
+import { Tab, Divider } from '@material-ui/core';
+
+// LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface LeftAlignVerticalTabsProps {
+  // If any, enter additional props that only exist on this component
+}
+
+// LeftAlignVerticalTab is a specialized Tab that has styles to make it
+//  left aligned and full width of the container Tabs
+
+// Aligning the Tab labels left (with & .<class name> syntax) inspired by:
+//  https://stackoverflow.com/questions/63307723/how-to-modify-the-wrapper-css-rule-of-a-tabs-component-to-make-the-text-aligned
+
+// In this styling, "root" is the top-level "Tab" object (which is the button)
+//  and the button contains spans that will match on the '> span'
+const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
+  root: {
+    width: '100%',
+    maxWidth: '100%'
+  },
+  wrapper: {
+    display: 'block',
+    textAlign: 'left'
+  }
+}))((props: LeftAlignVerticalTabsProps) => (
+  <div>
+    <Tab {...props} />
+    <Divider />
+  </div>
+));
+
+export default LeftAlignVerticalTabs;

package/tests/assets/sdk-r/components/create/override-sdk/infra/LeftAlignVerticalTabs/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.css

@@ -0,0 +1,243 @@
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-icon-current {
+  color: var(--app-primary-color);
+}
+
+.psdk-icon-not-current {
+  color: var(--app-neutral-color);
+}
+
+.psdk-current-svg-icon {
+  width: 1rem;
+  filter: var(--app-primary-color-filter);
+}
+
+.psdk-not-current-svg-icon {
+  width: 1rem;
+  filter: var(--app-neutral-color-filter);
+}
+
+mat-vertical-stepper {
+  background-color: transparent;
+}
+mat-horizontal-stepper {
+  background-color: transparent;
+}
+
+.psdk-sub-step-current {
+  padding-left: 0.625rem;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.psdk-sub-step-not-current {
+  padding-left: 0.625rem;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.psdk-flow-container-top {
+  border-radius: 0.3125rem;
+}
+.psdk-flow-container {
+  padding-left: 2.1875rem;
+}
+
+.psdk-sub-step-list {
+  list-style: none;
+  padding-bottom: 0.625rem;
+}
+
+.psdk-vertical-stepper {
+  background-color: transparent;
+  display: block;
+  text-align: left;
+}
+
+.psdk-vertical-step {
+  display: block;
+}
+
+.psdk-vertical-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding: 24px 24px;
+}
+
+.psdk-vertical-step-icon {
+  margin-right: 12px;
+  background-color: var(--app-neutral-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+}
+
+.psdk-vertical-step-icon-selected {
+  margin-right: 12px;
+  background-color: var(--app-primary-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-label {
+  color: rgba(0, 0, 0, 0.54);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.psdk-vertical-step-label-selected {
+  color: rgba(0, 0, 0, 0.87);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.psdk-vertical-step-body {
+  margin-left: 36px;
+  border: 0;
+  position: relative;
+  display: block;
+  text-align: left;
+}
+.psdk-vertical-step-line {
+  display: block;
+}
+
+.psdk-vertical-step-line::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  border-left-width: 1px;
+  border-left-style: solid;
+  top: -16px;
+  bottom: -16px;
+  border-left-color: rgba(0, 0, 0, 0.12);
+}
+
+.psdk-horizontal-stepper {
+  background-color: transparent;
+  display: block;
+}
+
+.psdk-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+
+.psdk-horizontal-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  height: 72px;
+  overflow: hidden;
+  align-items: center;
+  padding: 0 24px;
+}
+
+.psdk-horizontal-step-icon {
+  background-color: var(--app-neutral-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+  display: block;
+  margin-right: 8px;
+  flex: none;
+}
+
+.psdk-horizontal-step-icon-content {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.psdk-horizontal-step-icon-selected {
+  background-color: var(--app-primary-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+  display: block;
+  margin-right: 8px;
+  flex: none;
+}
+
+.psdk-horizontal-step-label {
+  color: rgba(0, 0, 0, 0.54);
+  display: inline-block;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: initial;
+}
+
+.psdk-horizontal-step-label-selected {
+  color: rgba(0, 0, 0, 0.87);
+  display: inline-block;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: initial;
+}
+
+.psdk-horizontal-step-line {
+  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-width: 1px;
+  border-top-style: solid;
+  flex: auto;
+  height: 0;
+  margin: 0 -16px;
+  min-width: 32px;
+}