fix: OU-1195 ProjecDropdown update to utillize useEditableDashboard

Author: zhuje

web/src/components/dashboards/perses/project/ProjectDropdown.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import ProjectMenuToggle from './ProjectMenuToggle';
 import { alphanumericCompare } from './utils';
 import { usePerses } from '../hooks/usePerses';
+import { useEditableProjects } from '../hooks/useEditableProjects';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
 export const NoResults: React.FC<{
@@ -111,14 +112,13 @@ const ProjectMenu: React.FC<{
 
   const [filterText, setFilterText] = useState('');
 
-  const { persesProjects } = usePerses();
+  const { allProjects } = useEditableProjects();
 
   const optionItems = useMemo(() => {
-    const items = persesProjects.map((item) => {
-      const { name } = item.metadata;
-      const title = item?.spec?.display?.name ?? name ?? '';
-      return { title, key: name ?? '' };
-    });
+    const items =
+      allProjects?.map((projectName) => {
+        return { title: projectName, key: projectName };
+      }) || [];
 
     if (selected && !items.some((option) => option.key === selected)) {
       items.push({ title: selected, key: selected }); // Add current project if it isn't included
@@ -127,7 +127,7 @@ const ProjectMenu: React.FC<{
     items.unshift({ title: 'All Projects', key: '' });
 
     return items;
-  }, [persesProjects, selected]);
+  }, [allProjects, selected]);
 
   const isOptionShown = useCallback(
     (option) => {
@@ -191,7 +191,7 @@ const ProjectDropdown: React.FC<ProjectDropdownProps> = ({
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const menuRef = useRef(null);
   const [isOpen, setOpen] = useState(false);
-  const { persesProjectsError, persesProjectsLoading, persesProjects } = usePerses();
+  const { allProjects, permissionsLoading, permissionsError } = useEditableProjects();
 
   // const title = selected === LEGACY_DASHBOARDS_KEY ? legacyDashboardsTitle : selected;
 
@@ -202,14 +202,11 @@ const ProjectDropdown: React.FC<ProjectDropdownProps> = ({
     menuRef,
   };
 
-  if (persesProjectsLoading || persesProjectsError || persesProjects.length === 0) {
+  if (permissionsLoading || permissionsError || !allProjects || allProjects.length === 0) {
     return null;
   }
 
-  const selectedProject = persesProjects.find(
-    (persesProject) => persesProject.metadata.name === selected,
-  );
-  const title = selectedProject?.spec?.display?.name ?? t('All Projects');
+  const title = selected && allProjects.includes(selected) ? selected : t('All Projects');
 
   return (
     <div className="co-namespace-dropdown">