Redesign and fix the Mange domain page #4484
Conversation
WalkthroughRewrites the organization_manage_domains.html template into a header- and card-based layout. Adds client-side delete confirmation with a loading overlay, per-item View/Edit/Delete actions, URL normalization for display, empty-state messaging, data-name/data-url attributes, and modernized gradients/styling; removes fixed external links. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant B as Browser (UI)
participant S as Server
U->>B: Click "Delete" on a domain card
B->>U: Show confirmation dialog "Are you sure...?"
alt User confirms
B->>B: Display full-screen loading overlay
B->>S: Submit delete form (POST)
S-->>B: Return success/redirect
B->>U: Update page / navigate
else User cancels
B->>U: Dismiss dialog, no action
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Assessment against linked issues
(Only objectives present in linked issue #4483 were evaluated.) 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
website/templates/organization/dashboard/organization_manage_domains.html (4)
52-53: Avoid lowercasing None values in data attributes and displayIf
domain.urlis None,lowerwill stringify to "None". Usedefault_if_nonefirst.- data-url="{{ domain.url|lower }}"> + data-url="{{ domain.url|default_if_none:''|lower }}">- {{ domain.url }} + {{ domain.url|default_if_none:'' }}Also applies to: 74-74
164-176: Improve accessibility of the loading overlayAdd dialog semantics and live region for screen readers.
-<div id="loadingOverlay" - class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-50"> +<div id="loadingOverlay" + class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-50" + role="dialog" aria-modal="true" aria-labelledby="loadingTitle"> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> - <div class="bg-white rounded-lg p-6 flex items-center space-x-3"> + <div class="bg-white rounded-lg p-6 flex items-center space-x-3" role="status" aria-live="polite"> <svg class="animate-spin h-5 w-5 text-[#e74c3c]" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> </path> </svg> - <span class="text-gray-700">Loading...</span> + <span id="loadingTitle" class="text-gray-700">Loading...</span> </div> </div> </div>
51-51: Replace JS hover handlers with CSS utility classesNo need for JS listeners just to translate on hover; Tailwind utilities handle this more efficiently and accessibly.
-<div class="domain-item p-6 hover:bg-gray-50 transition-all duration-200" +<div class="domain-item p-6 hover:bg-gray-50 transform transition-transform duration-200 hover:translate-x-1" data-name="{{ domain.name|lower }}" data-url="{{ domain.url|lower }}">And remove the JS hover block:
- // Add hover effects - const domainItems = document.querySelectorAll('.domain-item'); - domainItems.forEach(item => { - item.addEventListener('mouseenter', function() { - this.style.transform = 'translateX(4px)'; - }); - - item.addEventListener('mouseleave', function() { - this.style.transform = 'translateX(0)'; - }); - });Also applies to: 200-210
25-37: Consider internationalization for user-visible stringsHard-coded English strings make localization harder. Wrap text in {% trans %} or {% blocktrans %}.
Examples:
- Manage Domains, Organize and control your domain portfolio
- All Domains
- View, Edit, Delete
- No domains yet, Get started by adding your first domain, Add Your First Domain
Also applies to: 47-47, 70-71, 94-95, 106-107, 124-125, 144-156
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (1)
website/templates/organization/dashboard/organization_manage_domains.html(1 hunks)
🔇 Additional comments (3)
website/templates/organization/dashboard/organization_manage_domains.html (3)
71-71: URL scheme normalization: keep as-is but ensure backend validationUsing
slice:':4' == 'http'suffices for http/https. Ensure backend validation enforces proper URL formats to prevent invalid entries.Do you already validate
domain.urlserver-side (e.g., URLField with a validator)? If not, consider enforcinghttps?://and stripping whitespace on save.
108-116: I didn’t find anydelete_domainroute in the main URLconfs, and our quick scan also didn’t locate anadd_domainpattern—so it’s unclear whether a dedicated delete endpoint exists or if deletion is handled by the add view via_method. Please double-check your URL configuration for both:• an
add_domainpattern (to confirm where the form is posting today)
• a matchingdelete_domain(or similarly named) endpoint you can call directlyIf neither exists, either introduce a proper delete URL or document that deletion is in-line via
_method.
83-96:view_domainonly requiresdomain.id
The URL inblt/urls.py(lines 889–892) is defined as:path( "organization/domain/<int:pk>/", login_required(DomainView.as_view()), name="view_domain", )It only takes the single
pkargument—noorganizationparameter is needed. The existing link<a href="{% url 'view_domain' domain.id %}">is correct; no changes required.
Likely an incorrect or invalid review comment.
fixes #4483
Summary by CodeRabbit
New Features
Style
Usability