Group Status UI Visibility Enhancement

Group Status UI Visibility Enhancement

Version: 0.234.004
Implemented in: 0.234.004
Type: Feature Enhancement
Related Feature: Group Status Management

Overview

This enhancement adds dynamic UI visibility controls that hide creation and upload elements when a group is in a restricted status (locked, upload_disabled, or inactive). This provides a better user experience by preventing users from attempting operations that will be blocked by backend enforcement.

Problem Statement

Previously, even when a group had a restricted status:

• Users could still see the upload area and attempt to upload documents
• Create buttons for prompts, agents, and actions were visible
• Users would click these elements and then receive error messages from the backend
• This created confusion and poor user experience

Solution

Added JavaScript functions that automatically hide/show UI elements based on the active group's status:

New Functions

1. updateGroupStatusAlert()

Updates the alert box at the top of the page to display the appropriate message based on group status.

Status Messages:

• Locked: Warning alert - "Group is currently locked. You cannot upload, delete, or chat."
• Upload Disabled: Info alert - "Document uploads are currently disabled. You can still view documents and chat."
• Inactive: Danger alert - "This group is inactive. All operations are disabled."
• Active: Alert box is hidden

2. updateGroupUIBasedOnStatus()

Hides or shows UI creation elements based on the group's status and permission rules.

Elements Controlled:

• upload-area - Document upload drop zone (line 300)
• create-group-prompt-btn - New Prompt button (line 530)
• create-group-agent-btn - New Agent button (line 634)
• create-group-plugin-btn - New Action button (line 688)

Visibility Rules:

Implementation Details

Integration Points

The new functions are called automatically at the following points:

1. Initial Page Load (fetchUserGroups())

   • When the page first loads and groups are fetched
   • Both functions are called after the active group is identified
   • Line ~1987 in group_workspaces.html

2. Group Change (onChangeActiveGroup())

   • When user switches to a different active group
   • Functions are called through fetchUserGroups() after the group change
   • Ensures UI updates immediately when switching between groups

Code Location

File: group_workspaces.html
Lines: ~1755-1810 (function definitions)
Integration: Line ~1987 (function calls)

Function Implementation

/**
 * Update the group status alert box based on the active group's status
 */
function updateGroupStatusAlert() {
  const activeGroup = userGroups.find(g => g.id === activeGroupId);
  const alertBox = document.getElementById("group-status-alert");
  
  if (!activeGroup || !alertBox) {
    return;
  }
  
  const status = activeGroup.status || 'active';
  const statusMessages = {
    'locked': {
      type: 'warning',
      icon: 'bi-lock-fill',
      title: 'Group Locked',
      message: 'This group is currently locked...'
    },
    // ... other status configurations
  };
  
  if (status === 'active') {
    alertBox.classList.add('d-none');
  } else {
    // Show appropriate alert
  }
}

/**
 * Hide/show UI elements based on the active group's status
 */
function updateGroupUIBasedOnStatus() {
  const activeGroup = userGroups.find(g => g.id === activeGroupId);
  
  if (!activeGroup) {
    return;
  }
  
  const status = activeGroup.status || 'active';
  
  // Get elements
  const uploadArea = document.getElementById('upload-area');
  const createPromptBtn = document.getElementById('create-group-prompt-btn');
  const createAgentBtn = document.getElementById('create-group-agent-btn');
  const createPluginBtn = document.getElementById('create-group-plugin-btn');
  
  // Determine permissions
  const canUpload = (status === 'active');
  const canCreateItems = (status === 'active');
  
  // Update visibility
  if (uploadArea) uploadArea.style.display = canUpload ? '' : 'none';
  if (createPromptBtn) createPromptBtn.style.display = canCreateItems ? '' : 'none';
  if (createAgentBtn) createAgentBtn.style.display = canCreateItems ? '' : 'none';
  if (createPluginBtn) createPluginBtn.style.display = canCreateItems ? '' : 'none';
  
  console.log(`UI updated for group ${activeGroupId} with status: ${status}`);
}

User Experience Improvements

Before This Enhancement

1. User sees upload area even in locked group
2. User attempts to upload a document
3. Backend rejects with error message
4. User confused about why upload failed

After This Enhancement

1. User sees that upload area is hidden
2. User sees alert explaining group is locked
3. User understands limitations without attempting actions
4. Reduced friction and clearer communication

Testing

Test Coverage

File: functional_tests/test_group_status_ui_visibility.py

Tests validate:

1. ✅ UI visibility logic for all four status types
2. ✅ JavaScript functions exist in template
3. ✅ Functions are called in appropriate places
4. ✅ All target HTML elements exist
5. ✅ Version number updated

Test Results

📊 Test Summary: 3/3 tests passed
✅ All tests passed! UI hiding functionality is correctly implemented.

Related Features

• Group Status Management - Backend enforcement of status restrictions
• Activity Logging - Status changes are logged for audit trail
• Control Center - Admin interface for managing group status
• Status Badges - Visual indicators in group dropdown

Future Enhancements

Possible future improvements:

1. Add tooltips to hidden button placeholders explaining why they're hidden
2. Implement progressive disclosure (show disabled buttons with explanations)
3. Add status-specific action suggestions (e.g., "Contact admin to unlock")
4. Animate transitions when status changes

Dependencies

• Group status must be returned by /api/groups endpoint
• userGroups array must include status field
• HTML elements must have correct IDs
• Bootstrap 5 for alert styling
• Bootstrap Icons for status icons

Configuration

No configuration required - behavior is automatic based on group status.

Version History

• 0.234.004 - Initial implementation of UI visibility controls
• 0.234.003 - Added status alert boxes and badges
• 0.234.002 - Fixed status persistence bug
• 0.234.001 - Fixed status display bug
• 0.233.321 - Added dynamic help text in Control Center
• 0.233.320 - Fixed backend status reading
• 0.233.319 - Fixed frontend status saving
• 0.233.318 - Initial group status management implementation

Technical Notes

Performance Considerations

• Functions execute synchronously after group data loads
• No additional API calls required (status comes with group data)
• Minimal DOM manipulation (only 5 elements affected)
• Console logging for debugging can be removed in production

Browser Compatibility

• Uses standard JavaScript DOM APIs
• Compatible with all modern browsers
• Requires ES6 support (arrow functions, template literals)

Accessibility

• Hidden elements are removed from tab order
• Alert boxes use semantic Bootstrap classes
• Screen readers will announce alert messages
• Consider adding ARIA labels in future enhancement

Summary

This feature completes the group status management system by ensuring the UI accurately reflects the permissions available to users based on the group's status. By hiding restricted actions proactively, we create a more intuitive and less error-prone user experience.