@pega/custom-dx-components 0.23.10 → 0.23.11

package/src/tasks/delete-all/helper.js

@@ -1,3 +1,6 @@
+import fs from 'fs';
+import path, {join} from 'path';
+
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ora from 'ora';
@@ -12,12 +15,17 @@ import {
   validateRulesetVersion
 } from '../../util.js';
 import { getComponentsFromServer } from '../list/helper.js';
+import { TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH, COMPONENTS_PATH } from '../../constants.js';
 
 export const SOURCE_OF_COMPONENT_TYPES = {
   SERVER: 'Server',
   LOCAL: 'Local'
 };
 
+let library;
+let organization;
+
+
 export const getDeleteComponentsQuestions = async (options) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
 
@@ -35,6 +43,51 @@ export const getDeleteComponentsQuestions = async (options) => {
   ];
 };
 
+export const getLaunchPadFilterQuestions = async () => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = data && JSON.parse(data);
+
+  if (!data[COMPONENTS_DIRECTORY_PATH]) {
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
+    process.exit(1);
+  }
+
+  const componentData = data[COMPONENTS_PATH];
+
+  ({ library } = componentData);
+  ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));
+
+  return [
+    {
+      name: 'organization',
+      message: 'Enter component organization (required)',
+      default: organization,
+      validate: value => {
+        if (value) {
+          return true;
+        }
+        return 'Please provide value for organization';
+      }
+    },
+    {
+      name: 'library',
+      message: 'Enter library name (required)',
+      default: library,
+      validate: value => {
+        if (value) {
+          return true;
+        }
+        return 'Please provide value for library';
+      }
+    }
+  ];
+}
+
 export const deleteLocalComponents = async (sourceOfComponents, options) => {
   const localComponents = await getComponents();
 
@@ -79,10 +132,21 @@ export const deleteLocalComponents = async (sourceOfComponents, options) => {
 };
 
 export const deleteServerComponents = async (sourceOfComponents, answers) => {
-  const spinner = ora('Fetching components from server').start();
+
   const defaultPegaServerConfig = await getPegaServerConfig();
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
-  const data = await getComponentsFromServer(answers);
+
+  if (isLaunchpad) {
+    const questions = await getLaunchPadFilterQuestions();
+    const lpAnswers = await inquirer.prompt(questions);
+
+    ({library, organization} = lpAnswers);
+  }
+
+  const spinner = ora('Fetching components from server').start();
+  const data = await getComponentsFromServer(library, organization);
+  spinner.stop();
+
 
   // const serverComponents = isLaunchpad ? data : data.pxResults;
   let serverComponents;
@@ -100,7 +164,7 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
     }
   }
 
-  spinner.stop();
+
 
   if (serverComponents && serverComponents?.length > 0) {
     if (isLaunchpad) {

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

@@ -0,0 +1 @@
+{}

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

@@ -23,16 +23,16 @@
     "deleteAll": "custom-dx-components deleteAll",
     "promoteWebPack": "custom-dx-components promoteWebPack",
     "revertWebPack": "custom-dx-components revertWebPack",
-    "test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run test:full; fi ",
-    "test:full": "npm run test:functional && npm run test:unit",
-    "test:functional": "jest --runInBand test/functionTest --detectOpenHandles --coverage",
-    "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",
-    "test:unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components",
     "lint:types": "tsc --noEmit",
     "lint:es": "eslint .",
     "lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
     "lint:format": "prettier -c .",
-    "lint:spelling": "cspell --no-progress **/*"
+    "lint:spelling": "cspell --no-progress **/*",
+    "test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run test:full; fi ",
+    "test:full": "npm run test:functional && npm run test:unit",
+    "test:functional": "npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
+    "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",
+    "test:unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components"
   },
     "scriptsComments": {
     "build": "tsc -b tsconfig.build.json",
@@ -51,8 +51,8 @@
   "license": "Enter License",
   "sideEffects": false,
   "dependencies": {
-    "@pega/cosmos-react-core": "^3.0.11",
-    "@pega/cosmos-react-work": "3.0.11",
+    "@pega/cosmos-react-core": "^4.0.1",
+    "@pega/cosmos-react-work": "4.0.1",
     "dayjs": "^1.11.5",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^0.23.10",
+    "@pega/custom-dx-components": "^23.1.10",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

package/src/tasks/list/helper.js

@@ -1,16 +1,22 @@
 import fs from 'fs';
-
+import path from 'path';
 import chalk from 'chalk';
 import fetch from 'node-fetch';
+import { join } from 'path';
+import ora from 'ora';
+
+import inquirer from 'inquirer';
 
-import { LIST_COMPONENT_SERVICE_REST_ENDPOINT, LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH, COMPONENT_SCHEMA } from '../../constants.js';
-import { constructCompleteUrl, getComponents, getPegaServerConfig, getHttpsAgent } from '../../util.js';
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT, LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH, COMPONENT_SCHEMA, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH, COMPONENTS_PATH } from '../../constants.js';
+import { constructCompleteUrl, getComponents, getPegaServerConfig, getHttpsAgent, sanitize } from '../../util.js';
 
 export const SOURCE_OF_COMPONENT_TYPES = {
   SERVER: 'Server',
   LOCAL: 'Local'
 };
 
+
+
 export const getListComponentsQuestions = async (options) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
 
@@ -28,6 +34,52 @@ export const getListComponentsQuestions = async (options) => {
   ];
 };
 
+export const getLaunchPadFilterQuestions = async () => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = data && JSON.parse(data);
+
+  if (!data[COMPONENTS_DIRECTORY_PATH]) {
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
+    process.exit(1);
+  }
+
+  const componentData = data[COMPONENTS_PATH];
+
+  let { library } = componentData;
+  let { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
+
+  return [
+    {
+      name: 'organization',
+      message: 'Enter component organization (required)',
+      default: organization,
+      validate: value => {
+        if (value) {
+          return true;
+        }
+        return 'Please provide value for organization';
+      }
+    },
+    {
+      name: 'library',
+      message: 'Enter library name (required)',
+      default: library,
+      validate: value => {
+        if (value) {
+          return true;
+        }
+        return 'Please provide value for library';
+      }
+    }
+  ];
+}
+
 export const listLocalComponents = async (sourceOfComponents) => {
   let localComponents = await getComponents();
   localComponents = localComponents.map((name) => ({ 'Rule name': name }));
@@ -89,33 +141,36 @@ async function fetchComponentsFromLaunchpad(apiUrl, headers) {
         return Promise.all(
           responses.map((res) => {
             statuses.push(res.status);
-            return res.json();
+            if (res.status === 401 || res.status === 503) {
+              // Finding a 503 response is sometimes being returned from Launchpad in expired authentication scenario
+              throw new Error('Authorization error. Please regenerate using authenticate');
+            } else if (res.ok) {
+              return res.json();
+            } else {
+              throw new Error(`Unexpected Error ${res.status} encountered. ${res.message}`);
+            }
           })
         );
       })
       .then((data) => {
-        if (statuses.every((status) => status === 200)) {
-          const components = data.map((res) => res.components).flat();
-          resolve(components);
-        }
-        if (statuses.every((status) => [401, 503].includes(status))) {
-          throw new Error('Error occurred in authentication. Please regenerate using authenticate');
-        } else {
-          throw new Error(`${data.map((resp) => resp.message || resp)}`);
-        }
+        const components = data.map((res) => res.components).flat();
+        resolve(components);
       })
       // eslint-disable-next-line prefer-promise-reject-errors
       .catch((e) => reject(`${chalk.bold.red(e)}`));
   });
 }
 
-export const getComponentsFromServer = async () => {
+export const getComponentsFromServer = async (library, organization) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
   const url = constructCompleteUrl(
     defaultPegaServerConfig.server,
     isLaunchpad ? LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT : LIST_COMPONENT_SERVICE_REST_ENDPOINT
   );
+
+
+
   return new Promise((resolve, reject) => {
     try {
       fs.readFile(TOKEN_PATH, 'utf8', (err, data) => {
@@ -132,7 +187,10 @@ export const getComponentsFromServer = async () => {
             headers.cookie = `Pega-AAT=${accessToken}`;
 
             fetchComponentsFromLaunchpad(url, headers)
-              .then((response) => resolve(response))
+              .then((response) => {
+                response = response.filter(component => (component.library === library || library === "*" ) && (component.organization === organization || organization === "*"));
+                resolve(response); }
+              )
               .catch((e) => reject(e));
           } else {
             headers.Authorization = `${tokenType} ${accessToken}`;

package/src/tasks/list/index.js

@@ -1,25 +1,41 @@
 import inquirer from 'inquirer';
 import ora from 'ora';
 
-import { showVersion } from '../../util.js';
+import { showVersion, getPegaServerConfig } from '../../util.js';
 
 import {
   listLocalComponents,
   SOURCE_OF_COMPONENT_TYPES,
   getComponentsFromServer,
+  getLaunchPadFilterQuestions,
   displayServerComponents,
   getListComponentsQuestions
 } from './helper.js';
 
 const getList = async (sourceOfComponents, answers) => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
+
   switch (sourceOfComponents) {
     case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
       await listLocalComponents(sourceOfComponents);
       break;
     }
     case SOURCE_OF_COMPONENT_TYPES.SERVER: {
+
+      let library;
+      let organization;
+
+      if (isLaunchpad) {
+        const questions = await getLaunchPadFilterQuestions();
+        const lpAnswers = await inquirer.prompt(questions);
+
+        ({library, organization} = lpAnswers);
+      }
+
+
       const spinner = ora('Fetching components from server\n').start();
-      const data = await getComponentsFromServer(answers);
+      const data = await getComponentsFromServer(library, organization);
       spinner.stop();
       await displayServerComponents(data, answers);
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Avatar.jsx

@@ -0,0 +1,75 @@
+/* eslint-disable no-undef */
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Avatar as CosmosAvatar } from '@pega/cosmos-react-core';
+
+function Avatar(props) {
+  const { metaObj, showStatus } = props;
+  const [imageBlobUrl, setImageBlobUrl] = useState(null);
+  let userName;
+  let userIdentifier;
+
+  // 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));
+    }
+  }, []);
+
+  if (showStatus) {
+    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
+    const [userState, setUserState] = useState(currentState === 'online' ? 'active' : 'inactive');
+
+    const handleUserStateChange = ({ state }) => {
+      setUserState(state === 'online' ? 'active' : 'inactive');
+    };
+
+    useEffect(() => {
+      const subId = PCore.getMessagingServiceManager()
+        .getUserPresence()
+        .subscribe(userIdentifier, handleUserStateChange);
+
+      return function cleanup() {
+        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
+      };
+    }, []);
+    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl} 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} />;
+}
+
+Avatar.propTypes = {
+  metaObj: PropTypes.objectOf(PropTypes.any),
+  showStatus: PropTypes.bool
+};
+
+Avatar.defaultProps = {
+  metaObj: null,
+  showStatus: false
+};
+
+export default Avatar;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/mock.stories.js

@@ -0,0 +1,51 @@
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/styles.js

@@ -0,0 +1,14 @@
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/styles.js

@@ -0,0 +1,14 @@
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyBoolean/Boolean.js

@@ -0,0 +1,38 @@
+function Boolean(value, { allowEmpty = true, tick = "", cross = "" } = {}) {
+  if (
+    (!allowEmpty && !value) ||
+    value === false ||
+    value?.toString()?.toLowerCase() === "false" ||
+    value === 0 ||
+    value === "0"
+  ) {
+    return cross || "";
+  }
+  if (
+    value === true ||
+    value?.toString()?.toLowerCase() === "true" ||
+    value === 1 ||
+    value === "1"
+  ) {
+    return tick || "";
+  }
+  if (
+    allowEmpty &&
+    (value === "null" ||
+      value === "" ||
+      value === null ||
+      typeof value === "undefined")
+  ) {
+    return "––";
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value, options) =>
+    Boolean(value, {
+      ...options,
+      tick: "True",
+      cross: "False"
+    })
+};

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyBoolean/boolean-format.js

@@ -0,0 +1,26 @@
+import Boolean from "./Boolean";
+
+
+export default {
+  ...Boolean
+};
+
+
+
+export function format(value, type) {
+  let formattedValue;
+
+  switch (type?.toLowerCase()) {
+
+
+    case "boolean":
+    case "checkbox": {
+      formattedValue = Boolean.TrueFalse(value, { allowEmpty: false });
+      break;
+    }
+
+    default:
+      formattedValue = value;
+  }
+  return formattedValue;
+}