Removed submit-config and move submit-button to dso-edit-menu.

Author: EikLoe

config/config.example.yml

@@ -478,8 +478,6 @@ collection:
     showSidebar: true
   edit:
     undoTimeout: 10000 # 10 seconds
-  # Whether to show a submit button on item pages instead of having an entry in the dso-edit menu.
-  showSubmitButton: false
 
 # Theme Config
 themes:

cypress/e2e/collection-page.cy.ts

@@ -33,11 +33,26 @@ describe('Collection Page -> Collection-edit menu', () => {
     // <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('Options menu should include submit item on collection pages.', () => {
+  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 button[aria-label="Options"]').click();
-    cy.get('[data-test="link-menu-item.collection.submit.item"]')
+    //cy.get('ds-dso-edit-menu a[aria-label="Options"]').click();
+    cy.get('ds-dso-edit-menu a[href="/submit"]')
       .should('be.visible')
       .and('contain', 'Submit item');
   });

src/app/app.menus.ts

@@ -84,6 +84,9 @@ export const MENUS = buildMenuStructure({
     EditUserAgreementMenuProvider,
   ],
   [MenuID.DSO_EDIT]: [
+    SubmitNewItemMenuProvider.onRoute(
+      MenuRoute.COLLECTION_PAGE,
+    ),
     DsoOptionMenuProvider.withSubs([
       EditItemMenuProvider.onRoute(
         MenuRoute.ITEM_PAGE,
@@ -100,9 +103,6 @@ export const MENUS = buildMenuStructure({
       AddSubComColMenuProvider.onRoute(
         MenuRoute.COMMUNITY_PAGE,
       ),
-      SubmitNewItemMenuProvider.onRoute(
-        MenuRoute.COLLECTION_PAGE,
-      ),
       WithdrawnReinstateItemMenuProvider.onRoute(
         MenuRoute.ITEM_PAGE,
       ),

src/app/collection-page/collection-page.component.html

@@ -34,10 +34,6 @@
                   [hasInnerHtml]="true"
                   [title]="'collection.page.news'">
                 </ds-comcol-page-content>
-                @if (showSubmitButton$ | async) {
-                  <!-- TODO: Adapt button label to collection entity type? --->
-                  <a routerLink="/submit" [queryParams]="{ 'collection': collection.uuid }" class="btn btn-secondary" [innerText]="'collection.page.submit-button' | translate"></a>
-                }
               </header>
               <ds-dso-edit-menu></ds-dso-edit-menu>
             </div>

src/app/collection-page/collection-page.component.ts

@@ -2,19 +2,13 @@ import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
   OnInit,
 } from '@angular/core';
 import {
   ActivatedRoute,
   Router,
-  RouterLink,
   RouterOutlet,
 } from '@angular/router';
-import {
-  APP_CONFIG,
-  AppConfig,
-} from '@dspace/config/app-config.interface';
 import { AuthService } from '@dspace/core/auth/auth.service';
 import { DSONameService } from '@dspace/core/breadcrumbs/dso-name.service';
 import { SortOptions } from '@dspace/core/cache/models/sort-options.model';
@@ -69,7 +63,6 @@ import { VarDirective } from '../shared/utils/var.directive';
     ComcolPageLogoComponent,
     DsoEditMenuComponent,
     ErrorComponent,
-    RouterLink,
     RouterOutlet,
     ThemedComcolPageBrowseByComponent,
     ThemedComcolPageContentComponent,
@@ -95,18 +88,12 @@ export class CollectionPageComponent implements OnInit {
    */
   collectionPageRoute$: Observable<string>;
 
-  /**
-   * Whether to show a submit button for users on the collection page.
-   */
-  showSubmitButton$: Observable<boolean>;
-
   constructor(
     protected route: ActivatedRoute,
     protected router: Router,
     protected authService: AuthService,
     protected authorizationDataService: AuthorizationDataService,
     public dsoNameService: DSONameService,
-    @Inject(APP_CONFIG) protected appConfig: AppConfig,
   ) {
   }
 
@@ -127,10 +114,6 @@ export class CollectionPageComponent implements OnInit {
       getAllSucceededRemoteDataPayload(),
       map((collection) => getCollectionPageRoute(collection.id)),
     );
-
-    this.showSubmitButton$ = this.authorizationDataService.isAuthorized(FeatureID.CanSubmit).pipe(
-      map(authorized => authorized && this.appConfig.collection.showSubmitButton),
-    );
   }
 
   isNotEmpty(object: any) {

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

@@ -5,13 +5,13 @@
       <a class="btn btn-dark btn-sm"
         [routerLink]="itemModel.link">
         <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" >{{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">{{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">{{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.ts

@@ -1,17 +1,21 @@
 
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Inject,
   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 { MenuSection } from '../../../menu/menu-section.model';
@@ -24,6 +28,7 @@ import { MenuSection } from '../../../menu/menu-section.model';
   templateUrl: './dso-edit-menu-section.component.html',
   styleUrls: ['./dso-edit-menu-section.component.scss'],
   imports: [
+    AsyncPipe,
     BtnDisabledDirective,
     NgbTooltip,
     RouterLink,
@@ -36,14 +41,19 @@ export class DsoEditMenuSectionComponent extends AbstractMenuSectionComponent im
   itemModel;
   hasLink: boolean;
   canActivate: boolean;
+  public isMobile$: Observable<boolean>;
+
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
     @Inject('sectionDataProvider') protected section: MenuSection,
     protected menuService: MenuService,
     protected injector: Injector,
+    protected windowService: HostWindowService,
   ) {
     super(menuService, injector);
     this.itemModel = section.model;
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
   }
 
   ngOnInit(): void {

src/app/shared/menu/providers/submit-new-item.menu.ts

@@ -5,14 +5,7 @@
  *
  * http://www.dspace.org/license/
  */
-import {
-  Inject,
-  Injectable,
-} from '@angular/core';
-import {
-  APP_CONFIG,
-  AppConfig,
-} from '@dspace/config/app-config.interface';
+import { Injectable } from '@angular/core';
 import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '@dspace/core/data/feature-authorization/feature-id';
 import { DSpaceObject } from '@dspace/core/shared/dspace-object.model';
@@ -34,7 +27,6 @@ import { DSpaceObjectPageMenuProvider } from './helper-providers/dso.menu';
 export class SubmitNewItemMenuProvider extends DSpaceObjectPageMenuProvider {
   constructor(
     protected authorizationDataService: AuthorizationDataService,
-    @Inject(APP_CONFIG) protected appConfig: AppConfig,
   ) {
     super();
   }
@@ -46,7 +38,7 @@ export class SubmitNewItemMenuProvider extends DSpaceObjectPageMenuProvider {
       map(([canSubmitItem]) => {
         return [
           {
-            visible: canSubmitItem && !this.appConfig.collection.showSubmitButton,
+            visible: canSubmitItem,
             model: {
               type: MenuItemType.LINK,
               text: 'collection.submit.item',

src/config/collection-page-config.interface.ts

@@ -9,7 +9,6 @@ export interface CollectionPageConfig extends Config {
   edit: {
     undoTimeout: number;
   };
-  showSubmitButton: boolean;
 }
 
 /**