@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

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

@@ -0,0 +1,454 @@
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable react/no-array-index-key */
+import { useState, useEffect, useCallback } from 'react';
+import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import download from 'downloadjs';
+
+import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { isInfinity23OrHigher } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './Attachment.css';
+
+interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on this component
+  value: any;
+  allowMultiple: string;
+  extensions: string;
+}
+
+const getAttachmentKey = (name = '') => (name ? `attachmentsList.${name}` : 'attachmentsList');
+
+const getCurrentAttachmentsList = (key, context) => {
+  return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
+};
+
+const updateAttachmentState = (pConn, key, attachments) => {
+  PCore.getStateUtils().updateState(pConn.getContextName(), key, attachments, {
+    pageReference: 'context_data',
+    isArrayDeepMerge: false
+  });
+};
+
+export default function Attachment(props: AttachmentProps) {
+  const { value, getPConnect, label, validatemessage, allowMultiple, extensions, displayMode } = props;
+  /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
+  let { required, disabled } = props;
+  [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());
+
+  let categoryName = '';
+  if (value && value.pyCategoryName) {
+    categoryName = value.pyCategoryName;
+  }
+  const deleteIcon = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
+  const srcImg = Utils.getImageSrc('document-doc', Utils.getSDKStaticConentUrl());
+  let valueRef = (pConn.getStateProps() as any).value;
+  valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const [files, setFiles] = useState<any[]>(() =>
+    value?.pxResults && +value.pyCount > 0 ? value.pxResults.map(f => buildFilePropsFromResponse(f)) : []
+  );
+  const [filesWithError, setFilesWithError] = useState<any[]>([]);
+  const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
+
+  const resetAttachmentStoredState = () => {
+    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(isInfinity23OrHigher() ? valueRef : ''), undefined, {
+      pageReference: 'context_data',
+      isArrayDeepMerge: false
+    });
+  };
+
+  const fileDownload = (data, fileName, ext) => {
+    const fileData = ext ? `${fileName}.${ext}` : fileName;
+    download(atob(data), fileData);
+  };
+
+  const downloadFile = (fileObj: any) => {
+    setAnchorEl(null);
+    PCore.getAttachmentUtils()
+      // @ts-ignore - 3rd parameter "responseEncoding" should be optional
+      .downloadAttachment(fileObj.pzInsKey, pConn.getContextName())
+      .then((content: any) => {
+        const extension = fileObj.pyAttachName.split('.').pop();
+        fileDownload(content.data, fileObj.pyFileName, extension);
+      })
+      .catch(() => {});
+  };
+
+  const deleteFile = useCallback(
+    file => {
+      setAnchorEl(null);
+      let attachmentsList: any[] = [];
+      let currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+
+      // If file to be deleted is the one added in previous stage i.e. for which a file instance is created in server
+      // no need to filter currentAttachmentList as we will get another entry of file in redux with delete & label
+      // eslint-disable-next-line no-unsafe-optional-chaining
+      if (value && value?.pxResults && +value?.pyCount > 0 && file.responseProps && file?.responseProps?.pzInsKey !== 'temp') {
+        const updatedAttachments = files.map(f => {
+          if (f.responseProps && f.responseProps.pzInsKey === file.responseProps.pzInsKey) {
+            return { ...f, delete: true, label: valueRef };
+          }
+          return f;
+        });
+
+        // updating the redux store to help form-handler in passing the data to delete the file from server
+        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...updatedAttachments]);
+        setFiles(current => {
+          const newlyAddedFiles = current.filter(f => !!f.ID);
+          const filesPostDelete = current.filter(
+            f => f.responseProps?.pzInsKey !== 'temp' && f.responseProps?.pzInsKey !== file.responseProps?.pzInsKey
+          );
+          attachmentsList = [...filesPostDelete, ...newlyAddedFiles];
+          return attachmentsList;
+        });
+      } //  if the file being deleted is the added in this stage  i.e. whose data is not yet created in server
+      else {
+        // filter newly added files in this stage, later the updated current stage files will be added to redux once files state is updated in below setFiles()
+        currentAttachmentList = currentAttachmentList.filter(f => f.label !== valueRef);
+        setFiles(current => {
+          attachmentsList = current.filter(f => f.ID !== file.ID);
+          return attachmentsList;
+        });
+        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...currentAttachmentList, ...attachmentsList]);
+        if (file.inProgress) {
+          // @ts-ignore - 3rd parameter "responseEncoding" should be optional
+          PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
+        }
+      }
+
+      setToggleUploadBegin(false);
+      setFilesWithError(prevFilesWithError => {
+        return prevFilesWithError.filter(f => f.ID !== file.ID);
+      });
+    },
+    [pConn, value, valueRef, filesWithError]
+  );
+
+  const onUploadProgress = () => {};
+
+  const errorHandler = (isFetchCanceled, attachedFile) => {
+    return error => {
+      if (!isFetchCanceled(error)) {
+        let uploadFailMsg = pConn.getLocalizedValue('Something went wrong', '', '');
+        if (error.response && error.response.data && error.response.data.errorDetails) {
+          uploadFailMsg = pConn.getLocalizedValue(error.response.data.errorDetails[0].localizedValue, '', '');
+        }
+        setFiles(current => {
+          return current.map(f => {
+            if (f.ID === attachedFile.ID) {
+              f.props.meta = uploadFailMsg;
+              f.props.error = true;
+              f.props.onDelete = () => deleteFile(f);
+              f.props.icon = getIconFromFileType(f.type);
+              f.props.name = pConn.getLocalizedValue('Unable to upload file', '', '');
+              f.inProgress = false;
+              const fieldName = (pConn.getStateProps() as any).value;
+              const context = pConn.getContextName();
+              // set errors to property to block submit even on errors in file upload
+              PCore.getMessageManager().addMessages({
+                // @ts-ignore
+                messages: [
+                  {
+                    type: 'error',
+                    message: pConn.getLocalizedValue('Error with one or more files', '', '')
+                  }
+                ],
+                property: fieldName,
+                pageReference: pConn.getPageReference(),
+                context
+              });
+              delete f.props.progress;
+            }
+            return f;
+          });
+        });
+      }
+      throw error;
+    };
+  };
+
+  const validateFileExtension = (fileObj, allowedExtensions) => {
+    if (!allowedExtensions) {
+      return true;
+    }
+    const allowedExtensionList = allowedExtensions
+      .toLowerCase()
+      .split(',')
+      .map(item => item.replaceAll('.', '').trim());
+    const extension = fileObj.name.split('.').pop().toLowerCase();
+    return allowedExtensionList.includes(extension);
+  };
+
+  const clearFieldErrorMessages = () => {
+    const fieldName = (pConn.getStateProps() as any).value;
+    const context = pConn.getContextName();
+    // @ts-ignore
+    PCore.getMessageManager().clearMessages({
+      type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
+      property: fieldName,
+      pageReference: pConn.getPageReference(),
+      context
+    });
+  };
+
+  const onFileAdded = event => {
+    let addedFiles = Array.from(event.target.files);
+    addedFiles = allowMultiple === 'true' ? addedFiles : [addedFiles[0]];
+    const maxAttachmentSize = PCore.getEnvironmentInfo().getMaxAttachmentSize() || '5';
+    const tempFilesToBeUploaded = [
+      ...addedFiles.map((f: any, index) => {
+        f.ID = `${new Date().getTime()}I${index}`;
+        f.inProgress = true;
+        f.props = {
+          type: f.type,
+          name: f.name,
+          icon: getIconFromFileType(f.type),
+          onDelete: () => deleteFile(f)
+        };
+        if (!validateMaxSize(f, maxAttachmentSize)) {
+          f.props.error = true;
+          f.props.meta = pConn.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', '');
+        } else if (!validateFileExtension(f, extensions)) {
+          f.props.error = true;
+          f.props.meta = `${pConn.getLocalizedValue('File has invalid extension. Allowed extensions are:', '', '')} ${extensions.replaceAll(
+            '.',
+            ''
+          )}`;
+        }
+        if (f.props.error) {
+          const fieldName = (pConn.getStateProps() as any).value;
+          const context = pConn.getContextName();
+          PCore.getMessageManager().addMessages({
+            // @ts-ignore
+            messages: [
+              {
+                type: 'error',
+                message: pConn.getLocalizedValue('Error with one or more files', '', '')
+              }
+            ],
+            property: fieldName,
+            pageReference: pConn.getPageReference(),
+            context
+          });
+        }
+        return f;
+      })
+    ];
+    const tempFilesWithError = tempFilesToBeUploaded.filter(f => f.props.error);
+    if (tempFilesWithError.length > 0) {
+      setFilesWithError(tempFilesWithError);
+    }
+    setFiles(current => (allowMultiple !== 'true' ? [...tempFilesToBeUploaded] : [...current, ...tempFilesToBeUploaded]));
+    setToggleUploadBegin(true);
+  };
+
+  const uploadFiles = useCallback(() => {
+    const filesToBeUploaded = files
+      .filter(e => {
+        const isFileUploaded = e.props && e.props.progress === 100;
+        const fileHasError = e.props && e.props.error;
+        const isFileUploadedinLastStep = e.responseProps && e.responseProps.pzInsKey;
+        return !isFileUploaded && !fileHasError && !isFileUploadedinLastStep;
+      })
+      .map(f =>
+        window.PCore.getAttachmentUtils().uploadAttachment(
+          f,
+          () => {
+            onUploadProgress();
+          },
+          isFetchCanceled => {
+            return errorHandler(isFetchCanceled, f);
+          },
+          pConn.getContextName()
+        )
+      );
+    Promise.allSettled(filesToBeUploaded)
+      .then((fileResponses: any) => {
+        fileResponses = fileResponses.filter(fr => fr.status !== 'rejected'); // in case of deleting an in progress file, promise gets cancelled but still enters then block
+        if (fileResponses.length > 0) {
+          setFiles(current => {
+            const tempFilesUploaded = [...current];
+            tempFilesUploaded.forEach(f => {
+              const index = fileResponses.findIndex((fr: any) => fr.value.clientFileID === f.ID);
+              if (index >= 0) {
+                f.props.meta = pConn.getLocalizedValue('Uploaded successfully', '', '');
+                f.props.progress = 100;
+                f.inProgress = false;
+                f.handle = fileResponses[index].value.ID;
+                f.label = valueRef;
+                f.category = categoryName;
+                f.responseProps = {
+                  pzInsKey: 'temp',
+                  pyAttachName: f.props.name
+                };
+              }
+            });
+            return tempFilesUploaded;
+          });
+
+          if (filesWithError.length === 0) {
+            clearFieldErrorMessages();
+          }
+        }
+        setToggleUploadBegin(false);
+      })
+      .catch(error => {
+        // eslint-disable-next-line no-console
+        console.log(error);
+        setToggleUploadBegin(false);
+      });
+  }, [files, filesWithError]);
+
+  useEffect(() => {
+    if (toggleUploadBegin && files.length > 0) {
+      uploadFiles();
+    }
+  }, [toggleUploadBegin]);
+
+  useEffect(() => {
+    if (files.length > 0 && displayMode !== 'DISPLAY_ONLY') {
+      const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+      // block duplicate files to redux store when added 1 after another to prevent multiple duplicates being added to the case on submit
+      const tempFiles = files.filter(f => currentAttachmentList.findIndex(fr => fr.ID === f.ID) === -1 && !f.inProgress && f.responseProps);
+
+      const updatedAttList = [...currentAttachmentList, ...tempFiles];
+      updateAttachmentState(pConn, getAttachmentKey(valueRef), updatedAttList);
+    }
+  }, [files]);
+
+  useEffect(() => {
+    if (filesWithError.length === 0) {
+      clearFieldErrorMessages();
+    }
+  }, [filesWithError]);
+
+  useEffect(() => {
+    let tempUploadedFiles = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+    tempUploadedFiles = tempUploadedFiles.filter(f => f.label === valueRef);
+    setFiles(current => {
+      return [
+        ...current.map(f => {
+          return f.responseProps.pzInsKey && !f.responseProps.pzInsKey.includes('temp')
+            ? {
+                ...f,
+                props: {
+                  ...f.props,
+                  onDelete: () => deleteFile(f)
+                }
+              }
+            : { ...f };
+        }),
+        ...tempUploadedFiles
+      ];
+    });
+    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, resetAttachmentStoredState, caseID);
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+    };
+  }, []);
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const content = (
+    <div style={{ marginBottom: '8px' }}>
+      <div className={`${disabled ? 'file-disabled' : ''} ${validatemessage === '' ? 'file-div' : 'file-div-error'}`}>
+        <div hidden={true} id='attachment-ID'>
+          {valueRef}
+        </div>
+        <label htmlFor={valueRef}>
+          <input
+            style={{ display: 'none' }}
+            id={valueRef}
+            name='upload-photo'
+            type='file'
+            multiple={allowMultiple === 'true'}
+            required={required}
+            disabled={disabled}
+            onChange={onFileAdded}
+          />
+          <Button style={{ textTransform: 'none' }} variant='outlined' color='primary' component='span'>
+            {allowMultiple === 'true' ? 'Upload files' : 'Upload a file'}
+          </Button>
+        </label>
+      </div>
+    </div>
+  );
+
+  const fileDisplay = (
+    <div>
+      {files &&
+        files.length > 0 &&
+        files.map((item, index) => {
+          return (
+            <div key={index} className='psdk-utility-card'>
+              <div className='psdk-utility-card-icon'>
+                {!item.inProgress && <img className='psdk-utility-card-svg-icon' src={srcImg} />}
+                {item.inProgress && (
+                  <div>
+                    <CircularProgress />
+                  </div>
+                )}
+              </div>
+              <div className='psdk-utility-card-main'>
+                <div className='psdk-utility-card-main-primary-label'>{item.props.name}</div>
+                {item.props.meta && <div style={{ color: item.props.error ? 'red' : undefined }}>{item.props.meta}</div>}
+              </div>
+              <div className='psdk-utility-action'>
+                {item.ID && (
+                  <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={() => deleteFile(item)}>
+                    <img className='psdk-utility-card-action-svg-icon' src={deleteIcon} />
+                  </button>
+                )}
+                {!item.ID && (
+                  <div>
+                    <IconButton
+                      id='setting-button'
+                      aria-controls={open ? 'file-menu' : undefined}
+                      aria-expanded={open ? 'true' : undefined}
+                      aria-haspopup='true'
+                      onClick={handleClick}
+                    >
+                      <MoreVertIcon />
+                    </IconButton>
+                    <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+                      <MenuItem
+                        style={{ fontSize: '14px' }}
+                        key='download'
+                        onClick={() => downloadFile(item.responseProps ? item.responseProps : {})}
+                      >
+                        Download
+                      </MenuItem>
+                      <MenuItem style={{ fontSize: '14px' }} key='delete' onClick={() => deleteFile(item)}>
+                        Delete
+                      </MenuItem>
+                    </Menu>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+
+  return (
+    <div className='file-upload-container'>
+      <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
+      {((files.length === 0 && allowMultiple !== 'true') || allowMultiple === 'true') && <section>{content}</section>}
+      {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : ''}
+      {files && files.length > 0 && <section>{fileDisplay}</section>}
+    </div>
+  );
+}

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

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

package/tests/assets/sdk-r/components/create/override-sdk/widget/CaseHistory/CaseHistory.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useRef, useState } from 'react';
+import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import isDeepEqual from 'fast-deep-equal/react';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface CaseHistoryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver',
+      backgroundColor: theme.palette.text.disabled,
+      color: theme.palette.getContrastText(theme.palette.text.disabled)
+    },
+    body: {
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver'
+      // fontSize: 14,
+    }
+  })
+)(TableCell);
+
+export default function CaseHistory(props: CaseHistoryProps) {
+  const { getPConnect } = props;
+  const thePConn = getPConnect();
+  // let waitingForData = true;
+
+  const displayedColumns = [
+    {
+      label: thePConn.getLocalizedValue('Date', '', ''),
+      type: 'DateTime',
+      fieldName: 'pxTimeCreated'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Description', '', ''),
+      type: 'TextInput',
+      fieldName: 'pyMessageKey'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Performed by', '', ''),
+      type: 'TextInput',
+      fieldName: 'pyPerformer'
+    } // 2nd and 3rd args empty string until typedef marked correctly
+  ];
+
+  const rowData: any = useRef([]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [waitingForData, setWaitingForData] = useState<boolean>(true);
+
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
+  const dataViewName = 'D_pyWorkHistory';
+  const context = thePConn.getContextName();
+
+  function computeRowData(rows: Object[]): void {
+    const theRowData: Object[] = [];
+
+    rows.forEach((row: any, rowIndex: number) => {
+      // Now, for each property in the index of row properties (displayedColumns), add an object
+      //  to a new array of values
+      const rowDisplayValues: any = [];
+
+      displayedColumns.forEach((column: any, rowValIndex) => {
+        const theType = column.type;
+        const theFieldName = column.fieldName;
+        const theValue =
+          theType === 'Date' || theType === 'DateTime' ? Utils.generateDateTime(row[theFieldName], 'DateTime-Short') : row[theFieldName];
+        rowDisplayValues[rowValIndex] = theValue;
+      });
+
+      theRowData[rowIndex] = rowDisplayValues;
+    });
+
+    if (!isDeepEqual(theRowData, rowData.current)) {
+      // Only update rowData.current when it actually changes (to prevent infinite loop)
+      rowData.current = theRowData;
+    }
+  }
+
+  // Get the case history data when component mounted/initialized
+  useEffect(() => {
+    let bCallSetWaitingForData = true;
+
+    const historyData = PCore.getDataApiUtils().getData(
+      dataViewName,
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
+      context
+    ) as Promise<any>;
+
+    historyData.then((historyJSON: any) => {
+      const tableDataResults = historyJSON.data.data;
+
+      // compute the rowData using the tableDataResults
+      computeRowData(tableDataResults);
+
+      // At this point, if we have data ready to render and haven't been asked
+      //  to NOT call setWaitingForData, we can stop progress indicator
+      if (bCallSetWaitingForData) {
+        setWaitingForData(false);
+      }
+    });
+
+    return () => {
+      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+      // The useEffect closure lets us have access to the bCallSetWaitingForData
+      //  variable inside the useEffect and inside the "then" clause of the
+      //  historyData promise
+      //  So, if this cleanup code gets run before the promise .then is called,
+      //  we can avoid calling the useState setter which would otherwise show a warning
+      bCallSetWaitingForData = false;
+    };
+  }, []);
+
+  function getTableHeader() {
+    const theRowKey = 'CaseHistory.TableHeader';
+
+    const theHeaderCells: any[] = displayedColumns.map((headerCol, index) => {
+      const theCellKey = `${theRowKey}.${index}`;
+      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>;
+    });
+
+    return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
+  }
+
+  function getTableData() {
+    const theDataRows: any[] = [];
+
+    // Note: using rowData.current since we're using useRef as a mutatable
+    //  value that's only updated when it changes.
+    if (rowData.current.length > 0) {
+      rowData.current.forEach((dataRow: Object[], index) => {
+        // using dataRow[0]-dataRow[1] as the array key since it's a unique value
+        const theKey = `CaseHistory-${index}`;
+        theDataRows.push(
+          <TableRow key={theKey}>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : '---'}</StyledTableCell>
+          </TableRow>
+        );
+      });
+    }
+
+    return theDataRows;
+  }
+
+  return (
+    <div id='CaseHistory'>
+      <TableContainer>
+        <Table>
+          <TableHead>{getTableHeader()}</TableHead>
+          <TableBody>{getTableData()}</TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/CaseHistory/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "CaseHistory",
+    "name": "CaseHistory",
+    "label": "Case history",
+    "description": "Case history widget",
+    "type": "Widget",
+    "subtype": "CASE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/CaseHistory/index.tsx

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