@pega/dx-component-builder-sdk 23.1.12 → 23.1.14

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -4,6 +4,9 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
 
 interface CaseViewActionsMenuProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,6 +26,9 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage]: any = useState('');
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -33,6 +39,18 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
 
   const arMenuItems: any[] = [];
 
+  function showToast(message: string) {
+    setSnackbarMessage(message);
+    setShowSnackbar(true);
+  }
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
   function _actionMenuActionsClick(data) {
     const actionsAPI = thePConn.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
@@ -51,7 +69,11 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     const openProcessAction = actionsAPI.openProcessAction.bind(actionsAPI);
     openProcessAction(process.ID, {
       ...process
-    });
+    })
+      .then(() => {})
+      .catch(() => {
+        showToast(`${process.name} Submit failed!`);
+      });
     handleClose();
   }
 
@@ -79,6 +101,17 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
       <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
         {arMenuItems}
       </Menu>
+      <Snackbar
+        open={showSnackbar}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+        action={
+          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        }
+      />
     </>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx

@@ -154,7 +154,8 @@ export default function ListView(props: ListViewProps) {
       paper: {
         width: '100%',
         marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
+        marginBottom: theme.spacing(2),
+        display: 'grid'
       },
       search: {
         padding: '5px 5px'

package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/utils.ts

@@ -680,7 +680,9 @@ export const readContextResponse = async (context, params) => {
     if (compositeKeys.length) {
       otherContext.setCompositeKeys(compositeKeys);
     }
-    otherContext.fetchRowActionDetails = null;
+    if (otherContext) {
+      otherContext.fetchRowActionDetails = null;
+    }
   }
 
   const presetArray = [];

package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -141,7 +141,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   // Getting current context
   const context = getPConnect().getContextName();
   const resolvedList = getReferenceList(pConn);
-  const pageReference = `${pConn.getPageReference()}${resolvedList}`;
   pConn.setReferenceList(resolvedList);
   const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
@@ -198,6 +197,20 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   //  Constellation DX Components.
   const fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
+  useLayoutEffect(() => {
+    if (allowEditingInModal) {
+      getPConnect()
+        .getListActions()
+        .initDefaultPageInstructions(
+          getPConnect().getReferenceList(),
+          fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+    } else {
+      // @ts-ignore - An argument for 'fields' was not provided
+      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
+    }
+  }, []);
+
   const displayedColumns = fieldDefs.map(field => {
     return field.name ? field.name : field.cellRenderer;
   });
@@ -288,11 +301,13 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       pConn
         .getActionsApi()
         .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
-    } else if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, ''); // 3rd arg null until typedef marked correctly as optional
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
+
+    getPConnect().clearErrorMessages({
+      property: (getPConnect().getStateProps() as any)?.referenceList?.substring(1)
+    } as any);
   };
 
   const editRecord = () => {
@@ -312,11 +327,11 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   const deleteRecord = () => {
     setEditAnchorEl(null);
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().deleteEntry(selectedRowIndex.current, pageReference);
-    } else {
-      pConn.getListActions().deleteEntry(selectedRowIndex.current, ''); // 2nd arg empty string until typedef marked correctly as optional
-    }
+    pConn.getListActions().deleteEntry(selectedRowIndex.current);
+  };
+
+  const deleteRecordFromInlineEditable = (index: number) => {
+    pConn.getListActions().deleteEntry(index);
   };
 
   function buildElementsForTable() {
@@ -616,7 +631,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                           className='psdk-utility-button'
                           id='delete-button'
                           aria-label='Delete Cell'
-                          onClick={() => deleteRecord()}
+                          onClick={() => deleteRecordFromInlineEditable(index)}
                         >
                           <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
                         </button>
@@ -632,7 +647,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                 .slice(0)
                 .map((row, index) => {
                   return (
-                    <TableRow key={row[displayedColumns[0]]}>
+                    // eslint-disable-next-line react/no-array-index-key
+                    <TableRow key={index}>
                       {displayedColumns.map(colKey => {
                         return (
                           <TableCell key={colKey} className={classes.tableCell}>

package/tests/assets/sdk-r/components/createAll/override-sdk/template/WideNarrow/WideNarrow.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from 'packages/react-sdk-components/src/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
 interface WideNarrowProps extends PConnProps {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/WssNavBar/WssNavBar.tsx

@@ -54,6 +54,9 @@ export default function WssNavBar(props: WssNavBarProps) {
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
 
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
   const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElNav(event.currentTarget);
   };
@@ -144,7 +147,7 @@ export default function WssNavBar(props: WssNavBarProps) {
                 onClose={handleCloseUserMenu}
               >
                 <MenuItem onClick={logout}>
-                  <Typography>Logout</Typography>
+                  <Typography>{localizedVal('Log off', localeCategory)}</Typography>
                 </MenuItem>
               </Menu>
             </Box>

package/tests/assets/sdk-r/components/createAll/override-sdk/widget/Attachment/Attachment.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
 import { useState, useEffect, useCallback } from 'react';
 import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -39,7 +40,10 @@ export default function Attachment(props: AttachmentProps) {
   [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
   const pConn = getPConnect();
   const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
-
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CosmosFields';
+  const uploadMultipleFilesLabel = localizedVal('file_upload_text_multiple', localeCategory);
+  const uploadSingleFileLabel = localizedVal('file_upload_text_one', localeCategory);
   let categoryName = '';
   if (value && value.pyCategoryName) {
     categoryName = value.pyCategoryName;
@@ -379,7 +383,13 @@ export default function Attachment(props: AttachmentProps) {
             onChange={onFileAdded}
           />
           <Button style={{ textTransform: 'none' }} variant='outlined' color='primary' component='span'>
-            {allowMultiple === 'true' ? 'Upload files' : 'Upload a file'}
+            {allowMultiple === 'true'
+              ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
+                ? 'Choose files'
+                : uploadMultipleFilesLabel
+              : uploadSingleFileLabel === 'file_upload_text_one'
+                ? 'Choose a file'
+                : uploadSingleFileLabel}
           </Button>
         </label>
       </div>

package/tests/assets/sdk-r/components/createAll/override-sdk/widget/QuickCreate/QuickCreate.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -25,38 +26,64 @@ export default function QuickCreate(props: QuickCreateProps) {
       });
   };
 
-  const cases: any = [];
-  const envInfo = PCore.getEnvironmentInfo();
-  if (
-    classFilter &&
-    envInfo.environmentInfoObject &&
-    envInfo.environmentInfoObject.pyCaseTypeList &&
-    envInfo.environmentInfoObject.pyCaseTypeList.length > 0
-  ) {
-    classFilter.forEach(item => {
-      let icon = Utils.getImageSrc('polaris-solid', Utils.getSDKStaticConentUrl());
-      let label = '';
+  const [quickCreatecases, setCases] = useState([]);
+
+  /* If the classFilter is empty and has no entries - we will default to the default set of case types
+     It will usually come from the envInfo but for Launchpad, this is not populated - instead get the list of cases from the store */
+  useEffect(() => {
+    const cases: any = [];
+    const defaultCases: any = [];
+    const envInfo = PCore.getEnvironmentInfo();
+    if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
       envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
-        if (casetype.pyWorkTypeImplementationClassName === item) {
-          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl());
-          label = casetype.pyWorkTypeName ?? '';
+        if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
+          defaultCases.push({
+            classname: casetype.pyWorkTypeImplementationClassName,
+            onClick: () => {
+              createCase(casetype.pyWorkTypeImplementationClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyWorkTypeName
+          });
+        }
+      });
+    } else {
+      const pConnectInAppContext = PCore.createPConnect({
+        options: { context: PCore.getConstants().APP.APP }
+      }).getPConnect();
+      const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal') as any;
+      pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
+        if (casetype.pyClassName && casetype.pyLabel) {
+          defaultCases.push({
+            classname: casetype.pyClassName,
+            onClick: () => {
+              createCase(casetype.pyClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyLabel
+          });
         }
       });
-      if (label !== '') {
-        cases.push({
-          label,
-          onClick: () => {
-            createCase(item);
-          },
-          ...(showCaseIcons && { icon })
+    }
+
+    /* If classFilter is not empty - filter from the list of defaultCases */
+    if (classFilter?.length > 0) {
+      classFilter.forEach(item => {
+        defaultCases.forEach(casetype => {
+          if (casetype.classname === item) {
+            cases.push(casetype);
+          }
         });
-      }
-    });
-  }
+      });
+      setCases(cases);
+    } else {
+      setCases(defaultCases);
+    }
+  }, []);
 
   return (
     <div>
-      <WssQuickCreate heading={heading} actions={cases} />
+      <WssQuickCreate heading={heading} actions={quickCreatecases} />
     </div>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -1,46 +0,0 @@
-import  {PConnect } from '@pega/pcore-pconnect-typedefs';
-
-// PConnProps.d.ts
-// This gives us a place to have each component (which is most DX Components) that is
-//  expected to have a getPConnect extend its props (from BaseProps)
-//  such that every component will be expected to have a getPConnect() function
-//  that returns a PConnect object. (new/better way of doing .propTypes).
-//  This PConnProps can be extended to include other props that we know are in every component
-export interface PConnProps {
-  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
-  getPConnect: () => typeof PConnect;
-
-  // Allow any/all other key/value pairs in the BaseProps for now
-  //  TODO: refine which other props are always expected for various component
-  //    types and consider further interface "subclassing". For example, we may
-  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
-  //    and any other props that every Form component expects.
-  //    For example, see the PConnFieldProps below.
-  // NOTE: if you uncomment the line below, the PConnProps type will allow
-  //  otherwise undefined types to appear. This can be helpful for debugging
-  //  or when adding new components whose types aren't yet known.
-  // [key: string]: any;
-}
-
-
-// PConnFieldProps extends PConnProps to bring in the common properties that are
-// associated with most field components (ex: Dropdown, TextInput, etc.) in the
-//  components/field directory
-export interface PConnFieldProps extends PConnProps {
-  label: string,
-  required: boolean,
-  disabled: boolean,
-  value: any,
-  validatemessage: string,
-  status?: string,
-  onChange?: any,
-  onBlur?: any,
-  readOnly: boolean,
-  testId: string,
-  helperText: string,
-  displayMode?: string,
-  hideLabel: boolean,
-  placeholder?: string,
-  fieldMetadata?: any,
-  additionalProps?: any
-}

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

@@ -1,54 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { stateProps, configProps } from './mock';
-
-import PegaDxilMyTestText from './index';
-
-export default {
-  title: 'PegaDxilMyTestText',
-  decorators: [withKnobs],
-  component: PegaDxilMyTestText
-};
-
-export const BasePegaDxilMyTestText = () => {
-
-  const [value, setValue] = useState(configProps.value);
-
-  const props = {
-    value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
-    hasSuggestions: configProps.hasSuggestions,
-
-    getPConnect: () => {
-      return {
-        getStateProps: () => {
-          return stateProps;
-        },
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
-            },
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMyTestText {...props} />
-    </>
-  );
-};

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

@@ -1,73 +0,0 @@
-import PropTypes from 'prop-types';
-import { Input } from '@pega/cosmos-react-core';
-
-import type { PConnFieldProps } from './PConnProps';
-
-import StyledPegaDxilMyTestTextWrapper from './styles';
-
-// interface for props
-interface PegaDxilMyTestTextProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-
-}
-
-// interface for StateProps object
-interface StateProps {
-  value: string;
-  hasSuggestions: boolean;
-}
-
-// Duplicated runtime code from Constellation Design System Component
-
-// 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;
-
-  const pConn = getPConnect();
-  const actions = pConn.getActionsApi();
-  const stateProps = pConn.getStateProps() as StateProps;
-  const propName: string = stateProps.value;
-
-  const handleOnChange = (event: any) => {
-    const { value: updatedValue } = event.target;
-    actions.updateFieldValue(propName, updatedValue);
-  };
-
-  return (
-    <StyledPegaDxilMyTestTextWrapper>
-      <Input
-        type='text'
-        value={value}
-        label={label}
-        labelHidden={hideLabel}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={required}
-        onChange={handleOnChange}
-        testId={testId}
-      />
-    </StyledPegaDxilMyTestTextWrapper>
-  );
-};
-
-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
-};

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

@@ -1,15 +0,0 @@
-
-// @ts-nocheck
-export const configProps = {
-  value: '',
-  label: 'Text Sample',
-  placeholder: 'Text Placeholder',
-  helperText: 'Text Helper Text',
-  testId: 'Text-12345678',
-  hasSuggestions: false
-};
-
-export const stateProps = {
-  value: '.TextSample',
-  hasSuggestions: false
-};

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

@@ -1,15 +0,0 @@
-
-// 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;
-//  `;
-// });

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTestText/config.json

@@ -1,83 +0,0 @@
-{
-  "name": "Pega_DXIL_MyTestText",
-  "label": "My Test Text",
-  "description": "My Test Text Description",
-  "organization": "Pega",
-  "version": "0.0.1",
-  "library": "DXIL",
-  "allowedApplications": [],
-  "componentKey": "Pega_DXIL_MyTestText",
-  "type": "Field",
-  "subtype": "Text",
-  "icon": "images/pz-url-active.svg",
-   "properties": [
-    {
-      "name": "label",
-      "label": "Field label",
-      "format": "TEXT",
-      "required": true
-    },
-    {
-      "name": "readOnly",
-      "label": "Edit mode",
-      "format": "READONLY"
-    },
-    {
-      "label": "Input settings",
-      "format": "GROUP",
-      "visibility": "(!readOnly = true)",
-      "properties": [
-        {
-          "name": "placeholder",
-          "label": "Placeholder",
-          "format": "TEXT"
-        },
-        {
-          "name": "helperText",
-          "label": "Helper text",
-          "format": "TEXT"
-        }
-      ]
-    },
-    {
-      "label": "Conditions",
-      "format": "GROUP",
-      "properties": [
-        {
-          "name": "required",
-          "label": "Required",
-          "format": "REQUIRED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "disabled",
-          "label": "Disabled",
-          "format": "DISABLED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "visibility",
-          "label": "Visibility",
-          "format": "VISIBILITY"
-        }
-      ]
-    },
-    {
-      "label": "Advanced",
-      "format": "GROUP",
-      "collapsible": true,
-      "properties": [
-        {
-          "name": "testId",
-          "label": "Test ID",
-          "format": "TEXT",
-          "ignorePattern": "[^-_\\p{N}\\p{L}]",
-          "includeAnnotations": false
-        }
-      ]
-    }
-  ],
-  "defaultConfig": {
-    "label": "@L $this.label"
-  }
-}