@pega/dx-component-builder-sdk 23.1.13 → 23.1.15

package/src/tasks/publish/index.js

@@ -38,7 +38,9 @@ export default async options => {
     const rulesetVersion = options.params[6];
     const dBuild = options.params[7];
     devBuild = dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true';
-    doFetch = false;
+
+    // eslint-disable-next-line no-unneeded-ternary,no-nested-ternary
+    doFetch = options.params.length >= 9 ? (options.params[8] === 'noFetch' ? false : true) : true;
 
     content = { componentKey, rulesetName, rulesetVersion, devBuild };
   } else {

package/src/tasks/publish-all/index.js

@@ -24,8 +24,9 @@ export function getCustomTasks(componentKey, category, sourceMap, devBuild, cont
   const sDevBuild = devBuild ? '(dev build)' : '';
   const sFramework = framework.split("-")[1];
 
-  // don't fetch if testing
-  const doFetch = options.params.length >= 7 ? false : true;
+  // eslint-disable no-unneeded-ternary,no-nested-ternary
+  const doFetch = options.params.length >= 8 ? options.params[7] !== 'noFetch' : true;
+
 
   return new Listr(
     [
@@ -112,8 +113,9 @@ export function getOverrideTasks(componentKey, category, sourceMap, devBuild, co
   const sDevBuild = devBuild ? '(dev build)' : '';
   const sFramework = framework.split("-")[1];
 
-  // don't fetch if testing
-  const doFetch = options.params.length >= 7 ? false : true;
+  // eslint-disable no-unneeded-ternary,no-nested-ternary
+  const doFetch = options.params.length >= 8 ? options.params[7] !== 'noFetch' : true;
+
 
   return new Listr(
     [
@@ -194,7 +196,7 @@ export default async options => {
 
     components = await getComponentsObj(false, category);
 
-    // end if find no componets
+    // end if find no components
     if (components.length == 0) {
       console.log(chalk.redBright("No components to publish"));
       process.exit(1);

package/src/util.js

@@ -443,6 +443,13 @@ export const getDirectoryFiles = async (directory) => {
   .map(dirent => dirent.name);
 }
 
+export const getListOfDirectories = async (directory) => {
+  return fs
+  .readdirSync(directory, { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name);
+}
+
 
 export const getComponentsObj = async (showSeparator = false, category = CATEGORY_CUSTOM) => {
   const currentDirectory = process.cwd();

package/tests/assets/sdk-r/components/create/_components.md

@@ -0,0 +1,6 @@
+# The **components** directory
+
+The **src/components** directory contains the code for the components you want to use with the **React SDK**.
+
+When you run the **npm run  create** or **npm run override** commands to create new components, the generated code that
+you can use as a starting point for your component development will be placed in component-specific folders inside **src/components**.

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -2,27 +2,27 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps } from './mock';
 
 import PegaDxilMyTestText from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyTestText> = {
   title: 'PegaDxilMyTestText',
-  decorators: [withKnobs],
-  component: PegaDxilMyTestText
+  component: PegaDxilMyTestText,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyTestText = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTestText>;
+
+export const BasePegaDxilMyTestText: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
 
     getPConnect: () => {
@@ -48,7 +48,21 @@ export const BasePegaDxilMyTestText = () => {
 
   return (
     <>
-      <PegaDxilMyTestText {...props} />
+      <PegaDxilMyTestText {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMyTestText.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/index.tsx

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { Input } from '@pega/cosmos-react-core';
+import { Input, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -21,8 +20,8 @@ interface StateProps {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
+function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
+  const { getPConnect, value, placeholder, disabled = false, readOnly = false, required = false, label, hideLabel = false, testId } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -52,22 +51,5 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   );
 };
 
-PegaDxilMyTestText.defaultProps = {
-  value: '',
-  placeholder: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: ''
-};
 
-PegaDxilMyTestText.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string
-};
+export default withConfiguration(PegaDxilMyTestText);

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/mock.ts

@@ -6,7 +6,14 @@ export const configProps = {
   placeholder: 'Text Placeholder',
   helperText: 'Text Helper Text',
   testId: 'Text-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/styles.ts

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -109,9 +109,9 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               label={field.config.label}
               InputProps={{
                 readOnly: true,
+                disableUnderline: true,
                 inputProps: {
-                  style: { cursor: 'pointer' },
-                  disableUnderline: true
+                  style: { cursor: 'pointer' }
                 }
               }}
             />

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -9,6 +9,7 @@ interface FieldValueListProps {
   name?: string;
   value: any;
   variant?: string;
+  isHtml?: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -45,7 +46,7 @@ function formatItemValue(value) {
 }
 
 export default function FieldValueList(props: FieldValueListProps) {
-  const { name, value, variant = 'inline' } = props;
+  const { name, value, variant = 'inline', isHtml = false } = props;
   const classes = useStyles();
 
   function getGridItemLabel() {
@@ -63,9 +64,14 @@ export default function FieldValueList(props: FieldValueListProps) {
 
     return (
       <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
-        <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
-          {formattedValue}
-        </Typography>
+        {isHtml ? (
+          // eslint-disable-next-line react/no-danger
+          <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
+        ) : (
+          <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
+            {formattedValue}
+          </Typography>
+        )}
       </Grid>
     );
   }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -19,6 +19,7 @@ interface OperatorProps extends PConnProps {
   updateDateTime: string;
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
+  displayLabel?: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -36,18 +37,19 @@ export default function Operator(props: OperatorProps) {
   // const componentName = "Operator";
   const classes = useStyles();
 
-  const fieldLabel = props.label.toLowerCase();
+  const fieldLabel = props?.label?.toLowerCase();
+  const displayLabel = props?.displayLabel?.toLowerCase();
   let caseOpLabel = '---';
   let caseOpName = '---';
   let caseOpId = '';
   let caseTime = '';
 
-  if (fieldLabel === 'create operator') {
+  if (fieldLabel === 'create operator' || displayLabel === 'create operator') {
     caseOpLabel = props.createLabel;
     caseOpName = props.createOperator.userName;
     caseTime = props.createDateTime;
     caseOpId = props.createOperator.userId;
-  } else if (fieldLabel === 'update operator') {
+  } else if (fieldLabel === 'update operator' || displayLabel === 'update operator') {
     caseOpLabel = props.updateLabel;
     caseOpName = props.updateOperator.userName;
     caseTime = props.updateDateTime;

package/tests/assets/sdk-r/components/create/override-sdk/field/CancelAlert/CancelAlert.tsx

@@ -7,34 +7,85 @@ import './CancelAlert.css';
 
 interface CancelAlertProps extends PConnFieldProps {
   // If any, enter additional props that only exist on CancelAlert here
-  pConn: any;
-  updateAlertState: any;
+  heading: string;
+  content: string;
+  itemKey: string;
+  hideDelete: boolean;
+  isDataObject: boolean;
+  skipReleaseLockRequest: any;
+  dismiss: Function;
 }
 
 export default function CancelAlert(props: CancelAlertProps) {
-  const { pConn, updateAlertState } = props;
-  const [showSnackbar, setShowSnackbar] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
-
-  const itemKey = pConn.getContextName();
-  const caseInfo = pConn.getCaseInfo();
-  const caseName = caseInfo.getName();
-  const ID = caseInfo.getID();
+  const { heading, content, getPConnect, itemKey: containerItemID, hideDelete, isDataObject, skipReleaseLockRequest, dismiss } = props;
+  const actionsAPI = getPConnect().getActionsApi();
+  const containerManagerAPI = getPConnect().getContainerManager();
+  const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+  const isBulkAction = getPConnect()?.options?.isBulkAction;
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const broadCastUtils: any = PCore.getCoexistenceManager().getBroadcastUtils();
+  const isReverseCoexistence = broadCastUtils.isReverseCoexistenceCaseLoaded();
   const localeCategory = 'ModalContainer';
+  const btnIds = {
+    SAVE_AND_CLOSE: 'saveAndClose',
+    CONTINUE_WORKING: 'continueWorking',
+    DELETE: 'delete'
+  };
 
-  function showToast(message: string) {
-    setSnackbarMessage(message);
-    setShowSnackbar(true);
+  const [buttonsState, setButtonsState] = useState({
+    [btnIds.SAVE_AND_CLOSE]: false,
+    [btnIds.DELETE]: false
+  });
+
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  function disableButton(id) {
+    setButtonsState(prevState => ({
+      ...prevState,
+      [id]: true
+    }));
   }
 
-  const dismissCancelAlertOnly = () => {
-    updateAlertState(true);
-  };
+  function enableButton(id) {
+    setButtonsState(prevState => ({
+      ...prevState,
+      [id]: false
+    }));
+  }
 
-  const dismissModal = () => {
-    updateAlertState(false);
-  };
+  function cancelHandler() {
+    if (isReverseCoexistence) {
+      dismiss(true);
+      // @ts-ignore - An argument for 'payload' was not provided.
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);
+    } else if (!isDataObject && !isLocalAction && !isBulkAction) {
+      disableButton(btnIds.DELETE);
+      actionsAPI
+        .deleteCaseInCreateStage(containerItemID, hideDelete)
+        .then(() => {
+          // @ts-ignore - An argument for 'payload' was not provided.
+          PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
+        })
+        .catch(() => {
+          setSnackbarMessage(localizedVal('Delete failed.', localeCategory));
+          setShowSnackbar(true);
+        })
+        .finally(() => {
+          enableButton(btnIds.DELETE);
+          dismiss(true);
+        });
+    } else if (isLocalAction) {
+      dismiss(true);
+      actionsAPI.cancelAssignment(containerItemID);
+    } else if (isBulkAction) {
+      dismiss(true);
+      actionsAPI.cancelBulkAction(containerItemID);
+    } else {
+      dismiss(true);
+      containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
+    }
+  }
 
   function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
     if (reason === 'clickaway') {
@@ -43,75 +94,41 @@ export default function CancelAlert(props: CancelAlertProps) {
     setShowSnackbar(false);
   }
 
-  const buttonClick = action => {
-    const actionsAPI = pConn.getActionsApi();
-
-    switch (action) {
-      case 'save':
-        // eslint-disable-next-line no-case-declarations
-        const savePromise = actionsAPI.saveAndClose(itemKey);
-
-        savePromise
-          .then(() => {
-            dismissModal();
-
-            // @ts-ignore - second parameter “payload” for publish method should be optional
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED);
-          })
-          .catch(() => {
-            showToast(localizedVal('Save failed', localeCategory));
-          });
-        break;
-
-      case 'continue':
-        dismissCancelAlertOnly();
-        break;
-
-      case 'delete':
-        // eslint-disable-next-line no-case-declarations
-        const deletePromise = actionsAPI.deleteCaseInCreateStage(itemKey);
-
-        deletePromise
-          .then(() => {
-            dismissModal();
-
-            // @ts-ignore - second parameter “payload” for publish method should be optional
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
-          })
-          .catch(() => {
-            showToast(localizedVal('Delete failed.', localeCategory));
-          });
-        break;
+  const leftButton = (
+    <Button
+      name={btnIds.CONTINUE_WORKING}
+      variant='contained'
+      color='secondary'
+      onClick={() => {
+        dismiss();
+        if (isReverseCoexistence) {
+          broadCastUtils.setCallBackFunction(null);
+          broadCastUtils.setIsDirtyDialogActive(false);
+        }
+      }}
+    >
+      {localizedVal('Go back', localeCategory)}
+    </Button>
+  );
 
-      default:
-        break;
-    }
-  };
+  const rightButton = (
+    <Button name={btnIds.DELETE} variant='contained' color='primary' disabled={buttonsState[btnIds.DELETE]} onClick={cancelHandler}>
+      {localizedVal('Discard', localeCategory)}
+    </Button>
+  );
 
   return (
     <>
       <div className='cancel-alert-background'>
         <div className='cancel-alert-top'>
-          <h3>{`Delete ${caseName}(${ID})`}</h3>
+          <h3>{localizedVal(heading, localeCategory)}</h3>
           <div>
-            <p>{`${localizedVal('Are you sure you want to delete', localeCategory)} ${caseName} (${ID})?`}</p>
-            <p>{localizedVal('Alternatively, you can continue working or save your work for later.', localeCategory)}</p>
+            <p>{localizedVal(content, localeCategory)}</p>
           </div>
           <div className='action-controls'>
             <Grid container spacing={4} justifyContent='space-between'>
-              <Grid item>
-                <Button variant='outlined' color='primary' onClick={() => buttonClick('save')}>
-                  {localizedVal('Save for later', localeCategory)}
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
-                  {localizedVal('Continue Working', localeCategory)}
-                </Button>
-                <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
-                  {localizedVal('Delete', localeCategory)}
-                </Button>
-              </Grid>
+              <Grid item>{leftButton}</Grid>
+              <Grid item>{rightButton}</Grid>
             </Grid>
           </div>
         </div>