Kamu UI 435 feature contextual schemas in data tab (#482)

* Reused SearchAndSchemasComponent

* Fixed unit tests

* changed CHANGELOG.md

---------

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

Author: dmitriy-borzenko

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Query page: added default query after searching for first dataset
 - Set the container width for large screens
+- Added contextual schemas in Data tab
 ### 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

@@ -1,22 +1,5 @@
-<div class="dataset-view-data-result-container">
-    <div class="search-result-container__content">
-        <ng-container *ngIf="overviewUpdate$ | async as overviewUpdate">
-            <ng-container *ngIf="overviewUpdate.schema">
-                <h2 class="box-title align-items-center pb-3 m-0">Schema:</h2>
-                <app-dynamic-table
-                    [hasTableHeader]="true"
-                    [schemaFields]="overviewUpdate.schema.fields"
-                    [idTable]="'schema-block-table'"
-                />
-            </ng-container>
-        </ng-container>
-
-        <div>
-            <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
-            <app-saved-queries-section></app-saved-queries-section>
-        </div>
-    </div>
-
+<div class="query-container">
+    <app-search-and-schemas-section [disableSearch]="true"></app-search-and-schemas-section>
     <div class="search-result-container__content">
         <app-query-and-result-sections
             [sqlLoading]="sqlLoading"

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

@@ -4,9 +4,7 @@ import { ComponentFixture, TestBed, fakeAsync, flush, tick } from "@angular/core
 import { MatIconModule } from "@angular/material/icon";
 import { MatMenuModule } from "@angular/material/menu";
 import { DataComponent } from "./data.component";
-
-import { emitClickOnElementByDataTestId, findElementByDataTestId } from "src/app/common/base-test.helpers.spec";
-import { DatasetSubscriptionsService } from "../../dataset.subscriptions.service";
+import { emitClickOnElementByDataTestId } from "src/app/common/base-test.helpers.spec";
 import { mockMetadataDerivedUpdate, mockOverviewDataUpdate, mockOverviewDataUpdateNullable } from "../data-tabs.mock";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Location } from "@angular/common";
@@ -26,11 +24,11 @@ import { Apollo } from "apollo-angular";
 import { ToastrModule } from "ngx-toastr";
 import { SavedQueriesSectionComponent } from "../../../query/shared/saved-queries-section/saved-queries-section.component";
 import { QueryAndResultSectionsComponent } from "../../../query/shared/query-and-result-sections/query-and-result-sections.component";
+import { SearchAndSchemasSectionComponent } from "src/app/query/global-query/search-and-schemas-section/search-and-schemas-section.component";
 
 describe("DataComponent", () => {
     let component: DataComponent;
     let fixture: ComponentFixture<DataComponent>;
-    let datasetSubsService: DatasetSubscriptionsService;
     let location: Location;
     let ngbModalService: NgbModal;
 
@@ -58,10 +56,10 @@ describe("DataComponent", () => {
                 LoadMoreComponent,
                 RequestTimerComponent,
                 SqlEditorComponent,
+                SearchAndSchemasSectionComponent,
             ],
         }).compileComponents();
         fixture = TestBed.createComponent(DataComponent);
-        datasetSubsService = TestBed.inject(DatasetSubscriptionsService);
         location = TestBed.inject(Location);
         ngbModalService = TestBed.inject(NgbModal);
         component = fixture.componentInstance;
@@ -87,24 +85,6 @@ describe("DataComponent", () => {
         flush();
     }));
 
-    it("should check schema column names", fakeAsync(() => {
-        datasetSubsService.emitOverviewChanged({
-            schema: mockMetadataDerivedUpdate.schema,
-            content: mockOverviewDataUpdate.content,
-            overview: _.cloneDeep(mockOverviewDataUpdate.overview),
-            size: mockOverviewDataUpdate.size,
-        } as OverviewUpdate);
-        tick();
-        fixture.detectChanges();
-        const columnSchemaNames = mockMetadataDerivedUpdate.schema?.fields.map((item) => item.name);
-        columnSchemaNames?.forEach((columnName) => {
-            expect(findElementByDataTestId(fixture, `column-name-${columnName}`)?.textContent?.trim()).toEqual(
-                columnName,
-            );
-        });
-        flush();
-    }));
-
     it("should check add data", () => {
         const ngbModalServiceSpy = spyOn(ngbModalService, "open").and.callThrough();
         component.datasetBasics = mockDatasetBasicsRootFragment;

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

@@ -53,6 +53,7 @@ import { promiseWithCatch } from "../common/app.helpers";
 import { QueryAndResultSectionsComponent } from "../query/shared/query-and-result-sections/query-and-result-sections.component";
 import { SavedQueriesSectionComponent } from "../query/shared/saved-queries-section/saved-queries-section.component";
 import { SqlQueryService } from "../services/sql-query.service";
+import { SearchAndSchemasSectionComponent } from "../query/global-query/search-and-schemas-section/search-and-schemas-section.component";
 
 describe("DatasetComponent", () => {
     let component: DatasetComponent;
@@ -86,6 +87,7 @@ describe("DatasetComponent", () => {
                 FlowsComponent,
                 QueryAndResultSectionsComponent,
                 SavedQueriesSectionComponent,
+                SearchAndSchemasSectionComponent,
             ],
             imports: [
                 AngularSvgIconModule.forRoot(),

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

@@ -3,10 +3,3 @@
     margin-right: auto;
     margin-left: auto;
 }
-
-.query-container {
-    display: grid;
-    align-items: start;
-    grid-template-columns: minmax(16rem, 37%) 1fr;
-    column-gap: 1.5rem;
-}

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

@@ -1,5 +1,5 @@
 <div class="box p-4 schemes-container">
-    <div class="d-flex flex-column">
+    <div class="d-flex flex-column" *ngIf="!disableSearch">
         <h2 class="mb-1">Search:</h2>
         <div class="d-flex flex-row position-relative w-100">
             <input
@@ -18,23 +18,25 @@ <h2 class="mb-1">Search:</h2>
                 x
             </button>
         </div>
-    </div>
-    <ng-template #rt let-r="result" let-t="term">
-        <div class="d-flex flex-row justify-content-between" [style.width.px]="searchDatasets.clientWidth - 28">
-            <div class="search-result-item">
-                <i class="bi bi-journal-album mr-2"></i>
-                <ng-container *ngIf="!r.dummy">{{ r.dataset.owner.accountName }}/</ng-container>
-                <ngb-highlight [result]="r.dataset.name" [term]="t" />
-            </div>
-            <div class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 f6 button-add color-text-tertiary ml-1">
-                Add
-                <span class="d-inline-block ml-1 v-align-middle"><i class="bi bi-arrow-return-left"></i></span>
+        <ng-template #rt let-r="result" let-t="term">
+            <div class="d-flex flex-row justify-content-between" [style.width.px]="searchDatasets.clientWidth - 28">
+                <div class="search-result-item">
+                    <i class="bi bi-journal-album mr-2"></i>
+                    <ng-container *ngIf="!r.dummy">{{ r.dataset.owner.accountName }}/</ng-container>
+                    <ngb-highlight [result]="r.dataset.name" [term]="t" />
+                </div>
+                <div
+                    class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 f6 button-add color-text-tertiary ml-1"
+                >
+                    Add
+                    <span class="d-inline-block ml-1 v-align-middle"><i class="bi bi-arrow-return-left"></i></span>
+                </div>
             </div>
-        </div>
-    </ng-template>
+        </ng-template>
+    </div>
 
     <div class="search-datasets mt-4">
-        <h2>Dataset schemas:</h2>
+        <h2>Schemas:</h2>
         <mat-divider class="px-2 mt-2 mb-4"></mat-divider>
 
         <cdk-accordion
@@ -65,6 +67,7 @@ <h2>Dataset schemas:</h2>
                             <mat-icon>keyboard_arrow_up</mat-icon>
                         </ng-template>
                         <button
+                            *ngIf="!disableSearch"
                             class="no-button d-flex"
                             (click)="removeDataset(item.datasetAlias)"
                             title="Remove dataset"
@@ -94,7 +97,7 @@ <h2>Dataset schemas:</h2>
             </cdk-accordion-item>
         </cdk-accordion>
         <ng-template #emptyTemplate>
-            <p class="text-center mt-4">No datasets selected</p>
+            <p *ngIf="!disableSearch" class="text-center mt-4">No datasets selected</p>
         </ng-template>
     </div>
 

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

@@ -29,7 +29,6 @@ h2 {
 
 .example-accordion-item {
     display: block;
-    border: solid 1px #ccc;
 
     &:last-child {
         border-bottom: 1px solid #ccc;
@@ -47,12 +46,15 @@ h2 {
     &-header {
         color: #000;
         font-size: 13px;
-        font-weight: 400;
+        font-weight: 500;
         line-height: 20px;
         cursor: pointer;
         display: flex;
         padding: 4px 10px;
         background: #f6f8fa;
+        border-top: solid 1px #ccc;
+        border-left: solid 1px #ccc;
+        border-right: solid 1px #ccc;
 
         &:hover {
             cursor: pointer;

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

@@ -4,6 +4,7 @@ import {
     Component,
     EventEmitter,
     inject,
+    Input,
     OnInit,
     Output,
 } from "@angular/core";
@@ -39,6 +40,7 @@ import { SqlQueryService } from "src/app/services/sql-query.service";
 })
 export class SearchAndSchemasSectionComponent extends BaseComponent implements OnInit {
     @Output() public sqlQueryEmit = new EventEmitter<string>();
+    @Input() public disableSearch: boolean;
     public searchResult: GlobalQuerySearchItem[] = [];
     public inputDatasets = new Set<string>();
     public searchDataset = "";

src/styles.scss

@@ -1597,3 +1597,10 @@ pre.language-sql {
         }
     }
 }
+
+.query-container {
+    display: grid;
+    align-items: start;
+    grid-template-columns: minmax(16rem, 37%) 1fr;
+    column-gap: 1.5rem;
+}