Kamu UI 468 readme does not refresh when navigating between datasets (#…

…469)

* replaced onInit with onChanges lifecycle

* changed CHANGELOG.md

* reset edit mode

---------

Co-authored-by: Dmitriy Borzenko <[email protected]>

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+### Fixed
+- Readme section refresh when navigating between datasets
+
 ## [0.28.3] - 2024-10-30
 ### Fixed
 - Query explainer successfully validates commitment and shows data

src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.spec.ts

@@ -5,7 +5,7 @@ import { Apollo, ApolloModule } from "apollo-angular";
 import { ApolloTestingModule } from "apollo-angular/testing";
 import { SharedTestModule } from "src/app/common/shared-test.module";
 import { DatasetCommitService } from "../../services/dataset-commit.service";
-import { SecurityContext } from "@angular/core";
+import { SecurityContext, SimpleChanges } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { FormsModule } from "@angular/forms";
@@ -100,4 +100,18 @@ describe("ReadmeSectionComponent", () => {
         expect(updateReadmeSpy).toHaveBeenCalledTimes(1);
         flush();
     }));
+
+    it("should check readme updated in the onChanges hook", () => {
+        const modifiedReadmeContent = mockReadmeContent + "modified";
+        const readmeSimpleChanges: SimpleChanges = {
+            currentReadme: {
+                previousValue: mockReadmeContent,
+                currentValue: modifiedReadmeContent,
+                firstChange: false,
+                isFirstChange: () => false,
+            },
+        };
+        component.ngOnChanges(readmeSimpleChanges);
+        expect(component.readmeState).toEqual(modifiedReadmeContent);
+    });
 });

src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit, Output } from "@angular/core";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    inject,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+} from "@angular/core";
 import { DatasetBasicsFragment } from "src/app/api/kamu.graphql.interface";
 import { MaybeNull } from "src/app/common/app.types";
 import { BaseComponent } from "src/app/common/base.component";
@@ -13,7 +22,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
     styleUrls: ["./readme-section.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ReadmeSectionComponent extends BaseComponent implements OnInit {
+export class ReadmeSectionComponent extends BaseComponent implements OnChanges {
     @Input({ required: true }) public datasetBasics: DatasetBasicsFragment;
     @Input({ required: true }) public currentReadme?: MaybeNull<string>;
     @Input({ required: true }) public editingInProgress = false;
@@ -31,9 +40,10 @@ export class ReadmeSectionComponent extends BaseComponent implements OnInit {
     private datasetCommitService = inject(DatasetCommitService);
     private loggedUserService = inject(LoggedUserService);
 
-    public ngOnInit(): void {
-        if (this.currentReadme) {
-            this.readmeState = this.currentReadme;
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.currentReadme && changes.currentReadme.currentValue !== changes.currentReadme.previousValue) {
+            this.readmeState = changes.currentReadme.currentValue as string;
+            this.editingInProgress = false;
         }
     }