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

package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -1,205 +0,0 @@
-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';
-
-// Operator is one of the few components that does NOT have getPConnect.
-//  So, no need to extend PConnProps
-interface OperatorProps{
-  // If any, enter additional props that only exist on this component
-  caseOpConfig: {
-    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 { caseOpConfig } = props;
-  const classes = useStyles();
-
-  const fieldLabel = caseOpConfig.label.toLowerCase();
-  let caseOpLabel = "---";
-  let caseOpName = "---";
-  let caseOpId = "";
-  let caseTime = "";
-
-  if (fieldLabel === "create operator") {
-    caseOpLabel = caseOpConfig.createLabel;
-    caseOpName = caseOpConfig.createOperator.userName;
-    caseTime = caseOpConfig.createDateTime;
-    caseOpId = caseOpConfig.createOperator.userId;
-  } else if (fieldLabel === "update operator") {
-    caseOpLabel = caseOpConfig.updateLabel;
-    caseOpName = caseOpConfig.updateOperator.userName;
-    caseTime = caseOpConfig.updateDateTime;
-    caseOpId = caseOpConfig.updateOperator.userId;
-  }
-
-  // Popover-related
-  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
-  const [popoverFields, setPopoverFields] = useState<Array<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) => {
-      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 <React.Fragment>
-      <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>
-    </React.Fragment>;
-
-}

package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/Pulse/Pulse.tsx

@@ -1,35 +0,0 @@
-import React 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
-  children?: Array<any>
-}
-
-
-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: PulseProps) {
-  // eslint-disable-next-line no-unused-vars, @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/components/SDK-React/createAll/override-sdk/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,121 +0,0 @@
-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/components/SDK-React/createAll/override-sdk/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-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?: Array<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/components/SDK-React/createAll/override-sdk/field/AutoComplete/AutoComplete.tsx

@@ -1,220 +0,0 @@
-import React, { 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 type { 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: Array<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<Array<IOption>>([]);
-  const [theDatasource, setDatasource] = useState(null);
-  let selectedValue: any = '';
-  const helperTextToDisplay = validatemessage || helperText;
-
-  const thePConn = getPConnect();
-  const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps()["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;
-    parameters = flattenParameters(datasourceMetadata?.datasource?.parameters);
-    const displayProp = datasourceMetadata.datasource.propertyForDisplayText.startsWith('@P')
-      ? datasourceMetadata.datasource.propertyForDisplayText.substring(3)
-      : datasourceMetadata.datasource.propertyForDisplayText;
-    const valueProp = datasourceMetadata.datasource.propertyForValue.startsWith('@P')
-      ? datasourceMetadata.datasource.propertyForValue.substring(3)
-      : datasourceMetadata.datasource.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: Array<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}
-        />
-      )}
-    />
-  );
-}

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

@@ -1,11 +0,0 @@
-{
-  "name": "AutoComplete",
-  "label": "Search box",
-  "description": "Picklist",
-  "type": "Field",
-  "subtype": "Picklist",
-  "componentKey" : "AutoComplete",
-  "icon": "",
-  "properties": [
-  ]
-}