teiidtools-347: Updated connections page empty state to pfng.

teiid · Mar 23, 2018 · 3637604 · 3637604
1 parent 124a829
commit 3637604
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/ngapp/src/app/connections/connections.component.html b/ngapp/src/app/connections/connections.component.html
@@ -36,19 +36,12 @@ <h2 class="app-feature-title" i18n="@@connections.connections">Connections</h2>
     </div>
     <!-- List of Connections -->
     <div class="row object-collection-page">
-      <div class="col-md-12 empty-state" *ngIf="isLoaded('connections') && allConnections.length === 0">
-        <div class="blank-slate-pf">
-          <div class="blank-slate-pf-icon">
-            <span class="pficon pficon pficon-add-circle-o"></span>
-          </div>
-          <h1 i18n="@@connections.noConnectionsFound">No Connections Found</h1>
-          <p i18n="@@connections.noConnectionsFoundPleaseClick">
-            No Connections were found - please click below to create a new Connection!
-          </p>
-          <div class="blank-slate-pf-main-action">
-            <div class="btn-group">
-              <a i18n="@@connections.addConnection" class="btn btn-primary btn-lg" (click)="onNew()">Add Connection</a>
-            </div>
+      <div class="row" *ngIf="isLoaded('connections') && allConnections.length === 0">
+        <div class="col-sm-12">
+          <div class="form-group">
+            <pfng-empty-state
+                [config]="noConnectionsEmptyConfig"
+                (onActionSelect)="onNewConnection()"></pfng-empty-state>
           </div>
         </div>
       </div>

diff --git a/ngapp/src/app/connections/connections.component.ts b/ngapp/src/app/connections/connections.component.ts
@@ -26,7 +26,7 @@ import { WizardService } from "@dataservices/shared/wizard.service";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
 import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
 import { LayoutType } from "@shared/layout-type.enum";
-import { Filter } from "patternfly-ng";
+import { ActionConfig, EmptyStateConfig, Filter } from "patternfly-ng";
 import { FilterConfig } from "patternfly-ng";
 import { FilterField } from "patternfly-ng";
 import { FilterEvent } from "patternfly-ng";
@@ -56,6 +56,7 @@ export class ConnectionsComponent extends AbstractPageComponent implements OnIni
   private filteredConns: Connection[] = [];
   private selectedConns: Connection[] = [];
   private router: Router;
+  private noConnectionsConfig: EmptyStateConfig;
   private appSettingsService: AppSettingsService;
   private connectionService: ConnectionService;
   private wizardService: WizardService;
@@ -105,6 +106,29 @@ export class ConnectionsComponent extends AbstractPageComponent implements OnIni
     } as SortConfig;
   }
 
+  public get noConnectionsEmptyConfig(): EmptyStateConfig {
+    if ( !this.noConnectionsConfig ) {
+      const actionConfig = {
+        primaryActions: [
+          {
+            id: "createConnectionActionId",
+            title: "Add Connection",
+            tooltip: "Add a connection"
+          }
+        ]
+      } as ActionConfig;
+
+      this.noConnectionsConfig = {
+        actions: actionConfig,
+        iconStyleClass: "pficon-warning-triangle-o",
+        info: "No Connections were found. Please click below to create a connection. ",
+        title: "No Connections Available"
+      } as EmptyStateConfig;
+    }
+
+    return this.noConnectionsConfig;
+  }
+
   public loadAsyncPageData(): void {
     const self = this;