feat(ux): always display search bar in datatables (#2034)

app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html

@@ -5,11 +5,6 @@
         <div class="toolBarTitle">
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
         </div>
-        <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.state.displayTextFilter }" ng-click="$ctrl.updateDisplayTextFilter()" ng-if="$ctrl.showTextFilter">
-            <i class="fa fa-search" aria-hidden="true"></i> Search
-          </span>
-        </div>
       </div>
       <div class="actionBar" ng-if="$ctrl.endpointManagement">
         <button type="button" class="btn btn-sm btn-danger"
@@ -20,7 +15,7 @@
           <i class="fa fa-plus space-right" aria-hidden="true"></i>Add endpoint
         </button>
       </div>
-      <div class="searchBar" ng-if="$ctrl.state.displayTextFilter">
+      <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>

app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.js

@@ -8,7 +8,6 @@ angular.module('portainer.app').component('endpointsDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    showTextFilter: '<',
     endpointManagement: '<',
     accessManagement: '<',
     removeAction: '<'

app/portainer/components/datatables/genericDatatableController.js

@@ -41,13 +41,6 @@ function (PaginationService, DatatableService) {
     PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
   };
 
-  this.updateDisplayTextFilter = function() {
-    this.state.displayTextFilter = !this.state.displayTextFilter;
-    if (!this.state.displayTextFilter) {
-      delete this.state.textFilter;
-    }
-  };
-
   this.$onInit = function() {
     setDefaults(this);
 

app/portainer/components/datatables/groups-datatable/groupsDatatable.html

@@ -5,11 +5,6 @@
         <div class="toolBarTitle">
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
         </div>
-        <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.state.displayTextFilter }" ng-click="$ctrl.updateDisplayTextFilter()" ng-if="$ctrl.showTextFilter">
-            <i class="fa fa-search" aria-hidden="true"></i> Search
-          </span>
-        </div>
       </div>
       <div class="actionBar">
         <button type="button" class="btn btn-sm btn-danger"
@@ -20,7 +15,7 @@
           <i class="fa fa-plus space-right" aria-hidden="true"></i>Add group
         </button>
       </div>
-      <div class="searchBar" ng-if="$ctrl.state.displayTextFilter">
+      <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>

app/portainer/components/datatables/groups-datatable/groupsDatatable.js

@@ -8,7 +8,6 @@ angular.module('portainer.app').component('groupsDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    showTextFilter: '<',
     accessManagement: '<',
     removeAction: '<'
   }

app/portainer/components/datatables/registries-datatable/registriesDatatable.html

@@ -5,11 +5,6 @@
         <div class="toolBarTitle">
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
         </div>
-        <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.state.displayTextFilter }" ng-click="$ctrl.updateDisplayTextFilter()" ng-if="$ctrl.showTextFilter">
-            <i class="fa fa-search" aria-hidden="true"></i> Search
-          </span>
-        </div>
       </div>
       <div class="actionBar">
         <button type="button" class="btn btn-sm btn-danger"
@@ -20,7 +15,7 @@
           <i class="fa fa-plus space-right" aria-hidden="true"></i>Add registry
         </button>
       </div>
-      <div class="searchBar" ng-if="$ctrl.state.displayTextFilter">
+      <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>

app/portainer/components/datatables/registries-datatable/registriesDatatable.js

@@ -8,7 +8,6 @@ angular.module('portainer.app').component('registriesDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    showTextFilter: '<',
     accessManagement: '<',
     removeAction: '<'
   }

app/portainer/components/datatables/stacks-datatable/stacksDatatable.html

@@ -5,11 +5,6 @@
         <div class="toolBarTitle">
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
         </div>
-        <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.state.displayTextFilter }" ng-click="$ctrl.updateDisplayTextFilter()" ng-if="$ctrl.showTextFilter">
-            <i class="fa fa-search" aria-hidden="true"></i> Search
-          </span>
-        </div>
       </div>
       <div class="actionBar">
         <button type="button" class="btn btn-sm btn-danger"
@@ -20,7 +15,7 @@
           <i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack
         </button>
       </div>
-      <div class="searchBar" ng-if="$ctrl.state.displayTextFilter">
+      <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>

app/portainer/components/datatables/stacks-datatable/stacksDatatable.js

@@ -8,7 +8,6 @@ angular.module('portainer.app').component('stacksDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    showTextFilter: '<',
     showOwnershipColumn: '<',
     removeAction: '<'
   }

app/portainer/components/datatables/stacks-datatable/stacksDatatableController.js

@@ -41,13 +41,6 @@ function (PaginationService, DatatableService) {
     PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
   };
 
-  this.updateDisplayTextFilter = function() {
-    this.state.displayTextFilter = !this.state.displayTextFilter;
-    if (!this.state.displayTextFilter) {
-      delete this.state.textFilter;
-    }
-  };
-
   this.$onInit = function() {
     setDefaults(this);
 

app/portainer/components/datatables/tags-datatable/tagsDatatable.html

@@ -5,11 +5,6 @@
         <div class="toolBarTitle">
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
         </div>
-        <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.state.displayTextFilter }" ng-click="$ctrl.updateDisplayTextFilter()" ng-if="$ctrl.showTextFilter">
-            <i class="fa fa-search" aria-hidden="true"></i> Search
-          </span>
-        </div>
       </div>
       <div class="actionBar">
         <button type="button" class="btn btn-sm btn-danger"
@@ -17,9 +12,9 @@
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
       </div>
-      <div class="searchBar" ng-if="$ctrl.state.displayTextFilter">
+      <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search...">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/portainer/components/datatables/tags-datatable/tagsDatatable.js

@@ -8,7 +8,6 @@ angular.module('portainer.app').component('tagsDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    showTextFilter: '<',
     removeAction: '<'
   }
 });

app/portainer/components/datatables/teams-datatable/teamsDatatable.html

@@ -5,11 +5,6 @@
         <div class="toolBarTitle">
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
         </div>
-        <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.state.displayTextFilter }" ng-click="$ctrl.updateDisplayTextFilter()" ng-if="$ctrl.showTextFilter">
-            <i class="fa fa-search" aria-hidden="true"></i> Search
-          </span>
-        </div>
       </div>
       <div class="actionBar">
         <button type="button" class="btn btn-sm btn-danger"
@@ -17,9 +12,9 @@
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
       </div>
-      <div class="searchBar" ng-if="$ctrl.state.displayTextFilter">
+      <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search...">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/portainer/components/datatables/teams-datatable/teamsDatatable.js

@@ -8,7 +8,6 @@ angular.module('portainer.app').component('teamsDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    showTextFilter: '<',
     removeAction: '<'
   }
 });

app/portainer/components/datatables/users-datatable/usersDatatable.html

@@ -5,11 +5,6 @@
         <div class="toolBarTitle">
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
         </div>
-        <div class="settings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.state.displayTextFilter }" ng-click="$ctrl.updateDisplayTextFilter()" ng-if="$ctrl.showTextFilter">
-            <i class="fa fa-search" aria-hidden="true"></i> Search
-          </span>
-        </div>
       </div>
       <div class="actionBar">
         <button type="button" class="btn btn-sm btn-danger"
@@ -17,9 +12,9 @@
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
       </div>
-      <div class="searchBar" ng-if="$ctrl.state.displayTextFilter">
+      <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search...">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/portainer/components/datatables/users-datatable/usersDatatable.js

@@ -8,7 +8,6 @@ angular.module('portainer.app').component('usersDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    showTextFilter: '<',
     removeAction: '<',
     authenticationMethod: '<'
   }

app/portainer/views/endpoints/endpoints.html

@@ -27,7 +27,7 @@
     <endpoints-datatable
     title-text="Endpoints" title-icon="fa-plug"
     dataset="endpoints" table-key="endpoints"
-    order-by="Name" show-text-filter="true"
+    order-by="Name" 
     endpoint-management="applicationState.application.endpointManagement"
     access-management="applicationState.application.authentication"
     remove-action="removeAction"

app/portainer/views/groups/groups.html

@@ -12,7 +12,7 @@
     <groups-datatable
     title-text="Endpoint groups" title-icon="fa-object-group"
     dataset="groups" table-key="groups"
-    order-by="Name" show-text-filter="true"
+    order-by="Name" 
     access-management="applicationState.application.authentication"
     remove-action="removeAction"
     ></groups-datatable>

app/portainer/views/registries/registries.html

@@ -73,7 +73,7 @@
     <registries-datatable
     title-text="Registries" title-icon="fa-database"
     dataset="registries" table-key="registries"
-    order-by="Name" show-text-filter="true"
+    order-by="Name" 
     access-management="applicationState.application.authentication"
     remove-action="removeAction"
     ></registries-datatable>

app/portainer/views/stacks/edit/stack.html

@@ -171,7 +171,7 @@
     <containers-datatable
       title-text="Containers" title-icon="fa-server"
       dataset="containers" table-key="stack-containers"
-      order-by="Status" show-text-filter="true"
+      order-by="Status" 
       show-ownership-column="applicationState.application.authentication"
       show-host-column="false"
       show-add-action="false"
@@ -184,7 +184,7 @@
     <services-datatable
     title-text="Services" title-icon="fa-list-alt"
     dataset="services" table-key="stack-services"
-    order-by="Name" show-text-filter="true"
+    order-by="Name" 
     nodes="nodes"
     agent-proxy="applicationState.endpoint.mode.agentProxy"
     show-ownership-column="false"

app/portainer/views/stacks/stacks.html

@@ -12,7 +12,7 @@
     <stacks-datatable
     title-text="Stacks" title-icon="fa-th-list"
     dataset="stacks" table-key="stacks"
-    order-by="Name" show-text-filter="true"
+    order-by="Name" 
     remove-action="removeAction"
     show-ownership-column="applicationState.application.authentication"
     ></stacks-datatable>

app/portainer/views/tags/tags.html

@@ -51,7 +51,7 @@
     <tags-datatable
     title-text="Tags" title-icon="fa-tags"
     dataset="tags" table-key="tags"
-    order-by="Name" show-text-filter="true"
+    order-by="Name" 
     remove-action="removeAction"
     ></tags-datatable>
   </div>

app/portainer/views/teams/teams.html

@@ -19,7 +19,7 @@
             <label for="teamname" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-9">
               <div class="input-group">
-                <input type="text" class="form-control" id="teamname" ng-model="formValues.Name" ng-change="checkNameValidity()" placeholder="e.g. development">
+                <input type="text" class="form-control" id="teamname" ng-model="formValues.Name" ng-change="checkNameValidity()" placeholder="e.g. development" auto-focus>
                 <span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[state.validName]" aria-hidden="true"></i></span>
               </div>
             </div>
@@ -69,7 +69,7 @@
     <teams-datatable
     title-text="Teams" title-icon="fa-users"
     dataset="teams" table-key="teams"
-    order-by="Name" show-text-filter="true"
+    order-by="Name"
     remove-action="removeAction"
     ></teams-datatable>
   </div>

app/portainer/views/users/users.html

@@ -22,7 +22,7 @@
             </label>
             <div class="col-sm-8">
               <div class="input-group">
-                <input type="text" class="form-control" id="username" ng-model="formValues.Username" ng-change="checkUsernameValidity()" placeholder="e.g. jdoe">
+                <input type="text" class="form-control" id="username" ng-model="formValues.Username" ng-change="checkUsernameValidity()" placeholder="e.g. jdoe" auto-focus>
                 <span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[state.validUsername]" aria-hidden="true"></i></span>
               </div>
             </div>
@@ -117,7 +117,7 @@
     <users-datatable
     title-text="Users" title-icon="fa-user"
     dataset="users" table-key="users"
-    order-by="Username" show-text-filter="true"
+    order-by="Username"
     authentication-method="AuthenticationMethod"
     remove-action="removeAction"
     ></users-datatable>