diff --git a/docs/README.md b/docs/README.md index ad25423a9b..576d900a2e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -96,6 +96,7 @@ A collection of Angular components for generic use. | [Card View component](core/components/card-view.component.md) | Displays a configurable property list renderer. | [Source](../lib/core/src/lib/card-view/components/card-view/card-view.component.ts) | | [Comment list component](core/components/comment-list.component.md) | Shows a list of comments. | [Source](../lib/core/src/lib/comments/comment-list/comment-list.component.ts) | | [Comments Component](core/components/comments.component.md) | Displays comments from users involved in a specified environment and allows an involved user to add a comment to a environment. | [Source](../lib/core/src/lib/comments/comments.component.ts) | +| [Content Enrichment Menu Component](core/components/content-enrichment-menu.component.md) | Allows the user to handle AI predictions by confirming or rejecting changes. | [Source](../lib/core/src/lib/prediction/components/content-enrichment-menu/content-enrichment-menu.component.ts) | | [Data Column Component](core/components/data-column.component.md) | Defines column properties for DataTable, Tasklist, Document List and other components. | [Source](../lib/core/src/lib/datatable/data-column/data-column.component.ts) | | [DataTable component](core/components/datatable.component.md) | Displays data as a table with customizable columns and presentation. | [Source](../lib/core/src/lib/datatable/components/datatable/datatable.component.ts) | | [Dynamic Chip List component](core/components/dynamic-chip-list.component.md) | This component shows dynamic list of chips which render depending on free space. | [Source](../lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts) | diff --git a/docs/content-services/services/card-view-content-update.service.md b/docs/content-services/services/card-view-content-update.service.md index c487e805ca..95167dff87 100644 --- a/docs/content-services/services/card-view-content-update.service.md +++ b/docs/content-services/services/card-view-content-update.service.md @@ -2,7 +2,7 @@ Title: Card View Content Update Service Added: v6.0.0 Status: Active -Last reviewed: 2022-11-25 +Last reviewed: 2024-06-11 --- # [Card View Content Update Service](../../../lib/content-services/src/lib/common/services/card-view-content-update.service.ts "Defined in card-view-content-update.service.ts") @@ -25,6 +25,9 @@ Implements [`BaseCardViewContentUpdate`](../../../lib/content-services/src/lib/i - **updateNodeAspect**(node: [`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md))
Update node aspect observable. - _node:_ [`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) - +- **onPredictionStatusChanged**(notification: [`PredictionStatusUpdate[]`](../../core/interfaces/prediction-status-update.interface.md))
+ Clears predictions for properties and sets the previous value, if provided. + - _notification:_ [`PredictionStatusUpdate[]`](../../core/interfaces/prediction-status-update.interface.md) - ## Properties diff --git a/docs/core/components/content-enrichment-menu.component.md b/docs/core/components/content-enrichment-menu.component.md new file mode 100644 index 0000000000..0d0b768bf1 --- /dev/null +++ b/docs/core/components/content-enrichment-menu.component.md @@ -0,0 +1,32 @@ +--- +Title: Content Enrichment Menu Component +Added: v6.10.0 +Status: Active +Last reviewed: 2024-06-11 +--- + +# [Content Enrichment Menu Component](../../../lib/core/src/lib/prediction/components/content-enrichment-menu/content-enrichment-menu.component.ts "Defined in content-enrichment-menu.component.ts") + +Allows the user to handle AI predictions by confirming or rejecting changes. + +![Content Enrichment Menu Component](../../docassets/images/content-enrichment-menu.png) + +## Basic Usage + +```html + + Form field + + + +``` + +### Properties + +| Name | Type | Default value | Description | +|------------|------------------------------------------------------------------------------------------------------------------------------------------|---------------|-----------------------------------| +| prediction | [`Prediction`](https://github.com/Alfresco/alfresco-ng2-components/blob/develop/lib/js-api/src/api/hxi-connector-api/docs/Prediction.md) | | Prediction for the node property. | + +## See also + +- [Prediction Status Update Interface](../interfaces/prediction-status-update.interface.md) diff --git a/docs/core/interfaces/base-card-view-update.interface.md b/docs/core/interfaces/base-card-view-update.interface.md index 64d2ec8dc0..5931ddf46b 100644 --- a/docs/core/interfaces/base-card-view-update.interface.md +++ b/docs/core/interfaces/base-card-view-update.interface.md @@ -16,20 +16,23 @@ export interface BaseCardViewUpdate { itemUpdated$: Subject; itemClicked$: Subject; updateItem$: Subject; + predictionStatusChanged$: Subject; update(property: CardViewBaseItemModel, newValue: any); clicked(property: CardViewBaseItemModel); updateElement(notification: CardViewBaseItemModel); + onPredictionStatusChanged(notification: PredictionStatusUpdate[]); } ``` ## Properties -| Name | Type | Description | -| ---- | ---- | ----------- | -| itemUpdated$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`UpdateNotification`](../../../lib/core/src/lib/card-view/interfaces/update-notification.interface.ts)`>` | The current updated item. | -| itemClicked$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`ClickNotification`](../../../lib/core/src/lib/card-view/interfaces/click-notification.interface.ts)`>` | The current clicked item. | -| updateItem$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts)`>` | The current model for the update item. | +| Name | Type | Description | +|--------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------| +| itemUpdated$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`UpdateNotification`](../../../lib/core/src/lib/card-view/interfaces/update-notification.interface.ts)`>` | The current updated item. | +| itemClicked$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`ClickNotification`](../../../lib/core/src/lib/card-view/interfaces/click-notification.interface.ts)`>` | The current clicked item. | +| updateItem$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts)`>` | The current model for the update item. | +| predictionStatusChanged$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`PredictionStatusUpdate[]`](./prediction-status-update.interface.md)`>` | The current model for items with irrelevant predictions. | ### Methods @@ -48,6 +51,10 @@ export interface BaseCardViewUpdate { Update updateItem$ observable. - notification:\_ [`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts) - The notification. +- **onPredictionStatusChanged**(notification: [`PredictionStatusUpdate[]`](./prediction-status-update.interface.md))
+ Update predictionStatusChanged$ observable. + - notification:\_ [`PredictionStatusUpdate[]`](./prediction-status-update.interface.md) - The notification. + ## See also - [CardViewUpdate service](../services/card-view-update.service.md) diff --git a/docs/core/interfaces/card-view-item.interface.md b/docs/core/interfaces/card-view-item.interface.md index ec7a6e30d5..c9c5dcd6d3 100644 --- a/docs/core/interfaces/card-view-item.interface.md +++ b/docs/core/interfaces/card-view-item.interface.md @@ -2,7 +2,7 @@ Title: Card View Item interface Added: v2.0.0 Status: Active -Last reviewed: 2018-05-08 +Last reviewed: 2024-06-11 --- # [Card View Item interface](../../../lib/core/src/lib/card-view/interfaces/card-view-item.interface.ts "Defined in card-view-item.interface.ts") @@ -22,22 +22,24 @@ export interface CardViewItem { editable?: boolean; icon?: string; data?: any; + prediction?: Prediction; } ``` ### Properties -| Name | Type | Default | Description | -| ---- | ---- | ------- | ----------- | -| label | string | "" | Item label | -| value | any | | The original data value for the item | -| key | string | "" | Identifying key (important when editing the item) | -| default | any | | The default value to display if the value is empty | -| displayValue | string | "" | The value to display | -| editable | boolean | false | Toggles whether the item is editable | -| clickable | boolean | false | Toggles whether the item is clickable | -| icon | string | | The material icon to show beside clickable items | -| data | any | null | Any custom data which is needed to be provided and stored in the model for any reason. During an update or a click event this can be a container of any custom data which can be useful for 3rd party codes. | +| Name | Type | Default | Description | +|--------------|------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| label | string | "" | Item label | +| value | any | | The original data value for the item | +| key | string | "" | Identifying key (important when editing the item) | +| default | any | | The default value to display if the value is empty | +| displayValue | string | "" | The value to display | +| editable | boolean | false | Toggles whether the item is editable | +| clickable | boolean | false | Toggles whether the item is clickable | +| icon | string | | The material icon to show beside clickable items | +| data | any | null | Any custom data which is needed to be provided and stored in the model for any reason. During an update or a click event this can be a container of any custom data which can be useful for 3rd party codes. | +| prediction | Prediction | | Property prediction | ## Details diff --git a/docs/core/interfaces/prediction-status-update.interface.md b/docs/core/interfaces/prediction-status-update.interface.md new file mode 100644 index 0000000000..f2100041be --- /dev/null +++ b/docs/core/interfaces/prediction-status-update.interface.md @@ -0,0 +1,28 @@ +--- +Title: Prediction Status Update Interface +Added: v6.10.0 +Status: Active +Last reviewed: 2024-06-11 +--- + +# [Prediction Status Update Interface](../../../lib/core/src/lib/prediction/interfaces/prediction-status-update.interface.ts "Defined in prediction-status-update.interface.ts") + +## Basic usage + +```ts +export interface PredictionStatusUpdate { + key: string; + previousValue?: any; + } +``` + +## Properties + +| Name | Type | Description | +|---------------|----------|-------------------------------| +| key | `string` | Key of the property. | +| previousValue | `any` | Previous human entered value. | + +## See also + +- [BaseCardViewUpdate interface](../interfaces/base-card-view-update.interface.md) diff --git a/docs/core/services/card-view-update.service.md b/docs/core/services/card-view-update.service.md index ecfbe06641..74747de049 100644 --- a/docs/core/services/card-view-update.service.md +++ b/docs/core/services/card-view-update.service.md @@ -137,8 +137,27 @@ Example this.cardViewUpdateService.updateElement(cardViewBaseItemModel) ``` +## Clear predictions for properties and set previous value + +`onPredictionStatusChanged` function helps to clear predictions and set previous value (if provided) for the card view item. It takes the [`PredictionStatusUpdate[]`](../interfaces/prediction-status-update.interface.md) as a parameter. + +Example + +```javascript + this.cardViewUpdateService.onPredictionStatusChanged(notification); +``` + +You can subscribe to the `predictionStatusChanged$` to be informed about prediction status changes. + +```ts +ngOnInit() { + this.cardViewUpdateService.predictionStatusChanged$.subscribe(this.respondToPredictionStatusChange.bind(this)); +} +``` + ## See also - [Card view component](../components/card-view.component.md) - [UpdateNotification interface](../interfaces/update-notification.interface.md) - [ClickNotification interface](../interfaces/click-notification.interface.md) +- [PredictionStatusUpdate interface](../interfaces/prediction-status-update.interface.md) diff --git a/docs/docassets/images/content-enrichment-menu.png b/docs/docassets/images/content-enrichment-menu.png new file mode 100644 index 0000000000..2dcf18cf8c Binary files /dev/null and b/docs/docassets/images/content-enrichment-menu.png differ diff --git a/docs/versionIndex.md b/docs/versionIndex.md index eeab83126d..bd69002707 100644 --- a/docs/versionIndex.md +++ b/docs/versionIndex.md @@ -46,6 +46,14 @@ backend services have been tested with each released version of ADF. - [v2.1.0](#v210) - [v2.0.0](#v200) +## v6.10.0 + + + +- [Content Enrichment Menu Component](core/components/content-enrichment-menu.component.md) + + + ## v6.8.0 diff --git a/lib/content-services/src/lib/common/services/card-view-content-update.service.spec.ts b/lib/content-services/src/lib/common/services/card-view-content-update.service.spec.ts index 21f7b4edfe..4dcf36f3c2 100644 --- a/lib/content-services/src/lib/common/services/card-view-content-update.service.spec.ts +++ b/lib/content-services/src/lib/common/services/card-view-content-update.service.spec.ts @@ -18,12 +18,15 @@ import { Node } from '@alfresco/js-api'; import { fakeAsync, TestBed } from '@angular/core/testing'; import { CardViewContentUpdateService } from './card-view-content-update.service'; +import { CardViewUpdateService, PredictionStatusUpdate } from '@alfresco/adf-core'; describe('CardViewContentUpdateService', () => { let cardViewContentUpdateService: CardViewContentUpdateService; + let cardViewUpdateService: CardViewUpdateService; beforeEach(() => { cardViewContentUpdateService = TestBed.inject(CardViewContentUpdateService); + cardViewUpdateService = TestBed.inject(CardViewUpdateService); }); it('should send updated node when aspect changed', fakeAsync(() => { @@ -34,4 +37,12 @@ describe('CardViewContentUpdateService', () => { cardViewContentUpdateService.updateNodeAspect(fakeNode); })); + + it('should call onPredictionStatusChanged on cardViewUpdateService', () => { + spyOn(cardViewUpdateService, 'onPredictionStatusChanged'); + const mockNotification: PredictionStatusUpdate[] = [{ key: 'test', previousValue: 'value' }]; + cardViewContentUpdateService.onPredictionStatusChanged(mockNotification); + + expect(cardViewUpdateService.onPredictionStatusChanged).toHaveBeenCalledWith(mockNotification); + }); }); diff --git a/lib/content-services/src/lib/common/services/card-view-content-update.service.ts b/lib/content-services/src/lib/common/services/card-view-content-update.service.ts index 42f3533049..c44e1d27c9 100644 --- a/lib/content-services/src/lib/common/services/card-view-content-update.service.ts +++ b/lib/content-services/src/lib/common/services/card-view-content-update.service.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { UpdateNotification, CardViewBaseItemModel, CardViewUpdateService } from '@alfresco/adf-core'; +import { UpdateNotification, CardViewBaseItemModel, CardViewUpdateService, PredictionStatusUpdate } from '@alfresco/adf-core'; import { Node } from '@alfresco/js-api'; import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @@ -40,6 +40,10 @@ export class CardViewContentUpdateService implements BaseCardViewContentUpdate { this.cardViewUpdateService.updateElement(notification); } + onPredictionStatusChanged(notification: PredictionStatusUpdate[]) { + this.cardViewUpdateService.onPredictionStatusChanged(notification); + } + updateNodeAspect(node: Node) { this.updatedAspect$.next(node); } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index f4a4776fff..dfc5a27544 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -34,6 +34,10 @@ $panel-properties-height: 56px !default; font-size: 19px; line-height: 20px; } + + adf-content-enrichment-menu button.adf-ai-button { + margin-left: -10px; + } } } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts index 886f34500d..66d5a59a40 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts @@ -18,7 +18,17 @@ import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { SimpleChange } from '@angular/core'; import { By } from '@angular/platform-browser'; -import { Category, CategoryPaging, ClassesApi, Node, Tag, TagBody, TagEntry, TagPaging, TagPagingList } from '@alfresco/js-api'; +import { + Category, + CategoryPaging, + ClassesApi, + Node, Prediction, PredictionPaging, ReviewStatus, + Tag, + TagBody, + TagEntry, + TagPaging, + TagPagingList +} from '@alfresco/js-api'; import { ContentMetadataComponent } from './content-metadata.component'; import { ContentMetadataService } from '../../services/content-metadata.service'; import { @@ -30,10 +40,12 @@ import { PipeModule, TranslationMock, TranslationService, - UpdateNotification + UpdateNotification, + PredictionService, + PredictionStatusUpdate } from '@alfresco/adf-core'; import { NodesApiService } from '../../../common/services/nodes-api.service'; -import { EMPTY, of, throwError } from 'rxjs'; +import { EMPTY, of, throwError, Subject } from 'rxjs'; import { TranslateModule } from '@ngx-translate/core'; import { CardViewContentUpdateService } from '../../../common/services/card-view-content-update.service'; import { PropertyGroup } from '../../interfaces/property-group.interface'; @@ -61,12 +73,14 @@ describe('ContentMetadataComponent', () => { let fixture: ComponentFixture; let contentMetadataService: ContentMetadataService; let updateService: CardViewContentUpdateService; + let predictionService: PredictionService; let nodesApiService: NodesApiService; let node: Node; let folderNode: Node; let tagService: TagService; let categoryService: CategoryService; let getClassSpy: jasmine.Spy; + let getBasicPropertiesSpy: jasmine.Spy; let notificationService: NotificationService; let getGroupedPropertiesSpy: jasmine.Spy; @@ -215,6 +229,13 @@ describe('ContentMetadataComponent', () => { linkNodeToCategory: () => EMPTY, unlinkNodeFromCategory: () => EMPTY } + }, + { + provide: PredictionService, + useValue: { + getPredictions: () => EMPTY, + predictionStatusUpdated$: new Subject() + } } ] }); @@ -222,6 +243,7 @@ describe('ContentMetadataComponent', () => { component = fixture.componentInstance; contentMetadataService = TestBed.inject(ContentMetadataService); updateService = TestBed.inject(CardViewContentUpdateService); + predictionService = TestBed.inject(PredictionService); nodesApiService = TestBed.inject(NodesApiService); tagService = TestBed.inject(TagService); categoryService = TestBed.inject(CategoryService); @@ -250,7 +272,8 @@ describe('ContentMetadataComponent', () => { component.node = node; component.preset = preset; spyOn(contentMetadataService, 'getContentTypeProperty').and.returnValue(of([])); - getGroupedPropertiesSpy = spyOn(contentMetadataService, 'getGroupedProperties'); + getGroupedPropertiesSpy = spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([])); + getBasicPropertiesSpy = spyOn(contentMetadataService, 'getBasicProperties').and.returnValue(of([])); getClassSpy = spyOn(classesApi, 'getClass'); fixture.detectChanges(); }); @@ -267,6 +290,10 @@ describe('ContentMetadataComponent', () => { it('should have expanded input param as false by default', () => { expect(component.expanded).toBeFalse(); }); + + it('should have display predictions param as false by default', () => { + expect(component.displayPredictions).toBeFalse(); + }); }); describe('Folder', () => { @@ -300,8 +327,6 @@ describe('ContentMetadataComponent', () => { it('nodeAspectUpdate', fakeAsync(() => { const fakeNode = { id: 'fake-minimal-node', aspectNames: ['ft:a', 'ft:b', 'ft:c'], name: 'fake-node' } as Node; - getGroupedPropertiesSpy.and.stub(); - spyOn(contentMetadataService, 'getBasicProperties').and.stub(); updateService.updateNodeAspect(fakeNode); tick(600); @@ -335,6 +360,18 @@ describe('ContentMetadataComponent', () => { expect(component.node).toEqual(expectedNode); })); + it('should call onPredictionStatusChanged with updated property keys to clear predictions if displayPredictions=true', () => { + spyOn(updateService, 'onPredictionStatusChanged'); + const expectedNode: Node = { ...node, name: 'some-modified-value' }; + spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); + + component.displayPredictions = true; + component.changedProperties = { properties: { key1: 'value1', key2: 'value2' } }; + + component.saveChanges(); + expect(updateService.onPredictionStatusChanged).toHaveBeenCalledWith([{ key: 'key1' }, { key: 'key2' }]); + }); + it('should call removeTag and assignTagsToNode on TagService on save click', fakeAsync(() => { component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; @@ -685,8 +722,6 @@ describe('ContentMetadataComponent', () => { }); it('should load the basic properties on node change', () => { - spyOn(contentMetadataService, 'getBasicProperties'); - component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); expect(contentMetadataService.getContentTypeProperty).toHaveBeenCalledWith(expectedNode); @@ -697,7 +732,7 @@ describe('ContentMetadataComponent', () => { const expectedProperties = []; component.expanded = false; - spyOn(contentMetadataService, 'getBasicProperties').and.returnValue(of(expectedProperties)); + getBasicPropertiesSpy.and.returnValue(of(expectedProperties)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); @@ -714,7 +749,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - spyOn(contentMetadataService, 'getBasicProperties').and.returnValue(of([])); + getBasicPropertiesSpy.and.returnValue(of([])); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); @@ -726,10 +761,7 @@ describe('ContentMetadataComponent', () => { }); it('should load the group properties on node change', () => { - getGroupedPropertiesSpy.and.stub(); - component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); - expect(contentMetadataService.getGroupedProperties).toHaveBeenCalledWith(expectedNode, 'custom-preset'); }); @@ -750,8 +782,6 @@ describe('ContentMetadataComponent', () => { } ]; component.preset = presetConfig; - getGroupedPropertiesSpy.and.stub(); - component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); expect(contentMetadataService.getGroupedProperties).toHaveBeenCalledWith(expectedNode, presetConfig); @@ -813,7 +843,6 @@ describe('ContentMetadataComponent', () => { it('should revert reload properties for general info panel on cancel', () => { component.readOnly = false; fixture.detectChanges(); - spyOn(contentMetadataService, 'getBasicProperties'); toggleEditModeForGeneralInfo(); findCancelButton().click(); @@ -1002,6 +1031,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); + await fixture.whenStable(); await component.groupedProperties$.toPromise(); fixture.detectChanges(); @@ -1022,6 +1052,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); + await fixture.whenStable(); await component.groupedProperties$.toPromise(); fixture.detectChanges(); @@ -1042,6 +1073,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); + await fixture.whenStable(); await component.groupedProperties$.toPromise(); fixture.detectChanges(); @@ -1063,6 +1095,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); + await fixture.whenStable(); await component.groupedProperties$.toPromise(); fixture.detectChanges(); @@ -1083,6 +1116,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); + await fixture.whenStable(); await component.groupedProperties$.toPromise(); fixture.detectChanges(); @@ -1107,6 +1141,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); + await fixture.whenStable(); await component.groupedProperties$.toPromise(); fixture.detectChanges(); @@ -1141,6 +1176,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); + await fixture.whenStable(); await component.groupedProperties$.toPromise(); fixture.detectChanges(); @@ -1640,4 +1676,136 @@ describe('ContentMetadataComponent', () => { expect(customComponent).toBeDefined(); }); }); + + describe('Predictions', () => { + const getMockPrediction = (reviewStatus: ReviewStatus): Prediction => ({ + confidenceLevel: 0.9, + predictionDateTime: new Date(2024, 1, 1), + modelId: 'test-model-id', + property: 'test:test', + id: 'test-prediction-id', + previousValue: 'previous value', + predictionValue: 'new value', + updateType: 'AUTOCORRECT', + reviewStatus: reviewStatus + }); + + const getMockPredictionPaging = (predictions: Prediction[]): PredictionPaging => ({ + list: { + entries: predictions.map(prediction => ({entry: prediction})) + } + }); + + let getPredictionsSpy: jasmine.Spy; + + beforeEach(() => { + component.node = node; + component.displayPredictions = true; + getPredictionsSpy = spyOn(predictionService, 'getPredictions').and.returnValue(of(getMockPredictionPaging([getMockPrediction(ReviewStatus.UNREVIEWED)]))); + fixture.detectChanges(); + }); + + it('should load predictions when displayPredictions is true', () => { + component.ngOnInit(); + expect(predictionService.getPredictions).toHaveBeenCalledWith(node.id); + }); + + it('should map predictions to basic properties', (done) => { + getBasicPropertiesSpy.and.returnValue( + of([ + { + key: 'properties.test:test', + editable: true, + value: 'new value', + title: 'test' + } + ]) + ); + component.ngOnInit(); + + component.basicProperties$.subscribe(properties => { + expect(properties[0].prediction).toEqual(getMockPrediction(ReviewStatus.UNREVIEWED)); + done(); + }); + }); + + it('should map predictions to grouped properties', (done) => { + getGroupedPropertiesSpy.and.returnValue( + of([ + { + editable: true, + title: 'test', + properties: [{ + key: 'properties.test:test', + editable: true, + value: 'new value', + title: 'test' + }] + } + ]) + ); + component.ngOnInit(); + + component.groupedProperties$.subscribe(properties => { + expect(properties[0].properties[0].prediction).toEqual(getMockPrediction(ReviewStatus.UNREVIEWED)); + done(); + }); + }); + + it('should not map predictions when reviewStatus other then UNREVIEWED', (done) => { + getPredictionsSpy.and.returnValue(of(getMockPredictionPaging([getMockPrediction(ReviewStatus.REJECTED), getMockPrediction(ReviewStatus.CONFIRMED)]))); + getBasicPropertiesSpy.and.returnValue( + of([ + { + key: 'properties.test:test', + editable: true, + value: 'new value', + title: 'test' + } + ]) + ); + component.ngOnInit(); + + component.basicProperties$.subscribe(properties => { + expect(properties[0].prediction).toBeNull(); + done(); + }); + }); + + it('should not map predictions to properties if the property value is different from the prediction value', (done) => { + getBasicPropertiesSpy.and.returnValue( + of([ + { + key: 'properties.test:test', + editable: true, + value: 'different value', + title: 'test' + } + ]) + ); + component.ngOnInit(); + + component.basicProperties$.subscribe(properties => { + expect(properties[0].prediction).toBeNull(); + done(); + }); + }); + + it('should set updated node when prediction status has changed', () => { + const updatedNode = {...node, name: 'new test name'}; + const getNodeSpy = spyOn(nodesApiService, 'getNode').and.returnValue(of(updatedNode)); + component.ngOnInit(); + predictionService.predictionStatusUpdated$.next({key: 'test:test', previousValue: 'previous value'}); + expect(getNodeSpy).toHaveBeenCalledWith(node.id); + expect(component.node).toEqual(updatedNode); + }); + + it('should call onPredictionStatusChanged when prediction status has changed', () => { + const onPredictionStatusChangedSpy = spyOn(updateService, 'onPredictionStatusChanged'); + const notification = {key: 'test:test', previousValue: 'previous value'}; + component.ngOnInit(); + predictionService.predictionStatusUpdated$.next(notification); + expect(onPredictionStatusChangedSpy).toHaveBeenCalledWith([notification]); + }); + }); }); diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts index ec4f84e51e..5645d015fe 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts @@ -16,7 +16,7 @@ */ import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; -import { Category, CategoryEntry, CategoryLinkBody, CategoryPaging, Node, TagBody, TagEntry, TagPaging } from '@alfresco/js-api'; +import { Category, CategoryEntry, CategoryLinkBody, CategoryPaging, Node, TagBody, TagEntry, TagPaging, Prediction, ReviewStatus } from '@alfresco/js-api'; import { forkJoin, Observable, of, Subject, zip } from 'rxjs'; import { AppConfigService, @@ -24,6 +24,7 @@ import { CardViewItem, CardViewModule, NotificationService, + PredictionService, TranslationService, UpdateNotification } from '@alfresco/adf-core'; @@ -89,14 +90,14 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { /** Toggles whether to display empty values in the card view */ @Input() - displayEmpty: boolean = false; + displayEmpty = false; /** * Toggles between expanded (ie, full information) and collapsed * (ie, reduced information) in the display */ @Input() - expanded: boolean = false; + expanded = false; /** The multi parameter of the underlying material expansion panel, set to true to allow multi accordion to be expanded at the same time */ @Input() @@ -108,19 +109,23 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { /** Toggles whether the metadata properties should be shown */ @Input() - displayDefaultProperties: boolean = true; + displayDefaultProperties = true; /** (optional) shows the given aspect in the expanded card */ @Input() displayAspect: string = null; - /** Toggles whether or not to enable copy to clipboard action. */ + /** Toggles whether to enable copy to clipboard action. */ @Input() - copyToClipboardAction: boolean = true; + copyToClipboardAction = true; - /** Toggles whether or not to enable chips for multivalued properties. */ + /** Toggles whether AI predictions should be shown. */ @Input() - useChipsForMultiValueProperty: boolean = true; + displayPredictions = false; + + /** Toggles whether to enable chips for multivalued properties. */ + @Input() + useChipsForMultiValueProperty = true; /** True if tags should be displayed, false otherwise */ @Input() @@ -176,7 +181,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { private tagService: TagService, private categoryService: CategoryService, private contentService: ContentService, - private notificationService: NotificationService + private notificationService: NotificationService, + private predictionService: PredictionService ) { this.copyToClipboardAction = this.appConfig.get('content-metadata.copy-to-clipboard-action'); this.multiValueSeparator = this.appConfig.get('content-metadata.multi-value-pipe-separator') || DEFAULT_SEPARATOR; @@ -197,6 +203,15 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.loadProperties(node); }); + if (this.displayPredictions) { + this.predictionService.predictionStatusUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe(({key, previousValue}) => { + this.cardViewContentUpdateService.onPredictionStatusChanged([{key, previousValue}]); + this.nodesApiService.getNode(this.node.id).subscribe((node) => { + Object.assign(this.node, node); + }); + }); + } + this.loadProperties(this.node); this.verifyAllowableOperations(); @@ -407,6 +422,9 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { ) .subscribe((result: any) => { if (result) { + if (this.displayPredictions) { + this.cardViewContentUpdateService.onPredictionStatusChanged(Object.keys(this.changedProperties['properties']).map(key => ({key}))); + } this.updateUndefinedNodeProperties(result.updatedNode); if (this.hasContentTypeChanged(this.changedProperties)) { this.cardViewContentUpdateService.updateNodeAspect(this.node); @@ -439,13 +457,37 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { private loadProperties(node: Node, loadBasicProps = true, loadGroupedProps = true, loadTags = true, loadCategories = true) { if (node) { + const requests = {}; + if (loadBasicProps) { - this.basicProperties$ = this.getProperties(node); + requests['properties'] = this.getProperties(node); } + if (loadGroupedProps) { - this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(node, this.preset); + requests['groupedProperties'] = this.contentMetadataService.getGroupedProperties(node, this.preset); } + if (this.displayPredictions) { + requests['predictions'] = this.loadPredictionsForNode(this.node.id); + } + + forkJoin(requests).subscribe(({ predictions, properties, groupedProperties }: ({ predictions: Prediction[]; properties: CardViewItem[]; groupedProperties: CardViewGroup[] })) => { + if (loadBasicProps && properties) { + this.basicProperties$ = predictions + ? of(properties.map(property => this.mapPredictionsToProperty(property, predictions))) + : of(properties); + } + + if (loadGroupedProps && groupedProperties) { + this.groupedProperties$ = predictions + ? of(groupedProperties.map(group => { + group.properties = group.properties.map(property => this.mapPredictionsToProperty(property, predictions)); + return group; + })) + : of(groupedProperties); + } + }); + if (this.displayTags && loadTags) { this.loadTagsForNode(node.id); } @@ -462,7 +504,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { } } - private getProperties(node: Node) { + private getProperties(node: Node): Observable { const properties$ = this.contentMetadataService.getBasicProperties(node); const contentTypeProperty$ = this.contentMetadataService.getContentTypeProperty(node); return zip(properties$, contentTypeProperty$).pipe( @@ -540,4 +582,18 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { } return observables; } + + private mapPredictionsToProperty(property: CardViewItem, predictions: Prediction[]): CardViewItem { + const propertyKey = property.key.split('.')[1]; + const filteredPrediction = predictions.find(prediction => prediction.property === propertyKey && prediction.reviewStatus === ReviewStatus.UNREVIEWED && prediction.predictionValue === property.value); + + property.prediction = filteredPrediction || null; + return property; + } + + private loadPredictionsForNode(nodeId: string): Observable { + return this.predictionService.getPredictions(nodeId).pipe( + map(predictionPaging => predictionPaging.list.entries.map(predictionEntry => predictionEntry.entry)) + ); + } } diff --git a/lib/content-services/src/public-api.ts b/lib/content-services/src/public-api.ts index 759af620dc..fdab75491a 100644 --- a/lib/content-services/src/public-api.ts +++ b/lib/content-services/src/public-api.ts @@ -42,7 +42,6 @@ export * from './lib/category/index'; export * from './lib/viewer/index'; export * from './lib/security/index'; export * from './lib/infinite-scroll-datasource'; -export * from './lib/prediction/index'; export * from './lib/content.module'; export * from './lib/testing/content.testing.module'; diff --git a/lib/core/src/lib/assets/images/ai-sparkles.svg b/lib/core/src/lib/assets/images/ai-sparkles.svg new file mode 100644 index 0000000000..ae1050ed47 --- /dev/null +++ b/lib/core/src/lib/assets/images/ai-sparkles.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/core/src/lib/card-view/card-view.module.ts b/lib/core/src/lib/card-view/card-view.module.ts index 2c8700b801..c9a663d667 100644 --- a/lib/core/src/lib/card-view/card-view.module.ts +++ b/lib/core/src/lib/card-view/card-view.module.ts @@ -43,6 +43,7 @@ import { CardViewKeyValuePairsItemComponent } from './components/card-view-keyva import { CardViewSelectItemComponent } from './components/card-view-selectitem/card-view-selectitem.component'; import { CardViewArrayItemComponent } from './components/card-view-arrayitem/card-view-arrayitem.component'; import { SelectFilterInputComponent } from './components/card-view-selectitem/select-filter-input/select-filter-input.component'; +import { ContentEnrichmentMenuComponent } from '../prediction/components/content-enrichment-menu/content-enrichment-menu.component'; @NgModule({ imports: [ @@ -63,7 +64,8 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se MatCardModule, MatDatetimepickerModule, MatNativeDatetimeModule, - MatSlideToggleModule + MatSlideToggleModule, + ContentEnrichmentMenuComponent ], declarations: [ CardViewComponent, diff --git a/lib/core/src/lib/card-view/components/base-card-view.ts b/lib/core/src/lib/card-view/components/base-card-view.ts index 6ac45fcf82..c48108be56 100644 --- a/lib/core/src/lib/card-view/components/base-card-view.ts +++ b/lib/core/src/lib/card-view/components/base-card-view.ts @@ -40,6 +40,18 @@ export abstract class BaseCardView implements OnDestroy this.property.value = itemModel.value; } }); + + this.cardViewUpdateService.predictionStatusChanged$.pipe(takeUntil(this.destroy$)).subscribe((items) => { + items.map(item => { + if (this.property.key.split('.')[1] === item.key) { + this.property.prediction = null; + + if (item.previousValue !== null && item.previousValue !== undefined) { + this.property.value = item.previousValue; + } + } + }); + }); } get isEditable(): boolean { diff --git a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.html b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.html index 016caa651b..115347459d 100644 --- a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.html @@ -1,13 +1,16 @@ -
- -
{{ property.label | translate }}
- +
+ +
+ +
{{ property.label | translate }}
+ +
diff --git a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts index d79c4e38e7..3b1aee3fad 100644 --- a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts @@ -25,10 +25,12 @@ import { BaseCardView } from '../base-card-view'; templateUrl: './card-view-boolitem.component.html', styles: [ ` - .adf-property-value { - padding: 15px 0; - } - ` + .adf-property-value { + padding: 15px 0; + display: flex; + align-content: center; + } + ` ] }) @@ -36,6 +38,9 @@ export class CardViewBoolItemComponent extends BaseCardView {{ property.label | translate }} -
- - {{ property.displayValue }} - -
-
+
+ +
+ {{ property.displayValue }} - - {{ property.displayValue }} +
+
+ - + + {{ property.displayValue }} + - - clear - + + clear + - - -
+ + +
- - - - -
- - {{ property.default | translate }} - - -
- - - {{ propertyValue }} - cancel - - - -
- - +
+ + {{ property.default | translate }} + + +
+ + + {{ propertyValue }} + cancel + + + +
+ + + + + +
+
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts index 6f83a51cbb..d214556bc4 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts @@ -49,6 +49,9 @@ export class CardViewDateItemComponent extends BaseCardView; diff --git a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts index 0217cbc9b8..122bf2801b 100644 --- a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts @@ -32,27 +32,30 @@ export class CardViewItemDispatcherComponent implements OnChanges { editable: boolean; @Input() - displayEmpty: boolean = true; + displayEmpty = true; @Input() - displayNoneOption: boolean = true; + displayNoneOption = true; @Input() - displayClearAction: boolean = true; + displayClearAction = true; @Input() - copyToClipboardAction: boolean = true; + copyToClipboardAction = true; @Input() - useChipsForMultiValueProperty: boolean = true; + useChipsForMultiValueProperty = true; @Input() - multiValueSeparator: string = DEFAULT_SEPARATOR; + multiValueSeparator = DEFAULT_SEPARATOR; @Input() - displayLabelForChips: boolean = false; + displayLabelForChips = false; - private loaded: boolean = false; + @Input() + hasContentEnrichment = false; + + private loaded = false; private componentReference: any = null; public ngOnInit; @@ -104,6 +107,7 @@ export class CardViewItemDispatcherComponent implements OnChanges { this.componentReference.instance.useChipsForMultiValueProperty = this.useChipsForMultiValueProperty; this.componentReference.instance.multiValueSeparator = this.multiValueSeparator; this.componentReference.instance.displayLabelForChips = this.displayLabelForChips; + this.componentReference.instance.hasContentEnrichment = this.hasContentEnrichment; } private proxy(methodName, ...args) { diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html index 8aeacf3806..0e4e88991b 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html @@ -12,9 +12,12 @@ *ngIf="!isEditable" class="adf-property-value adf-property-read-only" [attr.data-automation-id]="'select-readonly-value-' + property.key" - data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }} + data-automation-class="read-only-value"> + + {{ (property.displayValue | async) | translate }}
-
+
+ []>; @Input() - displayNoneOption: boolean = true; + displayNoneOption = true; @Input() - displayEmpty: boolean = true; + displayEmpty = true; + + @Input() + hasContentEnrichment = false; value: string | number; filter$ = new BehaviorSubject(''); @@ -50,6 +53,7 @@ export class CardViewSelectItemComponent extends BaseCardView +