@pega/custom-dx-components 23.1.10 → 23.1.11

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

@@ -0,0 +1,231 @@
+// @ts-nocheck
+import { useState, useEffect, Fragment } from 'react';
+import {
+  Link,
+  Button,
+  Popover,
+  useOuterEvent,
+  useElement,
+  Progress,
+  FormField,
+  useTheme
+} from '@pega/cosmos-react-core';
+import { Glimpse } from '@pega/cosmos-react-work';
+import { EmailDisplay } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import type { PConnFieldProps } from './PConnProps';
+
+import Avatar from './Avatar';
+
+// interface for props
+interface {{COMPONENT_CLASS_NAME}}OperatorProps 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;
+
+export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
+  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 = useTheme();
+
+  /* If the id has changed, we need to reset the popover */
+  useEffect(() => {
+    pTarget = null;
+  }, [id]);
+
+
+  {{! pick new delimiters for mustache }}
+  {{=<% %>=}}
+
+  const OperatorPreview = () => {
+    let localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    let 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 {
+      localizedVal = PCore.getLocaleUtils().getLocaleValue;
+      localeCategory = 'Operator';
+      return PCore.getUserApi()
+        .getOperatorDetails(id, true)
+        .then(res => {
+          if (res.data?.data && res.data.data[0].BusinessID && res.data.data[0].Name) {
+            const fields = [];
+            if (res.data.data[0].Name)
+              fields.push({
+                id: 'Name',
+                name: localizedVal('Name', localeCategory),
+                value: res.data.data[0].Name
+              });
+            if (res.data.data[0].BusinessID)
+              fields.push({
+                id: 'Email',
+                name: localizedVal('Email address', localeCategory),
+                value: <EmailDisplay value={res.data.data[0].BusinessID} />
+              });
+
+              setIsLoading(false);
+              setpopoverContent(
+                <Glimpse
+                  heading={{
+                    primary: res.data.data[0].Name,
+                    secondary: res.data.data[0].BusinessID,
+                    visual: (
+                      <Avatar
+                        metaObj={{
+                          image: '',
+                          name: res.data.data[0].Name
+                        }}
+                      />
+                    )
+                  }}
+                  fields={fields}
+                  target={pTarget}
+                  onDismiss={() => {pTarget = null;})}
+                />
+              );
+
+          }
+        });
+
+    }
+  };
+
+  <%={{ }}=%>     {{! revert delimiters for mustache }}
+
+  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}></Avatar>
+        </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;
+};
+
+Operator.propTypes = {
+  name: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  testId: PropTypes.string,
+  helperText: PropTypes.string,
+  metaObj: PropTypes.object
+};
+
+Operator.defaultProps = {
+  name: '',
+  id: '',
+  label: null,
+  testId: null,
+  helperText: null,
+  metaObj: null
+};

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/PConnProps.d.ts.mustache

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

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

@@ -0,0 +1,76 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+import { configProps, operatorDetails } from './mock';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: configProps.label,
+    createLabel: configProps.createLabel,
+    updateLabel: configProps.updateLabel,
+    createOperator: configProps.createOperator,
+    updateOperator: configProps.updateOperator,
+    createDateTime: configProps.createDateTime,
+    updateDateTime: configProps.updateDateTime,
+    hideLabel: configProps.hideLabel,
+
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getCaseSummary: () => {
+          return {
+            user: configProps.updateOperator.userId,
+            dateTimeValue: configProps.updateDateTime
+          }
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+};
+
+return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,89 @@
+import { Fragment } from 'react';
+import { DateTimeDisplay, Card, CardHeader, CardContent, Flex } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+import type { PConnFieldProps } from './PConnProps';
+
+// includes in bundle
+import Operator from './Operator';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// interface for props
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  title: string;
+  createLabel: string;
+  updateLabel: string;
+}
+
+// Created 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: {{COMPONENT_CLASS_NAME}}Props) {
+
+  const {
+    getPConnect,
+    title,
+    label,
+    createLabel,
+    updateLabel
+  } = props;
+
+
+  const { createTime, createdBy, lastUpdateTime, lastUpdatedBy } = getPConnect().getCaseSummary();
+
+  const [_label, user, dateTimeValue] =
+    label === 'Create operator'
+      ? [createLabel, createdBy, createTime]
+      : [updateLabel, lastUpdatedBy, lastUpdateTime];
+
+
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Card>
+      <CardHeader>{title}</CardHeader>
+      <CardContent>
+{{! pick new delimiters for mustache }} {{=<% %>=}}
+      <Flex container={{ direction: 'row'}}>
+      <Operator label={_label} name={user} id={user} getPConnect={getPConnect} value={undefined} validatemessage='' hideLabel={false} readOnly={false} required={false} disabled={false} externalUser={undefined} />
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      {dateTimeValue && (
+        <Fragment>
+          {' '}
+          <DateTimeDisplay value={dateTimeValue} variant='relative' />
+        </Fragment>
+      )}
+      </Flex>
+      </CardContent>
+      </Card>
+
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  "label": "Create operator",
+  "title": "Create operator",
+  createLabel: null,
+  updateLabel: null
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  title: PropTypes.string,
+  createLabel: PropTypes.string,
+  updateLabel: PropTypes.string
+};
+
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+// const comparisonFn = (prevProps, nextProps) => {
+//   return prevProps.updateDateTime === nextProps.updateDateTime;
+// };

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/mock.ts.mustache

@@ -0,0 +1,52 @@
+// @ts-nocheck
+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/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/styles.ts.mustache

@@ -0,0 +1,15 @@
+
+// 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/src/tasks/create-all/index.js

@@ -53,7 +53,7 @@ export const compileMustacheTemplates = async (
   const componentClassName = convertIntoPascalCase(componentKey);
 
   const isTemplate = type === 'Template';
-  const isPicklist = subtype === 'Picklist';
+
   const isBool = subtype === 'Boolean';
   const isPhone = subtype === 'Phone';
 
@@ -76,9 +76,17 @@ export const compileMustacheTemplates = async (
       case 'Text-Input':
         mustacheSubType = 'Text';
         break;
+      case 'Picklist-Autocomplete':
+        mustacheSubType = 'Picklist';
+        break;
+      case 'Picklist-RadioButtons':
+        mustacheSubType = 'Picklist';
+        break;
     }
   }
 
+  const isPicklist = subtype === 'Picklist';
+
   if (allowedApplications.trim() === '') {
     allowedApplications = [];
   } else {

package/src/tasks/index.js

@@ -13,5 +13,5 @@ export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';
 export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
-export { default as buildComponent } from './build/index.js';
+export { default as buildComponent } from './build-comp/index.js';
 export { default as buildAllComponents } from './build-all/index.js';

package/src/tasks/init/helper.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { sanitize, validateSemver } from '../../util.js';
 
 export const getInitProjectQuestions = () => {

package/src/tasks/init/index.js

@@ -7,11 +7,16 @@ import { exec } from 'child_process';
 import chalk from 'chalk';
 import { execa } from 'execa';
 import ncp from 'ncp';
-import Listr from 'listr';
+import { Listr } from 'listr2';
 import gitignore from 'gitignore';
 import inquirer from 'inquirer';
 
-import { compileMustacheTemplate, isPascalCase, convertIntoPascalCase, sanitize } from '../../util.js';
+import {
+  compileMustacheTemplate,
+  isPascalCase,
+  convertIntoPascalCase,
+  sanitize
+} from '../../util.js';
 
 import { getInitProjectQuestions } from './helper.js';
 
@@ -21,7 +26,7 @@ const copy = promisify(ncp);
 const writeGitignore = promisify(gitignore.writeFile);
 const writeFile = promisify(fs.writeFile);
 
-const createGitignore = async (options) => {
+const createGitignore = async options => {
   const file = fs.createWriteStream(path.join(options.targetDirectory, '.gitignore'), {
     flags: 'a'
   });
@@ -31,13 +36,13 @@ const createGitignore = async (options) => {
   });
 };
 
-const createLicense = async (options) => {
+const createLicense = async options => {
   const targetPath = path.join(options.targetDirectory, 'LICENSE');
   const licenseContent = 'Enter license text here';
   return writeFile(targetPath, licenseContent, 'utf8');
 };
 
-const copyProjectTemplate = async (options) => {
+const copyProjectTemplate = async options => {
   await copy(options.templateDirectory, options.targetDirectory, {
     clobber: false
   });
@@ -68,7 +73,7 @@ const copyProjectTemplate = async (options) => {
   await createLicense(options);
 };
 
-const initGit = async (options) => {
+const initGit = async options => {
   const result = await execa('git', ['init'], {
     cwd: options.targetDirectory
   });
@@ -77,13 +82,16 @@ const initGit = async (options) => {
   }
 };
 
-export default async (options) => {
-  options.templateDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'template');
+export default async options => {
+  options.templateDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    'template'
+  );
   let projectName = 'test';
 
   const questions = getInitProjectQuestions();
 
-  await inquirer.prompt(questions).then(async (answers) => {
+  await inquirer.prompt(questions).then(async answers => {
     projectName = answers.projectName;
     projectName = sanitize(projectName).toLowerCase();
     options = { ...options, ...answers };
@@ -99,7 +107,10 @@ export default async (options) => {
 
     const targetDirectory = options.targetDirectory || process.cwd();
     options.targetDirectory = path.join(targetDirectory, projectName);
-    options.componentDirectory = path.join(options.targetDirectory, 'node_modules/@pega/custom-dx-components');
+    options.componentDirectory = path.join(
+      options.targetDirectory,
+      'node_modules/@pega/custom-dx-components'
+    );
   });
 
   const installDependenciesText = `Installing dependencies. This will take a couple of minutes.`;
@@ -121,16 +132,18 @@ export default async (options) => {
       },
       {
         title: installDependenciesText,
-        task: () => execPromise('npm i --force --production=false', { cwd: options.targetDirectory })
+        task: () =>
+          execPromise('npm i --force --production=false', { cwd: options.targetDirectory })
       },
       {
         title: 'Installing tasks dependencies',
-        task: () => execPromise('npm i --force --production=false', { cwd: options.componentDirectory })
-      },
-      {
+        task: () =>
+          execPromise('npm i --force --production=false', { cwd: options.componentDirectory })
+      }
+      /* {
         title: 'Installing quick run',
         task: () => execPromise('npm i -g npm-quick-run', { cwd: options.targetDirectory })
-      }
+      } */
     ],
     {
       exitOnError: false
@@ -139,7 +152,9 @@ export default async (options) => {
 
   await tasks.run();
   console.log('\n');
-  console.log(`${chalk.green('Success!!')} Project created at ${chalk.blueBright(options.targetDirectory)}`);
+  console.log(
+    `${chalk.green('Success!!')} Project created at ${chalk.blueBright(options.targetDirectory)}`
+  );
   console.log(
     '\n',
     `Inside that directory, you can run several commands:`,