Add empty state for Identitiy Provider in admin console

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>