chore: fix prettier new version issues

Author: gagik

AUTHORS

@@ -111,3 +111,4 @@ Jimmy Choi <[email protected]>
 Jacob Lu <[email protected]>
 Nataly Carbonell <[email protected]>
 DarshanaVenkatesh <[email protected]>
+Kevin Pamaran <[email protected]>

package-lock.json

@@ -36,6 +36,15 @@ const waitForDrawerToOpen = async () => {
   });
 };
 
+const updateInputWithBlur = (label: string, text: string) => {
+  const input = screen.getByLabelText(label);
+  userEvent.clear(input);
+  if (text.length) userEvent.type(input, text);
+
+  // Blur/unfocus the input.
+  userEvent.click(document.body);
+};
+
 async function comboboxSelectItem(
   label: string,
   value: string,
@@ -136,8 +145,8 @@ describe('DiagramEditorSidePanel', function () {
     ).to.be.visible;
   });
 
-  describe('Field context drawer', function () {
-    it('should render a field context drawer when field is clicked', async function () {
+  describe('When a field is selected', function () {
+    it('should render a field context drawer', async function () {
       const result = renderDrawer();
       result.plugin.store.dispatch(selectField('flights.airlines', ['alias']));
 
@@ -154,7 +163,7 @@ describe('DiagramEditorSidePanel', function () {
       expect(selectedTypes).to.include('int');
     });
 
-    it('should render a nested field context drawer when field is clicked', async function () {
+    it('should render a nested field context drawer', async function () {
       const result = renderDrawer();
       result.plugin.store.dispatch(
         selectField('flights.routes', ['airline', 'id'])
@@ -171,6 +180,87 @@ describe('DiagramEditorSidePanel', function () {
       expect(selectedTypes).to.have.lengthOf(1);
       expect(selectedTypes).to.include('string');
     });
+
+    it('should delete a field', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(
+        selectField('flights.routes', ['airline', 'id'])
+      );
+
+      await waitForDrawerToOpen();
+      expect(screen.getByTitle('routes.airline.id')).to.be.visible;
+
+      userEvent.click(screen.getByLabelText(/delete field/i));
+
+      await waitFor(() => {
+        expect(screen.queryByText('routes.airline.id')).not.to.exist;
+      });
+      expect(screen.queryByLabelText('Name')).to.not.exist;
+
+      const modifiedCollection = selectCurrentModelFromState(
+        result.plugin.store.getState()
+      ).collections.find((coll) => {
+        return coll.ns === 'flights.routes';
+      });
+
+      expect(
+        modifiedCollection?.jsonSchema.properties?.airline.properties
+      ).to.not.have.property('id'); // deleted field
+      expect(
+        modifiedCollection?.jsonSchema.properties?.airline.properties
+      ).to.have.property('name'); // sibling field remains
+    });
+
+    it('should rename a field and keep it selected', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(
+        selectField('flights.routes', ['airline', 'name'])
+      );
+
+      await waitForDrawerToOpen();
+      expect(screen.getByTitle('routes.airline.name')).to.be.visible;
+
+      updateInputWithBlur('Field name', 'new_name');
+
+      await waitFor(() => {
+        expect(screen.queryByText('routes.airline.name')).not.to.exist;
+        expect(screen.queryByText('routes.airline.new_name')).to.exist;
+      });
+    });
+
+    it('should not rename a field to an empty string', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(
+        selectField('flights.routes', ['airline', 'name'])
+      );
+
+      await waitForDrawerToOpen();
+      expect(screen.getByTitle('routes.airline.name')).to.be.visible;
+
+      updateInputWithBlur('Field name', '');
+
+      await waitFor(() => {
+        expect(screen.queryByText('Field name cannot be empty.')).to.exist;
+        expect(screen.queryByText('routes.airline.name')).to.exist;
+      });
+    });
+
+    it('should not rename a field to a duplicate', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(
+        selectField('flights.routes', ['airline', 'name'])
+      );
+
+      await waitForDrawerToOpen();
+      expect(screen.getByTitle('routes.airline.name')).to.be.visible;
+
+      updateInputWithBlur('Field name', 'id');
+
+      await waitFor(() => {
+        expect(screen.queryByText('Field already exists.')).to.exist;
+        expect(screen.queryByText('routes.airline.name')).to.exist;
+      });
+    });
   });
 
   it('should change the content of the drawer when selecting different items', async function () {
@@ -456,11 +546,7 @@ describe('DiagramEditorSidePanel', function () {
       expect(screen.getByLabelText('Name')).to.have.value('countries');
 
       // Update the name.
-      userEvent.clear(screen.getByLabelText('Name'));
-      userEvent.type(screen.getByLabelText('Name'), 'pineapple');
-
-      // Blur/unfocus the input.
-      userEvent.click(document.body);
+      updateInputWithBlur('Name', 'pineapple');
 
       // Check the name in the model.
       const modifiedCollection = selectCurrentModelFromState(
@@ -486,11 +572,7 @@ describe('DiagramEditorSidePanel', function () {
       expect(activeElement).to.equal(nameInput);
 
       // Update the name.
-      userEvent.clear(nameInput);
-      userEvent.type(nameInput, 'pineapple');
-
-      // Blur/unfocus the input - now the collection should be names
-      userEvent.click(document.body);
+      updateInputWithBlur('Name', 'pineapple');
 
       // Check the name in the model.
       const newCollection = selectCurrentModelFromState(
@@ -516,7 +598,7 @@ describe('DiagramEditorSidePanel', function () {
         'false'
       );
 
-      userEvent.clear(screen.getByLabelText('Name'));
+      updateInputWithBlur('Name', '');
 
       await waitFor(() => {
         expect(screen.getByLabelText('Name')).to.have.attribute(
@@ -525,9 +607,6 @@ describe('DiagramEditorSidePanel', function () {
         );
       });
 
-      // Blur/unfocus the input.
-      userEvent.click(document.body);
-
       const notModifiedCollection = selectCurrentModelFromState(
         result.plugin.store.getState()
       ).collections.find((c: DataModelCollection) => {
@@ -549,8 +628,7 @@ describe('DiagramEditorSidePanel', function () {
         'false'
       );
 
-      userEvent.clear(screen.getByLabelText('Name'));
-      userEvent.type(screen.getByLabelText('Name'), 'airlines');
+      updateInputWithBlur('Name', 'airlines');
 
       await waitFor(() => {
         expect(screen.getByLabelText('Name')).to.have.attribute(
@@ -559,9 +637,6 @@ describe('DiagramEditorSidePanel', function () {
         );
       });
 
-      // Blur/unfocus the input.
-      userEvent.click(document.body);
-
       const notModifiedCollection = selectCurrentModelFromState(
         result.plugin.store.getState()
       ).collections.find((c: DataModelCollection) => {

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

@@ -12,13 +12,15 @@ import RelationshipDrawerContent from './relationship-drawer-content';
 import {
   deleteCollection,
   deleteRelationship,
+  removeField,
   selectCurrentModelFromState,
   type SelectedItems,
 } from '../../store/diagram';
 import { getDefaultRelationshipName } from '../../utils';
 import FieldDrawerContent from './field-drawer-content';
 import type { FieldPath } from '../../services/data-model-storage';
 import { getFieldFromSchema } from '../../utils/schema-traversal';
+import { isIdField } from '../../utils/utils';
 
 export const DATA_MODELING_DRAWER_ID = 'data-modeling-drawer';
 
@@ -109,7 +111,15 @@ function DiagramEditorSidePanel({
           ></FieldDrawerContent>
         ),
         actions: [
-          { action: 'delete', label: 'Delete', icon: 'Trash' as const },
+          ...(!isIdField(selectedItems.fieldPath)
+            ? [
+                {
+                  action: 'delete',
+                  label: 'Delete Field',
+                  icon: 'Trash' as const,
+                },
+              ]
+            : []),
         ],
         handleAction: (actionName: string) => {
           if (actionName === 'delete') {
@@ -241,6 +251,6 @@ export default connect(
   {
     onDeleteCollection: deleteCollection,
     onDeleteRelationship: deleteRelationship,
-    onDeleteField: () => {}, // TODO(COMPASS-9659) part 2 - implement onDeleteField,
+    onDeleteField: removeField,
   }
 )(DiagramEditorSidePanel);