storaged: utilize PF4 table classes for sidebar tables

So that it looks consistent with the rest of the tables in the storage page. Closes cockpit-project#14617
marusak · Oct 21, 2020 · 27381f0 · 27381f0
1 parent d1c503d
commit 27381f0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/pkg/storaged/side-panel.jsx b/pkg/storaged/side-panel.jsx
@@ -23,6 +23,8 @@ import React from "react";
 import { OptionalPanel } from "./optional-panel.jsx";
 import { get_block_link_parts, block_name } from "./utils.js";
 
+import { Spinner } from '@patternfly/react-core';
+
 const _ = cockpit.gettext;
 
 export class SidePanel extends React.Component {
@@ -56,12 +58,13 @@ export class SidePanel extends React.Component {
                            not_installed_text={this.props.not_installed_text}
                            install_title={this.props.install_title}>
                 { this.props.children.length > 0
-                    ? <table className={"table" + (this.props.hover !== false ? " table-hover" : "")}>
+                    ? <table className={"pf-c-table pf-m-compact" + (this.props.hover !== false ? " table-hover" : "")}>
                         <tbody>
                             { children }
                             { show_all_button }
                         </tbody>
                     </table>
+
                     : <div className="empty-panel-text">{this.props.empty_text}</div>
                 }
             </OptionalPanel>
@@ -97,16 +100,15 @@ export class SidePanelRow extends React.Component {
         let decoration = null;
         if (this.props.actions)
             decoration = (
-                <div className="sidepanel-row-decoration"
-                     role="presentation"
+                <div role="presentation"
                      onClick={eat_event}
                      onKeyPress={eat_event}>
                     {this.props.actions}
                 </div>);
         else if (client.path_jobs[job_path])
-            decoration = <div className="sidepanel-row-decoration spinner spinner-sm" />;
+            decoration = <Spinner size="sm" />;
         else if (client.path_warnings[job_path])
-            decoration = <div className="sidepanel-row-decoration pficon pficon-warning-triangle-o" />;
+            decoration = <div className="pficon pficon-warning-triangle-o" />;
 
         return (
             <tr data-testkey={this.props.testkey}
@@ -121,6 +123,8 @@ export class SidePanelRow extends React.Component {
                             <div className="sidepanel-row-devname">{this.props.devname}</div>
                         </div>
                     </div>
+                </td>
+                <td className="sidepanel-row-decoration">
                     {decoration}
                 </td>
             </tr>

diff --git a/pkg/storaged/storage.scss b/pkg/storaged/storage.scss
@@ -72,15 +72,15 @@
     text-overflow: ellipsis;
 }
 
-#storage .storage-sidebar .table {
+#storage .storage-sidebar table {
     table-layout:fixed;
 }
 
 #storage .ct-table th {
     font-weight: var(--pf-global--FontWeight--bold);
 }
 
-#storage .storage-sidebar .table td {
+#storage .storage-sidebar table td {
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: top;
@@ -653,7 +653,7 @@ td.storage-action {
 
 /* Overview side panels */
 
-#storage .storage-sidebar .table {
+#storage .storage-sidebar table {
     table-layout: fixed;
 }
 
@@ -666,8 +666,8 @@ td.storage-action {
     margin-right: 0.5em;
 }
 
-.sidepanel-row-body {
-    flex: auto;
+.sidepanel-row-name {
+    font-size: var(--pf-global--FontSize--md);
 }
 
 .sidepanel-row-info {
@@ -677,10 +677,9 @@ td.storage-action {
     justify-content: space-between;
 }
 
-.sidepanel-row-decoration {
-    align-self: center;
-    white-space: nowrap;
-    margin-left: 1em;
+.pf-c-table tbody > tr > td.sidepanel-row-decoration {
+    --pf-c-table--cell--Width: 10%;
+    width: var(--pf-c-table--cell--Width);
 }
 
 .sidepanel-row .spinner {

diff --git a/test/verify/check-storage-msdos b/test/verify/check-storage-msdos
@@ -84,7 +84,7 @@ class TestStorageMsDOS(StorageCase):
         self.content_dropdown_action(2, "Delete")
         self.confirm()
 
-        self.content_row_wait_in_col(2, 0, "Free space")
+        self.content_row_wait_in_col(2, 1, "Free space")
 
 
 if __name__ == '__main__':