Convert deprecated perspective dropdown to select

openshift · Sep 25, 2024 · 159fb4f · 159fb4f
1 parent 46b8993
commit 159fb4f
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 69 deletions.
diff --git a/frontend/packages/console-app/src/components/nav/NavHeader.scss b/frontend/packages/console-app/src/components/nav/NavHeader.scss
@@ -1,10 +1,10 @@
 @import '~@patternfly/patternfly/sass-utilities/all';
 @import '~@console/internal/style/vars';
 
-.oc-nav-header {
+.pf-v5-c-nav .oc-nav-header {
   border-bottom: 1px solid var(--pf-v5-global--BackgroundColor--dark-200);
-  padding: 0.6rem var(--pf-v5-global--spacer--sm);
   margin-top: var(--pf-v5-global--spacer--sm);
+  padding: 0.6rem var(--pf-v5-global--spacer--sm);
 
   :where(.pf-v5-theme-dark) & {
     // Match --pf-v5-c-nav__item--before--BorderColor
@@ -16,65 +16,56 @@
     padding-right: var(--pf-v5-global--spacer--md);
   }
 
-  &__icon {
-    margin-right: var(--pf-v5-global--spacer--sm);
-  }
-
-  &__dropdown-toggle--is-empty {
-    cursor: default !important;
+  .pf-v5-c-menu {
+     --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+     padding: var(--pf-v5-global--spacer--sm) 0;
+     :where(.pf-v5-theme-dark) & {
+       --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
+     }
   }
-  .pf-v5-c-dropdown {
-    --pf-v5-c-dropdown__menu-item--PaddingLeft: 7px;
-    width: 100%;
-    cursor: pointer;
 
-    &.pf-m-expanded {
-      .pf-v5-c-dropdown__toggle {
-        background-color: var(--pf-v5-global--BackgroundColor--dark-200);
-        :where(.pf-v5-theme-dark) & {
-          background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-        }
-      }
+  .pf-v5-c-menu__item {
+    color: var(--pf-v5-global--Color--100);
+    padding: var(--pf-v5-global--spacer--sm);
+    &::after,&::before {
+      border-style: hidden;
     }
   }
 
-  .pf-v5-c-dropdown__toggle {
-    :where(.pf-v5-theme-dark) & {
-      background-color: var(--pf-v5-c-page__sidebar--BackgroundColor);
+  .pf-v5-c-menu__item,
+  .pf-v5-c-menu__list-item {
+    &:hover,&:active,&:focus,&:focus-within {
+    --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+    --pf-v5-c-menu__list-item--Color: var(--pf-v5-global--Color--100, inherit);
+      :where(.pf-v5-theme-dark) & {
+        background-color: var(--pf-global--BackgroundColor--400);
+      }
     }
   }
 
-  .pf-v5-c-dropdown__menu-item,
-  // For Edge
-  .pf-v5-c-dropdown__toggle {
-    h1 {
-      font-size: $co-side-nav-font-size;
+  .pf-v5-c-menu-toggle {
+    &::after, &::before {
+      border-style: hidden;
     }
-  }
-
-  .pf-v5-c-dropdown__toggle {
-    font-size: $co-side-nav-font-size;
-    justify-content: space-between;
-    width: 100%;
 
-    .pf-c-dropdown__toggle-icon {
-      color: var(--pf-v5-global--Color--light-100);
-      font-size: $co-side-nav-section-font-size;
+    :where(.pf-v5-theme-dark) & {
+      --pf-v5-c-menu-toggle--BackgroundColor: transparent;
     }
 
-    .pf-v5-c-title {
-      color: var(--pf-v5-global--Color--light-100);
-      &.pf-m-md {
-        font-size: $co-side-nav-section-font-size;
-        font-family: var(
-          --pf-v5-global--FontFamily--text
-        ); // Use RedHatText to match side nav links because buttons by default use RedHatDisplay
+    &.pf-m-expanded {
+      --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
+      :where(.pf-v5-theme-dark) & {
+        background-color: var(--pf-v5-global--BackgroundColor--dark-300);
       }
     }
 
-    // Needed until https://github.com/patternfly/patternfly-design/issues/1068 is resolved
-    &:before {
-      border: none;
+    .pf-v5-c-title.pf-m-md {
+      font-family: var(--pf-v5-global--FontFamily--text);  // Use RedHatText to match side nav links because buttons by default use RedHatDisplay
+      font-size: $co-side-nav-section-font-size;
     }
   }
+
+  &__menu-toggle--is-empty {
+    cursor: default !important;
+  }
 }
diff --git a/frontend/packages/console-app/src/components/nav/NavHeader.tsx b/frontend/packages/console-app/src/components/nav/NavHeader.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Title } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownToggle as DropdownToggleDeprecated,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Title,
+} from '@patternfly/react-core';
 import * as cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Perspective, useActivePerspective } from '@console/dynamic-plugin-sdk';
@@ -36,8 +37,9 @@ const PerspectiveDropdownItem: React.FC<PerspectiveDropdownItemProps> = ({
     perspective.properties.icon,
   ]);
   return (
-    <DropdownItemDeprecated
+    <SelectOption
       key={perspective.properties.id}
+      // Should onClick actions be moved to <Select onSelect=...
       onClick={(e: React.MouseEvent<HTMLLinkElement>) => {
         e.preventDefault();
         onClick(perspective.properties.id);
@@ -51,7 +53,7 @@ const PerspectiveDropdownItem: React.FC<PerspectiveDropdownItemProps> = ({
       <Title headingLevel="h2" size="md" data-test-id="perspective-switcher-menu-option">
         {perspective.properties.name}
       </Title>
-    </DropdownItemDeprecated>
+    </SelectOption>
   );
 };
 
@@ -117,8 +119,9 @@ const NavHeader: React.FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
     ...perspectiveItems,
     ...(!acmPerspectiveExtension && acmLink
       ? [
-          <DropdownItemDeprecated
+          <SelectOption
             key={ACM_LINK_ID}
+            // Should onClick actions be moved to <Select onSelect=...
             onClick={() => {
               window.location.href = acmLink.spec.href;
             }}
@@ -129,7 +132,7 @@ const NavHeader: React.FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
               </span>
               {t('console-app~Advanced Cluster Management')}
             </Title>
-          </DropdownItemDeprecated>,
+          </SelectOption>,
         ]
       : []),
   ];
@@ -142,29 +145,32 @@ const NavHeader: React.FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
           data-tour-id="tour-perspective-dropdown"
           data-quickstart-id="qs-perspective-switcher"
         >
-          <DropdownDeprecated
+          <Select
             isOpen={isPerspectiveDropdownOpen}
-            toggle={
-              <DropdownToggleDeprecated
+            data-test-id="perspective-switcher-menu"
+            onOpenChange={(open) => setPerspectiveDropdownOpen(open)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                isFullWidth
+                data-test-id="perspective-switcher-toggle"
+                isExpanded={isPerspectiveDropdownOpen}
+                ref={toggleRef}
+                onClick={() => (perspectiveItems.length === 1 ? null : togglePerspectiveOpen())}
                 className={cx({
-                  'oc-nav-header__dropdown-toggle--is-empty': perspectiveItems.length === 1,
+                  'oc-nav-header__menu-toggle--is-empty': perspectiveItems.length === 1,
                 })}
-                isOpen={isPerspectiveDropdownOpen}
-                onToggle={() => (perspectiveItems.length === 1 ? null : togglePerspectiveOpen())}
-                toggleIndicator={perspectiveItems.length === 1 ? null : CaretDownIcon}
-                data-test-id="perspective-switcher-toggle"
                 icon={<LazyIcon />}
               >
                 {name && (
                   <Title headingLevel="h2" size="md">
                     {name}
                   </Title>
                 )}
-              </DropdownToggleDeprecated>
-            }
-            dropdownItems={perspectiveDropdownItems}
-            data-test-id="perspective-switcher-menu"
-          />
+              </MenuToggle>
+            )}
+          >
+            <SelectList>{perspectiveDropdownItems}</SelectList>
+          </Select>
         </div>
       )}
     </>