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

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

@@ -0,0 +1,215 @@
+import React, { useState } from 'react';
+import TextField from '@material-ui/core/TextField';
+import Popover from '@material-ui/core/Popover';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Operator is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface OperatorProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  createDateTime: string;
+  createLabel: string;
+  createOperator: { userName: string; userId: string };
+  updateDateTime: string;
+  updateLabel: string;
+  updateOperator: { userName: string; userId: string };
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1)
+  },
+  popover: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1)
+  }
+}));
+
+export default function Operator(props: OperatorProps) {
+  // const componentName = "Operator";
+  const classes = useStyles();
+
+  const fieldLabel = props.label.toLowerCase();
+  let caseOpLabel = '---';
+  let caseOpName = '---';
+  let caseOpId = '';
+  let caseTime = '';
+
+  if (fieldLabel === 'create operator') {
+    caseOpLabel = props.createLabel;
+    caseOpName = props.createOperator.userName;
+    caseTime = props.createDateTime;
+    caseOpId = props.createOperator.userId;
+  } else if (fieldLabel === 'update operator') {
+    caseOpLabel = props.updateLabel;
+    caseOpName = props.updateOperator.userName;
+    caseTime = props.updateDateTime;
+    caseOpId = props.updateOperator.userId;
+  }
+
+  // Popover-related
+  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+  const [popoverFields, setPopoverFields] = useState<any[]>([]);
+
+  const popoverOpen = Boolean(popoverAnchorEl);
+  const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
+
+  const handlePopoverClose = () => {
+    setPopoverAnchorEl(null);
+  };
+
+  function showOperatorDetails(event) {
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+
+    operatorPreviewPromise.then((res: any) => {
+      const fillerString = '---';
+      let fields: any = [];
+      if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+        fields = [
+          {
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
+            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+          },
+          {
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
+            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+          },
+          {
+            id: 'ReportToUserName',
+            name: localizedVal('Reports to', localeCategory),
+            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: 'pyTelephone',
+            name: localizedVal('Telephone', localeCategory),
+            value: res.data.pyOperatorInfo.pyTelephone ? (
+              <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a>
+            ) : (
+              fillerString
+            )
+          },
+          {
+            id: 'pyEmailAddress',
+            name: localizedVal('Email address', localeCategory),
+            value: res.data.pyOperatorInfo.pyEmailAddress ? (
+              <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a>
+            ) : (
+              fillerString
+            )
+          }
+        ];
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(
+          `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
+        );
+        fields = [
+          {
+            id: 'pyPosition',
+            name: localizedVal('Position', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'pyOrganization',
+            name: localizedVal('Organization', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'ReportToUserName',
+            name: localizedVal('Reports to', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'pyTelephone',
+            name: localizedVal('Telephone', localeCategory),
+            value: fillerString
+          },
+          {
+            id: 'pyEmailAddress',
+            name: localizedVal('Email address', localeCategory),
+            value: fillerString
+          }
+        ];
+      }
+      // Whatever the fields are, update the component's popoverFields
+      setPopoverFields(fields);
+    });
+
+    setPopoverAnchorEl(event.currentTarget);
+  }
+
+  function getPopoverGrid() {
+    // return popoverFields.map((field) => {
+    //   return <div className={classes.popover}>{field.name}: {field.value}</div>
+    // })
+
+    if (popoverFields.length === 0) {
+      return;
+    }
+
+    // There are fields, so build the grid.
+    return (
+      <Grid container className={classes.popover} spacing={1}>
+        <Grid item xs={12}>
+          <Typography variant='h6'>{caseOpName}</Typography>
+        </Grid>
+        {popoverFields.map(field => {
+          return (
+            <React.Fragment key={field.id}>
+              <Grid container item xs={12} spacing={1}>
+                <Grid item xs={6}>
+                  <Typography variant='caption'>{field.name}</Typography>
+                </Grid>
+                <Grid item xs={6}>
+                  <Typography variant='subtitle2'>{field.value}</Typography>
+                </Grid>
+              </Grid>
+            </React.Fragment>
+          );
+        })}
+      </Grid>
+    );
+  }
+
+  // End of popover-related
+
+  return (
+    <>
+      <TextField
+        defaultValue={caseOpName}
+        label={caseOpLabel}
+        onClick={showOperatorDetails}
+        InputProps={{
+          readOnly: true,
+          disableUnderline: true,
+          inputProps: { style: { cursor: 'pointer' } }
+        }}
+      />
+      <br />
+      {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+
+      <Popover
+        id={popoverId}
+        open={popoverOpen}
+        anchorEl={popoverAnchorEl}
+        onClose={handlePopoverClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+        PaperProps={{ style: { maxWidth: '45ch' } }}
+      >
+        {getPopoverGrid()}
+      </Popover>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+// Pulse is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface PulseProps {
+  // If any, enter additional props that only exist on this component
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    borderLeft: '6px solid',
+    borderLeftColor: theme.palette.primary.light
+  }
+}));
+
+export default function Pulse(props: PropsWithChildren<PulseProps>) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children } = props;
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root}>
+      <CardHeader title={<Typography variant='h6'>Pulse</Typography>} />
+      <CardContent>
+        <Typography>Pulse</Typography>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

@@ -0,0 +1,122 @@
+import React, { forwardRef } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
+
+import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
+
+const useStyles = makeStyles(theme => ({
+  fieldLabel: {
+    position: 'relative',
+    transform: 'translate(0, 0px) scale(1)',
+    marginBottom: '5px',
+    color: theme.palette.text.secondary
+  }
+}));
+
+interface RichTextEditorProps {
+  id?: string;
+  defaultValue: string;
+  label: string;
+  labelHidden: boolean;
+  info: string;
+  testId: string;
+  placeholder: string;
+  disabled: boolean;
+  required: boolean;
+  readOnly: boolean;
+  error: boolean;
+  onBlur: React.EventHandler<any>;
+  onChange: React.EventHandler<any>;
+}
+
+const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const classes = useStyles();
+  const uid = useUID();
+  const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
+
+  const editorRef: any = useConsolidatedRef(ref);
+  let richTextComponent: any = null;
+
+  useAfterInitialEffect(() => {
+    editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
+  }, [readOnly, disabled]);
+
+  const filePickerCallback = cb => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+          Note: Now we need to register the blob in TinyMCEs image blob
+          registry. In the next release this part hopefully won't be
+          necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        const blobCache = editorRef.current.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  if (readOnly) {
+    const value = defaultValue || '--';
+    // eslint-disable-next-line react/no-danger
+    richTextComponent = <div key={id} id={id} className='readonly-richtext-editor' dangerouslySetInnerHTML={{ __html: value }} />;
+  } else {
+    richTextComponent = (
+      <Editor
+        tinymceScriptSrc='tinymce/tinymce.min.js'
+        onInit={(_evt, editor) => {
+          editorRef.current = editor;
+        }}
+        id={id}
+        initialValue={defaultValue}
+        disabled={disabled}
+        init={{
+          placeholder,
+          menubar: false,
+          statusbar: false,
+          min_height: 130,
+          plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+          autoresize_bottom_margin: 0,
+          toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+          toolbar_location: 'bottom',
+          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+          branding: false,
+          paste_data_images: true,
+          file_picker_types: 'image',
+          file_picker_callback: filePickerCallback
+        }}
+        onBlur={onBlur}
+        onEditorChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <FormControl data-test-id={testId} error={error} required={required}>
+      {!labelHidden && (
+        <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
+          {label}
+        </InputLabel>
+      )}
+      {richTextComponent}
+      {info && <FormHelperText>{info}</FormHelperText>}
+    </FormControl>
+  );
+});
+
+export default RichTextEditor;

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

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

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -0,0 +1,40 @@
+.quick-link-ul-list {
+  list-style: none;
+  padding: 0;
+  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  display: grid;
+  gap: calc(1rem);
+}
+
+.quick-link-list {
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 8px;
+}
+
+.quick-link-button {
+  text-transform: capitalize !important;
+  font-size: 16px !important;
+  color: white !important;
+  padding: calc(0.5rem * 2) !important;
+  height: 6rem;
+  width: 100%;
+  justify-content: start !important;
+}
+
+.quick-link-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  filter: invert(100%);
+}
+
+.quick-link-button-span {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

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

@@ -0,0 +1,37 @@
+import { Button } from '@material-ui/core';
+import './WssQuickCreate.css';
+
+// WssQuickCreate is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface WssQuickCreateProps {
+  // If any, enter additional props that only exist on this component
+  heading: string;
+  actions?: any[];
+}
+
+export default function WssQuickCreate(props: WssQuickCreateProps) {
+  const { heading, actions } = props;
+
+  return (
+    <div>
+      <h1 id='quick-links-heading' className='quick-link-heading'>
+        {heading}
+      </h1>
+      <ul id='quick-links' className='quick-link-ul-list'>
+        {actions &&
+          actions.map(element => {
+            return (
+              <li className='quick-link-list' key={element.label}>
+                <Button className='quick-link-button' onClick={element.onClick}>
+                  <span className='quick-link-button-span'>
+                    {element.icon && <img className='quick-link-icon' src={element.icon} />}
+                    <span>{element.label}</span>
+                  </span>
+                </Button>
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}

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

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

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/_designSystemExtension.md

@@ -0,0 +1,6 @@
+# The **override-sdk/designSystemExtension** directory
+
+The **src/components/override-sdk/designSystemExtension** directory contains the code for components that **extend** the design system and 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 **design system extension** 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/designSystemExtension**.

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

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+import { TextField } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import isDeepEqual from 'fast-deep-equal/react';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface IOption {
+  key: string;
+  value: string;
+}
+
+const preProcessColumns = columnList => {
+  return columnList.map(col => {
+    const tempColObj = { ...col };
+    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    return tempColObj;
+  });
+};
+
+const getDisplayFieldsMetaData = columnList => {
+  const displayColumns = columnList.filter(col => col.display === 'true');
+  const metaDataObj: any = { key: '', primary: '', secondary: [] };
+  const keyCol = columnList.filter(col => col.key === 'true');
+  metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+  for (let index = 0; index < displayColumns.length; index += 1) {
+    if (displayColumns[index].primary === 'true') {
+      metaDataObj.primary = displayColumns[index].value;
+    } else {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    }
+  }
+  return metaDataObj;
+};
+
+interface AutoCompleteProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on AutoComplete here'
+  displayMode?: string;
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  status?: string;
+  onRecordChange?: any;
+  additionalProps?: object;
+  listType: string;
+  parameters?: any;
+  datasource: any;
+  columns: any[];
+}
+
+export default function AutoComplete(props: AutoCompleteProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextInput = getComponentFromMap('TextInput');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    placeholder,
+    value = '',
+    validatemessage,
+    readOnly,
+    testId,
+    displayMode,
+    deferDatasource,
+    datasourceMetadata,
+    status,
+    helperText,
+    hideLabel,
+    onRecordChange
+  } = props;
+
+  const context = getPConnect().getContextName();
+  let { listType, parameters, datasource = [], columns = [] } = props;
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState<IOption[]>([]);
+  const [theDatasource, setDatasource] = useState(null);
+  let selectedValue: any = '';
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+
+  if (!isDeepEqual(datasource, theDatasource)) {
+    // inbound datasource is different, so update theDatasource (to trigger useEffect)
+    setDatasource(datasource);
+  }
+
+  const flattenParameters = (params = {}) => {
+    const flatParams = {};
+    Object.keys(params).forEach(key => {
+      const { name, value: theVal } = params[key];
+      flatParams[name] = theVal;
+    });
+
+    return flatParams;
+  };
+
+  // convert associated to datapage listtype and transform props
+  // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+  if (deferDatasource && datasourceMetadata?.datasource?.name) {
+    listType = 'datapage';
+    datasource = datasourceMetadata.datasource.name;
+    const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+    parameters = flattenParameters(dataSourceParameters);
+    const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+    const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+    columns = [
+      {
+        key: 'true',
+        setProperty: 'Associated property',
+        value: valueProp
+      },
+      {
+        display: 'true',
+        primary: 'true',
+        useForSearch: true,
+        value: displayProp
+      }
+    ];
+  }
+  columns = preProcessColumns(columns);
+
+  useEffect(() => {
+    if (listType === 'associated') {
+      setOptions(Utils.getOptionList(props, getPConnect().getDataObject('')));
+    }
+  }, [theDatasource]);
+
+  useEffect(() => {
+    if (!displayMode && listType !== 'associated') {
+      getDataPage(datasource, parameters, context).then((results: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        results?.forEach(element => {
+          const val = element[displayColumn.primary]?.toString();
+          const obj = {
+            key: element[displayColumn.key] || element.pyGUID,
+            value: val
+          };
+          optionsData.push(obj);
+        });
+        setOptions(optionsData);
+      });
+    }
+  }, []);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (value) {
+    const index = options?.findIndex(element => element.key === value);
+    if (index > -1) {
+      selectedValue = options[index].value;
+    } else {
+      selectedValue = value;
+    }
+  }
+
+  const handleChange = (event: object, newValue) => {
+    const val = newValue ? newValue.key : '';
+    handleEvent(actionsApi, 'changeNblur', propName, val);
+    if (onRecordChange) {
+      onRecordChange(event);
+    }
+  };
+
+  const handleInputValue = (event, newInputValue) => {
+    setInputValue(newInputValue);
+  };
+
+  if (readOnly) {
+    const theValAsString = options?.find(opt => opt.key === value)?.value;
+    return <TextInput {...props} value={theValAsString} />;
+  }
+  // Need to use both getOptionLabel and getOptionSelected to map our
+  //  key/value structure to what Autocomplete expects
+  return (
+    <Autocomplete
+      options={options}
+      getOptionLabel={(option: IOption) => {
+        return option.value ? option.value : '';
+      }}
+      getOptionSelected={(option: any) => {
+        return option.value ? option.value : '';
+      }}
+      fullWidth
+      onChange={handleChange}
+      value={selectedValue}
+      inputValue={inputValue || selectedValue}
+      onInputChange={handleInputValue}
+      renderInput={params => (
+        <TextField
+          {...params}
+          fullWidth
+          variant='outlined'
+          helperText={helperTextToDisplay}
+          placeholder={placeholder}
+          size='small'
+          required={required}
+          error={status === 'error'}
+          label={label}
+          data-test-id={testId}
+        />
+      )}
+    />
+  );
+}