Kamu UI 455 improved sql support in readme markdown (#472)

* Added 'Run' button for markdown component

* Fixed unit tests

* changed CHANGELOG.md

* modified script

* Added unit tests

---------

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

Author: dmitriy-borzenko

CHANGELOG.md

@@ -8,6 +8,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 ### Added
 - Added a new page `Query` that allows you to make sql queries without being tied to a dataset
+- Impovements for readme section
+  - Add syntax highlight support for SQL in markdown
+  - Add copy to clipboard button for SQL blocks
+  - Add run button that opens "Data" tab in new window and executes the selected query
 
 
 ## [0.29.0] - 2024-11-12

angular.json

@@ -60,13 +60,14 @@
             ],
             "scripts": [
               "node_modules/prismjs/prism.js",
-              "node_modules/prismjs/components/prism-csharp.min.js",
+              "node_modules/prismjs/components/prism-sql.min.js",
               "node_modules/prismjs/components/prism-css.min.js",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
               "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js",
               "node_modules/prismjs/plugins/command-line/prism-command-line.js",
               "node_modules/emoji-toolkit/lib/js/joypixels.min.js",
-              "node_modules/katex/dist/katex.min.js"
+              "node_modules/katex/dist/katex.min.js",
+              "node_modules/clipboard/dist/clipboard.min.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -143,13 +144,13 @@
             ],
             "scripts": [
               "node_modules/prismjs/prism.js",
-              "node_modules/prismjs/components/prism-csharp.min.js",
               "node_modules/prismjs/components/prism-css.min.js",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
               "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js",
               "node_modules/prismjs/plugins/command-line/prism-command-line.js",
               "node_modules/emoji-toolkit/lib/js/joypixels.min.js",
-              "node_modules/katex/dist/katex.min.js"
+              "node_modules/katex/dist/katex.min.js",
+              "node_modules/clipboard/dist/clipboard.min.js"
             ]
           }
         }

package-lock.json

@@ -52,6 +52,7 @@
     "autoprefixer": "^10.4.5",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
+    "clipboard": "^2.0.11",
     "cron-parser": "^4.9.0",
     "d3-scale": "^4.0.2",
     "graphql": "^16.8.1",

package.json

@@ -56,7 +56,7 @@ <h2 class="box-title align-items-center m-0">
             <textarea class="variable-textarea" [(ngModel)]="readmeState"></textarea>
         </ng-template>
         <ng-template [ngIf]="!isEditView || !editingInProgress">
-            <markdown class="variable-binding" [data]="readmeState" />
+            <markdown clipboard class="variable-binding" [data]="readmeState" />
         </ng-template>
     </div>
 </div>

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

@@ -1,3 +1,4 @@
+import { NavigationService } from "src/app/services/navigation.service";
 import { ComponentFixture, TestBed, fakeAsync, flush, tick } from "@angular/core/testing";
 import { ReadmeSectionComponent } from "./readme-section.component";
 import { mockDatasetBasicsDerivedFragment } from "src/app/search/mock.data";
@@ -9,19 +10,21 @@ import { SecurityContext, SimpleChanges } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { FormsModule } from "@angular/forms";
-import { AngularSvgIconModule } from "angular-svg-icon";
+import { AngularSvgIconModule, SvgIconRegistryService } from "angular-svg-icon";
 import { MarkdownModule } from "ngx-markdown";
-import { emitClickOnElementByDataTestId } from "src/app/common/base-test.helpers.spec";
+import { emitClickOnElementByDataTestId, findNativeElement } from "src/app/common/base-test.helpers.spec";
 import { EditMode } from "./readme-section.types";
 import { of } from "rxjs";
 import { LoggedUserService } from "src/app/auth/logged-user.service";
 import { mockAccountDetails } from "src/app/api/mock/auth.mock";
+import { DatasetViewTypeEnum } from "src/app/dataset-view/dataset-view.interface";
 
 describe("ReadmeSectionComponent", () => {
     let component: ReadmeSectionComponent;
     let fixture: ComponentFixture<ReadmeSectionComponent>;
     let datasetCommitService: DatasetCommitService;
     let loggedUserService: LoggedUserService;
+    let navigationService: NavigationService;
 
     const mockReadmeContent = "Mock README.md content";
 
@@ -43,29 +46,34 @@ describe("ReadmeSectionComponent", () => {
             ],
         }).compileComponents();
 
+        const iconRegistryService: SvgIconRegistryService = TestBed.inject(SvgIconRegistryService);
+        iconRegistryService.addSvg("code-square", "");
+        iconRegistryService.addSvg("pencil", "");
+
         fixture = TestBed.createComponent(ReadmeSectionComponent);
         component = fixture.componentInstance;
         datasetCommitService = TestBed.inject(DatasetCommitService);
         loggedUserService = TestBed.inject(LoggedUserService);
+        navigationService = TestBed.inject(NavigationService);
         component.datasetBasics = mockDatasetBasicsDerivedFragment;
         component.currentReadme = mockReadmeContent;
         spyOnProperty(loggedUserService, "currentlyLoggedInUser", "get").and.returnValue(mockAccountDetails);
-
-        fixture.detectChanges();
     });
 
     it("should create", () => {
         expect(component).toBeTruthy();
     });
 
     it("should check show select tab", () => {
+        fixture.detectChanges();
         expect(component.editingInProgress).toEqual(false);
         emitClickOnElementByDataTestId(fixture, "show-edit-tabs");
         fixture.detectChanges();
         expect(component.editingInProgress).toEqual(true);
     });
 
     it("should check switch edit/preview mode", () => {
+        fixture.detectChanges();
         emitClickOnElementByDataTestId(fixture, "show-edit-tabs");
         fixture.detectChanges();
         expect(component.viewMode).toEqual(EditMode.Edit);
@@ -76,13 +84,15 @@ describe("ReadmeSectionComponent", () => {
     });
 
     it("should check push button 'cancel changes' when currentReadme exist", () => {
+        fixture.detectChanges();
         emitClickOnElementByDataTestId(fixture, "show-edit-tabs");
         fixture.detectChanges();
         emitClickOnElementByDataTestId(fixture, "cancel-changes");
         expect(component.readmeState).toEqual(mockReadmeContent);
     });
 
     it("should check push button 'cancel changes' when currentReadme is not exist", () => {
+        fixture.detectChanges();
         component.currentReadme = null;
         emitClickOnElementByDataTestId(fixture, "show-edit-tabs");
         fixture.detectChanges();
@@ -91,6 +101,7 @@ describe("ReadmeSectionComponent", () => {
     });
 
     it("should check save changes", fakeAsync(() => {
+        fixture.detectChanges();
         component.readmeState = mockReadmeContent + "modified";
         const updateReadmeSpy = spyOn(datasetCommitService, "updateReadme").and.returnValue(of());
         emitClickOnElementByDataTestId(fixture, "show-edit-tabs");
@@ -114,4 +125,30 @@ describe("ReadmeSectionComponent", () => {
         component.ngOnChanges(readmeSimpleChanges);
         expect(component.readmeState).toEqual(modifiedReadmeContent);
     });
+
+    it("should check Run and Copy buttons exist", () => {
+        component.readmeState = "```sql" + "\nselect * from 'account.tokens.portfolio.market-value'" + "\n```";
+        component.viewMode = EditMode.Preview;
+        fixture.detectChanges();
+        const copyButtonElement = findNativeElement(fixture, `.markdown-clipboard-button`);
+        expect(copyButtonElement).toBeDefined();
+
+        const runButtonElement = findNativeElement(fixture, `.markdown-run-button`);
+        expect(runButtonElement).toBeDefined();
+    });
+
+    it("should check Run button navigate to Data tab", () => {
+        component.readmeState = "```sql" + "\nselect * from 'account.tokens.portfolio.market-value'" + "\n```";
+        component.viewMode = EditMode.Preview;
+
+        const navigateToDatasetViewSpy = spyOn(navigationService, "navigateToDatasetView");
+        fixture.detectChanges();
+
+        const runButtonElement = findNativeElement(fixture, `.markdown-run-button`);
+        runButtonElement.click();
+
+        expect(navigateToDatasetViewSpy).toHaveBeenCalledWith(
+            jasmine.objectContaining({ tab: DatasetViewTypeEnum.Data }),
+        );
+    });
 });

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

@@ -1,4 +1,6 @@
+import { NavigationService } from "./../../../../../services/navigation.service";
 import {
+    AfterViewChecked,
     ChangeDetectionStrategy,
     Component,
     EventEmitter,
@@ -15,14 +17,15 @@ import { EditMode } from "./readme-section.types";
 import { DatasetCommitService } from "../../services/dataset-commit.service";
 import { LoggedUserService } from "src/app/auth/logged-user.service";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { DatasetViewTypeEnum } from "src/app/dataset-view/dataset-view.interface";
 
 @Component({
     selector: "app-readme-section",
     templateUrl: "./readme-section.component.html",
     styleUrls: ["./readme-section.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ReadmeSectionComponent extends BaseComponent implements OnChanges {
+export class ReadmeSectionComponent extends BaseComponent implements OnChanges, AfterViewChecked {
     @Input({ required: true }) public datasetBasics: DatasetBasicsFragment;
     @Input({ required: true }) public currentReadme?: MaybeNull<string>;
     @Input({ required: true }) public editingInProgress = false;
@@ -37,6 +40,7 @@ export class ReadmeSectionComponent extends BaseComponent implements OnChanges {
         return this.currentReadme !== this.readmeState;
     }
 
+    private navigationService = inject(NavigationService);
     private datasetCommitService = inject(DatasetCommitService);
     private loggedUserService = inject(LoggedUserService);
 
@@ -47,6 +51,10 @@ export class ReadmeSectionComponent extends BaseComponent implements OnChanges {
         }
     }
 
+    ngAfterViewChecked(): void {
+        this.addDynamicRunButton();
+    }
+
     public get isEditView(): boolean {
         return this.viewMode === EditMode.Edit;
     }
@@ -88,4 +96,37 @@ export class ReadmeSectionComponent extends BaseComponent implements OnChanges {
         this.editingInProgress = false;
         this.editViewShowEmitter.emit(this.editingInProgress);
     }
+
+    private addDynamicRunButton(): void {
+        if (this.readmeState) {
+            // Find all sql queries between ```sql and ```
+            const sqlQueries = this.readmeState.match(/(?<=```sql\s+).*?(?=\s+```)/gs);
+            const containerRunButtonElement: HTMLCollectionOf<Element> =
+                document.getElementsByClassName("container-run-button");
+
+            if (sqlQueries?.length && !containerRunButtonElement.length) {
+                const preElements: NodeListOf<Element> = document.querySelectorAll("pre.language-sql");
+                preElements.forEach((preElement: Element, index: number) => {
+                    const divElement: HTMLDivElement = document.createElement("div");
+                    divElement.classList.add("container-run-button");
+                    divElement.style.position = "absolute";
+                    divElement.style.top = "7px";
+                    divElement.style.right = "65px";
+                    const buttonElement: HTMLButtonElement = document.createElement("button");
+                    buttonElement.innerHTML = "Run";
+                    buttonElement.classList.add("markdown-run-button");
+                    buttonElement.addEventListener("click", () => {
+                        this.navigationService.navigateToDatasetView({
+                            accountName: this.datasetBasics.owner.accountName,
+                            datasetName: this.datasetBasics.name,
+                            tab: DatasetViewTypeEnum.Data,
+                            sqlQuery: sqlQueries[index],
+                        });
+                    });
+                    divElement.appendChild(buttonElement);
+                    preElement.after(divElement);
+                });
+            }
+        }
+    }
 }

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

@@ -48,6 +48,7 @@ export class DatasetComponent extends BaseDatasetDataComponent implements OnInit
             .subscribe(() => {
                 this.initDatasetViewByType(this.getDatasetInfoFromUrl(), this.getCurrentPageFromUrl());
                 this.requestMainDataIfChanged();
+                this.cdr.detectChanges();
             });
         this.datasetService.datasetChanges
             .pipe(takeUntilDestroyed(this.destroyRef))

src/app/dataset-view/dataset.component.ts

@@ -5,6 +5,7 @@ export interface DatasetNavigationParams {
     page?: number;
     section?: string;
     state?: object;
+    sqlQuery?: string;
 }
 export interface DatasetInfo {
     accountName: string;

src/app/interface/navigation.interface.ts

@@ -167,7 +167,7 @@ describe("NavigationService", () => {
         const routerSpy = spyOn(router, "navigate").and.resolveTo(true);
         service.navigateToDatasetView(mockParams);
         expect(routerSpy).toHaveBeenCalledWith([mockParams.accountName, mockParams.datasetName], {
-            queryParams: { tab: mockParams.tab, page: mockParams.page, section: undefined },
+            queryParams: { tab: mockParams.tab, page: mockParams.page, section: undefined, sqlQuery: undefined },
             state: undefined,
         });
     });

src/app/services/navigation.service.spec.ts

@@ -90,7 +90,7 @@ export class NavigationService {
                 queryParams:
                     params.page === 1
                         ? { tab: params.tab }
-                        : { tab: params.tab, section: params.section, page: params.page },
+                        : { tab: params.tab, section: params.section, page: params.page, sqlQuery: params.sqlQuery },
                 state: params.state,
             }),
         );