[DSC-1831] Use browse only directive in the proper way

Author: atarix83

src/app/shared/context-menu/context-menu.component.html

@@ -1,17 +1,19 @@
-<div class="d-flex space-children-mr justify-content-end" dsRenderOnlyForBrowser>
-  <ng-container *ngFor="let entry of (getStandAloneMenuEntries() | async)">
-    <ng-container *ngComponentOutlet="entry; injector: objectInjector;"></ng-container>
-  </ng-container>
-  <div ngbDropdown #itemOptions="ngbDropdown" placement="bottom-right"
-       class="float-right ml-1" [ngClass]="optionCount === 0 ? 'd-none' : 'd-inline-block'">
-    <button class="btn btn-outline-primary" id="context-menu" ngbDropdownToggle>
-      <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
-    </button>
-    <div id="itemOptionsDropdownMenu" aria-labelledby="context-menu" ngbDropdownMenu>
-      <h6 class="dropdown-header">{{'context-menu.actions.label' | translate}}</h6>
-      <ng-container *ngFor="let entry of (getContextMenuEntries() | async)">
-        <ng-container *ngComponentOutlet="entry; injector: objectInjector;"></ng-container>
-      </ng-container>
+<div *ngIf="contextMenuObject">
+  <div class="d-flex space-children-mr justify-content-end" *dsRenderOnlyForBrowser="true">
+    <ng-container *ngFor="let entry of (getStandAloneMenuEntries() | async)">
+      <ng-container *ngComponentOutlet="entry; injector: objectInjector;"></ng-container>
+    </ng-container>
+    <div ngbDropdown #itemOptions="ngbDropdown" placement="bottom-right"
+         class="float-right ml-1" [ngClass]="optionCount === 0 ? 'd-none' : 'd-inline-block'">
+      <button class="btn btn-outline-primary" id="context-menu" ngbDropdownToggle>
+        <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
+      </button>
+      <div id="itemOptionsDropdownMenu" aria-labelledby="context-menu" ngbDropdownMenu>
+        <h6 class="dropdown-header">{{ 'context-menu.actions.label' | translate }}</h6>
+        <ng-container *ngFor="let entry of (getContextMenuEntries() | async)">
+          <ng-container *ngComponentOutlet="entry; injector: objectInjector;"></ng-container>
+        </ng-container>
+      </div>
     </div>
   </div>
 </div>

src/app/shared/context-menu/context-menu.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { Component, Injector, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, Injector, NO_ERRORS_SCHEMA, PLATFORM_ID } from '@angular/core';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { By } from '@angular/platform-browser';
 
@@ -27,6 +27,7 @@ import { NotificationsServiceStub } from '../testing/notifications-service.stub'
 import { AuthService } from '../../core/auth/auth.service';
 import { EPersonMock } from '../testing/eperson.mock';
 import { ItemExportFormConfiguration, ItemExportService } from '../search/item-export/item-export.service';
+import { BrowserOnlyDirective } from '../utils/browser-only.directive';
 
 describe('ContextMenuComponent', () => {
   let component: ContextMenuComponent;
@@ -98,7 +99,8 @@ describe('ContextMenuComponent', () => {
             useClass: TranslateLoaderMock
           }
         }),
-        NgbDropdownModule
+        NgbDropdownModule,
+        BrowserOnlyDirective
       ],
       declarations: [ContextMenuComponent, TestComponent, ExportItemMenuComponent, StatisticsMenuComponent, SubscriptionMenuComponent],
       providers: [
@@ -110,6 +112,7 @@ describe('ContextMenuComponent', () => {
         { provide: AuthService, useValue: authService },
         { provide: AuthorizationDataService, useValue: authorizationDataService },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
+        { provide: PLATFORM_ID, useValue: 'browser' },
         Injector
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/shared/context-menu/context-menu.module.ts

@@ -22,6 +22,7 @@ import { ItemVersionMenuComponent } from './item-version/item-version-menu.compo
 import { FullItemMenuComponent } from './full-item/full-item-menu.component';
 import { OrcidViewPageMenuComponent } from './orcid-view-page/orcid-view-page-menu.component';
 import { SharedModule } from '../shared.module';
+import { BrowserOnlyDirective } from '../utils/browser-only.directive';
 
 const COMPONENTS = [
   BulkImportMenuComponent,
@@ -64,7 +65,8 @@ const MODULE = [
   RouterModule,
   TranslateModule,
   SubscriptionsModule,
-  SharedModule
+  SharedModule,
+  BrowserOnlyDirective
 ];
 @NgModule({
   imports: [