@pega/react-sdk-overrides 0.23.6

package/lib/templates/TwoColumn/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/lib/templates/TwoColumn/TwoColumn/TwoColumn.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, GridSize } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+export default function TwoColumn(props) {
+  const classes = useStyles();
+
+ const {children, templateCol} = 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>
+ )
+}
+
+TwoColumn.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  // title: PropTypes.string,
+  templateCol: PropTypes.string,
+  // icon: PropTypes.string
+};
+
+TwoColumn.defaultProps = {
+  templateCol: "1fr 1fr",
+  // icon: ""
+};

package/lib/templates/TwoColumn/TwoColumn/index.tsx

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

package/lib/templates/TwoColumn/TwoColumnPage/TwoColumnPage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
+import TwoColumn from '@pega/react-sdk-components/lib/components/templates/TwoColumn';
+
+/*
+ * The wrapper handles knowing how to take in just children
+ *  and mapping to the TwoColumn template.
+ */
+export default function TwoColumnPage(props) {
+
+  return (
+    <TwoColumn
+      {...props}
+    />
+  );
+}
+
+TwoColumnPage.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
+
+TwoColumnPage.defaultProps = {
+};

package/lib/templates/TwoColumn/TwoColumnPage/index.tsx

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

package/lib/templates/TwoColumn/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/lib/templates/TwoColumn/TwoColumnTab/TwoColumnTab.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, GridSize } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+export default function TwoColumnTab(props) {
+  const classes = useStyles();
+
+ const {children, templateCol} = 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>
+ )
+}
+
+TwoColumnTab.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  templateCol: PropTypes.string,
+};
+
+TwoColumnTab.defaultProps = {
+  templateCol: "1fr 1fr",
+};

package/lib/templates/TwoColumn/TwoColumnTab/index.tsx

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

package/lib/templates/WideNarrow/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/lib/templates/WideNarrow/WideNarrow/WideNarrow.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import './WideNarrow.css';
+
+export default function WideNarrow(props) {
+  // 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/lib/templates/WideNarrow/WideNarrow/index.tsx

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

package/lib/templates/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+// import PropTypes from "prop-types";
+// import Grid from '@material-ui/core/Grid';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+
+export default function WideNarrowDetails(props) {
+  const { a, b, children } = props;
+  const arFields: Array<any> = [];
+
+  for (const child of children) {
+    const theChildPConn = child.props.getPConnect();
+    const theChildrenOfChild = theChildPConn.getChildren();
+    arFields.push(theChildrenOfChild);
+  }
+
+  if (arFields.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`WideNarrowDetails expects 2 children and received ${arFields.length}`);
+  }
+
+
+  return (
+    <React.Fragment>
+    {children && children.length === 2 &&
+      <div className="psdk-wide-narrow-column">
+        <div className="psdk-wide-column-column">
+          <DetailsFields fields={arFields[0]} />
+        </div>
+        <div className="psdk-narrow-column-column">
+          <DetailsFields fields={arFields[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>
+  )
+
+}
+
+WideNarrowDetails.propTypes = {
+  // showLabel: PropTypes.bool,
+  // label: PropTypes.string,
+  // getPConnect: PropTypes.func.isRequired,
+  // template: PropTypes.string.isRequired
+};

package/lib/templates/WideNarrow/WideNarrowDetails/index.tsx

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

package/lib/templates/WideNarrow/WideNarrowForm/WideNarrowForm.css

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

package/lib/templates/WideNarrow/WideNarrowForm/WideNarrowForm.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import './WideNarrowForm.css';
+
+export default function WideNarrowForm(props) {
+  const {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>
+    }
+    </React.Fragment>
+
+  )
+
+}

package/lib/templates/WideNarrow/WideNarrowForm/index.tsx

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

package/lib/templates/WideNarrow/WideNarrowPage/WideNarrowPage.tsx

@@ -0,0 +1,38 @@
+import React, { Children } from "react";
+import PropTypes from "prop-types";
+
+// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
+import WideNarrow from '@pega/react-sdk-components/lib/components/templates/WideNarrow';
+
+/*
+ * The wrapper handles knowing how to take in just children and mapping
+ * to the Cosmos template.
+ */
+export default function WideNarrowPage(props) {
+  const { children, title, templateCol, icon } = props;
+  const childArray = Children.toArray(children);
+
+  return (
+    <div>
+    <WideNarrow
+        a={childArray[0]}
+        b={childArray[1]}
+        title={title}
+        cols={templateCol}
+        icon={icon?.replace("pi pi-", "")}
+      />
+    </div>
+  );
+}
+
+WideNarrowPage.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  title: PropTypes.string.isRequired,
+  templateCol: PropTypes.string,
+  icon: PropTypes.string
+};
+
+WideNarrowPage.defaultProps = {
+  templateCol: "1fr 1fr",
+  icon: ""
+};

package/lib/templates/WideNarrow/WideNarrowPage/index.tsx

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

package/lib/templates/utils.ts

@@ -0,0 +1,23 @@
+//  This file is adapted from React DX components/Templates/utils.js
+
+export function getAllFields(pConnect: any) {
+  const metadata = pConnect.getRawMetadata();
+  let allFields = [];
+  if (metadata.children && metadata.children.map) {
+    allFields = metadata.children.map((fields) => {
+      const children = fields.children instanceof Array ? fields.children : [];
+      return children.map((field) => field.config);
+    });
+  }
+  return allFields;
+}
+
+export function filterForFieldValueList(fields : any) {
+  return fields
+    .filter(({ visibility }) => visibility !== false)
+    .map(({ value, label }) => ({
+      id: label.toLowerCase(),
+      name: label,
+      value
+    }));
+}

package/lib/widgets/AppAnnouncement/AppAnnouncement.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    borderLeft: "6px solid",
+    borderLeftColor: theme.palette.primary.light
+  },
+}));
+
+const AppAnnouncement = (props) => {
+  const { header, description, datasource, whatsnewlink } = props;
+  let details = [];
+  if (datasource && datasource.source) {
+    details = datasource.source.map((item) => {
+      return item.name;
+    });
+  }
+
+  const classes = useStyles();
+
+  const handleClick = () => {
+    window.open(whatsnewlink);
+  }
+
+  return (
+    <Card title="AppAnnouncement" className={classes.root}>
+      <CardHeader title={<Typography variant="h6">{header}</Typography>} />
+      <CardContent>
+        <Typography variant="body1" gutterBottom>{description}</Typography>
+        {
+          details.map((itm, idx) => {
+            const theKey = `AppAnn-item-${idx}`;
+            return (
+              <Typography key={theKey} variant="body2">- {itm}</Typography>
+            )
+          })
+        }
+      </CardContent>
+      <CardActions>
+        <Button color="primary" onClick={handleClick} size="small">See what&apos;s new</Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+AppAnnouncement.propTypes = {
+  header: PropTypes.string,
+  description: PropTypes.string,
+  datasource: PropTypes.instanceOf(Object),
+  whatsnewlink: PropTypes.string,
+  // image: PropTypes.string
+};
+
+AppAnnouncement.defaultProps = {
+  header: "",
+  description: "",
+  // image: "",
+  datasource: [],
+  whatsnewlink: ""
+};
+
+export default AppAnnouncement;

package/lib/widgets/AppAnnouncement/index.tsx

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

package/lib/widgets/CaseHistory/CaseHistory.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import isDeepEqual from 'fast-deep-equal/react';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+declare const PCore;
+
+
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "silver",
+      backgroundColor: theme.palette.text.disabled,
+      color: theme.palette.getContrastText(theme.palette.text.disabled),
+    },
+    body: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "silver",
+      // fontSize: 14,
+    },
+  }),
+)(TableCell);
+
+
+export default function CaseHistory(props) {
+  const { getPConnect } = props;
+  const thePConn = getPConnect();
+  // let waitingForData = true;
+
+  const displayedColumns = [
+    { label: "Date", type: "DateTime", fieldName: "pxTimeCreated" },
+    { label: "Description", type: "TextInput", fieldName: "pyMessageKey" },
+    { label: "User", type: "TextInput", fieldName: "pyPerformer" }
+   ];
+
+  const rowData: any = useRef([]);
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const [waitingForData, setWaitingForData] = useState<boolean>(true);
+
+
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+  const dataViewName = "D_pyWorkHistory";
+  const context = thePConn.getContextName();
+
+
+  function computeRowData(rows: Array<Object>): void {
+    const theRowData: Array<Object> = [];
+
+    rows.forEach((row: any, rowIndex: number) => {
+      // Now, for each property in the index of row properties (displayedColumns), add an object
+      //  to a new array of values
+      const rowDisplayValues: any = [];
+
+      displayedColumns.forEach((column: Object, rowValIndex) => {
+        const theType = column["type"];
+        const theFieldName = column["fieldName"];
+        const theValue = ((theType === "Date" || theType === "DateTime")) ? Utils.generateDateTime(row[theFieldName], "DateTime-Short") : row[theFieldName];
+        rowDisplayValues[rowValIndex] = theValue;
+      });
+
+      theRowData[rowIndex] = rowDisplayValues;
+    })
+
+    if (!isDeepEqual(theRowData, rowData.current)) {
+      // Only update rowData.current when it actually changes (to prevent infinite loop)
+      rowData.current = theRowData;
+    }
+  }
+
+  // Get the case history data when component mounted/initialized
+  useEffect( () => {
+
+    let bCallSetWaitingForData = true;
+
+    const historyData = PCore.getDataApiUtils().getData(
+      dataViewName,  `{"dataViewParameters":[{"CaseInstanceKey":"${caseID}"}]}`,
+      context
+      );
+
+    historyData.then( (historyJSON: Object) => {
+
+      const tableDataResults = historyJSON["data"].data;
+
+      // compute the rowData using the tableDataResults
+      computeRowData(tableDataResults);
+
+      // At this point, if we have data ready to render and haven't been asked
+      //  to NOT call setWaitingForData, we can stop progress indicator
+      if (bCallSetWaitingForData) {
+        setWaitingForData(false);
+      }
+
+    });
+
+    return () => {
+      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+      // The useEffect closure lets us have access to the bCallSetWaitingForData
+      //  variable inside the useEffect and inside the "then" clause of the
+      //  historyData promise
+      //  So, if this cleanup code gets run before the promise .then is called,
+      //  we can avoid calling the useState setter which would otherwise show a warning
+      bCallSetWaitingForData = false;
+    }
+
+  }, []);
+
+
+  function getTableHeader() {
+    const theRowKey = "CaseHistory.TableHeader";
+
+    const theHeaderCells: Array<any> = displayedColumns.map((headerCol, index) => {
+      const theCellKey = `${theRowKey}.${index}`;
+      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>
+    })
+
+    return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
+  }
+
+
+  function getTableData() {
+    const theDataRows: Array<any> = [];
+
+    // Note: using rowData.current since we're using useRef as a mutatable
+    //  value that's only updated when it changes.
+    if (rowData.current.length > 0) {
+      rowData.current.forEach((dataRow: Array<Object>, index) => {
+        // using dataRow[0]-dataRow[1] as the array key since it's a unique value
+        const theKey = `CaseHistory-${index}`;
+        theDataRows.push( <TableRow key={theKey}>
+          <StyledTableCell>{dataRow[0] ? dataRow[0] : "---"}</StyledTableCell>
+          <StyledTableCell>{dataRow[1] ? dataRow[1] : "---"}</StyledTableCell>
+          <StyledTableCell>{dataRow[2] ? dataRow[2] : "---"}</StyledTableCell>
+        </TableRow>
+        )
+      });
+    }
+
+    return theDataRows;
+  }
+
+  return (
+    <div id="CaseHistory">
+      <TableContainer>
+        <Table>
+          <TableHead>
+            {getTableHeader()}
+          </TableHead>
+          <TableBody>
+            {getTableData()}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  )
+}
+
+CaseHistory.propTypes = {
+  getPConnect: PropTypes.func.isRequired
+};

package/lib/widgets/CaseHistory/index.tsx

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

package/lib/widgets/FileUtility/ActionButtonsForFileUtil.css

@@ -0,0 +1,27 @@
+.psdk-actions {
+  height: 6.25rem;
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+}
+
+.psdk-action-buttons {
+  width: 50%;
+  justify-content: center;
+  display: flex;
+}
+
+.primary-button {
+  background-color: #3f51b5 !important;
+  color: white !important;
+  padding: 6px 14px !important;
+  text-transform: unset !important;
+  font-size: 14px;
+}
+
+.secondary-button {
+  box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%);
+  text-transform: unset !important;
+  padding: 6px 14px !important;
+}