Kamu UI 479 query page add default query during the search (#480)

* Added default query

* changed CHANGELOG.md

---------

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

CHANGELOG.md

@@ -6,6 +6,8 @@ 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
+### Added
+- Query page: added default query after searching for first dataset
 ### Changed
 - Readme section: modified 'Run' button into a link
 - Hint extension for tile widget account

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

@@ -23,6 +23,7 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
             [sqlError]="sqlErrorMarker$ | async"
             [sqlQueryResponse]="sqlQueryResponse$ | async"
             [sqlRequestCode]="sqlRequestCode"
+            [monacoPlaceholder]="MONACO_PLACEHOLDER"
             (runSQLRequestEmit)="runSQLRequest($event)"
         >
             <p class="search-result-container__content mt-4">

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

@@ -36,6 +36,7 @@ export class DataComponent extends BaseComponent implements OnInit {
     public overviewUpdate$: Observable<OverviewUpdate>;
     public sqlErrorMarker$: Observable<string>;
     public sqlQueryResponse$: Observable<MaybeNull<SqlQueryResponseState>>;
+    public readonly MONACO_PLACEHOLDER = "Please type your guery here...";
 
     private datasetSubsService = inject(DatasetSubscriptionsService);
     private location = inject(Location);

src/app/query/global-query/global-query.component.html

@@ -1,13 +1,14 @@
 <div class="container-main">
     <div class="query-container py-4">
-        <app-search-and-schemas-section></app-search-and-schemas-section>
+        <app-search-and-schemas-section (sqlQueryEmit)="setDefaultQuery($event)"></app-search-and-schemas-section>
 
         <div class="search-result-container__content">
             <app-query-and-result-sections
                 [sqlLoading]="sqlLoading"
                 [sqlError]="sqlErrorMarker$ | async"
                 [sqlQueryResponse]="sqlQueryResponse$ | async"
                 [sqlRequestCode]="sqlRequestCode"
+                [monacoPlaceholder]="MONACO_PLACEHOLDER"
                 (runSQLRequestEmit)="runSQLRequest($event)"
             >
                 <p class="search-result-container__content mt-4">The query didn't return any records</p>

src/app/query/global-query/global-query.component.ts

@@ -20,6 +20,7 @@ export class GlobalQueryComponent extends BaseComponent implements OnInit {
     public sqlLoading = false;
     public sqlErrorMarker$: Observable<string>;
     public sqlQueryResponse$: Observable<MaybeNull<SqlQueryResponseState>>;
+    public readonly MONACO_PLACEHOLDER = "Please type your guery here or find the dataset in the search...";
 
     private sqlQueryService = inject(SqlQueryService);
     private cdr = inject(ChangeDetectorRef);
@@ -41,6 +42,10 @@ export class GlobalQueryComponent extends BaseComponent implements OnInit {
         }
     }
 
+    public setDefaultQuery(sqlRequestCode: string): void {
+        this.sqlRequestCode = sqlRequestCode;
+    }
+
     public runSQLRequest(params: DatasetRequestBySql): void {
         this.sqlLoading = true;
         this.sqlQueryService

src/app/query/global-query/search-and-schemas-section/search-and-schemas-section.component.ts

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from "@angular/core";
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    inject,
+    OnInit,
+    Output,
+} from "@angular/core";
 import { GlobalQuerySearchItem, SqlQueryResponseState } from "../global-query.model";
 import { BaseComponent } from "src/app/common/base.component";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
@@ -30,10 +38,12 @@ import { SqlQueryService } from "src/app/services/sql-query.service";
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchAndSchemasSectionComponent extends BaseComponent implements OnInit {
+    @Output() public sqlQueryEmit = new EventEmitter<string>();
     public searchResult: GlobalQuerySearchItem[] = [];
     public inputDatasets = new Set<string>();
     public searchDataset = "";
     private readonly delayTime: number = AppValues.SHORT_DELAY_MS;
+    private readonly SQL_DEFAULT_TEMPLATE = "select * from";
 
     private cdr = inject(ChangeDetectorRef);
     private datasetService = inject(DatasetService);
@@ -104,6 +114,9 @@ export class SearchAndSchemasSectionComponent extends BaseComponent implements O
         const value = event.item as DatasetAutocompleteItem;
         const id = value.dataset.id;
         const name = value.dataset.name;
+        if (!this.inputDatasets.size) {
+            this.sqlQueryEmit.emit(`${this.SQL_DEFAULT_TEMPLATE} '${value.dataset.alias}'`);
+        }
         const inputDataset = JSON.stringify({
             datasetRef: id,
             alias: name,

src/app/query/shared/query-and-result-sections/query-and-result-sections.component.html

@@ -78,6 +78,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
     <app-sql-editor
         [(template)]="sqlRequestCode"
         [error]="sqlError"
+        [placeholder]="monacoPlaceholder"
         (onRunSql)="runSql()"
         (onEditorLoaded)="hideProgressBar()"
     />

src/app/query/shared/query-and-result-sections/query-and-result-sections.component.ts

@@ -38,6 +38,7 @@ export class QueryAndResultSectionsComponent extends BaseComponent implements On
     @Input({ required: true }) sqlError: MaybeNull<string>;
     @Input({ required: true }) public sqlRequestCode: string;
     @Input({ required: true }) public sqlQueryResponse: MaybeNull<SqlQueryResponseState>;
+    @Input({ required: true }) public monacoPlaceholder: string = "";
     @Output() public runSQLRequestEmit = new EventEmitter<DatasetRequestBySql>();
 
     private loggedUserService = inject(LoggedUserService);