From bb033091b1f64b888822be1423a80f16f5314f6b Mon Sep 17 00:00:00 2001 From: Guy Ben-Aharon Date: Sun, 28 Sep 2025 17:02:56 +0300 Subject: [PATCH] fix: dbml diff fields types preview (#934) --- .../chartdb-context/chartdb-provider.tsx | 8 +-- src/context/diff-context/diff-context.tsx | 56 ++++++++++++++---- src/context/diff-context/diff-provider.tsx | 59 ++++++++++++++----- .../canvas/table-node/table-node-field.tsx | 49 +++++++++------ .../canvas/table-node/table-node.tsx | 6 +- 5 files changed, 124 insertions(+), 54 deletions(-) diff --git a/src/context/chartdb-context/chartdb-provider.tsx b/src/context/chartdb-context/chartdb-provider.tsx index b712cf8c..58d46b38 100644 --- a/src/context/chartdb-context/chartdb-provider.tsx +++ b/src/context/chartdb-context/chartdb-provider.tsx @@ -74,10 +74,10 @@ export const ChartDBProvider: React.FC< useState(); const diffCalculatedHandler = useCallback((event: DiffCalculatedEvent) => { - const { tablesAdded, fieldsAdded, relationshipsAdded } = event.data; + const { tablesToAdd, fieldsToAdd, relationshipsToAdd } = event.data; setTables((tables) => - [...tables, ...(tablesAdded ?? [])].map((table) => { - const fields = fieldsAdded.get(table.id); + [...tables, ...(tablesToAdd ?? [])].map((table) => { + const fields = fieldsToAdd.get(table.id); return fields ? { ...table, fields: [...table.fields, ...fields] } : table; @@ -85,7 +85,7 @@ export const ChartDBProvider: React.FC< ); setRelationships((relationships) => [ ...relationships, - ...(relationshipsAdded ?? []), + ...(relationshipsToAdd ?? []), ]); }, []); diff --git a/src/context/diff-context/diff-context.tsx b/src/context/diff-context/diff-context.tsx index 491fa045..bb153243 100644 --- a/src/context/diff-context/diff-context.tsx +++ b/src/context/diff-context/diff-context.tsx @@ -15,9 +15,9 @@ export type DiffEventBase = { }; export type DiffCalculatedData = { - tablesAdded: DBTable[]; - fieldsAdded: Map; - relationshipsAdded: DBRelationship[]; + tablesToAdd: DBTable[]; + fieldsToAdd: Map; + relationshipsToAdd: DBRelationship[]; }; export type DiffCalculatedEvent = DiffEventBase< @@ -44,15 +44,21 @@ export interface DiffContext { options?: { summaryOnly?: boolean; }; - }) => void; + }) => { foundDiff: boolean }; resetDiff: () => void; // table diff checkIfTableHasChange: ({ tableId }: { tableId: string }) => boolean; checkIfNewTable: ({ tableId }: { tableId: string }) => boolean; checkIfTableRemoved: ({ tableId }: { tableId: string }) => boolean; - getTableNewName: ({ tableId }: { tableId: string }) => string | null; - getTableNewColor: ({ tableId }: { tableId: string }) => string | null; + getTableNewName: ({ tableId }: { tableId: string }) => { + old: string; + new: string; + } | null; + getTableNewColor: ({ tableId }: { tableId: string }) => { + old: string; + new: string; + } | null; // field diff checkIfFieldHasChange: ({ @@ -64,17 +70,41 @@ export interface DiffContext { }) => boolean; checkIfFieldRemoved: ({ fieldId }: { fieldId: string }) => boolean; checkIfNewField: ({ fieldId }: { fieldId: string }) => boolean; - getFieldNewName: ({ fieldId }: { fieldId: string }) => string | null; - getFieldNewType: ({ fieldId }: { fieldId: string }) => DataType | null; - getFieldNewPrimaryKey: ({ fieldId }: { fieldId: string }) => boolean | null; - getFieldNewNullable: ({ fieldId }: { fieldId: string }) => boolean | null; + getFieldNewName: ({ + fieldId, + }: { + fieldId: string; + }) => { old: string; new: string } | null; + getFieldNewType: ({ + fieldId, + }: { + fieldId: string; + }) => { old: DataType; new: DataType } | null; + getFieldNewPrimaryKey: ({ + fieldId, + }: { + fieldId: string; + }) => { old: boolean; new: boolean } | null; + getFieldNewNullable: ({ + fieldId, + }: { + fieldId: string; + }) => { old: boolean; new: boolean } | null; getFieldNewCharacterMaximumLength: ({ fieldId, }: { fieldId: string; - }) => string | null; - getFieldNewScale: ({ fieldId }: { fieldId: string }) => number | null; - getFieldNewPrecision: ({ fieldId }: { fieldId: string }) => number | null; + }) => { old: string; new: string } | null; + getFieldNewScale: ({ + fieldId, + }: { + fieldId: string; + }) => { old: number; new: number } | null; + getFieldNewPrecision: ({ + fieldId, + }: { + fieldId: string; + }) => { old: number; new: number } | null; // relationship diff checkIfNewRelationship: ({ diff --git a/src/context/diff-context/diff-provider.tsx b/src/context/diff-context/diff-provider.tsx index b11e8bc1..5181234b 100644 --- a/src/context/diff-context/diff-provider.tsx +++ b/src/context/diff-context/diff-provider.tsx @@ -36,7 +36,7 @@ export const DiffProvider: React.FC = ({ const events = useEventEmitter(); - const generateNewFieldsMap = useCallback( + const generateFieldsToAddMap = useCallback( ({ diffMap, newDiagram, @@ -66,7 +66,7 @@ export const DiffProvider: React.FC = ({ [] ); - const findNewRelationships = useCallback( + const findRelationshipsToAdd = useCallback( ({ diffMap, newDiagram, @@ -101,7 +101,7 @@ export const DiffProvider: React.FC = ({ diffMap: DiffMap; }): DiffCalculatedData => { return { - tablesAdded: + tablesToAdd: newDiagram?.tables?.filter((table) => { const tableKey = getDiffMapKey({ diffObject: 'table', @@ -114,17 +114,17 @@ export const DiffProvider: React.FC = ({ ); }) ?? [], - fieldsAdded: generateNewFieldsMap({ + fieldsToAdd: generateFieldsToAddMap({ diffMap: diffMap, newDiagram: newDiagram, }), - relationshipsAdded: findNewRelationships({ + relationshipsToAdd: findRelationshipsToAdd({ diffMap: diffMap, newDiagram: newDiagram, }), }; }, - [findNewRelationships, generateNewFieldsMap] + [findRelationshipsToAdd, generateFieldsToAddMap] ); const calculateDiff: DiffContext['calculateDiff'] = useCallback( @@ -149,6 +149,8 @@ export const DiffProvider: React.FC = ({ newDiagram: newDiagramArg, }), }); + + return { foundDiff: !!newDiffs.size }; }, [setDiffMap, events, generateDiffCalculatedData] ); @@ -165,7 +167,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(tableNameKey); if (diff?.type === 'changed') { - return diff.newValue as string; + return { + new: diff.newValue as string, + old: diff.oldValue as string, + }; } } @@ -186,7 +191,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(tableColorKey); if (diff?.type === 'changed') { - return diff.newValue as string; + return { + new: diff.newValue as string, + old: diff.oldValue as string, + }; } } return null; @@ -277,7 +285,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(fieldKey); if (diff?.type === 'changed') { - return diff.newValue as string; + return { + old: diff.oldValue as string, + new: diff.newValue as string, + }; } } @@ -298,7 +309,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(fieldKey); if (diff?.type === 'changed') { - return diff.newValue as DataType; + return { + old: diff.oldValue as DataType, + new: diff.newValue as DataType, + }; } } @@ -321,7 +335,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(fieldKey); if (diff?.type === 'changed') { - return diff.newValue as boolean; + return { + old: diff.oldValue as boolean, + new: diff.newValue as boolean, + }; } } @@ -342,7 +359,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(fieldKey); if (diff?.type === 'changed') { - return diff.newValue as boolean; + return { + old: diff.oldValue as boolean, + new: diff.newValue as boolean, + }; } } @@ -365,7 +385,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(fieldKey); if (diff?.type === 'changed') { - return diff.newValue as string; + return { + old: diff.oldValue as string, + new: diff.newValue as string, + }; } } @@ -386,7 +409,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(fieldKey); if (diff?.type === 'changed') { - return diff.newValue as number; + return { + old: diff.oldValue as number, + new: diff.newValue as number, + }; } } @@ -409,7 +435,10 @@ export const DiffProvider: React.FC = ({ const diff = diffMap.get(fieldKey); if (diff?.type === 'changed') { - return diff.newValue as number; + return { + old: diff.oldValue as number, + new: diff.newValue as number, + }; } } diff --git a/src/pages/editor-page/canvas/table-node/table-node-field.tsx b/src/pages/editor-page/canvas/table-node/table-node-field.tsx index 81429457..8d54ee96 100644 --- a/src/pages/editor-page/canvas/table-node/table-node-field.tsx +++ b/src/pages/editor-page/canvas/table-node/table-node-field.tsx @@ -159,13 +159,17 @@ export const TableNodeField: React.FC = React.memo( const [diffState, setDiffState] = useState<{ isDiffFieldRemoved: boolean; isDiffNewField: boolean; - fieldDiffChangedName: string | null; - fieldDiffChangedType: DBField['type'] | null; - fieldDiffChangedNullable: boolean | null; - fieldDiffChangedCharacterMaximumLength: string | null; - fieldDiffChangedScale: number | null; - fieldDiffChangedPrecision: number | null; - fieldDiffChangedPrimaryKey: boolean | null; + fieldDiffChangedName: ReturnType; + fieldDiffChangedType: ReturnType; + fieldDiffChangedNullable: ReturnType; + fieldDiffChangedCharacterMaximumLength: ReturnType< + typeof getFieldNewCharacterMaximumLength + >; + fieldDiffChangedScale: ReturnType; + fieldDiffChangedPrecision: ReturnType; + fieldDiffChangedPrimaryKey: ReturnType< + typeof getFieldNewPrimaryKey + >; isDiffFieldChanged: boolean; }>({ isDiffFieldRemoved: false, @@ -368,9 +372,9 @@ export const TableNodeField: React.FC = React.memo( > {fieldDiffChangedName ? ( <> - {field.name}{' '} + {fieldDiffChangedName.old}{' '} →{' '} - {fieldDiffChangedName} + {fieldDiffChangedName.new} ) : ( field.name @@ -389,9 +393,8 @@ export const TableNodeField: React.FC = React.memo(
- {(field.primaryKey && - fieldDiffChangedPrimaryKey === null) || - fieldDiffChangedPrimaryKey ? ( + {(field.primaryKey && !fieldDiffChangedPrimaryKey?.old) || + fieldDiffChangedPrimaryKey?.new ? (
= React.memo( {fieldDiffChangedType ? ( <> - {field.type.name.split(' ')[0]} + { + fieldDiffChangedType.old.name.split( + ' ' + )[0] + } {' '} - {fieldDiffChangedType.name.split(' ')[0]} + { + fieldDiffChangedType.new.name.split( + ' ' + )[0] + } ) : ( `${field.type.name.split(' ')[0]}${ @@ -448,21 +459,21 @@ export const TableNodeField: React.FC = React.memo( ...field, ...{ precision: - fieldDiffChangedPrecision ?? + fieldDiffChangedPrecision?.new ?? field.precision, scale: - fieldDiffChangedScale ?? + fieldDiffChangedScale?.new ?? field.scale, characterMaximumLength: - fieldDiffChangedCharacterMaximumLength ?? + fieldDiffChangedCharacterMaximumLength?.new ?? field.characterMaximumLength, }, }) : '' }` )} - {fieldDiffChangedNullable !== null ? ( - fieldDiffChangedNullable ? ( + {fieldDiffChangedNullable ? ( + fieldDiffChangedNullable.new ? ( ? ) : ( ? diff --git a/src/pages/editor-page/canvas/table-node/table-node.tsx b/src/pages/editor-page/canvas/table-node/table-node.tsx index 5f0f8ea6..dd658212 100644 --- a/src/pages/editor-page/canvas/table-node/table-node.tsx +++ b/src/pages/editor-page/canvas/table-node/table-node.tsx @@ -138,7 +138,7 @@ export const TableNode: React.FC> = React.memo( ); const tableColor = useMemo(() => { if (tableChangedColor) { - return tableChangedColor; + return tableChangedColor.new; } return table.color; @@ -476,13 +476,13 @@ export const TableNode: React.FC> = React.memo( {tableChangedName ? ( ) : isDiffNewTable ? (