fix(wiki-list): Make rename wiki work

Author: bodintsov

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

@@ -36,6 +36,7 @@
     [canEdit]="hasWriteAccess()"
     (createWiki)="onCreateWiki()"
     (deleteWiki)="onDeleteWiki()"
+    (renameWiki)="onRenameWiki()"
   ></osf-wiki-list>
   @if (wikiModes().view) {
     <osf-view-section

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

@@ -151,6 +151,10 @@ export class WikiComponent {
     this.navigateToWiki(this.currentWikiId());
   }
 
+  onRenameWiki() {
+    this.navigateToWiki(this.currentWikiId());
+  }
+
   onDeleteWiki() {
     this.actions.deleteWiki(this.currentWikiId()).pipe(tap(() => this.navigateToWiki(this.currentWikiId())));
   }

src/app/shared/components/wiki/rename-wiki-dialog/rename-wiki-dialog.component.html

@@ -0,0 +1,18 @@
+<form [formGroup]="renameWikiForm" (ngSubmit)="submitForm()">
+  <osf-text-input
+    [control]="renameWikiForm.controls['name']"
+    [placeholder]="'project.wiki.addNewWikiPlaceholder'"
+    [maxLength]="inputLimits.fullName.maxLength"
+  >
+  </osf-text-input>
+
+  <div class="flex justify-content-end gap-2 mt-4">
+    <p-button [label]="'common.buttons.cancel' | translate" severity="info" (onClick)="dialogRef.close()" />
+    <p-button
+      [label]="'common.buttons.rename' | translate"
+      type="submit"
+      [loading]="isSubmitting()"
+      [disabled]="renameWikiForm.invalid"
+    />
+  </div>
+</form>

src/app/shared/components/wiki/rename-wiki-dialog/rename-wiki-dialog.component.scss

@@ -0,0 +1,56 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { InputLimits } from '@osf/shared/constants/input-limits.const';
+import { CustomValidators } from '@osf/shared/helpers/custom-form-validators.helper';
+import { ToastService } from '@osf/shared/services/toast.service';
+import { RenameWiki, WikiSelectors } from '@osf/shared/stores/wiki';
+
+import { TextInputComponent } from '../../text-input/text-input.component';
+
+@Component({
+  selector: 'osf-rename-wiki-dialog-component',
+  imports: [Button, ReactiveFormsModule, TranslatePipe, TextInputComponent],
+  templateUrl: './rename-wiki-dialog.component.html',
+  styleUrl: './rename-wiki-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RenameWikiDialogComponent {
+  readonly dialogRef = inject(DynamicDialogRef);
+  readonly config = inject(DynamicDialogConfig);
+  private toastService = inject(ToastService);
+
+  actions = createDispatchMap({ renameWiki: RenameWiki });
+  isSubmitting = select(WikiSelectors.getWikiSubmitting);
+  inputLimits = InputLimits;
+
+  renameWikiForm = new FormGroup({
+    name: new FormControl('', {
+      nonNullable: true,
+      validators: [CustomValidators.requiredTrimmed(), Validators.maxLength(InputLimits.fullName.maxLength)],
+    }),
+  });
+
+  submitForm(): void {
+    if (this.renameWikiForm.valid) {
+      this.actions.renameWiki(this.config.data.wikiId, this.renameWikiForm.value.name ?? '').subscribe({
+        next: (res) => {
+          this.toastService.showSuccess('project.wiki.renameWikiSuccess');
+          this.dialogRef.close(res);
+        },
+        error: (err) => {
+          if (err?.status === 409) {
+            this.toastService.showError('project.wiki.renameWikiConflict');
+          }
+        },
+      });
+    }
+  }
+}

src/app/shared/components/wiki/rename-wiki-dialog/rename-wiki-dialog.component.ts

@@ -62,9 +62,18 @@ <h4 class="ml-2">{{ item.label | translate }}</h4>
                     <span class="ml-2">{{ item.label | translate }}</span>
                   }
                   @default {
-                    <div>
-                      <i class="far fa-file"></i>
-                      <span class="ml-2">{{ item.label }}</span>
+                    <div class="flex align-items-center justify-content-between w-full">
+                      <div class="flex align-items-center">
+                        <i class="far fa-file"></i>
+                        <span class="ml-2">{{ item.label }}</span>
+                      </div>
+
+                      <p-button
+                        icon="fas fa-pencil"
+                        styleClass="p-button-rounded p-button-text"
+                        (onClick)="openRenameWikiDialog(item.id); $event.stopPropagation()"
+                      >
+                      </p-button>
                     </div>
                   }
                 }

src/app/shared/components/wiki/wiki-list/wiki-list.component.html

@@ -7,9 +7,4 @@
     min-width: 300px;
     width: 300px;
   }
-
-  .active {
-    background-color: var(--pr-blue-1);
-    color: var(--white);
-  }
 }

src/app/shared/components/wiki/wiki-list/wiki-list.component.scss

@@ -14,6 +14,7 @@ import { WikiItemType } from '@osf/shared/models/wiki/wiki-type.model';
 import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 import { ComponentWiki } from '@osf/shared/stores/wiki';
+import { RenameWikiDialogComponent } from '@shared/components/wiki/rename-wiki-dialog/rename-wiki-dialog.component';
 
 import { AddWikiDialogComponent } from '../add-wiki-dialog/add-wiki-dialog.component';
 
@@ -35,6 +36,7 @@ export class WikiListComponent {
 
   readonly deleteWiki = output<void>();
   readonly createWiki = output<void>();
+  readonly renameWiki = output<void>();
 
   private readonly customDialogService = inject(CustomDialogService);
   private readonly customConfirmationService = inject(CustomConfirmationService);
@@ -97,6 +99,18 @@ export class WikiListComponent {
       .onClose.subscribe(() => this.createWiki.emit());
   }
 
+  openRenameWikiDialog(wikiId: string) {
+    this.customDialogService
+      .open(RenameWikiDialogComponent, {
+        header: 'project.wiki.renameWiki',
+        width: '448px',
+        data: {
+          wikiId: wikiId,
+        },
+      })
+      .onClose.subscribe(() => this.renameWiki.emit());
+  }
+
   openDeleteWikiDialog(): void {
     this.customConfirmationService.confirmDelete({
       headerKey: 'project.wiki.deleteWiki',

src/app/shared/components/wiki/wiki-list/wiki-list.component.ts

@@ -4,6 +4,7 @@ import {
   HomeWikiGetResponse,
   WikiGetResponse,
   WikiModel,
+  WikiRenameResponse,
   WikiVersion,
   WikiVersionJsonApi,
 } from '@osf/shared/models/wiki/wiki.model';
@@ -18,6 +19,14 @@ export class WikiMapper {
     };
   }
 
+  static fromRenameWikiResponse(data: WikiRenameResponse): WikiModel {
+    return {
+      id: data.id,
+      name: data.attributes.name,
+      kind: data.attributes.kind,
+    };
+  }
+
   static fromGetHomeWikiResponse(response: HomeWikiGetResponse): HomeWiki {
     return {
       id: response.id,

src/app/shared/mappers/wiki/wiki.mapper.ts

@@ -58,6 +58,15 @@ export interface WikiGetResponse {
   };
 }
 
+export interface WikiRenameResponse {
+  id: string;
+  type: string;
+  attributes: {
+    name: string;
+    kind: string;
+  };
+}
+
 export interface ComponentsWikiGetResponse {
   id: string;
   type: string;