Kamu UI 122 disabled run query button after error

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Switched to different Angular wrapper for Monaco editor (ngx-monaco-editor-v2)
 - Selected library updates/downgrades to align with Angular 14.3 and Node.JS 16.x
 - GraphQL code generator tuned to produce string type by default for scalars
+- Fixed bug with disabled state for "Run" button after error.
 
 ## [0.8.0] - 2023-08-04
 ### Added

src/app/dataset-view/additional-components/data-component/data-component.html

@@ -91,7 +91,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
                     data-test-id="runSqlQueryButton"
                     name="run sql button"
                     (click)="onRunSQLRequest()"
-                    [disabled]="!currentData.length"
+                    [disabled]="!currentData.length && !sqlErrorMarker"
                     class="sql-run-button rounded-left-2 border-right-0 btnGroup-item btn d-flex justify-content-center align-items-center"
                 >
                     <span>Run</span><mat-icon>play_arrow</mat-icon>
@@ -151,7 +151,7 @@ <h2 class="box-title align-items-center py-3 m-0">Result:</h2>
                 [dataRows]="currentData || []"
             ></app-dynamic-table>
         </ng-container>
-        <ng-container *ngIf="!sqlErrorMarker || !currentSchema || !currentData.length">
+        <ng-container *ngIf="!sqlErrorMarker && !currentSchema">
             <mat-divider></mat-divider>
             <h3 class="box-title text-center pt-4 author" *ngIf="!currentData.length">
                 Need

src/app/dataset-view/additional-components/data-component/data-component.spec.ts

@@ -4,7 +4,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { MatIconModule } from "@angular/material/icon";
 import { MatMenuModule } from "@angular/material/menu";
 import { DataComponent } from "./data-component";
-import { emitClickOnElementByDataTestId } from "src/app/common/base-test.helpers.spec";
+import { emitClickOnElementByDataTestId, findElementByDataTestId } from "src/app/common/base-test.helpers.spec";
 import { AppDatasetSubscriptionsService } from "../../dataset.subscriptions.service";
 import { mockDataUpdate, mockSqlErrorUpdate } from "../data-tabs.mock";
 import { first } from "rxjs/operators";
@@ -75,11 +75,12 @@ describe("DataComponent", () => {
     });
 
     it("should check invalid SQL result update", () => {
-        fixture.detectChanges();
+        const runSqlButton = findElementByDataTestId(fixture, "runSqlQueryButton") as HTMLButtonElement;
         appDatasetSubsService.observeSqlErrorOccurred(mockSqlErrorUpdate);
-
+        fixture.detectChanges();
         expect(component.currentData).toEqual([]);
         expect(component.currentSchema).toEqual(null);
         expect(component.sqlErrorMarker).toBe(mockSqlErrorUpdate.error);
+        expect(runSqlButton.disabled).toBe(false);
     });
 });

src/app/dataset-view/additional-components/data-component/data-component.ts

@@ -51,6 +51,12 @@ export class DataComponent extends BaseComponent implements OnInit {
 
     public ngOnInit(): void {
         this.trackSubscriptions(
+            this.appDatasetSubsService.onDatasetDataSqlErrorOccured.subscribe(
+                (dataSqlErrorUpdate: DataSqlErrorUpdate) => {
+                    this.sqlErrorMarker = dataSqlErrorUpdate.error;
+                    this.cdr.markForCheck();
+                },
+            ),
             this.appDatasetSubsService.onDatasetDataChanges.subscribe((dataUpdate: DataUpdate) => {
                 if (dataUpdate.currentVocab?.offsetColumn) {
                     this.offsetColumnName = dataUpdate.currentVocab.offsetColumn;
@@ -60,14 +66,6 @@ export class DataComponent extends BaseComponent implements OnInit {
                 this.sqlErrorMarker = null;
                 this.cdr.markForCheck();
             }),
-            this.appDatasetSubsService.onDatasetDataSqlErrorOccured.subscribe(
-                (dataSqlErrorUpdate: DataSqlErrorUpdate) => {
-                    this.currentData = [];
-                    this.currentSchema = null;
-                    this.sqlErrorMarker = dataSqlErrorUpdate.error;
-                    this.cdr.markForCheck();
-                },
-            ),
         );
         this.buildSqlRequestCode();
     }

src/app/dataset-view/dataset.service.spec.ts

@@ -203,16 +203,12 @@ describe("AppDatasetService", () => {
             /* Intentionally blank */
         });
 
-        const subscriptionErrorChanges$ = appDatasetSubsService.onDatasetDataSqlErrorOccured
-            .pipe(first())
-            .subscribe(() => {
-                /* Intentionally blank */
-            });
+        const subscriptionErrorChangesSpy = spyOn(appDatasetSubsService, "observeSqlErrorOccurred");
 
         service.requestDatasetDataSqlRun(query, limit).subscribe();
 
         expect(subscriptionDataChanges$.closed).toBeTrue();
-        expect(subscriptionErrorChanges$.closed).toBeFalse();
+        expect(subscriptionErrorChangesSpy).toHaveBeenCalledWith({ error: "" });
     });
 
     it("should check get SQL query data from api with invalid SQL", () => {

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

@@ -145,6 +145,9 @@ export class DatasetService {
                         currentVocab: this.currentSetVocab,
                     };
                     this.appDatasetSubsService.changeDatasetData(dataUpdate);
+                    this.appDatasetSubsService.observeSqlErrorOccurred({
+                        error: "",
+                    });
                 } else if (queryResult.errorKind === DataQueryResultErrorKind.InvalidSql) {
                     this.appDatasetSubsService.observeSqlErrorOccurred({
                         error: queryResult.errorMessage,

src/assets/styles/var.sass

@@ -144,8 +144,10 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
       border-right-width: 1px
       border-top-right-radius: 6px
       border-bottom-right-radius: 6px
-    & span
+    span
       font-size: 12px
+    &:hover
+      border-color: $app-color-border-default
 .BtnGroup-item:first-child
   border-top-left-radius: 6px
   border-bottom-left-radius: 6px