feat(data-modeling): add add field button to object in diagram COMPASS-9742

Author: Anemy

packages/compass-components/src/index.ts

@@ -92,7 +92,11 @@ export { VisuallyHidden } from '@react-aria/visually-hidden';
 
 export { openToast, closeToast, ToastArea } from './hooks/use-toast';
 
-export { breakpoints, spacing } from '@leafygreen-ui/tokens';
+export {
+  breakpoints,
+  spacing,
+  transitionDuration,
+} from '@leafygreen-ui/tokens';
 import IndexIcon from './components/index-icon';
 
 export { default as FormFieldContainer } from './components/form-field-container';

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

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
 import {
   addNewFieldToCollection,
+  onAddNestedField,
   moveCollection,
   selectCollection,
   selectRelationship,
@@ -113,6 +114,7 @@ const DiagramContent: React.FunctionComponent<{
   editErrors?: string[];
   newCollection?: string;
   onAddNewFieldToCollection: (ns: string) => void;
+  onAddNestedField: (ns: string, parentFieldPath: string[]) => void;
   onMoveCollection: (ns: string, newPosition: [number, number]) => void;
   onCollectionSelect: (namespace: string) => void;
   onRelationshipSelect: (rId: string) => void;
@@ -133,6 +135,7 @@ const DiagramContent: React.FunctionComponent<{
   isInRelationshipDrawingMode,
   newCollection,
   onAddNewFieldToCollection,
+  onAddNestedField,
   onMoveCollection,
   onCollectionSelect,
   onRelationshipSelect,
@@ -183,6 +186,8 @@ const DiagramContent: React.FunctionComponent<{
             : undefined,
         onClickAddNewFieldToCollection: () =>
           onAddNewFieldToCollection(coll.ns),
+        onClickAddNestedField: (parentFieldPath: string[]) =>
+          onAddNestedField(coll.ns, parentFieldPath),
         selected,
         isInRelationshipDrawingMode,
       });
@@ -193,6 +198,7 @@ const DiagramContent: React.FunctionComponent<{
     model?.relationships,
     selectedItems,
     isInRelationshipDrawingMode,
+    onAddNestedField,
   ]);
 
   // Fit to view on initial mount
@@ -309,6 +315,7 @@ const ConnectedDiagramContent = connect(
   },
   {
     onAddNewFieldToCollection: addNewFieldToCollection,
+    onAddNestedField: onAddNestedField,
     onMoveCollection: moveCollection,
     onCollectionSelect: selectCollection,
     onRelationshipSelect: selectRelationship,

packages/compass-data-modeling/src/components/diagram/object-field-type.tsx

@@ -0,0 +1,123 @@
+import React, { useCallback } from 'react';
+import {
+  css,
+  cx,
+  focusRing,
+  palette,
+  spacing,
+  transitionDuration,
+  transparentize,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+
+import PlusWithSquare from '../icons/plus-with-square';
+
+const objectTypeContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+});
+
+const iconButtonHoverStyles = css({
+  color: palette.gray.dark1,
+
+  '&::before': {
+    content: '""',
+    transition: `${transitionDuration.default}ms all ease-in-out`,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: '100%',
+    transform: 'scale(0.8)',
+  },
+
+  [`&:active:before,
+  &:hover:before,
+  &:focus:before,
+  &[data-hover='true']:before,
+  &[data-focus='true']:before`]: {
+    transform: 'scale(1)',
+  },
+
+  [`&:active,
+    &:hover,
+    &[data-hover='true'],
+    &:focus-visible,
+    &[data-focus='true']`]: {
+    color: palette.black,
+
+    '&::before': {
+      backgroundColor: transparentize(0.9, palette.gray.dark2),
+    },
+  },
+});
+
+const iconButtonHoverDarkModeStyles = css({
+  color: palette.gray.light1,
+
+  [`&:active,
+    &:hover,
+    &[data-hover='true'],
+    &:focus-visible,
+    &[data-focus='true']`]: {
+    color: palette.gray.light3,
+
+    '&::before': {
+      backgroundColor: transparentize(0.9, palette.gray.light2),
+    },
+  },
+});
+
+const addNestedFieldStyles = css(iconButtonHoverStyles, focusRing, {
+  background: 'none',
+  border: 'none',
+  padding: spacing[100],
+  margin: 0,
+  marginLeft: spacing[100],
+  cursor: 'pointer',
+  color: 'inherit',
+  display: 'flex',
+});
+
+type ObjectFieldTypeProps = {
+  onClickAddNestedField: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  ['data-testid']: string;
+};
+
+const ObjectFieldType: React.FunctionComponent<ObjectFieldTypeProps> = ({
+  'data-testid': dataTestId,
+  onClickAddNestedField: _onClickAddNestedField,
+}) => {
+  const darkMode = useDarkMode();
+
+  const onClickAddNestedField = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      // Don't click on the field element.
+      event.stopPropagation();
+      _onClickAddNestedField(event);
+    },
+    [_onClickAddNestedField]
+  );
+
+  return (
+    <div className={objectTypeContainerStyles}>
+      {'{}'}
+      <button
+        className={cx(
+          addNestedFieldStyles,
+          darkMode && iconButtonHoverDarkModeStyles
+        )}
+        data-testid={dataTestId}
+        onClick={onClickAddNestedField}
+        aria-label="Add new field"
+        title="Add Field"
+      >
+        <PlusWithSquare />
+      </button>
+    </div>
+  );
+};
+
+export { ObjectFieldType };

packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.spec.tsx

@@ -171,7 +171,7 @@ describe('DiagramEditorSidePanel', function () {
       expect(nameInput).to.be.visible;
       expect(nameInput).to.have.value('alias');
 
-      const selectedTypes = getMultiComboboxValues('lg-combobox-datatype');
+      const selectedTypes = getMultiComboboxValues('field-type-combobox');
       expect(selectedTypes).to.have.lengthOf(2);
       expect(selectedTypes).to.include('string');
       expect(selectedTypes).to.include('int');
@@ -190,7 +190,7 @@ describe('DiagramEditorSidePanel', function () {
       expect(nameInput).to.be.visible;
       expect(nameInput).to.have.value('_id');
 
-      const selectedTypes = getMultiComboboxValues('lg-combobox-datatype');
+      const selectedTypes = getMultiComboboxValues('field-type-combobox');
       expect(selectedTypes).to.have.lengthOf(1);
       expect(selectedTypes).to.include('string');
     });
@@ -286,9 +286,7 @@ describe('DiagramEditorSidePanel', function () {
       expect(screen.getByTitle('routes.airline.name')).to.be.visible;
 
       // before - string
-      const selectedTypesBefore = getMultiComboboxValues(
-        'lg-combobox-datatype'
-      );
+      const selectedTypesBefore = getMultiComboboxValues('field-type-combobox');
       expect(selectedTypesBefore).to.have.members(['string']);
 
       // add int and bool and remove string
@@ -317,9 +315,7 @@ describe('DiagramEditorSidePanel', function () {
       expect(screen.getByTitle('routes.airline.name')).to.be.visible;
 
       // before - string
-      const selectedTypesBefore = getMultiComboboxValues(
-        'lg-combobox-datatype'
-      );
+      const selectedTypesBefore = getMultiComboboxValues('field-type-combobox');
       expect(selectedTypesBefore).to.have.members(['string']);
 
       // remove string without adding anything else

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

@@ -172,7 +172,7 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
 
         <DMFormFieldContainer>
           <Combobox
-            data-testid="lg-combobox-datatype"
+            data-testid="field-type-combobox"
             label="Datatype"
             aria-label="Datatype"
             disabled={isReadOnly}

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

@@ -525,6 +525,38 @@ export function addNewFieldToCollection(
   };
 }
 
+export function onAddNestedField(
+  ns: string,
+  parentFieldPath: string[]
+): DataModelingThunkAction<void, ApplyEditAction | ApplyEditFailedAction> {
+  return (dispatch, getState) => {
+    const modelState = selectCurrentModelFromState(getState());
+
+    const collection = modelState.collections.find((c) => c.ns === ns);
+    if (!collection) {
+      throw new Error('Collection to add field to not found');
+    }
+
+    const edit: Omit<
+      Extract<Edit, { type: 'AddField' }>,
+      'id' | 'timestamp'
+    > = {
+      type: 'AddField',
+      ns,
+      // Use the first unique field name we can use.
+      field: [
+        ...parentFieldPath,
+        getNewUnusedFieldName(collection.jsonSchema, parentFieldPath),
+      ],
+      jsonSchema: {
+        bsonType: 'string',
+      },
+    };
+
+    return dispatch(applyEdit(edit));
+  };
+}
+
 export function moveCollection(
   ns: string,
   newPosition: [number, number]