diff --git a/package-lock.json b/package-lock.json index 7dfa7ec7353..187e14d7774 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9991,28 +9991,6 @@ "url": "https://opencollective.com/node-fetch" } }, - "node_modules/@mongodb-js/diagramming": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.1.tgz", - "integrity": "sha512-xUaQSyMnyNeXILT+tPl0JoC+hlh38cYltYuL6uniyg36g20cPuCXZ9geQp0sbVt5/p1BtfgdqsKMfox+oaOlIQ==", - "license": "MIT", - "dependencies": { - "@emotion/react": "^11.14.0", - "@emotion/styled": "^11.14.0", - "@leafygreen-ui/icon": "^14.3.0", - "@leafygreen-ui/inline-definition": "^9.0.5", - "@leafygreen-ui/leafygreen-provider": "^5.0.2", - "@leafygreen-ui/palette": "^5.0.0", - "@leafygreen-ui/tokens": "^3.2.1", - "@leafygreen-ui/tooltip": "^14.2.1", - "@leafygreen-ui/typography": "^22.1.0", - "@xyflow/react": "12.5.1", - "d3-path": "^3.1.0", - "elkjs": "^0.11.0", - "react": "17.0.2", - "react-dom": "17.0.2" - } - }, "node_modules/@mongodb-js/dl-center": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@mongodb-js/dl-center/-/dl-center-1.3.0.tgz", @@ -48027,7 +48005,7 @@ "@lg-chat/leafygreen-chat-provider": "^5.0.2", "@lg-chat/message": "^8.2.0", "@mongodb-js/compass-context-menu": "^0.3.1", - "@mongodb-js/diagramming": "^2.2.1", + "@mongodb-js/diagramming": "^2.2.2", "@react-aria/interactions": "^3.9.1", "@react-aria/utils": "^3.13.1", "@react-aria/visually-hidden": "^3.3.1", @@ -48065,6 +48043,85 @@ "typescript": "^5.9.3" } }, + "packages/compass-components/node_modules/@mongodb-js/diagramming": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.2.tgz", + "integrity": "sha512-GCI+L9TBC7sbuEeJaazhdz1ELcvPRi6cjuOf9Lhx/9FhyV+7IpIGCQbm4V7OflBrqBTfZD4XrwzlkuZ55hRLaA==", + "license": "MIT", + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@leafygreen-ui/icon": "^14.3.0", + "@leafygreen-ui/inline-definition": "^9.0.5", + "@leafygreen-ui/leafygreen-provider": "^5.0.2", + "@leafygreen-ui/palette": "^5.0.0", + "@leafygreen-ui/select": "^16.2.0", + "@leafygreen-ui/tokens": "^3.2.1", + "@leafygreen-ui/tooltip": "^14.2.1", + "@leafygreen-ui/typography": "^22.1.0", + "@xyflow/react": "12.5.1", + "d3-path": "^3.1.0", + "elkjs": "^0.11.0", + "react": "17.0.2", + "react-dom": "17.0.2" + } + }, + "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/select": { + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-16.3.0.tgz", + "integrity": "sha512-/UP9NO4HKyOmN8fac8DFQnW2ia/O/odp5LPxehymvRPSSgDGzTBoVK8JPocayEZHTO+kLRjmiJm6QaQ09xmhRQ==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/button": "^25.1.2", + "@leafygreen-ui/emotion": "^5.1.0", + "@leafygreen-ui/form-field": "^4.0.6", + "@leafygreen-ui/hooks": "^9.2.2", + "@leafygreen-ui/icon": "^14.6.1", + "@leafygreen-ui/input-option": "^4.1.2", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/popover": "^14.3.0", + "@leafygreen-ui/tokens": "^4.0.0", + "@leafygreen-ui/typography": "^22.2.0", + "@lg-tools/test-harnesses": "^0.3.4", + "@types/react-is": "^18.0.0", + "lodash": "^4.17.21", + "polished": "^4.1.3", + "react-is": "^18.0.1" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": ">=3.2.0" + } + }, + "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/tokens": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-4.1.0.tgz", + "integrity": "sha512-5GfNFP0iRT4O+CnqYHpvtCUiT3aStUa2EhrV3tkrTwffemHN10M4G5nc/DhLGLNp2aQDP1+ppAtjZI5zczDSiA==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.1.0", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2" + } + }, + "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/tokens": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-3.2.4.tgz", + "integrity": "sha512-Bd11x/ext/vVozd/HL+AD8LbL71Z6B6VbtQ/+qLqoX8qHMsJt7VWL0CmmGs5NVHh3v5sAlfT5DYbB9uhwVM8Qw==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^5.0.2", + "polished": "^4.2.2" + } + }, + "packages/compass-components/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" + }, "packages/compass-components/node_modules/sinon": { "version": "9.2.4", "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz", @@ -61492,7 +61549,7 @@ "@lg-chat/leafygreen-chat-provider": "^5.0.2", "@lg-chat/message": "^8.2.0", "@mongodb-js/compass-context-menu": "^0.3.1", - "@mongodb-js/diagramming": "^2.2.1", + "@mongodb-js/diagramming": "^2.2.2", "@mongodb-js/eslint-config-compass": "^1.4.12", "@mongodb-js/mocha-config-compass": "^1.7.2", "@mongodb-js/prettier-config-compass": "^1.2.9", @@ -61526,6 +61583,81 @@ "typescript": "^5.9.3" }, "dependencies": { + "@mongodb-js/diagramming": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.2.tgz", + "integrity": "sha512-GCI+L9TBC7sbuEeJaazhdz1ELcvPRi6cjuOf9Lhx/9FhyV+7IpIGCQbm4V7OflBrqBTfZD4XrwzlkuZ55hRLaA==", + "requires": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@leafygreen-ui/icon": "^14.3.0", + "@leafygreen-ui/inline-definition": "^9.0.5", + "@leafygreen-ui/leafygreen-provider": "^5.0.2", + "@leafygreen-ui/palette": "^5.0.0", + "@leafygreen-ui/select": "^16.2.0", + "@leafygreen-ui/tokens": "^3.2.1", + "@leafygreen-ui/tooltip": "^14.2.1", + "@leafygreen-ui/typography": "^22.1.0", + "@xyflow/react": "12.5.1", + "d3-path": "^3.1.0", + "elkjs": "^0.11.0", + "react": "17.0.2", + "react-dom": "17.0.2" + }, + "dependencies": { + "@leafygreen-ui/select": { + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-16.3.0.tgz", + "integrity": "sha512-/UP9NO4HKyOmN8fac8DFQnW2ia/O/odp5LPxehymvRPSSgDGzTBoVK8JPocayEZHTO+kLRjmiJm6QaQ09xmhRQ==", + "requires": { + "@leafygreen-ui/button": "^25.1.2", + "@leafygreen-ui/emotion": "^5.1.0", + "@leafygreen-ui/form-field": "^4.0.6", + "@leafygreen-ui/hooks": "^9.2.2", + "@leafygreen-ui/icon": "^14.6.1", + "@leafygreen-ui/input-option": "^4.1.2", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/popover": "^14.3.0", + "@leafygreen-ui/tokens": "^4.0.0", + "@leafygreen-ui/typography": "^22.2.0", + "@lg-tools/test-harnesses": "^0.3.4", + "@types/react-is": "^18.0.0", + "lodash": "^4.17.21", + "polished": "^4.1.3", + "react-is": "^18.0.1" + }, + "dependencies": { + "@leafygreen-ui/tokens": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-4.1.0.tgz", + "integrity": "sha512-5GfNFP0iRT4O+CnqYHpvtCUiT3aStUa2EhrV3tkrTwffemHN10M4G5nc/DhLGLNp2aQDP1+ppAtjZI5zczDSiA==", + "requires": { + "@leafygreen-ui/emotion": "^5.1.0", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2" + } + } + } + }, + "@leafygreen-ui/tokens": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-3.2.4.tgz", + "integrity": "sha512-Bd11x/ext/vVozd/HL+AD8LbL71Z6B6VbtQ/+qLqoX8qHMsJt7VWL0CmmGs5NVHh3v5sAlfT5DYbB9uhwVM8Qw==", + "requires": { + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^5.0.2", + "polished": "^4.2.2" + } + } + } + }, + "react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, "sinon": { "version": "9.2.4", "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz", @@ -65006,27 +65138,6 @@ } } }, - "@mongodb-js/diagramming": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.1.tgz", - "integrity": "sha512-xUaQSyMnyNeXILT+tPl0JoC+hlh38cYltYuL6uniyg36g20cPuCXZ9geQp0sbVt5/p1BtfgdqsKMfox+oaOlIQ==", - "requires": { - "@emotion/react": "^11.14.0", - "@emotion/styled": "^11.14.0", - "@leafygreen-ui/icon": "^14.3.0", - "@leafygreen-ui/inline-definition": "^9.0.5", - "@leafygreen-ui/leafygreen-provider": "^5.0.4", - "@leafygreen-ui/palette": "^5.0.0", - "@leafygreen-ui/tokens": "^4.0.0", - "@leafygreen-ui/tooltip": "^14.2.1", - "@leafygreen-ui/typography": "^22.2.2", - "@xyflow/react": "12.5.1", - "d3-path": "^3.1.0", - "elkjs": "^0.11.0", - "react": "^17.0.2", - "react-dom": "^17.0.2" - } - }, "@mongodb-js/dl-center": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@mongodb-js/dl-center/-/dl-center-1.3.0.tgz", diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json index 9f1d7085936..f7140299da7 100644 --- a/packages/compass-components/package.json +++ b/packages/compass-components/package.json @@ -85,7 +85,7 @@ "@lg-chat/leafygreen-chat-provider": "^5.0.2", "@lg-chat/message": "^8.2.0", "@mongodb-js/compass-context-menu": "^0.3.1", - "@mongodb-js/diagramming": "^2.2.1", + "@mongodb-js/diagramming": "^2.2.2", "@react-aria/interactions": "^3.9.1", "@react-aria/utils": "^3.13.1", "@react-aria/visually-hidden": "^3.3.1", diff --git a/packages/compass-data-modeling/src/components/diagram-editor.tsx b/packages/compass-data-modeling/src/components/diagram-editor.tsx index 0676c3e6fa2..b53e1baecfc 100644 --- a/packages/compass-data-modeling/src/components/diagram-editor.tsx +++ b/packages/compass-data-modeling/src/components/diagram-editor.tsx @@ -23,6 +23,7 @@ import { deleteRelationship, removeField, renameField, + changeFieldType, toggleCollectionExpanded, } from '../store/diagram'; import type { @@ -60,6 +61,7 @@ import { relationshipToDiagramEdge, } from '../utils/nodes-and-edges'; import toNS from 'mongodb-ns'; +import { FIELD_TYPES } from '../utils/field-types'; import { getNamespaceRelationships } from '../utils/utils'; import { usePreference } from 'compass-preferences-model/provider'; @@ -185,6 +187,12 @@ const DiagramContent: React.FunctionComponent<{ newName: string; source: 'diagram'; }) => void; + onChangeFieldType: (data: { + ns: string; + fieldPath: FieldPath; + newTypes: string[]; + source: 'diagram'; + }) => void; onDiagramBackgroundClicked: () => void; onDeleteCollection: (ns: string) => void; onDeleteRelationship: (rId: string) => void; @@ -214,6 +222,7 @@ const DiagramContent: React.FunctionComponent<{ onRelationshipSelect, onFieldSelect, onRenameField, + onChangeFieldType, onDiagramBackgroundClicked, onCreateNewRelationship, onRelationshipDrawn, @@ -414,6 +423,18 @@ const DiagramContent: React.FunctionComponent<{ [onAddFieldToObjectField] ); + const onFieldTypeChange = useCallback( + (ns: string, fieldPath: FieldPath, newTypes: string[]) => { + onChangeFieldType({ + ns, + fieldPath, + newTypes, + source: 'diagram', + }); + }, + [onChangeFieldType] + ); + const deleteItem = useCallback(() => { switch (selectedItems?.type) { case 'collection': @@ -463,11 +484,13 @@ const DiagramContent: React.FunctionComponent<{ onFieldClick, onFieldNameChange: (ns, field, newName) => onRenameField({ ns, field, newName, source: 'diagram' }), + onFieldTypeChange, onNodeDragStop, onConnect, onNodeExpandToggle: isCollapseFlagEnabled ? handleNodeExpandedToggle : undefined, + fieldTypes: FIELD_TYPES, } satisfies DiagramProps), [ isDarkMode, @@ -481,6 +504,7 @@ const DiagramContent: React.FunctionComponent<{ onEdgeClick, onFieldClick, onRenameField, + onFieldTypeChange, onNodeDragStop, onConnect, handleNodeExpandedToggle, @@ -547,6 +571,7 @@ const ConnectedDiagramContent = connect( onRelationshipSelect: selectRelationship, onFieldSelect: selectField, onRenameField: renameField, + onChangeFieldType: changeFieldType, onDiagramBackgroundClicked: selectBackground, onCreateNewRelationship: createNewRelationship, onDeleteCollection: deleteCollection, diff --git a/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx b/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx index 20e7ab54b5c..1d92b5ed25e 100644 --- a/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx +++ b/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { connect } from 'react-redux'; import type { FieldPath, @@ -9,7 +9,6 @@ import { ComboboxOption, TextInput, } from '@mongodb-js/compass-components'; -import { BSONType } from 'mongodb'; import { changeFieldType, createNewRelationship, @@ -33,6 +32,7 @@ import { isIdField, isRelationshipOfAField, } from '../../utils/utils'; +import { FIELD_TYPES } from '../../utils/field-types'; type FieldDrawerContentProps = { namespace: string; @@ -63,20 +63,16 @@ type FieldDrawerContentProps = { onChangeFieldType: ({ ns, fieldPath, - oldTypes, newTypes, source, }: { ns: string; fieldPath: FieldPath; - oldTypes: string[]; newTypes: string[]; source: 'side_panel' | 'diagram'; }) => void; }; -const BSON_TYPES = Object.keys(BSONType); - export function getIsFieldNameValid( currentFieldPath: FieldPath, existingFields: FieldPath[], @@ -135,6 +131,9 @@ const FieldDrawerContent: React.FunctionComponent = ({ string | undefined >(); const [fieldTypes, setFieldTypes] = useState(types); + useEffect(() => { + setFieldTypes(types); + }, [types]); const { value: fieldName, ...nameInputProps } = useChangeOnBlur( fieldPath[fieldPath.length - 1], @@ -171,7 +170,6 @@ const FieldDrawerContent: React.FunctionComponent = ({ onChangeFieldType({ ns: namespace, fieldPath, - oldTypes: fieldTypes, newTypes, source: 'side_panel', }); @@ -209,7 +207,7 @@ const FieldDrawerContent: React.FunctionComponent = ({ state={fieldTypeEditErrorMessage ? 'error' : undefined} errorMessage={fieldTypeEditErrorMessage} > - {BSON_TYPES.map((type) => ( + {FIELD_TYPES.map((type) => ( ))} diff --git a/packages/compass-data-modeling/src/store/diagram.ts b/packages/compass-data-modeling/src/store/diagram.ts index b1ab2003a77..e97749f406c 100644 --- a/packages/compass-data-modeling/src/store/diagram.ts +++ b/packages/compass-data-modeling/src/store/diagram.ts @@ -847,13 +847,11 @@ export function getTypeNameForTelemetry( export function changeFieldType({ ns, fieldPath, - oldTypes, newTypes, source, }: { ns: string; fieldPath: FieldPath; - oldTypes: string[]; newTypes: string[]; source: 'side_panel' | 'diagram'; }): DataModelingThunkAction { @@ -867,6 +865,7 @@ export function changeFieldType({ fieldPath: fieldPath, }); if (!field) throw new Error('Field not found in schema'); + const oldTypes = field.fieldTypes; const to = getSchemaWithNewTypes(field.jsonSchema, newTypes); track('Data Modeling Field Type Changed', { diff --git a/packages/compass-data-modeling/src/utils/field-types.ts b/packages/compass-data-modeling/src/utils/field-types.ts new file mode 100644 index 00000000000..da23ba5deca --- /dev/null +++ b/packages/compass-data-modeling/src/utils/field-types.ts @@ -0,0 +1,3 @@ +import { BSONType } from 'mongodb'; + +export const FIELD_TYPES = Object.keys(BSONType);