Implement the Admin Version of the FAQs page

[entrotech]

Dependency

• Create FAQ Admin features #76
• Update the User-Facing FAQ Page Implementation to include categories #1261

Overview

• Implementation of design issue Create FAQ Admin features #76. This allows an admin to enter and update FAQ questions and categories.

Action Items

• May need to define detailed steps to this project - it is fairly challenging, with drag-n-drop in a hierarchical data structure.
• Remove dependency on Implement a Warning Box when User Deletes FAQ #1304

Resources/Instructions

[mojimoh]

@entrotech
Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

[entrotech]

Implementing the Answer editing: For this, some of the existing answers have HTML tags in them, like links, As long a s we do that, we may as well implement other formatting elements like ordered and unordered lists, bold text, paragraphs, etc. to do this, I had to modify the design to give the user an "HTML Editor" to use when they choose to edit an answer. This is mostly working at this point. However, when you are in edit mode and click on a Category Name, Question or Answer to begin editing, it should automatically give focus to the field you want to edit, but I have not implemented that yet, and choose to defer fixing that unless/until the team agrees that the overall concept has a good user experience.

Implementing drag-n-drop has been very challenging. There are several libraries available to implement drag-n-drop, and I spent about two days of work trying to use dnd-kit, only to find that once I got it working, the draggable parts (i.e. the panels for editing FAQs or Categories could not respond to mouse clicks of keyboard actions. So I had to search for another library to use, and settled on react-beautiful-dnd, which took about 2 days of work to get working. This was pretty challenging because there was an egghead course on how to use it, but their examples were written with class-based react components (vs functional components we use), which made the handling of react refs quite different than what we need. I did find a poorly-written, but still helpful article that helped me adapt the egghead example to functional components.

At this point, both the editing and drag-n-drop are working pretty well, so the remaining parts are:

• Ability to add a category
• Ability to add a FAQ to a category
• Ability to delete a FAQ or Category with a confirmation dialog.
• Ability to save all the changes to the database.

I think the ETA can be in about a week, at which point, I can merge it to the development environment for @jamie and the other designers and PMs to review. My main concern is that it might be cumbersome to do all that editing before saving all the changes at once. It also might be confusing to have the confirmation dialog when deleting a FAQ, since the user might think that they are actually deleting the question immediately instead of the deletion only happening when the user later presses the "Save Edits" button.

[jamie]

FYI wrong @jamie

[entrotech]

@shanesween The partial implementation is on the branch 1305-faq-admin-take-3. Here is a video I made trying to explain what is working as of where I left off with this branch: https://drive.google.com/drive/folders/1vtfW9FallzfHmC8t4wPbVHjNC1azwqJy

[Biuwa]

@shanesween Please provide an update.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (if necessary): "Add any pictures that will help illustrate what you are working on.

[shanesween]

@Biuwa

Progress

• Successfully handling the following:
  • Add/Delete/Edit/Move Category
  • Add/Delete/Move FAQ
  • Expand/Collapse FAQs

Blockers

• Need to discuss the database structure with John:
  • Currently we make a call from two APIs: one to get all FAQs, one to get all Categories. Then we augment on the client application, so that FAQs are grouped as a property on each Category.
  • I am wondering if it would be simpler if this was all stored in a single database, Categories. So we dont have to make two seperate calls to get the information. Then, when saving, we only need to update the Categories DB.
• Working on implementing the logic to edit a question and answer of the FAQ.

Availability

• I will be working on this for about 3-4 hours over the next week.

Screen.Recording.2023-06-14.at.6.51.28.PM.mov

Screen.Recording.2023-06-14.at.6.52.43.PM.mov

[shanesween]

NOTE: A Pull Request has been created for the following changes:

• Refactoring local state of the faqCategories & faqs
• Ability to add/edit/move/delete categories
• Ability to add/edit/move/delete faqs
• Ability to save form to the DB
• Migration files that add a new sql procedure ‘insertAll’. This new procedure will delete the data stored in faqCategory table and replace it with the form state on save. With this work, I have added faqs as a column in faqCategory. This eliminates the need to store categories and FAQs in separate tables (and eliminate the need to make requests for each and augment the FAQs into the categories state).

Developer will be reviewing these changes with @entrotech over the coming week.

Additionally, there is some work left to handle styling of the rich text editor for the Answer portion of the FAQ. This will be worked on as part of this issue.

Developer will take an additional 2 weeks to finalize Answer rich text edit portion as well as thoroughly test changes, with expected completion of this ticket prior to ~July 12.

[shanesween]

8/9 Update:

Continuing develop to match designs shown here: #76 (comment)

This includes the following changes:

• FAQ action button updates
  • Reordering of buttons
  • Only show edit/delete buttons onHover of FAQ
• Modify FAQ's answer's saveEdits functionality (edits will save onBlur of text form)
• Styling updates to 'Save Edits' button
• Styling updats to 'Add New Category' button
• Revert styling of Expand / Collapse buttons to show both buttons (instead of switching beetween 'expand' and 'collapse' depending on state)

Anticipated work hours remaining for the above: 4 hours.

[Biuwa]

@shanesween- will this be ready in time for the next meeting with the stakeholders on the 22nd?

[shanesween]

@Biuwa This can definitely be completed before 8/22. I hope to be completed by next stand-up meeting on 8/16.

[Biuwa]

• Add to Wednesday Agenda @fnaneberhane TDM Weekly Team Meeting Agenda (Recurring) #1311

[shanesween]

Noted fixes since last demo on 8/2/23:

• Category, Question, and Answer inputs switch to edit mode onClick. In addition, on clicking outside of these elements (onBlur) will set changes to the form state - no longer using an ‘Edit’ button to set the input changes to the form state.
• Delete Icon (category & FAQ) now showing only onHover + styling enhancements
• Re-order of Icons (delete, expand/collapse, and then dragger) + styling enhancements
• Expand & Collapse All buttons restored to match designs (instead of a single button)
• Vertical Alignment of Category titles + styling enhancements
• Styling Enhancements to New Category & Add New Question
• Added border styling on FAQ list container to match designs
• Logic handling for when a Category or FAQ are ‘created’ but no input added - will not be set on the form state.
• Technical debt to refactor inline styling to styled components
• Splitting into micro-components for usability and readability

Changes are pushed to #1397

[shanesween]

DESIGN CALLOUTS as of 8/16/23

Design Callouts to mention on preview:

• Add New FAQ flow not found in [Figma Designs](https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=3331-11982&mode=design&t=Tis922haWGUflhkE-0).
• Delete Category flow not found in [Figma Designs](https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=3331-11982&mode=design&t=Tis922haWGUflhkE-0).
• Delete Question Modal not mentioned in [design ticket](Create FAQ Admin features #76 (comment)), but seen in [Figma Designs](https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=3331-11982&mode=design&t=Tis922haWGUflhkE-0)
• Green background color when category or FAQ is “grabbed/dragged” - do we need this?
• New Categories open at the bottom of the list, design shows top of list - do we need to make this change?

[jamiedesignedit]

Hi team! Can I be added to this issue?

• Add new FAQ flow: Do you mean how to add a new category? I believe is in the Figma file, screen shot below

• Delete Category flow: This was not included in the Figma file, but in my mind I thought this would function same as when deleting a question except the pop up box would have to say "Delete the selected category?"

-Personally I don't think there has to be a green background but at least an outline or shaded gray background would be helpful so the user can see what they are grabbing

-I don't think it is a problem if the new categories appear at the bottom of the list, however, will the screen automatically move down to show the newly added section if it is below the fold?

[jamiedesignedit]

Hi team,

@shanesween @entrotech
I reviewed the FAQ page in more depth today in the LADOT environment logged in as an admin. Thank you for the hard work! For the most part, it looks great. I do have a few comments/things to clarify.

1.) Importance: low

I think "expand all" and "collapse all" should either be grayed out or one or the other should disappear when everything is already expanded or collapsed. When there is 1+ thing expanded then we could have both "expand all" and "collapse all" show. For example, when we first open up the FAQ page everything is already collapsed. So shouldn't we just have "expand all" until something is opened?

2.) Importance: mid

I think the icon on the "edit FAQ page" button should probably be a pencil, not the save icon. That could be confusing because people will see that icon and automatically think it is saving.

Example:

3.) Importance: low

When I'm not in edit mode, the green box around the question is a little bit too close to the text. Can we add a more space here?

4.) Importance: mid/high

When hovering over questions in edit mode, the trash can also simultaneously appears on the category. This looks confusing and might scare people into thinking they are deleting two things at once. Just need the trash can to appear only on the line that is being hovered over.

5.) Importance: high

I did not get a warning box pop up when I deleted a question. Is this feature still being worked on?

6.) Importance: mid/high

The editing feature works great. My question is can we make an underline appear on hover like in the prototype? I think the underline indicates to the user that they can click on the text and edit it. Otherwise, it might not be intuitive enough for them to know they can directly click on the text to edit. See example below where the user will hover, then click and the box appears.

Thank you again! Please let me know if you have any questions or if there are certain things that would not be feasible.

[shanesween]

Submitted PR #1439 that fixes 2, 3, 4, and 6 of #1305 (comment).

I will be merging this PR tonight after running some tests.

1, 5 is currently in process and will have those done by next week.

[shanesween]

Response to @jamiedesignedit Note 1

• The shading when a Category or FAQ is being dragged is not yet completed but can be if this is a must-have to consider this ticket complete - this work may take a few hours to complete and test. Please let me know @Biuwa @jamiedesignedit @bonniewolfe @entrotech
• Yes, the screen will auto-scroll to have the new category input within the window.

Hi team! Can I be added to this issue?

• Add new FAQ flow: Do you mean how to add a new category? I believe is in the Figma file, screen shot below

* **Delete Category flow:** This was not included in the Figma file, but in my mind I thought this would function same as when deleting a question except the pop up box would have to say "Delete the selected **_category_**?"

-Personally I don't think there has to be a green background but at least an outline or shaded gray background would be helpful so the user can see what they are grabbing

-I don't think it is a problem if the new categories appear at the bottom of the list, however, will the screen automatically move down to show the newly added section if it is below the fold?

Response to @jamiedesignedit Note 2

1.) The expand collapse all disabling based on the expanded state of the FAQ is not completed. This would definitely cost a day's (4 ish hours) worth of development cycle and testing. I can implement this if we feel this is a must-have @Biuwa @bonniewolfe @entrotech @jamiedesignedit
2.) This has been resolved - Updated icon to pencil instead of floppy disk.
3.) This has been resolved - Added padding to the question container when it is expanded.
4.) This has been resolved - Delete icons are only shown at the Category or FAQ in which the user is hovering over.
5.) This has been resolved - Delete Dialog modal now showing onClick of delete icon - I made this modal using the new shared Modal component. I did not include specific text of the category or FAQ modal to be deleted, simple just a prompt with two action buttons ('cancel' and 'delete'). Again, if we feel that it is necessary to display the specific category or FAQ text within the delete modal, this can be completed but will be additional cycles of ~4 hours.
6.) This has been resolved - when an admin user is in Edit mode, and they hover over a Category or FAQ, the element is underlined to appear more clickable.

Hi team,

@shanesween @entrotech I reviewed the FAQ page in more depth today in the LADOT environment logged in as an admin. Thank you for the hard work! For the most part, it looks great. I do have a few comments/things to clarify.

1.) Importance: low

I think "expand all" and "collapse all" should either be grayed out or one or the other should disappear when everything is already expanded or collapsed. When there is 1+ thing expanded then we could have both "expand all" and "collapse all" show. For example, when we first open up the FAQ page everything is already collapsed. So shouldn't we just have "expand all" until something is opened?

**2.) Importance: mid**

I think the icon on the "edit FAQ page" button should probably be a pencil, not the save icon. That could be confusing because people will see that icon and automatically think it is saving.

Example:

3.) Importance: low

When I'm not in edit mode, the green box around the question is a little bit too close to the text. Can we add a more space here?

**4.) Importance: mid/high**

When hovering over questions in edit mode, the trash can also simultaneously appears on the category. This looks confusing and might scare people into thinking they are deleting two things at once. Just need the trash can to appear only on the line that is being hovered over.

**5.) Importance: high**

I did not get a warning box pop up when I deleted a question. Is this feature still being worked on?

6.) Importance: mid/high

The editing feature works great. My question is can we make an underline appear on hover like in the prototype? I think the underline indicates to the user that they can click on the text and edit it. Otherwise, it might not be intuitive enough for them to know they can directly click on the text to edit. See example below where the user will hover, then click and the box appears.

Thank you again! Please let me know if you have any questions or if there are certain things that would not be feasible.

[shanesween]

Response to John comments on #76

• This week I will be working on the cleanup of the DB migration scrips so that the initial FAQ page in Production will have the pre-loaded questions and correct entity structure in the DB.
• Issue 1: Do we expect to have updated links?
• Issue 2: I have gone through and cleaned up all the answers and questions which may show some unneccessary html elements. This will not be an issue going forward as the text editor logic is now finalized and the DB migration work will be finished in the near future.

cc: @entrotech @bonniewolfe @Biuwa

@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.**

[shanesween]

Updates based on stakeholder feedback mentioned in #1311 (comment)

Items that have been resolved:

• Some of the Questions are centered and not left-aligned
• There should be an 'Answer' placeholder in the Answer box as there is in the Question box
• The HTML divs are still showing and not linked
• When a blank section or question is created, it remains when you go back to edit mode, except when an admin logs out. (It saves only to a current admin user session) Is there a reason why? stakeholders were concerned about that

Items that are still in progress:

• The warning notice should also appear when saving (I know the warning notice for delete is in the works)

cc: @Biuwa @entrotech

[shanesween]

The Save Confirmation Modal has now been merged to 'develop' branch as of #1463
cc: @Biuwa @entrotech

[Noushie]

Reference for the destructive/warning modal:

You can find it in Figma here

[Noushie]

I can also create a version that is specific to this issue - I just need a screenshot of the original (based on what I saw - there might not be a need for some of the extra titling/text types)

[shanesween]

As can be seen in the above PR^, I have added a patch that will fix the link issue seen when editing an answer. @Biuwa @entrotech please test and let me know if this now works as you would expect.

In addition, I went through and tested the tools we have enabled in the text editor and removed ones that are not working in our current dev structure. Currently, we utilize two different components for an answer when it is being edited (rich text editor) and when not being edited (a simple HTML text element). If we want the below tools to work, we would have to re-consider the current implementation. IMO, to complete this MVP version of this feature, we should not seek to add these tools back.

The tools removed are below:

• block quote
• indentation
• Add image

[Biuwa]

I can also create a version that is specific to this issue - I just need a screenshot of the original (based on what I saw - there might not be a need for some of the extra titling/text types)

@Noushie that would be nice.

here's how it currently looks

[shanesween]

@Noushie I went ahead and used the same formatting and styling used in the Delete Projects Dialog modal.

@Biuwa @entrotech The link editor is now working, as is the updated styling for the Save and Delete dialogs. Please test and let me know if there are any other changes you would like to see prior to stakeholder meeting.

[Biuwa]

@shanesween please remember to leave a comment we could use in the meeting with Bonnie

[Biuwa]

@shanesween following our meeting with Bonnie yesterday, the checklist will remain a pop-up that users can access on other pages as it is presently, but the HMTL checklist on the FAQ page will link to a checklist page. This will be tracked with #1478

[shanesween]

@Biuwa @bonniewolfe @entrotech - Sounds good, are we OK to close this ticket then?

[Biuwa]

@shanesween If the stakeholders approve it tomorrow with no changes in feedback