@pega/dx-component-builder-sdk 8.23.16 → 8.23.17

package/tests/assets/components/SDK-React/createAll/override-sdk/field/UserReference/UserReference.tsx

@@ -0,0 +1,189 @@
+import React, { Fragment, memo, useEffect, useState } from 'react';
+import { Typography } from '@material-ui/core';
+import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 errors)
+declare const PCore: any;
+
+const DROPDOWN_LIST = 'Drop-down list';
+const SEARCH_BOX = 'Search box';
+
+interface UserReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on URLComponent here
+  displayAs?: string;
+  label?: string;
+  value?: any;
+  testId?: string;
+  placeholder?: string;
+  helperText?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  validatemessage?: string;
+  showAsFormattedText?: boolean;
+  additionalProps?: object;
+  hideLabel?: boolean;
+  variant?: string;
+  onChange?: any;
+}
+
+const UserReference = (props: UserReferenceProps) => {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AutoComplete = getComponentFromMap('AutoComplete');
+  const Dropdown = getComponentFromMap('Dropdown');
+
+  const {
+    label = '',
+    displayAs = '',
+    getPConnect,
+    value = '',
+    testId = '',
+    helperText = '',
+    validatemessage = '',
+    placeholder = '',
+    showAsFormattedText = false,
+    additionalProps = {},
+    hideLabel = false,
+    readOnly = false,
+    required = false,
+    disabled = false,
+    onChange,
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    variant = 'inline'
+  } = props;
+  const [dropDownDataSource, setDropDownDataSource] = useState([]);
+  const [userName, setUserName] = useState('');
+  const OPERATORS_DP = PCore.getEnvironmentInfo().getDefaultOperatorDP();
+  const userId = getUserId(value);
+
+  useEffect(() => {
+    if (userId && readOnly && showAsFormattedText) {
+      if (isUserNameAvailable(value)) {
+        setUserName(value.userName);
+      } else {
+        // if same user ref field is referred in view as editable & readonly formatted text
+        // referenced users won't be available, so get user details from dx api
+        const { getOperatorDetails } = PCore.getUserApi();
+        getOperatorDetails(userId).then((res) => {
+          if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+            setUserName(res.data.pyOperatorInfo.pyUserName);
+          }
+        });
+      }
+    } else if (displayAs === DROPDOWN_LIST) {
+      const queryPayload = {
+        dataViewName: OPERATORS_DP
+      };
+      PCore.getRestClient()
+        .invokeRestApi('getListData', { queryPayload })
+        .then((res) => {
+          const ddDataSource = res.data.data.map((listItem) => ({
+            key: listItem.pyUserIdentifier,
+            value: listItem.pyUserName
+          }));
+          setDropDownDataSource(ddDataSource);
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.error(err);
+        });
+    }
+  }, [displayAs, readOnly, showAsFormattedText, value]);
+
+  let userReferenceComponent: any = null;
+
+  if (readOnly && showAsFormattedText) {
+    if (userId) {
+      userReferenceComponent = (
+        <Fragment>
+          {/*
+            TODO: This has to be replaced with Operator Component
+          */}
+          <div>
+            <Typography variant="caption">{label}</Typography>
+            <Typography variant="body1">{userName}</Typography>
+          </div>
+        </Fragment>
+      );
+    }
+  } else {
+    if (displayAs === SEARCH_BOX) {
+      const columns = [
+        {
+          value: 'pyUserName',
+          display: 'true',
+          useForSearch: true,
+          primary: 'true'
+        },
+        {
+          value: 'pyUserIdentifier',
+          setProperty: 'Associated property',
+          key: 'true',
+          display: 'true',
+          secondary: 'true',
+          useForSearch: 'true'
+        }
+      ];
+
+      userReferenceComponent = (
+        <AutoComplete
+          additionalProps={additionalProps}
+          label={label}
+          getPConnect={getPConnect}
+          datasource={OPERATORS_DP}
+          listType="datapage"
+          columns={columns}
+          testId={testId}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          helperText={helperText}
+          validatemessage={validatemessage}
+          value={userId}
+          hideLabel={hideLabel}
+          onChange={onChange}
+        />
+      );
+    }
+    if (displayAs === DROPDOWN_LIST) {
+      userReferenceComponent = (
+        <Dropdown
+          additionalProps={additionalProps}
+          datasource={dropDownDataSource}
+          listType="associated"
+          getPConnect={getPConnect}
+          label={label}
+          value={userId}
+          testId={testId}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          helperText={helperText}
+          validatemessage={validatemessage}
+          hideLabel={hideLabel}
+          onChange={onChange}
+        />
+      );
+    }
+  }
+
+  return userReferenceComponent;
+};
+
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+const comparisonFn = (prevProps, nextProps) => {
+  return (
+    getUserId(prevProps.value) === getUserId(nextProps.value) &&
+    prevProps.validatemessage === nextProps.validatemessage &&
+    prevProps.required === nextProps.required &&
+    prevProps.disabled === nextProps.disabled &&
+    prevProps.readOnly === nextProps.readOnly
+  );
+};
+
+export default memo(UserReference, comparisonFn);

package/tests/assets/components/SDK-React/createAll/override-sdk/field/UserReference/UserReferenceUtils.ts

@@ -0,0 +1,13 @@
+export const getUserId = (user) => {
+  let userId = '';
+  if (typeof user === 'object' && user !== null && user.userId) {
+    userId = user.userId;
+  } else if (typeof user === 'string' && user) {
+    userId = user;
+  }
+  return userId;
+};
+
+export const isUserNameAvailable = (user) => {
+  return typeof user === 'object' && user !== null && user.userName;
+};

package/tests/assets/components/SDK-React/createAll/override-sdk/field/UserReference/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "label": "UserReference",
+    "componentKey": "UserReference",
+    "name": "UserReference",
+    "description": "User reference",
+    "type": "Field",
+    "subtype": "DATA_CAPTURE",
+    "properties": []
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/field/UserReference/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/field/_field.md

@@ -0,0 +1,6 @@
+# The **override-sdk/field** directory
+
+The **src/components/override-sdk/field** directory contains the code for **field** components for which you want to override the default implementation for use with the **React SDK**.
+
+When you run the **npm run  create** command to override the default implementation of a **field** component, the generated code that you can use as a starting point
+for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk/field**.

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/ActionButtons/ActionButtons.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+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?: Array<any>,
+  arSecondaryButtons?: Array<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 (
+    <React.Fragment>
+      <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>
+
+    </React.Fragment>
+
+  )
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/ActionButtons/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/Assignment/Assignment.tsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } 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 type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface AssignmentProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  itemKey: string,
+  isInModal: boolean,
+  banners: Array<any>
+  // eslint-disable-next-line react/no-unused-prop-types
+  actionButtons: Array<any>,
+}
+
+
+export default function Assignment(props: 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<Array<any>>([]);
+  const [arNavigationSteps, setArNavigationSteps] = useState<Array<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: Array<any>,
+    arIndicies: Array<number>,
+    depth: number
+  ): Array<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 && children.length > 0) {
+      // debugger;
+
+      const oWorkItem = children[0].props.getPConnect();
+      const oWorkData = oWorkItem.getDataObject();
+      const oData = thePConn.getDataObject(thePConn.getContextName());
+
+      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'
+          ) {
+            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();
+          const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
+          const isLocalAction =
+            thePConn.getCaseInfo().isLocalAction() ||
+            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION &&
+              getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION, ''));// 2nd arg empty string until typedefs allow it to be optional
+          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;
+      }
+    }
+  }
+
+  return (
+    <div id='Assignment'>
+      {banners}
+      {bHasNavigation ? (
+        <React.Fragment>
+          <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>
+            }
+          />
+        </React.Fragment>
+      ) : (
+        <React.Fragment>
+          <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>
+            }
+          />
+        </React.Fragment>
+      )}
+    </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/components/SDK-React/createAll/override-sdk/infra/Assignment/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/AssignmentCard/AssignmentCard.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import type { 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
+  children: Array<any>,
+  actionButtons: any,
+  onButtonPress: any,
+  // eslint-disable-next-line react/no-unused-prop-types
+  itemKey?: string
+}
+
+
+export default function AssignmentCard(props: 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}></ActionButtons>
+      }
+    </>
+  )
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/AssignmentCard/index.tsx

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