Merge pull request #99 from pegasystems/mod/tor/US-587580_2

Added richText control support

Author: 4manasa

angular.json

@@ -77,10 +77,17 @@
                 "glob": "*.*",
                 "input": "./packages/angular-sdk-components/src/assets/icons/",
                 "output": "./constellation/assets/icons"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/tinymce",
+                "output": "./tinymce"
               }
             ],
             "styles": ["packages/angular-sdk-components/src/styles.scss"],
-            "scripts": [],
+            "scripts": [
+              "./node_modules/tinymce/tinymce.min.js"
+            ],
             "customWebpackConfig": {
               "path": "./extra-webpack.config.js"
             },

package.json

@@ -73,6 +73,7 @@
     "@mdi/svg": "^5.0.45",
     "@pega/auth": "^0.1.6",
     "@pega/constellationjs": "SDK-8.23.0",
+    "@tinymce/tinymce-angular": "^7.0.0",
     "core-js": "^2.6.12",
     "dayjs": "^1.10.5",
     "downloadjs": "^1.4.7",
@@ -122,6 +123,7 @@
     "postcss": "^8.4.23",
     "replace-in-file": "^6.3.5",
     "shx": "^0.3.4",
+    "tinymce": "^6.8.2",
     "ts-node": "~8.6.2",
     "typescript": "4.9.5",
     "webpack": "^5.81.0"

packages/angular-sdk-components/tests/e2e/DigV2/FormFields/RichText.spec.js

@@ -0,0 +1,137 @@
+const { test, expect } = require('@playwright/test');
+
+const config = require('../../../config');
+const common = require('../../../common');
+
+// These values represent the data values used for the conditions and are initialised in pyDefault DT
+const isDisabled = true;
+const isVisible = true;
+
+test.beforeEach(async ({ page }) => {
+  await page.setViewportSize({ width: 1920, height: 1080 });
+  await page.goto(config.config.baseUrl, { waitUntil: 'networkidle' });
+});
+
+test.describe('E2E test', () => {
+  let attributes;
+
+  test('should login, create case and run the RichText tests', async ({ page }) => {
+    await common.login(config.config.apps.digv2.user.username, config.config.apps.digv2.user.password, page);
+
+    /** Testing announcement banner presence */
+    const announcementBanner = page.locator('h2:has-text("Announcements")');
+    await expect(announcementBanner).toBeVisible();
+
+    /** Testing worklist presence */
+    const worklist = page.locator('div[id="worklist"]:has-text("My Worklist")');
+    await expect(worklist).toBeVisible();
+
+    /** Click on the Create Case button */
+    const createCase = page.locator('mat-list-item[id="create-case-button"]');
+    await createCase.click();
+
+    /** Creating a Form Field case-type */
+    const formFieldCase = page.locator('mat-list-item[id="case-list-item"] > span:has-text("Form Field")');
+    await formFieldCase.click();
+
+    /** Selecting RichText from the Category dropdown */
+    const selectedCategory = page.locator('mat-select[data-test-id="76729937a5eb6b0fd88c42581161facd"]');
+    await selectedCategory.click();
+    await page.getByRole('option', { name: 'RichText' }).click();
+
+    /** Selecting Required from the Sub Category dropdown */
+    let selectedSubCategory = page.locator('mat-select[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.getByRole('option', { name: 'Required' }).click();
+
+    /** Required tests */
+    const requiredRichTextContainer = page.locator('div[data-test-id="98a97d9fe6d092900021587f62ab8637"]');
+    const requiredRichTextLabel = requiredRichTextContainer.locator('label');
+    expect(await requiredRichTextLabel.innerText()).toEqual('RichText Required');
+    await page.locator('button:has-text("submit")').click();
+    let canNotBeBlankMsg = await requiredRichTextContainer.locator('p:has-text("Cannot be blank")');
+    expect(canNotBeBlankMsg).toBeVisible();
+
+    const notRequiredRichTextContainer = page.locator('div[data-test-id="913fcb2ea3513d1f0dd357aa1766757f"]');
+    const notRequiredRichTextLabel = notRequiredRichTextContainer.locator('label');
+    expect(await notRequiredRichTextLabel.innerText()).toEqual('RichText Not Required');
+    await page.locator('button:has-text("submit")').click();
+    canNotBeBlankMsg = await notRequiredRichTextContainer.locator('p:has-text("Cannot be blank")');
+    expect(canNotBeBlankMsg).not.toBeVisible();
+
+    /** Selecting Disable from the Sub Category dropdown */
+    selectedSubCategory = page.locator('mat-select[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.getByRole('option', { name: 'Disable' }).click();
+
+    /** Disable tests */
+    // Always Disabled RichText
+    const alwaysDisabledRichTextContainer = page.locator('div[data-test-id="f8a6fa176e492f0b2c3a2ecce916a1cc"]');
+    const alwaysDisabledRichTextLabel = alwaysDisabledRichTextContainer.locator('label');
+    expect(await alwaysDisabledRichTextLabel.innerText()).toEqual('RichText Disabled Always');
+    const alwaysDisabledRichTextBox = alwaysDisabledRichTextContainer.locator('div[role="application"]');
+    attributes = await common.getAttributes(alwaysDisabledRichTextBox);
+    await expect(attributes.includes('aria-disabled')).toBeTruthy();
+
+    // Conditionally Disabled RichText
+    const conditionallyDisabledRichTextContainer = page.locator('div[data-test-id="a1f1fed886e4277998358560643d5b80"]');
+    const conditionallyDisabledRichTextLabel = conditionallyDisabledRichTextContainer.locator('label');
+    expect(await conditionallyDisabledRichTextLabel.innerText()).toEqual('RichText Disabled Condition');
+    const conditionallyDisabledRichTextBox = conditionallyDisabledRichTextContainer.locator('div[role="application"]');
+    attributes = await common.getAttributes(conditionallyDisabledRichTextBox);
+    if (isDisabled) {
+      await expect(attributes.includes('aria-disabled')).toBeTruthy();
+    } else {
+      await expect(attributes.includes('aria-disabled')).toBeFalsy();
+    }
+
+    // Never Disabled RichText
+    const neverDisabledRichTextContainer = page.locator('div[data-test-id="0706d1c3117909bba5dc3b11282c84c1"]');
+    const neverDisabledRichTextLabel = neverDisabledRichTextContainer.locator('label');
+    expect(await neverDisabledRichTextLabel.innerText()).toEqual('RichText Disabled Never');
+    const neverDisabledRichTextBox = neverDisabledRichTextContainer.locator('div[role="application"]');
+    const disabledValue = await neverDisabledRichTextBox.getAttribute('aria-disabled');
+    await expect(disabledValue).toBe('false');
+
+    /** Selecting Update from the Sub Category dropdown */
+    selectedSubCategory = page.locator('mat-select[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.getByRole('option', { name: 'Update' }).click();
+
+    /** Update tests */
+    const readOnlyRichTextContainer = page.locator('div[data-test-id="2698790fe2608356645f7f37e47d4017"]');
+    const readOnlyRichTextLabel = readOnlyRichTextContainer.locator('label');
+    expect(await readOnlyRichTextLabel.innerText()).toEqual('RichText ReadOnly');
+    const readOnlyRTEDiv = readOnlyRichTextContainer.locator('div[class="readonly-richtext-editor"]');
+    expect(readOnlyRTEDiv).toBeVisible();
+
+    const editableRichTextContainer = page.locator('div[data-test-id="c5f3892e688f607040637162ef2d61e2"]');
+    const editableRichTextLabel = editableRichTextContainer.locator('label');
+    expect(await editableRichTextLabel.innerText()).toEqual('RichText Editable');
+    const editableRichTextDiv = editableRichTextContainer.locator('div[role="application"]');
+    expect(editableRichTextDiv).toBeVisible();
+
+    /** Selecting Visibility from the Sub Category dropdown */
+    selectedSubCategory = page.locator('mat-select[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.getByRole('option', { name: 'Visibility' }).click();
+
+    /** Visibility tests */
+    await expect(page.locator('div[data-test-id="4094af7d82d8e88494423b891852cfb3"]')).toBeVisible();
+
+    const neverVisibleRichText = await page.locator('div[data-test-id="be4eec910ae6fd21f9ff706a3d64dc58"]');
+    await expect(neverVisibleRichText).not.toBeVisible();
+
+    const conditionallyVisibleRichText = await page.locator('div[data-test-id="c50c684046dd7f7ca04fd9e35ed0ec92"]');
+
+    if (isVisible) {
+      await expect(conditionallyVisibleRichText).toBeVisible();
+    } else {
+      await expect(conditionallyVisibleRichText).not.toBeVisible();
+    }
+  }, 10000);
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});

projects/angular-sdk-library/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -99,6 +99,8 @@ import { MaterialDetailsComponent } from '../../_components/designSystemExtensio
 import { DashboardFilterComponent } from '../../_components/infra/dashboard-filter/dashboard-filter.component';
 import { ListUtilityComponent } from '../../_components/widget/list-utility/list-utility.component';
 import { MaterialUtilityComponent } from '../../_components/designSystemExtension/material-utility/material-utility.component';
+import { RichTextComponent } from '../../_components/field/rich-text/rich-text.component';
+import { RichTextEditorComponent } from '../../_components/designSystemExtension/rich-text-editor/rich-text-editor.component';
 import { ListViewActionButtonsComponent } from '../../_components/field/list-view-action-buttons/list-view-action-buttons.component';
 
 // pegaSdkComponentMap is the JSON object where we'll store the components that are
@@ -187,6 +189,8 @@ const pegaSdkComponentMap = {
   reference: ReferenceComponent,
   RadioButtons: RadioButtonsComponent,
   Region: RegionComponent,
+  RichText: RichTextComponent,
+  RichTextEditor: RichTextEditorComponent,
   RootContainer: RootContainerComponent,
   ScalarList: ScalarListComponent,
   SemanticLink: SemanticLinkComponent,

projects/angular-sdk-library/src/lib/_components/designSystemExtension/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,33 @@
+<div [attr.data-test-id]="testId">
+  <label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
+  <div class="rich-text-editor" *ngIf="!readonly">
+    <editor
+      [formControl]="richText"
+      [attr.disabled]="disabled"
+      [initialValue]="value"
+      [init]="{
+        base_url: '/tinymce',
+        suffix: '.min',
+        menubar: false,
+        placeholder,
+        statusbar: false,
+        min_height: 130,
+        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+        autoresize_bottom_margin: 0,
+        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+        toolbar_location: 'bottom',
+        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+        branding: false,
+        paste_data_images: true,
+        file_picker_types: 'image',
+        file_picker_callback: filePickerCallback
+      }"
+      (onBlur)="blur()"
+      (onChange)="change($event)"
+    ></editor>
+    <p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
+  </div>
+  <div *ngIf="readonly">
+    <div class="readonly-richtext-editor" style="margin: 10px 5px" [innerHTML]="value || '--'"></div>
+  </div>
+</div>

projects/angular-sdk-library/src/lib/_components/designSystemExtension/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,20 @@
+@import '../../../../../_shared/styles.scss';
+.rich-text-label {
+    margin: 5px;
+    font-size: 16px;
+}
+
+.rich-text-editor {
+    margin: 10px 0px;
+}
+
+.label-required::after {
+    display: inline;
+    content: " *";
+    vertical-align: top;
+    color: $app-neutral-dark-color;
+}
+
+.text-editor-error {
+    color: $app-error-light-color;
+}

projects/angular-sdk-library/src/lib/_components/designSystemExtension/rich-text-editor/rich-text-editor.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { RichTextEditorComponent } from './rich-text-editor.component';
+
+describe('RichTextComponent', () => {
+  let component: RichTextEditorComponent;
+  let fixture: ComponentFixture<RichTextEditorComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RichTextEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RichTextEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/angular-sdk-library/src/lib/_components/designSystemExtension/rich-text-editor/rich-text-editor.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+
+declare let tinymce: any;
+
+@Component({
+  selector: 'app-rich-text-editor',
+  templateUrl: './rich-text-editor.component.html',
+  styleUrls: ['./rich-text-editor.component.scss'],
+  standalone: true,
+  imports: [CommonModule, EditorModule, ReactiveFormsModule],
+  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]
+})
+export class RichTextEditorComponent implements OnInit {
+  @Input() placeholder;
+  @Input() disabled;
+  @Input() readonly;
+  @Input() value;
+  @Input() label;
+  @Input() required;
+  @Input() info;
+  @Input() error;
+  @Input() testId;
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+  @Output() onChange: EventEmitter<any> = new EventEmitter();
+
+  richText = new FormControl();
+
+  ngOnInit(): void {}
+
+  ngOnChanges() {
+    if (this.required) {
+      this.richText.addValidators(Validators.required);
+    }
+
+    if (this.disabled) {
+      this.richText.disable();
+    } else {
+      this.richText.enable();
+    }
+
+    if (this.value) {
+      this.richText.setValue(this.value);
+    }
+  }
+
+  filePickerCallback = (cb) => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+            Note: Now we need to register the blob in TinyMCEs image blob
+            registry. In the next release this part hopefully won't be
+            necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        console.log('editorRef', tinymce.activeEditor);
+        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  blur() {
+    if (tinymce.activeEditor) {
+      const editorValue = tinymce.activeEditor.getContent({ format: 'html' });
+      this.onBlur.emit(editorValue);
+    }
+  }
+
+  change(event) {
+    this.onChange.emit(event);
+  }
+}

projects/angular-sdk-library/src/lib/_components/field/rich-text/rich-text.component.html

@@ -0,0 +1,20 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$ else noEdit">
+    <div *ngIf="bVisible$">
+      <component-mapper
+        name="RichTextEditor"
+        [props]="{ placeholder, required: bRequired$, disabled: bDisabled$, label: label$, readonly: false, error, info, testId, value:value$ }"
+        [parent]="this"
+        [outputEvents]="{ onBlur: fieldOnBlur, onChange: fieldOnChange }"
+      ></component-mapper>
+    </div>
+  </div>
+</ng-template>
+<ng-template #noEdit>
+  <div *ngIf="bVisible$ !== false">
+    <component-mapper name="RichTextEditor" [props]="{ label: label$, value: value$, readonly: true, testId }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>