From da18bc0993edb4ef1fc1133b00b1e7182fb8774f Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Mon, 29 Jul 2024 14:23:40 -0400
Subject: [PATCH] fix(masthead): correct styling of masthead icons and
 quickstart menu item (#1309)

---
 src/app/AppLayout/AppLayout.tsx           | 29 ++++++++++++++---------
 src/app/Settings/Config/FeatureLevels.tsx |  6 ++---
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index e166a0fdb..8dab6d7fe 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -73,7 +73,6 @@ import {
   BellIcon,
   CaretDownIcon,
   CogIcon,
-  EllipsisVIcon,
   ExternalLinkAltIcon,
   PlusCircleIcon,
   QuestionCircleIcon,
@@ -297,13 +296,12 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
   const UserInfoToggle = React.useCallback(
     (toggleRef: React.Ref<MenuToggleElement>) => (
-      <MenuToggle ref={toggleRef} onClick={handleUserInfoToggle} icon={CaretDownIcon}>
+      <MenuToggle variant="plainText" ref={toggleRef} onClick={handleUserInfoToggle} icon={CaretDownIcon}>
         {username || (
           <Icon size="sm">
             <UserIcon color="white" />
           </Icon>
         )}
-        <EllipsisVIcon />
       </MenuToggle>
     ),
     [username, handleUserInfoToggle],
@@ -333,8 +331,8 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
   const helpItems = React.useMemo(() => {
     return [
-      <DropdownItem key={'Quickstarts'}>
-        <NavLink to="/quickstarts">{t('AppLayout.APP_LAUNCHER.QUICKSTARTS')}</NavLink>
+      <DropdownItem key={'Quickstarts'} component={(props) => <Link {...props} to="/quickstarts" />}>
+        {t('AppLayout.APP_LAUNCHER.QUICKSTARTS')}
       </DropdownItem>,
       <DropdownItem key={'Documentation'} onClick={handleOpenDocumentation}>
         <span>{t('AppLayout.APP_LAUNCHER.DOCUMENTATION')}</span>
@@ -398,7 +396,9 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     onClick={handleNotificationCenterToggle}
                     aria-label="Notifications"
                   >
-                    <BellIcon />
+                    <Icon>
+                      <BellIcon />
+                    </Icon>
                   </NotificationBadge>
                 </ToolbarItem>
                 <ToolbarItem>
@@ -409,7 +409,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     data-quickstart-id="settings-link"
                     component={(props) => <Link {...props} to="/settings" />}
                   >
-                    <Icon size="sm">
+                    <Icon>
                       <CogIcon />
                     </Icon>
                   </Button>
@@ -421,14 +421,18 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                       <MenuToggle
                         ref={toggleRef}
-                        icon={<QuestionCircleIcon />}
+                        variant="plain"
                         className="application-launcher"
                         onClick={() => handleHelpToggle()}
                       >
-                        <EllipsisVIcon />
+                        <Icon>
+                          <QuestionCircleIcon />
+                        </Icon>
                       </MenuToggle>
                     )}
                     isOpen={showHelpDropdown}
+                    onOpenChange={(v) => setShowHelpDropdown(v)}
+                    onOpenChangeKeys={['Escape']}
                     popperProps={{
                       position: 'right',
                     }}
@@ -439,10 +443,11 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
               </ToolbarGroup>
               <ToolbarItem visibility={{ default: 'visible' }}>
                 <Dropdown
-                  isPlain
                   onSelect={() => setShowUserInfoDropdown(false)}
                   toggle={UserInfoToggle}
                   isOpen={showUserInfoDropdown}
+                  onOpenChange={(v) => setShowUserInfoDropdown(v)}
+                  onOpenChangeKeys={['Escape']}
                   popperProps={{
                     position: 'right',
                   }}
@@ -483,7 +488,9 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
               data-quickstart-id="nav-toggle-btn"
               data-tour-id="nav-toggle-btn"
             >
-              <BarsIcon />
+              <Icon>
+                <BarsIcon />
+              </Icon>
             </PageToggleButton>
           </MastheadToggle>
           <MastheadMain>
diff --git a/src/app/Settings/Config/FeatureLevels.tsx b/src/app/Settings/Config/FeatureLevels.tsx
index b24c53df4..66c38c626 100644
--- a/src/app/Settings/Config/FeatureLevels.tsx
+++ b/src/app/Settings/Config/FeatureLevels.tsx
@@ -71,10 +71,10 @@ const Component = () => {
             .filter((v) => typeof v === 'string')
             .map((v): { key: string; value: number } => ({ key: String(v), value: FeatureLevel[v] }))
             .filter((v) => {
-              if (!process.env.CRYOSTAT_AUTHORITY) {
-                return v.value !== FeatureLevel.DEVELOPMENT;
+              if ((process.env.NODE_ENV ?? '').toLowerCase() === 'development') {
+                return true;
               }
-              return true;
+              return v.value !== FeatureLevel.DEVELOPMENT;
             })
             .map((level) => (
               <SelectOption key={level.key} value={level.value}>