Fix #19792: raise error when tab RTE components are empty and prevent…

… saving (#20241)

* Fix: Handle empty content error in tab interaction

Prevents user from saving when a component of a tab is empty, displaying an error message

* fix: linting errors and unnecessary code removed

* fix: changes request by reviwer
dquote> change comment related to Value[0] in line 257 to be more specific
dquote> replace tab with tabIndex
dquote> make error messages more explicit for users
dquote> fix tests to accomodate changes

* fix: changes request by reviwer
dquote> change comment related to Value[0] in line 257 to be more specific
dquote> replace tab with tabIndex
dquote> make error messages more explicit for users
dquote> fix tests to accomodate changes

* fix: changes request by reviwer
 change comment related to Value[0] in line 257 to be more specific
 replace tab with tabIndex
 make error messages more explicit for users
 fix tests to accomodate changes

* fix: displayed errors messages
alter displayed messages when a tab component is not filled
change corresponding tests accordingly
fix comment typos

---------

Co-authored-by: Sean Lip <[email protected]>

core/templates/services/rte-helper-modal.controller.spec.ts

@@ -310,4 +310,70 @@ describe('RteHelperModalComponent', () => {
  flush();
  }));
  });
+
+ describe('when there are validation errors in tabs form control', function () {
+ var customizationArgSpecs = [
+ {
+ name: 'tab_contents',
+ default_value: [
+ {
+ title: 'Tab 1',
+ content: 'Content for Tab 1',
+ },
+ {
+ title: 'Tab 2',
+ content: 'Content for Tab 2',
+ },
+ ],
+ },
+ ];
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RteHelperModalComponent);
+ component = fixture.componentInstance;
+ (component.componentId = 'tabs'),
+ (component.attrsCustomizationArgsDict = {
+ tabs_contents: [
+ {
+ title: 'Tab 1',
+ content: 'Content for Tab 1',
+ },
+ {
+ title: 'Tab 2',
+ content: 'Content for Tab 2',
+ },
+ ],
+ });
+ component.customizationArgSpecs = customizationArgSpecs;
+ });
+
+ it('should disable save button and display error message', fakeAsync(() => {
+ component.ngOnInit();
+ flush();
+ component.customizationArgsForm.value[0][0].title = '';
+ component.onCustomizationArgsFormChange(
+ component.customizationArgsForm.value
+ );
+ expect(component.isErrorMessageNonempty()).toBe(true);
+ expect(component.errorMessage).toBe(
+ 'Please ensure that the title of tab 1 is filled.'
+ );
+ flush();
+ }));
+
+ it('should disable save button and display error message', fakeAsync(() => {
+ component.ngOnInit();
+ flush();
+ component.customizationArgsForm.value[0][0].title = 'Tab 1';
+ component.customizationArgsForm.value[0][1].content = '';
+ component.onCustomizationArgsFormChange(
+ component.customizationArgsForm.value
+ );
+ expect(component.isErrorMessageNonempty()).toBe(true);
+ expect(component.errorMessage).toBe(
+ 'Please ensure that the content of tab 2 is filled.'
+ );
+ flush();
+ }));
+ });
 });

core/templates/services/rte-helper-modal.controller.ts

@@ -253,6 +253,27 @@ export class RteHelperModalComponent {
  );
  return;
  }
+ } else if (this.componentId === this.COMPONENT_ID_TABS) {
+ // Value[0] corresponds to all tab contents and titles.
+ for (let tabIndex = 0; tabIndex < value[0].length; tabIndex++) {
+ if (value[0][tabIndex].title === '') {
+ this.updateRteErrorMessage(
+ 'Please ensure that the title of tab ' +
+ (tabIndex + 1) +
+ ' is filled.'
+ );
+ break;
+ } else if (value[0][tabIndex].content === '') {
+ this.updateRteErrorMessage(
+ 'Please ensure that the content of tab ' +
+ (tabIndex + 1) +
+ ' is filled.'
+ );
+ break;
+ } else {
+ this.updateRteErrorMessage('');
+ }
+ }
  } else if (this.componentId === this.COMPONENT_ID_LINK) {
  let url: string = value[0];
  let text: string = value[1];