BUG: Numbered/Lettered lists in the Order Generator screen are not displaying the correct sequence

[ttlenard]

Describe the Bug A clear and concise description of what the bug is. A Court user reported that the numbered/lettered lists in the Order Generator screen are not displaying the correct sequence. After testing, this appears to only be occurring on the Generate screen. If you click on the Preview screen, the number/letter sequence is correctly displayed.

I did not see any issues with bullets

Business Impact/Reason for Severity med

In which environment did you see this bug? Test/Prod

Who were you logged in as? Judge, but anyone that can create Orders will experience this

What were you doing when you discovered this bug? (Using the application, demoing, smoke tests, testing other functionality, etc.) This was reported to the DAWSON team by a Court user

To Reproduce Steps to reproduce the behavior:

1. Log in as a Court user that can generate an Order
2. Navigate to a Case
3. Click on the Create button, and then select Order or Notice
4. Select Order
5. On the Generate tab, add in some text, making sure that you include a numbered list that is multiple levels deep (so that there are numbers and letters).
6. Notice that the first set of number in the list display fine
7. As soon as you get to the lower-case letters (a-z) and then the i's (i. - iii.) and numbers again, you will notice that they continue instead of starting over for new numbers. See screen grab for visual
8. Next click on the Preview tab
9. Notice that the sequence is correct on the preview tab. This appears to only be an issue on the generate tab.
10. Bullets do not seem to have any issues

Expected Behavior A clear and concise description of what you expected to happen. Numbering/lettering sequence should display appropriately

Actual Behavior A clear and concise description of what actually happened. The numbering/lettering sequence does not display correctly

Screenshots If applicable, add screenshots to help explain your problem. Notice the red, yellow, and purple squares. The numbering/lettering just continues instead of starting over.

This seems to look ok on the preview screen:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Cause of Bug, If Known

Process for Logging a Bug:

• Complete the above information
• Add a severity tag (Critical, High Severity, Medium Severity or Low Severity). See below for priority definition.

Severity Definition:

• Critical Defect Blocks entire system's or module’s functionality No workarounds available Testing cannot proceed further without bug being fixed.

• High-severity Defect Affects key functionality of an application There's a workaround, but not obvious or easy App behaves in a way that is strongly different from the one stated in the requirements

• Medium-severity Defect A minor function does not behave in a way stated in the requirements. Workaround is available and easy

• Low-severity Defect Mostly related to an application’s UI Doesn't need a workaround, because it doesn't impact functionality

Definition of Ready for Bugs(Created 10-4-21)

Definition used: A failure or flaw in the system which produces an incorrect or undesired result that deviates from the expected result or behavior. (Note: Expected results are use cases that have been documented in past user stories as acceptance criteria and test cases, and do not include strange behavior unrelated to use cases.)

The following criteria must be met in order for the development team to begin work on the bug.

The bug must:

• Be focused on solving a user problem
• Contain data for all fields in the bug template, so the team can pick it up and begin working immediately

Process: If the unexpected results are new use cases that have been identified, but not yet built, new acceptance criteria and test cases should be captured in a new user story and prioritized by the product owner.

If the Court is not able to reproduce the bug, add the “Unable to reproduce” tag. This will provide visibility into the type of support that may be needed by the Court. In the event that the Court cannot reproduce the bug, the Court will work with Flexion to communicate what type of troubleshooting help may be needed.

Definition of Done (Updated 4-14-21)

Product Owner

• [ ] Bug fix has been validated in the Court's test environment

Engineering

• [ ] Automated test scripts have been written
• [ ] Field level and page level validation errors (front-end and server-side) integrated and functioning
• [ ] Verify that language for docket record for internal users and external users is identical
• [ ] New screens have been added to pa11y scripts
• [ ] All new functionality verified to work with keyboard and macOS voiceover https://www.apple.com/voiceover/info/guide/_1124.html
• [ ] READMEs, other appropriate docs and swagger/APIs fully updated
• [ ] UI should be touch optimized and responsive for external only (functions on supported mobile devices and optimized for screen sizes as required)
• [ ] Interactors should validate entities before calling persistence methods
• [ ] Code refactored for clarity and to remove any known technical debt
• [ ] Deployed to the Court's test environment if prod-like data is required. Otherwise, deployed to any experimental environment for review.

[Mwindo]

This is a bug in react-quill itself. It took me a while to figure out what is wrong, but essentially it boils down to this: https://github.com/slab/quill/issues/3309. The default CSS uses counters with names list-1, list-2, etc. However, these names conflict with CSS keywords, and thus the counters do not work as expected.

react-quill hasn't had an update in a couple of years. I suppose the most natural way to fix the bug is to copy react-quill's existing CSS and overwrite it slightly (e.g., rename list-1 to ql-list-1). I have verified this works, but I will see if I think of any better way.

[Mwindo]

Update:

I discovered another, related bug: nested lists aren't saving and reloading properly:

https://github.com/user-attachments/assets/216983c6-9ef0-426c-a656-e2c3ac919fd5

I will address this too. EDIT: I lied.

[Mwindo]

@zachrog and I have looked into this a little. As far as I can tell, here is a good summary:

• We can fix the bug as reported in this ticket, in multiple ways. The bug in this ticket has to do with improper CSS in the react-quill library.
• The save and reload bug I mention in a comment above is similar to past issues with the editor, e.g., https://github.com/flexion/ef-cms/issues/10323. Essentially, I believe all of these sorts of bugs come from the same source: Quill manages its state with its own data structure, a Quill Delta, which is independent of the HTML it can generate (HTML that we use for PDFs), but we do not persist this data structure. Unless we store/reload the Delta (rather than just the HTML in the PDF), we are always liable to run into these sorts of issues, because Quill was designed to use the Delta, not the HTML. (This is not a problem with Quill. It is something other WYSIWYG editors do, too. It just means that you need to keep track of an additional data structure.) Any fix short of keeping track of the Quill Delta or switching to an editor where HTML is the data structure will probably be, like my fix for issue 10323 referenced above, a patch.
• I suspect switching to a different editor--one which does not use a secondary data structure--might be easier than managing Quill Deltas. (It also keeps us less tightly coupled to a particular editor.) That said, if we really just want to fix this bug as is and be done with it, that can be done easily enough.

[Mwindo]

Update: Especially in light of plans to use Word in the nearish future, we have opted to fix the bug and leave the save-and-reload issues as is.