From 8f0afb255172cd87452799fa3a3927c8ce9b257d Mon Sep 17 00:00:00 2001
From: Mohit Suman <msuman@redhat.com>
Date: Thu, 1 Sep 2016 15:36:17 +0530
Subject: [PATCH 1/3] Add empty state for Identitiy Provider in admin console

---
 .../partials/realm-identity-provider.html     | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
index 1b1ae9611a..af035f9789 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
@@ -1,7 +1,24 @@
 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
     <h1>{{:: 'identity-providers' | translate}}</h1>
-
-    <form name="realmForm" novalidate class="form-horizontal">
+    <div class="blank-slate-pf" data-ng-hide="configuredProviders.length > 0">
+        <div class="blank-slate-pf-icon">
+            <span class="fa fa-exchange"></span>
+        </div>
+    <h1>
+        Identity Providers
+    </h1>
+    <p class="">
+        Through Identity Brokering it's easy to allow users to authenticate to Keycloak using external Identity Providers or Social Networks.<br> We have built-in support for OpenID Connect and SAML 2.0 as well as a number of social networks such as Google, GitHub, Facebook and Twitter.
+    </p>
+    <div class="dropdown" data-ng-show="access.manageIdentityProviders">
+        <select class="form-control" ng-model="provider"
+        ng-options="p.name group by p.groupName for p in allProviders track by p.id"
+        data-ng-change="addProvider(provider); provider = null">
+            <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
+        </select>
+    </div>
+</div>
+    <form name="realmForm" novalidate class="form-horizontal" ng-show="configuredProviders.length > 0">
         <fieldset>
             <div>
                 <table class="table table-striped table-bordered">
@@ -18,7 +35,7 @@
                             </div>
                         </th>
                     </tr>
-                    <tr ng-show="configuredProviders.length > 0">
+                    <tr>
                         <th>{{:: 'name' | translate}}</th>
                         <th>{{:: 'provider' | translate}}</th>
                         <th>{{:: 'enabled' | translate}}</th>
@@ -26,7 +43,7 @@
                         <th colspan="2">{{:: 'actions' | translate}}</th>
                     </tr>
                     </thead>
-                    <tbody ng-show="configuredProviders.length > 0">
+                    <tbody>
                     <tr ng-repeat="identityProvider in configuredProviders">
                         <td>
                             <a href="#/realms/{{realm.realm}}/identity-provider-settings/provider/{{identityProvider.providerId}}/{{identityProvider.alias}}">{{identityProvider.alias}}</a>

From d11efa363c30118118165e9b9433351c37545207 Mon Sep 17 00:00:00 2001
From: Mohit Suman <msuman@redhat.com>
Date: Thu, 1 Sep 2016 16:02:34 +0530
Subject: [PATCH 2/3] Dropdown alignment with the empty state

---
 .../partials/realm-identity-provider.html      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
index af035f9789..46f86b9e37 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
@@ -10,13 +10,17 @@
     <p class="">
         Through Identity Brokering it's easy to allow users to authenticate to Keycloak using external Identity Providers or Social Networks.<br> We have built-in support for OpenID Connect and SAML 2.0 as well as a number of social networks such as Google, GitHub, Facebook and Twitter.
     </p>
-    <div class="dropdown" data-ng-show="access.manageIdentityProviders">
-        <select class="form-control" ng-model="provider"
-        ng-options="p.name group by p.groupName for p in allProviders track by p.id"
-        data-ng-change="addProvider(provider); provider = null">
-            <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
-        </select>
-    </div>
+    <div class="row" data-ng-show="access.manageIdentityProviders">
+      <div class="col-sm-4 col-sm-offset-4">
+        <div class="form-group">
+          <select class="selectpicker form-control" ng-model="provider"
+          ng-options="p.name group by p.groupName for p in allProviders track by p.id"
+          data-ng-change="addProvider(provider); provider = null">
+          <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
+      </select>
+  </div>
+</div>
+</div>
 </div>
     <form name="realmForm" novalidate class="form-horizontal" ng-show="configuredProviders.length > 0">
         <fieldset>

From bdbc4e1f6db3cd1a63ca9a4c9232f050b4d89033 Mon Sep 17 00:00:00 2001
From: Mohit Suman <msuman@redhat.com>
Date: Tue, 6 Sep 2016 19:34:07 +0530
Subject: [PATCH 3/3] add margin and update the description text

---
 .../partials/realm-identity-provider.html     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
index 46f86b9e37..2f5ed400b5 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
@@ -10,17 +10,21 @@
     <p class="">
         Through Identity Brokering it's easy to allow users to authenticate to Keycloak using external Identity Providers or Social Networks.<br> We have built-in support for OpenID Connect and SAML 2.0 as well as a number of social networks such as Google, GitHub, Facebook and Twitter.
     </p>
-    <div class="row" data-ng-show="access.manageIdentityProviders">
-      <div class="col-sm-4 col-sm-offset-4">
-        <div class="form-group">
-          <select class="selectpicker form-control" ng-model="provider"
-          ng-options="p.name group by p.groupName for p in allProviders track by p.id"
-          data-ng-change="addProvider(provider); provider = null">
-          <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
-      </select>
+    <p>To get started select a provider from the dropdown below:</p>
+    <div class="blank-slate-pf-main-action">
+        <div class="row" data-ng-show="access.manageIdentityProviders">
+          <div class="col-sm-4 col-sm-offset-4">
+            <div class="form-group">
+            <select class="selectpicker form-control" ng-model="provider"
+              ng-options="p.name group by p.groupName for p in allProviders track by p.id"
+              data-ng-change="addProvider(provider); provider = null">
+              <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
+          </select>
+      </div>
   </div>
 </div>
 </div>
+
 </div>
     <form name="realmForm" novalidate class="form-horizontal" ng-show="configuredProviders.length > 0">
         <fieldset>