@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/index.tsx

@@ -4,11 +4,19 @@ import { TextField } from '@mui/material';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyUrlWrapper from './styles';
 
 interface PegaDxilMyUrlProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,15 +34,17 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const [inputValue, setInputValue] = useState('');
 
@@ -42,27 +52,26 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   useEffect(() => {
     setInputValue(value);
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = event => {
     setInputValue(event?.target?.value);
@@ -88,7 +97,10 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
         error={status === 'error'}
         label={label}
         value={inputValue}
-        InputProps={{ inputProps: { ...testProp } }}
+        slotProps={{
+          input: { inputProps: { ...testProps } }
+        }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyUrlWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/mock.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const configProps = {
   value: '',
   label: 'URL Sample',

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyDetails",
   "type": "Template",
   "subtype": "DETAILS",

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/index.tsx

@@ -23,7 +23,7 @@ export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
   // 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', 'DISPLAY_ONLY');
@@ -31,7 +31,6 @@ export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
       key: index.toString()
     })
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/DefaultForm.css

@@ -16,10 +16,90 @@
   gap: calc(1rem);
 }
 
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
+}
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.psdk-default-form-instruction-text ul {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+
+.psdk-default-form-instruction-text ol {
+  padding-left: 30px;
+  list-style-type: decimal;
+}
+
+/* Banner styles */
+.psdk-banner {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.75rem 1rem;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  gap: 0.75rem;
+}
+
+.psdk-banner-info {
+  background-color: color-mix(in srgb, var(--app-neutral-color) 12%, var(--app-form-bg-color));
+  border-color: var(--app-neutral-color);
+  color: var(--banner-text-color);
+}
+
+.psdk-banner-warning {
+  background-color: color-mix(in srgb, var(--app-warning-color-dark) 12%, var(--app-form-bg-color));
+  border-color: var(--app-warning-color-dark);
+  color: var(--app-warning-color-dark);
+}
+
+.psdk-banner-success {
+  background-color: color-mix(in srgb, var(--stepper-completed-bg-color) 12%, var(--app-form-bg-color));
+  border-color: var(--stepper-completed-bg-color);
+  color: var(--stepper-completed-bg-color);
+}
+
+.psdk-banner-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.psdk-banner-content {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.psdk-banner-content p {
+  margin: 0;
+}
+
+.psdk-banner-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-banner-dismiss:hover {
+  opacity: 1;
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyForm",
   "type": "Template",
   "subtype": "FORM",

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/index.tsx

@@ -1,6 +1,11 @@
-import { createElement, PropsWithChildren } from 'react';
+import { createElement, PropsWithChildren, useState } from 'react';
 
-import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { getInstructions, getInstructionsType, getDismissBanner, mapInstructionsTypeToBannerVariant } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
@@ -22,12 +27,24 @@ const Child = connectToState(mapStateToProps)(props => {
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
+const bannerIconMap = {
+  info: <InfoOutlinedIcon fontSize='small' />,
+  warning: <WarningAmberIcon fontSize='small' />,
+  success: <CheckCircleOutlineIcon fontSize='small' />
+};
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormProps>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
+  const [bannerDismissed, setBannerDismissed] = useState(false);
+
+  const instructionsType = getInstructionsType(props.instructions);
+  const isBanner = typeof props.instructions === 'object' && (props.instructions as any)?.isBanner;
+  const dismissBanner = getDismissBanner(props.instructions);
+  const bannerVariant = mapInstructionsTypeToBannerVariant(instructionsType);
 
   let divClass: string;
 
@@ -55,16 +72,35 @@ export default function PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormPr
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
+  const renderInstructions = () => {
+    if (!instructions || bannerDismissed) return null;
+
+    if (isBanner) {
+      return (
+        <div className={`psdk-banner psdk-banner-${bannerVariant}`}>
+          <div className='psdk-banner-icon'>{bannerIconMap[bannerVariant]}</div>
+          <div className='psdk-banner-content' dangerouslySetInnerHTML={{ __html: instructions }} />
+          {dismissBanner && (
+            <button type='button' className='psdk-banner-dismiss' aria-label='Dismiss banner' onClick={() => setBannerDismissed(true)}>
+              <CloseIcon fontSize='small' />
+            </button>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className='psdk-default-form-instruction-text'>
+        {/* server performs sanitization method for instructions html content */}
+        <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+      </div>
+    );
+  };
+
   return (
     <StyledPegaDxilMyFormWrapper>
       <>
-        {instructions && (
-          <div className='psdk-default-form-instruction-text'>
-            {/* server performs sanitization method for instructions html content */}
-            {/* eslint-disable react/no-danger */}
-            <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
-          </div>
-        )}
+        {renderInstructions()}
         <div className={divClass}>{dfChildren}</div>
       </>
     </StyledPegaDxilMyFormWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPage",
   "type": "Template",
   "subtype": "PAGE",

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyTwoColumnDetails",
   "type": "Template",
   "subtype": "DETAILS",

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/index.tsx

@@ -31,7 +31,6 @@ export default function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDet
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
       key: index.toString()
     })
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyTwoColumnForm",
   "type": "Template",
   "subtype": "FORM",

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/index.tsx

@@ -28,7 +28,6 @@ export default function PegaDxilMyTwoColumnForm(props: PropsWithChildren<PegaDxi
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyCaseWidget",
   "type": "Widget",
   "subtype": "CASE",

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/index.tsx

@@ -73,8 +73,8 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
   const dataViewName = 'D_pyWorkHistory';
   const context = thePConn.getContextName();
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  function computeRowData(rows: object[]): void {
+    const theRowData: object[] = [];
 
     rows.forEach((row: any, rowIndex: number) => {
       // Now, for each property in the index of row properties (displayedColumns), add an object
@@ -108,18 +108,22 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
       context
     ) as Promise<any>;
 
-    historyData.then((historyJSON: any) => {
-      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);
-      }
-    });
+    historyData
+      .then((historyJSON: any) => {
+        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);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     return () => {
       // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
@@ -149,14 +153,14 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
     // 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: Object[], index) => {
+      rowData.current.forEach((dataRow: 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]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2]) : '---' as any}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : ('---' as any)}</StyledTableCell>
           </TableRow>
         );
       });

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/mock.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPageCaseWidget",
   "type": "Widget",
   "subtype": ["PAGE","CASE"],

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -4,7 +4,6 @@ import Popover from '@mui/material/Popover';
 import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
-import { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -12,12 +11,6 @@ import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare module "@mui/private-theming" {
-  interface DefaultTheme extends MuiTheme {
-    spacing: (spacing: number) => string;
-  }
-}
-
 interface PegaDxilMyPageCaseWidgetProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;
@@ -28,6 +21,7 @@ interface PegaDxilMyPageCaseWidgetProps extends PConnProps {
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
   displayLabel?: any;
+  displayMode?: string;
 }
 
 const useStyles = makeStyles(myTheme => ({
@@ -38,6 +32,13 @@ const useStyles = makeStyles(myTheme => ({
   popover: {
     padding: myTheme.spacing(1),
     margin: myTheme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: myTheme.palette.text.secondary
+  },
+  fieldValue: {
+    color: myTheme.palette.text.primary
   }
 }));
 
@@ -85,7 +86,8 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
     const localizedVal = PCore.getLocaleUtils().getLocaleValue;
     const localeCategory = 'Operator';
 
-    operatorPreviewPromise.then((res: any) => {
+    operatorPreviewPromise
+      .then((res: any) => {
       const fillerString = '---';
       let fields: any = [];
       if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
@@ -125,7 +127,6 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
           }
         ];
       } else {
-        // eslint-disable-next-line no-console
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
         );
@@ -159,7 +160,10 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
       }
       // Whatever the fields are, update the component's popoverFields
       setPopoverFields(fields);
-    });
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     setPopoverAnchorEl(event.currentTarget);
   }
@@ -183,7 +187,7 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
           return (
             <React.Fragment key={field.id}>
               <Grid2 container size={{ xs: 12 }} spacing={1}>
-                <Grid2 size={{ xs: 12 }}>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='caption'>{field.name}</Typography>
                 </Grid2>
                 <Grid2 size={{ xs: 6 }}>
@@ -199,17 +203,61 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
 
   // End of popover-related
 
+  const { displayMode } = props;
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return (
+      <StyledPegaDxilMyPageCaseWidgetWrapper>
+        <>
+          <Grid2 container spacing={4} justifyContent='space-between'>
+            <Grid2 size={{ xs: 4 }}>
+              <Typography variant='body2' component='span' className={classes.fieldLabel}>
+                {caseOpLabel}
+              </Typography>
+            </Grid2>
+            <Grid2 size={{ xs: 8 }}>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'baseline' }}>
+                <Typography variant='body2' component='span' className={classes.fieldValue} onClick={showOperatorDetails} sx={{ cursor: 'pointer' }}>
+                  {caseOpName}
+                </Typography>
+                <Typography variant='caption' component='span' sx={{ color: 'text.secondary' }}>
+                  {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+                </Typography>
+              </div>
+            </Grid2>
+          </Grid2>
+          <Popover
+            id={popoverId}
+            open={popoverOpen}
+            anchorEl={popoverAnchorEl}
+            onClose={handlePopoverClose}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+            slotProps={{
+              paper: { style: { maxWidth: '45ch' } }
+            }}
+          >
+            {getPopoverGrid()}
+          </Popover>
+        </>
+      </StyledPegaDxilMyPageCaseWidgetWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyPageCaseWidgetWrapper>
       <>
         <TextField
+          variant='standard'
           defaultValue={caseOpName}
           label={caseOpLabel}
           onClick={showOperatorDetails}
-          InputProps={{
-            readOnly: true,
-            disableUnderline: true,
-            inputProps: { style: { cursor: 'pointer' } }
+          slotProps={{
+            input: {
+              readOnly: true,
+              disableUnderline: true,
+              inputProps: { style: { cursor: 'pointer' } }
+            }
           }}
         />
         <br />
@@ -221,7 +269,9 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
           onClose={handlePopoverClose}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
           transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-          PaperProps={{ style: { maxWidth: '45ch' } }}
+          slotProps={{
+            paper: { style: { maxWidth: '45ch' } }
+          }}
         >
           {getPopoverGrid()}
         </Popover>

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPageWidget",
   "type": "Widget",
   "subtype": "PAGE",