@pega/dx-component-builder-sdk 8.23.16 → 8.23.17

package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTableManual/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTableSelect/SimpleTableSelect.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../../types/PConnProps';
+
+// Need to fix an error noted in comment below before typedefs will work correctly
+// interface SimpleTableSelectProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   label: string,
+//   referenceList: Array<object> | string,
+//   renderMode: string,
+//   showLabel: boolean,
+//   promptedFilters: Array<object>,
+//   viewName: string,
+//   parameters: any,
+//   readonlyContextList: Array<object> | string,
+//   dataRelationshipContext: string
+// }
+
+
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  return parentPropName === referenceProp;
+};
+
+/**
+ * SimpleTable react component
+ * @param {*} props - props
+ */
+export default function SimpleTableSelect(props /* : SimpleTableSelectProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+  const SimpleTable = getComponentFromMap('SimpleTable');
+  const PromotedFilters = getComponentFromMap('PromotedFilters');
+
+  const { label, getPConnect, renderMode = '', showLabel = true, viewName = '', parameters, dataRelationshipContext = null } = props;
+
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+  if (propsToUse.showLabel === false) {
+    propsToUse.label = '';
+  }
+
+  const pConn = getPConnect();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  if (isMultiSelectMode && renderMode === 'ReadOnly') {
+    return <SimpleTable {...props} showLabel={propsToUse.showLabel} />;
+  }
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference = null;
+  if (props.dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  // Need to get this written so typedefs work
+  const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
+    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
+    : pConn.getCurrentPageFieldMetadata(contextPageReference);
+
+  const compositeKeys: Array<any> = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+     compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    }
+  });
+
+  // setting default row height for select table
+  const defaultRowHeight = '2';
+
+  const additionalTableConfig = {
+    rowDensity: false,
+    enableFreezeColumns: false,
+    autoSizeColumns: false,
+    resetColumnWidths: false,
+    defaultFieldDef: {
+      showMenu: false,
+      noContextMenu: true,
+      grouping: false
+    },
+    itemKey: '$key',
+    defaultRowHeight
+  };
+
+  const listViewProps = {
+    ...props,
+    title: propsToUse.label,
+    personalization: false,
+    grouping: false,
+    expandGroups: false,
+    reorderFields: false,
+    showHeaderIcons: false,
+    editing: false,
+    globalSearch: true,
+    toggleFieldVisibility: false,
+    basicMode: true,
+    additionalTableConfig,
+    compositeKeys,
+    viewName,
+    parameters
+  };
+
+  const filters = getPConnect().getRawMetadata().config.promotedFilters ?? [];
+
+  const isSearchable = filters.length > 0;
+
+  if (isSearchable) {
+    return (
+      <PromotedFilters
+        getPConnect={getPConnect}
+        viewName={viewName}
+        filters={filters}
+        listViewProps={listViewProps}
+        pageClass={pageClass}
+        parameters={parameters}
+      />
+    );
+  }
+  return <ListView {...listViewProps} />;
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTableSelect/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Need to fix an error noted in comment below before typedefs will work correctly
+interface SingleReferenceReadOnlyProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  config: any,
+  displayAs?: string,
+  ruleClass?: string,
+  label?: string,
+  displayMode?: string,
+  type: string,
+  referenceType?: string,
+  hideLabel?: boolean,
+  dataRelationshipContext?: string
+}
+
+
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
+  const {
+    getPConnect,
+    displayAs = '',
+    ruleClass = '',
+    label = '',
+    type = '',
+    displayMode = '',
+    referenceType = '',
+    hideLabel = false,
+    dataRelationshipContext = null,
+    config
+  } = props;
+
+  const editableComponents = ["AutoComplete", "SimpleTableSelect", "Dropdown"];
+
+  if (editableComponents.includes(type)) {
+    config.caseClass = ruleClass;
+    config.text = config.primaryField;
+    config.caseID = config.value;
+    config.contextPage = `@P .${dataRelationshipContext}`;
+    config.resourceParams = {
+      "workID": displayAs === "table" ? config.selectionKey : config.value
+    };
+    config.resourcePayload = {
+      "caseClassName": ruleClass
+    };
+  }
+
+  const component = getPConnect().createComponent({
+    type: 'SemanticLink',
+    config: {
+      ...config,
+      label,
+      displayMode,
+      referenceType,
+      hideLabel,
+      dataRelationshipContext
+    }
+  },
+  null, null, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
+
+  return (
+    <React.Fragment>{component}</React.Fragment>
+  )
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/SingleReferenceReadOnly/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/SubTabs/SubTabs.tsx

@@ -0,0 +1,64 @@
+import React, { Fragment, useEffect, useState } from "react";
+import { Tab, Tabs } from "@material-ui/core";
+import { TabContext, TabPanel } from '@material-ui/lab';
+import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
+
+// SubTabs does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface SubTabsProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
+export default function SubTabs(props: SubTabsProps) {
+  const { children = [] } = props;
+
+  const defaultTabIndex = 0;
+  const deferLoadedTabs = children[0];
+  const availableTabs = getVisibleTabs(deferLoadedTabs, "tabsSubs");
+  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
+
+  const [tabItems, setTabitem] = useState<Array<any>>([]);
+  useEffect(() => {
+    const tempTabItems = getTransientTabs(
+      availableTabs,
+      currentTabId,
+      tabItems
+    );
+    setTabitem(tempTabItems);
+  }, [currentTabId]);
+
+
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  return (
+    <Fragment>
+      <TabContext value={currentTabId.toString()}>
+      <Tabs
+        onChange={handleTabClick}
+        value={currentTabId}
+        variant="scrollable"
+        >
+      {tabItems.map((tab:any) =>
+        <Tab
+        key={tab.id}
+        label={tab.name}
+        value={tab.id}
+        />
+  )}
+    </Tabs>
+
+      {
+        tabItems.map((tab:any) => (
+          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
+            <div>{tab.content ? tab.content : "No content exists"}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </Fragment>
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/SubTabs/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "SubTabs",
+    "name": "SubTabs",
+    "label": "Sub tabs",
+    "description": "Sub tabs view",
+    "type": "Template",
+    "subtype": "TAB",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/SubTabs/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/SubTabs/tabUtils.ts

@@ -0,0 +1,71 @@
+
+export const getDeferFriendlyTabs = allTabs => {
+  return allTabs.map(tab => {
+    const theTabCompConfig = tab.getPConnect().getConfigProps();
+    return { type: 'DeferLoad', config: theTabCompConfig };
+  });
+};
+
+export const getVisibleTabs = (allTabs, uuid) => {
+  let index = 0;
+  return allTabs.props
+    .getPConnect()
+    .getChildren()
+    ?.filter(child => {
+      // US-402838: Filter out tab entries if the config object does not contain the visibility attribute or it evaluates to the boolean true,
+      const config = child.getPConnect().getConfigProps();
+
+      // BUG-642335 - adding isChildDeferLoad prop
+      if (child.getPConnect().getComponentName() === 'DeferLoad') {
+        const { name: viewName, deferLoadId = `${viewName}_${uuid}_${index}` } = config;
+        child.getPConnect().registerAdditionalProps({
+          deferLoadId,
+          isChildDeferLoad: true
+        });
+      }
+      index += 1;
+      return !('visibility' in config) || config.visibility === true;
+    });
+};
+
+export const getTransientTabs = (availableTabs, currentTabId, tabItems) => {
+  return (
+    availableTabs?.map((child, i) => {
+      const config = child.getPConnect().getConfigProps();
+      const tabLabel =
+        config.label ||
+        config.inheritedProps?.find(obj => obj.prop === 'label')?.value ||
+        PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      const tabContent = () => {
+        if (i.toString() === currentTabId) {
+          return tabItems?.[i.toString()]?.content
+            ? tabItems?.[i.toString()]?.content
+            : child.getPConnect().getComponent();
+        }
+        return tabItems?.[i.toString()]?.content;
+      };
+      return {
+        name: tabLabel,
+        id: i.toString(),
+        content: tabContent()
+      };
+    }) || []
+  );
+};
+
+export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabItems) => {
+  const currentPConn = availableTabs[currentTabId].getPConnect();
+  const { deferLoadId } = currentPConn.getConfigProps();
+  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());
+
+  setCurrentTabId(id);
+  const index = parseInt(id, 10);
+  if (tabItems[index]?.content === null) {
+    tabItems[index].content = availableTabs[index].getPConnect().getComponent();
+  }
+
+  const nextPConn = availableTabs[id].getPConnect();
+  const { deferLoadId: activeId } = nextPConn?.getConfigProps();
+  PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());
+  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());
+};

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumn/TwoColumn.css

@@ -0,0 +1,13 @@
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumn/TwoColumn.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Grid, GridSize } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+// TwoColumn does NOT have getPConnect. So, no need to extend from PConnProps
+interface TwoColumnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  templateCol?: string
+}
+
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+export default function TwoColumn(props: TwoColumnProps) {
+  const classes = useStyles();
+
+ const {children, templateCol = '1fr 1fr' } = props;
+
+ if (children.length !== 2) {
+  // eslint-disable-next-line no-console
+  console.error( `TwoColumn template sees more than 2 columns: ${children.length}`);
+ }
+
+  // Calculate the size
+  //  Default to assume the 2 columns are evenly split. However, override if templateCol
+  //  (example value: "1fr 1fr")
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
+
+  const colAArray = templateCol.replaceAll(/[a-z]+/g, "").split(/\s/).map(itm => Number(itm));
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
+
+ return (
+   <Grid container spacing={1}>
+     <Grid item xs={12} md={aSize} className={classes.colStyles}>
+       {children[0]}
+     </Grid>
+     <Grid item xs={12} md={bSize} className={classes.colStyles}>
+       {children[1]}
+     </Grid>
+   </Grid>
+ )
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumn/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TwoColumn",
+    "name": "TwoColumn",
+    "label": "Two column",
+    "description": "TwoColumn Template",
+    "type": "Template",
+    "subtype": "FORM",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumn/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnPage/TwoColumnPage.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// TwoColumnPage does NOT have getPConnect. So, no need to extend from PConnProps
+interface TwoColumnPageProps{
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
+/*
+ * The wrapper handles knowing how to take in just children
+ *  and mapping to the TwoColumn template.
+ */
+export default function TwoColumnPage(props: TwoColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TwoColumn = getComponentFromMap('TwoColumn');
+
+  return (
+    <TwoColumn
+      {...props}
+    />
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnPage/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TwoColumnPage",
+    "name": "TwoColumnPage",
+    "label": "Two column",
+    "description": "TwoColumn Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnPage/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnTab/TwoColumnTab.css

@@ -0,0 +1,12 @@
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnTab/TwoColumnTab.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Grid, GridSize } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+// TwoColumnTab does NOT have getPConnect. So, no need to extend from PConnProps
+interface TwoColumnTabProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  templateCol?: string
+}
+
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+export default function TwoColumnTab(props:TwoColumnTabProps) {
+  const classes = useStyles();
+
+ const {children, templateCol = '1fr 1fr'} = props;
+
+ if (children.length !== 2) {
+  // eslint-disable-next-line no-console
+  console.error( `TwoColumn template sees more than 2 columns: ${children.length}`);
+ }
+
+  // Calculate the size
+  //  Default to assume the 2 columns are evenly split. However, override if templateCol
+  //  (example value: "1fr 1fr")
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
+
+  const colAArray = templateCol.replaceAll(/[a-z]+/g, "").split(/\s/).map(itm => Number(itm));
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
+
+ return (
+   <Grid container spacing={1}>
+     <Grid item xs={12} md={aSize} className={classes.colStyles}>
+       {children[0]}
+     </Grid>
+     <Grid item xs={12} md={bSize} className={classes.colStyles}>
+       {children[1]}
+     </Grid>
+   </Grid>
+ )
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnTab/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TwoColumnTab",
+    "name": "TwoColumnTab",
+    "label": "Two column",
+    "description": "Two column",
+    "type": "Template",
+    "subtype": "TAB",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnTab/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/WideNarrow/WideNarrow.css

@@ -0,0 +1,21 @@
+.psdk-wide-narrow-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two columns that float next to each other */
+.psdk-wide-narrow-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+
+}
+
+.psdk-wide-narrow-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/WideNarrow/WideNarrow.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import './WideNarrow.css';
+
+// WideNarrow does NOT have getPConnect. So, no need to extend from PConnProps
+interface WideNarrowProps {
+  // If any, enter additional props that only exist on this component
+  a: any,
+  b: any,
+  children?: Array<any>,
+  // eslint-disable-next-line react/no-unused-prop-types
+  title?: string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  cols?: string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  icon?: string
+}
+
+
+export default function WideNarrow(props: WideNarrowProps) {
+  // const {a, b /*, cols, icon, title */ } = props;
+  const { a, b, children = [] } = props;
+
+  return (
+    <React.Fragment>
+    {children && children.length === 2 &&
+      <div className="psdk-wide-narrow-column">
+        <div className="psdk-wide-column-column">
+          {children[0]}
+        </div>
+        <div className="psdk-narrow-column-column">
+          {children[1]}
+        </div>
+      </div>
+    }
+    {a && b &&
+      <div className="psdk-wide-narrow-column">
+        <div className="psdk-wide-column-column">
+          {a}
+        </div>
+        <div className="psdk-narrow-column-column">
+          {b}
+        </div>
+      </div>
+    }
+    </React.Fragment>
+
+  )
+
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/WideNarrow/index.tsx

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