Kamu UI 122 disabled run query button after error

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

@@ -137,7 +137,7 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
     border-radius: 1px
     position: relative
     float: left
-    border-color: $app-color-border-default
+    border-color: $app-color-border-default!important
     height: inherit
     background: $app-aliceBlue
     &:last-child
@@ -245,7 +245,7 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
   background-color: $app-color-btn-counter-bg
 .btn:hover, .btn.hover, [open]>.btn
   background-color: $app-color-btn-hover-bg
-  border-color: $app-color-btn-hover-border
+  border-color: $app-color-btn-hover-border !important
   transition-duration: .1s
 .SelectMenu-modal
   position: relative