Skip to content

Feat/add new data model for schematics #1466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mistrykaran91 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feat/add new data model for schematics #1466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04d94b3
feat(schematics): add new data models for input names and pattern rep…
mistrykaran91 Feb 6, 2026
3c325b8
test(schematics): update tests for v49 as per the new data model
mistrykaran91 Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion projects/element-ng/schematics/migrations/data/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { ATTRIBUTE_SELECTORS_MIGRATION } from './attribute-selectors.js';
import { COMPONENT_NAMES_MIGRATION } from './component-names.js';
import { ELEMENT_SELECTORS_MIGRATION } from './element-selectors.js';
import { INPUT_NAMES_MIGRATION } from './input-names.js';
import { OUTPUT_NAMES_MIGRATION } from './output-names.js';
import { SYMBOL_REMOVALS_MIGRATION } from './symbol-removals.js';

Expand All @@ -15,18 +16,21 @@ export type ElementMigrationData = {
elementSelectorChanges: typeof ELEMENT_SELECTORS_MIGRATION;
symbolRemovalChanges: typeof SYMBOL_REMOVALS_MIGRATION;
outputNameChanges: typeof OUTPUT_NAMES_MIGRATION;
inputNameChanges: typeof INPUT_NAMES_MIGRATION;
};

export const getElementMigrationData = (): ElementMigrationData => ({
attributeSelectorChanges: ATTRIBUTE_SELECTORS_MIGRATION,
componentNameChanges: COMPONENT_NAMES_MIGRATION,
elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
outputNameChanges: OUTPUT_NAMES_MIGRATION
outputNameChanges: OUTPUT_NAMES_MIGRATION,
inputNameChanges: INPUT_NAMES_MIGRATION
});

export type { ComponentNamesInstruction } from './component-names.js';
export type { AttributeSelectorInstruction } from './attribute-selectors.js';
export type { ElementSelectorInstruction } from './element-selectors.js';
export type { InputNamesInstruction } from './input-names.js';
export type { OutputNamesInstruction } from './output-names.js';
export type { SymbolRemovalInstruction } from './symbol-removals.js';
39 changes: 39 additions & 0 deletions projects/element-ng/schematics/migrations/data/input-names.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
export interface InputNamesInstruction {
/** Regex to match module import path */
module: RegExp;
/** HTML element selector */
elementSelector: string;
/** HTML attribute selector */
attributeSelector?: string;
/** Array of input renames: [from, to] or [from, [to1, to2]] for splitting */
apiMappings: { replace: string; replaceWith: string | string[] }[];
}

export const INPUT_NAMES_MIGRATION: InputNamesInstruction[] = [
// v48 to v49
{
module: /@(siemens|simpl)\/element-ng/,
elementSelector: 'si-filtered-search',
apiMappings: [{ replace: 'readonly', replaceWith: 'disabled' }]
},
{
module: /@(siemens|simpl)\/charts-ng/,
elementSelector: 'si-chart-gauge',
apiMappings: [
{ replace: 'numberOfDecimals', replaceWith: ['minNumberOfDecimals', 'maxNumberOfDecimals'] }
]
},
{
module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
elementSelector: 'si-unauthorized-page',
apiMappings: [
{ replace: 'heading', replaceWith: 'titleText' },
{ replace: 'subHeading', replaceWith: 'copyText' },
{ replace: 'description', replaceWith: 'instructions' }
]
}
];
52 changes: 50 additions & 2 deletions projects/element-ng/schematics/migrations/data/migration-test-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
ComponentNamesInstruction,
ElementMigrationData,
ElementSelectorInstruction,
InputNamesInstruction,
OutputNamesInstruction,
SymbolRemovalInstruction
} from './index.js';
Expand Down Expand Up @@ -86,6 +87,18 @@ const COMPONENT_NAMES_MIGRATION: ComponentNamesInstruction[] = [
{
module: /@(siemens|simpl)\/dashboards-ng/,
symbolRenamings: [{ replace: 'CONFIG_TOKEN', replaceWith: 'SI_DASHBOARD_CONFIGURATION' }]
},
{
module: /@(siemens|simpl)\/element-ng(\/toast-notification)?/,
symbolRenamings: [{ replace: 'ToastStateName', replaceWith: 'StatusType' }],
toModule: '@siemens/element-ng/common'
},
{
module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
symbolRenamings: [
{ replace: 'SiUnauthorizedPageComponent', replaceWith: 'SiInfoPageComponent' }
],
toModule: '@siemens/element-ng/info-page'
}
];

Expand All @@ -103,7 +116,16 @@ const ELEMENT_SELECTORS_MIGRATION: ElementSelectorInstruction[] = [
// next to current
{ replace: 'si-icon-next', replaceWith: 'si-icon' },
{ replace: 'si-tabset-next', replaceWith: 'si-tabset' },
{ replace: 'si-tab-next', replaceWith: 'si-tab' }
{ replace: 'si-tab-next', replaceWith: 'si-tab' },
// v48 to v49
{
replace: 'si-unauthorized-page',
replaceWith: 'si-info-page',
defaultAttributes: [
{ name: 'icon', value: 'element-warning-filled' },
{ name: 'iconColor', value: 'status-warning' }
]
}
];

const SYMBOL_REMOVALS_MIGRATION: SymbolRemovalInstruction[] = [
Expand Down Expand Up @@ -169,6 +191,31 @@ const OUTPUT_NAMES_MIGRATION: OutputNamesInstruction[] = [
}
];

const INPUT_NAMES_MIGRATION: InputNamesInstruction[] = [
// v48 to v49
{
module: /@(siemens|simpl)\/element-ng/,
elementSelector: 'si-filtered-search',
apiMappings: [{ replace: 'readonly', replaceWith: 'disabled' }]
},
{
module: /@(siemens|simpl)\/charts-ng/,
elementSelector: 'si-chart-gauge',
apiMappings: [
{ replace: 'numberOfDecimals', replaceWith: ['minNumberOfDecimals', 'maxNumberOfDecimals'] }
]
},
{
module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
elementSelector: 'si-unauthorized-page',
apiMappings: [
{ replace: 'heading', replaceWith: 'titleText' },
{ replace: 'subHeading', replaceWith: 'copyText' },
{ replace: 'description', replaceWith: 'instructions' }
]
}
];

/**
* Stable migration data for testing.
* This data is frozen and used for testing to ensure test stability.
Expand All @@ -179,5 +226,6 @@ export const getElementMigrationTestData = (): ElementMigrationData => ({
componentNameChanges: COMPONENT_NAMES_MIGRATION,
elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
outputNameChanges: OUTPUT_NAMES_MIGRATION
outputNameChanges: OUTPUT_NAMES_MIGRATION,
inputNameChanges: INPUT_NAMES_MIGRATION
});
16 changes: 16 additions & 0 deletions projects/element-ng/schematics/migrations/element-migration/element-migration.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,20 @@ describe('to legacy migration', () => {
it('should remove the deprecated api from module based accordion', async () => {
await checkTemplateMigration(['module-based.accordion-inline-template.ts']);
});

it('should migrate ToastStateName to StatusType', async () => {
await checkTemplateMigration(['toast-state-name.ts']);
});

it('should migrate filtered search readonly attribute in inline templates', async () => {
await checkTemplateMigration(['filtered-search-inline-readonly.ts']);
});

it('should migrate unauthorized page component in inline templates', async () => {
await checkTemplateMigration(['unauthorized-page-inline.ts']);
});

it('should split numberOfDecimals into minNumberOfDecimals and maxNumberOfDecimals', async () => {
await checkTemplateMigration(['chart-gauge-decimals.ts']);
});
});
18 changes: 17 additions & 1 deletion projects/element-ng/schematics/migrations/element-migration/element-migration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,21 @@ export const elementMigrationRule = (
let recorder: UpdateRecorder | undefined = undefined;
let printer: ts.Printer | undefined = undefined;

if (migrationData.inputNameChanges) {
recorder ??= tree.beginUpdate(filePath);

for (const change of migrationData.inputNameChanges) {
renameApi({
tree,
recorder,
sourceFile,
filePath,
elementName: change.elementSelector,
apis: change.apiMappings
});
}
}

// Remove the ifs when it grows a bit more and split into multiple functions
if (migrationData.componentNameChanges) {
const changeInstructions = renameIdentifier({
Expand Down Expand Up @@ -83,7 +98,8 @@ export const elementMigrationRule = (
sourceFile,
filePath,
fromName: change.replace,
toName: change.replaceWith
toName: change.replaceWith,
defaultAttributes: change.defaultAttributes
});
}
}
Expand Down
27 changes: 27 additions & 0 deletions projects/element-ng/schematics/migrations/element-migration/files/chart-gauge-decimals.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Component } from '@angular/core';
import { SiChartGaugeComponent } from '@siemens/charts-ng/gauge';

@Component({
selector: 'app-dashboard',
standalone: true,
template: `
<si-chart-gauge
[value]="75"
[numberOfDecimals]="2"
[min]="0"
[max]="100"
></si-chart-gauge>

<si-chart-gauge [numberOfDecimals]="0"></si-chart-gauge>

<si-chart-gauge
[value]="gaugeValue"
[numberOfDecimals]="decimals"
></si-chart-gauge>
`,
imports: [SiChartGaugeComponent]
})
export class DashboardComponent {
gaugeValue = 85;
decimals = 1;
}
27 changes: 27 additions & 0 deletions ...element-ng/schematics/migrations/element-migration/files/expected.chart-gauge-decimals.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Component } from '@angular/core';
import { SiChartGaugeComponent } from '@siemens/charts-ng/gauge';

@Component({
selector: 'app-dashboard',
standalone: true,
template: `
<si-chart-gauge
[value]="75"
[minNumberOfDecimals]="2" [maxNumberOfDecimals]="2"
[min]="0"
[max]="100"
></si-chart-gauge>

<si-chart-gauge [minNumberOfDecimals]="0" [maxNumberOfDecimals]="0"></si-chart-gauge>

<si-chart-gauge
[value]="gaugeValue"
[minNumberOfDecimals]="decimals" [maxNumberOfDecimals]="decimals"
></si-chart-gauge>
`,
imports: [SiChartGaugeComponent]
})
export class DashboardComponent {
gaugeValue = 85;
decimals = 1;
}
32 changes: 32 additions & 0 deletions ...schematics/migrations/element-migration/files/expected.filtered-search-inline-readonly.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { Component } from '@angular/core';
import { SiFilteredSearchModule } from '@siemens/element-ng/filtered-search';

@Component({
selector: 'app-inline-readonly-test',
template: `
<div>
<si-filtered-search [disabled]="true"></si-filtered-search>
<si-filtered-search [disabled]="editMode === false" [criteria]="criteria"></si-filtered-search>
<si-filtered-search
[disabled]="isDisabled"
[placeholder]="'Enter search criteria'"
(search)="onSearch($event)">
</si-filtered-search>
</div>
`,
imports: [SiFilteredSearchModule],
standalone: true
})
export class InlineReadonlyTestComponent {
editMode = false;
isDisabled = true;
criteria = [];

onSearch(event: any): void {
console.log(event);
}
}
31 changes: 31 additions & 0 deletions ...cts/element-ng/schematics/migrations/element-migration/files/expected.toast-state-name.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { Component } from '@angular/core';
import { SiToastNotificationService } from '@siemens/element-ng/toast-notification';
import { StatusType } from '@siemens/element-ng/common';

@Component({
selector: 'app-test',
template: `
<button (click)="showToast()">Show Toast</button>
`
})
export class TestComponent {

constructor(private toastService: SiToastNotificationService) {}

showToast(): void {
const state: StatusType = 'success';
const anotherState: StatusType = 'error';
}

getToastState(): StatusType {
return 'warning';
}

processState(state: StatusType): void {
console.log(state);
}
}
36 changes: 36 additions & 0 deletions ...ent-ng/schematics/migrations/element-migration/files/expected.unauthorized-page-inline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { SiInfoPageComponent } from '@siemens/element-ng/info-page';

@Component({
selector: 'app-test-inline-unauthorized',
standalone: true,
imports: [SiInfoPageComponent],
template: `
<si-info-page icon="element-warning-filled" iconColor="status-warning"
titleText="Access Restricted"
copyText="You need special permissions to view this page."
instructions="Contact admin@company.com for access."
[link]="{ title: 'Return', link: '/home' }"
></si-info-page>

<div class="error-container">
<si-info-page icon="element-warning-filled" iconColor="status-warning"
[titleText]="title"
[copyText]="subtitle"
[instructions]="instructions"
></si-info-page>
</div>

<!-- Multiple instances -->
<si-info-page icon="element-warning-filled" iconColor="status-warning" titleText="Error 403"></si-info-page>
<si-info-page icon="element-warning-filled" iconColor="status-warning"
titleText="Permission Denied"
copyText="Contact support"
></si-info-page>
`
})
export class TestInlineUnauthorizedComponent {
title = 'Not Authorized';
subtitle = 'Your role does not permit access';
instructions = 'Request access from your manager';
}
32 changes: 32 additions & 0 deletions ...ement-ng/schematics/migrations/element-migration/files/filtered-search-inline-readonly.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { Component } from '@angular/core';
import { SiFilteredSearchModule } from '@siemens/element-ng/filtered-search';

@Component({
selector: 'app-inline-readonly-test',
template: `
<div>
<si-filtered-search [readonly]="true"></si-filtered-search>
<si-filtered-search [readonly]="editMode === false" [criteria]="criteria"></si-filtered-search>
<si-filtered-search
[readonly]="isDisabled"
[placeholder]="'Enter search criteria'"
(search)="onSearch($event)">
</si-filtered-search>
</div>
`,
imports: [SiFilteredSearchModule],
standalone: true
})
export class InlineReadonlyTestComponent {
editMode = false;
isDisabled = true;
criteria = [];

onSearch(event: any): void {
console.log(event);
}
}
Loading
Loading