Merge pull request #36 from pegasystems/feature-CheckboxTrigger

Add new component checkboxTrigger for data objects

src/components/Pega_Extensions_CheckboxTrigger/Docs.mdx

@@ -0,0 +1,34 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+The Checkbox Trigger is a special case component that is aimed to address a limitation in Constellation UI with data objects. While Constellation UI supports the CRUD operations on data objects,
+there is no flow action available for the data object to handle dynamic behavior on change of a property. As such the views can only use visible condition (expression only - not when rules), but you
+cannot, for example, run an activity or data transform when a property value is changing within the view.
+
+If the use case is to have a checkbox that runs some post-processing and copy the value of one field to another field, you can use this Constellation DX component to achieve this behavior.
+The component uses a regular checkbox but onChange, will call a data page (passed as parameter) that will send the current content of the Data object. In the DP, you can transform the values
+of the data object and return the updated fields. These fields will be automatically updated in the UI.
+
+Note that the DP must be of type 'Savable' but it does not need to save the object per say.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Example
+
+Assuming that we want to achieve this use case inside the view of a data object:
+
+![Use case](CheckboxTrigger_Usecase.jpg)
+
+The savable DP called D_RefreshRating is used to return the updated value of the data object through an activity - note that even if this is a savable DP, the activity does not save the object. The changes are only temporary and will only persist once you click create or update in the modal.
+
+![Data page](CheckboxTrigger_Configuration_Datapage.jpg)
+
+![Activity](CheckboxTrigger_Configuration_Activity.jpg)

src/components/Pega_Extensions_CheckboxTrigger/config.json

@@ -0,0 +1,86 @@
+{
+  "name": "Pega_Extensions_CheckboxTrigger",
+  "label": "Checkbox Trigger",
+  "description": "Checkbox Trigger",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_CheckboxTrigger",
+  "type": "Field",
+  "subtype": "Boolean",
+  "icon": "images/pz-checkbox-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "dataPage",
+      "label": "Savable DP that will be called for Refresh",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ]
+}

src/components/Pega_Extensions_CheckboxTrigger/demo.stories.tsx

@@ -0,0 +1,163 @@
+import type { StoryObj } from '@storybook/react';
+import PegaExtensionsCheckboxTrigger, { type CheckboxTriggerProps } from './index';
+
+export default {
+  title: 'Fields/Checkbox Trigger',
+  argTypes: {
+    fieldMetadata: {
+      table: {
+        disable: true
+      }
+    },
+    additionalProps: {
+      table: {
+        disable: true
+      }
+    },
+    displayMode: {
+      table: {
+        disable: true
+      }
+    },
+    variant: {
+      table: {
+        disable: true
+      }
+    },
+    getPConnect: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  component: PegaExtensionsCheckboxTrigger
+};
+
+const setPCore = () => {
+  (window as any).PCore = {
+    getComponentsRegistry: () => {
+      return {
+        getLazyComponent: (f: string) => f
+      };
+    },
+    getEnvironmentInfo: () => {
+      return {
+        getTimeZone: () => 'local'
+      };
+    },
+    getRestClient: () => {
+      return {
+        invokeRestApi: () => {
+          return Promise.resolve({
+            data: {
+              responseData: { test: '2' }
+            }
+          });
+        }
+      };
+    },
+    getContainerUtils: () => {
+      return {
+        getContainerItemData: () => {
+          return {
+            test: '1'
+          };
+        }
+      };
+    },
+    getStore: () => {
+      return {
+        getState: () => {
+          return {
+            data: {
+              context: {
+                dataInfo: {
+                  content: {
+                    test: '1'
+                  }
+                }
+              }
+            }
+          };
+        },
+        dispatch: () => {}
+      };
+    }
+  };
+};
+
+const setPConnect = () => {
+  return {
+    getStateProps: () => {
+      return {
+        value: 'C-123'
+      };
+    },
+    getContextName: () => {
+      return 'modal_1';
+    },
+    getTarget: () => {
+      return 'modal';
+    },
+    getActionsApi: () => {
+      return {
+        openWorkByHandle: () => {
+          /* nothing */
+        },
+        createWork: () => {
+          /* nothing */
+        },
+        updateFieldValue: () => {
+          /* nothing */
+        },
+        triggerFieldChange: () => {
+          /* nothing */
+        },
+        showCasePreview: () => {
+          /* nothing */
+        }
+      };
+    },
+    ignoreSuggestion: () => {
+      /* nothing */
+    },
+    acceptSuggestion: () => {
+      /* nothing */
+    },
+    setInheritedProps: () => {
+      /* nothing */
+    },
+    resolveConfigProps: () => {
+      /* nothing */
+    }
+  };
+};
+
+type Story = StoryObj<typeof PegaExtensionsCheckboxTrigger>;
+
+const CheckboxTriggerDemo = (inputs: CheckboxTriggerProps) => {
+  return {
+    render: (args: CheckboxTriggerProps) => {
+      setPCore();
+      const props = {
+        ...args,
+        getPConnect: setPConnect
+      };
+      return <PegaExtensionsCheckboxTrigger {...props} />;
+    },
+    args: inputs
+  };
+};
+
+export const Default: Story = CheckboxTriggerDemo({
+  label: 'Demo checkbox',
+  dataPage: '',
+  value: false,
+  testId: 'demo',
+  placeholder: '',
+  validatemessage: '',
+  disabled: false,
+  readOnly: false,
+  required: false,
+  hideLabel: false
+});

src/components/Pega_Extensions_CheckboxTrigger/demo.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+test('renders checkbox component with default args', async () => {
+  render(<Default />);
+  expect(await screen.findByText('Demo checkbox')).toBeVisible();
+});