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

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

@@ -0,0 +1,74 @@
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import { Grid, Divider } from '@material-ui/core';
+
+// ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
+interface ActionButtonsProps {
+  // If any, enter additional props that only exist on this component
+  arMainButtons?: any[];
+  arSecondaryButtons?: any[];
+  onButtonPress: any;
+}
+
+const useStyles = makeStyles((/* theme */) => ({
+  button: {
+    padding: '0px 5px'
+  },
+  divider: {
+    marginTop: '10px',
+    marginBottom: '10px'
+  }
+}));
+
+export default function ActionButtons(props: ActionButtonsProps) {
+  const { arMainButtons = [], arSecondaryButtons = [], onButtonPress } = props;
+  const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
+
+  function _onButtonPress(sAction: string, sButtonType: string) {
+    onButtonPress(sAction, sButtonType);
+  }
+
+  return (
+    <>
+      <Divider className={classes.divider} />
+      <Grid container spacing={4} justifyContent='space-between'>
+        <Grid item>
+          <Grid container spacing={1}>
+            {arSecondaryButtons.map(sButton => (
+              <Grid item key={sButton.name}>
+                <Button
+                  variant='contained'
+                  color='secondary'
+                  onClick={() => {
+                    _onButtonPress(sButton.jsAction, 'secondary');
+                  }}
+                >
+                  {localizedVal(sButton.name, localeCategory)}
+                </Button>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Grid item>
+          <Grid container spacing={1}>
+            {arMainButtons.map(mButton => (
+              <Grid item key={mButton.name}>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  onClick={() => {
+                    _onButtonPress(mButton.jsAction, 'primary');
+                  }}
+                >
+                  {localizedVal(mButton.name, localeCategory)}
+                </Button>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,335 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface AssignmentProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  itemKey: string;
+  isInModal: boolean;
+  banners: any[];
+  // eslint-disable-next-line react/no-unused-prop-types
+  actionButtons: any[];
+}
+
+export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AssignmentCard = getComponentFromMap('AssignmentCard');
+  const MultiStep = getComponentFromMap('MultiStep');
+
+  const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
+  const thePConn = getPConnect();
+
+  const [bHasNavigation, setHasNavigation] = useState(false);
+  const [actionButtons, setActionButtons] = useState([]);
+  const [bIsVertical, setIsVertical] = useState(false);
+  const [arCurrentStepIndicies, setArCurrentStepIndicies] = useState<any[]>([]);
+  const [arNavigationSteps, setArNavigationSteps] = useState<any[]>([]);
+
+  const actionsAPI = thePConn.getActionsApi();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
+  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
+
+  // store off bound functions to above pointers
+  const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
+  const navigateToStep = actionsAPI.navigateToStep.bind(actionsAPI);
+  const cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
+  const saveAssignment = actionsAPI.saveAssignment?.bind(actionsAPI);
+  const cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+  // const showPage = actionsAPI.showPage.bind(actionsAPI);
+
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  function findCurrentIndicies(arStepperSteps: any[], arIndicies: number[], depth: number): number[] {
+    let count = 0;
+    arStepperSteps.forEach(step => {
+      if (step.visited_status === 'current') {
+        arIndicies[depth] = count;
+
+        // add in
+        step.step_status = '';
+      } else if (step.visited_status === 'success') {
+        count += 1;
+        step.step_status = 'completed';
+      } else {
+        count += 1;
+        step.step_status = '';
+      }
+
+      if (step.steps) {
+        arIndicies = findCurrentIndicies(step.steps, arIndicies, depth + 1);
+      }
+    });
+
+    return arIndicies;
+  }
+
+  useEffect(() => {
+    if (children) {
+      const firstChild = Array.isArray(children) ? children[0] : children;
+      const oWorkItem = firstChild.props.getPConnect();
+      const oWorkData = oWorkItem.getDataObject();
+      const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
+
+      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
+        const oCaseInfo = oData.caseInfo;
+
+        if (oCaseInfo && oCaseInfo.actionButtons) {
+          setActionButtons(oCaseInfo.actionButtons);
+        }
+
+        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
+          setHasNavigation(true);
+
+          if (
+            (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') ||
+            oCaseInfo?.navigation?.steps?.length === 1
+          ) {
+            setHasNavigation(false);
+          } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
+            setIsVertical(true);
+          } else {
+            setIsVertical(false);
+          }
+          const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
+          steps.forEach(step => {
+            if (step.name) {
+              step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+            }
+          });
+          setArNavigationSteps(steps);
+          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
+        }
+      }
+    }
+  }, [children]);
+
+  function showToast(message: string) {
+    const theMessage = `Assignment: ${message}`;
+    // eslint-disable-next-line no-console
+    console.error(theMessage);
+    setSnackbarMessage(message);
+    setShowSnackbar(true);
+  }
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
+  function onSaveActionSuccess(data) {
+    actionsAPI.cancelAssignment(itemKey).then(() => {
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
+    });
+  }
+
+  function buttonPress(sAction: string, sButtonType: string) {
+    if (sButtonType === 'secondary') {
+      switch (sAction) {
+        case 'navigateToStep': {
+          const navigatePromise = navigateToStep('previous', itemKey);
+
+          navigatePromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Navigation failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        case 'saveAssignment': {
+          const caseID = thePConn.getCaseInfo().getKey();
+          const assignmentID = thePConn.getCaseInfo().getAssignmentID();
+          const savePromise = saveAssignment(itemKey);
+
+          savePromise
+            .then(() => {
+              const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
+              onSaveActionSuccess({ caseType, caseID, assignmentID });
+            })
+            .catch(() => {
+              showToast(`${localizedVal('Save failed', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        case 'cancelAssignment': {
+          // check if create stage (modal)
+          const { PUB_SUB_EVENTS } = PCore.getConstants();
+          const { publish } = PCore.getPubSubUtils();
+          // @ts-ignore - Property 'isAssignmentInCreateStage' is private and only accessible within class 'CaseInfo'
+          const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
+          const isLocalAction =
+            // @ts-ignore - Property 'isLocalAction' is private and only accessible within class 'CaseInfo'.
+            thePConn.getCaseInfo().isLocalAction() ||
+            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
+          if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
+            const cancelPromise = cancelCreateStageAssignment(itemKey);
+
+            cancelPromise
+              .then(data => {
+                publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+              })
+              .catch(() => {
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
+              });
+          } else {
+            const cancelPromise = cancelAssignment(itemKey);
+
+            cancelPromise
+              .then(data => {
+                publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+              })
+              .catch(() => {
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
+              });
+          }
+          break;
+        }
+
+        default:
+          break;
+      }
+    } else if (sButtonType === 'primary') {
+      // eslint-disable-next-line sonarjs/no-small-switch
+      switch (sAction) {
+        case 'finishAssignment': {
+          const finishPromise = finishAssignment(itemKey);
+
+          finishPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Submit failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        default:
+          break;
+      }
+    }
+  }
+
+  function getRefreshProps(refreshConditions) {
+    // refreshConditions cuurently supports only "Changes" event
+    if (!refreshConditions) {
+      return [];
+    }
+    return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+  }
+
+  // expected format of refreshConditions : [{field: ".Name", event: "Changes"}]
+  // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
+  const refreshConditions = thePConn.getCaseInfo()?.getActionRefreshConditions();
+  const context = thePConn.getContextName();
+  const pageReference = thePConn.getPageReference();
+
+  // refresh api de-registration
+  PCore.getRefreshManager().deRegisterForRefresh(context);
+
+  // refresh api registration
+  const refreshProps = getRefreshProps(refreshConditions);
+  const caseKey = thePConn.getCaseInfo().getKey();
+  const refreshOptions = {
+    autoDetectRefresh: true,
+    preserveClientChanges: false
+  };
+  if (refreshProps.length > 0) {
+    refreshProps.forEach(prop => {
+      PCore.getRefreshManager().registerForRefresh(
+        'PROP_CHANGE',
+        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, null, pageReference, {
+          ...refreshOptions,
+          refreshFor: prop[0]
+        }),
+        `${pageReference}.${prop[1]}`,
+        `${context}/${pageReference}`,
+        context
+      );
+    });
+  }
+
+  return (
+    <div id='Assignment'>
+      {banners}
+      {bHasNavigation ? (
+        <>
+          <MultiStep
+            getPConnect={getPConnect}
+            itemKey={itemKey}
+            actionButtons={actionButtons}
+            onButtonPress={buttonPress}
+            bIsVertical={bIsVertical}
+            arCurrentStepIndicies={arCurrentStepIndicies}
+            arNavigationSteps={arNavigationSteps}
+          >
+            {children}
+          </MultiStep>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </>
+      ) : (
+        <>
+          <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+            {children}
+          </AssignmentCard>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+// From WC SDK
+// const aHtml = html`
+// ${this.bHasNavigation?
+//   html`
+//     <div class="psdk-stepper">
+//     <multi-step-component .pConn=${this.pConn} .arChildren=${this.arChildren} itemKey=${this.itemKey}
+//         .arMainButtons=${this.arMainButtons} .arSecondaryButtons=${this.arSecondaryButtons}
+//         .bIsVertical=${this.bIsVertical} .arCurrentStepIndicies=${this.arCurrentStepIndicies}
+//         .arNavigationSteps=${this.arNavigationSteps}
+//         @MultiStepActionButtonClick="${this._onActionButtonClick}">
+//     </multi-step-component>
+//     <lit-toast></lit-toast>
+//     </div>`
+//     :
+//   html`
+//     <div>
+//         <assignment-card-component .pConn=${this.pConn} .arChildren=${this.arChildren} itemKey=${this.itemKey}
+//           .arMainButtons=${this.arMainButtons} .arSecondaryButtons=${this.arSecondaryButtons}
+//           @AssignmentActionButtonClick="${this._onActionButtonClick}">
+//         </assignment-card-component>
+//         <lit-toast></lit-toast>
+//     </div>`}
+// `;

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

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

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

@@ -0,0 +1,40 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+interface AssignmentCardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  actionButtons: any;
+  onButtonPress: any;
+}
+
+export default function AssignmentCard(props: PropsWithChildren<AssignmentCardProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ActionButtons = getComponentFromMap('ActionButtons');
+
+  const { children, actionButtons, onButtonPress } = props;
+
+  const [arMainButtons, setArMainButtons] = useState([]);
+  const [arSecondaryButtons, setArSecondaryButtons] = useState([]);
+
+  useEffect(() => {
+    if (actionButtons) {
+      setArMainButtons(actionButtons.main);
+      setArSecondaryButtons(actionButtons.secondary);
+    }
+  }, [actionButtons]);
+
+  function buttonPress(sAction, sType) {
+    onButtonPress(sAction, sType);
+  }
+
+  return (
+    <>
+      {children}
+      {arMainButtons && arSecondaryButtons && (
+        <ActionButtons arMainButtons={arMainButtons} arSecondaryButtons={arSecondaryButtons} onButtonPress={buttonPress} />
+      )}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable operator-assignment */
+import { forwardRef, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { TextField } from '@material-ui/core';
+import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'throttle-debounce';
+import DatePicker from 'react-datepicker';
+
+import { createFilter, combineFilters, getFormattedDate, getFilterExpression } from './filterUtils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+interface DashboardFilterProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  name: string;
+  filterProp: string;
+  type?: string;
+  metadata?: any;
+}
+
+export default function DashboardFilter(props: PropsWithChildren<DashboardFilterProps>) {
+  const { children = [], name, filterProp, type = '', metadata = null, getPConnect } = props;
+  const { current: filterId } = useRef(uuidv4());
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  useEffect(() => {
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+      () => {
+        if (type === 'Dropdown') {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, '');
+        } else if (type === 'RadioButtons') {
+          const reference = getPConnect().getFullReference() + filterProp;
+          const radList = document.getElementsByName(reference);
+          for (let i = 0; i < radList.length; i = i + 1) {
+            if ((radList[i] as HTMLInputElement).value === '') {
+              (radList[i] as HTMLInputElement).checked = true;
+            } else {
+              (radList[i] as HTMLInputElement).checked = false;
+            }
+          }
+        } else {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, undefined);
+          if (type === 'DateTime') {
+            setStartDate(null);
+            setEndDate(null);
+          }
+        }
+      },
+      filterId,
+      false,
+      getPConnect().getContextName()
+    );
+    return function cleanup() {
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+        filterId,
+        getPConnect().getContextName()
+      );
+    };
+  });
+
+  const fireFilterChange = filterValue => {
+    const filterData = {
+      filterId,
+      filterExpression: getFilterExpression(filterValue, name, metadata)
+    };
+
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
+  };
+
+  const fireFilterChangeDebounced = debounce(500, fireFilterChange);
+  const dateRangeChangeHandler = value => {
+    const { start, end } = value;
+
+    let startDate = getFormattedDate(start);
+    let endDate = getFormattedDate(end);
+
+    if (startDate && endDate) {
+      startDate = `${startDate}T00:00:00`;
+      endDate = `${endDate}T00:00:00`;
+      const startFilter = createFilter(startDate, name, 'GT');
+      const endFilter = createFilter(endDate, name, 'LT');
+
+      const filterData = {
+        filterId,
+        filterExpression: combineFilters([startFilter, endFilter], null)
+      };
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
+    }
+  };
+
+  const renderAutoComplete = () => {
+    metadata.config.onRecordChange = e => {
+      fireFilterChange(e.id);
+    };
+    return getPConnect().createComponent(metadata, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+  };
+
+  const onChange = dates => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    dateRangeChangeHandler({ start, end });
+  };
+
+  type TextProps = React.HTMLProps<HTMLInputElement>;
+
+  const label = metadata.config.label.substring(3);
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CustomDateInput = forwardRef<HTMLInputElement, TextProps>(({ value, onClick }, ref: any) => (
+    <TextField label={label} variant='outlined' fullWidth value={value} size='small' onClick={onClick} ref={ref}>
+      {value}
+    </TextField>
+  ));
+
+  return (
+    <>
+      {type === 'DateTime' && (
+        <DatePicker
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          enableTabLoop={false}
+          customInput={<CustomDateInput />}
+        />
+      )}
+      {type === 'AutoComplete' && (
+        <span
+          onChange={event => {
+            if (event && event.target && !(event.target as HTMLInputElement).value) {
+              fireFilterChange('ALL');
+            }
+          }}
+        >
+          {renderAutoComplete()}
+        </span>
+      )}
+      {children && (
+        <span
+          onChange={event => {
+            fireFilterChangeDebounced((event.target as HTMLInputElement).value);
+          }}
+        >
+          {children}
+        </span>
+      )}
+    </>
+  );
+}