= ({ disabled, onSelect, selected, shortCut }) => {
- const { t } = useTranslation(process.env.I18N_NAMESPACE);
- const menuRef = useRef(null);
- const [isOpen, setOpen] = useState(false);
- const { allProjects, permissionsLoading, permissionsError } = useEditableProjects();
-
- const menuProps = {
- setOpen,
- onSelect,
- selected,
- menuRef,
- };
-
- 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 toggle = (
- }
- menuRef={menuRef}
- isOpen={isOpen}
- title={`${t('Project')}: ${title}`}
- onToggle={(menuState) => {
- setOpen(menuState);
- }}
- shortCut={shortCut}
- />
- );
-
- return (
-
- {permissionsLoading ? (
-
- {toggle}
-
- ) : permissionsError ? (
-
- {toggle}
-
- ) : (
- toggle
- )}
-
- );
-};
-
-type ProjectDropdownProps = {
- disabled?: boolean;
- onSelect?: (event: ReactMouseEvent | ChangeEvent, value: string) => void;
- shortCut?: string;
- selected?: string;
-};
-
-export default ProjectDropdown;
diff --git a/web/src/features/perses-dashboards/components/project/ProjectMenuToggle.tsx b/web/src/features/perses-dashboards/components/project/ProjectMenuToggle.tsx
deleted file mode 100644
index 6c073bf84..000000000
--- a/web/src/features/perses-dashboards/components/project/ProjectMenuToggle.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { MenuToggle, Popper } from '@patternfly/react-core';
-import classNames from 'classnames';
-import type { ReactElement, RefObject } from 'react';
-import { useEffect, useRef } from 'react';
-
-const ProjectMenuToggle = (props: {
- disabled: boolean;
- menu: ReactElement;
- menuRef: RefObject;
- isOpen: boolean;
- shortCut?: string;
- title: string;
- onToggle: (state: boolean) => void;
- className?: string;
-}) => {
- const { menu, isOpen, shortCut, title, onToggle, disabled, menuRef, className } = props;
-
- const toggleRef = useRef(null);
- const containerRef = useRef(null);
-
- const handleMenuKeys = (event) => {
- if (
- shortCut &&
- event.key === shortCut &&
- event.target.nodeName !== 'INPUT' &&
- event.target.nodeName !== 'TEXTAREA' &&
- event.target.role !== 'textbox' &&
- event.target.role !== 'code'
- ) {
- onToggle(true);
- event.stopPropagation();
- event.preventDefault();
- }
-
- if (menuRef.current) {
- if (event.key === 'Escape') {
- onToggle(false);
- toggleRef.current.focus();
- }
- if (!menuRef.current?.contains(event.target) && event.key === 'Tab') {
- onToggle(false);
- }
- }
- };
-
- const handleMenuClick = (event) => {
- if (
- menuRef.current &&
- !menuRef.current?.contains(event.target) &&
- // Checking to see if user clicked on a favorite icon. This is needed because
- // if unfavoriting a item, PF removes the item from the DOM before
- // the click event is registered
- !event.target.closest?.('.pf-m-favorite') &&
- !toggleRef.current.contains(event.target)
- ) {
- onToggle(false);
- }
- };
-
- useEffect(() => {
- window.addEventListener('keyup', handleMenuKeys);
- window.addEventListener('click', handleMenuClick);
- return () => {
- window.removeEventListener('keyup', handleMenuKeys);
- window.removeEventListener('click', handleMenuClick);
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []); // This needs to be run only on component mount/unmount
-
- const toggle = (
- onToggle(!isOpen)}
- isExpanded={isOpen}
- disabled={disabled}
- className={classNames('co-namespace-dropdown__menu-toggle', className)}
- >
- {title}
-
- );
-
- return (
-
- );
-};
-
-export default ProjectMenuToggle;
diff --git a/web/src/features/perses-dashboards/components/project/utils.ts b/web/src/features/perses-dashboards/components/project/utils.ts
deleted file mode 100644
index 4a0352ea7..000000000
--- a/web/src/features/perses-dashboards/components/project/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const alphanumericCompare = (a: string, b: string): number => {
- const safeA = a || '';
- const safeB = b || '';
-
- return safeA.localeCompare(safeB, undefined, {
- numeric: true,
- sensitivity: 'base',
- });
-};
-
-// Common shortcuts than span pages.
-export const KEYBOARD_SHORTCUTS = Object.freeze({
- focusNamespaceDropdown: 'n',
-});
diff --git a/web/src/features/perses-dashboards/hooks/useDashboardsData.ts b/web/src/features/perses-dashboards/hooks/useDashboardsData.ts
index ca7532b9f..36372146d 100644
--- a/web/src/features/perses-dashboards/hooks/useDashboardsData.ts
+++ b/web/src/features/perses-dashboards/hooks/useDashboardsData.ts
@@ -12,7 +12,7 @@ import { useBoolean } from '@/shared/hooks/useBoolean';
import { getDashboardUrl, usePerspective } from '@/shared/hooks/usePerspective';
import { ALL_NAMESPACES_KEY } from '@/shared/utils/utils';
-// This hook syncs with mutliple external API's, redux, and URL state. Its a lot, but needs to all
+// This hook syncs with multiple external API's, redux, and URL state. Its a lot, but needs to all
// be in a single location
export const useDashboardsData = () => {
const navigate = useNavigate();
diff --git a/web/src/features/perses-dashboards/hooks/useEditableProjects.ts b/web/src/features/perses-dashboards/hooks/useEditableProjects.ts
deleted file mode 100644
index c610c7ade..000000000
--- a/web/src/features/perses-dashboards/hooks/useEditableProjects.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
-import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
-
-import { useOcpProjects } from '@/features/perses-dashboards/hooks/useOcpProjects';
-import {
- PersesUserPermissions,
- useFetchPersesPermissions,
-} from '@/features/perses-dashboards/utils/perses-client';
-
-interface Projects {
- editableProjects: string[] | undefined;
- allProjects: string[] | undefined;
-}
-
-const useUsername = (): string => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const getUser = (state: any) => state.sdkCore?.user;
- const user = useSelector(getUser);
- return user?.metadata?.name || user?.username;
-};
-
-const combinePersesAndOcpProjects = (
- persesUserPermissions: PersesUserPermissions,
- ocpProjects: K8sResourceKind[],
-): string[] => {
- const persesProjectNames = Object.keys(persesUserPermissions).filter((name) => name !== '*');
- const allAvailableProjects = new Set([...persesProjectNames]);
- ocpProjects.forEach((project) => {
- if (project.metadata?.name) {
- allAvailableProjects.add(project.metadata.name);
- }
- });
- return Array.from(allAvailableProjects);
-};
-
-const getEditableProjects = (
- persesUserPermissions: PersesUserPermissions,
- allAvailableProjects: string[],
-): string[] => {
- const editableProjectNames = new Set();
- Object.entries(persesUserPermissions).forEach(([projectName, permissions]) => {
- const hasDashboardPermissions = permissions.some((permission) => {
- const allActions = permission.actions.includes('*');
- const individualActions =
- permission.actions.includes('create') &&
- permission.actions.includes('update') &&
- permission.actions.includes('delete');
- const hasPermission =
- permission.scopes.includes('Dashboard') && (individualActions || allActions);
- return hasPermission;
- });
-
- if (hasDashboardPermissions) {
- if (projectName === '*') {
- allAvailableProjects.forEach((p) => editableProjectNames.add(p));
- } else {
- editableProjectNames.add(projectName);
- }
- }
- });
- return Array.from(editableProjectNames);
-};
-
-export const useEditableProjects = () => {
- const username = useUsername();
- const { ocpProjects } = useOcpProjects();
-
- const { persesUserPermissions, persesPermissionsLoading, persesPermissionsError } =
- useFetchPersesPermissions(username);
-
- const { editableProjects, allProjects }: Projects = useMemo(() => {
- if (persesPermissionsLoading) {
- return {
- editableProjects: undefined,
- allProjects: undefined,
- };
- }
- if (!persesUserPermissions) {
- return {
- editableProjects: undefined,
- allProjects: undefined,
- };
- }
- if (persesPermissionsError) {
- return {
- editableProjects: undefined,
- allProjects: undefined,
- };
- }
-
- const allAvailableProjects = combinePersesAndOcpProjects(persesUserPermissions, ocpProjects);
- const editableProjectNames = getEditableProjects(persesUserPermissions, allAvailableProjects);
-
- // Sort projects alphabetically
- const sortedEditableProjects = editableProjectNames.sort((a, b) => a.localeCompare(b));
- const sortedProjects = allAvailableProjects.sort((a, b) => a.localeCompare(b));
-
- return {
- editableProjects: sortedEditableProjects,
- allProjects: sortedProjects,
- };
- }, [persesPermissionsLoading, persesUserPermissions, persesPermissionsError, ocpProjects]);
-
- const hasEditableProject = useMemo(() => {
- return editableProjects ? editableProjects.length > 0 : false;
- }, [editableProjects]);
-
- return {
- editableProjects,
- allProjects,
- hasEditableProject,
- permissionsLoading: persesPermissionsLoading,
- permissionsError: persesPermissionsError,
- };
-};
diff --git a/web/src/features/perses-dashboards/hooks/usePersesDashboardAccess.ts b/web/src/features/perses-dashboards/hooks/usePersesDashboardAccess.ts
new file mode 100644
index 000000000..7143e54b4
--- /dev/null
+++ b/web/src/features/perses-dashboards/hooks/usePersesDashboardAccess.ts
@@ -0,0 +1,15 @@
+import { useAccessReview } from '@openshift-console/dynamic-plugin-sdk';
+
+export type DashboardVerb = 'create' | 'update' | 'delete';
+
+export const usePersesDashboardAccess = (
+ verb: DashboardVerb,
+ namespace: string | null = null,
+): [boolean, boolean] => {
+ return useAccessReview({
+ group: 'perses.dev',
+ resource: 'persesdashboards',
+ verb,
+ namespace,
+ });
+};
diff --git a/web/src/features/perses-dashboards/hooks/usePersesEditPermissions.ts b/web/src/features/perses-dashboards/hooks/usePersesEditPermissions.ts
deleted file mode 100644
index acfd8a875..000000000
--- a/web/src/features/perses-dashboards/hooks/usePersesEditPermissions.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useAccessReview } from '@openshift-console/dynamic-plugin-sdk';
-
-export const usePersesEditPermissions = (namespace: string | null = null) => {
- const [canCreate, createLoading] = useAccessReview({
- group: 'perses.dev',
- resource: 'persesdashboards',
- verb: 'create',
- namespace,
- });
-
- const [canUpdate, updateLoading] = useAccessReview({
- group: 'perses.dev',
- resource: 'persesdashboards',
- verb: 'update',
- namespace,
- });
-
- const [canDelete, deleteLoading] = useAccessReview({
- group: 'perses.dev',
- resource: 'persesdashboards',
- verb: 'delete',
- namespace,
- });
-
- const loading = createLoading || updateLoading || deleteLoading;
- const canEdit = canUpdate && canCreate && canDelete;
-
- return { canEdit, loading };
-};
diff --git a/web/src/features/perses-dashboards/pages/dashboard-list-page/DashboardList.tsx b/web/src/features/perses-dashboards/pages/dashboard-list-page/DashboardList.tsx
index d52321ccc..9b0b055e5 100644
--- a/web/src/features/perses-dashboards/pages/dashboard-list-page/DashboardList.tsx
+++ b/web/src/features/perses-dashboards/pages/dashboard-list-page/DashboardList.tsx
@@ -7,7 +7,6 @@ import {
FlexItem,
Label,
Title,
- Tooltip,
} from '@patternfly/react-core';
import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
import {
@@ -28,8 +27,7 @@ import {
RenameActionModal,
} from '@/features/perses-dashboards/components/DashboardActionModals';
import { useDashboardsData } from '@/features/perses-dashboards/hooks/useDashboardsData';
-import { useEditableProjects } from '@/features/perses-dashboards/hooks/useEditableProjects';
-import { usePersesEditPermissions } from '@/features/perses-dashboards/hooks/usePersesEditPermissions';
+import { usePersesDashboardAccess } from '@/features/perses-dashboards/hooks/usePersesDashboardAccess';
import { DashboardListFrame } from '@/features/perses-dashboards/pages/dashboard-list-page/DashboardListFrame';
import { useTableColumns } from '@/shared/components/table/hooks/useTableColumns';
import { rowFilter, useTableFilters } from '@/shared/components/table/hooks/useTableFilters';
@@ -54,26 +52,28 @@ const DashboardActionsCell = memo(
onRename,
onDuplicate,
onDelete,
- emptyActions,
}: {
project: string;
dashboard: DashboardResource;
onRename: (dashboard: DashboardResource) => void;
onDuplicate: (dashboard: DashboardResource) => void;
onDelete: (dashboard: DashboardResource) => void;
- emptyActions: { title: string; onClick: () => void }[];
}) => {
const { t } = useTranslation(process.env.I18N_NAMESPACE);
- const { permissionsLoading } = useEditableProjects();
- const { canEdit } = usePersesEditPermissions(project);
- const disabled = !canEdit;
+ const [canUpdate, updateChecking] = usePersesDashboardAccess('update', project);
+ const [canDelete, deleteChecking] = usePersesDashboardAccess('delete', project);
const rowSpecificActions = useMemo(
() => [
{
title: t('Rename dashboard'),
onClick: () => onRename(dashboard),
+ isAriaDisabled: updateChecking || !canUpdate,
+ tooltipProps:
+ !updateChecking && !canUpdate
+ ? { content: t('You do not have permission to edit dashboards in this project.') }
+ : undefined,
},
{
title: t('Duplicate dashboard'),
@@ -82,31 +82,27 @@ const DashboardActionsCell = memo(
{
title: t('Delete dashboard'),
onClick: () => onDelete(dashboard),
+ isAriaDisabled: deleteChecking || !canDelete,
+ tooltipProps:
+ !deleteChecking && !canDelete
+ ? { content: t('You do not have permission to delete dashboards in this project.') }
+ : undefined,
},
],
- [dashboard, onRename, onDuplicate, onDelete, t],
+ [
+ dashboard,
+ onRename,
+ onDuplicate,
+ onDelete,
+ t,
+ canUpdate,
+ updateChecking,
+ canDelete,
+ deleteChecking,
+ ],
);
- if (disabled) {
- return (
-
-
-
- );
- }
- if (permissionsLoading) {
- return (
-
-
-
- );
- }
-
- return ;
+ return ;
},
);
@@ -309,16 +305,6 @@ const DashboardsTable: FC = ({
setTargetedDashboard(undefined);
}, []);
- const emptyRowActions = useMemo(
- () => [
- {
- title: t("You don't have permissions for dashboard actions"),
- onClick: () => {},
- },
- ],
- [t],
- );
-
const pageRows: DataViewTr[] = useMemo(() => {
return sortedAndFilteredData
.slice((page - 1) * perPage, (page - 1) * perPage + perPage)
@@ -336,7 +322,6 @@ const DashboardsTable: FC = ({
onRename={handleRenameModalOpen}
onDuplicate={handleDuplicateModalOpen}
onDelete={handleDeleteModalOpen}
- emptyActions={emptyRowActions}
/>
),
props: { isActionCell: true },
@@ -346,7 +331,6 @@ const DashboardsTable: FC = ({
sortedAndFilteredData,
page,
perPage,
- emptyRowActions,
handleRenameModalOpen,
handleDuplicateModalOpen,
handleDeleteModalOpen,
@@ -466,7 +450,7 @@ export const DashboardList: FC = () => {
const { activeProject, persesDashboards, combinedInitialLoad } = useDashboardsData();
return (
-
+
= ({ activeProject, children }) => {
+export const DashboardListFrame: FC = ({ children }) => {
+ const { perspective } = usePerspective();
+ const navigate = useNavigate();
+
return (
<>
-
+ {
+ const url = `${getDashboardsListUrl(perspective)}`;
+ navigate(url);
+ }}
+ />
{children}
);
diff --git a/web/src/features/perses-dashboards/pages/dashboard-page/DashboardFrame.tsx b/web/src/features/perses-dashboards/pages/dashboard-page/DashboardFrame.tsx
index 0c3513bc6..ec7eb139e 100644
--- a/web/src/features/perses-dashboards/pages/dashboard-page/DashboardFrame.tsx
+++ b/web/src/features/perses-dashboards/pages/dashboard-page/DashboardFrame.tsx
@@ -1,12 +1,14 @@
+import { NamespaceBar } from '@openshift-console/dynamic-plugin-sdk';
import { FC, ReactNode } from 'react';
+import { useNavigate } from 'react-router';
import { DashboardHeader } from '@/features/perses-dashboards/components/DashboardHeader';
import { DashboardEmptyState } from '@/features/perses-dashboards/components/emptystates/DashboardEmptyState';
import { PersesWrapper } from '@/features/perses-dashboards/components/PersesWrapper';
-import { ProjectBar } from '@/features/perses-dashboards/components/project/ProjectBar';
import { ToastProvider } from '@/features/perses-dashboards/components/ToastProvider';
import { PagePadding } from '@/features/perses-dashboards/pages/dashboard-page/DashboardPagePadding';
import type { DashboardMetadata } from '@/features/perses-dashboards/types/types';
+import { getDashboardsListUrl, usePerspective } from '@/shared/hooks/usePerspective';
interface DashboardFrameProps {
activeProject: string | null;
@@ -21,9 +23,16 @@ export const DashboardFrame: FC = ({
dashboardDisplayName,
children,
}) => {
+ const { perspective } = usePerspective();
+ const navigate = useNavigate();
return (
<>
-
+ {
+ const url = `${getDashboardsListUrl(perspective)}`;
+ navigate(url);
+ }}
+ />
{activeProjectDashboardsMetadata?.length === 0 ? (
diff --git a/web/src/features/perses-dashboards/pages/dashboard-page/DashboardToolbar.tsx b/web/src/features/perses-dashboards/pages/dashboard-page/DashboardToolbar.tsx
index fa8a0599f..4a671f431 100644
--- a/web/src/features/perses-dashboards/pages/dashboard-page/DashboardToolbar.tsx
+++ b/web/src/features/perses-dashboards/pages/dashboard-page/DashboardToolbar.tsx
@@ -22,7 +22,7 @@ import { useTranslation } from 'react-i18next';
import { DashboardDropdown } from '@/features/perses-dashboards/components/DashboardDropdown';
import { useDashboardsData } from '@/features/perses-dashboards/hooks/useDashboardsData';
-import { usePersesEditPermissions } from '@/features/perses-dashboards/hooks/usePersesEditPermissions';
+import { usePersesDashboardAccess } from '@/features/perses-dashboards/hooks/usePersesDashboardAccess';
import { persesDashboardDataTestIDs } from '@/shared/constants/data-test';
export interface DashboardToolbarProps {
@@ -38,40 +38,17 @@ export interface DashboardToolbarProps {
}
export interface EditButtonProps {
- /**
- * The label used inside the button.
- */
- label?: string;
-
- /**
- * Handler that puts the dashboard into editing mode.
- */
onClick: () => void;
-
- /**
- * Whether the button is disabled.
- */
- disabled?: boolean;
-
- /**
- * Tooltip text to show when button is disabled.
- */
- disabledTooltip?: string;
-
- /**
- * Whether permissions are still loading.
- */
- loading?: boolean;
-
- /**
- * The active project/namespace for permissions check.
- */
activeProject?: string | null;
}
export const EditButton = ({ onClick, activeProject }: EditButtonProps): ReactElement => {
const { t } = useTranslation(process.env.I18N_NAMESPACE);
- const { canEdit, loading } = usePersesEditPermissions(activeProject);
+ const [canCreate, createLoading] = usePersesDashboardAccess('create', activeProject);
+ const [canUpdate, updateLoading] = usePersesDashboardAccess('update', activeProject);
+ const [canDelete, deleteLoading] = usePersesDashboardAccess('delete', activeProject);
+ const loading = createLoading || updateLoading || deleteLoading;
+ const canEdit = canUpdate && canCreate && canDelete;
const disabled = !canEdit;
const button = (
@@ -90,7 +67,7 @@ export const EditButton = ({ onClick, activeProject }: EditButtonProps): ReactEl
if (disabled && !loading) {
return (
-
+
{button}
);
diff --git a/web/src/features/perses-dashboards/utils/perses-client.ts b/web/src/features/perses-dashboards/utils/perses-client.ts
index c221f0a87..5c180a7e9 100644
--- a/web/src/features/perses-dashboards/utils/perses-client.ts
+++ b/web/src/features/perses-dashboards/utils/perses-client.ts
@@ -28,22 +28,6 @@ export const fetchPersesProjects = (): Promise => {
return consoleFetchJSON(persesURL);
};
-export interface PersesPermission {
- scopes: string[];
- actions: string[];
-}
-
-export type PersesUserPermissions = {
- [projectName: string]: PersesPermission[];
-};
-
-export const fetchPersesUserPermissions = (username: string): Promise => {
- const userPermissionsURL = `/api/v1/users/${encodeURIComponent(username)}/permissions`;
- const persesURL = `${PERSES_PROXY_BASE_PATH}${userPermissionsURL}`;
-
- return consoleFetchJSON(persesURL);
-};
-
export const fetchPersesDashboard = async (
project: string,
dashboardName: string,
@@ -74,28 +58,3 @@ export const useFetchPersesDashboard = (project: string, dashboardName: string)
persesDashboardLoading,
};
};
-
-export const useFetchPersesPermissions = (username: string) => {
- const {
- isLoading: persesPermissionsLoading,
- error: persesPermissionsError,
- data: persesUserPermissions,
- } = useQuery({
- queryKey: ['perses-user-permissions', username],
- queryFn: () => fetchPersesUserPermissions(username),
- enabled: !!username,
- staleTime: 5 * 60 * 1000, // Cache for 5 minutes
- refetchOnWindowFocus: true,
- retry: 2,
- onError: (error) => {
- // eslint-disable-next-line no-console
- console.warn('Failed to fetch Perses user permissions:', error);
- },
- });
-
- return {
- persesUserPermissions,
- persesPermissionsError,
- persesPermissionsLoading,
- };
-};
diff --git a/web/src/shared/constants/data-test.ts b/web/src/shared/constants/data-test.ts
index 5c8704c34..59bea5b7b 100644
--- a/web/src/shared/constants/data-test.ts
+++ b/web/src/shared/constants/data-test.ts
@@ -324,6 +324,9 @@ export const persesDashboardDataTestIDs = {
importDashboardButtonToolbar: 'import-dashboard-button-list-page',
editDashboardButtonToolbar: 'edit-dashboard-button-toolbar',
cancelButtonToolbar: 'cancel-button-toolbar',
+ createAccessDeniedHelperText: 'perses-create-access-denied-helper-text',
+ updateAccessDeniedHelperText: 'perses-update-access-denied-helper-text',
+ deleteAccessDeniedHelperText: 'perses-delete-access-denied-helper-text',
};
export const listPersesDashboardsDataTestIDs = {