#87 Builder tool

README.md

@@ -1,5 +1,14 @@
 ![GitHub All Releases](https://img.shields.io/github/downloads/r0tenur/visualization/total)
+[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
 [![codecov](https://codecov.io/gh/R0tenur/visualization/branch/master/graph/badge.svg?token=COOVEK6DW1)](https://codecov.io/gh/R0tenur/visualization)
+[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=code_smells)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
+[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
+[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
+[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
+[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
+[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
+[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=bugs)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization)
 # Schema Visualization
 
 Visulizes databases in "Azure data studio" using mermaid.js

backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schema-visualization",
   "displayName": "Schema Visualization",
-  "description": "Visualization of databases",
+  "description": "Entity relationship diagram, visualization of databases. Create ERD diagrams from a database schema. Or, create a schema from an ERD diagram.",
   "version": "0.8.5",
   "publisher": "R0tenur",
   "license": "MIT",

frontend/src/app/app-testing.module.ts

@@ -1,49 +1,57 @@
+/* istanbul ignore file */
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { ButtonComponent } from './components/button/button.component';
-import { MERMAID } from './services/mermaid.token';
 import { WINDOW } from './services/window.token';
 let list: (e: Event) => void;
 const fakeWindowProvider = ({
   provide: WINDOW, useFactory: () => ({
-    removeEventListener: (type: string, listener: () => void) => {
+    innerHeight: 100,
+    innerWidth: 100,
+    removeEventListener: (_: string, __: () => void) => {
       list = undefined as any as (e: Event) => void;
     },
-    addEventListener: (type: string, listener: () => void) => {
+    addEventListener: (_: string, listener: () => void) => {
       list = listener;
     },
     dispatchEvent: (e: Event) => list(e),
     document: {
-      addEventListener: (type: string, listener: () => void) => {
+      addEventListener: (_: string, listener: () => void) => {
         list = listener;
       },
-      getElementsByTagName: (tag: string) => [
-        {
-          hasAttribute: (attribute: string) => false,
-          getAttribute: (attribute: string) => '',
-
-        }
-      ]
+      removeEventListener: (_: string, __: () => void) => {
+        list = undefined as any as (e: Event) => void;
+      },
+      dispatchEvent: (e: Event) => list(e),
+      getElementsByTagName: (_: string) => [
+        fakeElement
+      ],
+      getElementById: (__: string) => fakeElement,
+      querySelector: (__: string) => fakeElement
     }
   })
 });
+const fakeElement = {
+  clientWidth: 100,
+  clientHeight: 100,
+  hasAttribute: (___: string) => false,
+  getAttribute: (___: string) => '',
+  removeAttribute: (___: string) => { }, // NOSONAR - removeAttribute is for testing
+  setAttribute: (___: string, ____: string) => { }, // NOSONAR - setAttibute is for testing
+};
 
-const fakeMermaidProvider = ({
-  provide: MERMAID, useFactory: () => ({
-    render: (id: string, markdown: string, callback: () => void) => jasmine.createSpy(),
-    initialize: jasmine.createSpy(),
-  })
-});
 @NgModule({
   declarations: [
     ButtonComponent,
   ],
   imports: [
-    FormsModule,
+    RouterTestingModule.withRoutes([]),
+    ReactiveFormsModule
   ],
   providers: [fakeWindowProvider],
-  exports: [ButtonComponent, FormsModule]
+  exports: [ButtonComponent, RouterTestingModule, ReactiveFormsModule]
 })
 export class AppTestingModule { }
 

frontend/src/app/app.component.html

@@ -1,10 +1,11 @@
+<app-context-menu></app-context-menu>
+<app-change-modal></app-change-modal>
+<app-relation></app-relation>
+<div (click)="clearOverlays()">
 <app-alert></app-alert>
+<app-bar></app-bar>
 <app-status></app-status>
 <app-dev-bar></app-dev-bar>
-
-<div *ngIf="Database$ | async as database">
-  <app-button (clicked)="exportSvg(database.svg, database.mermaid)">Export</app-button>
-
-  <h1 *ngIf="dataStudioService.DatabaseName$ | async as databaseName">{{databaseName}}</h1>
-  <app-mermaid-viewer [svg]="database.svg"></app-mermaid-viewer>
+<h1 *ngIf="dataStudioService.DatabaseName$ | async as databaseName">{{databaseName}}</h1>
+<router-outlet></router-outlet>
 </div>

frontend/src/app/app.component.spec.ts

@@ -1,9 +1,20 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppTestingModule } from './app-testing.module';
 import { AppComponent } from './app.component';
+import { AddRelation, addRelationKey } from './models/add-relation.model';
+import { Rename, renameKey } from './models/rename.model';
+import { ContextMenuService } from './services/context-menu.service';
+import { StateInjector } from './services/state.token';
+import { State } from './state/state';
 
 describe('AppComponent', () => {
+  let renameState: State<Rename>;
+  let addRelationState: State<AddRelation>;
+  let contextMenu: ContextMenuService;
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -12,14 +23,39 @@ describe('AppComponent', () => {
       imports: [
         AppTestingModule
       ],
+      providers: [
+        { provide: StateInjector(renameKey), useValue: new State<Rename>() },
+        { provide: StateInjector(addRelationKey), useValue: new State<AddRelation>() },
+       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   });
 
+  beforeEach(() => {
+    renameState = TestBed.inject<State<Rename>>(StateInjector(renameKey));
+    addRelationState = TestBed.inject<State<AddRelation>>(StateInjector(addRelationKey));
+    contextMenu = TestBed.inject(ContextMenuService);
+    spyOn(renameState, 'clear');
+    spyOn(addRelationState, 'clear');
+    spyOn(contextMenu, 'clear');
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+  });
+
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+
+    expect(component).toBeTruthy();
+  });
+  describe('clearOverlays', () => {
+    it('should clear all modal states', () => {
+      // Act
+      component.clearOverlays();
+
+      // Assert
+      expect(renameState.clear).toHaveBeenCalled();
+      expect(addRelationState.clear).toHaveBeenCalled();
+      expect(contextMenu.clear).toHaveBeenCalled();
+    });
   });
 
 });

frontend/src/app/app.component.ts

@@ -1,22 +1,32 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, Inject } from '@angular/core';
 import { DataStudioService } from './services/data-studio.service';
-import { Exportable } from './models/exportable.model';
+import { ContextMenuService } from './services/context-menu.service';
+import { StateInjector } from './services/state.token';
+import { Rename, renameKey } from './models/rename.model';
+import { State } from './state/state';
+import { AddRelation, addRelationKey } from './models/add-relation.model';
+import { shortcutsDisabledKey } from './services/shortcut.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
 
-  public get Database$(): Observable<Exportable> {
-    return this.dataStudioService.Database$;
-  }
   constructor(
-    public readonly dataStudioService: DataStudioService) { }
+    public readonly dataStudioService: DataStudioService,
+    public readonly contextMenu: ContextMenuService,
+    @Inject(StateInjector(renameKey)) private readonly rename: State<Rename>,
+    @Inject(StateInjector(addRelationKey)) private readonly addRelation: State<AddRelation>,
+    @Inject(StateInjector(shortcutsDisabledKey)) private readonly shortcutDisabledState: State<boolean>,
+
+  ) { }
 
-  public exportSvg(svg: string, markdown: string): void {
-    this.dataStudioService.saveCommand({ chart: svg, mermaid: markdown });
+  public clearOverlays(): void {
+    this.contextMenu.clear();
+    this.rename.clear();
+    this.addRelation.clear();
+    this.shortcutDisabledState.set(false);
   }
+
 }

frontend/src/app/app.module.ts

@@ -1,14 +1,22 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { MermaidViewerComponent } from './components/mermaid-viewer/mermaid-viewer.component';
 import { ButtonComponent } from './components/button/button.component';
 import { AlertComponent } from './components/alert/alert.component';
 import { StatusComponent } from './components/status/status.component';
 import { DevBarComponent } from './components/dev-bar/dev-bar.component';
+import { BarComponent } from './components/bar/bar.component';
 
+import { RouterModule } from '@angular/router';
+import { routes } from './settings/routes';
+import { BuilderComponent } from './components/builder/builder.component';
+import { ChartComponent } from './components/chart/chart.component';
+import { ContextMenuComponent } from './components/context-menu/context-menu.component';
+import { ChangeModalComponent } from './components/change-modal/change-modal.component';
+import { RelationComponent } from './components/relation/relation.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -17,12 +25,20 @@ import { DevBarComponent } from './components/dev-bar/dev-bar.component';
     AlertComponent,
     StatusComponent,
     DevBarComponent,
+    BarComponent,
+    BuilderComponent,
+    ChartComponent,
+    ContextMenuComponent,
+    ChangeModalComponent,
+    RelationComponent
   ],
   imports: [
     BrowserModule,
+    ReactiveFormsModule,
     FormsModule,
+    RouterModule.forRoot(routes),
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
+

frontend/src/app/components/alert/alert.component.html

@@ -1,4 +1,4 @@
-<div id="alert" *ngIf="alertService.Alert$ | async as alert" class="alert">
+<div id="alert" *ngIf="state.select$ | async as alert" class="alert">
   <h4 class="title">
     An error occured!
   </h4>
@@ -34,5 +34,5 @@ <h4 class="title">
   <p>
     Report it here: https://github.com/R0tenur/visualization/issues
   </p>
-  <app-button (clicked)="alertService.dismissError()">Dismiss</app-button>
+  <app-button (clicked)="state.clear()">Dismiss</app-button>
 </div>

frontend/src/app/components/alert/alert.component.spec.ts

@@ -3,32 +3,34 @@ import { By } from '@angular/platform-browser';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { Status } from '../../../../../shared/models/status.enum';
 import { AppTestingModule } from '../../app-testing.module';
-import { ChartError } from '../../models/error.model';
-import { AlertService } from '../../services/alert.service';
+import { ChartError, ChartErrorKey } from '../../models/error.model';
 import { DataStudioService } from '../../services/data-studio.service';
+import { StateInjector } from '../../services/state.token';
+import { State } from '../../state/state';
 
 import { AlertComponent } from './alert.component';
 
 describe('AlertComponent', () => {
   let component: AlertComponent;
   let fixture: ComponentFixture<AlertComponent>;
-  let alertService: AlertService;
+  let alertService: State<ChartError>;
   let dataStudioService: DataStudioService;
   const alertSubject: Subject<ChartError> = new Subject<ChartError>();
   const markdownSubject: BehaviorSubject<string> = new BehaviorSubject<string>(undefined as any as string);
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AlertComponent],
+      providers: [{ provide: StateInjector(ChartErrorKey), useValue: new State<ChartError>()}],
       imports: [AppTestingModule],
     })
     .compileComponents();
   });
   afterEach(() => alertSubject.next(undefined));
 
   beforeEach(() => {
-    alertService = TestBed.inject(AlertService);
-    spyOnProperty(alertService, 'Alert$').and.returnValue(alertSubject.asObservable());
+    alertService = TestBed.inject<State<ChartError>>(StateInjector(ChartErrorKey));
+    spyOnProperty(alertService, 'select$').and.returnValue(alertSubject.asObservable());
 
     dataStudioService = TestBed.inject(DataStudioService);
     spyOnProperty(dataStudioService, 'Markdown$').and.returnValue(markdownSubject.asObservable());

frontend/src/app/components/alert/alert.component.ts

@@ -1,15 +1,19 @@
-import { Component } from '@angular/core';
-import { ChartError } from '../../models/error.model';
-import { AlertService } from '../../services/alert.service';
+import { Component, Inject } from '@angular/core';
+import { ChartError, ChartErrorKey } from '../../models/error.model';
 import { DataStudioService } from '../../services/data-studio.service';
+import { StateInjector } from '../../services/state.token';
+import { State} from '../../state/state';
 
 @Component({
   selector: 'app-alert',
   templateUrl: './alert.component.html',
   styleUrls: ['./alert.component.scss']
 })
 export class AlertComponent {
-  constructor(public readonly alertService: AlertService, public readonly az: DataStudioService) {}
+  constructor(
+    @Inject(StateInjector(ChartErrorKey)) public readonly state: State<ChartError>,
+    public readonly az: DataStudioService) { }
+
   public exportMarkdown(markdown: string): void {
     this.az.saveCommand({ mermaid: markdown });
   }

frontend/src/app/components/bar/bar.component.html

@@ -0,0 +1,2 @@
+<app-button (clicked)="navigate('')">Overview</app-button><app-button (clicked)="navigate('builder')">Builder (Beta)</app-button>
+<hr>

frontend/src/app/components/bar/bar.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { AppTestingModule } from '../../app-testing.module';
+
+import { BarComponent } from './bar.component';
+
+describe('BarComponent', () => {
+  let component: BarComponent;
+  let fixture: ComponentFixture<BarComponent>;
+  let router: Router;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [BarComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    fixture = TestBed.createComponent(BarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should navigate to path', () => {
+    // Act
+    component.navigate('/builder');
+    // Assert
+    expect(router.navigate).toHaveBeenCalledWith(['/builder']);
+  });
+});