Refactor interfaces to types for improved consistency across the code base#569
Conversation
There was a problem hiding this comment.
Pull request overview
This PR standardizes TypeScript type definitions across the frontend by converting most interface declarations to type aliases and enforcing that convention via ESLint, while preserving interface where declaration merging is required (e.g., module/global augmentation).
Changes:
- Enforced
@typescript-eslint/consistent-type-definitionsto prefertypealiases. - Refactored a large set of frontend
interfacedeclarations totypealiases (including intersections where needed). - Added targeted ESLint disables/comments in
.d.tsfiles whereinterfaceis required for augmentation.
Reviewed changes
Copilot reviewed 120 out of 122 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/main/frontend/eslint.config.mjs | Enforces type aliases via consistent-type-definitions. |
| src/main/frontend/app/utils/xsd-utils.ts | Converts requirement model interfaces to type aliases (with intersections). |
| src/main/frontend/app/utils/datamapper_utils/property-node-utils.ts | Converts options interface to type. |
| src/main/frontend/app/utils/datamapper_utils/mapping-node-utils.ts | Converts result/input interfaces to type. |
| src/main/frontend/app/utils/datamapper_utils/canvas-management-utils.ts | Converts positions interface to type. |
| src/main/frontend/app/utils/api.ts | Converts backend error shape interface to type. |
| src/main/frontend/app/types/react.d.ts | Keeps interface for React module augmentation; disables new lint rule locally. |
| src/main/frontend/app/types/project.types.ts | Converts exported project-related interfaces to type. |
| src/main/frontend/app/types/global.d.ts | Keeps interface Window for global augmentation; disables new lint rule locally. |
| src/main/frontend/app/types/git.types.ts | Converts git domain interfaces to type. |
| src/main/frontend/app/types/filesystem.types.ts | Converts filesystem interfaces to type. |
| src/main/frontend/app/types/datamapper_types/schema-types.ts | Converts schema model interfaces to type (with intersections for “base” fields). |
| src/main/frontend/app/types/datamapper_types/react-node-types.ts | Converts node data/labels interfaces to type. |
| src/main/frontend/app/types/datamapper_types/function-types.ts | Converts datamapper function/config interfaces to type. |
| src/main/frontend/app/types/datamapper_types/export-types.ts | Converts export model interfaces to type (with intersection for Target). |
| src/main/frontend/app/types/datamapper_types/data-types.ts | Converts datatype interfaces to type. |
| src/main/frontend/app/types/datamapper_types/config-types.ts | Converts config interface to type. |
| src/main/frontend/app/stores/tree-store.ts | Converts store state interface to type. |
| src/main/frontend/app/stores/tab-store.ts | Converts tab data/state interfaces to type. |
| src/main/frontend/app/stores/sidebar-layout-store.ts | Converts sidebar store interfaces to type. |
| src/main/frontend/app/stores/shortcut-store.ts | Converts shortcut-related interfaces to type. |
| src/main/frontend/app/stores/settings-store.ts | Converts settings interfaces to type. |
| src/main/frontend/app/stores/save-status-store.ts | Converts save status store interface to type. |
| src/main/frontend/app/stores/project-store.ts | Converts project store interface to type. |
| src/main/frontend/app/stores/node-context-store.ts | Converts node context store interface to type. |
| src/main/frontend/app/stores/git-store.ts | Converts git store interface to type. |
| src/main/frontend/app/stores/flow-store.ts | Converts flow snapshot/state interfaces to type. |
| src/main/frontend/app/stores/editor-tab-store.ts | Converts editor tab-related interfaces to type. |
| src/main/frontend/app/services/frank-framework-service.ts | Converts service DTO/config interfaces to type. |
| src/main/frontend/app/services/file-service.ts | Converts file DTO interface to type. |
| src/main/frontend/app/services/app-info-service.ts | Converts app info interface to type. |
| src/main/frontend/app/routes/studio/xml-to-json-parser.ts | Converts local parsing interfaces to type. |
| src/main/frontend/app/routes/studio/studio.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/flow-to-xml-parser.ts | Converts local JSON/data interfaces to type. |
| src/main/frontend/app/routes/studio/context/sorted-elements.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/context/element-hover-card.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/context/deprecated-list-popover.tsx | Converts exported interface to type. |
| src/main/frontend/app/routes/studio/context/context-input.tsx | Converts exported props interface to type. |
| src/main/frontend/app/routes/studio/context/context-input-field.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/node-utilities.ts | Converts exported interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/components/node-header.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/components/node-children-container.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/components/missing-requirements.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu-item.tsx | Converts exported props interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/components/deprecated-popover.tsx | Converts exported interface to type. |
| src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx | Converts exported node and props interfaces to type. |
| src/main/frontend/app/routes/studio/canvas/edgetypes/frank-edge.tsx | Converts edge props and local node data interfaces to type. |
| src/main/frontend/app/routes/settings/settings-menu.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/settings/settings-menu-items.ts | Converts menu item data interface to type. |
| src/main/frontend/app/routes/projectlanding/new-configuration-modal.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/projectlanding/configuration-row.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/projectlanding/clone-configuration-modal.tsx | Converts props interface to type; minor formatting refactor. |
| src/main/frontend/app/routes/projectlanding/action-button.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/help/help-topics.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/help/help-topic-tree-items.ts | Converts tree item data interface to type. |
| src/main/frontend/app/routes/help/help-image.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/editor/xml-utils.ts | Converts location interfaces to type. |
| src/main/frontend/app/routes/editor/editor.tsx | Converts several interfaces to type. |
| src/main/frontend/app/routes/datamapper/property-list.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/datamapper/mapping-table.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/datamapper/initialize.tsx | Converts props interface to type. |
| src/main/frontend/app/routes/configurations/configuration-overview.tsx | Converts local interface to type. |
| src/main/frontend/app/routes/configurations/configuration-file-tile.tsx | Converts props interfaces to type. |
| src/main/frontend/app/routes/configurations/add-configuration-tile.tsx | Converts interface to type for tile props. |
| src/main/frontend/app/routes/configurations/add-configuration-modal.tsx | Converts props interface to type. |
| src/main/frontend/app/providers/frankconfig-xsd-provider.tsx | Converts context value interface to type. |
| src/main/frontend/app/hooks/use-file-watcher.ts | Converts watcher entry interface to type. |
| src/main/frontend/app/hooks/use-datamapper-flow-management.ts | Converts hook props interface to type. |
| src/main/frontend/app/hooks/use-async.ts | Converts options/result interfaces to type. |
| src/main/frontend/app/components/toast.tsx | Converts toast options interface to type. |
| src/main/frontend/app/components/tabs/tabs.tsx | Converts generic props interface to type. |
| src/main/frontend/app/components/sidebars-layout/sidebar-layout.tsx | Converts layout props interface to type. |
| src/main/frontend/app/components/sidebars-layout/sidebar-close.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/search/search.tsx | Converts props interface to type. |
| src/main/frontend/app/components/navbar/navbar-link.tsx | Converts props interface to type. |
| src/main/frontend/app/components/modal.tsx | Converts props interface to type. |
| src/main/frontend/app/components/loading-spinner.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/tree-action-button.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/switch-toggle.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/segmented-button.tsx | Converts extends interface to intersection-based type. |
| src/main/frontend/app/components/inputs/rounded-toggle.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/kebab-menu.tsx | Converts menu item + props interfaces to type. |
| src/main/frontend/app/components/inputs/input-with-label.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/icon-label-button.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/icon-button.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/dropdown.tsx | Converts props interface to type. |
| src/main/frontend/app/components/inputs/close-button.tsx | Converts props interface to type. |
| src/main/frontend/app/components/git/git-toolbar.tsx | Converts props interface to type. |
| src/main/frontend/app/components/git/git-panel.tsx | Converts props interface to type. |
| src/main/frontend/app/components/git/git-commit-box.tsx | Converts props interface to type. |
| src/main/frontend/app/components/git/git-changes.tsx | Converts props interface to type. |
| src/main/frontend/app/components/git/diff-tab-view.tsx | Converts props interface to type. |
| src/main/frontend/app/components/flow/create-node-modal.tsx | Converts props interface to type. |
| src/main/frontend/app/components/flow/canvas-context-menu.tsx | Converts props interface to type. |
| src/main/frontend/app/components/flow/add-subcomponent-modal.tsx | Converts props interface to type. |
| src/main/frontend/app/components/file-structure/use-studio-context-menu.ts | Converts multiple exported/local interfaces to type. |
| src/main/frontend/app/components/file-structure/use-file-tree-context-menu.ts | Converts multiple exported/local interfaces to type. |
| src/main/frontend/app/components/file-structure/studio-files-data-provider.ts | Converts exported data interfaces to type. |
| src/main/frontend/app/components/file-structure/studio-file-tree-dialogs.tsx | Converts props interface to type. |
| src/main/frontend/app/components/file-structure/studio-context-menu.tsx | Converts props interface to type. |
| src/main/frontend/app/components/file-structure/name-input-dialog.tsx | Converts props interface to type. |
| src/main/frontend/app/components/file-structure/inline-rename-input.tsx | Converts props interface to type. |
| src/main/frontend/app/components/file-structure/file-tree-dialogs.tsx | Converts props interface to type. |
| src/main/frontend/app/components/file-structure/editor-data-provider.ts | Converts node interface to type. |
| src/main/frontend/app/components/file-structure/context-menu.tsx | Converts props interface to type. |
| src/main/frontend/app/components/file-structure/confirm-delete-dialog.tsx | Converts props interface to type. |
| src/main/frontend/app/components/directory-picker/directory-picker.tsx | Converts props interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/node-types.tsx | Converts node-type params interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/labeled-group-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/import-schematic-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/extra-source-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/array-mapping-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx | Converts exported props interface to type. |
| src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx | Converts exported modal props interface to type. |
| src/main/frontend/app/components/datamapper/forms/add-field-form.tsx | Converts exported modal props interface to type. |
| src/main/frontend/app/components/datamapper/forms/add-conditions-form.tsx | Converts form props interface to type. |
| src/main/frontend/app/components/datamapper/basic-components/import-button.tsx | Converts props interface to type. |
Comments suppressed due to low confidence (2)
src/main/frontend/app/routes/configurations/add-configuration-tile.tsx:5
- Typo in the props type name (
AddConfigurationTileProertiess). This makes the type harder to search for and inconsistent with other*Propertiestypes in the codebase. Rename it toAddConfigurationTileProperties(and update the function signature accordingly).
src/main/frontend/app/components/datamapper/react-flow/import-schematic-node.tsx:21 ImportSchematicNodepropsis inconsistently named (lowercaseprops) compared to the other node prop types in this folder (e.g.OneEdgeNodeProperties,MappingNodeProperties). Consider renaming toImportSchematicNodeProperties(orImportSchematicNodeProps) and updating the corresponding import/usage innode-types.tsx.
export type ImportSchematicNodeprops = {
data: {
fileType: string
side: 'source' | 'target'
importFunc: ImportSchematicFunc
} & Record<string, unknown>
}
function ImportSchematicNode({ data }: ImportSchematicNodeprops) {
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
12c7d77 to
d760420
Compare
|
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 119 out of 121 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (3)
src/main/frontend/app/routes/configurations/add-configuration-tile.tsx:5
- The props type name has a typo ("Proertiess"), which makes the component signature harder to read and search for. Consider renaming it to "AddConfigurationTileProperties" and updating the usage in the function parameter type.
src/main/frontend/app/routes/datamapper/mapping-table.tsx:22 - The props type is named "PropertyListProperties" even though the component is "MappingTable". Renaming the type to match the component reduces confusion during refactors and search.
src/main/frontend/app/components/datamapper/react-flow/import-schematic-node.tsx:22 - The exported type name "ImportSchematicNodeprops" uses non-standard casing ("props" instead of "Props"). Renaming to "ImportSchematicNodeProps" would align with common React conventions, but will require updating imports/usages in other files (e.g., node-types.tsx).
//DataType needed
export type ImportSchematicNodeprops = {
data: {
fileType: string
side: 'source' | 'target'
importFunc: ImportSchematicFunc
} & Record<string, unknown>
}
function ImportSchematicNode({ data }: ImportSchematicNodeprops) {
const [isDragging, setIsDragging] = useState(false)



No description provided.