feat: OU-1195 [DashboardListPage] List OCP namespaces in Create Dashboard ProjectSelector

Author: zhuje

web/locales/en/plugin__monitoring-plugin.json

@@ -166,21 +166,66 @@
   "Time range": "Time range",
   "Refresh interval": "Refresh interval",
   "Could not parse JSON data for dashboard \"{{dashboard}}\"": "Could not parse JSON data for dashboard \"{{dashboard}}\"",
-  "Dashboard Variables": "Dashboard Variables",
+  "Rename Dashboard": "Rename Dashboard",
+  "Dashboard name": "Dashboard name",
+  "Renaming...": "Renaming...",
+  "Rename": "Rename",
+  "Loading...": "Loading...",
+  "Failed to load project permissions. Please refresh the page and try again.": "Failed to load project permissions. Please refresh the page and try again.",
+  "Select namespace": "Select namespace",
+  "Duplicate": "Duplicate",
+  "this dashboard": "this dashboard",
+  "Permanently delete dashboard?": "Permanently delete dashboard?",
+  "Are you sure you want to delete ": "Are you sure you want to delete ",
+  "? This action can not be undone.": "? This action can not be undone.",
+  "Deleting...": "Deleting...",
+  "Delete": "Delete",
+  "Must be 75 or fewer characters long": "Must be 75 or fewer characters long",
+  "Dashboard name '{{dashboardName}}' already exists in '{{projectName}}' project!": "Dashboard name '{{dashboardName}}' already exists in '{{projectName}}' project!",
+  "Project is required": "Project is required",
+  "Dashboard name is required": "Dashboard name is required",
+  "Failed to create dashboard. Please try again.": "Failed to create dashboard. Please try again.",
+  "Create": "Create",
+  "Create button is disabled because you do not have permission": "Create button is disabled because you do not have permission",
+  "Create Dashboard": "Create Dashboard",
+  "Select project": "Select project",
+  "Select a project": "Select a project",
+  "my-new-dashboard": "my-new-dashboard",
+  "Creating...": "Creating...",
+  "View and manage dashboards.": "View and manage dashboards.",
+  "Rename dashboard": "Rename dashboard",
+  "Duplicate dashboard": "Duplicate dashboard",
+  "Delete dashboard": "Delete dashboard",
+  "You don't have permissions to dashboard actions": "You don't have permissions to dashboard actions",
+  "Dashboard": "Dashboard",
+  "Project": "Project",
+  "Created on": "Created on",
+  "Last Modified": "Last Modified",
+  "Filter by name": "Filter by name",
+  "Filter by project": "Filter by project",
+  "No dashboards found": "No dashboards found",
+  "No results match the filter criteria. Clear filters to show results.": "No results match the filter criteria. Clear filters to show results.",
+  "No Perses dashboards are currently available in this project.": "No Perses dashboards are currently available in this project.",
+  "Clear all filters": "Clear all filters",
+  "Dashboard not found": "Dashboard not found",
+  "The dashboard \"{{name}}\" was not found in project \"{{project}}\".": "The dashboard \"{{name}}\" was not found in project \"{{project}}\".",
+  "Empty Dashboard": "Empty Dashboard",
+  "To get started add something to your dashboard": "To get started add something to your dashboard",
+  "Edit": "Edit",
+  "You don't have permission to edit this dashboard": "You don't have permission to edit this dashboard",
   "No matching datasource found": "No matching datasource found",
   "No Dashboard Available in Selected Project": "No Dashboard Available in Selected Project",
   "To explore data, create a dashboard for this project": "To explore data, create a dashboard for this project",
   "No Perses Project Available": "No Perses Project Available",
   "To explore data, create a Perses Project": "To explore data, create a Perses Project",
-  "Empty Dashboard": "Empty Dashboard",
-  "To get started add something to your dashboard": "To get started add something to your dashboard",
+  "Project is required for fetching project dashboards": "Project is required for fetching project dashboards",
   "No projects found": "No projects found",
   "No results match the filter criteria.": "No results match the filter criteria.",
   "Clear filters": "Clear filters",
   "Select project...": "Select project...",
   "Projects": "Projects",
-  "Project": "Project",
-  "Dashboard": "Dashboard",
+  "All Projects": "All Projects",
+  "useToast must be used within ToastProvider": "useToast must be used within ToastProvider",
   "Refresh off": "Refresh off",
   "{{count}} second_one": "{{count}} second",
   "{{count}} second_other": "{{count}} seconds",
@@ -203,7 +248,7 @@
   "Component(s)": "Component(s)",
   "Alert": "Alert",
   "Incidents": "Incidents",
-  "Clear all filters": "Clear all filters",
+  "Incident data is updated every few minutes. What you see may be up to 5 minutes old. Refresh the page to view updated information.": "Incident data is updated every few minutes. What you see may be up to 5 minutes old. Refresh the page to view updated information.",
   "Filter type selection": "Filter type selection",
   "Incident ID": "Incident ID",
   "Severity filters": "Severity filters",
@@ -303,6 +348,5 @@
   "No metrics targets found": "No metrics targets found",
   "Error loading latest targets data": "Error loading latest targets data",
   "Search by endpoint or namespace...": "Search by endpoint or namespace...",
-  "Text": "Text",
-  "Incident data is updated every few minutes. What you see may be up to 5 minutes old. Refresh the page to view updated information.":"Incident data is updated every few minutes. What you see may be up to 5 minutes old. Refresh the page to view updated information."
+  "Text": "Text"
 }

web/src/components/dashboards/perses/dashboard-action-modals.tsx

@@ -13,15 +13,11 @@ import {
   HelperTextItemVariant,
   ModalVariant,
   AlertVariant,
-  Select,
-  SelectOption,
-  SelectList,
-  MenuToggle,
-  MenuToggleElement,
   Stack,
   StackItem,
   Spinner,
 } from '@patternfly/react-core';
+import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -46,9 +42,8 @@ import {
   getResourceExtendedDisplayName,
 } from '@perses-dev/core';
 import { useToast } from './ToastProvider';
-import { usePerses } from './hooks/usePerses';
 import { generateMetadataName } from './dashboard-utils';
-import { useProjectPermissions } from './dashboard-permissions';
+import { useEditableProjects } from './hooks/useEditableProjects';
 import { t_global_spacer_200, t_global_font_weight_200 } from '@patternfly/react-tokens';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { usePerspective, getDashboardUrl } from '../../hooks/usePerspective';
@@ -189,19 +184,15 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
 
   const navigate = useNavigate();
   const { perspective } = usePerspective();
-  const [isProjectSelectOpen, setIsProjectSelectOpen] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<string | null>(null);
 
-  const { persesProjects, persesProjectsLoading } = usePerses();
-
-  const hookInput = useMemo(() => {
-    return persesProjects || [];
-  }, [persesProjects]);
-
-  const { editableProjects } = useProjectPermissions(hookInput);
-
-  const filteredProjects = useMemo(() => {
-    return persesProjects.filter((project) => editableProjects.includes(project.metadata.name));
-  }, [persesProjects, editableProjects]);
+  const {
+    editableProjects,
+    allProjects,
+    hasEditableProject,
+    permissionsLoading,
+    permissionsError,
+  } = useEditableProjects();
 
   const defaultProject = useMemo(() => {
     if (!dashboard) return '';
@@ -210,8 +201,8 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
       return dashboard.metadata.project;
     }
 
-    return filteredProjects[0]?.metadata.name || '';
-  }, [dashboard, editableProjects, filteredProjects]);
+    return allProjects[0] || '';
+  }, [dashboard, editableProjects, allProjects]);
 
   const { schema: validationSchema } = useDashboardValidationSchema(defaultProject, t);
 
@@ -226,24 +217,29 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
     },
   });
 
+  const selectedProjectName = form.watch('projectName');
+
+  const projectOptions = useMemo<TypeaheadSelectOption[]>(() => {
+    if (!editableProjects) {
+      return [];
+    }
+    return editableProjects.map((project) => ({
+      content: project,
+      value: project,
+      selected: project === selectedProjectName,
+    }));
+  }, [editableProjects, selectedProjectName]);
+
   const createDashboardMutation = useCreateDashboardMutation();
 
   React.useEffect(() => {
-    if (isOpen && dashboard && filteredProjects.length > 0 && defaultProject) {
+    if (isOpen && dashboard && editableProjects?.length > 0 && defaultProject) {
       form.reset({
         projectName: defaultProject,
         dashboardName: '',
       });
     }
-  }, [isOpen, dashboard, defaultProject, filteredProjects.length, form]);
-
-  const selectedProjectName = form.watch('projectName');
-  const selectedProjectDisplay = useMemo(() => {
-    const selectedProject = filteredProjects.find((p) => p.metadata.name === selectedProjectName);
-    return selectedProject
-      ? getResourceDisplayName(selectedProject)
-      : selectedProjectName || t('Select project');
-  }, [filteredProjects, selectedProjectName, t]);
+  }, [isOpen, dashboard, defaultProject, editableProjects?.length, form]);
 
   if (!dashboard) {
     return null;
@@ -295,18 +291,9 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
     form.reset();
   };
 
-  const onProjectToggle = () => {
-    setIsProjectSelectOpen(!isProjectSelectOpen);
-  };
-
-  const onProjectSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined,
-  ) => {
-    if (typeof value === 'string') {
-      form.setValue('projectName', value);
-      setIsProjectSelectOpen(false);
-    }
+  const onProjectSelect = (_event: any, selection: string) => {
+    form.setValue('projectName', selection);
+    setSelectedProject(selection);
   };
 
   return (
@@ -318,10 +305,15 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
       aria-labelledby="duplicate-modal"
     >
       <ModalHeader title="Duplicate Dashboard" labelId="duplicate-modal-title" />
-      {persesProjectsLoading ? (
+      {permissionsLoading ? (
         <ModalBody style={{ textAlign: 'center', padding: '2rem' }}>
           {t('Loading...')} <Spinner aria-label="Duplicate Dashboard Modal Loading" />
         </ModalBody>
+      ) : permissionsError ? (
+        <ModalBody style={{ textAlign: 'center', padding: '2rem' }}>
+          <ExclamationCircleIcon />
+          {t('Failed to load project permissions. Please refresh the page and try again.')}
+        </ModalBody>
       ) : (
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(processForm)}>
@@ -368,42 +360,28 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
                   <Controller
                     control={form.control}
                     name="projectName"
-                    render={({ field, fieldState }) => (
+                    render={({ fieldState }) => (
                       <FormGroup
                         label={t('Select namespace')}
                         isRequired
                         fieldId="duplicate-modal-select-namespace-form-group"
                         style={formGroupStyle}
                       >
                         <LabelSpacer />
-                        <Select
-                          id="duplicate-modal-select-namespace-form-group-select"
-                          isOpen={isProjectSelectOpen}
-                          selected={field.value}
+                        <TypeaheadSelect
+                          key={selectedProject || 'no-selection'}
+                          initialOptions={projectOptions}
+                          placeholder={t('Select namespace')}
+                          noOptionsFoundMessage={(filter) =>
+                            t(`No namespace found for "${filter}"`)
+                          }
+                          onClearSelection={() => {
+                            setSelectedProject(null);
+                          }}
                           onSelect={onProjectSelect}
-                          onOpenChange={setIsProjectSelectOpen}
-                          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                            <MenuToggle
-                              ref={toggleRef}
-                              onClick={onProjectToggle}
-                              isExpanded={isProjectSelectOpen}
-                              isFullWidth
-                            >
-                              {selectedProjectDisplay}
-                            </MenuToggle>
-                          )}
-                        >
-                          <SelectList>
-                            {filteredProjects.map((project) => (
-                              <SelectOption
-                                key={project.metadata.name}
-                                value={project.metadata.name}
-                              >
-                                {getResourceDisplayName(project)}
-                              </SelectOption>
-                            ))}
-                          </SelectList>
-                        </Select>
+                          isCreatable={false}
+                          maxMenuHeight="200px"
+                        />
                         {fieldState.error && (
                           <FormHelperText>
                             <HelperText>
@@ -430,6 +408,7 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
                 isDisabled={
                   !(form.watch('dashboardName') || '')?.trim() ||
                   !(form.watch('projectName') || '')?.trim() ||
+                  !hasEditableProject ||
                   createDashboardMutation.isPending
                 }
                 isLoading={createDashboardMutation.isPending}

web/src/components/dashboards/perses/dashboard-api.ts

@@ -1,9 +1,10 @@
-import { DashboardResource } from '@perses-dev/core';
+import { DashboardResource, ProjectResource } from '@perses-dev/core';
 import buildURL from './perses/url-builder';
 import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
 import { consoleFetchJSON } from '@openshift-console/dynamic-plugin-sdk';
 import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 import { StatusError } from '@perses-dev/core';
+import { PERSES_PROXY_BASE_PATH } from './perses-client';
 
 const resource = 'dashboards';
 
@@ -121,3 +122,36 @@ export function useDashboardList(
     ...options,
   });
 }
+
+export const createPersesProject = async (projectName: string): Promise<ProjectResource> => {
+  const createProjectURL = '/api/v1/projects';
+  const persesURL = `${PERSES_PROXY_BASE_PATH}${createProjectURL}`;
+
+  const newProject: Partial<ProjectResource> = {
+    kind: 'Project',
+    metadata: {
+      name: projectName,
+      version: 0,
+    },
+    spec: {
+      display: {
+        name: projectName,
+      },
+    },
+  };
+
+  return consoleFetchJSON.post(persesURL, newProject);
+};
+
+export const useCreateProjectMutation = (): UseMutationResult<ProjectResource, Error, string> => {
+  const queryClient = useQueryClient();
+
+  return useMutation<ProjectResource, Error, string>({
+    mutationKey: ['projects'],
+    mutationFn: createPersesProject,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+      queryClient.invalidateQueries({ queryKey: [resource] });
+    },
+  });
+};