Feat/215 registry overview (#158)

* feat(registry-overview): establish revisions

* feat(registry-overvoew): registry revisions, statuses

* fix(registry-overview): pr fixes

Author: kpetrov24exoft

src/app/features/project/overview/components/fork-dialog/fork-dialog.component.html

@@ -1,5 +1,9 @@
 <p>
-  {{ 'project.overview.dialog.fork.message' | translate }}
+  @if (config.data.resource.resourceType === ResourceType.Project) {
+    {{ 'project.overview.dialog.fork.messageProject' | translate }}
+  } @else if (config.data.resource.resourceType === ResourceType.Registration) {
+    {{ 'project.overview.dialog.fork.messageRegistry' | translate }}
+  }
 </p>
 
 <div class="flex mt-6 gap-3 justify-content-between">

src/app/features/project/overview/components/fork-dialog/fork-dialog.component.ts

@@ -5,10 +5,13 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
+import { finalize } from 'rxjs';
+
 import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { ForkResource, ProjectOverviewSelectors } from '@osf/features/project/overview/store';
+import { ResourceType } from '@shared/enums';
 import { ToolbarResource } from '@shared/models';
 import { ToastService } from '@shared/services';
 
@@ -33,12 +36,15 @@ export class ForkDialogComponent {
 
     this.store
       .dispatch(new ForkResource(resource.id, resource.resourceType))
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: () => {
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        finalize(() => {
           this.dialogRef.close();
           this.toastService.showSuccess('project.overview.dialog.toast.fork.success');
-        },
-      });
+        })
+      )
+      .subscribe();
   }
+
+  protected readonly ResourceType = ResourceType;
 }

src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts

@@ -132,15 +132,21 @@ export class OverviewToolbarComponent {
 
   private handleForkResource(): void {
     const resource = this.currentResource();
+    const headerTranslation =
+      resource?.resourceType === ResourceType.Project
+        ? 'project.overview.dialog.fork.headerProject'
+        : resource?.resourceType === ResourceType.Registration
+          ? 'project.overview.dialog.fork.headerRegistry'
+          : '';
     if (resource) {
       this.dialogService.open(ForkDialogComponent, {
         focusOnShow: false,
-        header: this.translateService.instant('project.overview.dialog.fork.header'),
+        header: this.translateService.instant(headerTranslation),
         closeOnEscape: true,
         modal: true,
         closable: true,
         data: {
-          resourceId: resource,
+          resource: resource,
         },
       });
     }

src/app/features/project/overview/services/project-overview.service.ts

@@ -59,7 +59,7 @@ export class ProjectOverviewService {
   forkResource(projectId: string, resourceType: string): Observable<void> {
     const payload = {
       data: {
-        type: resourceType,
+        type: 'nodes',
       },
     };
 

src/app/features/project/overview/store/project-overview.actions.ts

@@ -19,7 +19,7 @@ export class ForkResource {
   static readonly type = '[Project Overview] Fork Resource';
 
   constructor(
-    public projectId: string,
+    public resourceId: string,
     public resourceType: ResourceType
   ) {}
 }

src/app/features/project/overview/store/project-overview.state.ts

@@ -127,12 +127,9 @@ export class ProjectOverviewState {
       case ResourceType.Registration:
         resourceType = 'registrations';
         break;
-      case ResourceType.Preprint:
-        resourceType = 'preprints';
-        break;
     }
 
-    return this.projectOverviewService.forkResource(action.projectId, resourceType).pipe(
+    return this.projectOverviewService.forkResource(action.resourceId, resourceType).pipe(
       tap(() => {
         ctx.patchState({
           project: {

src/app/features/registries/pages/registries-landing/registries-landing.component.html

@@ -1,5 +1,5 @@
 <section class="subheader flex flex-column">
-  <div class="flex flex-column align-items-start gap-4">
+  <div class="flex flex-column align-items-start">
     <osf-sub-header
       [title]="'registries.title' | translate"
       [icon]="'registries'"

src/app/features/registry/components/index.ts

@@ -0,0 +1,3 @@
+export * from './registry-revisions/registry-revisions.component';
+export * from './registry-statuses/registry-statuses.component';
+export * from './withdraw-dialog/withdraw-dialog.component';

src/app/features/registry/components/registry-revisions/registry-revisions.component.html

@@ -0,0 +1,50 @@
+<p-accordion class="accordion-border p-4 py-4 no-padding w-full">
+  <p-accordion-panel value="0">
+    <p-accordion-header class="flex flex-row column-gap-3 align-items-center">
+      {{ 'registry.overview.updates' | translate }}
+    </p-accordion-header>
+    <p-accordion-content>
+      <div class="flex flex-column gap-2 pt-4 align-items-center justify-content-center">
+        @if (registry() && registry()!.schemaResponses.length > 0) {
+          <p-button
+            severity="info"
+            class="w-full"
+            [class.current-revision]="true"
+            styleClass="w-full"
+            [label]="'registry.overview.original' | translate"
+            (click)="emitOpenRevision(0)"
+          />
+          @for (revision of registry()!.schemaResponses.slice(1); track $index; let last = $last) {
+            @if (last) {
+              <p-button
+                severity="info"
+                class="w-full"
+                [class.current-revision]="selectedRevisionIndex() === $index"
+                styleClass="w-full"
+                [label]="'registry.overview.latest' | translate"
+                (click)="emitOpenRevision($index)"
+              />
+            } @else {
+              <p-button
+                severity="info"
+                class="w-full"
+                [class.current-revision]="selectedRevisionIndex() === $index"
+                styleClass="w-full"
+                [label]="('common.buttons.update' | translate) + ($index + 1)"
+                (click)="emitOpenRevision($index)"
+              />
+            }
+          }
+
+          <!--          [KP] TODO: add links to update pages-->
+          @if (registry()?.revisionStatus === RevisionReviewStates.Approved) {
+            <p-button class="w-full" styleClass="w-full" [label]="'common.buttons.update' | translate" />
+          }
+          @if (registry()?.revisionStatus === RevisionReviewStates.RevisionInProgress) {
+            <p-button class="w-full" styleClass="w-full" [label]="'common.buttons.continueUpdate' | translate" />
+          }
+        }
+      </div>
+    </p-accordion-content>
+  </p-accordion-panel>
+</p-accordion>

src/app/features/registry/components/registry-revisions/registry-revisions.component.scss

@@ -0,0 +1,18 @@
+@use "/assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+.accordion-border {
+  border: 1px solid var.$grey-2;
+  border-radius: mix.rem(12px);
+  height: max-content !important;
+}
+
+.no-padding {
+  --p-accordion-header-padding: 0;
+}
+
+.current-revision {
+  --p-button-info-background: var(--bg-blue-3);
+  --p-button-info-hover-background: var(--bg-blue-2);
+  --p-button-info-hover-border-color: transparent;
+}