Test Wagtail 2.0 upgrade

[patphongs]

We need to heavily test the Wagtail 2.0 upgrade. This has been launched in our feature space and testing can start now.

Completion criteria:

• Test every template:

• [x] About landing page - (Basically works, but will need tweaks if changes beyond what's currently on the page are desired in the future. - DY)

• [x] Alert for emergency use only - (Seemed to work well. -DY)

• [x] Collection page (Pattern library example) (Works. Same Rich text bugs as other pages. Dealbreaker is the bullets for the bulleted list not showing. - DY)

• [x] Commissioner page (Pattern library example) - (Small quirk with link box but otherwise OK- see comment DY)

• [x] Custom page (Pattern library example) - (This template has the glossary and rich text bugs noted elsewhere. It also has some issues with sections that are required but that should be optional. See comment. - DY)

• [x] Digest page (Pattern library example) - (Similar bugs to glossary, link dialog box and rich text editor noticed - DY)

• [x] Document feed page (Pattern library example) --( Dealbreaker: The documents aren't appearing. See comment below. DY)

• [x] Document page ( Dealbreaker: The documents aren't appearing. See comment below. - DY)

• [ ] Home page (Do not have access to edit this - DY)

• [x] Home page banner announcement - (Seemed to work fine. DY)

• [ ] Legal resources landing page (Hard coded page; do not have access to test - DY)

• [x] Meeting page (Pattern library example) (Some issues especially with internal v external linking; may need further testing. See comments. - DY)

• [x] Press landing page - (This was a confusing template but didn't seem to have too many issues. May need testing by those more used to using it. See comment. - DY)

• [x] Press release page (Pattern library example) (Same issues as digest template. May not be as be a big a dealbreaker for a press page. See comments. - DY)

• [x] Record page (Pattern library example) (For this page, glossary bugs are more serious. Other rich text bugs noted in other pages appear. The bulleted indenting bug could present an occasional issue but is not a dealbreaker. HTML embed is workable workaround. See comments below. - DY)

• [x] Reporting example page (Pattern library example) (Similar bugs in rich text editor, but unsure how important that is for this template. May need further testing by primary users. See comments. - DY)

• [ ] Reports landing page (Pattern library example) - (Unable to test this page - was able to put things in rich text editor, but unable to save draft and see if the reports feeds added worked. See comments. DY)

• [x] Resource page (Pattern library example) (More testing needed by other users perhaps, as this is a favored template. Some dealbreakers though - some blocks are mandatory now but should be optional. See comments. - DY)

• [ ] Services landing page -Unable to test this template as this is a hard-coded one. - DY

• [x] Tips for treasurers page (Pattern library example) Minor items (see comment) but overall worked (DY)

• Test rich text editor functionality - (Done in each template. Some bugs especially with horizontal line, linking, glossary and bullets. There were some common bugs across templates, so am adding a check box to write up the findings and divide into dealbreakers vs. things to fix that we can live with as @patphongs requested.)

• [x] Summarize the rich text bugs found during testing in one document.

[patphongs]

Some bugs found today during design sync:

• Copied glossary term stays bold when copied across blocks
• Adding link and glossary or san serif functions crash editor

[dorothyyeager]

Bug found today while checking out a H4CC page (using custom page template): The glossary term button only works when the term is exactly like that in the glossary. For example, if you apply glossary button to a heading entitled "National party committees" it doesn't work, because the term in the glossary is "National party committee".

If you just apply the button to the part of the word or term that matches, it works but it looks funny. (Here's a screencap.)

(This is something most likely solved by going into the html code and moving what will be in between the code for the term. But means, we'd need that html editor button.)

[dorothyyeager]

Starting to test the templates. I'll put a check by them when testing is done, and add any notes about bugs observed in a comment.

[dorothyyeager]

On the Commissioner page template - most of the editing functions worked well. The one quirk observed was that link text did not pre-populate when I selected text and added a link. (The link still worked and the text was there - it just didn't show in the dialog box.) Here's a screencap

[dorothyyeager]

For the About landing template:

• The glossary bugs noted above by @patphongs and me happen on this template too.

• Also, I was unable to indent some bulleted text in the section intros - selecting the bullets and clicking on Tab did not work and there are no indent/outdent buttons. (Wagtail 1.0 has indent/outdent buttons and clicking Tab also worked.)

• The horizontal line button did not yield a horizontal line on the page when rendered in preview (although you could see the line in Wagtail). It also had a lot of extra space above it.

• The embed button works but doesn't use the embed source code that youtube provides. Instead you put in the URL. A ton of white space appears below the video when viewed. This is something that the HTML editor would work better for (you could copy/paste in the embed source code).

Also: Not a problem as it wasn't a thing in Wagtail 1.0 either, but there may be times a related page might be an external link (such as to a transition page). It's not possible to add this as a separate link -related page with a call-out button. (It is possible to do the link in the section intro text.)

[dorothyyeager]

Issues found while testing the custom page template in this comment:

• Various glossary bugs, summarized in comments above.
• Various rich text bugs, noted in other templates, also appeared with this template.
• Unable to save draft without populating "continuing learning", "citations needed", and "record article" blocks (but sometimes there is nothing to put in these). In prod- we do not need to populate these fields to save the draft in old Wagtail.

Here's a screencap of the sections added to a page that doesn't use two of them; you can see the issue more clearly. It would be a dealbreaker for this page, for example.

[dorothyyeager]

Issues found while testing the document feed page template in this comment:

• Biggest issue was that the documents did not appear to be there after I selected the category.

• The embed button works but doesn't use the embed source code that youtube provides. Instead you put in the URL. A ton of white space appears below the video when viewed. This is something that the HTML editor would work better for (you could copy/paste in the embed source code).

• The horizontal line button did not yield a horizontal line on the page when rendered in preview (although you could see the line in Wagtail).

[dorothyyeager]

Issues found while testing the digest page template in this comment:

• Cutting and pasting text into paragraph (which the Press Office will most likely do) worked (and did not insert any bad code).

• The links transferred with cutting and pasting, but the link text box did not populate with the text for the URL. I was able to edit the link text though using the box. Also, Press tends to only do external linking and doesn't always use the best URLs - that could be a problem if they need to go back and edit a link. I did test editing a link's text right in the rich text editor and that worked well.

• No indent button but hitting tab worked.

• Embedding a video leaves a huge white space under it.

• Press Office doesn't use glossary links in digests, but if they did use the tool, they'd have a problem because the word has to be formatted exactly like it is in the glossary to work. (Press frequently does not use or format terms like other offices. For example, they'll say "non-federal" with a dash instead of "nonfederal." I've left some non-working links on the test page.

• Horizontal line shows in Wagtail but not rendered on the html page.

[dorothyyeager]

Issues found while testing the Press Release page template:

• Cutting and pasting text into paragraph (which the Press Office will most likely do) worked (and did not insert any bad code).

• The links transferred with cutting and pasting, but the link text box did not populate with the text for the URL. I was able to edit the link text though using the box. Also, Press tends to only do external linking and doesn't always use the best URLs - that could be a problem if they need to go back and edit a link. I did test editing a link's text right in the rich text editor and that worked well.

• No indent button but hitting tab worked.

• Embedding a video using the button leaves a huge white space under it. However, in testing the html block, I used the embed code provided by YouTube. This worked well; so the solution for other page templates which might use an embedded video would be to enable them with the html block.

• Press Office doesn't use glossary links in press releases, but if they did use the tool, they'd have a problem because the word has to be formatted exactly like it is in the glossary to work. I've left some non-working glossary links on the test page.

• Horizontal line shows in Wagtail but not rendered on the html page.

[dorothyyeager]

Issues found while testing the Record page template:

• Cutting and pasting text into paragraph worked (and did not insert any bad code).

• The links transferred with cutting and pasting, but the link text box did not populate with the text for the URL. I was able to edit the link text though using the box.

• Love having the tags pop up as selections! Definite improvement!

• Experiencing the glossary bug here too (that's a big thing for Record articles). It has to be exactly as it appears in the glossary or it doesn't work (or if you just highlight the part of the word that matches exactly, it works but looks weird).

• No indent button but hitting tab worked for the numbered list. Tab did not work to indent the bulleted list.

• Embedding a video using the button leaves a huge white space under it. However, in testing the html block, I used the embed code provided by YouTube. This worked well; so the solution for other page templates which might use an embedded video would be to enable them with the html block.

• Sometimes Record articles make heavy use of tables or images - those functions appear to work fine. In fact, being able to cut/paste a table directly from word without inserting bad code is a HUGE improvement. Going to test this in other templates now.

[dorothyyeager]

For the Document page template:

• Was unable to generate the list of documents and unable to select a category when rendered.
• The tab function did not work to indent a bulleted list
• Horizontal line did not render a line on html page
• Did not test embed since we most likely wouldn't do that on this template.

[dorothyyeager]

For the meeting page template:

• Did not have a way to enter rich text or document link under the audio items
• Seems like we should be able to link minutes as internal links but are forced to paste in an external link rather than select the document. The approved minutes link didn't work unless I put in full URL including https://www.fec.gov, so wasn't able to take that part out.
• It might be a good thing for @johnnyporkchops or Jim Jones to test this template since they work with it the most.

[dorothyyeager]

For the tips for treasurers page template: I'm familiar with what the tips use and what they don't, so didn't test out the features that wouldn't be used. Mostly it works. Some small items:

• The links transferred with cutting and pasting, but the link text box did not populate with the text for the URL. I was able to edit the link text though using the box.

• Glossary links aren't often used in tips, but if they did use the tool, they'd have a problem because the word has to be formatted exactly like it is in the glossary to work. I've left some non-working glossary links on the test page.

[dorothyyeager]

For the reporting example template:

• Not sure if we are using glossary terms in reporting examples, but there isa problem because the word has to be formatted exactly like it is in the glossary to work. I've left some non-working glossary links on the test page. I noticed that if I edited the glossary word after highlighting it, it stripped the glossary formatting.

• The tab function did not work to indent a bulleted list

• Horizontal line did not render a line on html page

• Did not test embed since we most likely wouldn't do that on this template.

• I did try inserting an image into the rich text editor but it did not work.

• The links transferred with cutting and pasting, but the link text box did not populate with the text for the URL. I was able to edit the link text though using the box.

• Probably would be a good thing for @llienfec to test the template because she is most familiar with it.

[dorothyyeager]

Issues found while testing the reports landing page template:

• The same rich text editor bugs were observed on this template

• I was unable to save a draft and see if my attempts to choose document pages and feeds worked. Maybe a permissions issue or because it is hard-coded; not sure.

[dorothyyeager]

Issues found while testing the collection page template:

• Cutting and pasting text into paragraph worked (and did not insert any bad code). However, glossary coding that was copied from a webpage did not copy over.

• In the bulleted list - the second, third and fourth bullet for a bulleted list did not show up. Only the first bulleted item had a bullet.

• Horizontal line did not work. Did not test embed since it's unlikely to be used on this page.

• Glossary words have to be exact.

[dorothyyeager]

Issues found while testing the Press Landing page template:

• It may be confusing to someone new using Wagtail. I was confused and testing things in the wrong area at first. I am still not sure what goes in "option blocks".

• Copying blocks worked, but some coding didn't come with it (for example, the page break I tested).

• Same with contact info. It's not clear that some info is already hard coded onto page.

• Did not test things like embed or horizontal line since they aren't used on this page.

[dorothyyeager]

Issues found while testing the Resource Page template:

• Wording copy/pasted worked fine, except a term that was glossary coded ended up being alloneword and having code stripped.

• Copying a table seemed to work!

• Copying a snippet- right now it's labeled "contribution limits table" but would be good to change that label to "snippet" since we want to use snippets for coordinated party expenditures too (which is the page I'm recreating to test).

• The options for aside work. It would be great if the URL could be an internal link but that's not a dealbreaker. However, having them be mandatory is definitely a dealbreaker. These should be optional as they are now.

• The citations and the related pages blocks should be optional; not mandatory. Same issue as in the Custom page template. This is a dealbreaker.

[JonellaCulmer]

@dorothyyeager Also, for Resource page I just found that the asides are now required and they are not currently on production.

[dorothyyeager]

Thanks @JonellaCulmer I see that and I agree that's not a good thing. Have updated my resource page comment above to note it!

[dorothyyeager]

I've summarized the issues found during testing in this document: https://docs.google.com/document/d/1fgxx9oTEXunm7scqyqJRDF5bG-z45eXO1VkOLwSa8Zw/edit?usp=sharing

[dorothyyeager]

@llienfec is going to test out the reporting example template and add her thoughts on it as needed. Will close this issue after she's done.

A separate ticket for next sprint will cover the testing of the hard-coded templates I couldn't test. That issue is at #1994

[llienfec]

Hey @dorothyyeager - finished testing reporting examples template and found the same things as you.

It would be nice to embed video instead of just linking at the bottom, but we can save that for future work. Not needed to give Wagtail 2.0 the go-ahead.

Also, re: glossary notes - I definitely think we want access to the glossary on reporting example pages, maybe not used as heavily as on the content pages.

Glossary - showstopper?

I think the glossary has to be figured out before Wagtail 2.0 goes live. Instead of the glossary automatically linking. is there a way we can select the text, click glossary, and pick the term we want to associate with the link? What do you think @dorothyyeager @AmyKort

[dorothyyeager]

Thanks @llienfec! Using the html block will work as workarounds for the video. It also helps with the glossary (but defeats the purpose of the handy glossary button). In my write-up, I didn't think the glossary stuff was a show-stopper, but it is a strong argument for having the HTML editor button (since the way to make it link a term that isn't exact would be to edit the html code).

Going to close this issue after adding your notes into the doc.

[dorothyyeager]

Added Lauren's thoughts on glossary into the doc and elevated the glossary button into the possible dealbreaker portion.

Hard-coded page template testing issue is open at #1994 so will close this one as we've tested all of the pages we could and wrote up findings.

[llienfec]

Thanks @dorothyyeager I agree... I think we need either HTML or the glossary fixed. In a perfect world, I'd rather have HTML (ha - or both).

[dorothyyeager]

Totally @llienfec , my vote would be the HTML editor as well. It has a habit of coming in handy!

[johnnyporkchops]

Resource page template issue- I was unable to edit and save a change to a Resource page template because the aside blocks are required. In the current Wagtail (<2.0), removing a required field using the trash icon or the "X" usually works to remove a required field, but on this page, it does not allow you to remove them so it is impossible to edit and save the existing page. This may be solved by making those fields optional. I encountered this when trying to edit /about/careers on feature using Wagtail 2.0.https://fec-feature-cms.app.cloud.gov/admin/pages/7256/edit/

[dorothyyeager]

Thanks @johnnyporkchops - For that template and the custom page template, the asides not being optional is a dealbreaker I noted in my document. It really affects the pending rulemaking matters page that OGC uses when they have more than one rulemaking (and they weren't able to preview a coming update to the page because I couldn't mock it up in feature). Definitely something we need to fix before Wagtail 2.0 is put into use.