Comments (3)
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:
- 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.
- 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:
- 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.
- 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:
- A unit test that checks whether a duplicate tag has been saved
- 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.
Demo.for.Duplicate.Tags.Issue.mp4
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.
Thanks @TedmanNguyen @cjt101, this seems pretty reasonable. Assigned y'all!
from oppia.
Related Issues (20)
- [Flake]: Error: Element .e2e-test-classroom-banner-container took too long to be clickable. HOT 1
- [Flake]: The Settings Tab Component should not toggle the preview cards HOT 1
- [Flake]: Supplemental card component should tell if help card is tall FAILED HOT 6
- [Flake]: CollectionPlayerPageRootComponent should have correct title and meta tag FAILED HOT 2
- [Flake]: Element div.navbar-mobile-options .e2e-test-mobile-save-changes took too long to be clickable. HOT 1
- [Flake]: Console error: Refused to frame 'https://www.recaptcha.net/'
- [BUG]: Chapter preview button is not displayed initially
- [BUG]: Interaction Continue Button Missing or Mismatches Highlighted Clickable Area HOT 1
- [BUG]: Create New Topics/Skills button does not show up until scroll all the way down in mobile browser HOT 5
- [BUG]: Chapter editor does not specify the number of characters required HOT 14
- [BUG]: Progress is not saved when creating a question and going to another tab HOT 8
- [BUG]: Prerequisite skill name is not displayed in the UI element HOT 1
- [BUG]: Skill does not get assigned in some cases HOT 1
- [BUG]: Not clear how to get around the error message about unsaved changes HOT 1
- [Flake]: Error: Blog post with title Test-Blog does not exist!
- [Flake]: Error: Action '<link>' download has timed out. Error: The request was canceled due to the configured HttpClient.Timeout of 100 seconds elapsing.
- [Flake]: Build Images - Error: Process completed with exit code 17.
- [Flake]: Build - Error: The process '/usr/bin/git' failed with exit code 128.
- [BUG]: Broken UI of topic editor in tablet mode HOT 6
- [Flake]: Unable to find an artifact with the name: backend_test_coverage_shard_1 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from oppia.