@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/components/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -58,7 +58,7 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     openLocalAction(data.ID, {
       ...data,
       containerName: 'modal',
-      type: 'express'
+      type: 'express',
     });
     // after doing the action, close the menu...
     handleClose();
@@ -68,7 +68,7 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     const actionsAPI = thePConn.getActionsApi();
     const openProcessAction = actionsAPI.openProcessAction.bind(actionsAPI);
     openProcessAction(process.ID, {
-      ...process
+      ...process,
     })
       .then(() => {})
       .catch(() => {
@@ -77,28 +77,28 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     handleClose();
   }
 
-  availableActions.forEach(action => {
+  availableActions.forEach((action) => {
     arMenuItems.push(
       <MenuItem key={action.ID} onClick={() => _actionMenuActionsClick(action)}>
         {localizedVal(action.name, '', localeKey)}
-      </MenuItem>
+      </MenuItem>,
     );
   });
 
-  availableProcesses.forEach(process => {
+  availableProcesses.forEach((process) => {
     arMenuItems.push(
       <MenuItem key={process.ID} onClick={() => _actionMenuProcessClick(process)}>
         {localizedVal(process.name, '', localeKey)}
-      </MenuItem>
+      </MenuItem>,
     );
   });
 
   return (
     <>
-      <Button id='actions-menu' aria-controls='simple-menu' aria-haspopup='true' onClick={handleClick}>
+      <Button id="actions-menu" aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
         {localizedVal('Actions...', localeCategory)}
       </Button>
-      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
         {arMenuItems}
       </Menu>
       <Snackbar
@@ -107,8 +107,8 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />

package/templates/react-sdk-reference/src/components/template/Confirmation/Confirmation.tsx

@@ -2,7 +2,7 @@ import { type PropsWithChildren, useState } from 'react';
 import { Button, Card } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
-import { getToDoAssignments, getComponentFromRegistry } from '@pega/sdk-react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnProps } from '@pega/sdk-react';
 
 interface ConfirmationProps extends PConnProps {
@@ -26,9 +26,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function Confirmation(
-  props: PropsWithChildren<ConfirmationProps>,
-) {
+export default function Confirmation(props: PropsWithChildren<ConfirmationProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const ToDo = getComponentFromRegistry('Todo'); // NOTE: ConstellationJS Engine uses "Todo" and not "ToDo"!!!
   const Details = getComponentFromRegistry('Details');
@@ -41,29 +39,21 @@ export default function Confirmation(
   // Not using whatsNext at the moment, need to figure out the use of it
   // const whatsNext = datasource?.source;
   // const items = whatsNext.length > 0 ? whatsNext.map(item => item.label) : '';
-  const activeContainerItemID =
-    PCore.getContainerUtils().getActiveContainerItemName(
-      getPConnect().getTarget() || '',
-    );
-  const rootInfo = PCore.getContainerUtils().getContainerItemData(
-    getPConnect().getTarget(),
-    activeContainerItemID,
-  );
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget() || '');
+  const rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), activeContainerItemID);
   const onConfirmViewClose = () => {
     setShowConfirmView(false);
-    PCore.getPubSubUtils().publish(
-      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW,
-      rootInfo,
-    );
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo);
   };
   const todoProps = { ...props, renderTodoInConfirm: true };
+  // @ts-ignore
+  const { getToDoAssignments } = PCore.getSDKUtils().getSDKContainerUtils();
   const toDoList = getToDoAssignments(getPConnect());
   const detailProps = { ...props, showLabel: false };
-  const showDetails =
-    detailProps?.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
+  const showDetails = detailProps?.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
   return showConfirmView ? (
     <Card className={classes.root}>
-      <h2 id='confirm-label'>{props.showLabel ? props.label : ''}</h2>
+      <h2 id="confirm-label">{props.showLabel ? props.label : ''}</h2>
       {showDetails ? <Details {...detailProps} /> : undefined}
       {showTasks ? (
         toDoList && toDoList.length > 0 ? (
@@ -72,17 +62,13 @@ export default function Confirmation(
             datasource={{ source: toDoList }}
             getPConnect={getPConnect}
             type={CONSTS.TODO}
-            headerText='Open Tasks'
+            headerText="Open Tasks"
             isConfirm
           />
         ) : undefined
       ) : undefined}
       <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button
-          variant='contained'
-          color='primary'
-          onClick={onConfirmViewClose}
-        >
+        <Button variant="contained" color="primary" onClick={onConfirmViewClose}>
           Done
         </Button>
       </div>
@@ -94,7 +80,7 @@ export default function Confirmation(
         datasource={{ source: toDoList }}
         getPConnect={getPConnect}
         type={CONSTS.TODO}
-        headerText='Tasks'
+        headerText="Tasks"
         isConfirm
       />
     </Card>

package/templates/react-sdk-reference/src/components/template/DataReference/DataReference.tsx

@@ -1,10 +1,4 @@
-import React, {
-  type PropsWithChildren,
-  type ReactElement,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { type PropsWithChildren, type ReactElement, useEffect, useMemo, useState } from 'react';
 
 import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnProps } from '@pega/sdk-react';
@@ -38,16 +32,10 @@ interface DataReferenceProps extends PConnProps {
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
-export default function DataReference(
-  props: PropsWithChildren<DataReferenceProps>,
-) {
+export default function DataReference(props: PropsWithChildren<DataReferenceProps>) {
   // Get emitted components from map (so we can get any override that may exist)
-  const SingleReferenceReadonly = getComponentFromRegistry(
-    'SingleReferenceReadOnly',
-  );
-  const MultiReferenceReadonly = getComponentFromRegistry(
-    'MultiReferenceReadOnly',
-  );
+  const SingleReferenceReadonly = getComponentFromRegistry('SingleReferenceReadOnly');
+  const MultiReferenceReadonly = getComponentFromRegistry('MultiReferenceReadOnly');
   const SearchForm = getComponentFromRegistry('SearchForm');
   const {
     children,
@@ -80,22 +68,15 @@ export default function DataReference(
     propsToUse.label = '';
   }
   const rawViewMetadata: any = pConn.getRawMetadata();
-  const refFieldMetadata = pConn.getFieldMetadata(
-    rawViewMetadata.config?.authorContext,
-  );
+  const refFieldMetadata = pConn.getFieldMetadata(rawViewMetadata.config?.authorContext);
 
   const [firstChildMeta] = rawViewMetadata.children;
   const refList = rawViewMetadata.config.referenceList;
   const canBeChangedInReviewMode =
-    allowAndPersistChangesInReviewMode &&
-    (displayAs === 'autocomplete' || displayAs === 'dropdown');
-  const isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(
-    displayMode,
-  );
+    allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
+  const isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode);
   const isDDSourceDeferred =
-    (firstChildMeta?.type === 'Dropdown' &&
-      selectionMode === SELECTION_MODE.SINGLE &&
-      refFieldMetadata?.descriptors) ||
+    (firstChildMeta?.type === 'Dropdown' && selectionMode === SELECTION_MODE.SINGLE && refFieldMetadata?.descriptors) ||
     firstChildMeta.config.deferDatasource;
   const pyID = Utils.getMappedKey('pyID');
   const isInfinity = pyID === 'pyID';
@@ -108,31 +89,19 @@ export default function DataReference(
   let firstChildPConnect;
 
   const localizedPlaceholderOption = (placeholder) => {
-    const localizedDefaultPlaceholder = pConn.getLocalizedValue(
-      'select_placeholder_default',
-      '',
-      'CosmosFields',
-    );
+    const localizedDefaultPlaceholder = pConn.getLocalizedValue('select_placeholder_default', '', 'CosmosFields');
     // If we have a placeholder, push that option in the list of items
-    if (
-      placeholder === 'Select...' &&
-      localizedDefaultPlaceholder !== 'select_placeholder_default'
-    ) {
+    if (placeholder === 'Select...' && localizedDefaultPlaceholder !== 'select_placeholder_default') {
       return localizedDefaultPlaceholder;
     }
     return pConn.getLocalizedValue(placeholder);
   };
 
   if (['Dropdown', 'AutoComplete'].includes(firstChildMeta?.type)) {
-    firstChildMeta.config.placeholder = localizedPlaceholderOption(
-      firstChildMeta.config.placeholder,
-    );
+    firstChildMeta.config.placeholder = localizedPlaceholderOption(firstChildMeta.config.placeholder);
   }
 
-  if (
-    ['Checkbox', 'RadioButtons'].includes(firstChildMeta?.type) &&
-    firstChildMeta.config.variant === 'card'
-  ) {
+  if (['Checkbox', 'RadioButtons'].includes(firstChildMeta?.type) && firstChildMeta.config.variant === 'card') {
     firstChildMeta.config.imagePosition = imagePosition;
     firstChildMeta.config.showImageDescription = showImageDescription;
   }
@@ -145,10 +114,7 @@ export default function DataReference(
       ['Checkbox', 'Dropdown', 'RadioButtons'].includes(firstChildMeta?.type)
     ) {
       const { value, key, text } = firstChildMeta.config.datasource.fields;
-      if (
-        firstChildMeta.config.variant !== 'card' ||
-        (firstChildMeta.config.variant === 'card' && !isMounted)
-      ) {
+      if (firstChildMeta.config.variant !== 'card' || (firstChildMeta.config.variant === 'card' && !isMounted)) {
         (
           PCore.getDataApiUtils().getData(
             refList,
@@ -160,8 +126,7 @@ export default function DataReference(
         )
           .then((res) => {
             if (res.data.data !== null) {
-              const ddDataSource = firstChildMeta.config.datasource
-                .filterDownloadedFields
+              const ddDataSource = firstChildMeta.config.datasource.filterDownloadedFields
                 ? res.data.data
                 : res.data.data
                     .map((listItem) => ({
@@ -194,8 +159,7 @@ export default function DataReference(
       delete firstChildMeta.config.readOnly;
     }
     if (firstChildMeta?.type === 'Dropdown') {
-      firstChildMeta.config.datasource.source = rawViewMetadata.config
-        ?.parameters
+      firstChildMeta.config.datasource.source = rawViewMetadata.config?.parameters
         ? dropDownDataSource
         : '@DATASOURCE '.concat(refList).concat('.pxResults');
     } else if (firstChildMeta?.type === 'AutoComplete') {
@@ -226,22 +190,13 @@ export default function DataReference(
     // When value is empty propValue will be undefined here and no value will be set for the reference
     const propValue = event?.id || event?.target?.value;
     const propName =
-      firstChildMeta.type === 'SimpleTableSelect' &&
-      selectionMode === SELECTION_MODE.MULTI
-        ? PCore.getAnnotationUtils().getPropertyName(
-            firstChildMeta.config.selectionList,
-          )
-        : PCore.getAnnotationUtils().getPropertyName(
-            firstChildMeta.config.value,
-          );
+      firstChildMeta.type === 'SimpleTableSelect' && selectionMode === SELECTION_MODE.MULTI
+        ? PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.selectionList)
+        : PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.value);
 
-    const hasAssociatedViewConfigured =
-      rawViewMetadata.children[1].children?.length;
+    const hasAssociatedViewConfigured = rawViewMetadata.children[1].children?.length;
 
-    if (
-      pConn.getContextName().includes('modal') ||
-      pConn.getContextName().includes('workarea')
-    ) {
+    if (pConn.getContextName().includes('modal') || pConn.getContextName().includes('workarea')) {
       if (hasAssociatedViewConfigured || allowImplicitRefresh) {
         const pageReference = pConn.getPageReference();
         let pgRef: any = null;
@@ -257,13 +212,8 @@ export default function DataReference(
           .catch(() => {});
       }
     } else if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
-      (
-        PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>
-      ).then((caseResponse) => {
-        const pageTokens = pConn
-          .getPageReference()
-          .replace('caseInfo.content', '')
-          .split('.');
+      (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>).then((caseResponse) => {
+        const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
         let curr = {};
         const commitData = curr;
 
@@ -297,10 +247,7 @@ export default function DataReference(
             pConn.getContextName(),
             response.data.data.caseInfo.lastUpdateTime,
           );
-          PCore.getContainerUtils().updateRelatedContextEtag(
-            pConn.getContextName(),
-            response.headers.etag,
-          );
+          PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
         });
       });
     }
@@ -332,17 +279,14 @@ export default function DataReference(
           referenceType={referenceType}
           hideLabel={hideLabel}
           dataRelationshipContext={
-            rawViewMetadata.config.contextClass && rawViewMetadata.config.name
-              ? rawViewMetadata.config.name
-              : null
+            rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null
           }
         />
       );
     }
 
     if (
-      (['readonly', 'readonlyMulti', 'map'].includes(displayAs) ||
-        isDisplayModeEnabled) &&
+      (['readonly', 'readonlyMulti', 'map'].includes(displayAs) || isDisplayModeEnabled) &&
       selectionMode === SELECTION_MODE.MULTI
     ) {
       return (
@@ -383,8 +327,7 @@ export default function DataReference(
     ) {
       firstChildMeta.config.datasource.source =
         (firstChildMeta.config.variant === 'card' && dropDownDataSource) ||
-        (firstChildMeta.config.variant !== 'card' &&
-          rawViewMetadata.config?.parameters)
+        (firstChildMeta.config.variant !== 'card' && rawViewMetadata.config?.parameters)
           ? dropDownDataSource
           : '@DATASOURCE '.concat(refList).concat('.pxResults');
     } else if (firstChildMeta?.type === 'AutoComplete') {
@@ -420,8 +363,7 @@ export default function DataReference(
         firstChildMeta?.config?.datasource?.fields?.value.startsWith('@P')
           ? firstChildMeta?.config?.datasource?.fields?.value?.substring(3)
           : firstChildMeta?.config?.datasource?.fields?.value;
-      fieldMetaData.datasourceMetadata.datasource.name =
-        rawViewMetadata.config?.referenceList;
+      fieldMetaData.datasourceMetadata.datasource.name = rawViewMetadata.config?.referenceList;
     }
     // @ts-expect-error
     const { disableStartingFieldsForReference = false } =
@@ -432,16 +374,12 @@ export default function DataReference(
 
     if (isCreateNewReferenceEnabled) {
       isCreateNewReferenceEnabled =
-        isCreationOfNewRecordAllowedForReference &&
-        PCore.getAccessPrivilege().hasCreateAccess(contextClass);
+        isCreationOfNewRecordAllowedForReference && PCore.getAccessPrivilege().hasCreateAccess(contextClass);
     }
 
     const startingFields: any = {};
     const createNewRecord = () => {
-      if (
-        referenceType === 'Case' ||
-        firstChildMeta?.config?.referenceType === 'Case'
-      ) {
+      if (referenceType === 'Case' || firstChildMeta?.config?.referenceType === 'Case') {
         if (!disableStartingFieldsForReference) {
           startingFields.pyAddCaseContextPage = {
             pyID: pConn.getCaseInfo().getKey()?.split(' ')?.pop(),
@@ -452,13 +390,8 @@ export default function DataReference(
           startingFields,
         });
       }
-      if (
-        referenceType === 'Data' ||
-        firstChildMeta?.config?.referenceType === 'Data'
-      ) {
-        return getPConnect()
-          .getActionsApi()
-          .showDataObjectCreateView(contextClass);
+      if (referenceType === 'Data' || firstChildMeta?.config?.referenceType === 'Data') {
+        return getPConnect().getActionsApi().showDataObjectCreateView(contextClass);
       }
     };
 
@@ -471,10 +404,7 @@ export default function DataReference(
     const dataReferenceConfigToChild = {
       selectionMode,
       additionalInfo,
-      descriptors:
-        selectionMode === SELECTION_MODE.SINGLE
-          ? refFieldMetadata?.descriptors
-          : null,
+      descriptors: selectionMode === SELECTION_MODE.SINGLE ? refFieldMetadata?.descriptors : null,
       datasourceMetadata: fieldMetaData?.datasourceMetadata,
       required: propsToUse.required,
       visibility: propsToUse.visibility,
@@ -496,22 +426,17 @@ export default function DataReference(
           readonlyContextList: rawViewMetadata.config.readonlyContextList,
         }),
       dataRelationshipContext:
-        rawViewMetadata.config.contextClass && rawViewMetadata.config.name
-          ? rawViewMetadata.config.name
-          : null,
+        rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null,
       hideLabel,
       onRecordChange: handleSelection,
-      createNewRecord: isCreateNewReferenceEnabled
-        ? createNewRecord
-        : undefined,
+      createNewRecord: isCreateNewReferenceEnabled ? createNewRecord : undefined,
       inline,
     };
 
-    const searchSelectCacheKey =
-      componentCachePersistUtils.getComponentStateKey(
-        getPConnect,
-        rawViewMetadata.config.name,
-      );
+    const searchSelectCacheKey = componentCachePersistUtils.getComponentStateKey(
+      getPConnect,
+      rawViewMetadata.config.name,
+    );
 
     const dataReferenceAdvancedSearchContext = {
       dataReferenceConfigToChild,
@@ -523,13 +448,8 @@ export default function DataReference(
 
     if (displayAs === 'advancedSearch') {
       return (
-        <DataReferenceAdvancedSearchContext.Provider
-          value={dataReferenceAdvancedSearchContext}
-        >
-          <SearchForm
-            getPConnect={getPConnect}
-            searchSelectCacheKey={searchSelectCacheKey}
-          >
+        <DataReferenceAdvancedSearchContext.Provider value={dataReferenceAdvancedSearchContext}>
+          <SearchForm getPConnect={getPConnect} searchSelectCacheKey={searchSelectCacheKey}>
             {children}
           </SearchForm>
         </DataReferenceAdvancedSearchContext.Provider>
@@ -567,10 +487,7 @@ export default function DataReference(
         child.config.isEmbeddedInDataReference = true;
         return child;
       });
-      childrenToRender = [
-        recreatedFirstChild,
-        ...(children as ReactElement[]).slice(1),
-      ];
+      childrenToRender = [recreatedFirstChild, ...(children as ReactElement[]).slice(1)];
     } else {
       childrenToRender = [recreatedFirstChild];
     }

package/templates/react-sdk-reference/src/components/template/DataReference/DataReferenceAdvancedSearchContext.ts

@@ -3,8 +3,8 @@ import { createContext } from 'react';
 const DataReferenceAdvancedSearchContext = createContext({
   disableStartingFieldsForReference: true,
   dataReferenceConfigToChild: {
-    selectionMode: 'single'
-  }
+    selectionMode: 'single',
+  },
 });
 
 export default DataReferenceAdvancedSearchContext;

package/templates/react-sdk-reference/src/components/template/DataReference/SearchForm.tsx

@@ -1,31 +1,11 @@
 import { useState } from 'react';
-import {
-  Tab,
-  Tabs,
-  Typography,
-  RadioGroup,
-  FormControlLabel,
-  Radio,
-  MenuItem,
-  Box,
-  TextField,
-} from '@mui/material';
+import { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, MenuItem, Box, TextField } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import { TabContext, TabPanel } from '@mui/lab';
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-} from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 
 import { useGetTabsCount } from '@pega/sdk-react';
-import {
-  searchtabsClick,
-  getActiveTabId,
-  getFirstVisibleTabId,
-} from '../SubTabs/tabUtils';
+import { searchtabsClick, getActiveTabId, getFirstVisibleTabId } from '../SubTabs/tabUtils';
 import { getFieldMeta } from './utils';
 
 const publishEvent = ({ clearSelections, viewName }) => {
@@ -44,13 +24,7 @@ const publishEvent = ({ clearSelections, viewName }) => {
 
 const checkIfSelectionsExist = (getPConnect) => {
   const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
-  const {
-    selectionMode,
-    readonlyContextList,
-    contextPage,
-    contextClass,
-    name,
-  } = getPConnect().getConfigProps();
+  const { selectionMode, readonlyContextList, contextPage, contextClass, name } = getPConnect().getConfigProps();
   const isMultiSelectMode = selectionMode === MULTI;
 
   const dataRelationshipContext = contextClass && name ? name : null;
@@ -61,10 +35,7 @@ const checkIfSelectionsExist = (getPConnect) => {
   if (isMultiSelectMode) {
     selectionsExist = readonlyContextList?.length > 0;
   } else if (contextPage) {
-    selectionsExist =
-      compositeKeys?.filter(
-        (key) => !['', null, undefined].includes(contextPage[key]),
-      )?.length > 0;
+    selectionsExist = compositeKeys?.filter((key) => !['', null, undefined].includes(contextPage[key]))?.length > 0;
   }
   return selectionsExist;
 };
@@ -73,26 +44,18 @@ const SearchForm = (props) => {
   const { children, getPConnect, searchSelectCacheKey } = props;
 
   const deferLoadedTabs = children[2];
-  const cache: any =
-    PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+  const cache: any = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
   const { selectedCategory } = cache;
   const firstTabId = getFirstVisibleTabId(deferLoadedTabs, selectedCategory);
   const [open, setOpen] = useState(false);
   const [currentTabId, setCurrentTabId] = useState(
-    getActiveTabId(
-      deferLoadedTabs.props.getPConnect().getChildren(),
-      firstTabId,
-    ),
+    getActiveTabId(deferLoadedTabs.props.getPConnect().getChildren(), firstTabId),
   );
   const [nextTabId, setNextTabId] = useState(null); // State to store the next tab ID
   const { getLocaleValue } = PCore.getLocaleUtils();
 
   // @ts-ignore
-  const { data: tabData } = useGetTabsCount(
-    deferLoadedTabs,
-    'searchForm',
-    currentTabId,
-  );
+  const { data: tabData } = useGetTabsCount(deferLoadedTabs, 'searchForm', currentTabId);
 
   const handleTabClick = (event) => {
     const tabId: any = event.target.value;
@@ -132,12 +95,7 @@ const SearchForm = (props) => {
   if (tabItems.length > 3) {
     searchCategoriesComp = (
       <Grid container spacing={2}>
-        <TextField
-          value={currentTabId}
-          select
-          onChange={handleTabClick}
-          fullWidth
-        >
+        <TextField value={currentTabId} select onChange={handleTabClick} fullWidth>
           {tabItems.map((tab) => (
             <MenuItem key={tab.id} value={tab.id}>
               {tab.name}
@@ -150,58 +108,40 @@ const SearchForm = (props) => {
     searchCategoriesComp = (
       <RadioGroup row value={currentTabId} onChange={handleTabClick}>
         {tabItems.map((tab) => (
-          <FormControlLabel
-            key={tab.id}
-            value={tab.id}
-            control={<Radio />}
-            label={tab.name}
-          />
+          <FormControlLabel key={tab.id} value={tab.id} control={<Radio />} label={tab.name} />
         ))}
       </RadioGroup>
     );
   }
 
   return (
-    <Box display='flex' flexDirection='column' gap={2}>
-      <Typography variant='h5'>{propsToUse.label}</Typography>
+    <Box display="flex" flexDirection="column" gap={2}>
+      <Typography variant="h5">{propsToUse.label}</Typography>
       {searchCategoriesComp}
       <TabContext value={currentTabId}>
-        <Tabs
-          style={{ display: 'none' }}
-          value={currentTabId}
-          onChange={(e, newValue) => setCurrentTabId(newValue)}
-        >
+        <Tabs style={{ display: 'none' }} value={currentTabId} onChange={(e, newValue) => setCurrentTabId(newValue)}>
           {tabItems.map((tab) => (
             <Tab key={tab.id} label={tab.name} value={tab.id} />
           ))}
         </Tabs>
         {tabItems.map((tab) => (
           <TabPanel style={{ padding: '0px' }} key={tab.id} value={tab.id}>
-            <div className='search-form'>{tab.content}</div>
+            <div className="search-form">{tab.content}</div>
           </TabPanel>
         ))}
       </TabContext>
       <Dialog open={open} onClose={onDialogClose}>
-        <DialogTitle>
-          {getLocaleValue('Discard selections?', 'DataReference')}
-        </DialogTitle>
+        <DialogTitle>{getLocaleValue('Discard selections?', 'DataReference')}</DialogTitle>
         <DialogContent>
           <div>
-            {getLocaleValue(
-              'When changing search categories, any previous selections will be lost.',
-              'DataReference',
-            )}
+            {getLocaleValue('When changing search categories, any previous selections will be lost.', 'DataReference')}
           </div>
         </DialogContent>
         <DialogActions>
-          <Button onClick={onDialogClose} variant='outlined' color='primary'>
+          <Button onClick={onDialogClose} variant="outlined" color="primary">
             {getLocaleValue('Go back', 'ModalContainer')}
           </Button>
-          <Button
-            onClick={clearSelectionAndSwitchTab}
-            variant='contained'
-            color='primary'
-          >
+          <Button onClick={clearSelectionAndSwitchTab} variant="contained" color="primary">
             {getLocaleValue('Discard', 'ModalContainer')}
           </Button>
         </DialogActions>