Skip to content

UI cleanup (part 4)#1217

Merged
annavik merged 9 commits intomainfrom
chore/ui-cleanup
Apr 9, 2026
Merged

UI cleanup (part 4)#1217
annavik merged 9 commits intomainfrom
chore/ui-cleanup

Conversation

@annavik
Copy link
Copy Markdown
Member

@annavik annavik commented Apr 9, 2026

Summary of changes

  • Add capture set clues to UI
  • Render info tooltip in portals to avoid overlap problems
  • Expose IDs in UI for captures, stations and sessions
  • Update job warning color and link to docs

Screenshots

Screenshot 2026-04-09 at 10 12 45 Screenshot 2026-04-09 at 10 12 55 Screenshot 2026-04-09 at 10 13 11 Screenshot 2026-04-09 at 10 13 34

Summary by CodeRabbit

  • New Features

    • Added ID field display across deployment, session, and capture-set pages.
    • New CaptureSetPicker component for selecting capture sets with clear/empty-state actions.
  • UI/UX Improvements

    • FormMessage now supports themes (success, warning, destructive) and optional icons; legacy intro prefix removed.
    • Better warnings/guidance for empty/unpopulated capture sets and clearer export instructions.
    • DocsLink adds a chevron indicator.
    • Simplified error styling and removed fixed-width wrappers in project dialogs.

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 9, 2026

Deploy Preview for antenna-ssec ready!

Name Link
🔨 Latest commit 7478302
🔍 Latest deploy log https://app.netlify.com/projects/antenna-ssec/deploys/69d76b80baa01a0008b9747a
😎 Deploy Preview https://deploy-preview-1217--antenna-ssec.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 9, 2026

Deploy Preview for antenna-preview ready!

Name Link
🔨 Latest commit 7478302
🔍 Latest deploy log https://app.netlify.com/projects/antenna-preview/deploys/69d76b802b8bea0008d54301
😎 Deploy Preview https://deploy-preview-1217--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: 74 (🔴 down 6 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (no change from production)
SEO: 100 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports

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

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 9, 2026

📝 Walkthrough

Walkthrough

Form layout styles simplified and FormMessage refactored with theming and icons. A new CaptureSetPicker component was added and wired into forms. Multiple pages now surface IDs and use the new picker/messaging. Small UI updates: DocsLink chevron and tooltip portal rendering. Language strings extended.

Changes

Cohort / File(s) Summary
Form Layout & Message
ui/src/components/form/layout/layout.module.scss, ui/src/components/form/layout/layout.tsx
Removed .formMessage class; trimmed .formError to keep padding and .inDialog positioning only. Refactored FormMessage props to { message, theme?, withIcon?, className?, children? } (removed intro/style); conditional icons and theme classes added. FormError className adjusted for destructive styling.
CaptureSet Picker (new)
ui/src/design-system/components/select/capture-set-picker.tsx
Added CaptureSetPicker exported component reading projectId, fetching capture sets, rendering Select with loading/disabled states, optional clear button, and conditional FormMessage warnings/links (including populate route and localized image counts). Props: { clearable?: boolean; value?: string; onValueChange: (value?: string) => void }.
Capture Set Pages & Actions
ui/src/pages/project/capture-sets/capture-set-columns.tsx, ui/src/pages/project/capture-sets/populate-capture-set.tsx, ui/src/pages/project/entities/details-form/capture-set-details-form.tsx
Replaced some EntityPicker usages with CaptureSetPicker. PopulateCaptureSet gains compact?: boolean and `variant?: 'ghost'
Form & Page ID Additions
ui/src/pages/deployment-details/deployment-details-info.tsx, ui/src/pages/session-details/session-info/session-info.tsx, ui/src/pages/captures/capture-columns.tsx, ui/src/pages/deployments/deployment-columns.tsx, ui/src/pages/sessions/session-columns.tsx
Added ID display field to deployment and session info. Table cells for captures/deployments/sessions now pass a details prop with localized "ID" label and the item ID.
UI Utilities
ui/src/design-system/components/button/docs-link.tsx, ui/src/design-system/components/info-tooltip.tsx
DocsLink renders a trailing ChevronRight when not compact. InfoTooltip now wraps Tooltip.Content in Tooltip.Portal.
Language & Strings
ui/src/utils/language.ts
Added MESSAGE_CAPTURE_SET_COUNT and MESSAGE_CAPTURE_SET_EMPTY; changed FIELD_LABEL_GENERAL to "General"; expanded MESSAGE_EXPORT_TIP and other English string updates.
Dialogs Markup Simplification
ui/src/pages/project-details/delete-project-dialog.tsx, ui/src/pages/project-details/new-project-dialog.tsx, ui/src/pages/project-details/styles.module.scss
Removed local styles imports and wrapper divs around dialog forms; deleted .content and .content.compact CSS classes. Dialog forms now render directly within Dialog.Content.
Other Pages & Small Behavior
ui/src/pages/job-details/job-details-form/job-details-form.tsx, ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx, ui/src/pages/project/entities/details-form/export-details-form.tsx, ui/src/pages/sessions/session-columns.tsx
Swapped EntityPickerCaptureSetPicker where applicable; replaced a fallback FormError with themed FormMessage in job-details form; adjusted default isValid flags in deployment form state; moved/export tip placement in export form.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant User
participant Router
participant CaptureSetPicker
participant API as CaptureSets API
participant Select as Select UI
participant FormMsg as FormMessage

User->>Router: navigates to page with picker
Router->>CaptureSetPicker: provide projectId
CaptureSetPicker->>API: useCaptureSets(projectId) (fetch)
API-->>CaptureSetPicker: capture sets data
CaptureSetPicker->>Select: render items (or disabled if loading/none)
alt clearable and value set
User->>Select: click clear
Select->>CaptureSetPicker: onValueChange(undefined)
end
alt selected capture has numImages === 0
CaptureSetPicker->>FormMsg: render warning message (with link to populate)
end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested labels

next up!

Suggested reviewers

  • mihow

Poem

🐇 New messages hop in themed delight,
Pickers fetch sets by project’s light,
IDs now show in rows and forms,
Chevrons, portals, tidy norms,
A rabbit cheers — UI feels right!

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (1 warning, 2 inconclusive)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description includes a summary with bullet points and screenshots but lacks required sections such as detailed description, testing instructions, and deployment notes from the template. Add missing template sections: provide a detailed explanation of changes, testing instructions, and any deployment notes. The current description is incomplete.
Title check ❓ Inconclusive The title "UI cleanup (part 4)" is vague and generic, using non-descriptive terms that do not clearly convey the main changes. Replace with a more specific title that summarizes the primary change, e.g., "Add capture set UI improvements and expose IDs in tables".
Linked Issues check ❓ Inconclusive No linked issues or references provided in the PR description, making it unclear what problems this PR addresses. Reference related issues using keywords like 'Closes #<ISSUE_NUMBER>' or 'Relates to #<ISSUE_NUMBER>' in the description.
✅ Passed checks (2 passed)
Check name Status Explanation
Out of Scope Changes check ✅ Passed The changes appear focused on UI improvements and component refactoring as described, with CSS cleanup, new components, and prop updates all aligned with the stated objectives.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ 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 chore/ui-cleanup

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: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@ui/src/design-system/components/select/capture-set-picker.tsx`:
- Around line 25-40: CaptureSetPicker currently only renders concrete capture
set options so users cannot revert to “none”; add an optional empty selection by
introducing an allowEmpty boolean prop on CaptureSetPicker and when allowEmpty
is true render an extra Select.Item (e.g., value="" or a sentinel like "none")
at the top of Select.Content (with placeholder label like "No capture set" or
empty) so onValueChange can receive the empty value and callers can clear the
selection; update any optional consumers (export form) to pass allowEmpty and
handle the empty sentinel as the skip-capture-set case.

In `@ui/src/pages/job-details/job-details-form/job-details-form.tsx`:
- Around line 105-107: The FormMessage usage in job-details-form.tsx currently
embeds a hard-coded English string; replace it with the i18n key by using
translate(STRING.MESSAGE_BATCH_PROCESSING_WARNING) and add
STRING.MESSAGE_BATCH_PROCESSING_WARNING to ui/src/utils/language.ts (ensuring
the key maps to the existing English message and any other locales as needed).
Locate the FormMessage instance in job-details-form.tsx to swap out the literal
message and update the language.ts file to export the new STRING constant so
translate(...) can resolve it.

In `@ui/src/pages/project/capture-sets/capture-set-columns.tsx`:
- Around line 56-71: The current early return renders PopulateCaptureSet when
item.canPopulate && item.numImages === 0 even if item.currentJob exists, hiding
real job state; update the rendering order in capture-set-columns.tsx to check
item.currentJob first and render StatusTableCell (using
item.currentJob.status.color, item.currentJob.type.label,
item.currentJob.status.label) when present, otherwise fall back to the
PopulateCaptureSet branch (when item.canPopulate && item.numImages === 0) and
then the empty/default case—adjust the conditional logic around
PopulateCaptureSet and StatusTableCell so status is preferred whenever
item.currentJob is defined.
🪄 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: 6865684c-f68d-491e-8d44-a5291738fade

📥 Commits

Reviewing files that changed from the base of the PR and between 83a970c and 84b5ce9.

📒 Files selected for processing (16)
  • ui/src/components/form/layout/layout.module.scss
  • ui/src/components/form/layout/layout.tsx
  • ui/src/design-system/components/button/docs-link.tsx
  • ui/src/design-system/components/info-tooltip.tsx
  • ui/src/design-system/components/select/capture-set-picker.tsx
  • ui/src/pages/captures/capture-columns.tsx
  • ui/src/pages/deployment-details/deployment-details-info.tsx
  • ui/src/pages/deployments/deployment-columns.tsx
  • ui/src/pages/job-details/job-details-form/job-details-form.tsx
  • ui/src/pages/project/capture-sets/capture-set-columns.tsx
  • ui/src/pages/project/capture-sets/populate-capture-set.tsx
  • ui/src/pages/project/entities/details-form/capture-set-details-form.tsx
  • ui/src/pages/project/entities/details-form/export-details-form.tsx
  • ui/src/pages/session-details/session-info/session-info.tsx
  • ui/src/pages/sessions/session-columns.tsx
  • ui/src/utils/language.ts
💤 Files with no reviewable changes (1)
  • ui/src/components/form/layout/layout.module.scss

Comment thread ui/src/design-system/components/select/capture-set-picker.tsx Outdated
Comment thread ui/src/pages/job-details/job-details-form/job-details-form.tsx
Comment thread ui/src/pages/project/capture-sets/capture-set-columns.tsx Outdated
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.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx (1)

49-63: ⚠️ Potential issue | 🟠 Major

Validation regression: avoid hardcoding section validity to true

Line 54 and Line 62 initialize Section.Location and Section.SourceImages as valid unconditionally. This bypasses initial validity gating and can permit stepping/saving before those sections are actually validated.

Suggested fix
       [Section.Location]: {
         values: {
           latitude: deployment.latitude,
           longitude: deployment.longitude,
         },
-        isValid: true,
+        isValid: startValid,
       },
       [Section.SourceImages]: {
         values: {
           dataSourceId: deployment.dataSource?.id,
           dataSourceSubdir: deployment.dataSourceSubdir,
           dataSourceRegex: deployment.dataSourceRegex,
         },
-        isValid: true,
+        isValid: startValid,
       },
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx`
around lines 49 - 63, The code currently forces Section.Location and
Section.SourceImages to isValid: true which bypasses validation; update the
initialization in deployment-details-form (the object keyed by Section.Location
and Section.SourceImages) to compute isValid from the actual field values
instead of hardcoding true — e.g., call the existing validation helper used
elsewhere (or run the same checks used in
validateSection/validateLocation/validateSourceImages) against
latitude/longitude and dataSourceId/dataSourceSubdir/dataSourceRegex and set
isValid to that boolean, or default to false if no validator is available;
ensure you reference the same validation logic the form uses so stepping/saving
respects real validity.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In
`@ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx`:
- Around line 49-63: The code currently forces Section.Location and
Section.SourceImages to isValid: true which bypasses validation; update the
initialization in deployment-details-form (the object keyed by Section.Location
and Section.SourceImages) to compute isValid from the actual field values
instead of hardcoding true — e.g., call the existing validation helper used
elsewhere (or run the same checks used in
validateSection/validateLocation/validateSourceImages) against
latitude/longitude and dataSourceId/dataSourceSubdir/dataSourceRegex and set
isValid to that boolean, or default to false if no validator is available;
ensure you reference the same validation logic the form uses so stepping/saving
respects real validity.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7a0db48c-3421-412e-9087-59a36a80e22c

📥 Commits

Reviewing files that changed from the base of the PR and between 3845496 and 7478302.

📒 Files selected for processing (4)
  • ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx
  • ui/src/pages/project-details/delete-project-dialog.tsx
  • ui/src/pages/project-details/new-project-dialog.tsx
  • ui/src/pages/project-details/styles.module.scss
💤 Files with no reviewable changes (1)
  • ui/src/pages/project-details/styles.module.scss
✅ Files skipped from review due to trivial changes (1)
  • ui/src/pages/project-details/new-project-dialog.tsx

@annavik annavik merged commit 794c434 into main Apr 9, 2026
7 checks passed
@annavik annavik deleted the chore/ui-cleanup branch April 9, 2026 09:12
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