Skip to content

feat(dataset-table): add inline editing for editable columns#2261

Open
emigun wants to merge 1 commit intomasterfrom
inline-edit-comment
Open

feat(dataset-table): add inline editing for editable columns#2261
emigun wants to merge 1 commit intomasterfrom
inline-edit-comment

Conversation

@emigun
Copy link
Member

@emigun emigun commented Mar 12, 2026

Description

This PR makes it possible to configure columns to be editable inline in the dataset table.

Adds a new dataset table column type, editable.
For users with edit permission, editable cells show an edit icon on hover.
Clicking the cell opens an inline input with a save button.

See screencast:
Screencast from 2026-03-12 12-08-58.webm

Motivation

One highly liked feature of Scanlog (MAXIV SciCat alternative frontend) is the possibility to edit the comment field inline in the the dataset table.

Changes:

New dataset table column type, 'editable'.

Tests included

  • Included for each change/fix?
  • Passing? (Merge will not be approved unless this is checked)

Documentation

  • official documentation updated [nice-to-have]

I would like to update this, where?

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

  • Does it require a specific version of the backend
  • which version of the backend is required:

Summary by Sourcery

Introduce inline-editable dataset table columns with a dedicated cell component and necessary wiring.

New Features:

  • Add a new editable column type for dataset table fields that renders cells with an inline edit UI for permitted users.
  • Provide a DatasetInlineEditCellComponent to handle inline editing, saving, and permission checks for dataset fields.

Enhancements:

  • Decorate table column configuration so editable columns automatically use the inline edit cell component.
  • Ensure editable columns have a default export value based on their configured path or name.

@emigun emigun requested a review from a team as a code owner March 12, 2026 11:10
Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey - I've left some high level feedback:

  • In MockDatasetApi.datasetsControllerFindByIdAndUpdateV3, consider matching the real service method signature (e.g. (pid: string, body: any)) so tests and future call sites can rely on consistent typing and argument usage.
  • The DatasetInlineEditCellComponent subscribes to the store in the constructor; moving this subscription logic into ngOnInit would better align with Angular lifecycle best practices and make the component easier to reason about.
  • The new decorateColumns helper in DatasetTableComponent only decorates type === 'editable' columns; if other dynamic types (e.g. existing custom types) also rely on dynamicCellComponent, consider centralizing all such decorations in this method to avoid diverging configuration paths.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- In `MockDatasetApi.datasetsControllerFindByIdAndUpdateV3`, consider matching the real service method signature (e.g. `(pid: string, body: any)`) so tests and future call sites can rely on consistent typing and argument usage.
- The `DatasetInlineEditCellComponent` subscribes to the store in the constructor; moving this subscription logic into `ngOnInit` would better align with Angular lifecycle best practices and make the component easier to reason about.
- The new `decorateColumns` helper in `DatasetTableComponent` only decorates `type === 'editable'` columns; if other dynamic types (e.g. existing custom types) also rely on `dynamicCellComponent`, consider centralizing all such decorations in this method to avoid diverging configuration paths.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@emigun emigun force-pushed the inline-edit-comment branch from fa306db to 36eea20 Compare March 12, 2026 11:23
…umns

  Add a new dataset table column type, `editable`.
  For users with edit permission, editable cells show an edit icon on hover.
  Clicking the cell opens an inline input with a save button.
@emigun emigun force-pushed the inline-edit-comment branch from 36eea20 to d9d3c28 Compare March 12, 2026 11:30
@nitrosx
Copy link
Member

nitrosx commented Mar 13, 2026

Feedback from the UX point of view:
can we show the edit icon to the left of the field and always show it?
When you click it, the editable field becomes active and the edit icon is replaced by the save one?

@nitrosx
Copy link
Member

nitrosx commented Mar 13, 2026

How are the permissions managed?

Comment on lines +21 to +30
<button
mat-icon-button
type="button"
class="save-button"
aria-label="Save value"
[disabled]="isSaving"
(click)="saveValue($event)"
>
<mat-icon>save</mat-icon>
</button>
Copy link
Member

Choose a reason for hiding this comment

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

Can we move it before the input?

<span *ngIf="displayValue" class="inline-edit-text">
{{ displayValue }}
</span>
<mat-icon *ngIf="canEdit" class="edit-icon">edit</mat-icon>
Copy link
Member

Choose a reason for hiding this comment

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

Can we move it before the span item right above

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.

2 participants