diff --git a/CHANGELOG.md b/CHANGELOG.md index e601bccc0..cde73f9a8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/app/dataset-view/additional-components/data-component/data-component.html b/src/app/dataset-view/additional-components/data-component/data-component.html index 6a93c0022..27345ae22 100644 --- a/src/app/dataset-view/additional-components/data-component/data-component.html +++ b/src/app/dataset-view/additional-components/data-component/data-component.html @@ -91,7 +91,7 @@

Query:

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" > Runplay_arrow @@ -151,7 +151,7 @@

Result:

[dataRows]="currentData || []" > - +

Need diff --git a/src/app/dataset-view/additional-components/data-component/data-component.spec.ts b/src/app/dataset-view/additional-components/data-component/data-component.spec.ts index eea157321..f4c316380 100644 --- a/src/app/dataset-view/additional-components/data-component/data-component.spec.ts +++ b/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); }); }); diff --git a/src/app/dataset-view/additional-components/data-component/data-component.ts b/src/app/dataset-view/additional-components/data-component/data-component.ts index 6f00d587b..e3f252ca2 100644 --- a/src/app/dataset-view/additional-components/data-component/data-component.ts +++ b/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(); } diff --git a/src/app/dataset-view/dataset.service.spec.ts b/src/app/dataset-view/dataset.service.spec.ts index fcd1d3f46..79970b49c 100644 --- a/src/app/dataset-view/dataset.service.spec.ts +++ b/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", () => { diff --git a/src/app/dataset-view/dataset.service.ts b/src/app/dataset-view/dataset.service.ts index 01c2adc1b..5a211bdc1 100644 --- a/src/app/dataset-view/dataset.service.ts +++ b/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, diff --git a/src/assets/styles/var.sass b/src/assets/styles/var.sass index c2d585b69..bb5d37fe9 100644 --- a/src/assets/styles/var.sass +++ b/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