Bump PF version and remove some Custom CSS styles (#816)

* Bump PF version and remove some Custom CSS styles * update data-id * address comments
opendatahub-io · Nov 30, 2022 · 6fbcd27 · 6fbcd27
1 parent 1523431
commit 6fbcd27
Show file tree

Hide file tree

Showing 38 changed files with 466 additions and 689 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -38,14 +38,14 @@
   "dependencies": {
     "@openshift/dynamic-plugin-sdk": "^1.0.0-alpha12",
     "@openshift/dynamic-plugin-sdk-utils": "^1.0.0-alpha17",
-    "@patternfly/patternfly": "4.219.2",
+    "@patternfly/patternfly": "4.221.2",
     "@patternfly/quickstarts": "^2.3.1",
-    "@patternfly/react-catalog-view-extension": "4.92.55",
-    "@patternfly/react-core": "4.258.3",
-    "@patternfly/react-icons": "4.92.10",
-    "@patternfly/react-styles": "4.91.10",
-    "@patternfly/react-table": "4.111.33",
-    "@patternfly/react-virtualized-extension": "4.88.55",
+    "@patternfly/react-catalog-view-extension": "4.93.0",
+    "@patternfly/react-core": "4.264.0",
+    "@patternfly/react-icons": "4.93.0",
+    "@patternfly/react-styles": "4.92.0",
+    "@patternfly/react-table": "4.111.45",
+    "@patternfly/react-virtualized-extension": "4.88.67",
     "@types/classnames": "^2.3.1",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",

diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
@@ -3,129 +3,15 @@ html, body, #root {
 }
 
 .odh-dashboard {
-  &__error-body {
-    text-align: left;
-    white-space: pre;
-  }
-
-  &__display-error {
-    white-space: pre-wrap;
-  }
-
-  &__external-link {
-    > svg {
-      margin-left: var(--pf-global--spacer--xs);
-    }
-  }
-
-  &__notification-drawer {
-    .pf-c-notification-drawer__list-item-header-title {
-      font-size: 1em;
-    }
-    &__item-remove {
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-    .pf-c-notification-drawer__list-item-description.m-is-hidden {
-      display: none;
-    }
-  }
-
-  &__notifications {
-    position: fixed;
-    right: var(--pf-global--spacer--sm);
-    z-index: 2000;
-    .pf-c-alert {
-      margin-top: var(--pf-global--spacer--sm);
-      .pf-c-alert__action .pf-c-button {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    }
-    &__message {
-      .pf-c-notification-drawer__list & {
-        margin-left: var(--pf-global--spacer--lg);
-      }
-    }
-    &__list {
-      list-style: disc;
-      margin-left: 20px;
-      margin-bottom: var(--pf-global--spacer--sm);
-    }
-  }
-  &__favorite {
-    cursor: pointer;
-    position: relative;
-    &__outer {
-      fill: var(--pf-global--disabled-color--100);
-      .m-is-favorite & {
-        fill: var(--pf-global--palette--gold-200);
-      }
-    }
-    &__inner {
-      fill: var(--pf-global--BackgroundColor--100);
-      position: absolute;
-      top: 5px;
-      left: 2px;
-      width: calc(1em - 4px);
-      height: calc(1em - 4px);
-      .m-is-favorite & {
-        fill: var(--pf-global--palette--gold-200);
-      }
-    }
-  }
-  .pf-c-page__main {
-    height: 100%;
-  }
-  .pf-c-drawer__content {
-    overflow-y: auto;
-  }
-  .pf-c-page__main-section {
-    .pf-l-gallery {
-      --pf-l-gallery--GridTemplateColumns--max-on-xl: 330px;
-      --pf-l-gallery--GridTemplateColumns--max-on-lg: 330px;
-      --pf-l-gallery--GridTemplateColumns--max-on-md: 330px;
-      --pf-l-gallery--GridTemplateColumns--max-on-sm: 330px;
-      --pf-l-gallery--GridTemplateColumns--max: 330px;
-    }
-  }
-  // PF Overrides
-  .pf-c-page__header {
-    .pf-c-brand {
-      height: 36px;
-    }
-    .pf-c-dropdown__toggle {
-      .pf-c-dropdown__toggle-icon {
-        margin-left: var(--pf-global--spacer--xs);
-      }
-      &:before {
-        visibility: hidden;
-      }
-    }
-  }
-  .pf-c-drawer.pf-m-inline {
+  &__page-content {
+    border: 1px solid var(--pf-global--BorderColor--100);
+    display: flex;
     flex: 1;
+    margin: var(--pf-global--spacer--md);
   }
-  // Bootstrap Overrides (Bootstrap pulled in by @cloudmosaic/quickstarts)
-  code {
-    color: initial;
-    background-color: initial;
-  }
-
-  // PF Overrides
-  &.pf-c-page {
-    // TODO: Using the PF var doesn't work for some reason.
-    // @media (min-width: var(--pf-global--breakpoint--md)) {
-    @media (min-width: 768px) {
-      grid-template-columns: max-content 1fr;
-      grid-template-areas: "header header" "nav main";
-    }
-  }
-
   .pf-c-app-launcher__group-title {
     font-size: 13px;
   }
-
   .pf-c-app-launcher__menu-item-external-icon {
     opacity: 1;
     color: var(--pf-global--icon--Color--light);
@@ -138,10 +24,12 @@ html, body, #root {
   .pf-c-dropdown,
   .pf-c-dropdown__menu-item,
   .pf-c-dropdown__toggle,
+  .pf-c-select,
+  .pf-c-select__menu-item,
+  .pf-c-select__toggle,
+  .pf-c-text-input-group,
   .pf-c-form-control {
-    font-size: 14px;
+    font-size: var(--pf-global--FontSize--sm);
     height: auto;
   }
 }
-
-
diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
@@ -12,7 +12,6 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { detectUser } from '../redux/actions/actions';
-import { useDesktopWidth } from '../utilities/useDesktopWidth';
 import Header from './Header';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
@@ -29,8 +28,6 @@ import { useAppDispatch } from '../redux/hooks';
 import './App.scss';
 
 const App: React.FC = () => {
-  const isDeskTop = useDesktopWidth();
-  const [isNavOpen, setIsNavOpen] = React.useState(isDeskTop);
   const [notificationsOpen, setNotificationsOpen] = React.useState(false);
   const { username, userError, isAllowed } = useUser();
   const dispatch = useAppDispatch();
@@ -46,14 +43,6 @@ const App: React.FC = () => {
     dispatch(detectUser());
   }, [dispatch]);
 
-  React.useEffect(() => {
-    setIsNavOpen(isDeskTop);
-  }, [isDeskTop]);
-
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
-  };
-
   if (!username || !configLoaded || !dashboardConfig) {
     // We lack the critical data to startup the app
     if (userError || fetchConfigError) {
@@ -96,15 +85,13 @@ const App: React.FC = () => {
   return (
     <AppContext.Provider
       value={{
-        isNavOpen,
-        setIsNavOpen,
-        onNavToggle,
         buildStatuses,
         dashboardConfig,
       }}
     >
       <Page
         className="odh-dashboard"
+        isManagedSidebar
         header={<Header onNotificationsClick={() => setNotificationsOpen(!notificationsOpen)} />}
         sidebar={isAllowed ? <NavSidebar /> : undefined}
         notificationDrawer={<AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />}

diff --git a/frontend/src/app/AppContext.ts b/frontend/src/app/AppContext.ts
@@ -2,17 +2,11 @@ import * as React from 'react';
 import { BuildStatus, DashboardConfig } from '../types';
 
 type AppContextProps = {
-  isNavOpen: boolean;
-  setIsNavOpen: (isNavOpen: boolean) => void;
-  onNavToggle: () => void;
   buildStatuses: BuildStatus[];
   dashboardConfig: DashboardConfig;
 };
 
 const defaultAppContext: AppContextProps = {
-  isNavOpen: true,
-  setIsNavOpen: () => undefined,
-  onNavToggle: () => undefined,
   buildStatuses: [],
   // At runtime dashboardConfig is never null -- DO NOT DO THIS usually
   dashboardConfig: null as unknown as DashboardConfig,

diff --git a/frontend/src/app/AppNotificationDrawer.tsx b/frontend/src/app/AppNotificationDrawer.tsx
@@ -49,12 +49,9 @@ const AppNotificationDrawer: React.FC<AppNotificationDrawerProps> = ({ onClose }
     dispatch(removeNotification(notification));
   };
 
-  // FIXME: Remove blank item from NotificationDrawerHeader when https://github.com/patternfly/patternfly-react/issues/5924 is resolved
   return (
-    <NotificationDrawer className="odh-dashboard__notification-drawer">
-      <NotificationDrawerHeader count={newNotifications} onClose={onClose}>
-        {` `}
-      </NotificationDrawerHeader>
+    <NotificationDrawer>
+      <NotificationDrawerHeader count={newNotifications} onClose={onClose} />
       <NotificationDrawerBody>
         {notifications.length ? (
           <NotificationDrawerList>
@@ -69,20 +66,16 @@ const AppNotificationDrawer: React.FC<AppNotificationDrawerProps> = ({ onClose }
                   variant={notification.status}
                   title={notification.title}
                 >
-                  <div>
-                    <Button
-                      className="odh-dashboard__notification-drawer__item-remove"
-                      variant={ButtonVariant.plain}
-                      aria-label="remove notification"
-                      onClick={() => onRemoveNotification(notification)}
-                    >
-                      <TimesIcon aria-hidden="true" />
-                    </Button>
-                  </div>
+                  <Button
+                    variant={ButtonVariant.plain}
+                    aria-label="remove notification"
+                    onClick={() => onRemoveNotification(notification)}
+                  >
+                    <TimesIcon aria-hidden="true" />
+                  </Button>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody
                   timestamp={calculateRelativeTime(notification.timestamp, currentTime)}
-                  className={notification.message ? '' : 'm-is-hidden'}
                 >
                   {notification.message}
                 </NotificationDrawerListItemBody>

diff --git a/frontend/src/app/Header.tsx b/frontend/src/app/Header.tsx
@@ -1,39 +1,45 @@
 import React from 'react';
-import { Brand, PageHeader } from '@patternfly/react-core';
+import {
+  Brand,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  PageToggleButton,
+} from '@patternfly/react-core';
 import HeaderTools from './HeaderTools';
 import { ODH_LOGO, ODH_PRODUCT_NAME } from '../utilities/const';
-import { useAppContext } from './AppContext';
 import { useUser } from '../redux/selectors';
-import { useNavigate } from 'react-router-dom';
+import { BarsIcon } from '@patternfly/react-icons';
+import { Link } from 'react-router-dom';
 
 type HeaderProps = {
   onNotificationsClick: () => void;
 };
 
 const Header: React.FC<HeaderProps> = ({ onNotificationsClick }) => {
-  const { isNavOpen, onNavToggle } = useAppContext();
   const { isAllowed } = useUser();
-  const navigate = useNavigate();
   return (
-    <PageHeader
-      logo={
-        <Brand
-          src={`${window.location.origin}/images/${ODH_LOGO}`}
-          alt={`${ODH_PRODUCT_NAME} Logo`}
-        />
-      }
-      logoProps={{
-        onClick: (e: MouseEvent) => {
-          e.preventDefault();
-          navigate('/');
-        },
-        href: '/',
-      }}
-      headerTools={<HeaderTools onNotificationsClick={onNotificationsClick} />}
-      showNavToggle={isAllowed}
-      isNavOpen={isNavOpen}
-      onNavToggle={onNavToggle}
-    />
+    <Masthead>
+      {isAllowed && (
+        <MastheadToggle>
+          <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+      )}
+      <MastheadMain>
+        <MastheadBrand component={(props) => <Link {...props} to="/" />}>
+          <Brand heights={{ default: '36px' }} alt={`${ODH_PRODUCT_NAME} Logo`}>
+            <source srcSet={`${window.location.origin}/images/${ODH_LOGO}`} />
+          </Brand>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <HeaderTools onNotificationsClick={onNotificationsClick} />
+      </MastheadContent>
+    </Masthead>
   );
 };