Merge branch 'main' into fix/ang-925

Author: rnastyuk

src/app/core/components/breadcrumb/breadcrumb.component.scss

@@ -1,7 +1,5 @@
-@use "styles/variables" as var;
-
 .breadcrumbs {
- color: var(--header-color, var.$dark-blue-1);
+ color: var(--header-color, var(--dark-blue-1));
  font-weight: 600;
  text-transform: capitalize;
  background-color: var(--header-background-color);

src/app/core/components/footer/footer.component.html

@@ -6,7 +6,7 @@
  </div>
  </div>
 
- <div class="footer-socials flex justify-content-center align-items-center" [class]="isWeb() ? 'my-3' : 'my-4'">
+ <div class="footer-socials flex justify-content-center align-items-center my-4">
  @for (icon of socialIcons; track icon.name) {
  <a
  class="social-link flex align-items-center justify-content-center"
@@ -20,8 +20,7 @@
  </div>
 
  <div
- class="footer-secondary-nav flex flex-column justify-content-center align-items-center md:flex-row md:justify-content-between"
- [class.mt-4]="!isWeb()"
+ class="footer-secondary-nav flex flex-column justify-content-center align-items-center mt-4 md:flex-row md:justify-content-between xl:mt-0"
  >
  <div class="footer-links flex flex-wrap justify-content-center mt-1">
  <a routerLink="/terms-of-use">{{ 'footer.links.termsOfUse' | translate }}</a>

src/app/core/components/footer/footer.component.spec.ts

@@ -1,27 +1,21 @@
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
 
-import { BehaviorSubject } from 'rxjs';
-
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
-import { IS_WEB } from '@osf/shared/helpers';
 import { IconComponent } from '@shared/components';
 
 import { FooterComponent } from './footer.component';
 
 describe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;
- let isWebSubject: BehaviorSubject<boolean>;
 
  beforeEach(async () => {
- isWebSubject = new BehaviorSubject<boolean>(true);
-
  await TestBed.configureTestingModule({
  imports: [FooterComponent, MockComponent(IconComponent), MockPipe(TranslatePipe)],
- providers: [MockProvider(TranslateService), MockProvider(ActivatedRoute), MockProvider(IS_WEB, isWebSubject)],
+ providers: [MockProvider(TranslateService), MockProvider(ActivatedRoute)],
  }).compileComponents();
 
  fixture = TestBed.createComponent(FooterComponent);

src/app/core/components/footer/footer.component.ts

@@ -1,12 +1,10 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 import { SOCIAL_ICONS } from '@osf/core/constants';
 import { IconComponent } from '@osf/shared/components';
-import { IS_WEB } from '@osf/shared/helpers';
 
 @Component({
  selector: 'osf-footer',
@@ -16,7 +14,5 @@ import { IS_WEB } from '@osf/shared/helpers';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
- isWeb = toSignal(inject(IS_WEB));
-
  readonly socialIcons = SOCIAL_ICONS;
 }

src/app/core/components/root/root.component.html

@@ -21,4 +21,8 @@
  </div>
 </div>
 
-<p-confirm-dialog id="dialog" styleClass="w-full md:w-6 xl:w-5" [header]="'common.dialogs.confirmation' | translate" />
+<p-confirm-dialog
+ id="dialog"
+ styleClass="w-full md:w-6 xl:w-5"
+ [header]="'common.accessibility.confirmation' | translate"
+/>

src/app/core/components/root/root.component.spec.ts

@@ -7,14 +7,14 @@ import { BehaviorSubject } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
-import { FooterComponent } from '@core/components/footer/footer.component';
-import { HeaderComponent } from '@core/components/header/header.component';
-import { TopnavComponent } from '@core/components/topnav/topnav.component';
-import { IS_WEB, IS_XSMALL } from '@osf/shared/helpers';
+import { IS_WEB } from '@osf/shared/helpers';
 
+import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
+import { FooterComponent } from '../footer/footer.component';
+import { HeaderComponent } from '../header/header.component';
 import { OSFBannerComponent } from '../osf-banners/osf-banner.component';
 import { SidenavComponent } from '../sidenav/sidenav.component';
+import { TopnavComponent } from '../topnav/topnav.component';
 
 import { RootComponent } from './root.component';
 
@@ -24,11 +24,9 @@ describe('Component: Root', () => {
  let component: RootComponent;
  let fixture: ComponentFixture<RootComponent>;
  let isWebSubject: BehaviorSubject<boolean>;
- let isMobileSubject: BehaviorSubject<boolean>;
 
  beforeEach(async () => {
  isWebSubject = new BehaviorSubject<boolean>(true);
- isMobileSubject = new BehaviorSubject<boolean>(false);
 
  await TestBed.configureTestingModule({
  imports: [
@@ -44,11 +42,7 @@ describe('Component: Root', () => {
  OSFBannerComponent
  ),
  ],
- providers: [
- MockProvider(IS_WEB, isWebSubject),
- MockProvider(IS_XSMALL, isMobileSubject),
- MockProvider(ConfirmationService),
- ],
+ providers: [MockProvider(IS_WEB, isWebSubject), MockProvider(ConfirmationService)],
  }).compileComponents();
 
  fixture = TestBed.createComponent(RootComponent);
@@ -82,15 +76,6 @@ describe('Component: Root', () => {
  expect(tabletLayout).toBeTruthy();
  });
 
- it('should hide breadcrumb in tablet layout when mobile', () => {
- isWebSubject.next(false);
- isMobileSubject.next(true);
- fixture.detectChanges();
-
- const breadcrumb = fixture.nativeElement.querySelector('osf-breadcrumb');
- expect(breadcrumb).toBeFalsy();
- });
-
  it('should contain confirm dialog component', () => {
  const confirmDialog = fixture.nativeElement.querySelector('p-confirm-dialog');
  expect(confirmDialog).toBeTruthy();

src/app/features/analytics/components/analytics-kpi/analytics-kpi.component.scss

@@ -1,26 +1,23 @@
-@use "styles/variables" as var;
-@use "styles/mixins" as mix;
-
 :host {
  width: 100%;
 }
 
 .kpi-container {
- border: 1px solid var.$grey-2;
- border-radius: 12px;
- color: var.$dark-blue-1;
+ border: 1px solid var(--grey-2);
+ border-radius: 0.75rem;
+ color: var(--dark-blue-1);
  width: 100%;
  height: 100%;
  min-height: 180px;
 
  .value {
- color: var.$blue-1;
- font-size: 2.285rem;
+ color: var(--blue-1);
+ font-size: 2rem;
  font-weight: 700;
- margin: 1rem 0 1.7rem;
+ margin: 1rem 0 1.5rem;
  }
 
  .value-skeleton {
- margin: 1rem 0 1.7rem;
+ margin: 1rem 0 1.5rem;
  }
 }

src/app/features/analytics/components/view-duplicates/view-duplicates.component.spec.ts

@@ -10,7 +10,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ProjectOverviewSelectors } from '@osf/features/project/overview/store';
 import { RegistryOverviewSelectors } from '@osf/features/registry/store/registry-overview';
 import { ResourceType } from '@osf/shared/enums';
-import { IS_SMALL } from '@osf/shared/helpers';
 import { DuplicatesSelectors } from '@osf/shared/stores';
 import {
  ContributorsListComponent,
@@ -74,7 +73,6 @@ describe('Component: View Duplicates', () => {
  MockProvider(CustomDialogService, mockCustomDialogService),
  MockProvider(Router, routerMock),
  MockProvider(ActivatedRoute, activatedRouteMock),
- { provide: IS_SMALL, useValue: of(false) },
  ],
  }).compileComponents();
 
@@ -88,31 +86,7 @@ describe('Component: View Duplicates', () => {
  expect(component).toBeTruthy();
  });
 
- it('should open ForkDialog with width 95vw and refresh on success', () => {
- const openSpy = jest
- .spyOn(mockCustomDialogService, 'open')
- .mockReturnValue({ onClose: of({ success: true }) } as any);
- (component as any).actions = { ...component.actions, getDuplicates: jest.fn() };
-
- component.handleForkResource();
-
- expect(openSpy).toHaveBeenCalledWith(
- expect.any(Function),
- expect.objectContaining({
- width: '95vw',
- header: 'project.overview.dialog.fork.headerProject',
- data: expect.objectContaining({
- resource: expect.any(Object),
- resourceType: ResourceType.Project,
- }),
- })
- );
-
- expect((component as any).actions.getDuplicates).toHaveBeenCalled();
- });
-
  it('should open ForkDialog with width 450px when small and not refresh on failure', () => {
- (component as any).isSmall = () => true;
  (component as any).actions = { ...component.actions, getDuplicates: jest.fn() };
 
  const openSpy = jest

src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts

@@ -39,7 +39,6 @@ import {
  TruncatedTextComponent,
 } from '@osf/shared/components';
 import { ResourceType, UserPermissions } from '@osf/shared/enums';
-import { IS_SMALL } from '@osf/shared/helpers';
 import { ToolbarResource } from '@osf/shared/models';
 import { Duplicate } from '@osf/shared/models/duplicates';
 import { CustomDialogService } from '@osf/shared/services';
@@ -83,7 +82,6 @@ export class ViewDuplicatesComponent {
  readonly UserPermissions = UserPermissions;
 
  currentPage = signal<string>('1');
- isSmall = toSignal(inject(IS_SMALL));
  firstIndex = computed(() => (parseInt(this.currentPage()) - 1) * this.pageSize);
 
  readonly forkActionItems = (resourceId: string) => [
@@ -194,13 +192,12 @@ export class ViewDuplicatesComponent {
 
  handleForkResource(): void {
  const toolbarResource = this.toolbarResource();
- const dialogWidth = !this.isSmall() ? '95vw' : '450px';
 
  if (toolbarResource) {
  this.customDialogService
  .open(ForkDialogComponent, {
  header: 'project.overview.dialog.fork.headerProject',
- width: dialogWidth,
+ width: '450px',
  data: {
  resource: toolbarResource,
  resourceType: this.resourceType(),
@@ -233,12 +230,10 @@ export class ViewDuplicatesComponent {
  }
 
  private handleDeleteFork(id: string): void {
- const dialogWidth = !this.isSmall() ? '95vw' : '650px';
-
  this.customDialogService
  .open(DeleteComponentDialogComponent, {
  header: 'project.overview.dialog.deleteComponent.header',
- width: dialogWidth,
+ width: '650px',
  data: {
  componentId: id,
  resourceType: this.resourceType(),

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.html

@@ -40,6 +40,7 @@ <h3>{{ 'collections.addToCollection.projectContributors' | translate }}</h3>
  <osf-contributors-table
  class="w-full"
  [(contributors)]="projectContributors"
+ [tableParams]="tableParams()"
  [isLoading]="isContributorsLoading()"
  (remove)="handleRemoveContributor($event)"
  ></osf-contributors-table>