Skip to content

Signals migration#1657

Open
lyubov-voloshko wants to merge 8 commits intomainfrom
signals-migration
Open

Signals migration#1657
lyubov-voloshko wants to merge 8 commits intomainfrom
signals-migration

Conversation

@lyubov-voloshko
Copy link
Collaborator

No description provided.

Copilot AI review requested due to automatic review settings March 10, 2026 11:27
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR migrates many Angular UI field components to the signals-based APIs (e.g., input(), output(), model()), updating templates to use signal reads (e.g., value()) and the newer control-flow syntax (e.g., @if, @for). It also adds/updates unit tests to match the new input patterns.

Changes:

  • Replace @Input() / @Output() in multiple components with signals equivalents (input(), output(), model()).
  • Update templates to read signal inputs via function calls and migrate several *ngIf/*ngFor usages to @if/@for.
  • Add a broad set of new component unit tests for both table display and record view/edit field components.

Reviewed changes

Copilot reviewed 231 out of 231 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
frontend/src/app/components/ui-components/table-display-fields/uuid/uuid.component.ts Signals-style refactor + metadata cleanup
frontend/src/app/components/ui-components/table-display-fields/uuid/uuid.component.html Update to value() in template
frontend/src/app/components/ui-components/table-display-fields/uuid/uuid.component.spec.ts Add basic rendering tests
frontend/src/app/components/ui-components/table-display-fields/url/url.component.ts Signals-style refactor (notably removed CommonModule)
frontend/src/app/components/ui-components/table-display-fields/url/url.component.html Update to value(); still uses *ngIf
frontend/src/app/components/ui-components/table-display-fields/url/url.component.spec.ts Add tests; overrides CommonModule in test
frontend/src/app/components/ui-components/table-display-fields/timezone/timezone.component.html Update clipboard binding to value()
frontend/src/app/components/ui-components/table-display-fields/timezone/timezone.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/table-display-fields/time/time.component.ts Signals migration for value() usage
frontend/src/app/components/ui-components/table-display-fields/time/time.component.spec.ts Add formatting tests
frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.spec.ts Add interval formatting tests
frontend/src/app/components/ui-components/table-display-fields/text/text.component.html Update to value() + clipboard binding
frontend/src/app/components/ui-components/table-display-fields/text/text.component.spec.ts Add tests for rendering + validation behavior
frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.html Update to value() + clipboard binding
frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.spec.ts Add basic rendering tests
frontend/src/app/components/ui-components/table-display-fields/select/select.component.spec.ts Add option-label mapping tests
frontend/src/app/components/ui-components/table-display-fields/s3/s3.component.html Convert to @if blocks + value()
frontend/src/app/components/ui-components/table-display-fields/s3/s3.component.spec.ts Add basic widget-param test with service mocks
frontend/src/app/components/ui-components/table-display-fields/range/range.component.spec.ts Add range parsing/display tests
frontend/src/app/components/ui-components/table-display-fields/point/point.component.spec.ts Add point formatting tests
frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html Convert to @if blocks + value()
frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.spec.ts Add phone formatting tests
frontend/src/app/components/ui-components/table-display-fields/password/password.component.spec.ts Add masked rendering test
frontend/src/app/components/ui-components/table-display-fields/number/number.component.html Convert *ngIf icons to @if + value()
frontend/src/app/components/ui-components/table-display-fields/number/number.component.spec.ts Add threshold tests
frontend/src/app/components/ui-components/table-display-fields/money/money.component.spec.ts Add formatted currency test
frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.html Update tooltip/copy binding to value()
frontend/src/app/components/ui-components/table-display-fields/long-text/long-text.component.ts Signals-style refactor + metadata cleanup
frontend/src/app/components/ui-components/table-display-fields/long-text/long-text.component.html Update to value() + clipboard binding
frontend/src/app/components/ui-components/table-display-fields/long-text/long-text.component.spec.ts Add basic rendering tests
frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts Remove CommonModule import; relies on @if
frontend/src/app/components/ui-components/table-display-fields/json-editor/json-editor.component.ts Use value() for parsing/stringifying JSON
frontend/src/app/components/ui-components/table-display-fields/json-editor/json-editor.component.html Convert *ngIf to @if; update clipboard binding
frontend/src/app/components/ui-components/table-display-fields/json-editor/json-editor.component.spec.ts Add JSON formatting/invalid JSON tests
frontend/src/app/components/ui-components/table-display-fields/image/image.component.ts Use value()/widgetStructure() for prefix + URL validation
frontend/src/app/components/ui-components/table-display-fields/image/image.component.html Convert to @if/@else; update widgetStructure access
frontend/src/app/components/ui-components/table-display-fields/image/image.component.spec.ts Add URL validity tests
frontend/src/app/components/ui-components/table-display-fields/id/id.component.ts Signals-style refactor + metadata cleanup
frontend/src/app/components/ui-components/table-display-fields/id/id.component.html Update to value() + clipboard binding
frontend/src/app/components/ui-components/table-display-fields/id/id.component.spec.ts Add rendering tests
frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.ts Migrate inputs/outputs to input()/output()
frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.html Convert to @if/@else; update value() usage
frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.spec.ts Add basic template behavior test
frontend/src/app/components/ui-components/table-display-fields/file/file.component.ts Migrate to value(); keep blob detection logic
frontend/src/app/components/ui-components/table-display-fields/file/file.component.spec.ts Add blob/short/long-string tests
frontend/src/app/components/ui-components/table-display-fields/date/date.component.spec.ts Add date formatting tests
frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.spec.ts Add datetime formatting tests
frontend/src/app/components/ui-components/table-display-fields/country/country.component.html Convert flag *ngIf to @if
frontend/src/app/components/ui-components/table-display-fields/country/country.component.spec.ts Add country name/flag behavior tests
frontend/src/app/components/ui-components/table-display-fields/color/color.component.html Convert to @if; update value() usage
frontend/src/app/components/ui-components/table-display-fields/color/color.component.spec.ts Add validity/normalization tests
frontend/src/app/components/ui-components/table-display-fields/code/code.component.html Update to value() + clipboard binding
frontend/src/app/components/ui-components/table-display-fields/code/code.component.spec.ts Add basic rendering tests
frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts Update widget param parsing to use widgetStructure()
frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html Convert boolean rendering to @if/@else
frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.spec.ts Add boolean input + config tests
frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.ts Remove CommonModule import from component metadata
frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.html Update to value()
frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.spec.ts Add basic rendering test
frontend/src/app/components/ui-components/table-display-fields/base-table-display-field/base-table-display-field.component.ts Replace Inputs/Outputs with input()/output()
frontend/src/app/components/ui-components/table-display-fields/base-table-display-field/base-table-display-field.component.spec.ts Add tests for signal inputs
frontend/src/app/components/ui-components/record-view-fields/uuid/uuid.component.ts Remove unused @Injectable
frontend/src/app/components/ui-components/record-view-fields/uuid/uuid.component.html Update to value()
frontend/src/app/components/ui-components/record-view-fields/uuid/uuid.component.spec.ts Add creation test
frontend/src/app/components/ui-components/record-view-fields/url/url.component.ts Migrate to value() for validation
frontend/src/app/components/ui-components/record-view-fields/url/url.component.html Convert to @if/@else; update value() usage
frontend/src/app/components/ui-components/record-view-fields/url/url.component.spec.ts Add URL validation tests
frontend/src/app/components/ui-components/record-view-fields/timezone/timezone.component.ts Migrate to value() usage
frontend/src/app/components/ui-components/record-view-fields/timezone/timezone.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/record-view-fields/time/time.component.ts Migrate to value() usage
frontend/src/app/components/ui-components/record-view-fields/time/time.component.spec.ts Add init/format tests
frontend/src/app/components/ui-components/record-view-fields/time-interval/time-interval.component.ts Migrate to value() for parsing
frontend/src/app/components/ui-components/record-view-fields/time-interval/time-interval.component.spec.ts Add formatting tests
frontend/src/app/components/ui-components/record-view-fields/text/text.component.ts Migrate to value()/widgetStructure()
frontend/src/app/components/ui-components/record-view-fields/text/text.component.html Update to value()
frontend/src/app/components/ui-components/record-view-fields/text/text.component.spec.ts Add validation tests
frontend/src/app/components/ui-components/record-view-fields/static-text/static-text.component.ts Remove unused @Injectable
frontend/src/app/components/ui-components/record-view-fields/static-text/static-text.component.html Update to value()
frontend/src/app/components/ui-components/record-view-fields/static-text/static-text.component.spec.ts Add creation test
frontend/src/app/components/ui-components/record-view-fields/select/select.component.ts Migrate to value() and widgetStructure()
frontend/src/app/components/ui-components/record-view-fields/select/select.component.spec.ts Add option/backgroundColor tests
frontend/src/app/components/ui-components/record-view-fields/s3/s3.component.ts Migrate to value()/widgetStructure()/primaryKeys()
frontend/src/app/components/ui-components/record-view-fields/s3/s3.component.html Convert to @if/@else; update value()
frontend/src/app/components/ui-components/record-view-fields/s3/s3.component.spec.ts Add widget param parsing tests
frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts Override value with input<number>()
frontend/src/app/components/ui-components/record-view-fields/range/range.component.spec.ts Add default/param/progress tests
frontend/src/app/components/ui-components/record-view-fields/point/point.component.ts Migrate to value() access
frontend/src/app/components/ui-components/record-view-fields/point/point.component.html Convert *ngIf to @if
frontend/src/app/components/ui-components/record-view-fields/point/point.component.spec.ts Add formatting tests
frontend/src/app/components/ui-components/record-view-fields/phone/phone.component.ts Migrate to value() access
frontend/src/app/components/ui-components/record-view-fields/phone/phone.component.html Convert to @if; update value()
frontend/src/app/components/ui-components/record-view-fields/phone/phone.component.spec.ts Add parse/invalid/null tests
frontend/src/app/components/ui-components/record-view-fields/password/password.component.ts Remove unused @Injectable
frontend/src/app/components/ui-components/record-view-fields/password/password.component.spec.ts Add creation test
frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts Migrate to value()/widgetStructure()
frontend/src/app/components/ui-components/record-view-fields/number/number.component.html Convert *ngIf icons to @if
frontend/src/app/components/ui-components/record-view-fields/number/number.component.spec.ts Add threshold tests
frontend/src/app/components/ui-components/record-view-fields/money/money.component.ts Migrate to value()/widgetStructure()
frontend/src/app/components/ui-components/record-view-fields/money/money.component.spec.ts Add formatting tests
frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.ts Migrate to value() usage
frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.spec.ts Update test to use setInput
frontend/src/app/components/ui-components/record-view-fields/long-text/long-text.component.ts Remove unused @Injectable
frontend/src/app/components/ui-components/record-view-fields/long-text/long-text.component.html Update to value()
frontend/src/app/components/ui-components/record-view-fields/long-text/long-text.component.spec.ts Add creation test
frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts Migrate key/value usage to signals
frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.spec.ts Add init model test
frontend/src/app/components/ui-components/record-view-fields/image/image.component.ts Migrate to value()/widgetStructure()
frontend/src/app/components/ui-components/record-view-fields/image/image.component.html Convert to @if; update value()
frontend/src/app/components/ui-components/record-view-fields/image/image.component.spec.ts Add prefix + URL validity tests
frontend/src/app/components/ui-components/record-view-fields/id/id.component.ts Remove unused @Injectable
frontend/src/app/components/ui-components/record-view-fields/id/id.component.html Update to value()
frontend/src/app/components/ui-components/record-view-fields/id/id.component.spec.ts Add creation test
frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.ts Migrate inputs to input() and output to output()
frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html Update to link()/displayValue() and emit payload
frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.spec.ts Add init params test
frontend/src/app/components/ui-components/record-view-fields/file/file.component.ts Migrate to value() access
frontend/src/app/components/ui-components/record-view-fields/file/file.component.spec.ts Add blob/long/short/null tests
frontend/src/app/components/ui-components/record-view-fields/date/date.component.ts Migrate to value() access
frontend/src/app/components/ui-components/record-view-fields/date/date.component.spec.ts Add valid/invalid/null tests
frontend/src/app/components/ui-components/record-view-fields/date-time/date-time.component.ts Migrate to value() access
frontend/src/app/components/ui-components/record-view-fields/date-time/date-time.component.spec.ts Add valid/invalid tests
frontend/src/app/components/ui-components/record-view-fields/country/country.component.ts Migrate to value()/widgetStructure()
frontend/src/app/components/ui-components/record-view-fields/country/country.component.html Convert flag *ngIf to @if
frontend/src/app/components/ui-components/record-view-fields/country/country.component.spec.ts Add show_flag behavior tests
frontend/src/app/components/ui-components/record-view-fields/color/color.component.ts Migrate to value()
frontend/src/app/components/ui-components/record-view-fields/color/color.component.html Convert swatch *ngIf to @if
frontend/src/app/components/ui-components/record-view-fields/color/color.component.spec.ts Add validity/normalization tests
frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts Migrate key/value/widgetStructure usage to signals
frontend/src/app/components/ui-components/record-view-fields/code/code.component.spec.ts Add init/theme tests
frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.ts Migrate widgetStructure access to signals
frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html Convert to @if blocks + value()
frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.spec.ts Add invertColors tests
frontend/src/app/components/ui-components/record-view-fields/binary-data-caption/binary-data-caption.component.ts Remove CommonModule import from component metadata
frontend/src/app/components/ui-components/record-view-fields/binary-data-caption/binary-data-caption.component.html Update to value()
frontend/src/app/components/ui-components/record-view-fields/binary-data-caption/binary-data-caption.component.spec.ts Add creation test
frontend/src/app/components/ui-components/record-view-fields/base-record-view-field/base-record-view-field.component.ts Replace Inputs/Outputs with input()/output()
frontend/src/app/components/ui-components/record-edit-fields/uuid/uuid.component.ts Convert value to model() and update UUID generation
frontend/src/app/components/ui-components/record-edit-fields/uuid/uuid.component.html Update base inputs to ...() reads
frontend/src/app/components/ui-components/record-edit-fields/url/url.component.ts Convert value to model() and update widget param parsing
frontend/src/app/components/ui-components/record-edit-fields/url/url.component.html Convert to @if for prefix/errors; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/url/url.component.spec.ts Expand widget-param parsing tests
frontend/src/app/components/ui-components/record-edit-fields/timezone/timezone.component.ts Convert value to model() and update allow-null checks
frontend/src/app/components/ui-components/record-edit-fields/timezone/timezone.component.html Convert *ngFor to @for; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/timezone/timezone.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/record-edit-fields/time/time.component.ts Convert value to model(); remove local output
frontend/src/app/components/ui-components/record-edit-fields/time/time.component.html Update base inputs to ...() reads
frontend/src/app/components/ui-components/record-edit-fields/time-interval/time-interval.component.ts Convert value to model(); read initial interval via value()
frontend/src/app/components/ui-components/record-edit-fields/time-interval/time-interval.component.spec.ts Expand tests incl. emitted string shape
frontend/src/app/components/ui-components/record-edit-fields/text/text.component.ts Convert value to model() and widget parsing via signals
frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html Convert errors/counter to @if; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/static-text/static-text.component.ts Convert value to model()
frontend/src/app/components/ui-components/record-edit-fields/static-text/static-text.component.html Convert to @if; update label/value reads
frontend/src/app/components/ui-components/record-edit-fields/select/select.component.ts Convert value to model(); read structures via signals
frontend/src/app/components/ui-components/record-edit-fields/select/select.component.html Convert *ngFor to @for; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/range/range.component.ts Convert value to model() and emit from signal
frontend/src/app/components/ui-components/record-edit-fields/range/range.component.html Update label/value reads to signals
frontend/src/app/components/ui-components/record-edit-fields/point/point.component.ts Convert value to model()
frontend/src/app/components/ui-components/record-edit-fields/point/point.component.html Convert *ngIf to @if; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/phone/phone.component.html Update disabled/readonly/testid to use signals
frontend/src/app/components/ui-components/record-edit-fields/password/password.component.ts Convert value to model(); adjust init emission
frontend/src/app/components/ui-components/record-edit-fields/password/password.component.html Update base inputs + checkbox disable logic to signals
frontend/src/app/components/ui-components/record-edit-fields/password/password.component.spec.ts Update tests for signal-based value
frontend/src/app/components/ui-components/record-edit-fields/number/number.component.ts Convert value to model()
frontend/src/app/components/ui-components/record-edit-fields/number/number.component.html Update base inputs/testid to signals
frontend/src/app/components/ui-components/record-edit-fields/money/money.component.html Convert *ngIf/*ngFor to @if/@for; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/money/money.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts Convert value to model(); switch to inject()
frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.html Update label + readOnly to signals
frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.ts Convert value to model(); switch to inject()
frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html Update label + readOnly to signals
frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.spec.ts Update tests for signal-based label/value
frontend/src/app/components/ui-components/record-edit-fields/image/image.component.ts Convert value to model(); update prefix parsing + imageUrl
frontend/src/app/components/ui-components/record-edit-fields/image/image.component.html Convert to @if for prefix/errors/img; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/image/image.component.spec.ts Expand widget-param + imageUrl tests
frontend/src/app/components/ui-components/record-edit-fields/id/id.component.ts Convert value to model()
frontend/src/app/components/ui-components/record-edit-fields/id/id.component.html Convert errors to @if; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.ts Convert value to model(); switch constructor DI to inject()
frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html Update label/required/relations references to signals
frontend/src/app/components/ui-components/record-edit-fields/date/date.component.ts Convert value to model(); read initial via value()
frontend/src/app/components/ui-components/record-edit-fields/date/date.component.html Update base inputs/testid to signals
frontend/src/app/components/ui-components/record-edit-fields/date/date.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/record-edit-fields/date-time/date-time.component.ts Convert value to model(); switch constructor DI to inject()
frontend/src/app/components/ui-components/record-edit-fields/date-time/date-time.component.html Update base inputs/testid to signals
frontend/src/app/components/ui-components/record-edit-fields/date-time/date-time.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/record-edit-fields/country/country.component.ts Convert value to model(); widget param parsing via signals
frontend/src/app/components/ui-components/record-edit-fields/country/country.component.html Update base inputs/testid to signals
frontend/src/app/components/ui-components/record-edit-fields/color/color.component.html Update base inputs and disabled/readonly to signals
frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts Convert value to model(); switch to inject()
frontend/src/app/components/ui-components/record-edit-fields/code/code.component.html Update label/readOnly to signals
frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts Update tests to use setInput
frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts Convert value to model(); parse widget params via signals
frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html Convert *ngIf to @if/@else; update ...() reads
frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.spec.ts Update tests to use setInput and signal reads
frontend/src/app/components/ui-components/record-edit-fields/binary-data-caption/binary-data-caption.component.html Update label/testid reads to signals
frontend/src/app/components/ui-components/record-edit-fields/base-row-field/base-row-field.component.ts Replace Inputs/Outputs with input()/output() + computed label
frontend/src/app/components/ui-components/record-edit-fields/base-row-field/base-row-field.component.spec.ts Update/add tests for computed normalizedLabel

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 8 to 13
@Component({
selector: 'app-url-display',
templateUrl: './url.component.html',
styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './url.component.css'],
imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule],
selector: 'app-url-display',
templateUrl: './url.component.html',
styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './url.component.css'],
imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
})
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

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

url.component.html still uses *ngIf, but UrlDisplayComponent no longer imports CommonModule. In a standalone component this will cause template compilation errors for NgIf. Either switch the template to the new built-in control flow (@if/@else) or re-add CommonModule to the component imports array.

Copilot uses AI. Check for mistakes.
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