Fixes #36858 - Table index page design changes

theforeman · Oct 24, 2023 · cbdaea1 · cbdaea1
1 parent b8e2e05
commit cbdaea1
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 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
@@ -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
@@ -174,15 +174,21 @@ 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}
           </Text>
         </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
@@ -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;
   }
 }