EDM-2717: Show error and retry button if no organizations exist #440
Conversation
|
Warning Rate limit exceeded@celdrake has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 5 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
WalkthroughThese changes introduce a refetch mechanism to the organization context with empty-organization handling. New state flags track loading and empty states. The OrganizationSelector component conditionally displays organization-specific error messaging and a reload button based on the empty-organizations state, with supporting English translations added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant OrganizationSelector
participant OrganizationGuard
participant API as Organization API
User->>OrganizationSelector: Click "Reload organizations"
activate OrganizationSelector
OrganizationSelector->>OrganizationGuard: refetch(EXTRA_DELAY)
activate OrganizationGuard
OrganizationGuard->>OrganizationGuard: Set isReloading = true
OrganizationGuard->>OrganizationGuard: Wait extraDelay ms
OrganizationGuard->>API: Fetch organizations
activate API
API-->>OrganizationGuard: Organization list
deactivate API
OrganizationGuard->>OrganizationGuard: Validate & select org<br/>(handle empty case)
OrganizationGuard->>OrganizationGuard: Update context state<br/>(isReloading = false)
OrganizationGuard-->>OrganizationSelector: Promise resolved
deactivate OrganizationGuard
OrganizationSelector->>OrganizationSelector: Re-render based on<br/>isEmptyOrganizations
deactivate OrganizationSelector
OrganizationSelector->>User: Display updated UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
libs/i18n/locales/en/translation.json(1 hunks)libs/ui-components/src/components/common/OrganizationGuard.tsx(5 hunks)libs/ui-components/src/components/common/OrganizationSelector.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: celdrake
Repo: flightctl/flightctl-ui PR: 363
File: libs/ui-components/src/hooks/useWebSocket.ts:54-58
Timestamp: 2025-10-08T11:21:15.680Z
Learning: In flightctl-ui, when organizations are enabled, all API requests require the org_id parameter and fail with 403 if it's missing. This means users can only reach the Device details page (and its Terminal tab) if they have a valid organization selected, so organizationId will always be defined in that context.
Learnt from: celdrake
Repo: flightctl/flightctl-ui PR: 346
File: libs/ui-components/src/components/common/OrganizationGuard.tsx:54-62
Timestamp: 2025-09-17T12:24:09.201Z
Learning: In the Flight Control UI proxy, organization feature detection uses a 501 (Not Implemented) status code to explicitly signal when organizations are disabled via the ORGANIZATIONS_ENABLED setting. Any other status code (including errors like 404, 500) should be treated as organizations being enabled. The logic `organizationsEnabled = response.status !== 501` is correct and more resilient than checking `response.ok`.
🧬 Code graph analysis (1)
libs/ui-components/src/components/common/OrganizationSelector.tsx (1)
libs/ui-components/src/components/common/OrganizationGuard.tsx (1)
useOrganizationGuardContext(20-26)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: integration-tests
- GitHub Check: Build
- GitHub Check: Build ocp plugin
- GitHub Check: Lint
🔇 Additional comments (8)
libs/i18n/locales/en/translation.json (1)
228-229: LGTM! Clear and actionable user messaging.The new translation strings provide clear guidance for users who lack organization access and offer a straightforward retry action.
Also applies to: 233-233
libs/ui-components/src/components/common/OrganizationSelector.tsx (3)
42-42: LGTM! Reasonable delay for user feedback.The 450ms delay provides a brief moment for users to see that their action was acknowledged before the organizations are reloaded.
183-185: LGTM! Properly memoized refetch handler.The callback correctly passes the delay to the refetch function and is properly memoized to prevent unnecessary re-renders.
187-228: LGTM! Well-structured error handling with clear user guidance.The conditional error display effectively separates the empty-organizations scenario (with actionable guidance to contact an administrator) from fetch errors (with technical details). The reload button is properly disabled during the reload operation to prevent multiple concurrent requests.
libs/ui-components/src/components/common/OrganizationGuard.tsx (4)
13-15: LGTM! Context properly extended for reload functionality.The new context properties enable consumers to display loading states, detect empty-organization scenarios, and trigger manual reloads.
51-93: LGTM! Well-structured organization loading with proper error handling.The
fetchOrganizationsfunction consolidates initialization logic and correctly distinguishes between:
- Empty organizations (successful fetch with no items →
isEmptyOrganizations=true)- Fetch errors (network/API failures → standard error handling)
This distinction ensures users see appropriate messaging: "no access" for empty lists versus technical error details for fetch failures. The auto-selection of a single organization and cleanup of invalid stored data are good UX touches.
108-119: LGTM! Proper initialization with fetchOrganizations.The useEffect correctly calls the new
fetchOrganizationshelper for one-time initialization, protected by theinitializationStartedRefguard. The dependency suppression is justified since this should only run once on mount.
130-151: LGTM! Context value properly updated with new properties.The context value correctly includes the new
isEmptyOrganizations,isReloading, andrefetchproperties, and the dependency array is complete to ensure proper memoization.
celdrake
changed the title
celdrake
force-pushed
the
EDM-2717-show-error-with-empty-organizations
branch
from
1b5710f to
c4aec4c
Compare
(cherry picked from commit b84b74d)
2 participants
Example of how it would look like using mocked data (no organizations returned / failed to fetch organizations)
empty-orgs-error.mp4
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.