[BUG]: TODO(sll): Prevent duplicate tags from being added. about oppia HOT 2 OPEN

Hello @FaithAbiola, our team would like to work on this issue.

Our plan is to make changes to the following 6 files:

Exploration-metadata-modal.component.ts
“core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.ts”


Settings-tab.component.ts
“core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.ts”


Both Settings-tab.component.ts and Exploration-metadata-modal.component.ts contain preexisting logic that removes duplicate tags upon saving the exploration. The updated code will:

1. Prevent the user from adding duplicates, as well as tags with numbers and special characters, entirely. When the user attempts to do so, the tag is immediately erased so the exploration does not attempt to save the exploration with invalid tags. The code does this by calling an instance to tagRegex and checking the lowercase version of the tag.
2. Triggers a boolean flag: isTagInvalid, that helps display a front-end hint to inform the user that an invalid tag was entered, and is related to the next two files.

Exploration-metadata-modal.component.html
“core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.html”


Settings-tab.component.html
“core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.html”

Both Settings-tab.component.html and Exploration-metadata-modal.component.html contain preexisting logic that prevents users from adding more than 10 tags. The updated code will:

1. Provide feedback to the user in the form of a left-aligned mat-hint, by checking tagIsInvalid. The feedback reminds the user to “Use only lowercase letters, spaces, and no duplicate tags” in red, below the text field, like a typical error message.
2. Right-aligns the mat-hint regarding 10 tags.

Exploration-metadata-modal.component.spec.ts
“core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.spec.ts”


Settings-tab.component.spec.ts
“core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.spec.ts”


Both Settings-tab.component.spec.ts and Exploration-metadata-modal.component.spec.ts contain front-end unit tests. The updated code provides:

1. A unit test that checks whether a duplicate tag has been saved
2. A unit test that checks whether a tag with special characters have been saved and a tag with numbers have been saved

Below, I’ve included pictures of the unit-tests successfully failing when commenting out the code in Exploration-metadata-modal.component.ts and Settings-tab.component.ts. The tests were completed by running the frontend tests:

python -m scripts.run_frontend_tests

Failed test in: Exploration-metadata-modal.component.spec.ts
“core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.spec.ts”

Failed test in: Settings-tab.component.spec.ts
“core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.spec.ts”

The attached video demonstrates how invalid tags are immediately removed upon entering. A hint is automatically displayed to provide feedback to the user. This hint will be removed once the user clicks away from the text field, and will reappear as soon as the user enters another invalid tag.

Note: These fixes cause the following front end tests to fail:
Failed test in: Exploration-metadata-modal.component.spec.ts
“core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.spec.ts”

Failed test in: Settings-tab.component.spec.ts
“core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.spec.ts”

The reason these tests fail is that they utilize a hyphen ("tag-one", tag-two", and "tag-three"). Since the functionality is to test multiple tags, we recommend that the tests be rewritten as ("tag one" or "tag_one" or "tagOne").
This is in line with the specifications that users should only use lowercase alphabetical characters, as well as spaces.

I request that you please assign me this issue. Thank you!

from oppia.

I am working on this, along with @sezavala and @TedmanNguyen!

from oppia.