= ({
- 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 title = selected === LEGACY_DASHBOARDS_KEY ? legacyDashboardsTitle : selected;
-
- 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: React.MouseEvent | React.ChangeEvent, value: string) => void;
- shortCut?: string;
- selected?: string;
-};
-
-export default ProjectDropdown;
diff --git a/web/src/components/dashboards/perses/project/ProjectMenuToggle.tsx b/web/src/components/dashboards/perses/project/ProjectMenuToggle.tsx
deleted file mode 100644
index 99594d4d7..000000000
--- a/web/src/components/dashboards/perses/project/ProjectMenuToggle.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { ReactElement, RefObject } from 'react';
-import { useRef, useEffect } from 'react';
-import { MenuToggle, Popper } from '@patternfly/react-core';
-import classNames from 'classnames';
-
-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/components/dashboards/perses/project/useActiveProject.tsx b/web/src/components/dashboards/perses/project/useActiveProject.tsx
deleted file mode 100644
index 5643ada83..000000000
--- a/web/src/components/dashboards/perses/project/useActiveProject.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
- K8sResourceKind,
- useActiveNamespace,
- useK8sWatchResource,
-} from '@openshift-console/dynamic-plugin-sdk';
-import { useState, useEffect } from 'react';
-import { ProjectModel } from '../../../console/models';
-import { usePerspective } from '../../../hooks/usePerspective';
-import { usePerses } from '../hooks/usePerses';
-import { QueryParams } from '../../../query-params';
-import { StringParam, useQueryParam } from 'use-query-params';
-
-export const useActiveProject = () => {
- const [activeProject, setActiveProject] = useState(null);
- const [activeNamespace, setActiveNamespace] = useActiveNamespace();
- const { perspective } = usePerspective();
- const { persesProjects, persesProjectsLoading } = usePerses();
- const [projectFromUrl, setProject] = useQueryParam(QueryParams.Project, StringParam);
- const [namespaces, namespacesLoaded] = useK8sWatchResource({
- isList: true,
- kind: ProjectModel.kind,
- optional: true,
- });
-
- // Sync the state and the URL param
- useEffect(() => {
- if (!activeProject && projectFromUrl) {
- setActiveProject(projectFromUrl);
- return;
- }
- if (persesProjectsLoading) {
- return;
- }
- // If the url and the data is out of sync, follow the data
- if (activeProject) {
- setProject(activeProject);
- }
- }, [
- projectFromUrl,
- activeProject,
- perspective,
- persesProjects,
- persesProjectsLoading,
- setProject,
- ]);
-
- // Sync the activeProject and activeNamespace changes
- useEffect(() => {
- if (!activeProject || !namespacesLoaded || activeProject === activeNamespace) {
- return;
- }
-
- // If the project name exists as a namespace, set the active namespace
- if (namespaces.some((namespace) => namespace.metadata.name === activeProject)) {
- setActiveNamespace(activeProject);
- }
- }, [activeNamespace, setActiveNamespace, activeProject, namespaces, namespacesLoaded]);
-
- return {
- activeProject,
- setActiveProject,
- };
-};
diff --git a/web/src/components/dashboards/perses/project/utils.ts b/web/src/components/dashboards/perses/project/utils.ts
deleted file mode 100644
index 4a0352ea7..000000000
--- a/web/src/components/dashboards/perses/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/components/data-test.ts b/web/src/components/data-test.ts
index 87b377be6..55bdf2e46 100644
--- a/web/src/components/data-test.ts
+++ b/web/src/components/data-test.ts
@@ -292,6 +292,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 = {