Skip to content

Commit 0b14e93

Browse files
paula-stachopaula-stacho
authored
feat: DM inline field name edit COMPASS-9798 (#7454)
1 parent 4df3357 commit 0b14e93

File tree

5 files changed

+380
-245
lines changed

5 files changed

+380
-245
lines changed

‎packages/compass-data-modeling/src/components/diagram-editor.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
deleteCollection,
2323
deleteRelationship,
2424
removeField,
25+
renameField,
2526
} from '../store/diagram';
2627
import type {
2728
EdgeProps,
@@ -143,6 +144,11 @@ const DiagramContent: React.FunctionComponent<{
143144
onCollectionSelect: (namespace: string) => void;
144145
onRelationshipSelect: (rId: string) => void;
145146
onFieldSelect: (namespace: string, fieldPath: FieldPath) => void;
147+
onRenameField: (
148+
namespace: string,
149+
fieldPath: FieldPath,
150+
newName: string
151+
) => void;
146152
onDiagramBackgroundClicked: () => void;
147153
onDeleteCollection: (ns: string) => void;
148154
onDeleteRelationship: (rId: string) => void;
@@ -170,6 +176,7 @@ const DiagramContent: React.FunctionComponent<{
170176
onCollectionSelect,
171177
onRelationshipSelect,
172178
onFieldSelect,
179+
onRenameField,
173180
onDiagramBackgroundClicked,
174181
onCreateNewRelationship,
175182
onRelationshipDrawn,
@@ -385,6 +392,7 @@ const DiagramContent: React.FunctionComponent<{
385392
onPaneClick,
386393
onEdgeClick,
387394
onFieldClick,
395+
onFieldNameChange: onRenameField,
388396
onNodeDragStop,
389397
onConnect,
390398
} satisfies DiagramProps),
@@ -399,6 +407,7 @@ const DiagramContent: React.FunctionComponent<{
399407
onPaneClick,
400408
onEdgeClick,
401409
onFieldClick,
410+
onRenameField,
402411
onNodeDragStop,
403412
onConnect,
404413
]
@@ -461,6 +470,7 @@ const ConnectedDiagramContent = connect(
461470
onCollectionSelect: selectCollection,
462471
onRelationshipSelect: selectRelationship,
463472
onFieldSelect: selectField,
473+
onRenameField: renameField,
464474
onDiagramBackgroundClicked: selectBackground,
465475
onCreateNewRelationship: createNewRelationship,
466476
onDeleteCollection: deleteCollection,

‎packages/compass-data-modeling/src/utils/nodes-and-edges.spec.ts‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,29 @@ describe('getFieldsFromSchema', function () {
1313
expect(result).to.deep.equal([]);
1414
});
1515

16-
it('returns fields for a simple schema', function () {
16+
it('returns fields for a simple schema, with non editable _id', function () {
1717
const result = getFieldsFromSchema({
1818
jsonSchema: {
1919
bsonType: 'object',
2020
properties: {
21+
_id: { bsonType: 'objectId' },
2122
name: { bsonType: 'string' },
2223
age: { bsonType: 'int' },
2324
},
2425
},
2526
});
2627
expect(result).to.deep.equal([
28+
{
29+
name: '_id',
30+
id: ['_id'],
31+
type: 'objectId',
32+
depth: 0,
33+
glyphs: ['key'],
34+
selectable: true,
35+
selected: false,
36+
variant: undefined,
37+
editable: false,
38+
},
2739
{
2840
name: 'name',
2941
id: ['name'],
@@ -33,6 +45,7 @@ describe('getFieldsFromSchema', function () {
3345
selectable: true,
3446
selected: false,
3547
variant: undefined,
48+
editable: true,
3649
},
3750
{
3851
name: 'age',
@@ -43,6 +56,7 @@ describe('getFieldsFromSchema', function () {
4356
selectable: true,
4457
selected: false,
4558
variant: undefined,
59+
editable: true,
4660
},
4761
]);
4862
});
@@ -65,6 +79,7 @@ describe('getFieldsFromSchema', function () {
6579
selected: false,
6680
type: ['int', 'string'],
6781
variant: undefined,
82+
editable: true,
6883
});
6984
});
7085

@@ -90,6 +105,7 @@ describe('getFieldsFromSchema', function () {
90105
selectable: true,
91106
selected: false,
92107
variant: undefined,
108+
editable: true,
93109
},
94110
{
95111
name: 'age',
@@ -100,6 +116,7 @@ describe('getFieldsFromSchema', function () {
100116
selectable: true,
101117
selected: false,
102118
variant: 'preview',
119+
editable: true,
103120
},
104121
{
105122
name: 'profession',
@@ -110,6 +127,7 @@ describe('getFieldsFromSchema', function () {
110127
selectable: true,
111128
selected: false,
112129
variant: undefined,
130+
editable: true,
113131
},
114132
]);
115133
});
@@ -136,6 +154,7 @@ describe('getFieldsFromSchema', function () {
136154
selectable: true,
137155
selected: false,
138156
variant: undefined,
157+
editable: true,
139158
},
140159
{
141160
name: 'age',
@@ -146,6 +165,7 @@ describe('getFieldsFromSchema', function () {
146165
selectable: true,
147166
selected: false,
148167
variant: 'preview',
168+
editable: true,
149169
},
150170
{
151171
name: 'profession',
@@ -156,6 +176,7 @@ describe('getFieldsFromSchema', function () {
156176
selectable: true,
157177
selected: false,
158178
variant: 'preview',
179+
editable: true,
159180
},
160181
]);
161182
});
@@ -193,6 +214,7 @@ describe('getFieldsFromSchema', function () {
193214
selectable: true,
194215
selected: false,
195216
variant: undefined,
217+
editable: true,
196218
},
197219
{
198220
name: 'name',
@@ -203,6 +225,7 @@ describe('getFieldsFromSchema', function () {
203225
selectable: true,
204226
selected: false,
205227
variant: undefined,
228+
editable: true,
206229
},
207230
{
208231
name: 'address',
@@ -213,6 +236,7 @@ describe('getFieldsFromSchema', function () {
213236
selectable: true,
214237
selected: false,
215238
variant: undefined,
239+
editable: true,
216240
},
217241
{
218242
name: 'street',
@@ -223,6 +247,7 @@ describe('getFieldsFromSchema', function () {
223247
selectable: true,
224248
selected: false,
225249
variant: undefined,
250+
editable: true,
226251
},
227252
{
228253
name: 'city',
@@ -233,6 +258,7 @@ describe('getFieldsFromSchema', function () {
233258
selectable: true,
234259
selected: false,
235260
variant: undefined,
261+
editable: true,
236262
},
237263
]);
238264
});
@@ -269,6 +295,7 @@ describe('getFieldsFromSchema', function () {
269295
selectable: true,
270296
selected: false,
271297
variant: undefined,
298+
editable: true,
272299
},
273300
{
274301
name: 'name',
@@ -279,6 +306,7 @@ describe('getFieldsFromSchema', function () {
279306
selectable: true,
280307
selected: false,
281308
variant: undefined,
309+
editable: true,
282310
},
283311
{
284312
name: 'address',
@@ -289,6 +317,7 @@ describe('getFieldsFromSchema', function () {
289317
selectable: true,
290318
selected: false,
291319
variant: undefined,
320+
editable: true,
292321
},
293322
{
294323
name: 'street',
@@ -299,6 +328,7 @@ describe('getFieldsFromSchema', function () {
299328
selectable: true,
300329
selected: false,
301330
variant: 'preview',
331+
editable: true,
302332
},
303333
{
304334
name: 'city',
@@ -309,6 +339,7 @@ describe('getFieldsFromSchema', function () {
309339
selectable: true,
310340
selected: false,
311341
variant: undefined,
342+
editable: true,
312343
},
313344
]);
314345
});
@@ -355,6 +386,7 @@ describe('getFieldsFromSchema', function () {
355386
selectable: true,
356387
selected: false,
357388
variant: undefined,
389+
editable: true,
358390
},
359391
{
360392
name: 'name',
@@ -365,6 +397,7 @@ describe('getFieldsFromSchema', function () {
365397
selectable: true,
366398
selected: false,
367399
variant: undefined,
400+
editable: true,
368401
},
369402
{
370403
name: 'address',
@@ -375,6 +408,7 @@ describe('getFieldsFromSchema', function () {
375408
selectable: true,
376409
selected: false,
377410
variant: undefined,
411+
editable: true,
378412
},
379413
{
380414
name: 'street',
@@ -385,6 +419,7 @@ describe('getFieldsFromSchema', function () {
385419
selectable: true,
386420
selected: false,
387421
variant: 'preview',
422+
editable: true,
388423
},
389424
{
390425
name: 'city',
@@ -395,6 +430,7 @@ describe('getFieldsFromSchema', function () {
395430
selectable: true,
396431
selected: false,
397432
variant: undefined,
433+
editable: true,
398434
},
399435
{
400436
name: 'billingAddress',
@@ -405,6 +441,7 @@ describe('getFieldsFromSchema', function () {
405441
selectable: true,
406442
selected: false,
407443
variant: undefined,
444+
editable: true,
408445
},
409446
{
410447
name: 'street',
@@ -415,6 +452,7 @@ describe('getFieldsFromSchema', function () {
415452
selectable: true,
416453
selected: false,
417454
variant: undefined,
455+
editable: true,
418456
},
419457
{
420458
name: 'city',
@@ -425,6 +463,7 @@ describe('getFieldsFromSchema', function () {
425463
selectable: true,
426464
selected: false,
427465
variant: 'preview',
466+
editable: true,
428467
},
429468
]);
430469
});
@@ -457,6 +496,7 @@ describe('getFieldsFromSchema', function () {
457496
selectable: true,
458497
selected: false,
459498
variant: undefined,
499+
editable: true,
460500
},
461501
{
462502
name: 'title',
@@ -467,6 +507,7 @@ describe('getFieldsFromSchema', function () {
467507
selectable: true,
468508
selected: false,
469509
variant: undefined,
510+
editable: true,
470511
},
471512
{
472513
name: 'completed',
@@ -477,6 +518,7 @@ describe('getFieldsFromSchema', function () {
477518
selectable: true,
478519
selected: false,
479520
variant: undefined,
521+
editable: true,
480522
},
481523
]);
482524
});
@@ -511,6 +553,7 @@ describe('getFieldsFromSchema', function () {
511553
selectable: true,
512554
selected: false,
513555
variant: undefined,
556+
editable: true,
514557
});
515558
expect(result[1]).to.deep.equal({
516559
name: 'first',
@@ -521,6 +564,7 @@ describe('getFieldsFromSchema', function () {
521564
selectable: true,
522565
selected: false,
523566
variant: undefined,
567+
editable: true,
524568
});
525569
expect(result[2]).to.deep.equal({
526570
name: 'last',
@@ -531,6 +575,7 @@ describe('getFieldsFromSchema', function () {
531575
selectable: true,
532576
selected: false,
533577
variant: undefined,
578+
editable: true,
534579
});
535580
});
536581

@@ -567,6 +612,7 @@ describe('getFieldsFromSchema', function () {
567612
selectable: true,
568613
selected: false,
569614
variant: undefined,
615+
editable: true,
570616
},
571617
{
572618
name: 'title',
@@ -577,6 +623,7 @@ describe('getFieldsFromSchema', function () {
577623
selectable: true,
578624
selected: false,
579625
variant: undefined,
626+
editable: true,
580627
},
581628
{
582629
name: 'completed',
@@ -587,6 +634,7 @@ describe('getFieldsFromSchema', function () {
587634
selectable: true,
588635
selected: false,
589636
variant: undefined,
637+
editable: true,
590638
},
591639
]);
592640
});

‎packages/compass-data-modeling/src/utils/nodes-and-edges.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import type {
1313
Relationship,
1414
} from '../services/data-model-storage';
1515
import { traverseSchema } from './schema-traversal';
16-
import { areFieldPathsEqual } from './utils';
16+
import { areFieldPathsEqual, isIdField } from './utils';
1717

1818
const NO_HIGHLIGHTED_FIELDS = {};
1919

@@ -100,6 +100,7 @@ export const getFieldsFromSchema = ({
100100
selected:
101101
!!selectedField?.length &&
102102
areFieldPathsEqual(fieldPath, selectedField),
103+
editable: !isIdField(fieldPath),
103104
variant:
104105
highlightedFields.length &&
105106
highlightedFields.some((highlightedField) =>

0 commit comments

Comments
 (0)