Feature/pbs 25.03

angular.json

@@ -30,7 +30,9 @@
               "cedar-artifact-viewer",
               "markdown-it-video",
               "ace-builds/src-noconflict/ext-language_tools",
-              "@traptitech/markdown-it-katex"
+              "@traptitech/markdown-it-katex",
+              "@citation-js/core",
+              "@citation-js/plugin-csl"
             ],
             "assets": [
               "src/favicon.ico",

jest.config.js

@@ -11,6 +11,8 @@ module.exports = {
     '^@styles/(.*)$': '<rootDir>/assets/styles/$1',
     '^@testing/(.*)$': '<rootDir>/src/testing/$1',
     '^src/environments/environment$': '<rootDir>/src/environments/environment.ts',
+    '^cedar-artifact-viewer$': '<rootDir>/src/testing/mocks/cedar-artifact-viewer.mock.ts',
+    '^cedar-embeddable-editor$': '<rootDir>/src/testing/mocks/cedar-embeddable-editor.mock.ts',
   },
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

src/@types/global.d.ts

@@ -47,5 +47,11 @@ declare global {
        */
       loggedIn: boolean;
     };
+
+    /**
+     * Flag used by prerender services to determine when a page is fully loaded.
+     * Set to false initially, then set to true once all AJAX requests and content are loaded.
+     */
+    prerenderReady?: boolean;
   }
 }

src/app/app.component.spec.ts

@@ -12,11 +12,12 @@ import { CookieConsentBannerComponent } from '@core/components/osf-banners/cooki
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser, UserState } from '@core/store/user';
 import { UserEmailsState } from '@core/store/user-emails';
-import { CustomDialogService } from '@shared/services';
 
-import { TranslateServiceMock } from '../testing/mocks';
+import { TranslateServiceMock } from '../testing/mocks/translate.service.mock';
 
-import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
+import { FullScreenLoaderComponent } from './shared/components/full-screen-loader/full-screen-loader.component';
+import { ToastComponent } from './shared/components/toast/toast.component';
+import { CustomDialogService } from './shared/services/custom-dialog.service';
 import { AppComponent } from './app.component';
 
 import { OSFTestingModule } from '@testing/osf.testing.module';

src/app/app.component.ts

@@ -9,10 +9,11 @@ import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser } from '@core/store/user';
 import { GetEmails, UserEmailsSelectors } from '@core/store/user-emails';
-import { ConfirmEmailComponent } from '@shared/components';
-import { CustomDialogService } from '@shared/services';
 
-import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
+import { ConfirmEmailComponent } from './shared/components/confirm-email/confirm-email.component';
+import { FullScreenLoaderComponent } from './shared/components/full-screen-loader/full-screen-loader.component';
+import { ToastComponent } from './shared/components/toast/toast.component';
+import { CustomDialogService } from './shared/services/custom-dialog.service';
 
 import { GoogleTagManagerService } from 'angular-google-tag-manager';
 

src/app/app.config.ts

@@ -11,12 +11,14 @@ import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideZoneChange
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
 
-import { STATES } from '@core/constants';
-import { provideTranslation } from '@core/helpers';
+import { STATES } from '@core/constants/ngxs-states.constant';
+import { provideTranslation } from '@core/helpers/i18n.helper';
+import { authInterceptor } from '@core/interceptors/auth.interceptor';
+import { errorInterceptor } from '@core/interceptors/error.interceptor';
+import { viewOnlyInterceptor } from '@core/interceptors/view-only.interceptor';
 import { APPLICATION_INITIALIZATION_PROVIDER } from '@core/provider/application.initialization.provider';
 import { SENTRY_PROVIDER } from '@core/provider/sentry.provider';
 
-import { authInterceptor, errorInterceptor, viewOnlyInterceptor } from './core/interceptors';
 import CustomPreset from './core/theme/custom-preset';
 import { routes } from './app.routes';
 

src/app/app.routes.ts

@@ -2,17 +2,18 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
+import { authGuard } from '@core/guards/auth.guard';
 import { isFileGuard } from '@core/guards/is-file.guard';
+import { redirectIfLoggedInGuard } from '@core/guards/redirect-if-logged-in.guard';
 
-import { authGuard, redirectIfLoggedInGuard } from './core/guards';
 import { isProjectGuard } from './core/guards/is-project.guard';
 import { isRegistryGuard } from './core/guards/is-registry.guard';
 import { MyPreprintsState } from './features/preprints/store/my-preprints';
 import { ProfileState } from './features/profile/store';
 import { RegistriesState } from './features/registries/store';
 import { LicensesHandlers, ProjectsHandlers, ProvidersHandlers } from './features/registries/store/handlers';
 import { FilesHandlers } from './features/registries/store/handlers/files.handlers';
-import { LicensesService } from './shared/services';
+import { LicensesService } from './shared/services/licenses.service';
 import { BookmarksState } from './shared/stores/bookmarks';
 import { ProjectsState } from './shared/stores/projects';
 
@@ -67,8 +68,8 @@ export const routes: Routes = [
         path: 'my-projects',
         loadComponent: () =>
           import('./features/my-projects/my-projects.component').then((mod) => mod.MyProjectsComponent),
-        providers: [provideStates([BookmarksState, ProjectsState])],
         canActivate: [authGuard],
+        providers: [provideStates([BookmarksState, ProjectsState])],
       },
       {
         path: 'my-registrations',

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

@@ -1,4 +1,4 @@
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 
 import { of } from 'rxjs';
 
@@ -7,6 +7,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
 import { ProviderSelectors } from '@core/store/provider';
 import { InstitutionsAdminSelectors } from '@osf/features/admin-institutions/store';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 import { InstitutionsSearchSelectors } from '@shared/stores/institutions-search';
 
 import { BreadcrumbComponent } from './breadcrumb.component';
@@ -41,7 +42,7 @@ describe('Component: Breadcrumb', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BreadcrumbComponent],
+      imports: [BreadcrumbComponent, MockComponent(IconComponent)],
       providers: [
         MockProvider(Router, mockRouter),
         { provide: ActivatedRoute, useValue: mockActivatedRoute },

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

@@ -6,10 +6,10 @@ import { Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
 
+import { RouteData } from '@core/models/route-data.model';
 import { ProviderSelectors } from '@core/store/provider';
-import { RouteData } from '@osf/core/models';
 import { InstitutionsAdminSelectors } from '@osf/features/admin-institutions/store';
-import { IconComponent } from '@osf/shared/components';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 import { InstitutionsSearchSelectors } from '@shared/stores/institutions-search';
 
 @Component({

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

@@ -4,7 +4,7 @@ import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
-import { IconComponent } from '@shared/components';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 
 import { FooterComponent } from './footer.component';
 

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

@@ -3,8 +3,8 @@ import { TranslatePipe } from '@ngx-translate/core';
 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 { SOCIAL_ICONS } from '@core/constants/social-icons.constant';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 
 @Component({
   selector: 'osf-footer',

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

@@ -14,7 +14,8 @@ import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
 
 import { HeaderComponent } from './header.component';
 
-import { MOCK_STORE, MOCK_USER } from '@testing/mocks';
+import { MOCK_USER } from '@testing/mocks/data.mock';
+import { MOCK_STORE } from '@testing/mocks/mock-store.mock';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;

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

@@ -8,7 +8,7 @@ import { Menu } from 'primeng/menu';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { AuthService } from '@osf/core/services';
+import { AuthService } from '@core/services/auth.service';
 import { UserSelectors } from '@osf/core/store/user';
 
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';

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

@@ -7,7 +7,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { IS_WEB } from '@osf/shared/helpers';
+import { IS_WEB } from '@osf/shared/helpers/breakpoints.tokens';
 
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
 import { FooterComponent } from '../footer/footer.component';

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

@@ -7,8 +7,8 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterOutlet } from '@angular/router';
 
-import { ScrollTopOnRouteChangeDirective } from '@osf/shared/directives';
-import { IS_MEDIUM, IS_WEB } from '@osf/shared/helpers';
+import { ScrollTopOnRouteChangeDirective } from '@osf/shared/directives/scroll-top.directive';
+import { IS_MEDIUM, IS_WEB } from '@osf/shared/helpers/breakpoints.tokens';
 
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
 import { FooterComponent } from '../footer/footer.component';

src/app/core/components/nav-menu/nav-menu.component.spec.ts

@@ -1,18 +1,19 @@
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 
 import { NO_ERRORS_SCHEMA, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { CustomMenuItem } from '@osf/core/models';
-import { AuthService } from '@osf/core/services';
+import { CustomMenuItem } from '@core/models/custom-menu-item.model';
+import { AuthService } from '@core/services/auth.service';
 import { ProviderSelectors } from '@osf/core/store/provider/provider.selectors';
 import { UserSelectors } from '@osf/core/store/user/user.selectors';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 import { CurrentResourceSelectors } from '@osf/shared/stores/current-resource';
 
 import { NavMenuComponent } from './nav-menu.component';
 
-import { MOCK_USER } from '@testing/mocks';
+import { MOCK_USER } from '@testing/mocks/data.mock';
 import { OSFTestingModule } from '@testing/osf.testing.module';
 import { ActivatedRouteMockBuilder } from '@testing/providers/route-provider.mock';
 import { RouterMockBuilder } from '@testing/providers/router-provider.mock';
@@ -34,7 +35,7 @@ describe('NavMenuComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [NavMenuComponent, OSFTestingModule],
+      imports: [NavMenuComponent, OSFTestingModule, MockComponent(IconComponent)],
       providers: [
         provideMockStore({
           signals: [

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -10,16 +10,18 @@ import { Component, computed, inject, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 
-import { MENU_ITEMS } from '@core/constants';
+import { MENU_ITEMS } from '@core/constants/nav-items.constant';
+import { filterMenuItems, updateMenuItems } from '@core/helpers/nav-menu.helper';
+import { CustomMenuItem } from '@core/models/custom-menu-item.model';
+import { RouteContext } from '@core/models/route-context.model';
+import { AuthService } from '@core/services/auth.service';
 import { ProviderSelectors } from '@core/store/provider';
-import { filterMenuItems, updateMenuItems } from '@osf/core/helpers';
-import { CustomMenuItem, RouteContext } from '@osf/core/models';
-import { AuthService } from '@osf/core/services';
-import { UserSelectors } from '@osf/core/store/user';
-import { IconComponent } from '@osf/shared/components';
-import { CurrentResourceType, ReviewPermissions } from '@osf/shared/enums';
-import { getViewOnlyParam } from '@osf/shared/helpers';
-import { WrapFnPipe } from '@osf/shared/pipes';
+import { UserSelectors } from '@core/store/user';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
+import { CurrentResourceType } from '@osf/shared/enums/resource-type.enum';
+import { ReviewPermissions } from '@osf/shared/enums/review-permissions.enum';
+import { getViewOnlyParam } from '@osf/shared/helpers/view-only.helper';
+import { WrapFnPipe } from '@osf/shared/pipes/wrap-fn.pipe';
 import { CurrentResourceSelectors, GetResourceDetails } from '@osf/shared/stores/current-resource';
 
 @Component({

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.spec.ts

@@ -1,9 +1,10 @@
 import { CookieService } from 'ngx-cookie-service';
-
-import { Button } from 'primeng/button';
+import { MockComponent } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
+
 import { CookieConsentBannerComponent } from './cookie-consent-banner.component';
 
 import { OSFTestingModule } from '@testing/osf.testing.module';
@@ -19,8 +20,7 @@ describe('Component: Cookie Consent Banner', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [OSFTestingModule, CookieConsentBannerComponent, Button],
-
+      imports: [OSFTestingModule, CookieConsentBannerComponent, MockComponent(IconComponent)],
       providers: [{ provide: CookieService, useValue: cookieServiceMock }],
     });
 

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.ts

@@ -7,7 +7,7 @@ import { Message } from 'primeng/message';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 
 import { fadeInOutAnimation } from '@core/animations/fade.in-out.animation';
-import { IconComponent } from '@shared/components';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 
 /**
  * Displays a cookie consent banner until the user accepts.

src/app/core/components/osf-banners/maintenance-banner/maintenance-banner.component.spec.ts

@@ -21,7 +21,9 @@ describe('Component: Maintenance Banner', () => {
       check: jest.fn(),
       set: jest.fn(),
     } as any;
+
     httpClient = { get: jest.fn() } as any;
+
     await TestBed.configureTestingModule({
       imports: [MaintenanceBannerComponent, NoopAnimationsModule, MessageModule],
       providers: [

src/app/core/components/osf-banners/scheduled-banner/scheduled-banner.component.spec.ts

@@ -6,7 +6,7 @@ import { signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BannerModel } from '@core/components/osf-banners/models/banner.model';
-import { IS_XSMALL } from '@osf/shared/helpers';
+import { IS_XSMALL } from '@osf/shared/helpers/breakpoints.tokens';
 import { BannersSelector, GetCurrentScheduledBanner } from '@osf/shared/stores/banners';
 
 import { ScheduledBannerComponent } from './scheduled-banner.component';

src/app/core/components/osf-banners/scheduled-banner/scheduled-banner.component.ts

@@ -3,7 +3,7 @@ import { Store } from '@ngxs/store';
 import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 
-import { IS_XSMALL } from '@osf/shared/helpers';
+import { IS_XSMALL } from '@osf/shared/helpers/breakpoints.tokens';
 import { BannersSelector, GetCurrentScheduledBanner } from '@osf/shared/stores/banners';
 
 /**

src/app/core/components/osf-banners/tos-consent-banner/tos-consent-banner.component.spec.ts

@@ -9,11 +9,11 @@ import { By } from '@angular/platform-browser';
 
 import { AcceptTermsOfServiceByUser } from '@core/store/user';
 import { UserSelectors } from '@osf/core/store/user';
-import { IconComponent } from '@shared/components';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 
 import { TosConsentBannerComponent } from './tos-consent-banner.component';
 
-import { MOCK_USER } from '@testing/mocks';
+import { MOCK_USER } from '@testing/mocks/data.mock';
 import { TranslationServiceMock } from '@testing/mocks/translation.service.mock';
 import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 import { provideMockStore } from '@testing/providers/store-provider.mock';

src/app/core/components/osf-banners/tos-consent-banner/tos-consent-banner.component.ts

@@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
 import { AcceptTermsOfServiceByUser, UserSelectors } from '@core/store/user';
-import { IconComponent } from '@osf/shared/components';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
 
 /**
  * TosConsentBannerComponent displays a Terms of Service (ToS) consent banner for users who haven't accepted yet.

src/app/core/components/request-access/request-access.component.spec.ts

@@ -10,7 +10,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
-import { ToastService } from '@osf/shared/services';
+import { ToastService } from '@osf/shared/services/toast.service';
 
 import { RequestAccessComponent } from './request-access.component';
 

src/app/core/components/request-access/request-access.component.ts

@@ -12,9 +12,11 @@ import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-import { AuthService } from '@core/services';
-import { InputLimits } from '@osf/shared/constants';
-import { LoaderService, RequestAccessService, ToastService } from '@osf/shared/services';
+import { AuthService } from '@core/services/auth.service';
+import { InputLimits } from '@osf/shared/constants/input-limits.const';
+import { LoaderService } from '@osf/shared/services/loader.service';
+import { RequestAccessService } from '@osf/shared/services/request-access.service';
+import { ToastService } from '@osf/shared/services/toast.service';
 
 @Component({
   selector: 'osf-request-access',

src/app/core/constants/nav-items.constant.ts

@@ -1,6 +1,6 @@
 import { MenuItem } from 'primeng/api';
 
-import { UserPermissions } from '@osf/shared/enums';
+import { UserPermissions } from '@osf/shared/enums/user-permissions.enum';
 
 import { CustomMenuItem } from '../models/custom-menu-item.model';