Feat/280 registry wiki

src/app/core/constants/ngxs-states.constant.ts

@@ -4,11 +4,10 @@ import { MeetingsState } from '@osf/features/meetings/store';
 import { ProjectMetadataState } from '@osf/features/project/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
-import { WikiState } from '@osf/features/project/wiki/store/wiki.state';
 import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
 import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
-import { AddonsState, InstitutionsState } from '@shared/stores';
+import { AddonsState, InstitutionsState, WikiState } from '@shared/stores';
 import { LicensesState } from '@shared/stores/licenses';
 import { RegionsState } from '@shared/stores/regions';
 

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

@@ -6,7 +6,7 @@ import { Skeleton } from 'primeng/skeleton';
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { WikiSelectors } from '@osf/features/project/wiki/store';
+import { WikiSelectors } from '@osf/shared/stores';
 import { MarkdownComponent, TruncatedTextComponent } from '@shared/components';
 
 @Component({

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

@@ -13,9 +13,7 @@ import { ClearCollections } from '@osf/features/collections/store/collections';
 import { LoadingSpinnerComponent, ResourceMetadataComponent, SubHeaderComponent } from '@shared/components';
 import { ResourceType } from '@shared/enums';
 import { MapProjectOverview } from '@shared/mappers/resource-overview.mappers';
-import { GetAllNodeLinks, GetBookmarksCollectionId, GetLinkedResources } from '@shared/stores';
-
-import { ClearWiki, GetHomeWiki } from '../wiki/store';
+import { ClearWiki, GetAllNodeLinks, GetBookmarksCollectionId, GetHomeWiki, GetLinkedResources } from '@shared/stores';
 
 import {
   LinkedResourcesComponent,
@@ -97,7 +95,7 @@ export class ProjectOverviewComponent implements OnInit {
     if (projectId) {
       this.actions.getProject(projectId);
       this.actions.getBookmarksId();
-      this.actions.getHomeWiki(projectId);
+      this.actions.getHomeWiki(ResourceType.Project, projectId);
       this.actions.getComponents(projectId);
       this.actions.getNodeLinks(projectId);
       this.actions.getLinkedProjects(projectId);

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

@@ -21,7 +21,7 @@
 <section class="flex flex-column lg:flex-row bg-white flex-1 h-full p-5 gap-4 w-full overflow-auto wiki-page">
   <osf-wiki-list
     [list]="wikiList()"
-    [projectId]="projectId()"
+    [resourceId]="projectId()"
     [isLoading]="isWikiListLoading()"
     [componentsList]="componentsWikiList()"
     [currentWikiId]="currentWikiId()"

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

@@ -11,15 +11,16 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { SubHeaderComponent } from '@osf/shared/components';
+import {
+  CompareSectionComponent,
+  EditSectionComponent,
+  SubHeaderComponent,
+  ViewSectionComponent,
+  WikiListComponent,
+} from '@osf/shared/components';
+import { ResourceType } from '@osf/shared/enums';
+import { WikiModes } from '@osf/shared/models';
 import { ToastService } from '@osf/shared/services';
-
-import { CompareSectionComponent } from './components/compare-section/compare-section.component';
-import { EditSectionComponent } from './components/edit-section/edit-section.component';
-import { ViewSectionComponent } from './components/view-section/view-section.component';
-import { WikiListComponent } from './components/wiki-list/wiki-list.component';
-import { WikiSelectors } from './store/wiki.selectors';
-import { WikiModes } from './models';
 import {
   CreateWiki,
   CreateWikiVersion,
@@ -34,7 +35,8 @@ import {
   SetCurrentWiki,
   ToggleMode,
   UpdateWikiPreviewContent,
-} from './store';
+  WikiSelectors,
+} from '@osf/shared/stores';
 
 const HomeWikiName = 'Home';
 
@@ -94,21 +96,21 @@ export class WikiComponent {
 
   constructor() {
     this.actions
-      .getWikiList(this.projectId())
+      .getWikiList(ResourceType.Project, this.projectId())
       .pipe(
         takeUntilDestroyed(),
         tap(() => {
           if (!this.wikiIdFromQueryParams) {
             this.navigateToWiki(this.wikiList()?.[0]?.id || '');
           }
           if (!this.wikiList()?.length) {
-            this.actions.createWiki(this.projectId(), HomeWikiName);
+            this.actions.createWiki(ResourceType.Project, this.projectId(), HomeWikiName);
           }
         })
       )
       .subscribe();
 
-    this.actions.getComponentsWikiList(this.projectId());
+    this.actions.getComponentsWikiList(ResourceType.Project, this.projectId());
 
     this.route.queryParams
       .pipe(

src/app/features/registry/pages/registry-wiki/registry-wiki.component.html

@@ -0,0 +1,44 @@
+<osf-sub-header [title]="'navigation.project.wiki' | translate" [tooltip]="'project.wiki.tooltip' | translate">
+  <p-buttongroup class="ml-auto">
+    <p-button
+      [label]="'project.wiki.view' | translate"
+      [variant]="wikiModes().view ? undefined : 'outlined'"
+      (onClick)="toggleMode(WikiModes.View)"
+    />
+    <p-button
+      [label]="'project.wiki.compare' | translate"
+      [variant]="wikiModes().compare ? undefined : 'outlined'"
+      (onClick)="toggleMode(WikiModes.Compare)"
+    />
+  </p-buttongroup>
+</osf-sub-header>
+
+<section class="flex flex-column lg:flex-row bg-white flex-1 h-full p-5 gap-4 w-full overflow-auto wiki-page">
+  <osf-wiki-list
+    [viewOnly]="true"
+    [list]="wikiList()"
+    [resourceId]="resourceId"
+    [isLoading]="isWikiListLoading()"
+    [componentsList]="[]"
+    [currentWikiId]="currentWikiId()"
+  ></osf-wiki-list>
+  @if (wikiModes().view) {
+    <osf-view-section
+      [viewOnly]="true"
+      [versions]="wikiVersions()"
+      [previewContent]="previewContent()"
+      [versionContent]="versionContent()"
+      [isLoading]="isWikiVersionLoading()"
+      (selectVersion)="onSelectVersion($event)"
+    ></osf-view-section>
+  }
+  @if (wikiModes().compare) {
+    <osf-compare-section
+      [versions]="wikiVersions()"
+      [previewContent]="previewContent()"
+      [versionContent]="compareVersionContent()"
+      [isLoading]="isWikiVersionLoading()"
+      (selectVersion)="onSelectCompareVersion($event)"
+    ></osf-compare-section>
+  }
+</section>

src/app/features/registry/pages/registry-wiki/registry-wiki.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistryWikiComponent } from './registry-wiki.component';
+
+describe('RegistryWikiComponent', () => {
+  let component: RegistryWikiComponent;
+  let fixture: ComponentFixture<RegistryWikiComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistryWikiComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistryWikiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/registry/pages/registry-wiki/registry-wiki.component.ts

@@ -0,0 +1,122 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { ButtonGroup } from 'primeng/buttongroup';
+
+import { filter, map, mergeMap, tap } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import {
+  CompareSectionComponent,
+  SubHeaderComponent,
+  ViewSectionComponent,
+  WikiListComponent,
+} from '@osf/shared/components';
+import { ResourceType } from '@osf/shared/enums';
+import { WikiModes } from '@osf/shared/models';
+import {
+  GetCompareVersionContent,
+  GetWikiContent,
+  GetWikiList,
+  GetWikiVersionContent,
+  GetWikiVersions,
+  SetCurrentWiki,
+  ToggleMode,
+  WikiSelectors,
+} from '@osf/shared/stores';
+
+@Component({
+  selector: 'osf-registry-wiki',
+  imports: [
+    SubHeaderComponent,
+    Button,
+    ButtonGroup,
+    TranslatePipe,
+    WikiListComponent,
+    ViewSectionComponent,
+    CompareSectionComponent,
+  ],
+  templateUrl: './registry-wiki.component.html',
+  styleUrl: './registry-wiki.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistryWikiComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+
+  WikiModes = WikiModes;
+  protected wikiModes = select(WikiSelectors.getWikiModes);
+  protected previewContent = select(WikiSelectors.getPreviewContent);
+  protected versionContent = select(WikiSelectors.getWikiVersionContent);
+  protected compareVersionContent = select(WikiSelectors.getCompareVersionContent);
+  protected isWikiListLoading = select(WikiSelectors.getWikiListLoading || WikiSelectors.getComponentsWikiListLoading);
+  protected wikiList = select(WikiSelectors.getWikiList);
+  protected currentWikiId = select(WikiSelectors.getCurrentWikiId);
+  protected wikiVersions = select(WikiSelectors.getWikiVersions);
+  protected isWikiVersionLoading = select(WikiSelectors.getWikiVersionsLoading);
+
+  readonly resourceId = this.route.parent?.snapshot.params['id'];
+
+  protected actions = createDispatchMap({
+    toggleMode: ToggleMode,
+    getWikiContent: GetWikiContent,
+    getWikiList: GetWikiList,
+    setCurrentWiki: SetCurrentWiki,
+    getWikiVersions: GetWikiVersions,
+    getWikiVersionContent: GetWikiVersionContent,
+    getCompareVersionContent: GetCompareVersionContent,
+  });
+
+  protected wikiIdFromQueryParams = this.route.snapshot.queryParams['wiki'];
+
+  constructor() {
+    this.actions
+      .getWikiList(ResourceType.Registration, this.resourceId)
+      .pipe(
+        takeUntilDestroyed(),
+        tap(() => {
+          if (!this.wikiIdFromQueryParams) {
+            this.navigateToWiki(this.wikiList()?.[0]?.id || '');
+          }
+        })
+      )
+      .subscribe();
+
+    this.route.queryParams
+      .pipe(
+        takeUntilDestroyed(),
+        map((params) => params['wiki']),
+        filter((wikiId) => wikiId),
+        tap((wikiId) => {
+          this.actions.setCurrentWiki(wikiId);
+        }),
+        mergeMap((wikiId) => this.actions.getWikiVersions(wikiId))
+      )
+      .subscribe();
+  }
+
+  toggleMode(mode: WikiModes) {
+    this.actions.toggleMode(mode);
+  }
+
+  onSelectVersion(versionId: string) {
+    this.actions.getWikiVersionContent(this.currentWikiId(), versionId);
+  }
+
+  onSelectCompareVersion(versionId: string) {
+    this.actions.getCompareVersionContent(this.currentWikiId(), versionId);
+  }
+
+  private navigateToWiki(wiki: string) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { wiki },
+      queryParamsHandling: 'merge',
+    });
+  }
+}

src/app/features/registry/registry.routes.ts

@@ -86,6 +86,11 @@ export const registryRoutes: Routes = [
           ),
         providers: [provideStates([RegistryResourcesState])],
       },
+      {
+        path: 'wiki',
+        loadComponent: () =>
+          import('./pages/registry-wiki/registry-wiki.component').then((c) => c.RegistryWikiComponent),
+      },
     ],
   },
 ];

src/app/shared/components/index.ts

@@ -40,3 +40,4 @@ export { TextInputComponent } from './text-input/text-input.component';
 export { ToastComponent } from './toast/toast.component';
 export { TruncatedTextComponent } from './truncated-text/truncated-text.component';
 export { ViewOnlyTableComponent } from './view-only-table/view-only-table.component';
+export * from './wiki';

src/app/features/project/wiki/components/add-wiki-dialog/add-wiki-dialog.component.ts → src/app/shared/components/wiki/add-wiki-dialog/add-wiki-dialog.component.ts

@@ -10,11 +10,11 @@ import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angula
 
 import { TextInputComponent } from '@osf/shared/components';
 import { InputLimits } from '@osf/shared/constants';
+import { ResourceType } from '@osf/shared/enums';
 import { ToastService } from '@osf/shared/services';
+import { CreateWiki, WikiSelectors } from '@osf/shared/stores';
 import { CustomValidators } from '@osf/shared/utils';
 
-import { CreateWiki, WikiSelectors } from '../../store';
-
 @Component({
   selector: 'osf-add-wiki-dialog-component',
   imports: [Button, ReactiveFormsModule, TranslatePipe, TextInputComponent],
@@ -41,12 +41,14 @@ export class AddWikiDialogComponent {
 
   submitForm(): void {
     if (this.addWikiForm.valid) {
-      this.actions.createWiki(this.config.data.projectId, this.addWikiForm.value.name ?? '').subscribe({
-        next: (res) => {
-          this.toastService.showSuccess('project.wiki.addWikiSuccess');
-          this.dialogRef.close(res);
-        },
-      });
+      this.actions
+        .createWiki(ResourceType.Project, this.config.data.resourceId, this.addWikiForm.value.name ?? '')
+        .subscribe({
+          next: (res) => {
+            this.toastService.showSuccess('project.wiki.addWikiSuccess');
+            this.dialogRef.close(res);
+          },
+        });
     }
   }
 }

src/app/features/project/wiki/components/compare-section/compare-section.component.ts → src/app/shared/components/wiki/compare-section/compare-section.component.ts

@@ -7,7 +7,7 @@ import { Skeleton } from 'primeng/skeleton';
 import { ChangeDetectionStrategy, Component, computed, effect, input, output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { WikiVersion } from '../../models';
+import { WikiVersion } from '@osf/shared/models';
 
 import * as Diff from 'diff';
 

src/app/shared/components/wiki/index.ts

@@ -0,0 +1,6 @@
+export * from './add-wiki-dialog/add-wiki-dialog.component';
+export * from './compare-section/compare-section.component';
+export * from './edit-section/edit-section.component';
+export * from './view-section/view-section.component';
+export * from './wiki-list/wiki-list.component';
+export * from './wiki-syntax-help-dialog/wiki-syntax-help-dialog.component';