Migrate VM List screen to PF4

Includes: 1. toolbars 2. tooltips 3. spinner 4. masthead icons Fixes: 1. use translation independent filters 2. allow filter multiselection
oVirt · May 2, 2022 · b458525 · b458525
1 parent c0167be
commit b458525
Show file tree

Hide file tree

Showing 36 changed files with 926 additions and 899 deletions.
diff --git a/src/components/CreateVmWizard/AddVmButton.js b/src/components/CreateVmWizard/AddVmButton.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Button } from 'patternfly-react'
+import { Button } from '@patternfly/react-core'
 
 import * as Actions from '_/actions'
 import { CREATE_PAGE_TYPE } from '_/constants'
@@ -43,7 +43,6 @@ class AddVmButton extends React.Component {
       <>
         <Button
           id={`${id}-button`}
-          bsStyle='primary'
           onClick={this.openCreateWizard}
         >
           {msg.addNewVm()}

diff --git a/src/components/LoadingData/index.js b/src/components/LoadingData/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { withMsg } from '_/intl'
 
-import { Spinner } from 'patternfly-react'
+import { Spinner } from '@patternfly/react-core'
 
 import style from './style.css'
 
@@ -79,7 +79,7 @@ class LoadingData extends React.Component {
     return (
       <div className={this.props.inline ? style['loading-data-container-inline'] : style['loading-data-container-fixed']}>
 
-        <Spinner loading inline size='md' />
+        <Spinner size='md' isSVG />
 
         <div className={style['loading-data-message']}>
           {msg.loadingTripleDot()}

diff --git a/src/components/Settings/SettingsToolbar.js b/src/components/Settings/SettingsToolbar.js
@@ -1,7 +1,13 @@
 import React, { useContext, useEffect, useState } from 'react'
 import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
-import { Toolbar } from 'patternfly-react'
+import {
+  Button,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 
 import style from './style.css'
@@ -40,7 +46,7 @@ const SettingsToolbar = ({ onSave, onReset, onCancel, enableSave, enableReset, t
   }
 
   return ReactDOM.createPortal(
-    <Toolbar className={style.toolbar}>
+    <>
       <ConfirmationModal
         show={showSaveConfirmModal}
         title={msg.saveChanges()}
@@ -63,38 +69,32 @@ const SettingsToolbar = ({ onSave, onReset, onCancel, enableSave, enableReset, t
           onClick: onResetConfirm,
         }}
       />
-      <button
-        className='btn btn-default'
-        disabled={!enableReset}
-        onClick={(e) => {
-          e.preventDefault()
-          setShowResetConfirmModal(true)
-        }}
-      >
-        {msg.resetSettings()}
-      </button>
-      <Toolbar.RightContent>
-        <button
-          onClick={e => {
-            e.preventDefault()
-            onCancel()
-          }}
-          className='btn btn-default'
-        >
-          {msg.cancel()}
-        </button>
-        <button
-          disabled={!enableSave}
-          onClick={e => {
-            e.preventDefault()
-            setShowSaveConfirmModal(true)
-          }}
-          className='btn btn-primary'
-        >
-          {msg.save()}
-        </button>
-      </Toolbar.RightContent>
-    </Toolbar>,
+      <Toolbar isFullHeight isSticky alignment={{ default: 'alignLeft' }} className={style['settings-toolbar']}>
+        <ToolbarContent>
+          <ToolbarGroup variant='button-group' alignment={{ default: 'alignLeft' }}>
+            <ToolbarItem>
+              <Button isDisabled={!enableReset} onClick={() => setShowResetConfirmModal(true) } >
+                {msg.resetSettings()}
+              </Button>
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarGroup variant='button-group' alignment={ { default: 'alignRight' } } >
+            <ToolbarItem>
+              <Button onClick={ onCancel } variant='link' >
+                {msg.cancel()}
+              </Button>
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button isDisabled={!enableSave} onClick={() => setShowSaveConfirmModal(true)} >
+                {msg.save()}
+              </Button>
+            </ToolbarItem>
+          </ToolbarGroup>
+        </ToolbarContent>
+      </Toolbar>
+
+    </>
+    ,
     container
   )
 }

diff --git a/src/components/Settings/style.css b/src/components/Settings/style.css
@@ -58,8 +58,9 @@
     margin-right: 10px;
 }
 
-:global(#settings-toolbar) {
-    margin-left: -20px;
+.settings-toolbar {
+    padding-top: 5px;
+    padding-bottom: 5px;
 }
 
 .section-list{