[Feature Request]: Improve the experience of adding concept cards in the exploration editor.

[seanlip]

Is your feature request related to a problem? Please describe.

The experience of adding skill concept cards in the exploration editor has a number of issues:

• The highlighted text in the RTE does not get transferred to the concept card skill link modal when it is opened.
• Cancelling the operation results in the disappearance of the highlighted text.
• The list of skills takes a long time to load, even if it has already been fetched previously.
• Terms entered in the skill filter input box do not get applied when the skill list finally loads.
• The detailed skill explanations show up in red, which is hard to read (and suggests some kind of error).

See the video below for the current experience:

bug-report-A2-2023-06-26_16.43.07.mp4

Describe the solution you'd like

• When the skill link modal is opened, the text input field should be populated with the highlighted text in the RTE, or "concept card" if there is no highlighted text.
• When the modal is cancelled, the RTE contents should stay as they were before the modal was opened. In particular, any highlighted text should not be deleted.
• The skill filter input box should be disabled until the list of skills has loaded.
• Skill explanations should show up in black text.

Describe alternatives you've considered

• I considered also writing "the list of skills should load faster", but in reality there's always going to be some lag time. It might be possible to cache this list so that it loads fast for the second and subsequent queries, but that could lead to problems with stale data if a skill is created/deleted while an exploration is being edited. So I suggest that we don't solve that problem in this issue, and fix the other points first -- then, we can see if the loading time is still an issue.

Additional context

No response

[jnvtnguyen]

@seanlip Just to confirm a few things

1. When canceling the highlighted portion should not be a RTE component anymore and also it shouldn't be deleted?
2. When highlighting and creating a concept card, the delete button shouldn't be there and only the cancel button?

[seanlip]

1. Yes, correct.
2. Yes, I think that would be fine, since one can already just delete directly from the RTE itself. But I have less strong feelings about this as long as it's clear to the user what is going on and the behaviour for all flows is conceptually correct. (I'm a bit unsure if I've interpreted your question correctly, though, since I don't see a delete button in the modal currently?)

Thanks for checking!

[jnvtnguyen]

One more thing I believe that would improve user experience is making the skill id required because right now the user can save a concept card without a skill and when saving it will emit an error. This should be handled beforehand by disabling the submit button when not selected.

[seanlip]

@jnvtnguyen I think the skill ID is actually assigned by the system, not the user. Can you show a video demonstrating how the user is able to save a skill when the ID isn't provided, please? (Not sure if we are thinking about the same thing here.)

Thanks!

[jnvtnguyen]

@seanlip
https://github.com/oppia/oppia/assets/70992422/202a821a-4835-4fc0-984e-66221ddf625a

[seanlip]

Ah got it -- thanks @jnvtnguyen. Yes I agree, would be good to handle this.

As an FYI there is a similar issue open in #18211 for videos, and the PR #19179 has a lot of progress towards a fix (but was abandoned). Might be worth redoing those changes an incorporating a fix for this one similarly as well.

[jnvtnguyen]

@seanlip Doesn't this just have to do with the RTE validation? I thought there were built in validators you could put in customization args and this might be related to #17491

[seanlip]

@jnvtnguyen I do think it's related to RTE validation -- but depends which validation you're talking about. There's frontend validation and backend validation. I get the sense that the latter is fine but the former is not (hence #18211 and the fix in #19179).

[jnvtnguyen]

Completed via #19587 (Above are Accidental Commits)