BAH-4730 | Introduce form control APIs to manage notes for observation

src/components/Comment.jsx

@@ -10,11 +10,20 @@ export class Comment extends Component {
     super(props);
     const hasNote = !!(props.comment && props.comment.length > 0);
     this.state = {
-      showCommentSection: hasNote,
+      showCommentSection: props.forceOpen || hasNote,
       hasNote,
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (!prevProps.forceOpen && this.props.forceOpen) {
+      this.setState({ showCommentSection: true });
+    }
+    if (prevProps.comment && !this.props.comment) {
+      this.setState({ hasNote: false });
+    }
+  }
+
   handleChange(e) {
     const value = e.target.value.trim() !== '' ? e.target.value.trim() : undefined;
     this.setState({
@@ -79,6 +88,7 @@ Comment.propTypes = {
   conceptHandler: PropTypes.string,
   conceptUuid: PropTypes.string,
   datatype: PropTypes.string,
+  forceOpen: PropTypes.bool,
   onCommentChange: PropTypes.func.isRequired,
   value: PropTypes.string,
 };

src/components/ObsControl.jsx

@@ -93,7 +93,6 @@ export class ObsControl extends addMoreDecorator(Component) {
       conceptClass,
       conceptHandler,
       intl,
-      componentStore: this.props.componentStore || ComponentStore,
     });
   }
 
@@ -171,7 +170,8 @@ export class ObsControl extends addMoreDecorator(Component) {
       return (
         <Comment
           comment={comment} conceptHandler={concept.conceptHandler}
-          datatype={concept.datatype} onCommentChange={this.onCommentChange}
+          datatype={concept.datatype} forceOpen={!!properties.notesOpen}
+          onCommentChange={this.onCommentChange}
           value={value}
         />
       );
@@ -187,7 +187,7 @@ export class ObsControl extends addMoreDecorator(Component) {
     const { metadata: { properties }, value } = this.props;
     const isAbnormal = find(properties, (val, key) => (key === 'abnormal' && val));
     const isAbnormalObs = (value.interpretation === 'ABNORMAL');
-    const abnormalClassName = classNames({ 'fas fa-check': isAbnormalObs });
+    const abnormalClassName = classNames({ 'fa fa-ok': isAbnormalObs });
     if (isAbnormal) {
       return (
         <button className="abnormal-button" disabled={!value.value} onClick={this.setAbnormal} >
@@ -223,8 +223,7 @@ export class ObsControl extends addMoreDecorator(Component) {
 
   render() {
     const { concept } = this.props.metadata;
-    const store = this.props.componentStore || ComponentStore;
-    const registeredComponent = store.getRegisteredComponent(concept.datatype);
+    const registeredComponent = ComponentStore.getRegisteredComponent(concept.datatype);
     const complexClass = Util.isComplexMediaConcept(concept) ? 'complex-component' : '';
     const addMoreComplexClass = complexClass && this.isCreateByAddMore() ?
         'add-more-complex-component' : '';

src/components/bahmni-design-system/Comment.jsx

@@ -10,7 +10,7 @@ export class Comment extends Component {
     super(props);
     const hasNote = !!(props.comment && props.comment.length > 0);
     this.state = {
-      showCommentSection: hasNote,
+      showCommentSection: props.forceOpen || hasNote,
       hasNote,
       comment: props.comment || '',
     };
@@ -26,6 +26,9 @@ export class Comment extends Component {
         ...(hasNote && !this.state.showCommentSection ? { showCommentSection: true } : {}),
       });
     }
+    if (!prevProps.forceOpen && this.props.forceOpen) {
+      this.setState({ showCommentSection: true });
+    }
   }
 
   handleChange(e) {
@@ -95,6 +98,7 @@ Comment.propTypes = {
   conceptHandler: PropTypes.string,
   conceptUuid: PropTypes.string,
   datatype: PropTypes.string,
+  forceOpen: PropTypes.bool,
   onCommentChange: PropTypes.func.isRequired,
   value: PropTypes.string,
 };

src/components/bahmni-design-system/ObsControl.jsx

@@ -172,7 +172,8 @@ export class ObsControl extends addMoreDecorator(Component) {
       return (
         <Comment
           comment={comment} conceptHandler={concept.conceptHandler}
-          datatype={concept.datatype} onCommentChange={this.onCommentChange}
+          datatype={concept.datatype} forceOpen={!!properties.notesOpen}
+          onCommentChange={this.onCommentChange}
           value={value}
         />
       );

src/helpers/ControlRecordWrapper.js

@@ -105,4 +105,61 @@ export default class ControlRecordWrapper {
     }
     return updatedRecord;
   }
+
+  isNotesEnabled() {
+    if (this.currentRecord && this.currentRecord.control && this.currentRecord.control.properties) {
+      return this.currentRecord.control.properties.notes;
+    }
+    return false;
+  }
+
+  getNotes() {
+    if (this.currentRecord.control.type !== 'obsControl') {
+      return null;
+    }
+    if (this.currentRecord && this.currentRecord.value && this.currentRecord.value.comment) {
+      return this.currentRecord.value.comment;
+    }
+    return null;
+  }
+
+  showNotes(show = true) {
+    const brotherTrees = ControlRecordTreeMgr.getBrothers(this.rootRecord, this.currentRecord);
+    brotherTrees.forEach(r => {
+      if (r.control.type !== 'obsControl' || r.control.properties === undefined) {
+        return;
+      }
+      if (Object.hasOwn(r.control.properties, 'notes')) {
+        var control = Object.assign({}, r.control);
+        control.properties.notes = show;
+        const updatedRecord = r.set('control', control);
+        this.update(updatedRecord);
+      }
+    });
+  }
+
+  openNotes() {
+    const brotherTrees = ControlRecordTreeMgr.getBrothers(this.rootRecord, this.currentRecord);
+    brotherTrees.forEach(r => {
+      if (r.control.type !== 'obsControl' || r.control.properties === undefined) {
+        return;
+      }
+      var control = Object.assign({}, r.control);
+      control.properties.notesOpen = true;
+      const updatedRecord = r.set('control', control);
+      this.update(updatedRecord);
+    });
+  }
+
+  clearNotes() {
+    const brotherTrees = ControlRecordTreeMgr.getBrothers(this.rootRecord, this.currentRecord);
+    brotherTrees.forEach(r => {
+      if (r.control.type !== 'obsControl') {
+        return;
+      }
+      const updatedRecord = r.set('value', Object.assign({}, r.value, { comment: undefined }));
+      this.update(updatedRecord);
+    });
+  }
+
 }

src/helpers/controlsParser.js

@@ -35,8 +35,8 @@ export function getControls(controls, records, props) {
         ...props,
         enabled: record.enabled && props.enabled,
         hidden: record.hidden,
-        key: control.id,
-        metadata: control,
+        key: record.control.id,
+        metadata: record.control,
         value: record.value,
         formFieldPath: record.formFieldPath,
         showAddMore: record.showAddMore,

test/components/Comment.test.js

@@ -70,8 +70,9 @@ describe('Comment', () => {
   it('should render comment section with default value', () => {
     render(<Comment comment="Some Comment" onCommentChange={mockOnCommentChange} />);
 
-    // Textarea is auto-expanded when an existing comment is provided — no click needed.
-    expect(screen.getByRole('textbox')).toHaveValue('Some Comment');
+    const textarea = screen.getByRole('textbox');
+
+    expect(textarea).toHaveValue('Some Comment');
   });
 
   it('should not render comment button when the control is of complex media type', () => {
@@ -131,4 +132,44 @@ describe('Comment', () => {
 
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
   });
+
+  describe('forceOpen', () => {
+    it('should render comment section open when forceOpen is true on initial render', () => {
+      render(<Comment forceOpen onCommentChange={mockOnCommentChange} />);
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('should open comment section when forceOpen prop transitions from false to true', () => {
+      const { rerender } = render(<Comment forceOpen={false} onCommentChange={mockOnCommentChange} />);
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+
+      rerender(<Comment forceOpen onCommentChange={mockOnCommentChange} />);
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('should not close comment section when forceOpen transitions from true to false', () => {
+      const { rerender } = render(<Comment forceOpen onCommentChange={mockOnCommentChange} />);
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+
+      rerender(<Comment forceOpen={false} onCommentChange={mockOnCommentChange} />);
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+  });
+
+  describe('clearNotes', () => {
+    it('should remove has-notes class from button when comment prop is cleared', () => {
+      const { rerender } = render(
+        <Comment comment="existing note" onCommentChange={mockOnCommentChange} />
+      );
+      fireEvent.click(screen.getByRole('button'));
+      expect(screen.getByRole('button')).toHaveClass('has-notes');
+
+      rerender(<Comment comment={undefined} onCommentChange={mockOnCommentChange} />);
+
+      expect(screen.getByRole('button')).not.toHaveClass('has-notes');
+    });
+  });
 });

test/components/bahmni-design-system/Comment.test.js

@@ -86,6 +86,21 @@ describe('Carbon Comment', () => {
     expect(link).toHaveAttribute('aria-expanded', 'false');
   });
 
+  it('should auto-open textarea when forceOpen is true on initial render', () => {
+    render(<Comment forceOpen onCommentChange={mockOnCommentChange} />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should auto-open textarea when forceOpen transitions from false to true', () => {
+    const { rerender } = render(
+      <Comment forceOpen={false} onCommentChange={mockOnCommentChange} />
+    );
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+
+    rerender(<Comment forceOpen onCommentChange={mockOnCommentChange} />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
   it('should auto-expand comment section when comment prop arrives after initial render', () => {
     const { rerender } = render(<Comment onCommentChange={mockOnCommentChange} />);
 

test/components/bahmni-design-system/ObsControl.test.js

@@ -181,4 +181,32 @@ describe('Carbon ObsControl', () => {
       expect(mockOnValueChanged).not.toHaveBeenCalled();
     });
   });
+
+  describe('Notes (showComment)', () => {
+    it('should not render the notes section when notes property is not set', () => {
+      renderWithIntl(<ObsControlWithIntl {...defaultProps} />);
+      expect(screen.queryByRole('button', { name: /add note/i })).not.toBeInTheDocument();
+    });
+
+    it('should render the add note link when notes property is enabled', () => {
+      const notesMetadata = { ...defaultMetadata, properties: { notes: true } };
+      renderWithIntl(
+        <ObsControlWithIntl {...defaultProps} metadata={notesMetadata} />
+      );
+      expect(screen.getByRole('button', { name: /add note/i })).toBeInTheDocument();
+      expect(screen.queryByPlaceholderText('Notes')).not.toBeInTheDocument();
+    });
+
+    it('should auto-open textarea when notesOpen is true', () => {
+      const notesOpenMetadata = {
+        ...defaultMetadata,
+        properties: { notes: true, notesOpen: true },
+      };
+      renderWithIntl(
+        <ObsControlWithIntl {...defaultProps} metadata={notesOpenMetadata} />
+      );
+      expect(screen.getByRole('button', { name: /add note/i })).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Notes')).toBeInTheDocument();
+    });
+  });
 });