Fix/registration bugs

src/app/features/files/pages/file-detail/file-detail.component.ts

@@ -183,8 +183,8 @@ export class FileDetailComponent {
           this.actions.getFileResourceMetadata(this.resourceId, this.resourceType);
           this.actions.getFileResourceContributors(this.resourceId, this.resourceType);
           if (fileId) {
-            const storageLink = this.file()?.links.download || '';
-            this.actions.getFileRevisions(storageLink, fileId);
+            const storageLink = this.file()?.links.upload || '';
+            this.actions.getFileRevisions(storageLink);
             this.actions.getCedarTemplates();
             this.actions.getCedarRecords(fileId, ResourceType.File);
           }

src/app/features/files/store/files.actions.ts

@@ -114,10 +114,7 @@ export class SetFileMetadata {
 export class GetFileRevisions {
   static readonly type = '[Files] Get Revisions';
 
-  constructor(
-    public link: string,
-    public fileId: string
-  ) {}
+  constructor(public link: string) {}
 }
 
 export class UpdateTags {

src/app/features/files/store/files.state.ts

@@ -257,7 +257,7 @@ export class FilesState {
     const state = ctx.getState();
     ctx.patchState({ fileRevisions: { ...state.fileRevisions, isLoading: true, error: null } });
 
-    return this.filesService.getFileRevisions(action.link, action.fileId).pipe(
+    return this.filesService.getFileRevisions(action.link).pipe(
       tap({
         next: (revisions) => {
           ctx.patchState({ fileRevisions: { data: revisions, isLoading: false, error: null } });

src/app/features/metadata/pages/add-metadata/add-metadata.component.ts

@@ -123,7 +123,11 @@ export class AddMetadataComponent implements OnInit {
     if (templates?.links?.first && templates?.links?.last && templates.links.first !== templates.links.last) {
       this.actions.getCedarTemplates();
     } else {
-      this.router.navigate(['..'], { relativeTo: this.activatedRoute });
+      if (this.resourceType() === ResourceType.File) {
+        this.router.navigate([this.resourceId]);
+      } else {
+        this.router.navigate(['..'], { relativeTo: this.activatedRoute });
+      }
     }
   }
 

src/app/features/project/project.routes.ts

@@ -4,6 +4,7 @@ import { Routes } from '@angular/router';
 
 import { viewOnlyGuard } from '@osf/core/guards';
 import { ResourceType } from '@osf/shared/enums';
+import { LicensesService } from '@osf/shared/services';
 import {
   CitationsState,
   CollectionsState,
@@ -17,6 +18,9 @@ import { ActivityLogsState } from '@osf/shared/stores/activity-logs';
 
 import { AnalyticsState } from '../analytics/store';
 import { CollectionsModerationState } from '../moderation/store/collections-moderation';
+import { RegistriesState } from '../registries/store';
+import { LicensesHandlers, ProjectsHandlers, ProvidersHandlers } from '../registries/store/handlers';
+import { FilesHandlers } from '../registries/store/handlers/files.handlers';
 
 import { SettingsState } from './settings/store';
 
@@ -59,6 +63,14 @@ export const projectRoutes: Routes = [
       {
         path: 'registrations',
         canActivate: [viewOnlyGuard],
+        providers: [
+          provideStates([RegistriesState]),
+          ProvidersHandlers,
+          ProjectsHandlers,
+          LicensesService,
+          LicensesHandlers,
+          FilesHandlers,
+        ],
         loadComponent: () =>
           import('../project/registrations/registrations.component').then((mod) => mod.RegistrationsComponent),
       },

src/app/features/project/registrations/registrations.component.html

@@ -15,6 +15,13 @@
         @for (registration of registrations(); track registration.id) {
           <osf-registration-card [registrationData]="registration" />
         }
+        @if (registrationsTotalCount() > itemsPerPage) {
+          <osf-custom-paginator
+            [first]="first"
+            [totalCount]="registrationsTotalCount()"
+            (pageChanged)="onPageChange($event)"
+          />
+        }
       </div>
     }
   </section>

src/app/features/project/registrations/registrations.component.ts

@@ -3,6 +3,7 @@ import { createDispatchMap, select } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { DialogService } from 'primeng/dynamicdialog';
+import { PaginatorState } from 'primeng/paginator';
 
 import { map, of } from 'rxjs';
 
@@ -11,15 +12,27 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { LoadingSpinnerComponent, RegistrationCardComponent, SubHeaderComponent } from '@osf/shared/components';
+import {
+  CustomPaginatorComponent,
+  LoadingSpinnerComponent,
+  RegistrationCardComponent,
+  SubHeaderComponent,
+} from '@osf/shared/components';
 
 import { GetRegistrations, RegistrationsSelectors } from './store';
 
 import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'osf-registrations',
-  imports: [RegistrationCardComponent, SubHeaderComponent, FormsModule, TranslatePipe, LoadingSpinnerComponent],
+  imports: [
+    RegistrationCardComponent,
+    SubHeaderComponent,
+    FormsModule,
+    TranslatePipe,
+    LoadingSpinnerComponent,
+    CustomPaginatorComponent,
+  ],
   templateUrl: './registrations.component.html',
   styleUrl: './registrations.component.scss',
   providers: [DialogService],
@@ -32,16 +45,25 @@ export class RegistrationsComponent implements OnInit {
   readonly projectId = toSignal(this.route.parent?.params.pipe(map((params) => params['id'])) ?? of(undefined));
 
   registrations = select(RegistrationsSelectors.getRegistrations);
+  registrationsTotalCount = select(RegistrationsSelectors.getRegistrationsTotalCount);
   isRegistrationsLoading = select(RegistrationsSelectors.isRegistrationsLoading);
   actions = createDispatchMap({ getRegistrations: GetRegistrations });
 
+  itemsPerPage = 10;
+  first = 0;
+
   ngOnInit(): void {
-    this.actions.getRegistrations(this.projectId());
+    this.actions.getRegistrations(this.projectId(), 1, this.itemsPerPage);
   }
 
   addRegistration(): void {
     this.router.navigate([`registries/${environment.defaultProvider}/new`], {
       queryParams: { projectId: this.projectId() },
     });
   }
+
+  onPageChange(event: PaginatorState): void {
+    this.actions.getRegistrations(this.projectId(), event.page! + 1, this.itemsPerPage);
+    this.first = event.first!;
+  }
 }

src/app/features/project/registrations/services/registrations.service.ts

@@ -15,10 +15,14 @@ export class RegistrationsService {
   private readonly jsonApiService = inject(JsonApiService);
   private readonly apiUrl = `${environment.apiDomainUrl}/v2`;
 
-  getRegistrations(projectId: string): Observable<PaginatedData<RegistrationCard[]>> {
-    const params: Record<string, unknown> = { embed: 'contributors' };
+  getRegistrations(projectId: string, page: number, pageSize: number): Observable<PaginatedData<RegistrationCard[]>> {
+    const params = {
+      page,
+      'page[size]': pageSize,
+      embed: ['bibliographic_contributors', 'registration_schema', 'provider'],
+    };
 
-    const url = `${this.apiUrl}/nodes/${projectId}/linked_by_registrations/`;
+    const url = `${this.apiUrl}/nodes/${projectId}/registrations/`;
 
     return this.jsonApiService.get<ResponseJsonApi<RegistrationDataJsonApi[]>>(url, params).pipe(
       map((response) => {

src/app/features/project/registrations/store/registrations.actions.ts

@@ -1,5 +1,9 @@
 export class GetRegistrations {
   static readonly type = '[Registrations] Get Registrations';
 
-  constructor(public projectId: string) {}
+  constructor(
+    public projectId: string,
+    public page = 1,
+    public pageSize = 10
+  ) {}
 }

src/app/features/project/registrations/store/registrations.selectors.ts

@@ -9,6 +9,11 @@ export class RegistrationsSelectors {
     return state.registrations.data;
   }
 
+  @Selector([RegistrationsState])
+  static getRegistrationsTotalCount(state: RegistrationsStateModel): number {
+    return state.registrations.totalCount;
+  }
+
   @Selector([RegistrationsState])
   static isRegistrationsLoading(state: RegistrationsStateModel) {
     return state.registrations.isLoading;

src/app/features/project/registrations/store/registrations.state.ts

@@ -27,7 +27,7 @@ export class RegistrationsState {
       registrations: { ...state.registrations, isLoading: true, error: null },
     });
 
-    return this.registrationsService.getRegistrations(action.projectId).pipe(
+    return this.registrationsService.getRegistrations(action.projectId, action.page, action.pageSize).pipe(
       tap((registrations) => {
         ctx.setState({
           registrations: {

src/app/features/registries/components/confirm-registration-dialog/confirm-registration-dialog.component.html

@@ -58,6 +58,7 @@
       [disabled]="isRegistrationSubmitting()"
     />
     <p-button
+      data-test-submit-registration-button
       class="w-12rem btn-full-width"
       [label]="'common.buttons.submit' | translate"
       [disabled]="form.invalid || isRegistrationSubmitting()"

src/app/features/registries/components/custom-step/custom-step.component.html

@@ -60,17 +60,9 @@ <h3 class="mb-2">
                   <span class="text-primary font-medium">{{ 'common.links.showExample' | translate }} </span>
                 </ng-template>
                 <ng-template #content>
-                  <div
-                    class="p-inplace-display"
-                    tabindex="0"
-                    (click)="inplaceRef.deactivate()"
-                    (keyup.enter)="inplaceRef.deactivate()"
-                    (keyup.space)="inplaceRef.deactivate()"
-                  >
-                    <button class="text-primary border-none cursor-pointer bg-transparent text-sm">
-                      {{ 'common.links.hideExample' | translate }}
-                    </button>
-                  </div>
+                  <p-button size="small" (onClick)="inplaceRef.deactivate()" variant="text" styleClass="font-medium">
+                    {{ 'common.links.hideExample' | translate }}
+                  </p-button>
                   <p class="m-0">{{ q.exampleText }}</p>
                 </ng-template>
               </p-inplace>
@@ -207,6 +199,11 @@ <h3 class="mb-2">{{ 'files.actions.uploadFile' | translate }}</h3>
       class="mr-2"
       (click)="goBack()"
     ></p-button>
-    <p-button type="button" [label]="'common.buttons.next' | translate" (click)="goNext()"></p-button>
+    <p-button
+      data-test-goto-next-page
+      type="button"
+      [label]="'common.buttons.next' | translate"
+      (click)="goNext()"
+    ></p-button>
   </div>
 </section>

src/app/features/registries/components/custom-step/custom-step.component.ts

@@ -152,7 +152,6 @@ export class CustomStepComponent implements OnDestroy {
           break;
 
         default:
-          console.warn(`Unsupported field type: ${q.fieldType}`);
           return;
       }
 

src/app/features/registries/components/metadata/metadata.component.html

@@ -13,6 +13,7 @@ <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
         <div class="mt-2">
           <label for="project-description-id">{{ 'common.labels.description' | translate }}</label>
           <textarea
+            data-test-metadata-description
             id="project-description-id"
             formControlName="description"
             class="w-full"
@@ -40,7 +41,7 @@ <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
     <div class="flex justify-content-end">
       <p-button [label]="'registries.deleteDraft' | translate" severity="danger" (click)="deleteDraft()" class="mr-2">
       </p-button>
-      <p-button [label]="'common.buttons.next' | translate" type="submit"></p-button>
+      <p-button data-test-goto-next-page [label]="'common.buttons.next' | translate" type="submit"></p-button>
     </div>
   </form>
 </section>

src/app/features/registries/components/metadata/registries-license/registries-license.component.html

@@ -9,6 +9,7 @@ <h2 class="mb-2">{{ 'shared.license.title' | translate }}</h2>
   </p>
   <osf-license
     [licenses]="licenses()"
+    [fullWidthSelect]="true"
     [selectedLicenseId]="selectedLicense()?.id"
     [selectedLicenseOptions]="selectedLicense()?.options"
     (createLicense)="createLicense($event)"

src/app/features/registries/components/new-registration/new-registration.component.html

@@ -1,4 +1,4 @@
-<section class="h-full">
+<section class="h-full" data-test-new-registration-form>
   <osf-sub-header [title]="'registries.new.addNewRegistry' | translate" />
   <section class="flex flex-column lg:flex-row flex-1 p-5 gap-4 bg-white w-full">
     <p>
@@ -14,13 +14,15 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '1' }}</h2>
       <div class="flex gap-2">
         <p-button
           class="btn-full-width w-2 font-bold"
+          [class]="{ 'pointer-events-none': fromProject }"
           severity="info"
           [label]="'common.buttons.yes' | translate"
           [raised]="fromProject"
           (click)="toggleFromProject()"
         />
         <p-button
           class="btn-full-width w-2"
+          [class]="{ 'pointer-events-none': !fromProject }"
           severity="info"
           [label]="'common.buttons.no' | translate"
           [raised]="!fromProject"
@@ -36,13 +38,16 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
           <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
           <div class="flex">
             <p-select
+              data-test-project-select
               formControlName="project"
               [options]="projects()"
               [placeholder]="'registries.new.selectProject' | translate"
               optionLabel="title"
               optionValue="id"
+              filter="true"
               [loading]="isProjectsLoading()"
               (onChange)="onSelectProject($event.value)"
+              (onFilter)="onProjectFilter($event.filter)"
               class="w-6"
             />
           </div>
@@ -53,6 +58,7 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (fromProject ?
         <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step3' | translate }}</p>
         <div class="flex">
           <p-select
+            data-test-schema-select
             formControlName="providerSchema"
             [options]="providerSchemas()"
             optionLabel="name"
@@ -65,6 +71,7 @@ <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (fromProject ?
       </p-card>
       <div class="flex justify-content-end">
         <p-button
+          data-test-start-registration-button
           [label]="'registries.new.createDraft' | translate"
           [disabled]="draftForm.invalid"
           type="submit"

src/app/features/registries/components/new-registration/new-registration.component.scss

@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  background-color: var(--white);
 }