Merge pull request #1584 from rszwajko/mastheadPF4

Migrate masthead to PF4 and clean-up PF3 CSS
oVirt · Jun 7, 2022 · 703b8f7 · 703b8f7
2 parents 26ac92c + 007eb00
commit 703b8f7
Show file tree

Hide file tree

Showing 47 changed files with 1,097 additions and 5,586 deletions.
diff --git a/branding/brand.css b/branding/brand.css
@@ -7,16 +7,8 @@
 
 *********************************************/
 
-:root {
-  --ovirt-masthead-height: 60px;
-  --ovirt-masthead-topborder-size: 4px;
-}
-
 /* --- Application: masthead --- */
 .obrand_masthead {
-  border-top: var(--ovirt-masthead-topborder-size) solid #00659c;
-  height: var(--ovirt-masthead-height);
-
   background-image: url(images/ovirt_masthead_bg.png);
   background-size: cover;
 }
@@ -25,7 +17,6 @@
   width: 272px;
   height: 16px;
   position: relative;
-  top: 9px;
   border: 0px;
   background-image: url(images/ovirt_masthead_logo.png);
   background-size: contain;

diff --git a/package.json b/package.json
@@ -38,8 +38,8 @@
     "eslint-webpack-plugin": "^2.6.0",
     "file-loader": "6.2.0",
     "filesize": "8.0.6",
-    "flow-bin": "0.164.0",
-    "flow-typed": "^3.3.1",
+    "flow-bin": "0.176.0",
+    "flow-typed": "^3.7.0",
     "gzip-size": "6.0.0",
     "handlebars": "4.7.7",
     "handlebars-loader": "1.7.1",
@@ -66,14 +66,11 @@
   },
   "dependencies": {
     "@closeio/use-infinite-scroll": "1.0.0",
-    "@patternfly/react-charts": "6.34.1",
-    "@patternfly/react-console": "^2.0.18",
-    "@patternfly/react-core": "4.181.1",
-    "@patternfly/react-icons": "4.32.1",
-    "@patternfly/react-table": "4.50.1",
-    "bootstrap": "3.4.1",
-    "bootstrap-select": "1.13.18",
-    "bootstrap-switch": "3.3.4",
+    "@patternfly/react-charts": "6.55.16",
+    "@patternfly/react-console": "4.53.20",
+    "@patternfly/react-core": "4.202.16",
+    "@patternfly/react-icons": "4.53.16",
+    "@patternfly/react-table": "4.71.16",
     "classnames": "2.3.1",
     "connected-react-router": "6.9.1",
     "core-js": "3.19.1",
@@ -85,13 +82,8 @@
     "lodash": "4.17.21",
     "moment": "2.29.1",
     "moment-duration-format": "2.3.2",
-    "patternfly": "3.59.5",
-    "patternfly-bootstrap-combobox": "1.1.7",
-    "patternfly-react": "2.40.0",
     "prop-types": "15.7.2",
     "react": "^16.8.6",
-    "react-bootstrap": "^0.33.0",
-    "react-bootstrap-switch": "15.5.3",
     "react-dom": "^16.8.6",
     "react-intl-po": "2.2.2",
     "react-redux": "7.2.6",
@@ -104,11 +96,8 @@
     "semver": "7.3.5"
   },
   "resolutions": {
-    "bootstrap-select": ">=1.13.6",
     "webpack/**/glob-parent": "^5.1.2",
-    "patternfly/**/jquery": ">=3.5.1",
-    "immer": ">=9.0.6",
-    "@patternfly/react-console/**/@novnc/novnc": "1.1.0"
+    "immer": ">=9.0.6"
   },
   "scripts": {
     "preinstall": "test -e scripts/yarn-preinstall.sh && scripts/yarn-preinstall.sh || :",

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
@@ -12,12 +12,19 @@ import RefreshIntervalChangeHandler from '_/components/RefreshIntervalChangeHand
 import SessionActivityTracker from '_/components/SessionActivityTracker'
 import ToastNotifications from '_/components/ToastNotifications'
 import VmsPageHeader from '_/components/VmsPageHeader'
+import VmUserMessages from '_/components/VmUserMessages'
 import ConsoleNotificationsDialog from '_/components/VmActions/ConsoleNotificationsDialog'
 
 import getRoutes from '_/routes'
 import { fixedStrings } from '_/branding'
 import { MsgContext } from '_/intl'
 
+import {
+  Page,
+} from '@patternfly/react-core'
+
+import Header from './components/Header'
+
 function isLoginMissing (config) {
   return !config.get('loginToken') || config.get('isTokenExpired')
 }
@@ -56,25 +63,41 @@ function isBrowserUnsupported () {
  */
 const App = ({ history, config, appReady, activateSessionTracker }) => {
   const { msg } = useContext(MsgContext)
+  const [isDrawerExpanded, setDrawerExpanded] = useState(false)
+  const toggleNotificationDrawer = () => setDrawerExpanded(!isDrawerExpanded)
+
   if (isBrowserUnsupported()) {
     return <UnsupportedBrowser />
   }
 
   if (isLoginMissing(config)) {
-    return <NoLogin logoutWasManual={config.get('logoutWasManual')} isTokenExpired={config.get('isTokenExpired')} />
+    return <div id='app-container'><NoLogin logoutWasManual={config.get('logoutWasManual')} isTokenExpired={config.get('isTokenExpired')} /></div>
   }
 
   return (
     <ConnectedRouter history={history}>
       <div id='app-container'>
-        <VmsPageHeader title={fixedStrings.BRAND_NAME + ' ' + msg.vmPortal()} />
-        <OvirtApiCheckFailed />
         <LoadingData />
         <ToastNotifications />
         <ConsoleNotificationsDialog/>
         { appReady && activateSessionTracker && <SessionActivityTracker /> }
-        { appReady && renderRoutes(getRoutes()) }
         { appReady && <RefreshIntervalChangeHandler /> }
+        <Page
+          header={(
+            <Header>
+              <VmsPageHeader
+                title={fixedStrings.BRAND_NAME + ' ' + msg.vmPortal()}
+                onCloseNotificationDrawer={toggleNotificationDrawer}
+                isDrawerExpanded={isDrawerExpanded}
+              />
+            </Header>
+          )}
+          notificationDrawer={<VmUserMessages onClose={toggleNotificationDrawer} />}
+          isNotificationDrawerExpanded={isDrawerExpanded}
+        >
+          <OvirtApiCheckFailed />
+          { appReady && renderRoutes(getRoutes()) }
+        </Page>
       </div>
     </ConnectedRouter>
   )

diff --git a/src/GlobalErrorBoundary.js b/src/GlobalErrorBoundary.js
@@ -4,6 +4,8 @@ import { msg, MsgContext, createMessages, locale } from './intl'
 import { logout } from '_/actions'
 import AppConfiguration from '_/config'
 import ErrorContent from '_/components/ErrorContent'
+import Header from './components/Header'
+import { Page } from '@patternfly/react-core'
 import * as branding from '_/branding'
 
 class GlobalErrorBoundary extends React.Component {
@@ -60,33 +62,33 @@ class GlobalErrorBoundary extends React.Component {
     const { hasError, msgContextState: { msg } } = this.state
     const trackText = branding.fixedStrings.ISSUES_TRACKER_TEXT || 'Github Issue Tracker'
     const trackUrl = branding.fixedStrings.ISSUES_TRACKER_URL || 'https://github.com/oVirt/ovirt-web-ui/issues'
-    const descr = msg.globalErrorBoundaryDescription({
-      bugUrl: `<a href='${trackUrl}'>${trackText}</a>`,
-    })
+    const descr = (
+      <p dangerouslySetInnerHTML={{
+        __html: msg.globalErrorBoundaryDescription({
+          bugUrl: `<a href='${trackUrl}'>${trackText}</a>`,
+        }),
+      }}
+      />
+    )
 
     if (hasError) {
       return (
-        <div>
-          <nav className='navbar navbar-pf-vertical obrand_masthead'>
-            <div className='navbar-header'>
-              <a href='/' className='navbar-brand obrand_headerLogoLink' id='pageheader-logo'>
-                <img className='obrand_mastheadLogo' src={branding.resourcesUrls.clearGif} />
-              </a>
-            </div>
-          </nav>
-          <ErrorContent
-            title={msg.globalErrorBoundaryTitle()}
-            description={descr}
-            leftButton={{
-              href: '#',
-              onClick: this.doLogout,
-              title: msg.logOut(),
-            }}
-            rightButton={{
-              href: AppConfiguration.applicationURL,
-              title: msg.refresh(),
-            }}
-          />
+        <div id="app-container">
+          <Page header={<Header/>}>
+            <ErrorContent
+              title={msg.globalErrorBoundaryTitle()}
+              description={descr}
+              leftButton={{
+                href: '#',
+                onClick: this.doLogout,
+                title: msg.logOut(),
+              }}
+              rightButton={{
+                href: AppConfiguration.applicationURL,
+                title: msg.refresh(),
+              }}
+            />
+          </Page>
         </div>
       )
     }

diff --git a/src/components/About/About.js b/src/components/About/About.js
@@ -25,88 +25,76 @@ const LegalInfo = () => {
   )
 }
 
-class AboutDialog extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = { openModal: false }
-  }
-
-  render () {
-    const { oVirtApiVersion, msg } = this.props
-    const idPrefix = 'about'
+const AboutDialog = ({ closeDialog, isOpen, oVirtApiVersion, msg }) => {
+  const idPrefix = 'about'
 
-    const webUiVersionText = msg.aboutDialogVersion({
-      version: `<strong id='${idPrefix}-version-value'>${Product.version}-${Product.release}</strong>`,
-    })
-
-    let apiVersion = 'unknown'
-    if (oVirtApiVersion && oVirtApiVersion.get('major')) {
-      apiVersion = `${oVirtApiVersion.get('major')}.${oVirtApiVersion.get('minor')}`
-    }
-    const apiVersionText = msg.aboutDialogApiVersion({
-      brandName: fixedStrings.BRAND_NAME,
-      version: `<strong id='${idPrefix}-apiversion-value'>${apiVersion}</strong>`,
-    })
+  const webUiVersionText = msg.aboutDialogVersion({
+    version: `<strong id='${idPrefix}-version-value'>${Product.version}-${Product.release}</strong>`,
+  })
 
-    const trackText = fixedStrings.ISSUES_TRACKER_TEXT || 'Github Issue Tracker'
-    const trackUrl = fixedStrings.ISSUES_TRACKER_URL || 'https://github.com/oVirt/ovirt-web-ui/issues'
-    const reportLink = msg.aboutDialogReportIssuesLink({
-      link: `<a href='${trackUrl}' target='_blank' id='${idPrefix}-issues-link'><strong>${trackText}</strong></a>`,
-    })
+  let apiVersion = 'unknown'
+  if (oVirtApiVersion && oVirtApiVersion.get('major')) {
+    apiVersion = `${oVirtApiVersion.get('major')}.${oVirtApiVersion.get('minor')}`
+  }
+  const apiVersionText = msg.aboutDialogApiVersion({
+    brandName: fixedStrings.BRAND_NAME,
+    version: `<strong id='${idPrefix}-apiversion-value'>${apiVersion}</strong>`,
+  })
 
-    const docLink = msg.aboutDialogDocumentationLink({
-      link: `<a href='${fixedStrings.DOCUMENTATION_LINK}' target='_blank' id='${idPrefix}-documentation-link'><strong>${msg.aboutDialogDocumentationText()}</strong></a>`,
-    })
-    const closeModal = () => this.setState({ openModal: false })
-    const openModal = () => this.setState({ openModal: true })
+  const trackText = fixedStrings.ISSUES_TRACKER_TEXT || 'Github Issue Tracker'
+  const trackUrl = fixedStrings.ISSUES_TRACKER_URL || 'https://github.com/oVirt/ovirt-web-ui/issues'
+  const reportLink = msg.aboutDialogReportIssuesLink({
+    link: `<a href='${trackUrl}' target='_blank' id='${idPrefix}-issues-link'><strong>${trackText}</strong></a>`,
+  })
 
-    return (
-      <>
-        <a href='#' id='about-modal-link' onClick={openModal}>{msg.about()}</a>
-        { this.state.openModal && (
-          <Modal
-            id={`${idPrefix}-modal`}
-            onClose={closeModal}
-            className={`${styles['about-modal']} obrand_aboutBackground`}
-            variant={ModalVariant.medium}
-            position='top'
-            isOpen={true}
+  const docLink = msg.aboutDialogDocumentationLink({
+    link: `<a href='${fixedStrings.DOCUMENTATION_LINK}' target='_blank' id='${idPrefix}-documentation-link'><strong>${msg.aboutDialogDocumentationText()}</strong></a>`,
+  })
+  const title = `${fixedStrings.BRAND_NAME} ${msg.vmPortal()}`
 
-          >
+  return (
+    <Modal
+      id={`${idPrefix}-modal`}
+      onClose={closeDialog}
+      className={`${styles['about-modal']} obrand_aboutBackground`}
+      variant={ModalVariant.medium}
+      position='top'
+      isOpen={isOpen}
+      aria-label={title}
+    >
 
-            <h1 id={`${idPrefix}-title`}>{fixedStrings.BRAND_NAME} {msg.vmPortal()}</h1>
-            <div className={styles['product-versions']}>
-              <ul className={styles['list-unstyled']}>
-                <li id={`${idPrefix}-version`}>
-                  <div dangerouslySetInnerHTML={{ __html: webUiVersionText }} />
-                </li>
-                <li id={`${idPrefix}-apiversion`}>
-                  <div dangerouslySetInnerHTML={{ __html: apiVersionText }} />
-                </li>
-                {fixedStrings.DOCUMENTATION_LINK && (
-                  <li id={`${idPrefix}-documentation`}>
-                    <span dangerouslySetInnerHTML={{ __html: docLink }} />
-                  </li>
-                )}
-                <li id={`${idPrefix}-issues`}>
-                  <div dangerouslySetInnerHTML={{ __html: reportLink }} />
-                </li>
-              </ul>
-            </div>
+      <h1 id={`${idPrefix}-title`}>{title}</h1>
+      <div className={styles['product-versions']}>
+        <ul className={styles['list-unstyled']}>
+          <li id={`${idPrefix}-version`}>
+            <div dangerouslySetInnerHTML={{ __html: webUiVersionText }} />
+          </li>
+          <li id={`${idPrefix}-apiversion`}>
+            <div dangerouslySetInnerHTML={{ __html: apiVersionText }} />
+          </li>
+          {fixedStrings.DOCUMENTATION_LINK && (
+            <li id={`${idPrefix}-documentation`}>
+              <span dangerouslySetInnerHTML={{ __html: docLink }} />
+            </li>
+          )}
+          <li id={`${idPrefix}-issues`}>
+            <div dangerouslySetInnerHTML={{ __html: reportLink }} />
+          </li>
+        </ul>
+      </div>
 
-            <LegalInfo />
-            <div className='obrand_aboutApplicationLogo' id={`${idPrefix}-applogo`} />
+      <LegalInfo />
+      <div className='obrand_aboutApplicationLogo' id={`${idPrefix}-applogo`} />
 
-          </Modal>
-        )}
-      </>
-    )
-  }
+    </Modal>
+  )
 }
 
 AboutDialog.propTypes = {
   oVirtApiVersion: PropTypes.object,
   msg: PropTypes.object,
+  isOpen: PropTypes.bool.isRequired,
+  closeDialog: PropTypes.func.isRequired,
 }
 
 export default connect(