From cbdaea1aab09b5ba34ea86d6f0e3062d7d32c837 Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Tue, 24 Oct 2023 18:44:51 +0200
Subject: [PATCH] Fixes #36858 - Table index page design changes

---
 .../PF4/TableIndexPage/Table/Table.js         |  4 +--
 .../PF4/TableIndexPage/TableIndexPage.js      | 15 ++++++--
 .../PF4/TableIndexPage/TableIndexPage.scss    | 35 ++++++++++++-------
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
index 527501f04216..febd869f0fc7 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
@@ -78,7 +78,7 @@ export const Table = ({
         url={url}
         refreshData={refreshData}
       />
-      <TableComposable variant="compact" ouiaId="table">
+      <TableComposable variant="compact" ouiaId="table" isStriped>
         <Thead>
           <Tr ouiaId="table-header">
             {columnNamesKeys.map(k => (
@@ -122,7 +122,7 @@ export const Table = ({
             </Tr>
           )}
           {results.map((result, rowIndex) => (
-            <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`}>
+            <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`} isHoverable>
               {columnNamesKeys.map(k => (
                 <Td key={k} dataLabel={columnNames[k]}>
                   {columns[k].wrapper ? columns[k].wrapper(result) : result[k]}
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
index 7473d9423999..573fb9cfd761 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
@@ -174,7 +174,10 @@ const TableIndexPage = ({
           <BreadcrumbBar {...breadcrumbOptions} />
         </PageSection>
       )}
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection
+        variant={PageSectionVariants.light}
+        className="table-title-section"
+      >
         <TextContent>
           <Text ouiaId="header-text" component="h1">
             {header}
@@ -182,7 +185,10 @@ const TableIndexPage = ({
         </TextContent>
       </PageSection>
       {beforeToolbarComponent}
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection
+        variant={PageSectionVariants.light}
+        className="table-toolbar-section"
+      >
         <Toolbar ouiaId="table-toolbar" className="table-toolbar">
           <ToolbarContent>
             {searchable && (
@@ -214,7 +220,10 @@ const TableIndexPage = ({
           </ToolbarContent>
         </Toolbar>
       </PageSection>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection
+        variant={PageSectionVariants.light}
+        className="table-section"
+      >
         {children || (
           <Table
             params={params}
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss
index a96ebf073026..ea34f3274f92 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss
@@ -1,20 +1,31 @@
 #foreman-page {
-  .table-toolbar {
-    padding: 0;
-    .pf-c-toolbar__content {
+  .table-title-section {
+    padding-bottom: 0;
+  }
+  .table-toolbar-section {
+    padding-top: 16px;
+    padding-bottom: 16px;
+    .table-toolbar {
       padding: 0;
+      .pf-c-toolbar__content {
+        padding: 0;
+      }
+      .toolbar-search {
+        flex-grow: 1;
+      }
+      .autocomplete-search {
+        max-width: 600px;
+      }
     }
-    .toolbar-search {
+    .pf-c-toolbar__group {
       flex-grow: 1;
-    }
-    .autocomplete-search {
-      max-width: 600px;
+      &.pf-m-align-right {
+        justify-content: flex-end;
+      }
     }
   }
-  .pf-c-toolbar__group {
-    flex-grow: 1;
-    &.pf-m-align-right{
-      justify-content: flex-end;
-    }
+  .table-section {
+    padding-top: 0;
+    padding-left: 0;
   }
 }