From c1a4856e9d7d4ed487dc42f85a50a2e6cd9df376 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Fri, 12 Aug 2022 05:56:48 +0300
Subject: [PATCH] feat(ui/datatables): add styles for nested tables [EE-3687]
 (#7440)

* feat(ui/datatables): add styles for nested tables
---
 app/assets/css/app.css                        | 13 ------
 app/assets/css/theme.css                      |  6 ---
 app/assets/css/vendor-override.css            |  2 +-
 .../serviceTasksDatatable.html                | 46 ++++++++++---------
 .../applicationsDatatable.css                 |  4 +-
 .../applicationsDatatable.html                |  2 +-
 .../components/datatables/InnerDatatable.css  |  8 ++++
 .../datatables/InnerDatatable.module.css      |  3 --
 .../components/datatables/InnerDatatable.tsx  |  4 +-
 9 files changed, 39 insertions(+), 49 deletions(-)
 create mode 100644 app/react/components/datatables/InnerDatatable.css
 delete mode 100644 app/react/components/datatables/InnerDatatable.module.css

diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index 553173254..14112535a 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -149,19 +149,6 @@ a[ng-click] {
   background-color: var(--bg-item-highlighted-null-color);
 }
 
-.service-datatable {
-  background-color: var(--bg-item-highlighted-color);
-  padding: 2px;
-}
-
-.service-datatable thead {
-  background-color: var(--bg-service-datatable-thead) !important;
-}
-
-.service-datatable tbody {
-  background-color: var(--bg-service-datatable-tbody);
-}
-
 .fa.green-icon {
   color: #23ae89;
 }
diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 15ef50d81..e50508f98 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -134,10 +134,7 @@
   --bg-codemirror-selected-color: var(--grey-22);
   --bg-tooltip-color: var(--ui-gray-11);
   --bg-input-sm-color: var(--white-color);
-  --bg-service-datatable-thead: var(--grey-23);
   --bg-app-datatable-thead: var(--grey-23);
-  --bg-inner-datatable-thead: var(--grey-23);
-  --bg-service-datatable-tbody: var(--grey-24);
   --bg-app-datatable-tbody: var(--grey-24);
   --bg-multiselect-color: var(--white-color);
   --bg-daterangepicker-color: var(--white-color);
@@ -526,9 +523,6 @@
   --bg-form-control-disabled-color: var(--grey-1);
   --bg-input-sm-color: var(--black-color);
   --bg-item-highlighted-color: var(--black-color);
-  --bg-service-datatable-thead: var(--black-color);
-  --bg-inner-datatable-thead: var(--black-color);
-  --bg-service-datatable-tbody: var(--black-color);
   --bg-pagination-color: var(--grey-3);
   --bg-pagination-span-color: var(--ui-black);
   --bg-multiselect-color: var(--grey-1);
diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css
index 03f2dbcbb..2c0ded0ec 100644
--- a/app/assets/css/vendor-override.css
+++ b/app/assets/css/vendor-override.css
@@ -59,7 +59,7 @@ a:focus {
 }
 
 .table .table {
-  background-color: var(--bg-table-color);
+  background-color: initial;
 }
 
 .table-bordered {
diff --git a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
index f3d20bd3e..5608e9e84 100644
--- a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
+++ b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
@@ -1,28 +1,32 @@
-<div class="service-datatable">
+<div class="inner-datatable">
   <table class="table table-condensed table-hover nowrap-cells">
     <thead>
       <tr>
-        <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" style="width: 10%">
-          <a ng-click="$ctrl.changeOrderBy('Status.State')">
-            Status
-            <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status.State' && !$ctrl.state.reverseOrder"></i>
-            <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status.State' && $ctrl.state.reverseOrder"></i>
-          </a>
-          <span class="space-left">
-            <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
-            <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
-          </span>
-          <div class="dropdown-menu" uib-dropdown-menu>
-            <div class="tableMenu">
-              <div class="menuHeader"> Filter by state </div>
-              <div class="menuContent">
-                <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
-                  <input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
-                  <label for="filter_state_{{ $ctrl.serviceId }}_{{ $index }}">{{ filter.label }}</label>
+        <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" class="w-[10%]">
+          <div class="flex">
+            <table-column-header
+              col-title="'Status'"
+              can-sort="true"
+              is-sorted="$ctrl.state.orderBy === 'Status.State'"
+              is-sorted-desc="$ctrl.state.orderBy === 'Status.State' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('Status.State')"
+            ></table-column-header>
+            <span class="space-left">
+              <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
+              <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
+            </span>
+            <div class="dropdown-menu" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader"> Filter by state </div>
+                <div class="menuContent">
+                  <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
+                    <input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
+                    <label for="filter_state_{{ $ctrl.serviceId }}_{{ $index }}">{{ filter.label }}</label>
+                  </div>
+                </div>
+                <div>
+                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
                 </div>
-              </div>
-              <div>
-                <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
               </div>
             </div>
           </div>
diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.css b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.css
index 333b99887..93daf1350 100644
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.css
+++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.css
@@ -1,9 +1,9 @@
 .secondary-heading {
-  background-color: var(--bg-app-datatable-thead) !important;
+  background-color: transparent;
 }
 
 .secondary-body {
-  background-color: var(--bg-app-datatable-tbody);
+  background-color: transparent;
 }
 
 .datatable-wide {
diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
index 785f1667c..2ce98fd28 100644
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
+++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
@@ -113,7 +113,7 @@
     </div>
   </div>
   <!-- data table content -->
-  <div class="table-responsive">
+  <div class="inner-datatable">
     <table class="table table-hover table-filters nowrap-cells" data-cy="k8sApp-appTable">
       <thead ng-class="{ 'secondary-heading': !$ctrl.isPrimary }">
         <tr role="row">
diff --git a/app/react/components/datatables/InnerDatatable.css b/app/react/components/datatables/InnerDatatable.css
new file mode 100644
index 000000000..57e2a7131
--- /dev/null
+++ b/app/react/components/datatables/InnerDatatable.css
@@ -0,0 +1,8 @@
+.inner-datatable {
+  @apply border border-solid rounded-md border-gray-5 th-dark:border-gray-9;
+  overflow: hidden;
+}
+
+.inner-datatable table thead {
+  border-top: none !important;
+}
diff --git a/app/react/components/datatables/InnerDatatable.module.css b/app/react/components/datatables/InnerDatatable.module.css
deleted file mode 100644
index 39e3b7800..000000000
--- a/app/react/components/datatables/InnerDatatable.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.inner-datatable thead {
-  background-color: var(--bg-inner-datatable-thead) !important;
-}
diff --git a/app/react/components/datatables/InnerDatatable.tsx b/app/react/components/datatables/InnerDatatable.tsx
index 36a320b42..e0be535da 100644
--- a/app/react/components/datatables/InnerDatatable.tsx
+++ b/app/react/components/datatables/InnerDatatable.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 
-import styles from './InnerDatatable.module.css';
+import './InnerDatatable.css';
 
 export function InnerDatatable({ children }: PropsWithChildren<unknown>) {
-  return <div className={styles.innerDatatable}>{children}</div>;
+  return <div className="inner-datatable">{children}</div>;
 }