@pega/react-sdk-overrides 24.2.11 → 25.1.11

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -1,13 +1,11 @@
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import { Link } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-/* although this is called the SemanticLink component, we are not yet displaying as a
-SemanticLink in SDK and only showing the value as a read only text field. */
+import semanticUtils from './utils';
 
+// eslint-disable-next-line
 const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
@@ -41,36 +39,170 @@ const useStyles = makeStyles(theme => ({
 
 interface SemanticLinkProps extends PConnFieldProps {
   // If any, enter additional props that only exist on SemanticLink here
-  // from previous PropTypes
   text: string;
+  resourcePayload: any;
+  resourceParams: any;
+  previewKey: string | null;
+  onClick: (event: any) => void;
+  testId: string;
+  referenceType: string | null;
+  dataRelationshipContext: string | null;
+  contextPage: any;
 }
 
 export default function SemanticLink(props: SemanticLinkProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldValueList = getComponentFromMap('FieldValueList');
+  const {
+    text,
+    resourcePayload = {},
+    resourceParams = {},
+    getPConnect,
+    previewKey,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onClick,
+    testId = '',
+    referenceType,
+    dataRelationshipContext = null,
+    contextPage,
+    ...restProps
+  } = props;
+  const { ACTION_OPENWORKBYHANDLE, ACTION_SHOWDATA }: any = PCore.getSemanticUrlUtils().getActions();
+  const pConnect = getPConnect();
+  const dataResourcePayLoad = resourcePayload?.resourceType === 'DATA' ? resourcePayload : null;
 
-  const { text, displayMode, label, hideLabel } = props;
-  const classes = useStyles();
+  const {
+    RESOURCE_TYPES: { DATA },
+    WORKCLASS,
+    CASE_INFO: { CASE_INFO_CLASSID }
+  } = PCore.getConstants();
 
-  if (displayMode === 'DISPLAY_ONLY' || (!displayMode && label !== undefined)) {
-    const value = text || '---';
-    return (
-      <Grid container spacing={1} style={{ padding: '4px 0px' }} id='semantic-link-grid'>
-        <Grid item xs={6}>
-          <Typography variant='body2' component='span' className={`${classes.fieldLabel} ${classes.fieldMargin}`}>
-            {label}
-          </Typography>
-        </Grid>
-        <Grid item xs={6}>
-          <Typography variant='body2' component='span' className={classes.fieldValue}>
-            {value}
-          </Typography>
-        </Grid>
-      </Grid>
+  let linkURL = '';
+  let payload = {};
+  let dataViewName;
+  let linkComponentProps = {
+    href: linkURL
+  };
+  if (text) {
+    (linkComponentProps as any).href = linkURL;
+  }
+  let isData = false;
+  const shouldTreatAsDataReference = !previewKey && resourcePayload.caseClassName;
+  if (contextPage?.classID) {
+    resourcePayload.caseClassName = contextPage.classID;
+  }
+  /* TODO : In case of duplicate search case the classID is Work- need to set it to
+  the current case class ID */
+  if (resourcePayload.caseClassName === WORKCLASS) {
+    resourcePayload.caseClassName = pConnect.getValue(CASE_INFO_CLASSID);
+  }
+
+  function showDataAction() {
+    if (dataResourcePayLoad && dataResourcePayLoad.resourceType === 'DATA') {
+      const { content } = dataResourcePayLoad;
+      const lookUpDataPageInfo = PCore.getDataTypeUtils().getLookUpDataPageInfo(dataResourcePayLoad?.className);
+      const lookUpDataPage = PCore.getDataTypeUtils().getLookUpDataPage(dataResourcePayLoad?.className);
+      if (lookUpDataPageInfo) {
+        const { parameters }: any = lookUpDataPageInfo;
+        payload = Object.keys(parameters).reduce((acc, param) => {
+          const paramValue = parameters[param];
+          return {
+            ...acc,
+            [param]: PCore.getAnnotationUtils().isProperty(paramValue) ? content[PCore.getAnnotationUtils().getPropertyName(paramValue)] : paramValue
+          };
+        }, {});
+      }
+      getPConnect()
+        .getActionsApi()
+        .showData('pyDetails', lookUpDataPage, {
+          ...payload
+        });
+    }
+    if ((referenceType && referenceType.toUpperCase() === DATA) || shouldTreatAsDataReference) {
+      getPConnect()
+        .getActionsApi()
+        .showData('pyDetails', dataViewName, {
+          ...payload
+        });
+    }
+  }
+
+  function openLinkClick(e) {
+    if (!e.metaKey && !e.ctrlKey) {
+      e.preventDefault();
+      if (
+        (dataResourcePayLoad && dataResourcePayLoad.resourceType === 'DATA') ||
+        (referenceType && referenceType.toUpperCase() === DATA) ||
+        shouldTreatAsDataReference
+      ) {
+        showDataAction();
+      } else if (previewKey) {
+        getPConnect().getActionsApi().openWorkByHandle(previewKey, resourcePayload.caseClassName);
+      }
+    }
+  }
+
+  if ((referenceType && referenceType.toUpperCase() === DATA) || shouldTreatAsDataReference) {
+    try {
+      isData = true;
+      // @ts-expect-error
+      const dataRefContext = semanticUtils.getDataReferenceInfo(pConnect, dataRelationshipContext, contextPage);
+      dataViewName = dataRefContext.dataContext;
+      payload = dataRefContext.dataContextParameters as any;
+    } catch (error) {
+      console.log('Error in getting the data reference info', error);
+    }
+  } else if (resourcePayload && resourcePayload.resourceType === 'DATA') {
+    isData = true;
+    dataViewName = PCore.getDataTypeUtils().getLookUpDataPage(resourcePayload.className);
+    const lookUpDataPageInfo = PCore.getDataTypeUtils().getLookUpDataPageInfo(resourcePayload.className);
+    const { content } = resourcePayload;
+    if (lookUpDataPageInfo) {
+      const { parameters }: any = lookUpDataPageInfo;
+      payload = Object.keys(parameters).reduce((acc, param) => {
+        const paramValue = parameters[param];
+        return {
+          ...acc,
+          [param]: PCore.getAnnotationUtils().isProperty(paramValue) ? content[PCore.getAnnotationUtils().getPropertyName(paramValue)] : paramValue
+        };
+      }, {});
+    } else {
+      const keysInfo = PCore.getDataTypeUtils().getDataPageKeys(dataViewName) ?? [];
+      payload = keysInfo.reduce((acc, curr) => {
+        return {
+          ...acc,
+          [curr.keyName]: content[curr.isAlternateKeyStorage ? curr.linkedField : curr.keyName]
+        };
+      }, {});
+    }
+  }
+
+  if (isData && dataViewName && payload) {
+    linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(
+      ACTION_SHOWDATA,
+      { pageName: 'pyDetails', dataViewName },
+      {
+        ...payload
+      }
     );
+  } else {
+    // BUG-678282 fix to handle scenario when workID was not populated.
+    // Check renderParentLink in Caseview / CasePreview
+    resourceParams.objectID = resourceParams.workID === '' && typeof previewKey === 'string' ? previewKey.split(' ')[1] : resourceParams.workID;
+    if (previewKey) {
+      resourceParams.id = previewKey;
+    }
+    linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_OPENWORKBYHANDLE, resourcePayload, resourceParams);
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={text} variant='stacked' />;
+  if (text) {
+    linkComponentProps = {
+      ...linkComponentProps,
+      href: linkURL
+    };
   }
+
+  return (
+    <Link component='button' {...linkComponentProps} {...restProps} onClick={openLinkClick} data-testid={testId}>
+      {text || '--'}
+    </Link>
+  );
 }

package/lib/field/SemanticLink/utils.ts

@@ -32,7 +32,7 @@ function getDataReferenceInfo(pConnect, dataRelationshipContext) {
     dataContext = name;
     for (const [key, value] of Object.entries(parameters)) {
       const property =
-        // @ts-ignore - Property 'getLeafPropertyName' is private and only accessible within class 'AnnotationUtils'
+        // @ts-expect-error - Property 'getLeafPropertyName' is private and only accessible within class 'AnnotationUtils'
         dataRelationshipContext !== null ? annotationUtils.getPropertyName(value as string) : annotationUtils.getLeafPropertyName(value);
       payload[key] = pConnect.getValue(`.${property}`);
     }

package/lib/field/TextArea/TextArea.tsx

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 
 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';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextAreaProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -58,11 +58,7 @@ export default function TextArea(props: TextAreaProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -90,7 +86,9 @@ export default function TextArea(props: TextAreaProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+      slotProps={{
+        input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+      }}
     />
   );
 }

package/lib/field/TextContent/TextContent.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextContentProps extends PConnProps {
   // If any, enter additional props that only exist on TextContent here
@@ -38,7 +38,6 @@ export default function TextContent(props: TextContentProps) {
       break;
 
     default:
-      // eslint-disable-next-line no-console
       console.error(`TextContent got an expected displayAs prop: ${displayAs}`);
       break;
   }

package/lib/field/TextInput/TextInput.tsx

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 
 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';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextInputProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -59,11 +59,7 @@ export default function TextInput(props: TextInputProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -88,7 +84,9 @@ export default function TextInput(props: TextInputProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+      slotProps={{
+        input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+      }}
     />
   );
 }

package/lib/field/Time/Time.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 
 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';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Time here
@@ -32,11 +32,7 @@ export default function Time(props: TimeProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
@@ -75,7 +71,7 @@ export default function Time(props: TimeProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProp }
+          InputProps: { ...testProps }
         }
       }}
     />

package/lib/field/URL/URL.tsx

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 
 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';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface URLComponentProps extends PConnFieldProps {
   // If any, enter additional props that only exist on URLComponent here
@@ -56,11 +56,7 @@ export default function URLComponent(props: URLComponentProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = event => {
     setInputValue(event?.target?.value);
@@ -85,7 +81,9 @@ export default function URLComponent(props: URLComponentProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ inputProps: { ...testProp } }}
+      slotProps={{
+        input: { inputProps: { ...testProps } }
+      }}
     />
   );
 }

package/lib/field/UserReference/UserReference.tsx

@@ -2,9 +2,8 @@ import { memo, useEffect, useState } from 'react';
 import { Typography } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 const DROPDOWN_LIST = 'Drop-down list';
@@ -34,6 +33,7 @@ const UserReference = (props: UserReferenceProps) => {
   // Get emitted components from map (so we can get any override that may exist)
   const AutoComplete = getComponentFromMap('AutoComplete');
   const Dropdown = getComponentFromMap('Dropdown');
+  const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     label = '',
@@ -89,7 +89,6 @@ const UserReference = (props: UserReferenceProps) => {
           setDropDownDataSource(ddDataSource);
         })
         .catch(err => {
-          // eslint-disable-next-line no-console
           console.error(err);
         });
     }

package/lib/helpers/attachmentShared.ts

@@ -0,0 +1,6 @@
+const megabyteSize = 1048576;
+
+export const validateMaxSize = (fileObj: Record<string, number>, maxSizeInMB: string) => {
+  const fileSize = (fileObj.size / megabyteSize).toFixed(2);
+  return parseFloat(fileSize) < parseFloat(maxSizeInMB);
+};

package/lib/helpers/common-utils.ts

@@ -1,4 +1,4 @@
-export function isEmptyObject(obj: Object): boolean {
+export function isEmptyObject(obj: object): boolean {
   return Object.keys(obj).length === 0;
 }
 
@@ -9,14 +9,13 @@ export function isEmptyObject(obj: Object): boolean {
  * @returns The localized string or the key itself if no translation is found
  */
 export function getGenericFieldsLocalizedValue(path: string, key: string): string {
-  const GENERIC_BUNDLE_KEY = PCore.getLocaleUtils().GENERIC_BUNDLE_KEY;
-  const localeStore = PCore.getLocaleUtils().localeStore[GENERIC_BUNDLE_KEY];
+  const localeStore = PCore.getLocaleUtils().localeStore;
 
   if (!localeStore) return key;
 
   // Split the path and traverse the object
   const pathParts = path.split('.');
-  let currentObj = localeStore;
+  let currentObj: any = localeStore;
 
   for (const part of pathParts) {
     if (!currentObj[part]) return key;

package/lib/helpers/data_page.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const getDataPage = (dataPageName, parameters, context) => {
   let dataViewParams;
   if (parameters) {

package/lib/helpers/field-group-utils.ts

@@ -1,4 +1,4 @@
-import { createElement, ReactElement } from 'react';
+import { createElement, type ReactElement } from 'react';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 

package/lib/helpers/formatters/Currency.ts

@@ -1,10 +1,14 @@
 import { getLocale } from './common';
 import CurrencyMap from './CurrencyMap';
 
+const isValidValue = value => {
+  return value !== null && value !== undefined && value !== '';
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function NumberFormatter(value, { locale = 'en-US', decPlaces = 2, style = '', currency = 'USD' } = {}): string {
   const currentLocale: string | undefined = getLocale(locale);
-  if (value !== null && value !== undefined) {
+  if (isValidValue(value)) {
     return Number(value).toLocaleString(currentLocale, { minimumFractionDigits: decPlaces, maximumFractionDigits: decPlaces });
   }
   return value;
@@ -16,7 +20,7 @@ function CurrencyFormatter(
 ): string {
   const currentLocale: string | undefined = getLocale(locale);
   let formattedValue: string = value;
-  if (value !== null && value !== undefined && value !== '') {
+  if (isValidValue(value)) {
     formattedValue = NumberFormatter(value, { locale: currentLocale, decPlaces, style, currency });
 
     // For currency other than EUR, we need to determine the country code from currency code
@@ -55,7 +59,7 @@ function CurrencyFormatter(
 
 function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US' } = {}): string {
   let formattedValue: string = value;
-  if (value !== null && value !== undefined) {
+  if (isValidValue(value)) {
     formattedValue = NumberFormatter(value, { locale });
     return suffix ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
   }
@@ -68,5 +72,6 @@ export default {
   Decimal: (value, options) => NumberFormatter(value, options),
   'Decimal-Auto': (value, options) => NumberFormatter(value, { ...options, decPlaces: Number.isInteger(value) ? 0 : 2 }),
   Integer: (value, options) => NumberFormatter(value, { ...options, decPlaces: 0 }),
-  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' })
+  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' }),
+  isValidValue
 };

package/lib/helpers/formatters/CurrencyMap.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-template-curly-in-string */
-
 type CurrencyMapType = {
   name: string;
   symbolFormat: string;

package/lib/helpers/object-utils.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the value of the key from objectInfo/caseInfo
+ * Added fallback to retrieve from caseInfo if objectInfo not present.
+ * @param pConnect
+ * @param key
+ * @returns the value of key
+ */
+export const getResolvedConstantValue = (pConnect: typeof PConnect, key: string) => {
+  return pConnect.getValue(PCore.getResolvedConstantValue(key)) || pConnect.getValue(key);
+};

package/lib/helpers/simpleTableHelpers.ts

@@ -89,6 +89,51 @@ export const getApiContext = (processedData, pConnect, reorderCB) => {
   };
 };
 
+const PRIMARY_FIELDS = 'pyPrimaryFields';
+const SUPPORTED_FIELD_TYPES = [
+  'Address',
+  'TextArea',
+  'TextInput',
+  'Phone',
+  'Email',
+  'Time',
+  'URL',
+  'Percentage',
+  'Integer',
+  'Decimal',
+  'Date',
+  'DateTime',
+  'Currency',
+  'Checkbox',
+  'Dropdown',
+  'AutoComplete',
+  'UserReference',
+  'RichText'
+];
+
+export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
+  let primaryFields: any = [];
+  let configFields: any = [];
+
+  if (primaryFieldsViewIndex > -1) {
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    if (Array.isArray(primaryFieldVMD)) {
+      primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    } else if (primaryFieldVMD?.classID === contextClass) {
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    }
+
+    if (primaryFields.length) {
+      primaryFields = primaryFields.filter(primaryField => SUPPORTED_FIELD_TYPES.includes(primaryField.type));
+    }
+  }
+
+  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  // filter duplicate fields after combining raw fields and primary fields
+  return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
+};
+
 export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, name, propertyLabel, isDataObject, parameters) => {
   return {
     name,
@@ -126,11 +171,80 @@ export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, nam
   };
 };
 
-export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+export function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+/**
+ * [getFieldLabel]
+ * Description - A utility that returns resolved field label for "@FL" annotation i.e from data model.
+ * @param {Object} fieldConfig
+ * @returns {string} resolved label string
+ *
+ * example:
+ * fieldConfig = {label: "@FL .pyID", classID: "TestCase-Work"};
+ * return "Case ID"
+ */
+export function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+  return fieldLabel;
+}
+
+export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
+  const labelsOfFields: any = [];
+  const { columnsRawConfig = [] } = options;
+  fields.forEach((field, idx) => {
+    const rawColumnConfig = columnsRawConfig[idx]?.config;
+    if (field.config.value === PRIMARY_FIELDS) {
+      labelsOfFields.push('');
+    } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
+      labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
+    } else {
+      labelsOfFields.push(field.config.label || field.config.caption);
+    }
+  });
+
+  if (primaryFieldsViewIndex > -1) {
+    const totalPrimaryFieldsColumns = configFields.length - fields.length + 1;
+    if (totalPrimaryFieldsColumns) {
+      const primaryFieldLabels: any = [];
+      for (let i = primaryFieldsViewIndex; i < primaryFieldsViewIndex + totalPrimaryFieldsColumns; i += 1) {
+        let label = configFields[i].config?.label;
+        if (isFLProperty(label)) {
+          label = getFieldLabel(configFields[i].config);
+        } else if (label.startsWith('@')) {
+          label = label.substring(3);
+        }
+        if (pConnect) {
+          label = pConnect.getLocalizedValue(label);
+        }
+        primaryFieldLabels.push(label);
+      }
+      labelsOfFields.splice(primaryFieldsViewIndex, 1, ...primaryFieldLabels);
+    } else {
+      labelsOfFields.splice(primaryFieldsViewIndex, 1);
+    }
+  }
+  return labelsOfFields;
+};
+
+export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+  const { primaryFieldsViewIndex, fields } = options;
+
+  // get resolved field labels for primary fields raw config included in configFields
+  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
+  });
+
   const fieldDefs = configFields.map((field, index) => {
     return {
       type: 'text',
-      label: fields[index].config.label || fields[index].config.caption,
+      label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
       name: field.config.value.substr(4),
@@ -213,7 +327,7 @@ export function createPConnect(contextName, referenceList, pageReference): any {
   };
 
   // create PConnect object
-  const config = { meta: {}, options };
+  const config: any = { meta: {}, options };
   const { getPConnect } = PCore.createPConnect(config);
 
   return getPConnect();
@@ -231,11 +345,10 @@ export const filterData = filterByColumns => {
           case 'Date':
           case 'DateTime':
           case 'Time':
-            value = (item[filterObj.ref] !== null ?? item[filterObj.ref] !== '') ? Utils.getSeconds(item[filterObj.ref]) : null;
+            value = item[filterObj.ref] !== null || item[filterObj.ref] !== '' ? Utils.getSeconds(item[filterObj.ref]) : null;
             filterValue =
               filterObj.containsFilterValue !== null && filterObj.containsFilterValue !== '' ? Utils.getSeconds(filterObj.containsFilterValue) : null;
 
-            // eslint-disable-next-line sonarjs/no-nested-switch
             switch (filterObj.containsFilter) {
               case 'notequal':
                 // becasue filterValue is in minutes, need to have a range of less than 60 secons
@@ -302,7 +415,6 @@ export const filterData = filterByColumns => {
             value = item[filterObj.ref].toLowerCase();
             filterValue = filterObj.containsFilterValue.toLowerCase();
 
-            // eslint-disable-next-line sonarjs/no-nested-switch
             switch (filterObj.containsFilter) {
               case 'contains':
                 if (value.indexOf(filterValue) < 0) {