OU-1281: show disabled project bar while loading

[PeterYurkovich]

Summary by CodeRabbit

• Bug Fixes
  • Project dropdown no longer disappears during permission checks or load failures; it remains visible but disabled.
  • Displays contextual tooltips ("Checking permissions..." or "Failed to load permissions") when permission status is pending or errored.
  • Dropdown title reliably defaults to "All Projects" or shows the currently selected project when appropriate.

[openshift-ci-robot]

@PeterYurkovich: This pull request references OU-1281 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the bug to target either version "5.0." or "openshift-5.0.", but it targets "COO 1.5.0" instead.

Details

In response to this:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited)

Review profile: CHILL

Plan: Enterprise

Run ID: 98011f8d-f3e7-4f67-b764-ca555991e84a

📥 Commits

Reviewing files that changed from the base of the PR and between 3b25648 and d8a86b5.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

Walkthrough

Always render the project dropdown toggle in ProjectDropdown.tsx; disable it when permissions are loading or errored, compute a dynamic title (default "All Projects" with conditional fallback to selected), and show a Tooltip indicating "Checking permissions..." or "Failed to load permissions" as appropriate.

Changes

Dropdown UX during permission loading/error

Layer / File(s)

Summary

Toggle rendering, title logic, and tooltip wiring web/src/components/dashboards/perses/project/ProjectDropdown.tsx

Always render ProjectMenuToggle. Compute title defaulting to "All Projects", but use selected when set, not ALL_NAMESPACES_KEY, and either present in allProjects or allowed during permissions loading/error. Disable the toggle when permissionsLoading or permissionsError is true. Wrap the toggle in PatternFly Tooltip with "Checking permissions..." during loading and "Failed to load permissions" on error. Add Tooltip/TooltipPosition imports.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

lgtm

Suggested reviewers

• zhuje
• jgbernalp

🚥 Pre-merge checks | ✅ 12

✅ Passed checks (12 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'show disabled project bar while loading' directly aligns with the main change: ProjectDropdown now renders a disabled toggle while permissions are loading.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	Check not applicable. PR modifies a React component file only. No Ginkgo test files are modified. Ginkgo framework is not used in this repo's test suite.
Test Structure And Quality	✅ Passed	Custom check for Ginkgo test code quality is not applicable to this PR. The PR modifies only a TypeScript React component (ProjectDropdown.tsx) and includes no test files, Ginkgo tests, or Go code.
Microshift Test Compatibility	✅ Passed	No Ginkgo e2e tests are added in this PR. The only change is to a React TypeScript UI component (ProjectDropdown.tsx). The MicroShift Test Compatibility check is not applicable.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	This PR modifies a React UI component and adds Cypress component tests. The SNO compatibility check is for Ginkgo e2e tests, which do not exist in this repository or PR.
Topology-Aware Scheduling Compatibility	✅ Passed	The changed file is a React UI component, not a deployment manifest, operator code, or controller. The custom check targets scheduling constraints in infrastructure code, not UI components.
Ote Binary Stdout Contract	✅ Passed	The OTE Binary Stdout Contract check is inapplicable. The repo is OpenShift Monitoring Plugin (UI), not a Test Extension binary. PR modifies ProjectDropdown.tsx (React), not OTE code.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	Check not applicable: PR modifies only TypeScript React components (ProjectDropdown.tsx), not Ginkgo e2e tests. Custom check applies only to new Ginkgo e2e tests for Go integration testing.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/src/components/dashboards/perses/project/ProjectDropdown.tsx`:
- Around line 233-236: The ProjectMenuToggle currently uses the disabled prop
when permissionsLoading is true which prevents hover/focus and blocks the
Tooltip; update ProjectMenuToggle to use isAriaDisabled={permissionsLoading}
(and only set disabled when you need to fully prevent focus/hover) so the toggle
still renders disabled styling and suppresses clicks but preserves hover/focus
events required by the Tooltip; change the usage in the component that renders
{toggle} (and mirror the pattern used in MetricsPage.tsx around line ~569) to
pass isAriaDisabled instead of disabled, and ensure any click handlers still
check permissionsLoading to fully block interaction if necessary.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited)

Review profile: CHILL

Plan: Enterprise

Run ID: d3d45047-d9b3-45c2-947b-8ea8b9443924

📥 Commits

Reviewing files that changed from the base of the PR and between 73591f7 and 1759511.

📒 Files selected for processing (1)

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

[jgbernalp]

/lgtm

[jgbernalp]

/hold

[jgbernalp]

/lgtm cancel

[jgbernalp]

/unhold

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/src/components/dashboards/perses/project/ProjectDropdown.tsx`:
- Around line 233-242: In ProjectDropdown.tsx fix the malformed JSX in the
conditional render: replace the literal "..." inside the Tooltip attributes with
valid props (for example TooltipPosition import and use
position={TooltipPosition.top} and any required aria or children props) and
remove the duplicated ternary branch so the render becomes a single
permissionsLoading ? <Tooltip ...>{toggle}</Tooltip> : permissionsError ?
<Tooltip ...>{toggle}</Tooltip> : toggle; ensure Tooltip, TooltipPosition,
permissionsLoading, permissionsError and toggle are referenced exactly as in the
file.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited)

Review profile: CHILL

Plan: Enterprise

Run ID: af73c185-fc50-4853-bfaf-9d3d98c62464

📥 Commits

Reviewing files that changed from the base of the PR and between 1759511 and 3b25648.

📒 Files selected for processing (1)

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

[jgbernalp]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jgbernalp, PeterYurkovich

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [PeterYurkovich,jgbernalp]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci]

@PeterYurkovich: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[PeterYurkovich]

/cherry-pick release-coo-ocp-4.22

[openshift-cherrypick-robot]

@PeterYurkovich: once the present PR merges, I will cherry-pick it on top of release-coo-ocp-4.22 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-coo-ocp-4.22

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[openshift-cherrypick-robot]

@PeterYurkovich: once the present PR merges, I will cherry-pick it on top of release-coo-ocp-4.22 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-coo-ocp-4.22

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[openshift-cherrypick-robot]

@PeterYurkovich: once the present PR merges, I will cherry-pick it on top of release-coo-ocp-4.22 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-coo-ocp-4.22

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[zhuje]

/label qe-approved

[openshift-cherrypick-robot]

@PeterYurkovich: new pull request created: #943

Details

In response to this:

/cherry-pick release-coo-ocp-4.22

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.