New menu entries for creating sub-objects on community and collection pages

cypress/e2e/collection-page.cy.ts

@@ -1,9 +1,11 @@
 import { testA11y } from 'cypress/support/utils';
 
+const COLLECTION_PAGE = '/collections/'.concat(Cypress.expose('DSPACE_TEST_COLLECTION'));
+
 describe('Collection Page', () => {
 
   it('should pass accessibility tests', () => {
-    cy.visit('/collections/'.concat(Cypress.expose('DSPACE_TEST_COLLECTION')));
+    cy.visit(COLLECTION_PAGE);
 
     // <ds-collection-page> tag must be loaded
     cy.get('ds-collection-page').should('be.visible');
@@ -12,3 +14,46 @@ describe('Collection Page', () => {
     testA11y('ds-collection-page');
   });
 });
+
+describe('Collection Page -> Collection-edit menu', () => {
+  beforeEach(() => {
+    cy.visit(COLLECTION_PAGE);
+    // Open login menu in header & verify <ds-log-in> tag is visible
+    cy.get('[data-test="login-menu"]').click();
+    cy.get('.form-login').should('be.visible');
+
+    // Login, and the <ds-log-in> tag should no longer exist
+    cy.env(['DSPACE_TEST_ADMIN_USER', 'DSPACE_TEST_ADMIN_PASSWORD']).then(({ DSPACE_TEST_ADMIN_USER, DSPACE_TEST_ADMIN_PASSWORD }) => {
+      cy.loginViaForm(DSPACE_TEST_ADMIN_USER, DSPACE_TEST_ADMIN_PASSWORD);
+    });
+    cy.get('ds-log-in').should('not.exist');
+  });
+
+  it('Edit menu should exist for admins.', () => {
+    // <dso-edit-menu> tag must be loaded
+    cy.get('ds-dso-edit-menu').should('be.visible');
+  });
+});
+
+describe('Collection Page -> Submit-item button', () => {
+  beforeEach(() => {
+    cy.visit(COLLECTION_PAGE);
+    // Open login menu in header & verify <ds-log-in> tag is visible
+    cy.get('[data-test="login-menu"]').click();
+    cy.get('.form-login').should('be.visible');
+
+    // Login, and the <ds-log-in> tag should no longer exist
+    cy.env(['DSPACE_TEST_SUBMIT_USER', 'DSPACE_TEST_SUBMIT_USER_PASSWORD']).then(({ DSPACE_TEST_SUBMIT_USER, DSPACE_TEST_SUBMIT_USER_PASSWORD }) => {
+      cy.loginViaForm(DSPACE_TEST_SUBMIT_USER, DSPACE_TEST_SUBMIT_USER_PASSWORD);
+    });
+    cy.get('ds-log-in').should('not.exist');
+  });
+
+  it('Submit item button should exist for submitters on collection pages.', () => {
+    // Open the Options menu and verify the Submit item entry is available
+    //cy.get('ds-dso-edit-menu a[aria-label="Options"]').click();
+    cy.get(`ds-dso-edit-menu a[href="/submit?collection=${Cypress.expose('DSPACE_TEST_COLLECTION')}"]`)
+      .should('be.visible')
+      .and('contain', 'Submit item');
+  });
+});

cypress/e2e/community-page.cy.ts

@@ -1,9 +1,12 @@
 import { testA11y } from 'cypress/support/utils';
 
+const COMMUNITY_PAGE = '/communities/'.concat(Cypress.expose('DSPACE_TEST_COMMUNITY'));
+
+
 describe('Community Page', () => {
 
   it('should pass accessibility tests', () => {
-    cy.visit('/communities/'.concat(Cypress.expose('DSPACE_TEST_COMMUNITY')));
+    cy.visit(COMMUNITY_PAGE);
 
     // <ds-community-page> tag must be loaded
     cy.get('ds-community-page').should('be.visible');
@@ -12,3 +15,35 @@ describe('Community Page', () => {
     testA11y('ds-community-page');
   });
 });
+
+
+describe('Community Page -> Community-edit menu', () => {
+  beforeEach(() => {
+    cy.visit(COMMUNITY_PAGE);
+    // Open login menu in header & verify <ds-log-in> tag is visible
+    cy.get('[data-test="login-menu"]').click();
+    cy.get('.form-login').should('be.visible');
+
+    // Login, and the <ds-log-in> tag should no longer exist
+    cy.env(['DSPACE_TEST_ADMIN_USER', 'DSPACE_TEST_ADMIN_PASSWORD']).then(({ DSPACE_TEST_ADMIN_USER, DSPACE_TEST_ADMIN_PASSWORD }) => {
+      cy.loginViaForm(DSPACE_TEST_ADMIN_USER, DSPACE_TEST_ADMIN_PASSWORD);
+    });
+    cy.get('ds-log-in').should('not.exist');
+  });
+
+  it('Edit menu should exist for admins.', () => {
+    // <dso-edit-menu> tag must be loaded
+    cy.get('ds-dso-edit-menu').should('be.visible');
+  });
+
+  it('Options menu should include Add-Community and Add Collections Buttons.', () => {
+    // Open the Options menu and verify the Add Community and Add Collection entries are available
+    cy.get('ds-dso-edit-menu button[aria-label="Options"]').click();
+    cy.get('[data-test="link-menu-item.community.add.sub-community"]')
+      .should('be.visible')
+      .and('contain', 'Add Community');
+    cy.get('[data-test="link-menu-item.community.add.sub-collection"]')
+      .should('be.visible')
+      .and('contain', 'Add Collection');
+  });
+});

src/app/app.menus.ts

@@ -9,6 +9,7 @@ import { buildMenuStructure } from './shared/menu/menu.structure';
 import { MenuID } from './shared/menu/menu-id.model';
 import { MenuRoute } from './shared/menu/menu-route.model';
 import { AccessControlMenuProvider } from './shared/menu/providers/access-control.menu';
+import { AddSubComColMenuProvider } from './shared/menu/providers/add-sub-com-col.menu';
 import { AdminSearchMenuProvider } from './shared/menu/providers/admin-search.menu';
 import { AuditLogsMenuProvider } from './shared/menu/providers/audit-item.menu';
 import { AuditOverviewMenuProvider } from './shared/menu/providers/audit-overview.menu';
@@ -36,6 +37,7 @@ import { NotificationsMenuProvider } from './shared/menu/providers/notifications
 import { ProcessesMenuProvider } from './shared/menu/providers/processes.menu';
 import { RegistriesMenuProvider } from './shared/menu/providers/registries.menu';
 import { StatisticsMenuProvider } from './shared/menu/providers/statistics.menu';
+import { SubmitNewItemMenuProvider } from './shared/menu/providers/submit-new-item.menu';
 import { SystemWideAlertMenuProvider } from './shared/menu/providers/system-wide-alert.menu';
 import { WithdrawnReinstateItemMenuProvider } from './shared/menu/providers/withdrawn-reinstate-item.menu';
 import { WorkflowMenuProvider } from './shared/menu/providers/workflow.menu';
@@ -83,6 +85,9 @@ export const MENUS = buildMenuStructure({
     EditUserAgreementMenuProvider,
   ],
   [MenuID.DSO_EDIT]: [
+    SubmitNewItemMenuProvider.onRoute(
+      MenuRoute.COLLECTION_PAGE,
+    ),
     DsoOptionMenuProvider.withSubs([
       EditItemMenuProvider.onRoute(
         MenuRoute.ITEM_PAGE,
@@ -96,6 +101,9 @@ export const MENUS = buildMenuStructure({
         MenuRoute.COLLECTION_PAGE,
         MenuRoute.ITEM_PAGE,
       ),
+      AddSubComColMenuProvider.onRoute(
+        MenuRoute.COMMUNITY_PAGE,
+      ),
       WithdrawnReinstateItemMenuProvider.onRoute(
         MenuRoute.ITEM_PAGE,
       ),

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html

@@ -3,15 +3,15 @@
     [ngbTooltip]="itemModel.text | translate">
     @if (!section.model.disabled) {
       <a class="btn btn-dark btn-sm"
-        [routerLink]="itemModel.link">
+        [routerLink]="itemModel.link" [queryParams]="itemModel.queryParams">
         <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
-        <span class="sr-only">{{itemModel.text | translate}}</span>
+        <span [class.sr-only]="(isMobile$ | async) || section.renderIconOnly" >{{itemModel.text | translate}}</span>
       </a>
     }
     @if (section.model.disabled) {
       <button class="btn btn-dark btn-sm" [dsBtnDisabled]="true">
         <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
-        <span class="sr-only">{{itemModel.text | translate}}</span>
+        <span [class.sr-only]="(isMobile$ | async) || section.renderIconOnly">{{itemModel.text | translate}}</span>
       </button>
     }
   </div>
@@ -23,7 +23,7 @@
     <button class="btn btn-dark btn-sm" [dsBtnDisabled]="section.model.disabled"
       (click)="activate($event)">
       <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
-      <span class="sr-only">{{itemModel.text | translate}}</span>
+      <span [class.sr-only]="(isMobile$ | async) || section.renderIconOnly">{{itemModel.text | translate}}</span>
     </button>
   </div>
 }

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.scss

@@ -1,3 +1,6 @@
 .btn-dark {
     background-color: var(--ds-admin-sidebar-bg);
 }
+.dso-button-menu {
+  width: max-content;
+}

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.spec.ts

@@ -9,13 +9,16 @@ import {
   ActivatedRoute,
   Router,
 } from '@angular/router';
+import { WidthCategory } from '@dspace/core/shared/host-window-type';
 import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
 import { CSSVariableServiceStub } from '@dspace/core/testing/css-variable-service.stub';
+import { HostWindowServiceStub } from '@dspace/core/testing/host-window-service.stub';
 import { RouterStub } from '@dspace/core/testing/router.stub';
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { MenuItemType } from 'src/app/shared/menu/menu-item-type.model';
 
+import { HostWindowService } from '../../../host-window.service';
 import { MenuService } from '../../../menu/menu.service';
 import { OnClickMenuItemModel } from '../../../menu/menu-item/models/onclick.model';
 import { MenuServiceStub } from '../../../menu/menu-service.stub';
@@ -38,6 +41,7 @@ function initAsync(menuService: MenuServiceStub) {
         { provide: Router, useValue: new RouterStub() },
         { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
         { provide: ThemeService, useValue: getMockThemeService() },
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(WidthCategory.MD) },
       ],
     }).compileComponents();
   }));

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts

@@ -1,15 +1,20 @@
+
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Injector,
   OnInit,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { WidthCategory } from '@dspace/core/shared/host-window-type';
 import { isNotEmpty } from '@dspace/shared/utils/empty.util';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
 import { AbstractMenuSectionComponent } from 'src/app/shared/menu/menu-section/abstract-menu-section.component';
 
 import { BtnDisabledDirective } from '../../../btn-disabled.directive';
+import { HostWindowService } from '../../../host-window.service';
 import { MenuService } from '../../../menu/menu.service';
 import { MenuID } from '../../../menu/menu-id.model';
 import { rendersSectionForMenu } from '../../../menu/menu-section.decorator';
@@ -23,6 +28,7 @@ import { ThemeService } from '../../../theme-support/theme.service';
   templateUrl: './dso-edit-menu-section.component.html',
   styleUrls: ['./dso-edit-menu-section.component.scss'],
   imports: [
+    AsyncPipe,
     BtnDisabledDirective,
     NgbTooltip,
     RouterLink,
@@ -35,17 +41,22 @@ export class DsoEditMenuSectionComponent extends AbstractMenuSectionComponent im
   menuID: MenuID = MenuID.DSO_EDIT;
   hasLink: boolean;
   canActivate: boolean;
+  public isMobile$: Observable<boolean>;
+
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
     protected menuService: MenuService,
     protected injector: Injector,
     protected themeService: ThemeService,
+    protected windowService: HostWindowService,
   ) {
     super(
       menuService,
       injector,
       themeService,
     );
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
   }
 
   ngOnInit(): void {

src/app/shared/menu/menu-provider.model.ts

@@ -31,6 +31,7 @@ export interface PartialMenuSection {
   shouldPersistOnRouteChange?: boolean;
   icon?: string;
   alwaysRenderExpandable?: boolean;
+  renderIconOnly?: boolean;
 }
 
 /**

src/app/shared/menu/menu-provider.service.spec.ts

@@ -32,6 +32,7 @@ describe('MenuProviderService', () => {
       public alwaysRenderExpandable: boolean,
       public sections: PartialMenuSection[],
       public renderBrowserOnly: boolean = false,
+      public renderIconOnly: boolean = false,
     ) {
       super();
     }
@@ -104,6 +105,7 @@ describe('MenuProviderService', () => {
       active: false,
       shouldPersistOnRouteChange: sectionToAdd.shouldPersistOnRouteChange ?? provider.shouldPersistOnRouteChange,
       alwaysRenderExpandable: sectionToAdd.alwaysRenderExpandable ?? provider.alwaysRenderExpandable,
+      renderIconOnly: sectionToAdd.renderIconOnly ?? false,
     };
   }
 

src/app/shared/menu/menu-provider.service.ts

@@ -210,6 +210,7 @@ export class MenuProviderService {
       active: section.active ?? false,
       shouldPersistOnRouteChange: section.shouldPersistOnRouteChange ?? provider.shouldPersistOnRouteChange,
       alwaysRenderExpandable: section.alwaysRenderExpandable ?? provider.alwaysRenderExpandable,
+      renderIconOnly: section.renderIconOnly ?? false,
     });
   }
 

src/app/shared/menu/menu-section.model.ts

@@ -69,4 +69,9 @@ export interface MenuSection {
    * This section will not be rendered when it has no visible children
    */
   alwaysRenderExpandable?: boolean;
+
+  /**
+   * Whether only to render the icon of the menu section not the text.
+   */
+  renderIconOnly?: boolean;
 }

src/app/shared/menu/providers/add-sub-com-col.menu.spec.ts

@@ -0,0 +1,79 @@
+import { TestBed } from '@angular/core/testing';
+import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
+import { Community } from '@dspace/core/shared/community.model';
+import { COMMUNITY } from '@dspace/core/shared/community.resource-type';
+import { of } from 'rxjs';
+
+import { MenuItemType } from '../menu-item-type.model';
+import { PartialMenuSection } from '../menu-provider.model';
+import { AddSubComColMenuProvider } from './add-sub-com-col.menu';
+
+describe('AddSubComColMenuProvider', () => {
+
+  const expectedSections: PartialMenuSection[] = [
+    {
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'community.add.sub-community',
+        link: '/communities/create',
+        queryParams: {
+          parent: 'test-uuid',
+        },
+      },
+      icon: 'plus',
+    },
+    {
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'community.add.sub-collection',
+        link: '/collections/create',
+        queryParams: {
+          parent: 'test-uuid',
+        },
+      },
+      icon: 'plus',
+    },
+  ];
+
+  let provider: AddSubComColMenuProvider;
+
+  const dso: Community = Object.assign(new Community(), {
+    type: COMMUNITY.value,
+    uuid: 'test-uuid',
+    _links: { self: { href: 'self-link' } },
+  });
+
+
+  let authorizationService;
+
+  beforeEach(() => {
+
+    authorizationService = jasmine.createSpyObj('authorizationService', {
+      'isAuthorized': of(true),
+    });
+
+    TestBed.configureTestingModule({
+      providers: [
+        AddSubComColMenuProvider,
+        { provide: AuthorizationDataService, useValue: authorizationService },
+      ],
+    });
+    provider = TestBed.inject(AddSubComColMenuProvider);
+  });
+
+  it('should be created', () => {
+    expect(provider).toBeTruthy();
+  });
+
+  describe('getSectionsForContext', () => {
+    it('should return the expected sections', (done) => {
+      provider.getSectionsForContext(dso).subscribe((sections) => {
+        expect(sections).toEqual(expectedSections);
+        done();
+      });
+    });
+  });
+
+});