Create FAQ Admin features

[nicholaspung]

Dependency:

• Design Customer facing FAQ view screen #42 - we have enough feedback from this issue to remove it as a dependency. The only remaining item is the view all answers button. Which should not hold the admin interface issue up.

Overview:

We need an admin interface for the FAQ, so that LADOT/LACP and HfLA can add Q&As for how to use the calculator or where to find official TDM info.

Requirements

• Display current FAQs with edit/delete functionality
• Have a create FAQ functionality
• Should fit with the design system

[entrotech]

The middle-tier and back-end stored procedures for this are working, and there is a route for this page at /faqs, but the UI is not presentable at this time, so we are not showing links in the UI to get to the page.

[ExperimentsInHonesty]

This is a current functionality: https://tdm-calc-staging.herokuapp.com/faqs. What additional features do you want?

Issue #42 is setup to ask stakeholder.

[dazainus]

@JRAlexander72 - can design the visuals for the FAQ pages.

Overview

The link Bonnie shared (http://tdm-calc-staging.herokuapp.com/faqs) is the FAQ page that engineers created back-end. It is an admin page where FAQ questions can be added, updated, and deleted. This information needs to be shown in our website as a FAQ page (not built yet).

We don’t want to necessarily come up with the questionnaires and answers since LADOT is most likely to be deliver them. But, you may take some of the questions from the website as placeholders for now.

Action Items

• Design wireframe & high-fi mockup for FAQ page so our front-end engineers can start building it.
• Design wireframe & high-fi mockup for the FAQ admin page, making it more legible & systematic.

Resources

@JRAlexander72 - Please share the link to Figma file for the front-end developers.

[dreams0ng]

CHANGES
*I changed all the colors to properly match style

1. Showed how a longer FAQ title would look
2. Visualized how title would be updated in "Update" feature
3. Visualized delete modal box for "Delete" button once clicked
4. Visualize login options for Admin page. I also created a basic Admin Login page as reference, but don't expect to add it to the site map.

MOCKUPS
1

2

3

4a

4b

LINKS
https://www.figma.com/file/6h72XLxK76m4INtsSu8Mt0/TDM-Calculator-Copy?node-id=0%3A1

[dreams0ng]

CHANGES
+Corrected delete modal on FAQ admin page
+fixed font family / sizes

MOCKUPS

LINKS
https://xd.adobe.com/view/f32a7d21-a346-43a1-6e66-809bd1399976-851b/

[dreams0ng]

CHANGES
+replaced design for customer facing faq page
+integrated pre-existing delete icon

MOCKUPS

LINKS
https://xd.adobe.com/view/f32a7d21-a346-43a1-6e66-809bd1399976-851b/screen/bf828b78-d913-4a2e-9c6e-3146349d4645

[dreams0ng]

CHANGES
+decreased line width between sections

MOCKUPS

LINKS
https://xd.adobe.com/view/f32a7d21-a346-43a1-6e66-809bd1399976-851b/?fullscreen&hints=off

[KPHowley]

Design for this and back end has been created, but this did not fit in with LADOT's desire to link to FAQ's on their website.

This functionality may be useful for a further revision.

[jamiedesignedit]

Admin-facing FAQ page built off of Renee's design for the user-facing FAQ page w/ categories.

Updates:

• Keeping grippy dots because feedback was that they wanted to be able to move questions around quickly
• Made grippy dots darker grey because of accessibility, lighter grey wasn't contrasted enough on white background
• Added "edit section" and "save edits" button at top left that brings you in and out of edit mode
• Made the "answer" body text smaller, 18px (standard desktop body font size is 16-18px and I think it should be smaller than the headings)
• Hover feature to only make edit and trash icons appear when user hovers over a section to reduce visual clutter
• Slightly changed the "add question" button so it looks differentiated from the "save edits" button

Figma link showing full flow: https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=7195%3A26328

[entrotech]

@Reneedesigns @jahpe777 @jarmitageux We can probably implement the flow that @jamiedesignedit proposes. Some questions:

1. Would it be awkward and confusing for users that they sort of have to switch the whole form into edit mode and then choose to edit a question/answer in order to change anything, and even more unintuitive that they have to click the "Done" link AND the Save Edits button to get anything to be saved permanently? If I were a user, I would expect that clicking on Done would save my changes. I'm guessing that clicking on the Done link just collapses the Question without saving anything, so it does the same thing as clicking on the minus sign. If so, we may not need the Done link, and users might be somewhat more aware that they need to press the Save Edits button to save their changes.
2. If you want to change the name or delete a category, would you also have the floating toolbar on the category row to allow you to do so?
3. Would the Add Question link also allow you to add a new category? if so, the enbedded new Question/Category "form" would need a control that allows you to specify if you want to add a new Question or Category, and then show question and answer entry fields if you are entering a question, or just a name field if you are entering a category.
4. If a new question or category is added, where does it show up in the list? Is it at the top, so you would need to add it and click the "Done" link, then drag it to the place you want it in the sort order?
5. If you choose to delete a category, what happens to the questions in that category? Are they deleted, or maybe "float" up to the next category above the deleted category, and if so, what happens if you delete the first category?
6. In the last wireframe where you show a question being edited, it might be good to have Q and A labels on the text boxes for clarity.
7. Dashed lines as borders around each question are sort of odd and don't match with any other places in the application where we have lists. What is the thinking about the borders? The (user-facing) FAQ page looks like this now, with simple horizontal lines between questions. Maybe the dashed lines are supposed to emphasize that you are in edit mode?

[jamiedesignedit]

Hi all, posting admin-facing FAQ page with updates per out 11/9 meeting discussion. Please let me know if this is comprehensive enough and if updates are what we wanted:

Updates:

• Move "add question" option to be within each category at the bottom
• Create "add category" CTA at top left to add a new category
• Clarify how text can be edited by double clicking into it
• Clarify how questions and categories can be re-ordered by dragging grippy dots
• Made grip dots different, horizontal, for better stacking and less cluttered look

Figma link to see all screens: https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=7262%3A25039&t=hGP6h8UMFREhbFn1-1

Video quick walkthrough:

TDM.admin.faq.2.mov

[Reneedesigns]

@jamiedesignedit
Is there a screen to show the edit/deletion of an answer to the questions? In the meeting on 11/9 the team discussed expanding questions to show the answers in edit mode. Do we want this to be the same process as editing a question?

Another addition to the FAQ Admin screen will be a "Warning" box should the Admin start to leave the screen without saving. This box will be designed with specific language for exiting without saving based off of the design from #76 (comment) once iterations are completed.

@Biuwa @SMR9220

[ExperimentsInHonesty]

@Reneedesigns Please

1. List out all the features (did I miss any)
   1. Edit Q&A Button
   2. Change Category order (by moving)
   3. Move single Q&A
   4. Edit Q&A
      1. Edit Question
      2. Edit Answer
   5. Delete Q&A
   6. Edit Category Title
   7. Add a Q&A
   8. Warning If you try to leave without saving
   9. Warning if you attempt to delete a question/answer
2. Make separate recordings or playable Figma for each feature unless it can represented by a screenshot (e.g., the warning). It's hard to show the features to the stakeholder with it the way it is. Because you have to keep pausing to discuss a specific feature.
3. Make it so that when you edit a question, clicking on the title does not delete the title but rather lets you edit the text already there
4. There is a mention above in this document of warning choices. Please choose a maximum of two designs.
5. There is a mention of a dark fade and a fade, I don't know what those are. The fade across the whole site whenever there is a pop-up should be consistent. If it is not, make a new issue for that.
6. Show the editing of both the Question and the Answer (it was in a prior version, see screenshot)
   

[jamiedesignedit]

Updates after Bonnie's last comment, including screens of editing an answer and making sure not to delete the entire question when editing. Videos are included below each feature listed. Link to Figma to look at all the two flows that have been iterated on from the last version: https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=7348%3A25328&t=o0WEWPpKLmhafQZp-1

1. Go into edit mode

Edit.mode.TDM.mov

2. Delete a question

Delete.question.TDM.mov

3. Edit a question (iterated on since last post)

Edit.a.question.TDM.mov

4. Edit an answer (iterated on since last post)

Edit.answer.TDM.mov

5. Move a question & move a category

Move.questions.TDM.mov

6. Add a new category

Add.category.TDM.mov

[Biuwa]

Discussions about the warning dialogue box have been moved to #1279 and will continue there

[entrotech]

@Biuwa The editor seems to functioning pretty well, but there are a few remaining kinks to be worked out that cause some of the answers to be rendered incorrectly. It's your call about whether we show this to the stakeholders tomorrow, or wait til these can be resolved.

@shanesween Here are the problems I found when testing the FAQ Admin feature in the development environment after merging

There are a few problems with the version in the above PR:
Problem #1: Broken links:

(This should open the checklist modal dialog)

(Should open the corresponding document, as it does now in production)

Need to check all of the links in answers - I think most of the broken links are because the target and/or rel attribute settings were not accurately carried over from the previous version.

Problem #2: Several answers are rendered incorrectly, showing raw HTML instead of rendering the HTML properly, for example:

and

and

These appear to be problems with missing or extra quotation marks around the HTML text.

Problem #3: If you are not in edit mode (or not logged in), the bold text in answers is not rendered as bold.

This appears to be a styling problem with rendering non-editable answers using a font-weight of "bold" and font-family of "Calibri" for the answer paragraph, and using a font-family of "Calibri Bold" and font-weight of 400 (i.e. normal) for the style in App.scss, and the two combinations render text in an indistinguishable style. The easiest immediate fix is to change the styling of the answer paragraph to be font-weight: 400 (i.e., normal) and font-family: "Calibri". IMO, we should replace "Calibri Bold" font family throughout the app with "Calibri" and use the font-weight property to control font-weight. The other option is to use "Calibri" for normal text and "Calibri Bold" for bold text, but leave the font-weight as "normal" everywhere.

[entrotech]

@shanesween Problem #3 mentioned above is resolved. When not in edit mode, one of the divs enclosing the answer had font-family set to "Calibri Bold", which is apparently the same as font-family "Calibri" with a font-weight of bold (or 700), so applying the tag to text had no effect on the rendered text.

I went through the whole app and changed all "Calibri Bold" styles to "Calibri" with a font-weight of "bold". The above-mentioned div is set to font-family "Calibri" and font-weight: regular, so answer text that is not styled will now show up as regular weight. When quill applies the tag, the font-weight: bold (set in App.scss) will be applied, so the text bolded in quill will appear as bolded.

[Biuwa]

• the links will be QA tracked by QA HTML divs in the Admin FAQ page #1456