@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-a/components/create/override-sdk/template/two-column-tab/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "TwoColumnTab",
-    "name": "TwoColumnTab",
-    "label": "Two column",
-    "description": "Two column",
-    "type": "Template",
-    "subtype": "TAB",
-    "properties": []
-}
+  "componentKey": "TwoColumnTab",
+  "name": "TwoColumnTab",
+  "label": "Two column",
+  "description": "Two column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/wide-narrow-form/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "WideNarrowForm",
-    "name": "WideNarrowForm",
-    "label": "Wide-narrow",
-    "description": "WideNarrow Template",
-    "type": "Template",
-    "subtype": "FORM",
-    "properties": []
-}
+  "componentKey": "WideNarrowForm",
+  "name": "WideNarrowForm",
+  "label": "Wide-narrow",
+  "description": "WideNarrow Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/wide-narrow-page/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "WideNarrowPage",
-    "name": "WideNarrowPage",
-    "label": "Wide-narrow",
-    "description": "Wide-narrow Page Template",
-    "type": "Template",
-    "subtype": "PAGE",
-    "properties": []
-}
+  "componentKey": "WideNarrowPage",
+  "name": "WideNarrowPage",
+  "label": "Wide-narrow",
+  "description": "Wide-narrow Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/wide-narrow-page/wide-narrow-page.component.ts

@@ -22,9 +22,6 @@ export class WideNarrowPageComponent implements OnInit, OnDestroy {
   constructor(private angularPConnect: AngularPConnectService) {}
 
   ngOnInit(): void {
-    // normalize the pConn$ in case the incoming pConn$ is a 'reference'
-    // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     // this.updateSelf();

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
@@ -27,7 +27,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   @Input() pages$: any[];
   @Input() caseTypes$: any[];
   @Input() homePage: any;
-  @Input() portalLogoImage$: string;
+  @Input() portalLogoImage$: string | Blob | null;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -52,7 +52,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -102,30 +101,29 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   }
 
   initComponent() {
-    this.ngZone.run(() => {
-      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+    this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
 
-      // Then, continue on with other initialization
+    // Then, continue on with other initialization
 
-      // making a copy, so can add info
-      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+    // making a copy, so can add info
+    this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
 
-      this.navPages$.forEach(page => {
-        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
-      });
+    this.navPages$.forEach(page => {
+      page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
+    });
 
-      this.actionsAPI = this.pConn$.getActionsApi();
-      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
-      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
-      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as WssNavBarProps;
-      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+    this.actionsAPI = this.pConn$.getActionsApi();
+    this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+    this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as WssNavBarProps;
+    this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
 
-      // const oData = this.pConn$.getDataObject();
+    // const oData = this.pConn$.getDataObject();
 
-      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-    });
+    this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
+    this.cdRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

package/tests/assets/sdk-a/components/create/override-sdk/widget/app-announcement/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "AppAnnouncement",
-    "name": "AppAnnouncement",
-    "label": "App announcement",
-    "description": "App announcement widget",
-    "type": "Widget",
-    "subtype": "PAGE",
-    "properties": []
-}
+  "componentKey": "AppAnnouncement",
+  "name": "AppAnnouncement",
+  "label": "App announcement",
+  "description": "App announcement widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/widget/attachment/AttachmentUtils.ts

@@ -49,7 +49,7 @@ export const fileDownloadVar = (content: { data: string; headers: Record<string,
     if (!/^(http|https):\/\//.test(data)) {
       data = `//${data}`;
     }
-    window.open(content.data, '_blank');
+    window.open(data, '_blank');
   } else if (type === 'EMAIL') {
     // Temp Fix: for EMAIL type attachment
     fileDownload(content.data, name, 'html', content.headers);
@@ -270,18 +270,26 @@ export const onFileDownload = (responseProps, context) => {
 
 // Prepares new structure as per Cosmos component
 export const transformAttachments = attachments => {
-  const transformedFiles = [...attachments];
   let deleteIndex = -1;
-  transformedFiles.forEach(attachment => {
-    attachment.props.id = attachment.responseProps.ID;
-    attachment.props.format = attachment.props.name.split('.').pop();
-    if (attachment.props.error) {
-      attachment.responseProps.deleteIndex = deleteIndex;
-    } else {
+
+  return attachments.map(attachment => {
+    const props = {
+      ...attachment.props,
+      id: attachment.responseProps.ID,
+      format: attachment.props.name.split('.').pop()
+    };
+
+    if (!props.error) {
       deleteIndex += 1;
-      attachment.responseProps.deleteIndex = deleteIndex;
     }
-  });
 
-  return transformedFiles;
+    return {
+      ...attachment,
+      props,
+      responseProps: {
+        ...attachment.responseProps,
+        deleteIndex
+      }
+    };
+  });
 };

package/tests/assets/sdk-a/components/create/override-sdk/widget/attachment/attachment.component.html

@@ -1,6 +1,6 @@
 <div class="file-upload-container" *ngIf="bVisible$">
   <span class="attachment-label" [ngClass]="{ 'file-label': bRequired$ }">{{ label$ }}</span>
-  <div *ngIf="(files.length === 0 && !allowMultiple$) || allowMultiple$">
+  <div *ngIf="displayMode !== 'DISPLAY_ONLY' && ((files.length === 0 && !allowMultiple$) || allowMultiple$)">
     <div
       style="margin-bottom: 10px"
       id="attachment-container"
@@ -36,18 +36,28 @@
           <div *ngIf="file.props.meta" [ngStyle]="{ color: file.props.error ? 'red' : null }">{{ file.props.meta }}</div>
         </div>
         <div class="psdk-attachment-action">
-          <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file, i)">
-            <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
-          </button>
-          <div *ngIf="!file.ID">
+          <div *ngIf="displayMode === 'DISPLAY_ONLY'; else editableActions">
             <button id="setting-button" mat-icon-button [matMenuTriggerFor]="actionMenu">
               <mat-icon>more_vert</mat-icon>
             </button>
             <mat-menu #actionMenu="matMenu">
               <button mat-menu-item (click)="downloadFile(file.responseProps ? file.responseProps : {})">Download</button>
-              <button mat-menu-item (click)="deleteFile(file, i)">Delete</button>
             </mat-menu>
           </div>
+          <ng-template #editableActions>
+            <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file, i)">
+              <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
+            </button>
+            <div *ngIf="!file.ID">
+              <button id="setting-button" mat-icon-button [matMenuTriggerFor]="actionMenu">
+                <mat-icon>more_vert</mat-icon>
+              </button>
+              <mat-menu #actionMenu="matMenu">
+                <button mat-menu-item (click)="downloadFile(file.responseProps ? file.responseProps : {})">Download</button>
+                <button mat-menu-item (click)="deleteFile(file, i)">Delete</button>
+              </mat-menu>
+            </div>
+          </ng-template>
         </div>
       </div>
     </div>

package/tests/assets/sdk-a/components/create/override-sdk/widget/attachment/attachment.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -76,7 +76,8 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -96,6 +97,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
         PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
         () => {
           this.overrideLocalState = true;
+          this.cdRef.markForCheck();
         },
         this.caseID
       );
@@ -192,8 +194,8 @@ export class AttachmentComponent implements OnInit, OnDestroy {
             error: errorFile.props.error || null
           };
         });
-        let key = '';
-        let updatedAttachments: any = [];
+        let key: string;
+        let updatedAttachments: any;
         if (this.allowMultiple$ || this.isOldAttachment) {
           key = this.isOldAttachment ? `${this.valueRef}.pxResults` : this.valueRef;
           const existingAttachments = PCore.getStoreValue(`.${key}`, this.pConn$.getPageReference(), this.pConn$.getContextName()) || [];
@@ -207,6 +209,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
           isArrayDeepMerge: false,
           removePropertyFromChangedList: true
         });
+      } else if (this.filesWithError.length === 0) {
+        const hasActiveUpload = this.files.some(file => file.inProgress);
+        if (!hasActiveUpload) {
+          this.files = transformAttachments(this.attachments);
+          this.attachmentCount = this.attachments.length;
+          this.filesWithError = [];
+        }
       }
     }
   }
@@ -336,6 +345,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
       return localFile;
     });
+    this.cdRef.markForCheck();
   }
 
   populateErrorAndUpdateRedux(file) {

package/tests/assets/sdk-a/components/create/override-sdk/widget/attachment/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "label": "Attachment",
-    "componentKey": "Attachment",
-    "name": "Attachment",
-    "description": "Attachment",
-    "type": "Field",
-    "subtype": "DATA_CAPTURE",
-    "properties": []
-}
+  "label": "Attachment",
+  "componentKey": "Attachment",
+  "name": "Attachment",
+  "description": "Attachment",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/widget/case-history/case-history.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Utils } from '@pega/angular-sdk-components';
@@ -23,7 +23,10 @@ export class CaseHistoryComponent implements OnInit {
   displayedColumns$ = Array<any>();
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -54,6 +57,7 @@ export class CaseHistoryComponent implements OnInit {
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
       this.waitingForData = false;
+      this.cdRef.markForCheck();
     });
   }
   // This method isn't being used anywhere, keeping it as a reference for now

package/tests/assets/sdk-a/components/create/override-sdk/widget/case-history/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "CaseHistory",
-    "name": "CaseHistory",
-    "label": "Case history",
-    "description": "Case history widget",
-    "type": "Widget",
-    "subtype": "CASE",
-    "properties": []
-}
+  "componentKey": "CaseHistory",
+  "name": "CaseHistory",
+  "label": "Case history",
+  "description": "Case history widget",
+  "type": "Widget",
+  "subtype": "CASE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/widget/feed-container/config-ext.json

@@ -1,16 +1,13 @@
 {
-    "componentKey": "Pulse",
-    "name": "Pulse",
-    "label": "Pulse",
-    "description": "Pulse feed widget",
-    "type": "Widget",
-    "subtype": [
-        "PAGE",
-        "CASE"
-    ],
-    "properties": [],
-    "defaultConfig": {
-        "messageIDs": "@P pulse.messageIDs"
-    },
-    "hideModifyIcon": true
-}
+  "componentKey": "Pulse",
+  "name": "Pulse",
+  "label": "Pulse",
+  "description": "Pulse feed widget",
+  "type": "Widget",
+  "subtype": ["PAGE", "CASE"],
+  "properties": [],
+  "defaultConfig": {
+    "messageIDs": "@P pulse.messageIDs"
+  },
+  "hideModifyIcon": true
+}

package/tests/assets/sdk-a/components/create/override-sdk/widget/feed-container/feed-container.component.ts

@@ -156,204 +156,6 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
       }
     };
 
-    /*
-
-    const { getPConnect, messageIDs } = props;
-    const [mentionResults, setMentionResults] = useState([]);
-    const [tagResults, setTagResults] = useState([]);
-    const [attachments, setAttachments] = useState([]);
-    const [feedFilters, setFeedFilters] = useState();
-    const {
-      fetchMessages,
-      postMessage,
-      getMentionSuggestions,
-      getTagSuggestions
-    } = FeedApi(getPConnect());
-    const appName = PCore.getEnvironmentInfo().getApplicationName();
-    let value = "";
-    let feedID = "";
-    let feedClass = "";
-    if (getPConnect().getCaseSummary().ID) {
-      value = getPConnect().getCaseSummary().ID;
-      feedID = "pyCaseFeed";
-      feedClass = getPConnect().getCaseSummary().content.classID;
-    } else {
-      value = `DATA-PORTAL $${appName}`;
-      feedID = "pyDashboardFeed";
-      feedClass = "@baseclass";
-    }
-    // For cancelling fetchrequest for filetrs
-    const fetchMessagesCancelTokenSource = useRef([]);
-
-    useEffect(() => {
-      fetchMessages(
-        value,
-        feedID,
-        feedClass,
-        null,
-        fetchMessagesCancelTokenSource.current
-      ).then((res) => {
-        setFeedFilters(res);
-      });
-      PCore.getAssetLoader().getLoader("component-loader")(["Activity"]);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const onUploadProgress = useCallback((file) => {
-      return ({ loaded, total }) => {
-        file.progress = Math.floor((loaded / total) * 100);
-        setAttachments((current) => {
-          return current.map((currFile) => {
-            return currFile.name === file.name ? file : currFile;
-          });
-        });
-      };
-    }, []);
-
-    const errorHandler = useCallback((isFetchCanceled, file) => {
-      return (error) => {
-        if (!isFetchCanceled(error)) {
-          let localizedValue = "Upload failed";
-          if (
-            error.response &&
-            error.response.data &&
-            error.response.data.errorDetails
-          ) {
-            localizedValue = error.response.data.errorDetails[0].localizedValue;
-          }
-          delete file.progress;
-          setAttachments((current) => {
-            return current.map((currFile) => {
-              if (currFile.name === file.name) {
-                currFile.meta = localizedValue;
-                currFile.error = true;
-              }
-              return currFile;
-            });
-          });
-          error.isHandled = true;
-        }
-        throw error;
-      };
-    }, []);
-
-    const postComment = ({ value: message, clear }) => {
-      const attachmentIDs = [];
-      const attachmentUtils = PCore.getAttachmentUtils();
-      if (attachments && !!attachments.length) {
-        attachments
-          .filter((file) => !file.error)
-          .map((file) => {
-            return attachmentUtils
-              .uploadAttachment(file, onUploadProgress, errorHandler)
-              .then((fileResponse) => {
-                const fileConfig = {
-                  type: "File",
-                  category: "File",
-                  fileName: file.name,
-                  ID: fileResponse.data.ID
-                };
-                attachmentIDs.push(fileConfig);
-                if (attachments.length === attachmentIDs.length) {
-                  postMessage(
-                    value,
-                    transformMarkdownToMsg(message),
-                    attachmentIDs
-                  );
-                  clear();
-                  setAttachments([]);
-                }
-              })
-
-              .catch(console.error);
-          });
-      } else {
-        postMessage(value, transformMarkdownToMsg(message));
-        clear();
-      }
-    };
-
-    */
-
-    /* On search is called when @ character is entered and will display the mention */
-
-    /*
-    const onSearch = debounce((event) => {
-      if (event.type === "mention") {
-        getMentionSuggestions({
-          pulseContext: value,
-          searchFor: event.search
-        }).then((res) => {
-          setMentionResults(res);
-        });
-      } else {
-        getTagSuggestions({
-          searchFor: event.search
-        }).then((res) => {
-          setTagResults(res);
-        });
-      }
-    }, 150);
-
-    const userName = getPConnect().getEnvironmentInfo().getOperatorName();
-    const imageKey = getPConnect().getEnvironmentInfo().getOperatorImageInsKey();
-
-    const onFilesAdded = useCallback((newlyAddedFiles) => {
-      setAttachments((current) => [
-        ...newlyAddedFiles.map((file) => {
-          if (!validateMaxSize(file, 5)) {
-            file.error = true;
-            file.meta = "File is too big. Max allowed size is 5MB.";
-          }
-          file.icon = getIconFromFileType(file.type);
-          file.onDelete = () => {
-            setAttachments((c) => c.filter((f) => f.name !== file.name));
-          };
-          return file;
-        }),
-        ...current
-      ]);
-    }, []);
-
-    const onFilterChange = useCallback(
-      (filterID) => {
-        const updatedFilters = [...feedFilters];
-        const filterToUpdate = updatedFilters.find(
-          (feedItem) => feedItem.id === filterID
-        );
-        filterToUpdate.on = !filterToUpdate.on;
-        if (filterID === "All")
-          updatedFilters.forEach((feedFilter) => {
-            feedFilter.on = filterToUpdate.on;
-          });
-        else if (
-          updatedFilters.find(
-            (feedItem) => feedItem.on === false && feedItem.id !== "All"
-          )
-        )
-          updatedFilters.find((feedItem) => feedItem.id === "All").on = false;
-        else updatedFilters.find((feedItem) => feedItem.id === "All").on = true;
-        setFeedFilters(updatedFilters);
-        fetchMessages(
-          value,
-          feedID,
-          feedClass,
-          feedFilters,
-          fetchMessagesCancelTokenSource.current
-        );
-      },
-      [
-        value,
-        feedID,
-        feedClass,
-        feedFilters,
-        fetchMessagesCancelTokenSource,
-        fetchMessages
-      ]
-    );
-
-    */
-
     // set up svg images
     this.svgComment$ = this.utils.getImageSrc('chat', this.utils.getSDKStaticContentUrl());
     this.svgLike$ = this.utils.getImageSrc('thumbs-up', this.utils.getSDKStaticContentUrl());
@@ -545,7 +347,7 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   }
 
   likeClick(messageID: string, rMessageID: string, bLikedByMe: boolean, level: string) {
-    let pulseMessage = {};
+    let pulseMessage: object;
 
     if (level === 'top') {
       pulseMessage = {

package/tests/assets/sdk-a/components/create/override-sdk/widget/file-utility/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "FileUtility",
-    "name": "FileUtility",
-    "label": "Attachments",
-    "description": "Attachments",
-    "type": "Widget",
-    "subtype": "CASE",
-    "properties": []
-}
+  "componentKey": "FileUtility",
+  "name": "FileUtility",
+  "label": "Attachments",
+  "description": "Attachments",
+  "type": "Widget",
+  "subtype": "CASE",
+  "properties": []
+}