@pega/react-sdk-overrides 0.23.26 → 0.23.27

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,11 +1,22 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
+import { createElement } from 'react';
 import Grid from '@material-ui/core/Grid';
+
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface DetailsThreeColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  showHighlightedData: boolean;
+}
+
+export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
 
-export default function DetailsThreeColumn(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+  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() };
@@ -14,20 +25,18 @@ export default function DetailsThreeColumn(props) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = getPConnect()
-    .getChildren()
-    .map((configObject, index) =>
-      createElement(createPConnectComponent(), {
-        ...configObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-      })
-    );
+  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().config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map(field => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 
@@ -37,7 +46,7 @@ export default function DetailsThreeColumn(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
     });
   }
 
@@ -62,16 +71,3 @@ export default function DetailsThreeColumn(props) {
     </FieldGroup>
   );
 }
-
-DetailsThreeColumn.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-DetailsThreeColumn.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/Details/DetailsThreeColumn/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Details (Three column)",
   "type": "Template",
   "subtype": "DETAILS",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,11 +1,22 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
+import { createElement } from 'react';
 import Grid from '@material-ui/core/Grid';
+
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface DetailsTwoColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  showHighlightedData: boolean;
+}
+
+export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
 
-export default function DetailsTwoColumn(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+  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() };
@@ -14,20 +25,18 @@ export default function DetailsTwoColumn(props) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = getPConnect()
-    .getChildren()
-    .map((configObject, index) =>
-      createElement(createPConnectComponent(), {
-        ...configObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-      })
-    );
+  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().config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map(field => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 
@@ -37,7 +46,7 @@ export default function DetailsTwoColumn(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -62,16 +71,3 @@ export default function DetailsTwoColumn(props) {
     </FieldGroup>
   );
 }
-
-DetailsTwoColumn.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-DetailsTwoColumn.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/Details/DetailsTwoColumn/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Details (Two column)",
   "type": "Template",
   "subtype": "DETAILS",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/Details/DetailsTwoColumn/index.tsx

@@ -1 +1 @@
-export { default } from './DetailsTwoColumn';
+export { default } from './DetailsTwoColumn';

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -0,0 +1,79 @@
+import React, { Children, useMemo, useState } from 'react';
+import { makeStyles, Tab, Tabs } from '@material-ui/core';
+import { TabContext, TabPanel } from '@material-ui/lab';
+
+import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+const useStyles = makeStyles(() => ({
+  tab: {
+    minWidth: '72px'
+  }
+}));
+
+interface DynamicTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  referenceList?: any[];
+}
+
+function DynamicTabs(props: DynamicTabsProps) {
+  const classes = useStyles();
+  const { referenceList, showLabel, label, getPConnect } = props;
+  const pConnect = getPConnect();
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
+  const defaultTabIndex = 0;
+  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
+  const { tablabel } = pConnect.getComponentConfig();
+  const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
+  const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+  const memoisedTabViews = useMemo(() => {
+    pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');
+    pConnect.setInheritedProp('readOnly', true);
+
+    return (
+      referenceListData &&
+      Children.toArray(
+        referenceListData.map((item, index) => {
+          return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;
+        })
+      )
+    );
+  }, [referenceListData]);
+  const [panelShown, changePanel] = useState(defaultTabIndex);
+  const handleTabClick = (e, id) => {
+    changePanel(parseInt(id, 10));
+  };
+  // Loop over the tab contents and and pull out the labels for the navigation
+  const tabItems =
+    referenceListData?.map((item, i) => {
+      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      return {
+        name: currentTabLabel,
+        id: i
+      };
+    }) || [];
+
+  return (
+    <>
+      {propsToUse.label && <h3 id='dynamic-tabs-title'>{propsToUse.label}</h3>}
+      <TabContext value={panelShown.toString()}>
+        <Tabs onChange={handleTabClick} value={panelShown} variant='scrollable' scrollButtons='auto' indicatorColor='primary' id='dynamic-tabs'>
+          {tabItems.map((tab: any) => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />
+          ))}
+        </Tabs>
+
+        {tabItems.map((tab: any) => (
+          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id='dynamic-tabpanel'>
+            <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}
+
+export default DynamicTabs;

package/lib/template/Details/DynamicTabs/config.json

@@ -0,0 +1,36 @@
+{
+  "name": "DynamicTabs",
+  "label": "Dynamic tabs (list)",
+  "description": "Dynamic tabs (list)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "DynamicTabs.svg",
+  "hideTemplateEdit": true,
+  "hideFromTemplatePicker": true,
+  "viewHeadingLabel": "Default heading",
+  "properties": [
+    {
+      "name": "referenceList",
+      "label": "Data page",
+      "format": "CONTENTPICKERSOURCE"
+    },
+    {
+      "name": "parameters",
+      "label": "Parameters",
+      "format": "PARAMETERS",
+      "showOverride": false
+    },
+    {
+      "name": "tablabel",
+      "label": "Tab label",
+      "format": "PROPERTY",
+      "ofContextClass": true
+    },
+    {
+      "format": "VIEWPICKER",
+      "name": "Views",
+      "label": "Tab content",
+      "ofContextClass": true
+    }
+  ]
+}

package/lib/template/Details/DynamicTabs/index.tsx

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

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,21 +1,34 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { useMemo } from 'react';
 
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
-import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroupList';
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare const PCore: any;
+interface FieldGroupTemplateProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  referenceList?: any[];
+  contextClass: string;
+  renderMode?: string;
+  heading?: string;
+  lookForChildInConfig?: boolean;
+  displayMode?: string;
+  fieldHeader?: string;
+  allowTableEdit: boolean;
+}
+
+export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+  const FieldGroupList = getComponentFromMap('FieldGroupList');
 
-export default function FieldGroupTemplate(props) {
   const {
-    referenceList,
+    referenceList = [],
     renderMode,
     contextClass,
     getPConnect,
     lookForChildInConfig,
-    heading,
+    heading = '',
     displayMode,
     fieldHeader,
     allowTableEdit: allowAddEdit
@@ -38,7 +51,7 @@ export default function FieldGroupTemplate(props) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+      pConn.getListActions().insert({}, referenceList.length);
     }
   };
 
@@ -60,10 +73,7 @@ export default function FieldGroupTemplate(props) {
     const MemoisedChildren = useMemo(() => {
       return referenceList.map((item, index) => ({
         id: index,
-        name:
-          fieldHeader === 'propertyRef'
-            ? getDynamicHeaderProp(item, index)
-            : `${HEADING} ${index + 1}`,
+        name: fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`,
         children: buildView(pConn, index, lookForChildInConfig)
       }));
     }, [referenceList?.length]);
@@ -82,10 +92,7 @@ export default function FieldGroupTemplate(props) {
     return referenceList.map((item, index) => {
       const key = item[heading] || `field-group-row-${index}`;
       return (
-        <FieldGroup
-          key={key}
-          name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
-        >
+        <FieldGroup key={key} name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}>
           {buildView(pConn, index, lookForChildInConfig)}
         </FieldGroup>
       );
@@ -94,20 +101,3 @@ export default function FieldGroupTemplate(props) {
 
   return <div>{memoisedReadOnlyList}</div>;
 }
-
-FieldGroupTemplate.defaultProps = {
-  referenceList: [],
-  heading: undefined,
-  contextClass: null,
-  displayMode: undefined
-};
-
-FieldGroupTemplate.propTypes = {
-  referenceList: PropTypes.arrayOf(Object),
-  contextClass: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  renderMode: PropTypes.string.isRequired,
-  heading: PropTypes.string,
-  lookForChildInConfig: PropTypes.bool,
-  displayMode: PropTypes.string
-};

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,7 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { PropsWithChildren, ReactElement } from 'react';
 import { Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface InlineDashboardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  filterPosition?: string;
+}
 
 const useStyles = makeStyles((/* theme */) => ({
   headerStyles: {
@@ -30,10 +36,11 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-export default function InlineDashboard(props) {
+export default function InlineDashboard(props: PropsWithChildren<InlineDashboardProps>) {
   const classes = useStyles();
 
   const { children, title, filterPosition } = props;
+  const childrenToRender = children as ReactElement[];
 
   const direction = filterPosition === 'inline-start' ? 'row-reverse' : 'row';
   return (
@@ -45,28 +52,23 @@ export default function InlineDashboard(props) {
       {filterPosition === 'block-start' && (
         <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>
           <Grid item xs={12} className={classes.colStyles}>
-            {children[0]}
+            {childrenToRender[0]}
           </Grid>
-          <Grid item xs={12} className={classes.filterContainerStyles}>
-            {children[1]}
+          <Grid id='filters' item xs={12} className={classes.filterContainerStyles}>
+            {childrenToRender[1]}
           </Grid>
         </Grid>
       )}
       {filterPosition !== 'block-start' && (
         <Grid container spacing={2} direction={direction} className={classes.containerStyles}>
           <Grid item xs={9}>
-            {children[0]}
+            {childrenToRender[0]}
           </Grid>
-          <Grid item xs={3} className={classes.inlineStyles}>
-            {children[1]}
+          <Grid id='filters' item xs={3} className={classes.inlineStyles}>
+            {childrenToRender[1]}
           </Grid>
         </Grid>
       )}
     </>
   );
 }
-
-InlineDashboard.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired
-  // template: PropTypes.string.isRequired
-};

package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -1,24 +1,35 @@
-import React from 'react';
-import { useMemo, Children, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { useMemo, Children, useEffect, useState, PropsWithChildren } from 'react';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
-import InlineDashboard from '@pega/react-sdk-components/lib/components/template/InlineDashboard';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface InlineDashboardPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  icon?: string;
+  filterPosition?: string;
+}
+
+export default function InlineDashboardPage(props: PropsWithChildren<InlineDashboardPageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const InlineDashboard = getComponentFromMap('InlineDashboard');
 
-export default function InlineDashboardPage(props) {
-  const { children, getPConnect } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, getPConnect, icon = '', filterPosition = 'block-start' } = props;
   const [filterComponents, setFilterComponents] = useState([]);
   const childArray = useMemo(() => {
     return Children.toArray(children);
   }, [children]);
 
-  const allFilters = getPConnect().getRawMetadata().children[1];
+  const allFilters = (getPConnect().getRawMetadata() as any).children[1];
 
   useEffect(() => {
     setFilterComponents(buildFilterComponents(getPConnect, allFilters));
   }, []);
 
-  const inlineProps = props;
+  const inlineProps = { ...props };
+  inlineProps.children = [];
   // Region layout views
   inlineProps.children[0] = childArray[0];
   // filter items
@@ -26,16 +37,3 @@ export default function InlineDashboardPage(props) {
 
   return <InlineDashboard {...inlineProps} />;
 }
-
-InlineDashboardPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  icon: PropTypes.string,
-  filterPosition: PropTypes.string
-};
-
-InlineDashboardPage.defaultProps = {
-  icon: '',
-  filterPosition: 'block-start'
-};

package/lib/template/ListPage/ListPage.tsx

@@ -1,20 +1,16 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
-
-export default function ListPage(props) {
-
-  return (
-    <ListView  {...props}></ListView>
-  )
+interface ListPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  parameters: object;
 }
 
-ListPage.defaultProps = {
-  parameters: undefined
-};
+export default function ListPage(props: ListPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
 
-ListPage.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  parameters: PropTypes.objectOf(PropTypes.any)
-};
+  // special case for ListView - add in a prop
+  const listViewProps = { ...props, bInForm: false };
+  return <ListView {...listViewProps} />;
+}

package/lib/template/ListPage/config-ext.json

@@ -3,6 +3,5 @@
   "type": "Template",
   "subtype": "PAGE",
   "label": "List page",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/ListView/{DefaultViewMeta.js → DefaultViewMeta.ts}

@@ -34,10 +34,8 @@ const getDefaultConfig = (fieldMeta, classID, show) => {
   };
 };
 
-
 export default function getDefaultViewMeta(fieldMeta, classID, showField) {
-  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } =
-    fieldMeta;
+  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } = fieldMeta;
   const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
   const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
   let viewMeta;