Skip to content

Add conditional rendering for optional fields #137

@fergusfinn

Description

@fergusfinn

Description

Add proper conditional rendering for optional fields to avoid rendering empty elements.

Problem

In UsersGroups.tsx (lines 486-488):

<p className="text-sm text-doubleword-neutral-600 mb-4 break-words">
  {group.description}
</p>

If description is undefined or empty string:

  • Renders empty <p> tag with margin
  • Creates awkward whitespace
  • Inconsistent spacing between cards

Solution

{group.description && (
  <p className="text-sm text-doubleword-neutral-600 mb-4 break-words">
    {group.description}
  </p>
)}

Other Occurrences to Check

Search for optional fields that might be undefined/empty:

  • User display names
  • Model descriptions
  • Endpoint descriptions
  • Any optional text fields

Files to Change

  • dashboard/src/components/features/users-groups/UsersGroups/UsersGroups.tsx
  • Review other components for similar patterns

Impact

  • Cleaner DOM (fewer empty elements)
  • More consistent spacing
  • Better accessibility (no empty elements for screen readers)

Status

⏳ Pending

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions