@pega/custom-dx-components 0.23.10 → 0.23.12

package/.prettierrc.json

@@ -1,7 +1 @@
-{
-  "$schema": "http://json.schemastore.org/prettierrc",
-  "extends": "@pega/prettier-config",
-  "printWidth": 150,
-  "singleQuote": true,
-  "trailingComma": "none"
-}
+"@pega/prettier-config"

package/jest.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   verbose: true,
-  roots: ['./test'],
+  roots: ['./tests'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   testEnvironment: 'jsdom',
   transform: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.10",
+  "version": "0.23.12",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -9,7 +9,8 @@
     "lint:spelling": "cspell **/*",
     "fix:es": "eslint --fix .",
     "fix:format": "prettier -w .",
-    "test:unit:local": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand /test/unitTest"
+    "test:unit:local": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand /tests/unit",
+    "test:functional:local": "jest --runInBand /tests/functional --detectOpenHandles --coverage"
   },
   "type": "module",
   "sideEffects": false,

package/src/tasks/create/index.js

@@ -13,6 +13,7 @@ import {
   getComponentDirectoryPath,
   getComponents,
   getComponentDefaults,
+  getPegaServerConfig,
   sanitize,
   validateSemver,
   showVersion
@@ -125,8 +126,34 @@ const validateCompile = async (
     framework = "Constellation";
   }
 
-  const templateDir = `./templates/${framework}/${type}/${sSubType}`;
-  const templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
+  let originalFramework = framework;
+
+  let templateDir = `./templates/${framework}/${type}/${sSubType}`;
+  let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+  if (isLaunchpad) {
+    framework = "Launchpad";
+
+    templateDir = `./templates/${framework}/${type}/${sSubType}`;
+    templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+    // if doesn't exist, revert
+    if (!fs.existsSync(templateDirectory)) {
+      framework = originalFramework;
+
+      templateDir = `./templates/${framework}/${type}/${sSubType}`;
+      templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+    }
+
+  }
+
+
+
 
   if (organization == null) {
    ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));

package/src/tasks/create/templates/Constellation/Field/Boolean/index.jsx.mustache

@@ -65,7 +65,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
     />
   );
 
-  const parentTestId = testId ? `${testId}-parent` : testId;
+  const parentTestId = testId === '' ? `${testId}-parent` : testId;
 
   let displayComponent;
   if (displayMode) {
@@ -138,7 +138,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   additionalProps: {},
   displayMode: null,
   variant: 'inline',

package/src/tasks/create/templates/Constellation/Field/Date/index.jsx.mustache

@@ -222,7 +222,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: "",
   showAsFormattedText: false,
   additionalProps: {},
   displayMode: null,

package/src/tasks/create/templates/Constellation/Field/DateTime/index.jsx.mustache

@@ -218,7 +218,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: "",
   additionalProps: {},
   displayMode: null,
   variant: "inline",

package/src/tasks/create/templates/Constellation/Field/Decimal/index.jsx.mustache

@@ -225,7 +225,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: "",
   decimalPrecision: '',
   showGroupSeparators: false,
   displayMode: null,

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.jsx.mustache

@@ -251,7 +251,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   allowDecimals: true,
   currencyISOCode: 'USD',
   isoCodeSelection: 'constant',
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.jsx.mustache

@@ -243,7 +243,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   decimalPrecision: '',
   showGroupSeparators: false,
   additionalProps: {},

package/src/tasks/create/templates/Constellation/Field/Integer/index.jsx.mustache

@@ -275,7 +275,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   showGroupSeparators: false,
   displayMode: null,
   displayAs: 'input',

package/src/tasks/create/templates/Constellation/Field/Picklist/index.jsx.mustache

@@ -305,7 +305,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   helperText: '',
   datasource: [],
   listType: '',

package/src/tasks/create/templates/Constellation/Field/Text/index.jsx.mustache

@@ -43,7 +43,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null
+  testId: ''
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {

package/src/tasks/create/templates/Constellation/Field/Text-Email/index.jsx.mustache

@@ -199,7 +199,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/src/tasks/create/templates/Constellation/Field/Text-Input/index.jsx.mustache

@@ -204,7 +204,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   fieldMetadata: {},
   additionalProps: {},
   displayMode: null,

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/index.jsx.mustache

@@ -197,7 +197,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   fieldMetadata: {},
   additionalProps: {},

package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.jsx.mustache

@@ -232,7 +232,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   readOnly: false,
   required: false,
   showCountryCode: true,
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/src/tasks/create/templates/Constellation/Field/Text-URL/index.jsx.mustache

@@ -180,7 +180,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/src/tasks/create/templates/Constellation/Field/{TimeOfDay → TimeofDay}/index.jsx.mustache

@@ -183,7 +183,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   required: false,
   pickerInterval: "30",
   clockFormat: 0,
-  testId: null,
+  testId: '',
   additionalProps: {},
   displayMode: null,
   variant: "inline",

package/src/tasks/create/templates/Launchpad/Field/__components.md

@@ -0,0 +1,3 @@
+# The **Field** directory
+
+The **Lanchpad/Field** directory contains the template code for the field components you want to use with the **WebComponents SDK**.

package/src/tasks/create/templates/Launchpad/Template/__components.md

@@ -0,0 +1,3 @@
+# The **Template** directory
+
+The **Launchpad/Field** directory contains the template code for the field components you want to use with the **WebComponents SDK**.

package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache

@@ -0,0 +1,23 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "OneColumnPage.svg",
+  "properties": [
+   {
+      "name": "label",
+      "label": "Label value",
+      "format": "TEXT"
+    }
+  ],
+  "defaultConfig": {
+     "label": "@L $this.label"
+  }
+}

package/src/tasks/create/templates/Launchpad/Widget/CASE/demo.stories.jsx.mustache

@@ -0,0 +1,78 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+
+import historyData from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getConstants = () => {
+  return {
+    CASE_INFO: {
+      CASE_INFO_ID: 'caseInfo.ID'
+    }
+  };
+};
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getDataApiUtils = () => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: 'Case history',
+
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+};
+
+return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/Launchpad/Widget/CASE/index.jsx.mustache

@@ -0,0 +1,76 @@
+/* eslint-disable no-undef */
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Table, Text } from '@pega/cosmos-react-core';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Code for Launchpad
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function {{COMPONENT_CLASS_NAME}}(props) {
+  const { getPConnect, label } = props;
+  const pConn = getPConnect();
+  const [history, setHistory] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const caseID = pConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+  const context = pConn.getContextName();
+
+  const columns = [
+    { renderer: 'date', label: pConn.getLocalizedValue('Date') },
+    { renderer: 'description', label: pConn.getLocalizedValue('Description') },
+    { renderer: 'user', label: pConn.getLocalizedValue('Performed by') }
+  ];
+
+  useEffect(() => {
+    const payload = { dataViewParameters: [{ ObjectID: caseID }] };
+    PCore.getDataApiUtils()
+      .getData('ObjectHistory', payload, context)
+      .then((response) => {
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          setHistory(
+            response.data.data.map((entry, index) => {
+              {{! pick new delimiteres for mustache }}
+              {{=<% %>=}}
+              return {
+                date: new Date(entry.CreateDateTime).toLocaleString(),
+                description: <Text style={{ wordBreak: 'break-word' }}>{entry.MessageText}</Text>,
+                user: entry.PerformerID,
+                id: index
+              };
+              <%={{ }}=%>     {{! revert delimiteres for mustache }}
+            })
+          );
+        } else {
+          setHistory([]);
+        }
+      })
+      .catch(() => {
+        setHistory([]);
+        setIsLoading(false);
+      });
+  }, [caseID, context]);
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <Table
+      title={pConn.getLocalizedValue(label)}
+      columns={columns}
+      data={history}
+      loading={isLoading}
+      loadingMessage={pConn.getLocalizedValue('Loading case history')}
+    />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  getPConnect: PropTypes.func.isRequired
+};