feat(ui/datatables): add styles for nested tables [EE-3687] (#7440)

* feat(ui/datatables): add styles for nested tables

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;
 }

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);

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 {

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>

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 {

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">

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;
+}

app/react/components/datatables/InnerDatatable.module.css

@@ -1,3 +0,0 @@
-.inner-datatable thead {
-  background-color: var(--bg-inner-datatable-thead) !important;
-}

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>;
 }