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

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Assignment/Assignment.tsx

@@ -0,0 +1,335 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface AssignmentProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  itemKey: string;
+  isInModal: boolean;
+  banners: any[];
+  // eslint-disable-next-line react/no-unused-prop-types
+  actionButtons: any[];
+}
+
+export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AssignmentCard = getComponentFromMap('AssignmentCard');
+  const MultiStep = getComponentFromMap('MultiStep');
+
+  const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
+  const thePConn = getPConnect();
+
+  const [bHasNavigation, setHasNavigation] = useState(false);
+  const [actionButtons, setActionButtons] = useState([]);
+  const [bIsVertical, setIsVertical] = useState(false);
+  const [arCurrentStepIndicies, setArCurrentStepIndicies] = useState<any[]>([]);
+  const [arNavigationSteps, setArNavigationSteps] = useState<any[]>([]);
+
+  const actionsAPI = thePConn.getActionsApi();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
+  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
+
+  // store off bound functions to above pointers
+  const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
+  const navigateToStep = actionsAPI.navigateToStep.bind(actionsAPI);
+  const cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
+  const saveAssignment = actionsAPI.saveAssignment?.bind(actionsAPI);
+  const cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+  // const showPage = actionsAPI.showPage.bind(actionsAPI);
+
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  function findCurrentIndicies(arStepperSteps: any[], arIndicies: number[], depth: number): number[] {
+    let count = 0;
+    arStepperSteps.forEach(step => {
+      if (step.visited_status === 'current') {
+        arIndicies[depth] = count;
+
+        // add in
+        step.step_status = '';
+      } else if (step.visited_status === 'success') {
+        count += 1;
+        step.step_status = 'completed';
+      } else {
+        count += 1;
+        step.step_status = '';
+      }
+
+      if (step.steps) {
+        arIndicies = findCurrentIndicies(step.steps, arIndicies, depth + 1);
+      }
+    });
+
+    return arIndicies;
+  }
+
+  useEffect(() => {
+    if (children) {
+      const firstChild = Array.isArray(children) ? children[0] : children;
+      const oWorkItem = firstChild.props.getPConnect();
+      const oWorkData = oWorkItem.getDataObject();
+      const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
+
+      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
+        const oCaseInfo = oData.caseInfo;
+
+        if (oCaseInfo && oCaseInfo.actionButtons) {
+          setActionButtons(oCaseInfo.actionButtons);
+        }
+
+        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
+          setHasNavigation(true);
+
+          if (
+            (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') ||
+            oCaseInfo?.navigation?.steps?.length === 1
+          ) {
+            setHasNavigation(false);
+          } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
+            setIsVertical(true);
+          } else {
+            setIsVertical(false);
+          }
+          const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
+          steps.forEach(step => {
+            if (step.name) {
+              step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+            }
+          });
+          setArNavigationSteps(steps);
+          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
+        }
+      }
+    }
+  }, [children]);
+
+  function showToast(message: string) {
+    const theMessage = `Assignment: ${message}`;
+    // eslint-disable-next-line no-console
+    console.error(theMessage);
+    setSnackbarMessage(message);
+    setShowSnackbar(true);
+  }
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
+  function onSaveActionSuccess(data) {
+    actionsAPI.cancelAssignment(itemKey).then(() => {
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
+    });
+  }
+
+  function buttonPress(sAction: string, sButtonType: string) {
+    if (sButtonType === 'secondary') {
+      switch (sAction) {
+        case 'navigateToStep': {
+          const navigatePromise = navigateToStep('previous', itemKey);
+
+          navigatePromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Navigation failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        case 'saveAssignment': {
+          const caseID = thePConn.getCaseInfo().getKey();
+          const assignmentID = thePConn.getCaseInfo().getAssignmentID();
+          const savePromise = saveAssignment(itemKey);
+
+          savePromise
+            .then(() => {
+              const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
+              onSaveActionSuccess({ caseType, caseID, assignmentID });
+            })
+            .catch(() => {
+              showToast(`${localizedVal('Save failed', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        case 'cancelAssignment': {
+          // check if create stage (modal)
+          const { PUB_SUB_EVENTS } = PCore.getConstants();
+          const { publish } = PCore.getPubSubUtils();
+          // @ts-ignore - Property 'isAssignmentInCreateStage' is private and only accessible within class 'CaseInfo'
+          const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
+          const isLocalAction =
+            // @ts-ignore - Property 'isLocalAction' is private and only accessible within class 'CaseInfo'.
+            thePConn.getCaseInfo().isLocalAction() ||
+            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
+          if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
+            const cancelPromise = cancelCreateStageAssignment(itemKey);
+
+            cancelPromise
+              .then(data => {
+                publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+              })
+              .catch(() => {
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
+              });
+          } else {
+            const cancelPromise = cancelAssignment(itemKey);
+
+            cancelPromise
+              .then(data => {
+                publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+              })
+              .catch(() => {
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
+              });
+          }
+          break;
+        }
+
+        default:
+          break;
+      }
+    } else if (sButtonType === 'primary') {
+      // eslint-disable-next-line sonarjs/no-small-switch
+      switch (sAction) {
+        case 'finishAssignment': {
+          const finishPromise = finishAssignment(itemKey);
+
+          finishPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Submit failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
+        default:
+          break;
+      }
+    }
+  }
+
+  function getRefreshProps(refreshConditions) {
+    // refreshConditions cuurently supports only "Changes" event
+    if (!refreshConditions) {
+      return [];
+    }
+    return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+  }
+
+  // expected format of refreshConditions : [{field: ".Name", event: "Changes"}]
+  // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
+  const refreshConditions = thePConn.getCaseInfo()?.getActionRefreshConditions();
+  const context = thePConn.getContextName();
+  const pageReference = thePConn.getPageReference();
+
+  // refresh api de-registration
+  PCore.getRefreshManager().deRegisterForRefresh(context);
+
+  // refresh api registration
+  const refreshProps = getRefreshProps(refreshConditions);
+  const caseKey = thePConn.getCaseInfo().getKey();
+  const refreshOptions = {
+    autoDetectRefresh: true,
+    preserveClientChanges: false
+  };
+  if (refreshProps.length > 0) {
+    refreshProps.forEach(prop => {
+      PCore.getRefreshManager().registerForRefresh(
+        'PROP_CHANGE',
+        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, null, pageReference, {
+          ...refreshOptions,
+          refreshFor: prop[0]
+        }),
+        `${pageReference}.${prop[1]}`,
+        `${context}/${pageReference}`,
+        context
+      );
+    });
+  }
+
+  return (
+    <div id='Assignment'>
+      {banners}
+      {bHasNavigation ? (
+        <>
+          <MultiStep
+            getPConnect={getPConnect}
+            itemKey={itemKey}
+            actionButtons={actionButtons}
+            onButtonPress={buttonPress}
+            bIsVertical={bIsVertical}
+            arCurrentStepIndicies={arCurrentStepIndicies}
+            arNavigationSteps={arNavigationSteps}
+          >
+            {children}
+          </MultiStep>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </>
+      ) : (
+        <>
+          <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+            {children}
+          </AssignmentCard>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+// From WC SDK
+// const aHtml = html`
+// ${this.bHasNavigation?
+//   html`
+//     <div class="psdk-stepper">
+//     <multi-step-component .pConn=${this.pConn} .arChildren=${this.arChildren} itemKey=${this.itemKey}
+//         .arMainButtons=${this.arMainButtons} .arSecondaryButtons=${this.arSecondaryButtons}
+//         .bIsVertical=${this.bIsVertical} .arCurrentStepIndicies=${this.arCurrentStepIndicies}
+//         .arNavigationSteps=${this.arNavigationSteps}
+//         @MultiStepActionButtonClick="${this._onActionButtonClick}">
+//     </multi-step-component>
+//     <lit-toast></lit-toast>
+//     </div>`
+//     :
+//   html`
+//     <div>
+//         <assignment-card-component .pConn=${this.pConn} .arChildren=${this.arChildren} itemKey=${this.itemKey}
+//           .arMainButtons=${this.arMainButtons} .arSecondaryButtons=${this.arSecondaryButtons}
+//           @AssignmentActionButtonClick="${this._onActionButtonClick}">
+//         </assignment-card-component>
+//         <lit-toast></lit-toast>
+//     </div>`}
+// `;

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Assignment/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/AssignmentCard/AssignmentCard.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+interface AssignmentCardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  actionButtons: any;
+  onButtonPress: any;
+}
+
+export default function AssignmentCard(props: PropsWithChildren<AssignmentCardProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ActionButtons = getComponentFromMap('ActionButtons');
+
+  const { children, actionButtons, onButtonPress } = props;
+
+  const [arMainButtons, setArMainButtons] = useState([]);
+  const [arSecondaryButtons, setArSecondaryButtons] = useState([]);
+
+  useEffect(() => {
+    if (actionButtons) {
+      setArMainButtons(actionButtons.main);
+      setArSecondaryButtons(actionButtons.secondary);
+    }
+  }, [actionButtons]);
+
+  function buttonPress(sAction, sType) {
+    onButtonPress(sAction, sType);
+  }
+
+  return (
+    <>
+      {children}
+      {arMainButtons && arSecondaryButtons && (
+        <ActionButtons arMainButtons={arMainButtons} arSecondaryButtons={arSecondaryButtons} onButtonPress={buttonPress} />
+      )}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/AssignmentCard/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/DashboardFilter/DashboardFilter.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable operator-assignment */
+import { forwardRef, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { TextField } from '@material-ui/core';
+import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'throttle-debounce';
+import DatePicker from 'react-datepicker';
+
+import { createFilter, combineFilters, getFormattedDate, getFilterExpression } from './filterUtils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+interface DashboardFilterProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  name: string;
+  filterProp: string;
+  type?: string;
+  metadata?: any;
+}
+
+export default function DashboardFilter(props: PropsWithChildren<DashboardFilterProps>) {
+  const { children = [], name, filterProp, type = '', metadata = null, getPConnect } = props;
+  const { current: filterId } = useRef(uuidv4());
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  useEffect(() => {
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+      () => {
+        if (type === 'Dropdown') {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, '');
+        } else if (type === 'RadioButtons') {
+          const reference = getPConnect().getFullReference() + filterProp;
+          const radList = document.getElementsByName(reference);
+          for (let i = 0; i < radList.length; i = i + 1) {
+            if ((radList[i] as HTMLInputElement).value === '') {
+              (radList[i] as HTMLInputElement).checked = true;
+            } else {
+              (radList[i] as HTMLInputElement).checked = false;
+            }
+          }
+        } else {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, undefined);
+          if (type === 'DateTime') {
+            setStartDate(null);
+            setEndDate(null);
+          }
+        }
+      },
+      filterId,
+      false,
+      getPConnect().getContextName()
+    );
+    return function cleanup() {
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+        filterId,
+        getPConnect().getContextName()
+      );
+    };
+  });
+
+  const fireFilterChange = filterValue => {
+    const filterData = {
+      filterId,
+      filterExpression: getFilterExpression(filterValue, name, metadata)
+    };
+
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
+  };
+
+  const fireFilterChangeDebounced = debounce(500, fireFilterChange);
+  const dateRangeChangeHandler = value => {
+    const { start, end } = value;
+
+    let startDate = getFormattedDate(start);
+    let endDate = getFormattedDate(end);
+
+    if (startDate && endDate) {
+      startDate = `${startDate}T00:00:00`;
+      endDate = `${endDate}T00:00:00`;
+      const startFilter = createFilter(startDate, name, 'GT');
+      const endFilter = createFilter(endDate, name, 'LT');
+
+      const filterData = {
+        filterId,
+        filterExpression: combineFilters([startFilter, endFilter], null)
+      };
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
+    }
+  };
+
+  const renderAutoComplete = () => {
+    metadata.config.onRecordChange = e => {
+      fireFilterChange(e.id);
+    };
+    return getPConnect().createComponent(metadata, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+  };
+
+  const onChange = dates => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    dateRangeChangeHandler({ start, end });
+  };
+
+  type TextProps = React.HTMLProps<HTMLInputElement>;
+
+  const label = metadata.config.label.substring(3);
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CustomDateInput = forwardRef<HTMLInputElement, TextProps>(({ value, onClick }, ref: any) => (
+    <TextField label={label} variant='outlined' fullWidth value={value} size='small' onClick={onClick} ref={ref}>
+      {value}
+    </TextField>
+  ));
+
+  return (
+    <>
+      {type === 'DateTime' && (
+        <DatePicker
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          enableTabLoop={false}
+          customInput={<CustomDateInput />}
+        />
+      )}
+      {type === 'AutoComplete' && (
+        <span
+          onChange={event => {
+            if (event && event.target && !(event.target as HTMLInputElement).value) {
+              fireFilterChange('ALL');
+            }
+          }}
+        >
+          {renderAutoComplete()}
+        </span>
+      )}
+      {children && (
+        <span
+          onChange={event => {
+            fireFilterChangeDebounced((event.target as HTMLInputElement).value);
+          }}
+        >
+          {children}
+        </span>
+      )}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/DashboardFilter/filterUtils.tsx

@@ -0,0 +1,160 @@
+/* eslint-disable prefer-template */
+/** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
+
+import { Grid, Link } from '@material-ui/core';
+
+import DashboardFilter from './DashboardFilter';
+
+export const createFilter = (value, fieldId, comparator = 'EQ') => {
+  return {
+    condition: {
+      lhs: {
+        field: fieldId
+      },
+      comparator,
+      rhs: {
+        value
+      }
+    }
+  };
+};
+
+export const combineFilters = (filterList, existingFilters) => {
+  if (filterList && filterList.length) {
+    // Need to combine them
+    if (existingFilters) {
+      return { AND: [existingFilters, ...filterList] };
+    }
+
+    // No existing, just return the one(s) from the list
+    if (filterList.length > 1) {
+      return { AND: [...filterList] };
+    }
+
+    return filterList[0];
+  }
+
+  // No filter list,
+  return existingFilters;
+};
+
+export const createFilterComponent = (getPConnect, filterMeta, index) => {
+  const name = filterMeta.config.value.substring(4);
+  let cleanedName = name;
+  if (name.indexOf('.') !== -1) {
+    cleanedName = name.substring(name.indexOf('.') + 1);
+  }
+  let propInfo: any = PCore.getMetadataUtils().getPropertyMetadata(cleanedName, filterMeta.config.ruleClass);
+  if (!propInfo) {
+    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+    propInfo = PCore.getMetadataUtils().getPropertyMetadata(cleanedName);
+  }
+  const { type: propertyType } = propInfo || { type: 'Text' };
+  const isNumber = propertyType && (propertyType === 'Decimal' || propertyType === 'Integer');
+  filterMeta.isNumber = isNumber;
+  const { filterType, datasource } = filterMeta.config;
+  const type = filterType || filterMeta.type;
+  const filterProp = `.pyDashboardFilter${index}`;
+  if (type === 'DateTime') {
+    return <DashboardFilter key={name} getPConnect={getPConnect} name={name} filterProp={filterProp} metadata={filterMeta} type={filterMeta.type} />;
+  }
+  if (datasource && datasource.fields) {
+    datasource.fields.key = datasource.fields.value;
+  }
+  if (filterMeta.config.listType === 'associated' && propInfo && propInfo.datasource) {
+    filterMeta.config.datasource = propInfo.datasource.records;
+  }
+  filterMeta.config.value = `@P ${filterProp}`;
+  filterMeta.type = filterMeta.config.displayAs || type;
+  filterMeta.config.placeholder = 'ALL';
+  return (
+    <DashboardFilter key={name} getPConnect={getPConnect} name={name} filterProp={filterProp} metadata={filterMeta} type={filterMeta.type}>
+      {getPConnect().createComponent(filterMeta, '', '', {})}
+    </DashboardFilter>
+  );
+};
+
+export const buildFilterComponents = (getPConnect, allFilters) => {
+  const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
+  if (filterComponents && filterComponents.length > 0) {
+    filterComponents.push(
+      <Grid>
+        <Link
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            // @ts-ignore - second parameter “payload” for publish method should be optional
+            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
+          }}
+        >
+          Clear All
+        </Link>
+      </Grid>
+    );
+  }
+  return filterComponents;
+};
+
+export const convertDateToGMT = value => {
+  const { valueAsISOString: date } = value;
+  return date ? date.substring(0, date.indexOf('T')) : date;
+};
+
+export const getFilterExpression = (filterValue, name, metadata) => {
+  if (filterValue === '') {
+    return null;
+  }
+  let comparator = 'EQ';
+  if (metadata.type === 'TextInput' && !metadata.isNumber) {
+    comparator = 'CONTAINS';
+  }
+
+  if (metadata.config.filterType && metadata.config.filterType === 'RelativeDates') {
+    const fieldSource = metadata.config.datasource.filter(source => source.key === filterValue)[0];
+    const relativeDateExpression = JSON.parse(fieldSource.json);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const fields = [
+      {
+        name: relativeDateExpression.condition.lhs.field,
+        type: 'DATE_TIME'
+      }
+    ];
+    return '';
+  }
+
+  return createFilter(filterValue, name, comparator);
+};
+
+/**
+ * Returns ConfigurableLayout mapped content. With pre-populated default layout configs.
+ * @returns {object[]} ConfigurableLayout content.
+ */
+export function getLayoutDataFromRegion(regionData) {
+  const defaultLayoutConfig = {
+    width: 'full',
+    fillAvailable: true,
+    minWidth: [300, 'px']
+  };
+
+  return regionData.props
+    ?.getPConnect()
+    ?.getChildren()
+    ?.map((item, index) => {
+      const itemPConnect = item?.getPConnect();
+
+      return {
+        id: itemPConnect?.getComponentName() ? `${itemPConnect.getComponentName()}--${index}` : `item--${index}`,
+        content: itemPConnect?.getComponent(),
+        layoutConfig: {
+          ...defaultLayoutConfig,
+          ...itemPConnect?.getConfigProps().layoutConfig
+        }
+      };
+    });
+}
+
+export const getFormattedDate = date => {
+  if (!date) {
+    return date;
+  }
+  return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
+};