From fa36b3518d39095b61bf08d8e3e3421f64e38661 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 8 Dec 2020 13:07:18 +0100
Subject: [PATCH] 75058: multiple badges fix, item alerts, tests

---
 ...-search-result-grid-element.component.html |  2 +-
 ...arch-result-grid-element.component.spec.ts | 49 -----------
 ...-search-result-list-element.component.html |  9 +-
 ...arch-result-list-element.component.spec.ts | 49 -----------
 .../simple/item-page.component.html           |  1 +
 .../item-alerts/item-alerts.component.html    |  8 ++
 .../item-alerts/item-alerts.component.scss    |  0
 .../item-alerts/item-alerts.component.spec.ts | 87 +++++++++++++++++++
 .../item/item-alerts/item-alerts.component.ts | 24 +++++
 ...ble-object-component-loader.component.html | 10 +--
 ...-object-component-loader.component.spec.ts | 64 +++++++++++++-
 ...table-object-component-loader.component.ts | 32 +++++--
 ...-search-result-grid-element.component.html |  4 +-
 src/app/shared/shared.module.ts               |  4 +-
 src/assets/i18n/en.json5                      | 16 +++-
 15 files changed, 236 insertions(+), 123 deletions(-)
 create mode 100644 src/app/shared/item/item-alerts/item-alerts.component.html
 create mode 100644 src/app/shared/item/item-alerts/item-alerts.component.scss
 create mode 100644 src/app/shared/item/item-alerts/item-alerts.component.spec.ts
 create mode 100644 src/app/shared/item/item-alerts/item-alerts.component.ts

diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html
index b07ad0f0de..c4b737849b 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <ng-template dsListableObject>
 </ng-template>
-<div #badges class="position-absolute ml-1">
+<div #badges>
   <ng-content></ng-content>
 </div>
 <ul #buttons class="list-group list-group-flush">
diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
index 69148fb420..7a69d090f5 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
@@ -13,7 +12,6 @@ import { SharedModule } from '../../../../../shared/shared.module';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import { ItemAdminSearchResultGridElementComponent } from './item-admin-search-result-grid-element.component';
@@ -71,51 +69,4 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('when the item is not withdrawn', () => {
-    beforeEach(() => {
-      component.dso.isWithdrawn = false;
-      fixture.detectChanges();
-    });
-
-    it('should not show the withdrawn badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.withdrawn-badge'));
-      expect(badge).toBeNull();
-    });
-  });
-
-  describe('when the item is withdrawn', () => {
-    beforeEach(() => {
-      component.dso.isWithdrawn = true;
-      fixture.detectChanges();
-    });
-
-    it('should show the withdrawn badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.withdrawn-badge'));
-      expect(badge).not.toBeNull();
-    });
-  });
-
-  describe('when the item is not private', () => {
-    beforeEach(() => {
-      component.dso.isDiscoverable = true;
-      fixture.detectChanges();
-    });
-    it('should not show the private badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.private-badge'));
-      expect(badge).toBeNull();
-    });
-  });
-
-  describe('when the item is private', () => {
-    beforeEach(() => {
-      component.dso.isDiscoverable = false;
-      fixture.detectChanges();
-    });
-
-    it('should show the private badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.private-badge'));
-      expect(badge).not.toBeNull();
-    });
-  })
 });
diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.html b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.html
index a74e339e63..259512552c 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.html
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.html
@@ -1,12 +1,7 @@
-<div *ngIf="dso && !dso.isDiscoverable" class="private-badge">
-    <span class="badge badge-danger">{{ "admin.search.item.private" | translate }}</span>
-</div>
-<div *ngIf="dso && dso.isWithdrawn" class="withdrawn-badge">
-    <span class="badge badge-warning">{{ "admin.search.item.withdrawn" | translate }}</span>
-</div>
 <ds-listable-object-component-loader [object]="object"
                                      [viewMode]="viewModes.ListElement"
                                      [index]="index"
                                      [linkType]="linkType"
-                                     [listID]="listID"></ds-listable-object-component-loader>
+                                     [listID]="listID"
+                                     [hideBadges]="true"></ds-listable-object-component-loader>
 <ds-item-admin-search-result-actions-element [item]="dso" [small]="false"></ds-item-admin-search-result-actions-element>
diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
index 8395bd4f11..f1decc9ed8 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
@@ -1,11 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import { ItemAdminSearchResultListElementComponent } from './item-admin-search-result-list-element.component';
@@ -51,51 +49,4 @@ describe('ItemAdminSearchResultListElementComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('when the item is not withdrawn', () => {
-    beforeEach(() => {
-      component.dso.isWithdrawn = false;
-      fixture.detectChanges();
-    });
-
-    it('should not show the withdrawn badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.withdrawn-badge'));
-      expect(badge).toBeNull();
-    });
-  });
-
-  describe('when the item is withdrawn', () => {
-    beforeEach(() => {
-      component.dso.isWithdrawn = true;
-      fixture.detectChanges();
-    });
-
-    it('should show the withdrawn badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.withdrawn-badge'));
-      expect(badge).not.toBeNull();
-    });
-  });
-
-  describe('when the item is not private', () => {
-    beforeEach(() => {
-      component.dso.isDiscoverable = true;
-      fixture.detectChanges();
-    });
-    it('should not show the private badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.private-badge'));
-      expect(badge).toBeNull();
-    });
-  });
-
-  describe('when the item is private', () => {
-    beforeEach(() => {
-      component.dso.isDiscoverable = false;
-      fixture.detectChanges();
-    });
-
-    it('should show the private badge', () => {
-      const badge = fixture.debugElement.query(By.css('div.private-badge'));
-      expect(badge).not.toBeNull();
-    });
-  })
 });
diff --git a/src/app/+item-page/simple/item-page.component.html b/src/app/+item-page/simple/item-page.component.html
index 0e8abf0a02..e843155d10 100644
--- a/src/app/+item-page/simple/item-page.component.html
+++ b/src/app/+item-page/simple/item-page.component.html
@@ -1,6 +1,7 @@
 <div class="container" *ngVar="(itemRD$ | async) as itemRD">
   <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
     <div *ngIf="itemRD?.payload as item">
+      <ds-item-alerts [item]="item"></ds-item-alerts>
       <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
       <ds-view-tracker [object]="item"></ds-view-tracker>
       <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode"></ds-listable-object-component-loader>
diff --git a/src/app/shared/item/item-alerts/item-alerts.component.html b/src/app/shared/item/item-alerts/item-alerts.component.html
new file mode 100644
index 0000000000..fce5c038e5
--- /dev/null
+++ b/src/app/shared/item/item-alerts/item-alerts.component.html
@@ -0,0 +1,8 @@
+<div>
+  <div *ngIf="item && !item.isDiscoverable" class="private-warning">
+    <ds-alert [type]="AlertTypeEnum.Warning" [content]="'item.alerts.private' | translate"></ds-alert>
+  </div>
+  <div *ngIf="item && item.isWithdrawn" class="withdrawn-warning">
+    <ds-alert [type]="AlertTypeEnum.Warning" [content]="'item.alerts.withdrawn' | translate"></ds-alert>
+  </div>
+</div>
diff --git a/src/app/shared/item/item-alerts/item-alerts.component.scss b/src/app/shared/item/item-alerts/item-alerts.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/item/item-alerts/item-alerts.component.spec.ts b/src/app/shared/item/item-alerts/item-alerts.component.spec.ts
new file mode 100644
index 0000000000..983283b036
--- /dev/null
+++ b/src/app/shared/item/item-alerts/item-alerts.component.spec.ts
@@ -0,0 +1,87 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ItemAlertsComponent } from './item-alerts.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Item } from '../../../core/shared/item.model';
+import { By } from '@angular/platform-browser';
+
+describe('ItemAlertsComponent', () => {
+  let component: ItemAlertsComponent;
+  let fixture: ComponentFixture<ItemAlertsComponent>;
+  let item: Item;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ItemAlertsComponent],
+      imports: [TranslateModule.forRoot()],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemAlertsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('when the item is discoverable', () => {
+    beforeEach(() => {
+      item = Object.assign(new Item(), {
+        isDiscoverable: true
+      });
+      component.item = item;
+      fixture.detectChanges();
+    });
+
+    it('should not display the private alert', () => {
+      const privateWarning = fixture.debugElement.query(By.css('.private-warning'));
+      expect(privateWarning).toBeNull();
+    });
+  });
+
+  describe('when the item is not discoverable', () => {
+    beforeEach(() => {
+      item = Object.assign(new Item(), {
+        isDiscoverable: false
+      });
+      component.item = item;
+      fixture.detectChanges();
+    });
+
+    it('should display the private alert', () => {
+      const privateWarning = fixture.debugElement.query(By.css('.private-warning'));
+      expect(privateWarning).not.toBeNull();
+    });
+  });
+
+  describe('when the item is withdrawn', () => {
+    beforeEach(() => {
+      item = Object.assign(new Item(), {
+        isWithdrawn: true
+      });
+      component.item = item;
+      fixture.detectChanges();
+    });
+
+    it('should display the withdrawn alert', () => {
+      const privateWarning = fixture.debugElement.query(By.css('.withdrawn-warning'));
+      expect(privateWarning).not.toBeNull();
+    });
+  });
+
+  describe('when the item is not withdrawn', () => {
+    beforeEach(() => {
+      item = Object.assign(new Item(), {
+        isWithdrawn: false
+      });
+      component.item = item;
+      fixture.detectChanges();
+    });
+
+    it('should not display the withdrawn alert', () => {
+      const privateWarning = fixture.debugElement.query(By.css('.withdrawn-warning'));
+      expect(privateWarning).toBeNull();
+    });
+  });
+});
diff --git a/src/app/shared/item/item-alerts/item-alerts.component.ts b/src/app/shared/item/item-alerts/item-alerts.component.ts
new file mode 100644
index 0000000000..4c2d60d24c
--- /dev/null
+++ b/src/app/shared/item/item-alerts/item-alerts.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { Item } from '../../../core/shared/item.model';
+import { AlertType } from '../../alert/aletr-type';
+
+@Component({
+  selector: 'ds-item-alerts',
+  templateUrl: './item-alerts.component.html',
+  styleUrls: ['./item-alerts.component.scss']
+})
+/**
+ * Component displaying alerts for an item
+ */
+export class ItemAlertsComponent {
+  /**
+   * The Item to display alerts for
+   */
+  @Input() item: Item;
+
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+}
diff --git a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.html b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.html
index 1f7cf72cd1..9ed4e9eaa8 100644
--- a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.html
+++ b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.html
@@ -1,9 +1,9 @@
-<div #badges>
-  <div *ngIf="objectAsAny && !objectAsAny.isDiscoverable" class="private-badge">
-    <span class="badge badge-danger">{{ "admin.search.item.private" | translate }}</span>
+<div [ngClass]="{'d-none' : hideBadges}" #badges>
+  <div *ngIf="privateBadge" class="private-badge">
+    <span class="badge badge-danger">{{ "item.badge.private" | translate }}</span>
   </div>
-  <div *ngIf="objectAsAny && objectAsAny.isWithdrawn" class="withdrawn-badge">
-    <span class="badge badge-warning">{{ "admin.search.item.withdrawn" | translate }}</span>
+  <div *ngIf="withdrawnBadge" class="withdrawn-badge">
+    <span class="badge badge-warning">{{ "item.badge.withdrawn" | translate }}</span>
   </div>
 </div>
 <ng-template dsListableObject></ng-template>
diff --git a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts
index e2d9b17f1c..64062f6133 100644
--- a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts
+++ b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts
@@ -9,6 +9,9 @@ import * as listableObjectDecorators from './listable-object.decorator';
 import { PublicationListElementComponent } from '../../../object-list/item-list-element/item-types/publication/publication-list-element.component';
 import { ListableObjectDirective } from './listable-object.directive';
 import { spyOnExported } from '../../../testing/utils.test';
+import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
+import { Item } from '../../../../core/shared/item.model';
 
 const testType = 'TestType';
 const testContext = Context.Search;
@@ -26,7 +29,7 @@ describe('ListableObjectComponentLoaderComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [],
+      imports: [TranslateModule.forRoot()],
       declarations: [ListableObjectComponentLoaderComponent, PublicationListElementComponent, ListableObjectDirective],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [ComponentFactoryResolver]
@@ -55,4 +58,63 @@ describe('ListableObjectComponentLoaderComponent', () => {
       expect(listableObjectDecorators.getListableObjectComponent).toHaveBeenCalledWith([testType], testViewMode, testContext);
     })
   });
+
+  describe('when the object is an item and viewMode is a list', () => {
+    beforeEach(() => {
+      comp.object = Object.assign(new Item());
+      comp.viewMode = ViewMode.ListElement;
+    });
+
+    describe('when the item is not withdrawn', () => {
+      beforeEach(() => {
+        (comp.object as any).isWithdrawn = false;
+        comp.initBadges();
+        fixture.detectChanges();
+      });
+
+      it('should not show the withdrawn badge', () => {
+        const badge = fixture.debugElement.query(By.css('div.withdrawn-badge'));
+        expect(badge).toBeNull();
+      });
+    });
+
+    describe('when the item is withdrawn', () => {
+      beforeEach(() => {
+        (comp.object as any).isWithdrawn = true;
+        comp.initBadges();
+        fixture.detectChanges();
+      });
+
+      it('should show the withdrawn badge', () => {
+        const badge = fixture.debugElement.query(By.css('div.withdrawn-badge'));
+        expect(badge).not.toBeNull();
+      });
+    });
+
+    describe('when the item is not private', () => {
+      beforeEach(() => {
+        (comp.object as any).isDiscoverable = true;
+        comp.initBadges();
+        fixture.detectChanges();
+      });
+      it('should not show the private badge', () => {
+        const badge = fixture.debugElement.query(By.css('div.private-badge'));
+        expect(badge).toBeNull();
+      });
+    });
+
+    describe('when the item is private', () => {
+      beforeEach(() => {
+        (comp.object as any).isDiscoverable = false;
+        comp.initBadges();
+        fixture.detectChanges();
+      });
+
+      it('should show the private badge', () => {
+        const badge = fixture.debugElement.query(By.css('div.private-badge'));
+        expect(badge).not.toBeNull();
+      });
+    });
+  });
+
 });
diff --git a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
index dc0eabdd37..b046dc6ec7 100644
--- a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
+++ b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
@@ -6,6 +6,7 @@ import { getListableObjectComponent } from './listable-object.decorator';
 import { GenericConstructor } from '../../../../core/shared/generic-constructor';
 import { ListableObjectDirective } from './listable-object.directive';
 import { CollectionElementLinkType } from '../../collection-element-link.type';
+import { hasValue } from '../../../empty.util';
 
 @Component({
   selector: 'ds-listable-object-component-loader',
@@ -56,6 +57,11 @@ export class ListableObjectComponentLoaderComponent implements OnInit {
    */
   @Input() value: string;
 
+  /**
+   * Whether or not informational badges (e.g. Private, Withdrawn) should be hidden
+   */
+  @Input() hideBadges = false;
+
   /**
    * Directive hook used to place the dynamic child component
    */
@@ -68,11 +74,14 @@ export class ListableObjectComponentLoaderComponent implements OnInit {
   @ViewChild('badges', { static: true }) badges: ElementRef;
 
   /**
-   * The provided object as any
-   * This is required to access the object's "isDiscoverable" and "isWithdrawn" properties from the template without
-   * knowing the object's type
+   * Whether or not the "Private" badge should be displayed for this listable object
    */
-  objectAsAny: any;
+  privateBadge = false;
+
+  /**
+   * Whether or not the "Withdrawn" badge should be displayed for this listable object
+   */
+  withdrawnBadge = false;
 
   constructor(private componentFactoryResolver: ComponentFactoryResolver) {
   }
@@ -81,7 +90,7 @@ export class ListableObjectComponentLoaderComponent implements OnInit {
    * Setup the dynamic child component
    */
   ngOnInit(): void {
-    this.objectAsAny = this.object as any;
+    this.initBadges();
 
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent());
 
@@ -105,6 +114,19 @@ export class ListableObjectComponentLoaderComponent implements OnInit {
     (componentRef.instance as any).value = this.value;
   }
 
+  /**
+   * Initialize which badges should be visible in the listable component
+   */
+  initBadges() {
+    let objectAsAny = this.object as any;
+    if (hasValue(objectAsAny.indexableObject)) {
+      objectAsAny = objectAsAny.indexableObject;
+    }
+    const objectExistsAndValidViewMode = hasValue(objectAsAny) && this.viewMode !== ViewMode.StandalonePage;
+    this.privateBadge = objectExistsAndValidViewMode && hasValue(objectAsAny.isDiscoverable) && !objectAsAny.isDiscoverable;
+    this.withdrawnBadge = objectExistsAndValidViewMode && hasValue(objectAsAny.isWithdrawn) && objectAsAny.isWithdrawn;
+  }
+
   /**
    * Fetch the component depending on the item's relationship type, view mode and context
    * @returns {GenericConstructor<Component>}
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html
index 125553054e..db607beef9 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html
@@ -1,6 +1,8 @@
   <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
     <ds-truncatable [id]="dso.id">
-      <ng-content></ng-content>
+      <div class="position-absolute ml-1">
+        <ng-content></ng-content>
+      </div>
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
          class="card-img-top full-width">
           <div>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index a81d051132..fd12ce0874 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -218,6 +218,7 @@ import { AuthorizedCollectionSelectorComponent } from './dso-selector/dso-select
 import { DsoPageEditButtonComponent } from './dso-page/dso-page-edit-button/dso-page-edit-button.component';
 import { HoverClassDirective } from './hover-class.directive';
 import { ValidationSuggestionsComponent } from './input-suggestions/validation-suggestions/validation-suggestions.component';
+import { ItemAlertsComponent } from './item/item-alerts/item-alerts.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -504,7 +505,8 @@ const ENTRY_COMPONENTS = [
 const SHARED_ITEM_PAGE_COMPONENTS = [
   MetadataFieldWrapperComponent,
   MetadataValuesComponent,
-  DsoPageEditButtonComponent
+  DsoPageEditButtonComponent,
+  ItemAlertsComponent,
 ];
 
 const PROVIDERS = [
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 908ed25c47..e56ad5866d 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -462,14 +462,10 @@
 
   "admin.search.item.move": "Move",
 
-  "admin.search.item.private": "Private",
-
   "admin.search.item.reinstate": "Reinstate",
 
   "admin.search.item.withdraw": "Withdraw",
 
-  "admin.search.item.withdrawn": "Withdrawn",
-
   "admin.search.title": "Administrative Search",
 
 
@@ -1329,12 +1325,24 @@
 
 
 
+  "item.alerts.private": "This item is private",
+
+  "item.alerts.withdrawn": "This item has been withdrawn",
+
+
+
   "item.edit.authorizations.heading": "With this editor you can view and alter the policies of an item, plus alter policies of individual item components: bundles and bitstreams. Briefly, an item is a container of bundles, and bundles are containers of bitstreams. Containers usually have ADD/REMOVE/READ/WRITE policies, while bitstreams only have READ/WRITE policies.",
 
   "item.edit.authorizations.title": "Edit item's Policies",
 
 
 
+  "item.badge.private": "Private",
+
+  "item.badge.withdrawn": "Private",
+
+
+
   "item.bitstreams.upload.bundle": "Bundle",
 
   "item.bitstreams.upload.bundle.placeholder": "Select a bundle",