@pega/custom-dx-components 0.242.17 → 0.242.18

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/Operator.tsx

@@ -0,0 +1,210 @@
+// @ts-nocheck
+import { useState, useEffect, Fragment } from 'react';
+import {
+  Link,
+  Button,
+  Popover,
+  useOuterEvent,
+  useElement,
+  Progress,
+  FormField,
+  useTheme
+} from '@pega/cosmos-react-core';
+import { Glimpse } from '@pega/cosmos-react-work';
+import { EmailDisplay } from '@pega/cosmos-react-core';
+
+import type { PConnFieldProps } from './PConnProps';
+
+import Avatar from './Avatar';
+
+
+// interface for props
+interface PegaDxilMyPageCaseWidgetOperatorProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  name: string;
+  id: string;
+  label: string;
+  metaObj: any;
+  externalUser: any;
+}
+
+let pTarget = null;
+
+export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
+  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [popoverEl, setPopoverEl] = useElement(null);
+  const [popoverContent, setpopoverContent] = useState(null);
+  const theme: any = useTheme();
+
+  /* If the id has changed, we need to reset the popover */
+  useEffect(() => {
+    pTarget = null;
+  }, [id]);
+
+
+
+  const OperatorPreview = () => {
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+    setpopoverContent(
+      <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
+    );
+    if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
+      const fields = [
+        {
+          id: 'pyFirstName',
+          name: localizedVal('Name', localeCategory),
+          value: externalUser.name
+        },
+        {
+          id: 'pyEmail1',
+          name: localizedVal('Email', localeCategory),
+          value:
+            externalUser.email !== '' ? <Link href={`mailto:${externalUser.email}`}>{externalUser.email}</Link> : ''
+        },
+        {
+          id: 'pyPhoneNumber',
+          name: localizedVal('Phone', localeCategory),
+          value: externalUser.phone !== '' ? <Link href={`tel:${externalUser.phone}`}>{externalUser.phone}</Link> : ''
+        }
+      ];
+      setIsLoading(false);
+      setpopoverContent(
+        <Glimpse
+          visual={
+            <Avatar
+              metaObj={{
+                name: externalUser.name
+              }}
+            />
+          }
+          primary={externalUser.name}
+          secondary={[externalUser.position]}
+          fields={fields}
+          target={pTarget}
+        />
+      );
+    } else {
+      return PCore.getUserApi()
+        .getOperatorDetails(id, true)
+        .then(res => {
+          if (res.data?.data && res.data.data[0].BusinessID && res.data.data[0].Name) {
+            const fields = [];
+            if (res.data.data[0].Name) {
+              fields.push({
+                id: 'Name',
+                name: localizedVal('Name', localeCategory),
+                value: res.data.data[0].Name
+              });
+            }
+            if (res.data.data[0].BusinessID) {
+              fields.push({
+                id: 'Email',
+                name: localizedVal('Email address', localeCategory),
+                value: <EmailDisplay value={res.data.data[0].BusinessID} />
+              });
+            }
+            const opAvatar = (
+              <Avatar
+                metaObj={{
+                  image: '',
+                  name: res.data.data[0].Name
+                }}
+              />
+            );
+
+            setIsLoading(false);
+            setpopoverContent(
+              <Glimpse
+                heading={{
+                  primary: res.data.data[0].Name,
+                  secondary: res.data.data[0].BusinessID,
+                  visual: opAvatar
+                }}
+                fields={fields}
+                target={pTarget}
+                onDismiss={() => {pTarget = null;}}
+              />
+            );
+          }
+        });
+    }
+  };
+
+
+  const clickAction = (e: any) => {
+
+    setIsOpen(!isOpen);
+    if (pTarget === null) {
+      pTarget = e.currentTarget;
+      OperatorPreview();
+    }
+  };
+
+  const hidePopover = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  };
+
+  useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
+
+  const hideOnEscape = (e: any) => {
+    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
+  };
+
+  const comp = (
+    <Fragment>
+      {metaObj ? (
+        <Button
+          variant='text'
+          aria-haspopup
+          aria-expanded={isOpen}
+          onClick={clickAction}
+          onKeyDown={hideOnEscape}
+          data-test-id={testId}
+          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
+        >
+          <Avatar {...props} />
+        </Button>
+      ) : (
+        <Button
+          variant='link'
+          aria-haspopup
+          aria-expanded={isOpen}
+          onClick={clickAction}
+          onKeyDown={hideOnEscape}
+          data-test-id={testId}
+          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
+        >
+          {name}
+        </Button>
+      )}
+
+      {isOpen && (
+        <Popover
+          ref={setPopoverEl}
+          groupId='operator'
+          target={pTarget}
+          placement='bottom-start'
+          style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
+          strategy='fixed'
+        >
+          {popoverContent}
+        </Popover>
+      )}
+    </Fragment>
+  );
+
+  if (label !== null) {
+    return (
+      <FormField label={label} info={helperText}>
+        {comp}
+      </FormField>
+    );
+  }
+
+  return comp;
+};

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/config.json

@@ -0,0 +1,55 @@
+{
+  "name": "Pega_DXIL_MyPageCaseWidget",
+  "label": "My PageCase Widget",
+  "description": "My PageCase Widget",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyPageCaseWidget",
+  "type": "Widget",
+  "subtype": ["PAGE","CASE"],
+  "icon": "OneColumnPage.svg",
+   "properties": [
+    {
+      "name": "title",
+      "label": "Label value",
+      "format": "TEXT"
+    },
+    {
+      "format": "SELECT",
+      "label": "Usage",
+      "name": "label",
+      "defaultValue": "Create operator",
+      "localize": true,
+      "source": [
+        {
+          "key": "Create operator",
+          "value": "Create operator"
+        },
+        {
+          "key": "Update operator",
+          "value": "Update operator"
+        }
+      ]
+    },
+
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "Create operator",
+    "title": "Create operator",
+    "createLabel": "@L Created",
+    "updateLabel": "@L Updated"
+  }
+}

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyPageCaseWidget from './index';
+
+import { configProps, operatorDetails } from './mock';
+
+const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
+  title: 'PegaDxilMyPageCaseWidget',
+  component: PegaDxilMyPageCaseWidget,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: (value: any) => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const BasePegaDxilMyPageCaseWidget: Story = (args: any) => {
+
+  const props = {
+    label: configProps.label,
+    createLabel: configProps.createLabel,
+    updateLabel: configProps.updateLabel,
+    createOperator: configProps.createOperator,
+    updateOperator: configProps.updateOperator,
+    createDateTime: configProps.createDateTime,
+    updateDateTime: configProps.updateDateTime,
+    hideLabel: configProps.hideLabel,
+
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getCaseSummary: () => {
+          return {
+            user: configProps.updateOperator.userId,
+            dateTimeValue: configProps.updateDateTime
+          }
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+};
+
+return (
+    <>
+      <PegaDxilMyPageCaseWidget {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyPageCaseWidget.args = {};

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -0,0 +1,89 @@
+import { Fragment } from 'react';
+import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
+import type { PConnFieldProps } from './PConnProps';
+
+// includes in bundle
+import Operator from './Operator';
+
+import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
+
+
+// interface for props
+interface PegaDxilMyPageCaseWidgetProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  title: string;
+  createLabel: string;
+  updateLabel: string;
+}
+
+// Created for Launchpad
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidgetProps) {
+
+  const {
+    getPConnect,
+    title = 'Create operator',
+    label = 'Create operator',
+    createLabel,
+    updateLabel
+  } = props;
+
+
+  const { createTime, createdBy, lastUpdateTime, lastUpdatedBy } = getPConnect().getCaseSummary();
+
+  const [_label, user, dateTimeValue] =
+    label === 'Create operator'
+      ? [createLabel, createdBy, createTime]
+      : [updateLabel, lastUpdatedBy, lastUpdateTime];
+
+
+
+  return (
+    <StyledPegaDxilMyPageCaseWidgetWrapper>
+      <Card>
+      <CardHeader>{title}</CardHeader>
+      <CardContent>
+      <Flex container={{ direction: 'row'}}>
+           <Operator
+              label={_label}
+              name={user}
+              id={user}
+              getPConnect={getPConnect}
+              value={undefined}
+              validatemessage=''
+              hideLabel={false}
+              readOnly={false}
+              required={false}
+              disabled={false}
+              externalUser={undefined}
+              testId=''
+              helperText=''
+              metaObj={undefined}
+            />     
+      {dateTimeValue && (
+        <Fragment>
+          {' '}
+          <DateTimeDisplay value={dateTimeValue} variant='relative' />
+        </Fragment>
+      )}
+      </Flex>
+      </CardContent>
+      </Card>
+
+    </StyledPegaDxilMyPageCaseWidgetWrapper>
+  );
+
+
+
+}
+
+
+export default withConfiguration(PegaDxilMyPageCaseWidget);
+
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+// const comparisonFn = (prevProps, nextProps) => {
+//   return prevProps.updateDateTime === nextProps.updateDateTime;
+// };

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/mock.ts

@@ -0,0 +1,51 @@
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/styles.ts

@@ -0,0 +1,8 @@
+// individual style, comment out above, and uncomment here and add styles
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/config.json

@@ -0,0 +1,59 @@
+{
+  "name": "Pega_DXIL_MyPageWidget",
+  "label": "My Page Widget",
+  "description": "My Page Widget",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyPageWidget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "icon": "OneColumnPage.svg",
+  "properties": [
+      {
+        "name": "description",
+        "label": "Description",
+        "format": "TEXT",
+        "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
+      },
+      {
+        "name": "whatsnewlink",
+        "label": "What's new link",
+        "format": "TEXT",
+        "defaultValue": "https://design.pega.com"
+      },
+      {
+        "name": "image",
+        "label": "Image link",
+        "format": "TEXT",
+        "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
+      },
+      {
+        "name": "datasource",
+        "label": "Data source for details",
+        "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
+        "format": "DATASOURCE",
+        "required": true,
+        "properties": [
+          {
+            "name": "name",
+            "label": "Label",
+            "defaultValue": "@P .pyLabel"
+          }
+        ]
+      },
+      {
+        "label": "Conditions",
+        "format": "GROUP",
+        "properties": [
+          {
+            "name": "visibility",
+            "label": "Visibility",
+            "format": "VISIBILITY"
+          }
+        ]
+      }
+  ],
+  "defaultConfig": {}
+}