Bug 1549450 - Better to use the same name for Clear filters, Clear Filter, Clear All Filters

Author: jhadvig

app/styles/_core.less

@@ -126,6 +126,13 @@ body.ios {
   display: none;
 }
 
+.btn-link.inline-btn-link {
+  font-size: inherit;
+  font-weight: inherit;
+  vertical-align: initial;
+  padding: 0;
+}
+
 .empty-state-message {
   margin: 40px auto 60px;
   max-width: 600px;

app/views/browse/config-maps.html

@@ -38,7 +38,7 @@ <h2>No config maps.</h2>
                 </p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all config maps. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all config maps. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/browse/routes.html

@@ -38,7 +38,7 @@ <h2>No routes.</h2>
                 </p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all routes. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all routes. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/browse/stateful-sets.html

@@ -35,7 +35,7 @@ <h2>No stateful sets.</h2>
                 <p>No stateful sets have been added to project {{projectName}}.</p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all stateful sets. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all stateful sets. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/builds.html

@@ -32,7 +32,7 @@ <h2>No builds.</h2>
                 <p>No builds have been added to project {{projectName}}.</p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all builds. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all builds. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/catalog/catalog.html

@@ -50,7 +50,7 @@ <h2 class="text-center">No images or templates.</h2>
 
   <div ng-if="allContentHidden" class="empty-state-message text-center h2">
     All content is hidden by the current filter.
-    <a href="" ng-click="filter.keyword = ''" role="button" class="nowrap">Clear Filter</a>
+    <button type="button" class="btn btn-link inline-btn-link" ng-click="filter.keyword = ''">Clear All Filters</button>
   </div>
 
   <div ng-if="!filterActive">

app/views/catalog/category-content.html

@@ -45,7 +45,7 @@ <h2 class="text-center">No images or templates.</h2>
 
   <div ng-if="!filteredBuilderImages.length && !filteredTemplates.length && loaded" class="empty-state-message text-center h2">
     All content is hidden by the current filter.
-    <a href="" ng-click="filter.keyword = ''" role="button" class="nowrap">Clear Filter</a>
+    <button type="button" class="btn btn-link inline-btn-link" ng-click="filter.keyword = ''">Clear All Filters</button>
   </div>
 
   <div class="row row-cards-pf row-cards-pf-flex mar-top-xl">

app/views/deployments.html

@@ -32,7 +32,7 @@ <h2>No deployments.</h2>
                 <p>No deployments have been added to project {{projectName}}.</p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all deployments. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all deployments. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/directives/events.html

@@ -57,14 +57,14 @@
           <span ng-if="(events | hashSize) === 0"><em>No events to show.</em></span>
           <span ng-if="(events | hashSize) > 0">
             All events hidden by filter.
-            <a href="" ng-click="filter.text = ''" role="button" class="nowrap">Clear Filter</a>
+            <button type="button" class="btn btn-link inline-btn-link" ng-click="filter.text = ''">Clear All Filters</button>
           </span>
         </td>
           <td class="hidden-xs hidden-sm hidden-md" colspan="{{showKindAndName ? 6 : 4}}">
           <span ng-if="(events | hashSize) === 0"><em>No events to show.</em></span>
           <span ng-if="(events | hashSize) > 0">
             All events hidden by filter.
-            <a href="" ng-click="filter.text = ''" role="button" class="nowrap">Clear Filter</a>
+            <button type="button" class="btn btn-link inline-btn-link" ng-click="filter.text = ''">Clear All Filters</button>
           </span>
         </td>
       </tr>

app/views/images.html

@@ -32,7 +32,7 @@ <h2>No image streams.</h2>
                 <p>No image streams have been added to project {{projectName}}.</p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all image streams. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all image streams. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/other-resources.html

@@ -35,7 +35,7 @@ <h2>No {{resourceName}}.</h2>
                 </p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all {{resourceName}}. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all {{resourceName}}. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/overview.html

@@ -112,7 +112,7 @@ <h2>Welcome to project {{projectName}}.</h2>
           <div ng-if="overview.everythingFiltered && overview.viewBy !== 'pipeline'">
             <div class="empty-state-message text-center h2">
               The filter is hiding all resources.
-              <a href="" ng-click="overview.clearFilter()" role="button" class="nowrap">Clear Filter</a>
+              <button type="button" class="btn btn-link inline-btn-link" ng-click="overview.clearFilter()">Clear All Filters</button>
             </div>
           </div>
           <div ng-if="!overview.everythingFiltered || overview.viewBy === 'pipeline'">
@@ -276,7 +276,7 @@ <h2>No pipelines.</h2>
               <div ng-if="(overview.pipelineBuildConfigs | hashSize) && !(overview.filteredPipelineBuildConfigs | hashSize)">
                 <div class="empty-state-message text-center h2">
                   All pipelines are filtered.
-                  <a href="" ng-click="overview.clearFilter()" role="button" class="nowrap">Clear Filter</a>
+                  <button type="button" class="btn btn-link inline-btn-link" ng-click="overview.clearFilter()">Clear All Filters</button>
                 </div>
               </div>
               <div ng-repeat="pipeline in overview.filteredPipelineBuildConfigs track by (pipeline | uid)">

app/views/pods.html

@@ -32,7 +32,7 @@ <h2>No pods.</h2>
                 <p>No pods have been added to project {{projectName}}.</p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all pods. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all pods. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/projects.html

@@ -90,9 +90,9 @@ <h1>My Projects</h1>
                   </div>
                 </form>
               </div>
-              <div ng-if="!projects.length && !isProjectListIncomplete" class="h3">
+              <div ng-if="!projects.length && !isProjectListIncomplete" class="h3 empty-state-message">
                 The current filter is hiding all projects.
-                <a href="" ng-click="search.text = ''" role="button" class="nowrap">Clear Filter</a>
+                <button type="button" class="btn btn-link inline-btn-link" ng-click="search.text = ''">Clear All Filters</button>
               </div>
               <div ng-if="projects.length" class="list-pf list-group projects-list">
                 <div ng-repeat="project in projects | limitTo: limitListTo track by (project | uid)" class="list-pf-item list-group-item project-info tile-click">

app/views/secrets.html

@@ -38,7 +38,7 @@ <h2>No secrets.</h2>
                 </p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all secrets. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all secrets. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/service-instances.html

@@ -32,7 +32,7 @@ <h2>No provisioned services.</h2>
                     <p>No provisioned services have been added to project {{projectName}}.</p>
                   </div>
                   <div ng-if="filterWithZeroResults">
-                    <h2>The filter is hiding all provisioned services. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                    <h2>The filter is hiding all provisioned services. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
                   </div>
                 </div>
               </div>

app/views/services.html

@@ -32,7 +32,7 @@ <h2>No services.</h2>
                 <p>No services have been added to project {{projectName}}.</p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all services. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all services. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>

app/views/storage.html

@@ -43,7 +43,7 @@ <h2>No persistent volume claims.</h2>
                 </p>
               </div>
               <div ng-if="filterWithZeroResults">
-                <h2>The filter is hiding all persistent volume claims. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
+                <h2>The filter is hiding all persistent volume claims. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
               </div>
             </div>
           </div>