TEIIDTOOLS-324 Convert Non-Patternfly 2+ Components to Patternfly NG …

…Components If Available

- converted Dataservice card to patternfly-ng <pfng-card> component
- updated ngx-bootstrap
- updated About dialog because of new version of ngx-bootstrap
- replace <input> component with <textarea> in dataservice wizard for the dataservice description
- create DataserviceCardComponent
- added a "Show Details" action to the dataservice card
- fixes some TSLint errors

ngapp/package.json

@@ -25,7 +25,7 @@
     "core-js": "^2.4.1",
     "express": "^4.16.2",
     "ng2-codemirror": "^1.1.3",
-    "ngx-bootstrap": "^1.9.3",
+    "ngx-bootstrap": "^2.0.1",
     "patternfly": "^3.37.1",
     "patternfly-ng": "^2.1.1",
     "rxjs": "^5.5.5",

ngapp/src/app/core/api.service.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Headers, RequestOptions, Response } from "@angular/http";
+import { RequestOptions, Response } from "@angular/http";
 import { AppSettingsService } from "@core/app-settings.service";
 import { LoggerService } from "@core/logger.service";
 import "rxjs/add/observable/throw";
@@ -38,7 +38,7 @@ export abstract class ApiService {
    * @returns the base url of the application
    */
   protected getBaseUrl(): string {
-    return window.location.protocol + '://' + window.location.hostname;
+    return window.location.protocol + "://" + window.location.hostname;
   }
 
   /**

ngapp/src/app/core/app-settings.service.spec.ts

@@ -1,11 +1,16 @@
 import { inject, TestBed } from "@angular/core/testing";
-
+import { HttpModule} from "@angular/http";
+import { LoggerService } from "@core/logger.service";
 import { AppSettingsService } from "./app-settings.service";
 
 describe("AppSettingsService", () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [AppSettingsService]
+      imports: [ HttpModule ],
+      providers: [
+        AppSettingsService,
+        LoggerService
+      ]
     });
   });
 

ngapp/src/app/core/app-settings.service.ts

@@ -15,16 +15,18 @@
  * limitations under the License.
  */
 
-import { Injectable } from "@angular/core";
-import { Http, Headers, RequestOptions, Response } from "@angular/http";
+import { Injectable, OnInit } from "@angular/core";
+import { Headers, Http, RequestOptions, Response } from "@angular/http";
 import { LoggerService } from "@core/logger.service";
+import { environment } from "@environments/environment";
 import { LayoutType } from "@shared/layout-type.enum";
 import { Observable } from "rxjs/Observable";
 import { ErrorObservable } from "rxjs/observable/ErrorObservable";
-import { environment } from "@environments/environment";
 
 @Injectable()
-export class AppSettingsService {
+export class AppSettingsService implements OnInit {
+
+  private static readonly userProfileUrl = environment.komodoServiceUrl + "/userProfile";
 
   // ** Dont change git keys - must match Komodo rest call parameters **
   public readonly GIT_REPO_BRANCH_KEY = "repo-branch-property";
@@ -35,20 +37,18 @@ export class AppSettingsService {
   public readonly GIT_REPO_PATH_KEY = "repo-path-property";
   public readonly GIT_REPO_FILE_PATH_KEY = "file-path-property";
 
+  protected userProfile: Object;
+
   // Map to maintain the target git repository properties
   private readonly gitRepoProperties: Map<string, string>;
 
-  private static readonly userProfileUrl = environment.komodoServiceUrl + "/userProfile";
-
   // page layouts
   private svcPageLayout: LayoutType = LayoutType.CARD;
   private connPageLayout: LayoutType = LayoutType.CARD;
 
   private http: Http;
   private logger: LoggerService;
 
-  private userProfile: Object;
-
   constructor(http: Http, logger: LoggerService) {
     this.http = http;
     this.logger = logger;
@@ -61,34 +61,31 @@ export class AppSettingsService {
     this.gitRepoProperties.set(this.GIT_REPO_PASSWORD_KEY, "MY_PASS");
     this.gitRepoProperties.set(this.GIT_REPO_AUTHOR_NAME_KEY, "MY_USER");
     this.gitRepoProperties.set(this.GIT_REPO_AUTHOR_EMAIL_KEY, "USER@SOMEWHERE.COM");
+  }
 
+  public ngOnInit(): void {
     //
     // Do a call to fetch the user profile on init of service.
     // The fetchProfile method returns an observable
     // which we subscribe to and on completion assigns the variable
     // values accordingly
     //
     this.fetchUserProfile().subscribe(
-        (profile) => {
-            this.userProfile = profile;
-        },
-        (error) => {
-            this.logger.error( "[fetchUserProfile] Error: %o", error );
-        });
+      ( profile ) => {
+        this.userProfile = profile;
+      },
+      ( error ) => {
+        this.logger.error( "[fetchUserProfile] Error: %o", error );
+      } );
   }
 
-  private handleError(error: Response): ErrorObservable {
-    this.logger.error( this.constructor.name + "::handleError" );
-    return Observable.throw(error);
-  }
-
-  private fetchUserProfile(): Observable<Object> {
+  protected fetchUserProfile(): Observable<Object> {
     return this.http.get(AppSettingsService.userProfileUrl, this.getAuthRequestOptions())
-        .map((response) => {
-          const userInfo = response.json();
-          return userInfo.Information;
-        })
-        .catch((error) => this.handleError(error));
+      .map((response) => {
+        const userInfo = response.json();
+        return userInfo.Information;
+      })
+      .catch((error) => this.handleError(error));
   }
 
   /**
@@ -107,12 +104,14 @@ export class AppSettingsService {
    * @returns {string} the komodo user
    */
   public getKomodoUser(): string {
-    if (! this.userProfile)
-        throw new Error('Failed to retrieve the user profile so cannot provide a user name');
+    if (! this.userProfile) {
+      throw new Error( "Failed to retrieve the user profile so cannot provide a user name" );
+    }
 
-    let komodoUser = this.userProfile['User Name'];
-    if (! komodoUser)
-        throw new Error('Failed to retrieve the user name from the user profile');
+    const komodoUser = this.userProfile["User Name"];
+    if (! komodoUser) {
+      throw new Error( "Failed to retrieve the user name from the user profile" );
+    }
 
     return komodoUser;
   }
@@ -122,12 +121,14 @@ export class AppSettingsService {
    * @returns {string} the komodo workspace path
    */
   public getKomodoUserWorkspacePath(): string {
-    if (! this.userProfile)
-        throw new Error('Failed to retrieve the user profile so cannot provide a workspace path');
+    if (! this.userProfile) {
+      throw new Error( "Failed to retrieve the user profile so cannot provide a workspace path" );
+    }
 
-    let workspace = this.userProfile['Workspace'];
-    if (! workspace)
-        throw new Error('Failed to retrieve the workspace path from the user profile');
+    const workspace = this.userProfile["Workspace"];
+    if (! workspace) {
+      throw new Error( "Failed to retrieve the workspace path from the user profile" );
+    }
 
     return workspace;
   }
@@ -172,4 +173,9 @@ export class AppSettingsService {
     this.svcPageLayout = layout;
   }
 
+  private handleError(error: Response): ErrorObservable {
+    this.logger.error( this.constructor.name + "::handleError" );
+    return Observable.throw(error);
+  }
+
 }

ngapp/src/app/core/mock-app-settings.service.ts

@@ -0,0 +1,40 @@
+import { Injectable, OnInit } from "@angular/core";
+import { Http } from "@angular/http";
+import { AppSettingsService } from "@core/app-settings.service";
+import { LoggerService } from "@core/logger.service";
+import { environment } from "@environments/environment";
+import { Observable } from "rxjs/Observable";
+
+@Injectable()
+export class MockAppSettingsService extends AppSettingsService implements OnInit {
+
+  protected readonly userNameProperty = "User Name";
+  protected readonly workspaceProperty = "Workspace";
+
+  protected readonly userProfile = {
+    userNameProperty: "dsbUser",
+    workspaceProperty: environment.komodoWorkspaceUrl + "/dsbUser"
+  };
+
+  constructor( http: Http,
+               logger: LoggerService) {
+    super( http, logger );
+  }
+
+  protected fetchUserProfile(): Observable< Object > {
+    return Observable.of( this.userProfile );
+  }
+
+  public getKomodoUser(): string {
+    return this.userProfile[ this.userNameProperty ];
+  }
+
+  public getKomodoUserWorkspacePath(): string {
+    return this.userProfile[ this.workspaceProperty ];
+  }
+
+  public ngOnInit(): void {
+    // nothing to do
+  }
+
+}

ngapp/src/app/core/vertical-nav/vertical-nav.component.ts

@@ -24,7 +24,7 @@ import { AboutService } from "@core/about-dialog/about.service";
 import { LoggerService } from "@core/logger.service";
 import { DataservicesConstants } from "@dataservices/shared/dataservices-constants";
 import { BsModalService } from "ngx-bootstrap/modal";
-import { BsModalRef } from "ngx-bootstrap/modal/modal-options.class";
+import { BsModalRef } from "ngx-bootstrap/modal/bs-modal-ref.service";
 import { NavigationItemConfig } from "patternfly-ng";
 
 @Component({

ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.html

@@ -35,15 +35,15 @@ <h3><i>{{ step2InstructionMessage }}</i></h3>
       <form [formGroup]=basicPropertyForm class="form-horizontal">
         <div [ngClass]="nameValid ? 'form-group' : 'form-group has-error'">
           <label class="col-sm-2 control-label required-pf">Name</label>
-          <div class="col-sm-5">
+          <div class="col-sm-7">
             <input class="form-control" formControlName="name" title="">
             <div class="help-block" *ngIf="!nameValid">{{ nameValidationError }}</div>
           </div>
         </div>
         <div [ngClass]="'form-group'">
           <label class="col-sm-2 control-label">Description</label>
-          <div class="col-sm-5">
-            <input class="form-control" formControlName="description" title="">
+          <div class="col-sm-7">
+            <textarea class="form-control" rows="2" maxlength="256" formControlName="description"></textarea>
           </div>
         </div>
         <div [ngClass]="hasSelectedConnection() ? 'form-group' : 'form-group has-error'">
@@ -53,11 +53,10 @@ <h3><i>{{ step2InstructionMessage }}</i></h3>
                  title="Select the connection whose tables will be included in the dataservice">
             Connection
           </label>
-          <div class="col-sm-5">
+          <div class="col-sm-7">
             <select ([ngModel])="selectedConnection" (change)="selectedConnectionChanged($event)">
               <option disabled selected value [ngValue]="emptyConnection">{{ emptyConnection.getId() }}</option>
-              <option *ngFor="let connection of sourceTableConnections"
-                      [ngValue]="connection">
+              <option *ngFor="let connection of sourceTableConnections" [ngValue]="connection">
                 {{ connection.getId() }}
               </option>
             </select>
@@ -66,7 +65,7 @@ <h3><i>{{ step2InstructionMessage }}</i></h3>
         </div>
         <div class="form-group">
           <label class="col-sm-2 control-label">Included Tables</label>
-          <div class="col-sm-5 wiz-review-tables">
+          <div class="col-sm-7 wiz-review-tables">
             <div [ngClass]="shouldCheck(table) ? 'wiz-review-table-checked' : 'wiz-review-table-unchecked'"
                  *ngFor="let table of dataserviceSourceTables">
                 {{ table.getName() }} ( {{ table.getConnection().getId() }} <span class="fa fa-plug"></span> )

ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css

@@ -0,0 +1,116 @@
+:root {
+  --body-main-color: #dc7039;
+  --border-color: #39a5dc;
+  --border-style: double;
+  --border-width: 2px;
+  --hover-color: rgb(221, 234, 255);
+}
+
+.dataservice-card {
+  -webkit-transition: background-color 300ms;
+  -moz-transition: background-color 300ms;
+//-ms-transition: background-color 300ms;
+  -o-transition: background-color 300ms;
+  transition: background-color 300ms;
+  height: 160px;
+}
+
+.dataservice-card-selected {
+}
+
+.dataservice-card-toolbar {
+  border-bottom: 1px solid lightgrey;
+  margin-bottom: 6px;
+  margin-top: 0;
+}
+
+.dataservice-card-toolbar:hover {
+  background-color: var(--hover-color);
+}
+
+.dataservice-card-toolbar-kebab {
+  margin-left: 0 !important;
+  margin-right: 4px;
+}
+
+.dataservice-card-action-icon {
+  color: var(--border-color);
+  cursor: pointer;
+  font-size: 1.5em;
+  height: 24px !important;
+  margin-left: 0 !important;
+  margin-top: 4px;
+  width: 24px !important;
+}
+
+.dataservice-card-action-disabled-icon {
+  color: lightgray;
+  font-size: 1.5em;
+  height: 24px !important;
+  margin-left: 4px;
+  margin-top: 4px;
+  width: 24px !important;
+}
+
+.dataservice-card-icon {
+  border: 2px solid var(--border-color);
+  border-radius: 60px;
+  display: inline-block;
+  padding: 0.1em 0.2em;
+}
+
+.dataservice-card-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.dataservice-card .card-pf .card-pf-heading:hover  {
+  background-color: var(--hover-color);
+}
+
+.dataservice-card-selected .card-pf .card-pf-heading {
+  border-right: var(--border-width) var(--border-style) var(--border-color);
+  border-left: var(--border-width) var(--border-style) var(--border-color);
+}
+
+.dataservice-card .card-pf .card-pf-footer  {
+  margin: 0 !important;
+  min-height: 20px;
+  padding: 10px 0 5px 20px;
+}
+
+.dataservice-card-selected .card-pf .card-pf-footer {
+  border-right: var(--border-width) var(--border-style) var(--border-color);
+  border-left: var(--border-width) var(--border-style) var(--border-color);
+}
+
+.dataservice-card-body .list-pf-container {
+  margin: 0 !important;
+  padding: 4px 10px;
+}
+
+.dataservice-card-body-title {
+  background-color: var(--body-main-color);
+  color: white;
+  margin: 4px 4px !important;
+  text-align: center;
+}
+
+div .dataservice-card-body-title {
+  border-right: var(--border-width) var(--border-style) var(--border-color);
+  border-left: var(--border-width) var(--border-style) var(--border-color);
+  margin: 0 !important;
+}
+
+.dataservice-card-description {
+  color: slategray;
+  height: 50px;
+  margin-bottom: 8px;
+  overflow: scroll;
+  padding: 0 5px 5px 5px;
+}
+
+.view-name {
+  cursor: pointer;
+  color: var(--body-main-color);
+}