@pega/dx-component-builder-sdk 0.23.10 → 0.23.11

package/tests/assets/sdk-r/components/create/override-sdk/infra/Stages/Stages.tsx

@@ -0,0 +1,118 @@
+import { Breadcrumbs, Card, Typography } from '@material-ui/core';
+import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
+import DoneIcon from '@material-ui/icons/Done';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface StagesProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  stages: any[];
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  completedStage: {
+    color: theme.palette.text.primary
+  },
+  currentStage: {
+    color: theme.palette.info.dark,
+    fontWeight: 600
+  },
+  futureStage: {
+    color: theme.palette.text.secondary
+  },
+  separatorIcon: {
+    color: theme.palette.text.disabled
+  }
+}));
+
+/**
+ * API to filter out the alternate stages which are not in active and return all other stages
+ * @param {Array} stages - Stages of a case type
+ *
+ * @returns {Array} - Returns stages which are non alternate stages and alternate stage which is active.
+ */
+function getFilteredStages(stages) {
+  if (!Array.isArray(stages)) {
+    return [];
+  }
+
+  return stages.filter(stage => stage.type !== 'Alternate' || (stage.type === 'Alternate' && stage.visited_status === 'active'));
+}
+
+/* TODO - this component should be refactored and not exposed as top level DX Component -
+  the stages should be created as part of the CaseView */
+export default function Stages(props: StagesProps) {
+  const classes = useStyles();
+
+  const { getPConnect, stages } = props;
+  const pConn = getPConnect();
+  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
+
+  const filteredStages = getFilteredStages(stages);
+  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
+  const stagesObj = filteredStages.map((stage, index, arr) => {
+    const theID = stage.ID || stage.id;
+    return {
+      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
+      id: theID,
+      complete: stage.visited_status === 'completed',
+      current: theID === currentStageID,
+      last: index === arr.length - 1
+    };
+  });
+
+  // debugging/investigation help
+  // console.log(`Stages: current: ${currentStageID} stagesObj: ${JSON.stringify(stagesObj)}`);
+
+  function getStage(stage, index) {
+    //  Removing nested ternary for lint
+    // const theClass = stage.current ? classes.currentStage : (stage.complete ? classes.completedStage : classes.futureStage);
+    let theClass;
+    if (stage.current) {
+      theClass = classes.currentStage;
+    } else if (stage.complete) {
+      theClass = classes.completedStage;
+    } else {
+      theClass = classes.futureStage;
+    }
+
+    return (
+      <span key={index}>
+        {stage.complete ? <DoneIcon color='disabled' fontSize='small' /> : null}
+        <Typography variant='h5' component='span' display='inline' className={theClass}>
+          {stage.name}
+        </Typography>
+      </span>
+    );
+  }
+
+  function getStages(inStages) {
+    return (
+      <Breadcrumbs aria-label='stages' separator={<DoubleArrowIcon className={classes.separatorIcon} />}>
+        {inStages.map((stage, index) => {
+          return getStage(stage, index);
+        })}
+      </Breadcrumbs>
+    );
+  }
+
+  return (
+    <Card id='Stages' className={classes.root}>
+      {/* Stages<br />
+      currentStageID: {currentStageID}<br />
+      {JSON.stringify(stagesObj)}<br /><br /> */}
+      {getStages(stagesObj)}
+    </Card>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/Stages/index.tsx

@@ -0,0 +1 @@
+export { default } from './Stages';

package/tests/assets/sdk-r/components/create/override-sdk/infra/VerticalTabs/VerticalTabs.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// VerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
+interface VerticalTabsProps {
+  // If any, enter additional props that only exist on this component
+  tabconfig: any[];
+}
+
+// The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)
+//  So, we're going to make the selected vertical tab indicator use a color from our theme.
+const useStyles = makeStyles(theme => ({
+  tabs: {
+    '& div > span': {
+      backgroundColor: theme.palette.info.dark,
+      width: '3px'
+    }
+  }
+}));
+
+// Implementation of custom event inspired by:
+//  https://betterprogramming.pub/master-your-react-skills-with-event-listeners-ebc01dde4fad
+const createCustomEvent = (eventName: string, additionalData: { [key: string]: string }): CustomEvent | null => {
+  if (window) {
+    return new CustomEvent(eventName, {
+      detail: { additionalData }
+    });
+  }
+
+  return null;
+};
+
+export default function VerticalTabs(props: VerticalTabsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const LeftAlignVerticalTab = getComponentFromMap('LeftAlignVerticalTabs');
+
+  // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig
+  const { tabconfig = [] } = props;
+  const classes = useStyles();
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const eventData = { itemClicked: value.toString() };
+    const myEvent = createCustomEvent('VerticalTabClick', eventData);
+
+    if (myEvent !== null) {
+      document.dispatchEvent(myEvent);
+    }
+  }, [value]);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div id='VerticalTabs'>
+      {/* VerticalTabs: {JSON.stringify(tabconfig)} */}
+      <Tabs className={classes.tabs} orientation='vertical' value={value} onChange={handleChange}>
+        {tabconfig.map(tab => (
+          <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />
+        ))}
+      </Tabs>
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/VerticalTabs/index.tsx

@@ -0,0 +1 @@
+export { default } from './VerticalTabs';

package/tests/assets/sdk-r/components/create/override-sdk/infra/View/View.css

@@ -0,0 +1,8 @@
+.template-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: calc(0.9375rem);
+  font-weight: 600;
+  margin-bottom: 5px;
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/View/View.tsx

@@ -0,0 +1,159 @@
+import { PropsWithChildren } from 'react';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Need to import any templates that we might render
+
+import './View.css';
+
+interface ViewProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  template?: string;
+  label?: string;
+  showLabel: boolean;
+  mode?: string;
+  title?: string;
+  visibility?: boolean;
+  name?: string;
+  bInForm?: boolean;
+}
+
+//
+// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+// is totally at your own risk.
+//
+
+const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails',
+  'Confirmation',
+  'DynamicTabs'
+];
+
+export default function View(props: PropsWithChildren<ViewProps>) {
+  const { children, template, getPConnect, mode, visibility, name: pageName } = props;
+  let { label = '', showLabel = false } = props;
+
+  // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
+  // Putting this logic here instead of copy/paste in every Form template index.js
+
+  const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
+  label = inheritedProps.label || label;
+  showLabel = inheritedProps.showLabel || showLabel;
+
+  const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
+  if (isEmbeddedDataView && showLabel === undefined) {
+    showLabel = true;
+  }
+
+  const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
+  // As long as the template is defined in the dependencies of the view
+  // it will be loaded, otherwise fall back to single column
+  if (visibility === false) {
+    return '';
+  }
+
+  // As long as the template is defined in the dependencies of the view
+  // it will be loaded, otherwise fall back to single column
+  //  JA - React SDK not using LazyComponentMap yet
+  if (template /* && LazyComponentMap[template] */) {
+    // const ViewTemplate = LazyComponentMap[template];
+    const ViewTemplate: any = getComponentFromMap(template);
+
+    if (template === 'ListView') {
+      // special case for ListView - add in a prop
+      const bInForm = true;
+      props = { ...props, bInForm };
+    }
+
+    // for debugging/investigation
+    // console.log(`View rendering template: ${template}`);
+
+    // spreading because all props should go to the template
+    let RenderedTemplate = (
+      <ViewTemplate key={key} {...props}>
+        {children}
+      </ViewTemplate>
+    );
+
+    if (FORMTEMPLATES.includes(template) && showLabel) {
+      // Original:
+      // RenderedTemplate = (
+      //   <FieldGroup name={label} style={{ marginBlockStart: "1rem" }}>
+      //     {RenderedTemplate}
+      //   </FieldGroup>
+      // );
+      RenderedTemplate = (
+        <div
+          data-name='RenderedTemplate'
+          data-template-type={template}
+          /* name */ id='label'
+          style={{ marginBlockStart: '1rem' }}
+          className='grid-column'
+        >
+          {RenderedTemplate}
+        </div>
+      );
+    }
+
+    return (
+      <div className='grid-column'>
+        {showLabel && !NO_HEADER_TEMPLATES.includes(template) && (
+          <div className='template-title-container'>
+            <span>{label}</span>
+          </div>
+        )}
+        {RenderedTemplate}
+      </div>
+    );
+  }
+
+  // debugging/investigation help
+  // console.log(`View about to render React.Fragment for children: ${children}`);
+
+  if (children) {
+    return <>{children}</>;
+  }
+
+  return null;
+}
+
+// Adapted from Constellation DX Component to add in additional props for some templates
+View.additionalProps = (state, getPConnect) => {
+  const thePConn = getPConnect();
+  const { template } = thePConn.getConfigProps();
+
+  let propObj = {};
+  let allFields = {};
+
+  switch (template) {
+    case 'CaseSummary':
+      allFields = getAllFields(thePConn);
+      // eslint-disable-next-line no-case-declarations
+      const unresFields = {
+        primaryFields: allFields[0],
+        secondaryFields: allFields[1]
+      };
+      propObj = thePConn.resolveConfigProps(unresFields);
+      break;
+
+    case 'Details':
+      allFields = getAllFields(thePConn);
+      propObj = { fields: allFields[0] };
+      break;
+
+    default:
+      break;
+  }
+
+  return propObj;
+};

package/tests/assets/sdk-r/components/create/override-sdk/infra/View/index.tsx

@@ -0,0 +1 @@
+export { default } from './View';

package/tests/assets/sdk-r/components/create/override-sdk/infra/_infra.md

@@ -0,0 +1,6 @@
+# The **override-sdk/infra** directory
+
+The **src/components/override-sdk/infra** directory contains the code for **infrastructure** components for which you want to override the default implementation for use with the **React SDK**.
+
+When run the **npm run  create** command to override the default implementation of an **infrastructure** component, the generated code that you can use as a
+starting point for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk/infra**.

package/tests/assets/sdk-r/components/create/override-sdk/template/AppShell/AppShell.css

@@ -0,0 +1,39 @@
+.appshell-top {
+  display: flex;
+  background-color: var(--app-background-color);
+}
+
+.appshell-main {
+  position: relative;
+  min-height: 100vh;
+  display: block;
+  width: 100%;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: whitesmoke;
+  position: fixed;
+  z-index: 999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}
+
+::ng-deep snack-bar-container.snackbar-newline {
+  white-space: pre-line;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/AppShell/AppShell.tsx

@@ -0,0 +1,210 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './AppShell.css';
+
+interface AppShellProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showAppName: boolean;
+  pages: {
+    pxPageViewIcon: string;
+    pyClassName: string;
+    pyLabel: string;
+    pyRuleName: string;
+    pyURLContent: string;
+  }[];
+  caseTypes?: object[];
+  portalTemplate: string;
+  portalName: string;
+  portalLogo: string;
+  navDisplayOptions: { alignment: string; position: string };
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex'
+  },
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2)
+  },
+  wsscontent: {
+    flexGrow: 1,
+    height: '100vh',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1)
+  }
+}));
+
+export default function AppShell(props: PropsWithChildren<AppShellProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NavBar = getComponentFromMap('NavBar');
+  const WssNavBar = getComponentFromMap('WssNavBar');
+
+  const { pages = [], caseTypes = [], showAppName, children = [], getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
+
+  const [open, setOpen] = useState(true);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [activeTab, setActiveTab] = useState(!pages ? null : pages[0]?.pyRuleName);
+  const pConn = getPConnect();
+  const envInfo = PCore.getEnvironmentInfo();
+  const imageKey = envInfo.getOperatorImageInsKey();
+  const userName = envInfo.getOperatorName();
+  const currentUserInitials = Utils.getInitials(userName);
+  const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
+  const portalClass = pConn.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
+  const envPortalName = envInfo.getPortalName();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+
+  const classes = useStyles();
+  const actionsAPI = pConn.getActionsApi();
+  const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
+  // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [appName, setAppName] = useState('');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [mapChildren, setMapChildren] = useState([]);
+
+  // Initial setting of appName and mapChildren
+  useEffect(() => {
+    setAppName(PCore.getEnvironmentInfo().getApplicationName());
+
+    const tempMap: any = (pConn.getChildren() as any)?.map((child: any, index) => {
+      const theChildComp = child.getPConnect().getComponentName();
+      const theKey = `.${index}`;
+      return (
+        <div id={theChildComp} key={theKey} style={{ border: 'solid 1px silver', margin: '1px' }}>
+          {theChildComp} will be here
+        </div>
+      );
+    });
+
+    setMapChildren(tempMap);
+  }, []);
+
+  const [iconURL, setIconURL] = useState('');
+  const [fullIconURL, setFullIconURL] = useState('');
+  useEffect(() => {
+    // using the default icon then fetch it from the static folder (not auth involved)
+    if (
+      !portalLogo ||
+      portalLogo.toLowerCase().includes('pzpega-logo-mark') ||
+      portalLogo.toLowerCase().includes('py-logo') ||
+      portalLogo.toLowerCase().includes('py-full-logo')
+    ) {
+      const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
+      setIconURL(portalLogoImage);
+      setFullIconURL(`${Utils.getSDKStaticConentUrl()}static/py-full-logo.svg`);
+    }
+    // not using default icon to fetch it using the way which uses authentication
+    else {
+      PCore.getAssetLoader()
+        .getSvcImage(portalLogo)
+        .then(blob => window.URL.createObjectURL(blob))
+        .then(data => {
+          setIconURL(data);
+          setFullIconURL(data);
+        })
+        .catch(() => {
+          // eslint-disable-next-line no-console
+          console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
+        });
+    }
+  }, [portalLogo]);
+
+  useEffect(() => {
+    if (imageKey && portalTemplate === 'wss') {
+      PCore.getAssetLoader()
+        .getSvcImage(imageKey)
+        .then(blob => window.URL.createObjectURL(blob))
+        .then(imagePath => setImageBlobUrl(imagePath));
+    }
+  }, []);
+
+  const getOperator = () => {
+    return {
+      avatar: portalTemplate !== 'wss' ? <Avatar /> : { name: userName, imageSrc: imageBlobUrl },
+      name: userName,
+      currentUserInitials
+    };
+  };
+
+  function showPage(viewName, className) {
+    actionsAPI.showPage(viewName, className);
+  }
+
+  function openURL(URL) {
+    window.open(URL, '_blank');
+  }
+
+  const links = !pages
+    ? []
+    : pages.map(page => {
+        const name = localizedVal(page.pyLabel, '', localeReference);
+        return {
+          text: name,
+          name,
+          icon: page.pxPageViewIcon.replace('pi pi-', ''),
+          active: page.pyRuleName === activeTab,
+          onClick: () => (!page.pyURLContent || page.pyURLContent === '' ? showPage(page.pyRuleName, page.pyClassName) : openURL(page.pyURLContent))
+        };
+      });
+
+  if (pConn.hasChildren()) {
+    // const theChildren = pConn.getChildren();
+    // const mapChildCompNames = theChildren.map((child) => { return child.getPConnect().getComponentName()});
+    // debugging/investigation help
+    // console.log(`AppShell has children: ${theChildren.length}`);
+    // console.log(`--> ${mapChildCompNames.map((name) => {return name;})}`);
+  }
+
+  if (portalTemplate === 'wss') {
+    return (
+      <div id='AppShell'>
+        <WssNavBar
+          portalName={portalName}
+          imageSrc={iconURL}
+          fullImageSrc={fullIconURL}
+          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          appInfo={{
+            imageSrc: iconURL,
+            appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
+            onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
+          }}
+          navLinks={links.filter((link, index) => {
+            return index !== 0;
+          })}
+          operator={getOperator()}
+          navDisplayOptions={navDisplayOptions}
+        />
+        <div className={classes.wsscontent}>{children}</div>
+      </div>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <NavContext.Provider value={{ open, setOpen }}>
+      <div id='AppShell' className={classes.root}>
+        <NavBar
+          getPConnect={getPConnect}
+          pConn={getPConnect()}
+          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          pages={pages}
+          caseTypes={caseTypes}
+        />
+        <div className={classes.content}>{children}</div>
+      </div>
+    </NavContext.Provider>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/AppShell/index.tsx

@@ -0,0 +1 @@
+export { default } from './AppShell';

package/tests/assets/sdk-r/components/create/override-sdk/template/BannerPage/BannerPage.tsx

@@ -0,0 +1,54 @@
+import { Children, PropsWithChildren, useMemo } from 'react';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface BannerPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  heading?: string;
+  message?: string;
+  imageTheme?: string;
+  backgroundImage?: string;
+  backgroundColor?: string;
+  tintImage?: boolean;
+}
+
+/*
+ * BannerPage template.
+ */
+export default function BannerPage(props: PropsWithChildren<BannerPageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const Banner = getComponentFromMap('Banner');
+
+  const {
+    children,
+    layout = 'two-column',
+    heading = '',
+    message = '',
+    imageTheme = 'light',
+    backgroundImage = '',
+    backgroundColor = '',
+    tintImage = false
+  } = props;
+
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  return (
+    <Banner
+      variant={layout}
+      a={childArray[0]}
+      b={childArray[1]}
+      banner={{
+        variant: imageTheme,
+        backgroundColor,
+        title: heading,
+        message,
+        backgroundImage,
+        tintImage
+      }}
+    />
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/BannerPage/index.tsx

@@ -0,0 +1 @@
+export { default } from './BannerPage';