diff --git a/web/src/components/dashboards/perses/project/ProjectDropdown.tsx b/web/src/components/dashboards/perses/project/ProjectDropdown.tsx index e30fca273..194dc8a21 100644 --- a/web/src/components/dashboards/perses/project/ProjectDropdown.tsx +++ b/web/src/components/dashboards/perses/project/ProjectDropdown.tsx @@ -13,6 +13,8 @@ import { TextInput, EmptyStateActions, EmptyStateFooter, + Tooltip, + TooltipPosition, } from '@patternfly/react-core'; import fuzzysearch from 'fuzzysearch'; import { useTranslation } from 'react-i18next'; @@ -202,25 +204,47 @@ const ProjectDropdown: React.FC = ({ menuRef, }; - if (permissionsLoading || permissionsError || !allProjects || allProjects.length === 0) { - return null; + let title = t('All Projects'); + // While loading permissions, or if there is a permission error fallback to the "selected" value + // 'All Projects' is the user friendly ALL_NAMESPACES_KEY + if ( + selected && + (allProjects?.includes(selected) || permissionsLoading || !!permissionsError) && + selected !== ALL_NAMESPACES_KEY + ) { + title = selected; } - const title = selected && allProjects.includes(selected) ? selected : t('All Projects'); + const toggle = ( + } + menuRef={menuRef} + isOpen={isOpen} + title={`${t('Project')}: ${title}`} + onToggle={(menuState) => { + setOpen(menuState); + }} + shortCut={shortCut} + /> + ); return (
- } - menuRef={menuRef} - isOpen={isOpen} - title={`${t('Project')}: ${title}`} - onToggle={(menuState) => { - setOpen(menuState); - }} - shortCut={shortCut} - /> + {permissionsLoading ? ( + + {toggle} + + ) : permissionsError ? ( + + {toggle} + + ) : ( + toggle + )}
); };