Skip to content

Update layout for projects#1305

Open
annavik wants to merge 6 commits into
mainfrom
layout/projects
Open

Update layout for projects#1305
annavik wants to merge 6 commits into
mainfrom
layout/projects

Conversation

@annavik
Copy link
Copy Markdown
Member

@annavik annavik commented May 14, 2026

The more projects we add, the more difficult the project page is to navigate. For most users, the main view will be a more compact list of projects they are a member of, but for super admins with access to all projects it can be a bit tricky. Also, in some cases, users might want to explore public projects they are not a member of. Also that list can get pretty long!

In this PR, we make some simple UI updates, to improve the situation a bit.

Summary of changes

  • Use a more compact gallery layout
  • Update page size from 20 -> 40 (I tested and it seems to still be quick to load)
  • Add a sort control, to make it easier to find relevant projects, for example the ones with recent activity
  • Make it possible to change sort order from the sort control (this update will affect other views as well)

Thoughts for future

A search feature would be nice, but it requires a few more backend updates and maybe not our highest prio. Also a more compact table view for projects could be interesting to explore...

Deploy notes

Sort projects by name required a tiny BE update.

Screenshots

Before
Screenshot 2026-05-14 at 16 06 52

After
Screenshot 2026-05-14 at 16 06 00

Summary by CodeRabbit

  • New Features

    • Projects can now be sorted by name in addition to creation and update dates.
    • Added sort control to projects listing with improved icon indicators for sort direction.
  • Bug Fixes

    • Fixed trailing space in export button label.
  • UI Improvements

    • Enhanced sort control with directional arrow icons and improved interaction handling.
    • Refined project gallery layout and page header ordering.
  • Dependencies

    • Updated nova-ui-kit to v1.1.36.

Review Change Stack

@netlify
Copy link
Copy Markdown

netlify Bot commented May 14, 2026

Deploy Preview for antenna-preview ready!

Name Link
🔨 Latest commit 0ac2147
🔍 Latest deploy log https://app.netlify.com/projects/antenna-preview/deploys/6a05d9634ebeb40008dd93bf
😎 Deploy Preview https://deploy-preview-1305--antenna-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 60 (🔴 down 5 from production)
Accessibility: 81 (🔴 down 8 from production)
Best Practices: 92 (🔴 down 8 from production)
SEO: 92 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 14, 2026

Deploy Preview for antenna-ssec ready!

Name Link
🔨 Latest commit 0ac2147
🔍 Latest deploy log https://app.netlify.com/projects/antenna-ssec/deploys/6a05d9648810950008fd17a7
😎 Deploy Preview https://deploy-preview-1305--antenna-ssec.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@annavik annavik requested a review from mihow May 14, 2026 14:18
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 14, 2026

📝 Walkthrough

Walkthrough

This PR implements sorting functionality for the projects listing with backend API support and a refactored SortControl component. It also includes related UI adjustments across multiple pages and a minor dependency upgrade.

Changes

Sorting Feature and UI Cleanup

Layer / File(s) Summary
Translation strings for sorting
ui/src/utils/language.ts
Added CHANGE_SORT_ORDER and CREATE_NEW enum members to STRING with corresponding English translations in ENGLISH_STRINGS.
SortControl component refactoring
ui/src/design-system/components/sort-control.tsx
Updated Lucide icon imports to include ArrowDownIcon, introduced dedicated changeSortField and changeSortOrder handler functions, and reworked UI rendering to conditionally show/rotate sort order icons and preserve order when changing fields.
Backend API sorting support
ami/main/api/views.py
Extended ProjectViewSet.ordering_fields to include name as a sortable field alongside created_at and updated_at.
Projects page sorting integration
ui/src/pages/projects/projects.tsx
Added SortControl component import, defined SORT_FIELDS mapping, integrated useSort hook, passed sort into useProjects query, changed pagination to fixed perPage: 40, and rendered the sort UI in the page header.
Team sorting adjustments and miscellaneous UI updates
ui/src/pages/project/team/team.tsx, ui/src/pages/project/team/team-columns.tsx, ui/src/pages/jobs/jobs.tsx, ui/src/pages/occurrences/occurrences.tsx, ui/src/pages/project-details/new-project-dialog.tsx, ui/src/pages/projects/project-gallery.tsx, ui/package.json
Team page default sort changed from name to created_at; user column sortField: 'name' removed; Jobs page header reordered to place NewJobDialog before SortControl; Gallery layout overrides removed; Occurrences export label spacing fixed; NewProjectDialog refactored to inline translations; nova-ui-kit bumped to ^1.1.36.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • RolnickLab/antenna#1099: Both PRs modify the Team page's sorting configuration in team.tsx and adjust sort field handling in team-columns.tsx.

Poem

🐰 A sort control hops through the UI,
Fields and orders dance in reply,
Projects now align just right,
With names, dates, and sorting delight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Update layout for projects' is partially related to the changeset—it refers to one aspect (layout changes to the project gallery) but misses major changes like adding sort functionality, pagination updates, and backend API changes.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed The PR description provides a clear summary, lists key changes, includes deployment notes, and provides before/after screenshots, but omits testing instructions and a formal checklist.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch layout/projects

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ami/main/api/views.py`:
- Line 158: The Project model's name field is used in ordering (ordering_fields
includes "name") but lacks a DB index; update the Project model by adding
db_index=True to the name field declaration (Project.name) or alternatively
declare an Index on "name" inside the Project.Meta.indexes so sorts by name use
the index; migrate the DB after change to apply the new index.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 188d3959-ae86-4161-a080-ca9ff08e9603

📥 Commits

Reviewing files that changed from the base of the PR and between aeb57c1 and 0ac2147.

⛔ Files ignored due to path filters (1)
  • ui/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (11)
  • ami/main/api/views.py
  • ui/package.json
  • ui/src/design-system/components/sort-control.tsx
  • ui/src/pages/jobs/jobs.tsx
  • ui/src/pages/occurrences/occurrences.tsx
  • ui/src/pages/project-details/new-project-dialog.tsx
  • ui/src/pages/project/team/team-columns.tsx
  • ui/src/pages/project/team/team.tsx
  • ui/src/pages/projects/project-gallery.tsx
  • ui/src/pages/projects/projects.tsx
  • ui/src/utils/language.ts
💤 Files with no reviewable changes (2)
  • ui/src/pages/project/team/team-columns.tsx
  • ui/src/pages/projects/project-gallery.tsx

Comment thread ami/main/api/views.py
serializer_class = ProjectSerializer
pagination_class = ProjectPagination
permission_classes = [ObjectPermission]
ordering_fields = ["name", "created_at", "updated_at"]
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if Project model's name field has a database index

rg -nP --type=py -C5 'class Project\(' --glob '**/models*.py' | rg -P '(db_index|Index|indexes)' -A10 -B10

Repository: RolnickLab/antenna

Length of output: 44


🏁 Script executed:

# Find Project model definition
rg -n 'class Project' --type=py

Repository: RolnickLab/antenna

Length of output: 1625


🏁 Script executed:

# Check if models files exist in ami/main
find ami/main -name '*models*' -type f

Repository: RolnickLab/antenna

Length of output: 81


🏁 Script executed:

# Get context around line 158 in views.py to understand the model being used
cat -n ami/main/api/views.py | sed -n '150,170p'

Repository: RolnickLab/antenna

Length of output: 1041


🏁 Script executed:

# Read the Project model definition
cat -n ami/main/models.py | sed -n '266,350p'

Repository: RolnickLab/antenna

Length of output: 3554


🏁 Script executed:

# Also search for Meta class and any indexes in Project model
rg -n 'class Project\(|name.*Field|db_index|class Meta' ami/main/models.py | head -50

Repository: RolnickLab/antenna

Length of output: 1559


🏁 Script executed:

# Read lines around 485 to check if Meta class is part of Project model
cat -n ami/main/models.py | sed -n '470,495p'

Repository: RolnickLab/antenna

Length of output: 1354


🏁 Script executed:

# Read the complete Meta class for Project model
cat -n ami/main/models.py | sed -n '485,550p'

Repository: RolnickLab/antenna

Length of output: 4529


🏁 Script executed:

# Continue reading the Meta class to see if indexes are defined
cat -n ami/main/models.py | sed -n '550,570p'

Repository: RolnickLab/antenna

Length of output: 770


🏁 Script executed:

# Final confirmation: search for any indexes definition in Project model
rg -n 'indexes\s*=' ami/main/models.py | head -20

Repository: RolnickLab/antenna

Length of output: 307


🏁 Script executed:

# Check which models have indexes defined (context around those lines)
rg -n -B10 'indexes\s*=' ami/main/models.py | grep -E '(^[0-9]+-class |indexes)' | head -30

Repository: RolnickLab/antenna

Length of output: 307


🏁 Script executed:

# Check if there are any migrations that add an index to Project.name
find . -name '*migrations*' -type d | head -5

Repository: RolnickLab/antenna

Length of output: 191


🏁 Script executed:

# Search for any migration files that might add index to name field
rg -n 'name.*index|AddIndex.*name' --type=py -i | grep -i project | head -20

Repository: RolnickLab/antenna

Length of output: 44


Add database index to Project.name field for sort performance.

The name field in the Project model currently lacks a database index, but is included in ordering_fields, enabling API sorting by project name. As the number of projects grows, queries sorted by name will scan the full table without an index. Add db_index=True to the name field in ami/main/models.py line 269 or define an index in the Project model's Meta class.

🧰 Tools
🪛 Ruff (0.15.12)

[warning] 158-158: Mutable default value for class attribute

(RUF012)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ami/main/api/views.py` at line 158, The Project model's name field is used in
ordering (ordering_fields includes "name") but lacks a DB index; update the
Project model by adding db_index=True to the name field declaration
(Project.name) or alternatively declare an Index on "name" inside the
Project.Meta.indexes so sorts by name use the index; migrate the DB after change
to apply the new index.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant