fix: Fixing EditableSection component (#508)

* Changed tag to div

* check on nativeEvent

* Fixed EditableText propagation

* Fix add new tag button

* Trying to fix tag delete click

* Fix Tag and owner onClick

* Fix clicks on Request Description

* Fix add new owner button

* code cleanup

* modified unit test cases

* Revert changes and moved children  components outside label tag

* Added unit test case

amundsen_application/static/js/components/common/EditableSection/index.spec.tsx

@@ -21,6 +21,20 @@ describe('EditableSection', () => {
     return { wrapper, props };
   };
 
+  describe('handleClick', () => {
+    const clickEvent = {
+      preventDefault: jest.fn(),
+    };
+
+    it('preventDefault on click', () => {
+      const { wrapper, props } = setup();
+      wrapper
+        .find('.editable-section-label-wrapper')
+        .simulate('click', clickEvent);
+      expect(clickEvent.preventDefault).toHaveBeenCalled();
+    });
+  });
+
   describe('setEditMode', () => {
     const { wrapper, props } = setup();
 

amundsen_application/static/js/components/common/EditableSection/index.tsx

@@ -50,6 +50,10 @@ export class EditableSection extends React.Component<
     this.setState({ isEditing: !this.state.isEditing });
   };
 
+  preventDefault = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
   static convertText(str: string): string {
     return str
       .split(new RegExp('[\\s+_]'))
@@ -122,14 +126,17 @@ export class EditableSection extends React.Component<
     return (
       <section className="editable-section">
         <label className="editable-section-label">
-          <div className="editable-section-label-wrapper">
+          <div
+            className="editable-section-label-wrapper"
+            onClick={this.preventDefault}
+          >
             <span className="section-title title-3">
               {EditableSection.convertText(title)}
             </span>
             {!readOnly ? this.renderButton() : this.renderReadOnlyButton()}
           </div>
-          <div className="editable-section-content">{childrenWithProps}</div>
         </label>
+        <div className="editable-section-content">{childrenWithProps}</div>
       </section>
     );
   }