@pega/custom-dx-components 8.8.18 → 8.8.20

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

@@ -1,7 +1,11 @@
+import fs from 'fs';
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ora from 'ora';
 
+import path from 'path';
+import { join } from 'path';
+
 import {
   deleteInfinityServerComponent,
   deleteLaunchpadServerComponent,
@@ -9,15 +13,21 @@ import {
   getComponents,
   getPegaServerConfig,
   standardizeStr,
-  validateRulesetVersion
+  validateRulesetVersion,
+  sanitize
 } 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 +45,50 @@ export const getDeleteComponentsQuestions = 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];
+
+  ({ 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 +133,19 @@ 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,8 +163,6 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
     }
   }
 
-  spinner.stop();
-
   if (serverComponents && serverComponents?.length > 0) {
     if (isLaunchpad) {
       serverComponents.forEach((component) => {

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

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

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

@@ -46,8 +46,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": "^3.2.2",
+    "@pega/cosmos-react-work": "3.2.2",
     "dayjs": "^1.11.5",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^8.8.18",
+    "@pega/custom-dx-components": "^8.8.20",
     "@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,10 +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',
@@ -28,6 +40,50 @@ 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 }));
@@ -109,13 +165,14 @@ async function fetchComponentsFromLaunchpad(apiUrl, headers) {
   });
 }
 
-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 +189,13 @@ 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;
+}