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

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

@@ -0,0 +1,37 @@
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface MultiReferenceReadOnlyProps extends PConnProps {
+  config: { referenceList: any; readonlyContextList: any };
+  label: string;
+  hideLabel: boolean;
+}
+
+export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
+  const { getPConnect, label = '', hideLabel = false, config } = props;
+  const { referenceList, readonlyContextList } = config;
+
+  // When referenceList does not contain selected values, it should be replaced with readonlyContextList while calling SimpleTableManual
+  let readonlyContextObject;
+  if (!PCore.getAnnotationUtils().isProperty(referenceList)) {
+    readonlyContextObject = {
+      referenceList: readonlyContextList
+    };
+  }
+
+  const component = getPConnect().createComponent(
+    {
+      type: 'SimpleTable',
+      config: {
+        ...config,
+        ...readonlyContextObject,
+        label,
+        hideLabel
+      }
+    },
+    '',
+    '',
+    {}
+  ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+
+  return <>{component}</>;
+}

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './NarrowWide.css';
+
+interface NarrowWideProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  a: any;
+  b: 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 NarrowWide(props: PropsWithChildren<NarrowWideProps>) {
+  // const {a, b /*, cols, icon, title */ } = props;
+  const { a, b, children } = props;
+
+  return (
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{children[0]}</div>
+          <div className='psdk-wide-column-column'>{children[1]}</div>
+        </div>
+      )}
+      {a && b && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{a}</div>
+          <div className='psdk-wide-column-column'>{b}</div>
+        </div>
+      )}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,76 @@
+import { createElement } from 'react';
+import Grid, { GridSize } from '@material-ui/core/Grid';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface NarrowWideDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel?: boolean;
+  label: string;
+  showHighlightedData?: boolean;
+}
+
+const COLUMN_WIDTHS = [4, 8];
+
+export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // Set display mode prop and re-create the children so this part of the dom tree renders
+  // in a readonly (display) mode instead of a editable
+  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('readOnly', true);
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(createPConnectComponent(), {
+      ...configObject,
+      // eslint-disable-next-line react/no-array-index-key
+      key: index.toString()
+    })
+  );
+
+  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+  let highlightedDataArr = [];
+  if (showHighlightedData) {
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
+    highlightedDataArr = highlightedData.map(field => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+    });
+  }
+
+  return (
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/NarrowWideDetails/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "NarrowWideDetails",
+    "name": "NarrowWideDetails",
+    "label": "Details (Narrow-wide)",
+    "description": "Details (Narrow-wide) template",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './NarrowWideForm.css';
+
+interface NarrowWideFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function NarrowWideForm(props: PropsWithChildren<NarrowWideFormProps>) {
+  const { children } = props;
+
+  return (
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{children[0]}</div>
+          <div className='psdk-wide-column-column'>{children[1]}</div>
+        </div>
+      )}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/NarrowWideForm/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "NarrowWideForm",
+    "name": "NarrowWideForm",
+    "label": "Narrow-wide",
+    "description": "NarrowWide Template",
+    "type": "Template",
+    "subtype": "FORM",
+    "properties": []
+}

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

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

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

@@ -0,0 +1,28 @@
+import { PropsWithChildren, ReactElement } 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 NarrowWidePageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  templateCol: string;
+  icon: string;
+}
+
+/*
+ * The wrapper handles knowing how to take in just children and mapping
+ * to the Cosmos template.
+ */
+export default function NarrowWidePage(props: PropsWithChildren<NarrowWidePageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NarrowWide = getComponentFromMap('NarrowWide');
+
+  const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  return (
+    <div>
+      <NarrowWide a={childrenToRender[0]} b={childrenToRender[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/NarrowWidePage/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "NarrowWidePage",
+    "name": "NarrowWidePage",
+    "label": "Narrow-wide",
+    "description": "Narrow-wide Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "properties": []
+}

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

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

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

@@ -0,0 +1,32 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface OneColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+const useStyles = makeStyles((/* theme */) => ({
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
+}));
+
+export default function OneColumn(props: PropsWithChildren<OneColumnProps>) {
+  const classes = useStyles();
+
+  const { children } = props;
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} className={classes.colStyles}>
+        {(children as ReactElement[]).map(child => {
+          return child;
+        })}
+      </Grid>
+    </Grid>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/OneColumn/config-ext.json

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

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

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

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

@@ -0,0 +1,17 @@
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface OneColumnPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+/*
+ * The wrapper handles knowing how to take in just children
+ *  and mapping to the TwoColumn template.
+ */
+export default function OneColumnPage(props: OneColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const OneColumn = getComponentFromMap('OneColumn');
+
+  return <OneColumn {...props} />;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/OneColumnPage/config-ext.json

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

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

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

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

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface OneColumnTabProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+export default function OneColumnTab(props: PropsWithChildren<OneColumnTabProps>) {
+  const { children } = props;
+
+  return <div id='OneColumnTab'>{children}</div>;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/OneColumnTab/config-ext.json

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

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

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

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

@@ -0,0 +1,7 @@
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

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

@@ -0,0 +1,171 @@
+import React, { useCallback, useMemo, useState, createElement } from 'react';
+import Button from '@material-ui/core/Button';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import './PromotedFilters.css';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Can't use PromotedFilterProps until getContainerManager() knows about addTransientItem
+//  Currently just expects "object"
+interface PromotedFilterProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  viewName: string;
+  filters: any[];
+  listViewProps: any;
+  pageClass: string;
+  parameters?: object;
+}
+
+const localeCategory = 'SimpleTable';
+const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
+  'TextInput',
+  'Percentage',
+  'Email',
+  'Integer',
+  'Decimal',
+  'Checkbox',
+  'DateTime',
+  'Date',
+  'Time',
+  'Text',
+  'TextArea',
+  'Currency',
+  'URL',
+  'RichText'
+];
+
+function Filters({ filters, transientItemID, localeReference }) {
+  return filters.map((filter, index) => {
+    const filterClone = { ...filter };
+    // convert any field which is not supported to TextInput and delete the placeholder as it may contain placeholder specific to original type.
+    if (!SUPPORTED_TYPES_IN_PROMOTED_FILTERS.includes(filterClone.type)) {
+      filterClone.type = 'TextInput';
+      delete filterClone.config.placeholder;
+    }
+    filterClone.config.contextName = transientItemID;
+    filterClone.config.readOnly = false;
+    filterClone.config.context = transientItemID;
+    filterClone.config.localeReference = localeReference;
+    const c11nEnv = PCore.createPConnect({
+      meta: filterClone,
+      options: {
+        hasForm: true,
+        contextName: transientItemID
+      }
+    });
+
+    // eslint-disable-next-line react/no-array-index-key
+    return <React.Fragment key={index}>{createElement(createPConnectComponent(), c11nEnv)}</React.Fragment>;
+  });
+}
+
+function isValidInput(input) {
+  return Object.values(input).findIndex(v => v) >= 0;
+}
+
+export default function PromotedFilters(props: PromotedFilterProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const { getPConnect, viewName, filters, listViewProps, pageClass, parameters } = props;
+  const [initTable, setInitTable] = useState(false);
+  const [payload, setPayload] = useState({});
+  const filtersProperties = {};
+
+  filters.forEach(filter => {
+    filtersProperties[PCore.getAnnotationUtils().getPropertyName(filter.config.value)] = '';
+  });
+
+  const transientItemID = useMemo(() => {
+    const filtersWithClassID = {
+      ...filtersProperties,
+      classID: pageClass
+    };
+    return getPConnect().getContainerManager().addTransientItem({
+      id: viewName,
+      data: filtersWithClassID
+    });
+  }, []);
+
+  function formatPromotedFilters(promotedFilters) {
+    return Object.entries(promotedFilters).reduce((acc, [field, value]) => {
+      if (value) {
+        acc[field] = {
+          lhs: {
+            field
+          },
+          comparator: 'EQ',
+          rhs: {
+            value
+          }
+        };
+      }
+      return acc;
+    }, {});
+  }
+
+  const getFilterData = useCallback(
+    e => {
+      e.preventDefault(); // to prevent un-intended forms submission.
+
+      const changes = PCore.getFormUtils().getChanges(transientItemID);
+      const formValues = {};
+      Object.keys(changes).forEach(key => {
+        if (!['context_data', 'pageInstructions'].includes(key)) {
+          formValues[key] = changes[key];
+        }
+      });
+      const promotedFilters = formatPromotedFilters(formValues);
+      if (PCore.getFormUtils().isFormValid(transientItemID) && isValidInput(formValues)) {
+        setInitTable(true);
+        const Query: any = {
+          dataViewParameters: parameters
+        };
+
+        if (!isEmptyObject(promotedFilters)) {
+          Query.query = { filter: { filterConditions: promotedFilters } };
+        }
+        setPayload(Query);
+      }
+    },
+    [transientItemID]
+  );
+
+  const clearFilterData = useCallback(() => {
+    PCore.getContainerUtils().clearTransientData(transientItemID);
+    setInitTable(false);
+    getPConnect()?.getListActions?.()?.setSelectedRows([]); // Clear the selection (if any made by user)
+  }, [transientItemID]);
+
+  return (
+    <>
+      <div>{listViewProps.title}</div>
+      <div className='psdk-grid-filter'>
+        <Filters filters={filters} transientItemID={transientItemID} localeReference={listViewProps.localeReference} />
+      </div>
+      <div>
+        <Button key='1' type='button' onClick={clearFilterData} data-testid='clear' variant='contained' color='primary'>
+          {localizedVal('Clear', localeCategory)}
+        </Button>
+        <Button style={{ float: 'right' }} key='2' type='submit' onClick={getFilterData} data-testid='search' variant='contained' color='primary'>
+          {localizedVal('Search', localeCategory)}
+        </Button>
+      </div>
+      {initTable && (
+        <ListView
+          {...listViewProps}
+          title=''
+          payload={payload}
+          isSearchable
+          tableDisplay={{
+            show: initTable
+          }}
+        />
+      )}
+    </>
+  );
+}

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

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