From ff10588383dec951844e7f19786a695c65749dd3 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Sun, 6 Nov 2022 09:33:22 +0200
Subject: [PATCH] fix(edge): show select all checkbox [EE-4129] (#7948)

---
 .../macvlanNodesDatatable.html                | 24 +++++++++--------
 .../edgeJobsDatatable.html                    | 20 +++++++++-----
 .../edgeStacksDatatable.html                  | 20 +++++++++-----
 .../strings-datatable/strings-datatable.html  | 26 ++++++++++---------
 4 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
index f16d9a3e9..36251f5e7 100644
--- a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
+++ b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
@@ -21,17 +21,19 @@
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <table-column-header
-                  col-title="'Name'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Hostname'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Hostname')"
-                ></table-column-header>
+                <div class="vertical-center">
+                  <span class="md-checkbox">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Hostname'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Hostname')"
+                  ></table-column-header>
+                </div>
               </th>
               <th>
                 <table-column-header
diff --git a/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html b/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html
index 332798d8d..8bfe323a3 100644
--- a/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html
+++ b/app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html
@@ -19,13 +19,19 @@
           <thead>
             <tr>
               <th>
-                <table-column-header
-                  col-title="'Name'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Name'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Name')"
-                ></table-column-header>
+                <div class="vertical-center">
+                  <span class="md-checkbox">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Name'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Name')"
+                  ></table-column-header>
+                </div>
               </th>
               <th>
                 <table-column-header
diff --git a/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html b/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html
index ee6d8113f..ffaed5b3a 100644
--- a/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html
+++ b/app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html
@@ -75,13 +75,19 @@
           <thead>
             <tr>
               <th>
-                <table-column-header
-                  col-title="'Name'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Name'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Name')"
-                ></table-column-header>
+                <div class="vertical-center">
+                  <span class="md-checkbox">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" data-cy="edgeStack-selectAllCheckbox" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Name'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Name')"
+                  ></table-column-header>
+                </div>
               </th>
               <th> Status </th>
               <th>
diff --git a/app/portainer/components/datatables/strings-datatable/strings-datatable.html b/app/portainer/components/datatables/strings-datatable/strings-datatable.html
index 496320b2f..8624a4eba 100644
--- a/app/portainer/components/datatables/strings-datatable/strings-datatable.html
+++ b/app/portainer/components/datatables/strings-datatable/strings-datatable.html
@@ -36,18 +36,20 @@
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <table-column-header
-                  col-title="$ctrl.columnHeader"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Name'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Name')"
-                  style="display: inline-block"
-                ></table-column-header>
+                <div class="vertical-center">
+                  <span class="md-checkbox">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="$ctrl.columnHeader"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Name'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Name')"
+                    style="display: inline-block"
+                  ></table-column-header>
+                </div>
               </th>
             </tr>
           </thead>