feat(related-records): add "add record" action and empty indicator#1832
Merged
Conversation
Add an icon button to each related-records panel header that links to the new-record form for the referenced table. Replace the "Absent" text with an "Empty" badge next to the table name, and truncate long table names with an ellipsis and tooltip. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughExpansion-panel headers and per-row action markup for related-records were updated to conditionally disable/hide toggles, show a tooltip-enabled table name, display an "Empty" marker when there are no rows, and always render an "Add" icon button when entries exist. CSS was changed to enforce header flex layout, single-line truncation, action sizing/clickability, icon color overrides, and an empty-state pill style. ChangesRelated Records Panel Header
🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers:
🚥 Pre-merge checks | ✅ 6✅ Passed checks (6 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the “Related records” UI in the row preview sidebar by adding a quick “add record” action per referenced table and improving the empty-state presentation for referenced tables (badge + truncated names with tooltip).
Changes:
- Added an “Add” icon action in each related-records panel header linking to the referenced table’s new-record form.
- Replaced the prior “Absent” text with an “Empty” badge near the referenced table name.
- Updated layout/CSS to support ellipsis truncation for long table names and styling for the new badge/action.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html | Adds “Add record” action, moves empty indicator to a badge, and adds tooltip for truncated table names. |
| frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css | Adjusts flex layout for header/title, adds ellipsis styling, and introduces badge/button styling (including dark-scheme tweaks). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner> | ||
| <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">Absent</span> | ||
| <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length" | ||
| <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank" |
Comment on lines
+47
to
+50
| routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}/entry" | ||
| matTooltip="Add a new record to {{referencedTable.displayTableName}}" | ||
| (click)="handleClose(); $event.stopPropagation()"> | ||
| <mat-icon>add</mat-icon> |
| <mat-expansion-panel-header class="related-records__header"> | ||
| <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title> | ||
| <mat-panel-title class="related-records__table-name"> | ||
| <span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span> |
Comment on lines
+52
to
+58
| <!--<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length" | ||
| target="_blank" | ||
| [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']" | ||
| matTooltip="Set up records view" | ||
| (click)="handleClose()"> | ||
| <mat-icon>settings</mat-icon> | ||
| </a> | ||
| </a>--> |
… edit Mirror the row-view related-records changes in the row-edit view: add an icon button linking to the new-record form, replace "Absent" with an "Empty" badge next to the table name, and truncate long table names. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html (1)
47-47: ⚡ Quick winUse array binding for
routerLinkinstead of string interpolation.String interpolation in
routerLinkattributes can lead to improper URL encoding and is inconsistent with the pattern used elsewhere in this template (line 88). Array binding provides better security and type safety.♻️ Proposed refactor to use array binding
- routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}/entry" + [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"🤖 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 `@frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html` at line 47, Replace the string-interpolated routerLink attribute on the template element (currently using selectedRow.connectionID and referencedTable.table_name) with Angular array binding for routerLink; build the route segments as an array consisting of "/dashboard", the selectedRow.connectionID value, the referencedTable.table_name value, and "entry" so Angular composes and encodes the URL correctly (update the attribute on the element that contains routerLink in db-table-row-view.component.html).
🤖 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
`@frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html`:
- Around line 38-41: Replace the Angular structural directives (*ngIf) with
Angular 19 control-flow syntax (`@if`) for the conditional rendering around the
span that shows "Empty" and the other two occurrences; use the `@if` form to
evaluate the same condition (referencedRecords[referencedTable.table_name] &&
!referencedRecords[referencedTable.table_name].rows.length) and render the span
with class related-records__empty-mark when true, and similarly convert the
other *ngIf usages on lines referenced in the comment to equivalent `@if` blocks
so they reference the same referencedRecords and referencedTable.table_name
symbols.
---
Nitpick comments:
In
`@frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html`:
- Line 47: Replace the string-interpolated routerLink attribute on the template
element (currently using selectedRow.connectionID and
referencedTable.table_name) with Angular array binding for routerLink; build the
route segments as an array consisting of "/dashboard", the
selectedRow.connectionID value, the referencedTable.table_name value, and
"entry" so Angular composes and encodes the URL correctly (update the attribute
on the element that contains routerLink in db-table-row-view.component.html).
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 350e8fc8-96b3-40eb-9db6-6bd967143974
📒 Files selected for processing (2)
frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.cssfrontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
Comment on lines
+38
to
+41
| <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length" | ||
| class="related-records__empty-mark"> | ||
| Empty | ||
| </span> |
There was a problem hiding this comment.
Use Angular 19's @if control flow instead of *ngIf structural directives.
The new code uses *ngIf structural directives on lines 38, 44, and 45. As per coding guidelines, Angular 19's built-in control flow syntax should be used for all new code.
♻️ Proposed refactor to use `@if` control flow
- <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length"
+ `@if` (referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length) {
+ <span
class="related-records__empty-mark">
Empty
- </span>
+ </span>
+ }
</mat-panel-title>
<mat-panel-description class="related-records__actions">
- <mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
- <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
+ `@if` (!referencedRecords[referencedTable.table_name]) {
+ <mat-spinner diameter="20"></mat-spinner>
+ }
+ `@if` (referencedRecords[referencedTable.table_name]) {
+ <a mat-icon-button target="_blank"
class="related-records__add-button"
routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}/entry"
matTooltip="Add a new record to {{referencedTable.displayTableName}}"
(click)="handleClose(); $event.stopPropagation()">
<mat-icon>add</mat-icon>
- </a>
+ </a>
+ }As per coding guidelines: "Use Angular 19's built-in control flow (@if, @for, @switch) instead of structural directives (*ngIf, *ngFor, *ngSwitch) in all new code"
Also applies to: 44-44, 45-51
🤖 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
`@frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html`
around lines 38 - 41, Replace the Angular structural directives (*ngIf) with
Angular 19 control-flow syntax (`@if`) for the conditional rendering around the
span that shows "Empty" and the other two occurrences; use the `@if` form to
evaluate the same condition (referencedRecords[referencedTable.table_name] &&
!referencedRecords[referencedTable.table_name].rows.length) and render the span
with class related-records__empty-mark when true, and similarly convert the
other *ngIf usages on lines referenced in the comment to equivalent `@if` blocks
so they reference the same referencedRecords and referencedTable.table_name
symbols.
Source: Coding guidelines
Mark empty related-records panels as disabled with no expand toggle, while keeping the header actions (add / open in table view) clickable. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Give the related-records header action icons a full-strength color in both enabled and disabled panel states, replacing Material's lighter default. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Correct the `.mdc-list-item__end` selector so margins actually apply (the trailing-meta class lives on the host, not a descendant) and wrap the open-record link in a meta container for consistent alignment. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add an icon button to each related-records panel header that links to the new-record form for the referenced table. Replace the "Absent" text with an "Empty" badge next to the table name, and truncate long table names with an ellipsis and tooltip.
Summary by CodeRabbit
Style
New Features