Find Group Modal Enhancements

Find Group Modal Enhancements

Version Implemented: 0.229.001

Enhancement Description

Enhanced the "Find a Group to Join" modal to provide more useful information when users are searching for groups to join.

Changes Made

1. Modal Width Enhancement

File: templates/my_groups.html Change: Increased modal width from modal-lg to modal-xl to accommodate additional columns

Before:

<div class="modal-dialog modal-lg">

After:

<div class="modal-dialog modal-xl">

2. Added New Table Columns

File: templates/my_groups.html Change: Added "Owner" and "Members" columns to the group results table

Before:

<thead><tr><th>Name</th><th>Description</th><th>Actions</th></tr></thead>

After:

<thead><tr><th>Name</th><th>Description</th><th>Owner</th><th>Members</th><th>Actions</th></tr></thead>

3. Enhanced JavaScript Rendering

File: templates/my_groups.html Change: Updated renderGlobalGroupResults() function to display owner and member count information

Before:

groups.forEach((g) => {
  const row = $("<tr></tr>");
  row.append($("<td></td>").text(g.name));
  row.append($("<td></td>").text(g.description));
  const joinBtn = $("<button class='btn btn-sm btn-primary join-request-btn'></button>")
              .attr('data-group-id', g.id)
              .text('Request to Join');
  row.append($("<td></td>").append(joinBtn));
  tbody.append(row);
});

After:

groups.forEach((g) => {
  const row = $("<tr></tr>");
  row.append($("<td></td>").text(g.name));
  row.append($("<td></td>").text(g.description));
  
  // Owner column
  const ownerName = g.owner?.displayName || g.owner?.email || 'Unknown';
  row.append($("<td></td>").text(ownerName));
  
  // Member count column
  row.append($("<td></td>").text(g.member_count || 0));
  
  // Actions column
  const joinBtn = $("<button class='btn btn-sm btn-primary join-request-btn'></button>")
              .attr('data-group-id', g.id)
              .text('Request to Join');
  row.append($("<td></td>").append(joinBtn));
  tbody.append(row);
});

4. Backend API Enhancement

File: route_backend_groups.py Change: Enhanced the /api/groups/discover endpoint to return owner and member count information

Before:

results.append({
    "id": g["id"],
    "name": g.get("name", ""),
    "description": g.get("description", ""),
})

After:

results.append({
    "id": g["id"],
    "name": g.get("name", ""),
    "description": g.get("description", ""),
    "owner": g.get("owner", {}),
    "member_count": len(g.get("users", []))
})

5. Updated Error Message Display

File: templates/my_groups.html Change: Updated colspan values to match the new column count (5 instead of 3)

Features Added

Owner Information

• Display: Shows the group owner's display name (falls back to email if display name unavailable)
• Source: Retrieved from the owner.displayName or owner.email fields in the group document
• Fallback: Shows "Unknown" if no owner information is available

Member Count

• Display: Shows the current number of members in the group
• Source: Calculated by counting the length of the users array in the group document
• Fallback: Shows "0" if no users array exists

Improved Layout

• Wider Modal: Increased from modal-lg to modal-xl for better information display
• Better Spacing: More room for the additional columns without overcrowding
• Responsive Design: Maintains table responsiveness with the new columns

User Experience Benefits

Better Decision Making

• Users can see who owns the group before requesting to join
• Member count helps users understand group size and activity level
• More informed decisions about which groups to join

Improved Discoverability

• Wider modal provides better visibility of group information
• Clear columnar layout makes it easy to compare groups
• Owner information helps identify familiar groups or contacts

Files Modified

1. templates/my_groups.html - Enhanced modal width, table columns, and JavaScript rendering
2. route_backend_groups.py - Enhanced API to return owner and member count data
3. config.py - Updated version from 0.226.096 to 0.226.097
4. functional_tests/test_find_group_modal_enhancements.py - New comprehensive test file

Version

Updated from: 0.226.096
Updated to: 0.226.097

Testing

Run the functional test to verify the enhancements:

python functional_tests/test_find_group_modal_enhancements.py

Expected output: All 4 tests should pass, confirming:

• Modal width enhancement
• Correct table column headers
• JavaScript rendering of new columns
• Backend API returns owner and member count data

Visual Changes

Before

After

The enhanced modal now provides users with comprehensive information to make informed decisions about joining groups.