@pega/custom-dx-components 0.242.48 → 0.242.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.242.48",
+  "version": "0.242.50",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -68,7 +68,9 @@ export const AUTHENTICATE_DEFAULTS = {
 export const SHARED_FILE_NAMES = [
   "suggestions-handler.ts",
   "PConnProps.d.ts",
-  "create-nonce.ts"
+  "create-nonce.ts",
+  "Operator.tsx",
+  "Avatar.tsx"
 ];
 
 export const AUTHENTICATE_SCHEMA = {

package/src/tasks/create/templates/Constellation/Template/DETAILS/Avatar.tsx.mustache

@@ -16,14 +16,14 @@ interface {{COMPONENT_CLASS_NAME}}AvatarProps extends PConnFieldProps {
 function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/Avatar.tsx.mustache

@@ -16,14 +16,14 @@ interface {{COMPONENT_CLASS_NAME}}AvatarProps extends PConnFieldProps {
 function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -16,14 +16,14 @@ interface {{COMPONENT_CLASS_NAME}}AvatarProps extends PConnFieldProps {
 function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -16,14 +16,14 @@ interface {{COMPONENT_CLASS_NAME}}AvatarProps extends PConnFieldProps {
 function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/src/tasks/export-archive/helper.js

@@ -93,15 +93,32 @@ export const updateSavedExportFilePath = async(filePath) => {
 
   let defaultPath = join(path.sep, arPathParts[0], arPathParts[1], arPathParts[2]);
 
-  if (filePath.indexOf(defaultPath) === 0) {
-    // same starting path, so we can save the relative
-    const relativePath = filePath.replace(defaultPath.concat("/"), "");
+  if (path.sep != "/") {
+    // windows
+    if (defaultPath.indexOf(path.sep) === 0) {
+      // if start with \\, then remove
+      defaultPath = defaultPath.substring(1);
+    }
+
+    if (filePath.indexOf(defaultPath) === 0) {
+      // same starting path, so we can save the relative
+      const relativePath = filePath.replace(defaultPath.concat(path.sep), "");
 
-    if (relativePath != configDef.importRelativePath) {
       await setConfigExportRelativePath(relativePath);
       await forceDefaultsUpdate();
+
     }
+  }
+  else {
+    // mac
+    if (filePath.indexOf(defaultPath) === 0) {
+      // same starting path, so we can save the relative
+      const relativePath = filePath.replace(defaultPath.concat("/"), "");
 
+      await setConfigExportRelativePath(relativePath);
+      await forceDefaultsUpdate();
 
+    }
   }
+
 }

package/src/tasks/import-archive/helper.js

@@ -190,17 +190,6 @@ export const updateTempArchive = async(libraryName, version, devBuild) => {
   // remove -dev if exists
   const justVersion = version.replace("-dev", "");
 
-  // open tasks.config and update it
-  // await setTasksConfig(libraryName, justVersion, devBuild, tempStoreDirectory);
-
-  // open package.json, update org
-  // await setPackageOrg(configDef.organization, tempStoreDirectory);
-
-  // update all the components
-  // const compDir = join(tempStoreDirectory, "src", "components");
-  // const compList = await getComponents(compDir);
-
-  // await renameComponents(compList, libraryName, version, compDir);
 
   const tasks = new Listr(
     [
@@ -290,12 +279,32 @@ export const updateSavedFilePath = async(filePath) => {
 
   let defaultPath = join(path.sep, arPathParts[0], arPathParts[1], arPathParts[2]);
 
-  if (filePath.indexOf(defaultPath) === 0) {
-    // same starting path, so we can save the relative
-    const relativePath = filePath.replace(defaultPath.concat("/"), "");
+  if (path.sep != "/") {
+    // windows
+    if (defaultPath.indexOf(path.sep) === 0) {
+      // if start with \\, then remove
+      defaultPath = defaultPath.substring(1);
+    }
+
+    if (filePath.indexOf(defaultPath) === 0) {
+      // same starting path, so we can save the relative
+      const relativePath = filePath.replace(defaultPath.concat(path.sep), "");
+
+      await setConfigImportRelativePath(relativePath);
+      await forceDefaultsUpdate();
 
-    await setConfigImportRelativePath(relativePath);
-    await forceDefaultsUpdate();
+    }
+  }
+  else {
+    // mac
+    if (filePath.indexOf(defaultPath) === 0) {
+      // same starting path, so we can save the relative
+      const relativePath = filePath.replace(defaultPath.concat("/"), "");
 
+      await setConfigImportRelativePath(relativePath);
+      await forceDefaultsUpdate();
+
+    }
   }
+
 }

package/src/tasks/init/template/package.json.mustache

@@ -48,7 +48,7 @@
     "_internal-test-coverage": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand node_modules/@pega/custom-dx-component --ci --testResultsProcessor='jest-junit' --coverage",
     "_internal-test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run _internal-test-full; fi ",
     "_internal-test-full": "npm run _internal-test-functional && npm run _internal-test-unit",
-    "_internal-test-functional": "echo '\nMake sure you authenticate!!\n' && npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
+    "_internal-test-functional": "echo 'Make sure you authenticate!!' && npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
     "_internal-test-unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components",
     "_internal-build-jest-assets": "custom-dx-components buildJestAssets",
     "_internal-buildLibrary": "custom-dx-components buildLibrary",
@@ -100,7 +100,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.15.1",
-    "@pega/custom-dx-components": "~0.242.48",
+    "@pega/custom-dx-components": "~0.242.50",
     "@pega/pcore-pconnect-typedefs": "~3.2.0-alpha.1",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/addon-essentials": "^7.6.19",

package/src/util.js

@@ -1508,6 +1508,28 @@ export const unZipFromArchive = async (fileName) => {
 };
 
 
+export const updateComponentTaskConfig = async () => {
+  const currentDirectory = process.cwd();
+  const tempDirectory = join(currentDirectory, TEMP_PATH);
+
+  const tempConfigPath = join(tempDirectory, TASKS_CONFIG_JSON_FILENAME);
+  const currentConfigPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  const contents = fs.readFileSync(tempConfigPath);
+  const originalContents = fs.readFileSync(currentConfigPath);
+
+  let contentsData = JSON.parse(contents);
+  let originalContentsData = JSON.parse(originalContents);
+
+  // only copy "components" from archived task.config and "devBuild"
+  // that way, your current tasks.config isn't messed up
+  originalContentsData["server-config"].devBuild = contentsData["server-config"].devBuild;
+  originalContentsData["component"] = contentsData["component"];
+
+  fs.writeFileSync(currentConfigPath, JSON.stringify(originalContentsData, null, 4), { encoding: 'utf8' });
+
+}
+
 export const restoreDependenciesFromPackage = async () => {
   const currentDirectory = process.cwd();
   const tempDirectory = join(currentDirectory, TEMP_PATH);
@@ -1598,16 +1620,14 @@ export const restoreFromArchive = async (fileName, orgLibName, version) => {
 
   await unZipFromArchive(archFileName);
 
-  const tempConfigPath = join(tempDirectory, TASKS_CONFIG_JSON_FILENAME);
-  const currentConfigPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
   const tempPackagePath = join (tempDirectory, PACKAGE_JSON_FILENAME);
   const currentPackagePath = join(currentDirectory, PACKAGE_JSON_FILENAME);
   const tempDirectoryComponents = join(tempDirectory, "src", "components");
   const currentComponentsPath = join(currentDirectory, "src", "components");
 
-
-  let contents = fs.readFileSync(tempConfigPath);
-  fs.writeFileSync(currentConfigPath, contents);
+  // take your current tasks.config and update with component and devBuild from saved tasks.config
+  await updateComponentTaskConfig();
 
   // restore package json dependencies
   await restoreDependenciesFromPackage();

package/tests/assets/library/components/{createAll/Constellation/Pega_DXIL_MyDetails → create/shared}/Avatar.tsx

@@ -2,7 +2,7 @@
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from '../shared/PConnProps';
+import type { PConnFieldProps } from './PConnProps';
 
 
 // interface for props
@@ -16,14 +16,14 @@ interface PegaDxilMyDetailsAvatarProps extends PConnFieldProps {
 function Avatar(props: PegaDxilMyDetailsAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/tests/assets/library/components/{createAll/Constellation/Pega_DXIL_MyDetails → create/shared}/Operator.tsx

@@ -14,7 +14,7 @@ import {
 import { Glimpse } from '@pega/cosmos-react-work';
 import { EmailDisplay } from '@pega/cosmos-react-core';
 
-import type { PConnFieldProps } from '../shared/PConnProps';
+import type { PConnFieldProps } from './PConnProps';
 
 import Avatar from './Avatar';
 

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -5,7 +5,7 @@ import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/c
 import PegaDxilMyDetails from './index';
 import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
 import StatusWorkRenderer from './StatusWork';
-import Operator from './Operator';
+import Operator from '../shared/Operator';
 import type C11nEnv from '@pega/pcore-pconnect-typedefs/interpreter/c11n-env';
 
 const meta: Meta<typeof PegaDxilMyDetails> = {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -6,7 +6,7 @@ import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration
 import type { PConnFieldProps } from '../shared/PConnProps';
 
 // includes in bundle
-import Operator from './Operator';
+import Operator from '../shared/Operator';
 
 import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
 

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx

@@ -4,7 +4,7 @@ import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/c
 import PegaDxilMyTwoColumnDetails from './index';
 import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
 import StatusWorkRenderer from './StatusWork';
-import Operator from './Operator';
+import Operator from '../shared/Operator';
 import type C11nEnv from '@pega/pcore-pconnect-typedefs/interpreter/c11n-env';
 
 const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {

package/tests/assets/library/components/createAll/Constellation/{Pega_DXIL_MyPageCaseWidget → shared}/Avatar.tsx

@@ -2,28 +2,28 @@
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from '../shared/PConnProps';
+import type { PConnFieldProps } from './PConnProps';
 
 
 // interface for props
-interface PegaDxilMyPageCaseWidgetAvatarProps extends PConnFieldProps {
+interface PegaDxilMyDetailsAvatarProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   metaObj: any;
   showStatus: boolean;
 
 }
 
-function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
+function Avatar(props: PegaDxilMyDetailsAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;
@@ -59,6 +59,7 @@ function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
+
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/tests/assets/library/components/createAll/Constellation/{Pega_DXIL_MyPageCaseWidget → shared}/Operator.tsx

@@ -14,13 +14,13 @@ import {
 import { Glimpse } from '@pega/cosmos-react-work';
 import { EmailDisplay } from '@pega/cosmos-react-core';
 
-import type { PConnFieldProps } from '../shared/PConnProps';
+import type { PConnFieldProps } from './PConnProps';
 
 import Avatar from './Avatar';
 
 
 // interface for props
-interface PegaDxilMyPageCaseWidgetOperatorProps extends PConnFieldProps {
+interface PegaDxilMyDetailsOperatorProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   name: string;
   id: string;
@@ -31,7 +31,7 @@ interface PegaDxilMyPageCaseWidgetOperatorProps extends PConnFieldProps {
 
 let pTarget = null;
 
-function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
+function Operator(props: PegaDxilMyDetailsOperatorProps) {
   const { id, name, label, testId, helperText, externalUser, metaObj } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyDetails/Avatar.tsx

@@ -16,14 +16,14 @@ interface PegaDxilMyDetailsAvatarProps extends PConnFieldProps {
 function Avatar(props: PegaDxilMyDetailsAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Avatar.tsx

@@ -16,14 +16,14 @@ interface PegaDxilMyPageCaseWidgetAvatarProps extends PConnFieldProps {
 function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -16,14 +16,14 @@ interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
 function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyDetails/Avatar.tsx

@@ -16,14 +16,14 @@ interface PegaDxilMyDetailsAvatarProps extends PConnFieldProps {
 function Avatar(props: PegaDxilMyDetailsAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/Avatar.tsx

@@ -16,14 +16,14 @@ interface PegaDxilMyPageCaseWidgetAvatarProps extends PConnFieldProps {
 function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -16,14 +16,14 @@ interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
 function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
+  let userName: string;
+  let userIdentifier: string;
 
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -1,76 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import  React from 'react';
-import { useEffect, useState } from 'react';
-import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from '../shared/PConnProps';
-
-
-// interface for props
-interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  metaObj: any;
-  showStatus: boolean;
-
-}
-
-function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
-  const { metaObj, showStatus = false } = props;
-  const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: any;
-  let userIdentifier: any;
-
-  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
-  // This is non CaseView case (Dashboard, MyWork etc)
-  if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
-  } else {
-    userName = metaObj.name;
-    userIdentifier = metaObj.ID;
-  }
-  if (!userName && userIdentifier) {
-    userName = userIdentifier;
-  }
-
-  useEffect(() => {
-    const imageKey = !metaObj ? PCore.getEnvironmentInfo().getOperatorImageInsKey() : metaObj.image;
-    if (imageKey) {
-      PCore.getAssetLoader()
-        .getSvcImage(imageKey)
-        .then((blob) => window.URL.createObjectURL(blob))
-        .then((imagePath) => setImageBlobUrl(imagePath as React.SetStateAction<any>));
-    }
-  }, [metaObj]);
-
-  if (showStatus) {
-    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
-    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
-
-    const handleUserStateChange = ({ state } : any) => {
-      setUserState(state === 'online' ? 'active' : 'inactive');
-    };
-
-    useEffect(() => {
-      const subId = PCore.getMessagingServiceManager()
-        .getUserPresence()
-        // @ts-ignore
-        .subscribe(userIdentifier, handleUserStateChange);
-
-      return function cleanup() {
-        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
-      };
-    }, [userIdentifier, handleUserStateChange]);
-    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
-  }
-
-  // Do not render when userName does not exists
-  // TODO : In CNR case, pxRequestor is not available, please remove this condition once it populates
-  if (!userName) {
-    return null;
-  }
-
-  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} />;
-}
-
-
-export default withConfiguration(Avatar);

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/Operator.tsx

@@ -1,215 +0,0 @@
-// @ts-nocheck
-import { useState, useEffect, Fragment } from 'react';
-import {
-  Link,
-  Button,
-  Popover,
-  useOuterEvent,
-  useElement,
-  Progress,
-  FormField,
-  useTheme,
-  withConfiguration
-} from '@pega/cosmos-react-core';
-import { Glimpse } from '@pega/cosmos-react-work';
-import { EmailDisplay } from '@pega/cosmos-react-core';
-
-import type { PConnFieldProps } from '../shared/PConnProps';
-
-import Avatar from './Avatar';
-
-
-// interface for props
-interface PegaDxilMyTwoColumnDetailsOperatorProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  name: string;
-  id: string;
-  label: string;
-  metaObj: any;
-  externalUser: any;
-}
-
-let pTarget = null;
-
-function Operator(props: PegaDxilMyTwoColumnDetailsOperatorProps) {
-  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [popoverEl, setPopoverEl] = useElement(null);
-  const [popoverContent, setpopoverContent] = useState(null);
-  const theme: any = useTheme();
-
-  /* If the id has changed, we need to reset the popover */
-  useEffect(() => {
-    pTarget = null;
-  }, [id]);
-
-
-
-  const OperatorPreview = () => {
-    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-    const localeCategory = 'Operator';
-    setpopoverContent(
-      <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
-    );
-    if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
-      const fields = [
-        {
-          id: 'pyFirstName',
-          name: localizedVal('Name', localeCategory),
-          value: externalUser.name
-        },
-        {
-          id: 'pyEmail1',
-          name: localizedVal('Email', localeCategory),
-          value:
-            externalUser.email !== '' ? <Link href={`mailto:${externalUser.email}`}>{externalUser.email}</Link> : ''
-        },
-        {
-          id: 'pyPhoneNumber',
-          name: localizedVal('Phone', localeCategory),
-          value: externalUser.phone !== '' ? <Link href={`tel:${externalUser.phone}`}>{externalUser.phone}</Link> : ''
-        }
-      ];
-      setIsLoading(false);
-      setpopoverContent(
-        <Glimpse
-          visual={
-            <Avatar
-              metaObj={{
-                name: externalUser.name
-              }}
-            />
-          }
-          primary={externalUser.name}
-          secondary={[externalUser.position]}
-          fields={fields}
-          target={pTarget}
-        />
-      );
-    } else {
-      return PCore.getUserApi()
-        .getOperatorDetails(id, true)
-        .then(res => {
-          if (res.data?.pyOperatorInfo) {
-            const fields = [];
-            const data = res.data;
-            if (data.pyOperatorInfo && data.pyOperatorInfo.pyUserName) {
-              fields.push({
-                id: 'Name',
-                name: localizedVal('Name', localeCategory),
-                value: data.pyOperatorInfo.pyUserName
-              });
-            }
-            if (data.pyOperatorInfo && data.pyOperatorInfo.pyEmailAddress) {
-              fields.push({
-                id: 'Email',
-                name: localizedVal('Email address', localeCategory),
-                value: <EmailDisplay value={data.pyOperatorInfo.pyEmailAddress} />
-              });
-            }
-            const opAvatar = (
-              <Avatar
-                metaObj={{
-                  image: '',
-                  name: data.pyOperatorInfo.pyUserName
-                }}
-              />
-            );
-
-            setIsLoading(false);
-            setpopoverContent(
-              <Glimpse
-                heading={{
-                  primary: data.pyOperatorInfo.pyUserName,
-                  secondary: data.pyOperatorInfo.pyEmailAddress,
-                  visual: opAvatar
-                }}
-                fields={fields}
-                target={pTarget}
-                onDismiss={() => {pTarget = null;}}
-              />
-            );
-          }
-        });
-    }
-  };
-
-
-  const clickAction = (e: any) => {
-
-    setIsOpen(!isOpen);
-    if (pTarget === null) {
-      pTarget = e.currentTarget;
-      OperatorPreview();
-    }
-  };
-
-  const hidePopover = () => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
-  };
-
-  useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
-
-  const hideOnEscape = (e: any) => {
-    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
-  };
-
-  const comp = (
-    <Fragment>
-      {metaObj ? (
-        <Button
-          variant='text'
-          aria-haspopup
-          aria-expanded={isOpen}
-          onClick={clickAction}
-          onKeyDown={hideOnEscape}
-          data-test-id={testId}
-          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
-        >
-          <Avatar {...props} />
-        </Button>
-      ) : (
-        <Button
-          variant='link'
-          aria-haspopup
-          aria-expanded={isOpen}
-          onClick={clickAction}
-          onKeyDown={hideOnEscape}
-          data-test-id={testId}
-          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
-        >
-          {name}
-        </Button>
-      )}
-
-      {isOpen && (
-        <Popover
-          ref={setPopoverEl}
-          groupId='operator'
-          target={pTarget}
-          placement='bottom-start'
-          style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
-          strategy='fixed'
-        >
-          {popoverContent}
-        </Popover>
-      )}
-    </Fragment>
-  );
-
-  if (label !== null) {
-    return (
-      <FormField label={label} info={helperText}>
-        {comp}
-      </FormField>
-    );
-  }
-
-  return comp;
-};
-
-
-export default withConfiguration(Operator);