Use Modal to show config errors and fix scrolling

Since we introduced PF4 together with the Drawer component to show the
config errors, we are not able to scroll the page by using the keyboard.
So far, no workaround really did the trick and every one came with
another drawback in different areas.

So we decided to ditch the Drawer component and use a Modal as
replacement. This should still serve the use case as we have "something
popping up when clicking on the bell icon", but this something doesn't
break the layout and/or the scrolling behaviour.

Additionally this change removes the "height: 100%" CSS rule on the root
element. In combination with the removed drawer this should restore the
scrolling behaviour via keyboard without introducing any further
drawbacks like wrong tabbing or focus behaviour.

For additional background information on this topic, please refer to the
changes [1], [2] and [3]. There is also a PF4 issue on Github available
[4].

[1] https://review.opendev.org/#/c/743239/
[2] https://review.opendev.org/#/c/743917/
[3] https://review.opendev.org/#/c/742759/
[4] https://github.com/patternfly/patternfly-react/issues/4624

Change-Id: I45df9cabc96d2d7fb4ddebdf1c72d0dd8a3adfd2

web/src/App.jsx

@@ -29,22 +29,16 @@ import {
   Brand,
   Button,
   ButtonVariant,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerPanelContent,
   Dropdown,
   DropdownItem,
   KebabToggle,
+  Modal,
   Nav,
   NavItem,
   NavList,
   NotificationBadge,
   NotificationDrawer,
   NotificationDrawerBody,
-  NotificationDrawerHeader,
   NotificationDrawerList,
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
@@ -218,7 +212,7 @@ class App extends React.Component {
     history.push(tenant.defaultRoute)
   }
 
-  handleDrawerClose = () => {
+  handleModalClose = () => {
     this.setState({
       showErrors: false
     })
@@ -245,6 +239,7 @@ class App extends React.Component {
 
   renderConfigErrors = (configErrors) => {
     const { history } = this.props
+    const { showErrors } = this.state
     const errors = []
     configErrors.forEach((item, idx) => {
       let error = item.error
@@ -274,29 +269,34 @@ class App extends React.Component {
     })
 
     return (
-      <DrawerPanelContent>
+      <Modal
+        isOpen={showErrors}
+        onClose={this.handleModalClose}
+        aria-label="Config Errors"
+        header={
+          <>
+            <span className="zuul-config-errors-title">
+              Config Errors
+            </span>
+            <span className="zuul-config-errors-count">
+              {errors.length} error(s)
+            </span>
+          </>
+        }
+      >
         <NotificationDrawer>
-          <NotificationDrawerHeader
-            count={errors.length}
-            title="Config Errors"
-            unreadText="error(s)"
-          >
-            <DrawerActions>
-              <DrawerCloseButton onClick={this.handleDrawerClose} />
-            </DrawerActions>
-          </NotificationDrawerHeader>
           <NotificationDrawerBody>
             <NotificationDrawerList>
               {errors.map(item => (item))}
             </NotificationDrawerList>
           </NotificationDrawerBody>
         </NotificationDrawer>
-      </DrawerPanelContent>
+      </Modal>
     )
   }
 
   render() {
-    const { isKebabDropdownOpen, showErrors } = this.state
+    const { isKebabDropdownOpen } = this.state
     const { errors, configErrors, tenant } = this.props
 
     const nav = this.renderMenu()
@@ -402,21 +402,14 @@ class App extends React.Component {
       />
     )
 
-    const drawerPanelContent = this.renderConfigErrors(configErrors)
-
     return (
       <React.Fragment>
         {errors.length > 0 && this.renderErrors(errors)}
+        {this.renderConfigErrors(configErrors)}
         <Page header={pageHeader}>
-          <Drawer isExpanded={showErrors}>
-            <DrawerContent panelContent={drawerPanelContent}>
-              <DrawerContentBody>
-                <ErrorBoundary>
-                  {this.renderContent()}
-                </ErrorBoundary>
-              </DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
+          <ErrorBoundary>
+            {this.renderContent()}
+          </ErrorBoundary>
         </Page>
       </React.Fragment>
     )

web/src/index.css

@@ -1,8 +1,3 @@
-#root {
-    /* This is needed to make the navigation bar fixed on top */
-    height: 100%;
-}
-
 body {
   margin: 0;
   padding: 0;
@@ -34,6 +29,15 @@ a.refresh {
     color: var(--pf-global--Color--dark-100);
 }
 
+/* Config error modal */
+.zuul-config-errors-title {
+    font-size: var(--pf-global--FontSize--xl);
+}
+
+.zuul-config-errors-count {
+    margin-left: var(--pf-global--spacer--md);
+}
+
 /* Build Lists */
 .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected),
 .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected) {