Merge branch 'master' into embedded-changes

Author: SambhuPega

eslint.config.mjs

@@ -89,7 +89,7 @@ export default defineConfig([
       'prettier/prettier': 'off',
 
       // Disable rules from shared configs we're not ready for yet.
-      'sonarjs/cognitive-complexity': ['warn', 20],
+      'sonarjs/cognitive-complexity': ['error', 20],
       'sonarjs/no-duplicate-string': 'off',
 
       //
@@ -152,8 +152,7 @@ export default defineConfig([
       'import/no-relative-packages': 'off',
       'react/jsx-fragments': 'off',
       'react/react-in-jsx-scope': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-      'sonarjs/cognitive-complexity': ['warn', 45]
+      'react-hooks/exhaustive-deps': 'off'
     }
   },
   {

package.json

@@ -17,10 +17,10 @@
     "build:dev": "run-p -l lint build-angularsdk",
     "build:dev:ci": "npm run clean && npm install && npm run build:dev",
     "lint": "run-p -cl lint:*",
-    "lint:es": "eslint --color --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\"",
+    "lint:es": "eslint --color --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\" --max-warnings=0",
     "lint:format": "prettier --log-level warn -c .",
     "fix": "run-s -cl fix:*",
-    "fix:es": "eslint --color --fix --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\"",
+    "fix:es": "eslint --color --fix --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\" --max-warnings=0",
     "fix:format": "prettier --log-level warn -w .",
     "start-dev": "ng serve --port 3500",
     "start-dev-https": "ng serve --port 3500 --ssl --ssl-key ./keys/sdk-a.key --ssl-cert ./keys/sdk-a.crt",

packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -57,6 +57,7 @@ import { CaseViewComponent } from '../../_components/template/case-view/case-vie
 import { ConfirmationComponent } from '../../_components/template/confirmation/confirmation.component';
 import { DataReferenceComponent } from '../../_components/template/data-reference/data-reference.component';
 import { DefaultFormComponent } from '../../_components/template/default-form/default-form.component';
+import { DefaultPageComponent } from '../../_components/template/default-page/default-page.component';
 import { DetailsComponent } from '../../_components/template/details/details.component';
 import { DetailsNarrowWideComponent } from '../../_components/template/details-narrow-wide/details-narrow-wide.component';
 import { DetailsOneColumnComponent } from '../../_components/template/details-one-column/details-one-column.component';
@@ -82,6 +83,7 @@ import { OneColumnTabComponent } from '../../_components/template/one-column-tab
 import { PageComponent } from '../../_components/template/page/page.component';
 import { PromotedFiltersComponent } from '../../_components/template/promoted-filters/promoted-filters.component';
 import { SearchGroupsComponent } from '../../_components/template/advanced-search/search-groups/search-groups.component';
+import { SelfServiceCaseViewComponent } from '../../_components/template/self-service-case-view/self-service-case-view.component';
 import { SimpleTableComponent } from '../../_components/template/simple-table/simple-table.component';
 import { SimpleTableManualComponent } from '../../_components/template/simple-table-manual/simple-table-manual.component';
 import { SimpleTableSelectComponent } from '../../_components/template/simple-table-select/simple-table-select.component';
@@ -162,6 +164,7 @@ const pegaSdkComponentMap = {
   DateTime: DateTimeComponent,
   Decimal: DecimalComponent,
   DefaultForm: DefaultFormComponent,
+  DefaultPage: DefaultPageComponent,
   DeferLoad: DeferLoadComponent,
   Details: DetailsComponent,
   DetailsFields: MaterialDetailsFieldsComponent,
@@ -224,6 +227,7 @@ const pegaSdkComponentMap = {
   SearchForm: SearchFormComponent,
   SearchGroups: SearchGroupsComponent,
   SelectableCard: SelectableCardComponent,
+  SelfServiceCaseView: SelfServiceCaseViewComponent,
   SemanticLink: SemanticLinkComponent,
   SimpleTable: SimpleTableComponent,
   SimpleTableManual: SimpleTableManualComponent,

packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss

@@ -6,13 +6,20 @@
   align-items: start;
 }
 
+.psdk-grid-filter-2 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
 .psdk-grid-filter-wide-narrow {
   display: grid;
   grid-template-columns: 7fr 3fr;
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
-  padding: 1rem;
 }
 
 .psdk-grid-filter-narrow-wide {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -35,7 +35,10 @@
         else hasSecondaryValue
       "
     >
-      <component-mapper name="Operator" [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel }"></component-mapper>
+      <component-mapper
+        name="Operator"
+        [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
+      ></component-mapper>
     </div>
     <ng-template #hasSecondaryValue>
       <div class="psdk-csf-secondary-field">

packages/angular-sdk-components/src/lib/_components/designSystemExtension/wss-quick-create/wss-quick-create.component.scss

@@ -1,13 +1,19 @@
+.wss-quick-create-header {
+  background-color: var(--mat-sys-surface-container);
+}
+
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(20ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
 
 .quick-link-list {
-  border-radius: 8px;
+  background-color: var(--mat-sys-surface-container);
+  border-radius: 16px;
+  border: 1px solid var(--mat-sys-primary);
 }
 
 .quick-link-button {
@@ -16,22 +22,22 @@
   color: var(--app-form-color) !important;
   cursor: pointer;
   padding: calc(0.5rem * 2) !important;
-  height: 6rem;
+  height: 10rem;
   width: 100%;
   justify-content: start !important;
   background-color: transparent;
   border: 0;
 }
 
 .quick-link-icon {
-  width: 1em;
-  height: 1em;
+  width: 3em;
+  height: 3em;
   flex-shrink: 0;
-  filter: invert(100%);
 }
 
 .quick-link-button-span {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }

packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts

@@ -42,7 +42,8 @@ interface AutoCompleteProps extends PConnFieldProps {
     MatAutocompleteModule,
     MatOptionModule,
     forwardRef(() => ComponentMapperComponent)
-  ]
+  ],
+  providers: [DatapageService]
 })
 export class AutoCompleteComponent extends FieldBase implements OnInit {
   protected dataPageService = inject(DatapageService);

packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts

@@ -11,7 +11,6 @@ import { FieldBase } from '../field.base';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { getDateFormatInfo } from '../../../_helpers/date-format-utils';
 import { handleEvent } from '../../../_helpers/event-util';
-import { format } from '../../../_helpers/formatters';
 import { DateFormatters } from '../../../_helpers/formatters/date';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
@@ -81,12 +80,16 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
     this.fieldControl.setValue(dateTimeValue);
 
     if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
-      this.formattedValue$ = format(this.value$, 'datetime', {
-        format: `${this.theDateFormat.dateFormatString} hh:mm A`
-      });
+      this.formattedValue$ = this.generateDateTime(this.value$);
     }
   }
 
+  generateDateTime(sVal): string {
+    if (!sVal) return '';
+    if (sVal.length === 10) return this.utils.generateDate(sVal, 'Date-Long-Custom-YYYY');
+    return this.utils.generateDateTime(sVal, 'DateTime-Long-YYYY-Custom');
+  }
+
   fieldOnDateChange(event: any) {
     // this comes from the date pop up
     if (typeof event.value === 'object') {

packages/angular-sdk-components/src/lib/_components/field/multiselect/utils.ts

@@ -85,6 +85,31 @@ function prepareSearchResults(listObjData, displayFieldMeta) {
   return searchResults;
 }
 
+function handleGroupedDataSearch(dataApiObj, searchText, clickedGroup, initialCaseClass, itemsTree) {
+  const localDataApiObj = cloneDeep(dataApiObj);
+  localDataApiObj.fetchedNQData = false;
+  localDataApiObj.cache = {};
+
+  if (!searchText && !clickedGroup) {
+    return { shouldReturn: true, value: itemsTree };
+  }
+
+  localDataApiObj.parameters[Object.keys(localDataApiObj.parameters)[1]] = searchText;
+  localDataApiObj.parameters[Object.keys(localDataApiObj.parameters)[0]] = initialCaseClass;
+
+  if (clickedGroup) {
+    if (!searchText) {
+      const containsData = itemsTree.find(item => item.id === clickedGroup);
+      if (containsData?.items?.length) {
+        return { shouldReturn: true, value: itemsTree };
+      }
+    }
+    localDataApiObj.parameters[Object.keys(localDataApiObj.parameters)[0]] = JSON.stringify([clickedGroup]);
+  }
+
+  return { shouldReturn: false, value: localDataApiObj };
+}
+
 async function doSearch(
   searchText,
   clickedGroup,
@@ -96,61 +121,44 @@ async function doSearch(
   showSecondaryInSearchOnly,
   selected
 ) {
-  let searchTextForUngroupedData = '';
-  if (dataApiObj) {
-    // creating dataApiObject in grouped data cases
-    if (isGroupData) {
-      dataApiObj = cloneDeep(dataApiObj);
-      dataApiObj.fetchedNQData = false;
-      dataApiObj.cache = {};
-
-      // if we have no search text and no group selected, return the original tree
-      if (searchText === '' && clickedGroup === '') {
-        return itemsTree;
-      }
+  if (!dataApiObj) {
+    return itemsTree;
+  }
 
-      // setting the inital search text & search classes in ApiObject
-      dataApiObj.parameters[Object.keys(dataApiObj.parameters)[1]] = searchText;
-      dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = initialCaseClass;
-
-      // if we have a selected group
-      if (clickedGroup) {
-        // check if the data for this group is already present and no search text
-        if (searchText === '') {
-          const containsData = itemsTree.find(item => item.id === clickedGroup);
-          // do not make API call when items of respective group are already fetched
-          if (containsData?.items?.length) return itemsTree;
-        }
+  let searchTextForApi = '';
+  let localDataApiObj = dataApiObj;
 
-        dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = JSON.stringify([clickedGroup]);
-      }
-    } else {
-      searchTextForUngroupedData = searchText;
+  if (isGroupData) {
+    const groupResult = handleGroupedDataSearch(dataApiObj, searchText, clickedGroup, initialCaseClass, itemsTree);
+    if (groupResult.shouldReturn) {
+      return groupResult.value;
     }
+    localDataApiObj = groupResult.value;
+  } else {
+    searchTextForApi = searchText;
+  }
 
-    // search API call
-    const response = await dataApiObj.fetchData(searchTextForUngroupedData).catch(() => {
-      return itemsTree;
-    });
+  const response = await localDataApiObj.fetchData(searchTextForApi).catch(() => ({ data: undefined }));
 
-    let listObjData = response.data;
-    let newItemsTree = [];
-    if (isGroupData) {
-      if (searchText) {
-        listObjData = prepareSearchResults(listObjData, displayFieldMeta);
-      } else {
-        newItemsTree = putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
-        return newItemsTree;
-      }
-    }
-    const showSecondaryData = showSecondaryInSearchOnly ? !!searchText : true;
-    if (listObjData !== undefined && listObjData.length > 0) {
-      newItemsTree = listObjData.map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
+  let listObjData = response.data;
+  if (!listObjData) {
+    return itemsTree;
+  }
+
+  if (isGroupData) {
+    if (searchText) {
+      listObjData = prepareSearchResults(listObjData, displayFieldMeta);
+    } else {
+      return putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
     }
-    return newItemsTree;
   }
 
-  return itemsTree;
+  if (listObjData.length === 0) {
+    return [];
+  }
+
+  const showSecondaryData = showSecondaryInSearchOnly ? !!searchText : true;
+  return listObjData.map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
 }
 
 function setValuesToPropertyList(searchText, assocProp, items, columns, actions, updatePropertyInRedux = true) {