WIP: feat(data-modeling): allow inline field type changes COMPASS-9799

packages/compass-components/package.json

@@ -69,7 +69,7 @@
     "@leafygreen-ui/radio-group": "^12.0.2",
     "@leafygreen-ui/search-input": "^5.0.2",
     "@leafygreen-ui/segmented-control": "^10.0.2",
-    "@leafygreen-ui/select": "^14.0.2",
+    "@leafygreen-ui/select": "^16.2.0",
     "@leafygreen-ui/skeleton-loader": "^2.0.11",
     "@leafygreen-ui/split-button": "^4.1.5",
     "@leafygreen-ui/table": "^13.0.1",

packages/compass-crud/src/components/crud-toolbar.spec.tsx

@@ -482,8 +482,8 @@ describe('CrudToolbar Component', function () {
   describe('documents per page select', function () {
     it('should render a select to update documents fetched per page', function () {
       renderCrudToolbar();
-      expect(screen.getByLabelText('Update number of documents per page')).to.be
-        .visible;
+      expect(screen.getByLabelText(/Update number of documents per page/i)).to
+        .be.visible;
     });
 
     it('should call updateDocumentsPerPage when select value changes', function () {
@@ -492,7 +492,7 @@ describe('CrudToolbar Component', function () {
         updateMaxDocumentsPerPage: stub,
       });
       userEvent.click(
-        screen.getByLabelText('Update number of documents per page')
+        screen.getByLabelText(/Update number of documents per page/i)
       );
       userEvent.click(screen.getByText('75'));
       expect(stub).to.be.calledWithExactly(75);

packages/compass-crud/src/components/table-view/types-dropdown.tsx

@@ -32,9 +32,6 @@ const TypesDropdown: React.FunctionComponent<TypesDropdownProps> = ({
       onChange={handleTypeChange}
       allowDeselect={false}
       value={element.currentType}
-      readOnly={false}
-      // NOTE: Leafygreen doesn't support aria-label and only understand "aria-labelledby" and "label" instead
-      aria-labelledby=""
       aria-label="Field type"
       className={cx(selectStyles, 'table-view-cell-editor-types')}
       data-testid="table-view-types-dropdown-select"

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

@@ -23,6 +23,7 @@ import {
   deleteRelationship,
   removeField,
   renameField,
+  changeFieldType,
 } from '../store/diagram';
 import type {
   EdgeProps,
@@ -56,6 +57,7 @@ import {
   relationshipToDiagramEdge,
 } from '../utils/nodes-and-edges';
 import toNS from 'mongodb-ns';
+import { FIELD_TYPES } from '../utils/field-types';
 
 const loadingContainerStyles = css({
   width: '100%',
@@ -162,6 +164,11 @@ const DiagramContent: React.FunctionComponent<{
     fieldPath: FieldPath,
     newName: string
   ) => void;
+  onChangeFieldType: (data: {
+    ns: string;
+    fieldPath: FieldPath;
+    newTypes: string[];
+  }) => void;
   onDiagramBackgroundClicked: () => void;
   onDeleteCollection: (ns: string) => void;
   onDeleteRelationship: (rId: string) => void;
@@ -190,6 +197,7 @@ const DiagramContent: React.FunctionComponent<{
   onRelationshipSelect,
   onFieldSelect,
   onRenameField,
+  onChangeFieldType,
   onDiagramBackgroundClicked,
   onCreateNewRelationship,
   onRelationshipDrawn,
@@ -367,6 +375,17 @@ const DiagramContent: React.FunctionComponent<{
     [onAddFieldToObjectField]
   );
 
+  const onFieldTypeChange = useCallback(
+    (ns: string, fieldPath: FieldPath, newTypes: string[]) => {
+      onChangeFieldType({
+        ns,
+        fieldPath,
+        newTypes,
+      });
+    },
+    [onChangeFieldType]
+  );
+
   const deleteItem = useCallback(() => {
     switch (selectedItems?.type) {
       case 'collection':
@@ -406,8 +425,10 @@ const DiagramContent: React.FunctionComponent<{
         onEdgeClick,
         onFieldClick,
         onFieldNameChange: onRenameField,
+        onFieldTypeChange,
         onNodeDragStop,
         onConnect,
+        fieldTypes: FIELD_TYPES,
       } satisfies DiagramProps),
     [
       isDarkMode,
@@ -421,6 +442,7 @@ const DiagramContent: React.FunctionComponent<{
       onEdgeClick,
       onFieldClick,
       onRenameField,
+      onFieldTypeChange,
       onNodeDragStop,
       onConnect,
     ]
@@ -485,6 +507,7 @@ const ConnectedDiagramContent = connect(
     onRelationshipSelect: selectRelationship,
     onFieldSelect: selectField,
     onRenameField: renameField,
+    onChangeFieldType: changeFieldType,
     onDiagramBackgroundClicked: selectBackground,
     onCreateNewRelationship: createNewRelationship,
     onDeleteCollection: deleteCollection,

packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx

@@ -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;
@@ -57,18 +57,14 @@ type FieldDrawerContentProps = {
   onChangeFieldType: ({
     ns,
     fieldPath,
-    oldTypes,
     newTypes,
   }: {
     ns: string;
     fieldPath: FieldPath;
-    oldTypes: string[];
     newTypes: string[];
   }) => void;
 };
 
-const BSON_TYPES = Object.keys(BSONType);
-
 export function getIsFieldNameValid(
   currentFieldPath: FieldPath,
   existingFields: FieldPath[],
@@ -158,7 +154,6 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
     onChangeFieldType({
       ns: namespace,
       fieldPath,
-      oldTypes: fieldTypes,
       newTypes,
     });
   };
@@ -195,7 +190,7 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
             state={fieldTypeEditErrorMessage ? 'error' : undefined}
             errorMessage={fieldTypeEditErrorMessage}
           >
-            {BSON_TYPES.map((type) => (
+            {FIELD_TYPES.map((type) => (
               <ComboboxOption key={type} value={type} />
             ))}
           </Combobox>

packages/compass-data-modeling/src/store/diagram.ts

@@ -821,12 +821,10 @@ export function getTypeNameForTelemetry(
 export function changeFieldType({
   ns,
   fieldPath,
-  oldTypes,
   newTypes,
 }: {
   ns: string;
   fieldPath: FieldPath;
-  oldTypes: string[];
   newTypes: string[];
 }): DataModelingThunkAction<void, ApplyEditAction | RevertFailedEditAction> {
   return (dispatch, getState, { track }) => {
@@ -838,6 +836,7 @@ export function changeFieldType({
       jsonSchema: collectionSchema,
       fieldPath: fieldPath,
     });
+    const oldTypes = field?.fieldTypes;
     if (!field) throw new Error('Field not found in schema');
     const to = getSchemaWithNewTypes(field.jsonSchema, newTypes);
 

packages/compass-data-modeling/src/utils/field-types.ts

@@ -0,0 +1,3 @@
+import { BSONType } from 'mongodb';
+
+export const FIELD_TYPES = Object.keys(BSONType);

packages/compass-import-export/src/components/import-options.tsx

@@ -116,7 +116,6 @@ function ImportOptions({
             <Select
               className={delimiterSelectStyles}
               id="import-delimiter-select"
-              aria-labelledby="import-delimiter-label"
               aria-label="Delimiter"
               data-testid="import-delimiter-select"
               onChange={(delimiter: string) =>

packages/compass-import-export/src/components/import-preview.tsx

@@ -177,8 +177,6 @@ function SelectFieldType({
 }) {
   return (
     <Select
-      // NOTE: Leafygreen gives an error with only aria-label for select.
-      aria-labelledby={`toggle-import-field-label-${fieldPath}`}
       // leafygreen bases ids inside Select off this id which is why we have it in addition to data-testid
       id={`import-preview-field-type-select-menu-${fieldPath}`}
       data-testid={`import-preview-field-type-select-menu-${fieldPath}`}

packages/compass-settings/src/components/settings/settings-list.tsx

@@ -188,7 +188,7 @@ function DefaultSortOrderSetting<PreferenceName extends 'defaultSortOrder'>({
       <Select
         className={inputStyles}
         allowDeselect={false}
-        aria-labelledby={`${name}-label`}
+        aria-label={`${name}-label`}
         id={name}
         name={name}
         data-testid={name}

packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options-list-editor.tsx

@@ -133,7 +133,7 @@ function UrlOptionsListEditor({
             className={optionSelectStyles}
             placeholder="Select key"
             name="select-url-options-key-name"
-            aria-labelledby={
+            aria-label={
               uriOption.name ? `${uriOption.name} select` : 'new option select'
             }
             onChange={(name, event): void => {