@pega/custom-dx-components 0.242.47 → 0.242.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.242.47",
+  "version": "0.242.49",
   "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,15 +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), "");
 
-    if (relativePath != configDef.importRelativePath) {
       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/import-archive/index.js

@@ -5,6 +5,7 @@ import { join } from 'path';
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
+import { Listr } from 'listr2';
 
 import {
   sanitize,
@@ -19,10 +20,14 @@ import {
   zipVersionAndArchive,
   getLibraryArchiveDirectories,
   hasLibraryAndVersion,
-  cleanUpTemp
+  cleanUpTemp,
+  hasArchives,
+  restoreFromArchive,
+  forceDefaultsUpdate
  } from '../../util.js';
 import { TASKS_CONFIG_JSON_FILENAME, ARCHIVES_PATH, TEMP_PATH } from '../../constants.js';
 import { getFilePathQuestions, getFileNameQuestions, updateTempArchive, updateSavedFilePath  } from './helper.js';
+import { showCurrentStatus } from '../show-status/index.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 const currentDirectory = process.cwd();
@@ -214,7 +219,7 @@ export const moveComp = async(componentKey, orgLibName, version, copyShared, opt
     fs.rmSync(tempDirectory, { recursive: true, force: true, maxRetries: 2  });
 }
 
-export const importArch = async(filePath, fileName) => {
+export const importArch = async(filePath, fileName, hadArchive) => {
 addDebugLog("importArch", `filePath: ${filePath}, fileName: ${fileName}`, "");
 
   const currentDirectory = process.cwd();
@@ -326,8 +331,44 @@ addDebugLog("importArch", `filePath: ${filePath}, fileName: ${fileName}`, "");
   // delete temp directory
   fs.rmSync(tempDirectory, { recursive: true, force: true, maxRetries: 2  });
 
-  console.log(`\n${chalk.green(`${fileName}`)} has been imported!`);
-  console.log(`You can switch to ${chalk.green(`${orgLibName}/${version}`)} via npm run switchLib.\n`);
+
+  if (hadArchive) {
+    console.log(`\n${chalk.green(`${fileName}`)} has been imported!`);
+    console.log(`You can switch to ${chalk.green(`${orgLibName}/${version}`)} via npm run switchLib.\n`);
+  }
+  else {
+    const switchToFileName = `${orgLibName}_${version}.zip`;
+
+    const tasks = new Listr(
+      [
+        {
+          title: `Restoring ${orgLibName}/${version}`,
+          task: async () => {
+            await restoreFromArchive(switchToFileName, orgLibName, version);
+          }
+        }
+      ],
+      { concurrent: false, exitOnError: true }
+    );
+
+    console.log(`\n${chalk.green(`${fileName}`)} has been imported!`);
+
+    await tasks.run().catch(err => {
+      console.log(chalk.bold.red(err.toString()));
+      process.exit(1);
+    });
+
+    console.log(`${chalk.bold.green(`\nSwitched to ${orgLibName}/${version}!\n`)}`);
+
+    await forceDefaultsUpdate();
+    await showCurrentStatus();
+
+    console.log('\n***************************************************************');
+    console.log(chalk.bold.yellow('Dependencies have changed between versions, recommend updating.'));
+    console.log(`PLEASE run ${chalk.bold.yellow("'npm update'")}.`);
+    console.log('****************************************************************\n');
+  }
+
 
 }
 
@@ -349,7 +390,7 @@ export const getZipFileList = async(filePath) => {
 
 export default async options => {
   await showVersion();
-  await checkLibraryAndArchives();
+  // await checkLibraryAndArchives();
 
   await checkPathAccess(pegaConfigJsonPath);
   const isLibraryBased = getLibraryBased();
@@ -358,6 +399,8 @@ export default async options => {
     process.exit();
   }
 
+  const hasArch = await hasArchives();
+
   await cleanUpTemp();
 
   addDebugLog("importArchive", "", "+");
@@ -366,7 +409,7 @@ export default async options => {
   if (options.params.length >= 5) {
     const filePath = options.params[3];
     const fileName = options.params[4];
-    await importArch( filePath, fileName);
+    await importArch( filePath, fileName, hasArch);
 
   }
   else {
@@ -388,7 +431,13 @@ export default async options => {
     const {fileName} = fileNameAnswers;
 
 
-    await importArch( filePath, fileName);
+    await importArch( filePath, fileName, hasArch);
+
+    // reapply to save if changed, because imported task.config may have overriden and we want
+    // to keep what was entered as the latest
+    await updateSavedFilePath(filePath);
+
+
 
   }
 

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.47",
+    "@pega/custom-dx-components": "~0.242.49",
     "@pega/pcore-pconnect-typedefs": "~3.2.0-alpha.1",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/addon-essentials": "^7.6.19",

package/src/tasks/show-status/index.js

@@ -7,7 +7,7 @@ import { showVersion, getLibraryBased, addDebugLog, getConfigDefaults, getCompon
 
 export const showCurrentStatus = async () => {
 
-  const configDefaults = await getConfigDefaults();
+  const configDefaults = getConfigDefaults();
   const componentList = await getComponents();
 
   console.log("");

package/src/tasks/switch-lib/index.js

@@ -94,8 +94,6 @@ addDebugLog("switchLibrary", "", "+");
       ({ version } = nextAnswers);
     }
 
-
-
   }
 
   // in this scenario, version contains "-dev", if appropriate
@@ -132,12 +130,6 @@ addDebugLog("switchLibrary", "", "+");
     process.exit(1);
   });
 
-  // archive existing
-  // await zipVersionAndArchive(existingOrgLib, oldVersion);
-
-  // restore from archive
-  // await restoreFromArchive(switchToFileName, newOrgLib, newVersion);
-
   console.log(`${chalk.bold.green(`\nSwitched to ${newOrgLib}/${newVersion}!\n`)}`);
 
   await forceDefaultsUpdate();
@@ -150,16 +142,6 @@ addDebugLog("switchLibrary", "", "+");
     console.log(`PLEASE run ${chalk.bold.yellow("'npm update'")}.`);
     console.log('****************************************************************\n');
 
-    // const upateQuestions = await getRunNpmQuestions();
-    // const answers = await inquirer.prompt(upateQuestions);
-    // const { updateNpm } = answers;
-
-    // if (updateNpm) {
-    //   await anotherTask.run().catch(err => {
-    //     console.log(chalk.bold.red(err.toString()));
-    //     process.exit(1);
-    //   });
-    // }
   }
 
 

package/src/util.js

@@ -134,6 +134,7 @@ export const setUpDefaults = async () => {
       retrievedConfigData.importRelativePath = data[IMPORT_RELATIVE_PATH];
     }
 
+
     if (data[EXPORT_RELATIVE_PATH]) {
       retrievedConfigData.exportRelativePath = data[EXPORT_RELATIVE_PATH];
     }
@@ -572,9 +573,9 @@ if (showDebug) addDebugLog("getComponentsObj", "END", "-");
   return compList;
 };
 
-export const getPegaConfig = async () => {
+export const getPegaConfig = async (force = false) => {
 if (showDebug) { addDebugLog("getPegaConfig", "", "+"); }
-  if (!pegaData) {
+  if (!pegaData || force) {
 
 if (showDebug)  { addDebugLog("getPegaConfig", "retrieveData", ""); }
     const currentDirectory = process.cwd();
@@ -622,7 +623,7 @@ export const updateServerConfigRuleSetAndVersion = async (rulesetName, rulesetVe
 if (showDebug) addDebugLog("updateServerConfigRuleSetAndVersion", `rulesetName: ${rulesetName}, rulesetVersion: ${rulesetVersion}`, "");
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
-  let configData = await getPegaConfig();
+  let configData = await getPegaConfig(true);
   let serverConfig = configData['server-config'];
 
   serverConfig.rulesetName = rulesetName;
@@ -641,7 +642,7 @@ if (showDebug) addDebugLog("updateComponentDefaultLibrary", `library: ${library}
 
   await checkPathAccess(pegaConfigJsonPath);
 
-  let config = await getPegaConfig();
+  let config = await getPegaConfig(true);
   let componentsDefault = config.component;
   componentsDefault.library = library;
 
@@ -657,7 +658,7 @@ if (showDebug) addDebugLog("updateComponentDefaultVersion", `version: ${version}
 
   await checkPathAccess(pegaConfigJsonPath);
 
-  let config = await getPegaConfig();
+  let config = await getPegaConfig(true);
   let componentsDefault = config.component;
   componentsDefault.version = version;
 
@@ -679,7 +680,7 @@ export const setConfigDevBuild = async (devBuild) => {
 if (showDebug) addDebugLog("setConfigDevBuild", `devBuild: ${devBuild}`, "");
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
-  let configData = await getPegaConfig();
+  let configData = await getPegaConfig(true);
   let serverConfig = configData['server-config'];
   serverConfig.devBuild = devBuild;
 
@@ -692,7 +693,7 @@ export const setConfigImportRelativePath = async (importRelativePath) => {
 if (showDebug) addDebugLog("setConfigImportRelativePath", `importRelativePath: ${importRelativePath}`, "");
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
-  let configData = await getPegaConfig();
+  let configData = await getPegaConfig(true);
   configData[IMPORT_RELATIVE_PATH] = importRelativePath;
 
   // update file
@@ -704,7 +705,7 @@ export const setConfigExportRelativePath = async (exportRelativePath) => {
 if (showDebug) addDebugLog("setConfigImportRelativePath", `exportRelativePath: ${exportRelativePath}`, "");
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
-  let configData = await getPegaConfig();
+  let configData = await getPegaConfig(true);
   configData[EXPORT_RELATIVE_PATH] = exportRelativePath;
 
   // update file
@@ -813,7 +814,7 @@ export const setServerType = async(serverType) => {
 if (showDebug) addDebugLog("setServerType", `serverType: ${serverType}`, "");
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
-  let configData = await getPegaConfig();
+  let configData = await getPegaConfig(true);
   let serverConfig = configData['server-config'];
   serverConfig.serverType = serverType;
 

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);