[DUE 4/15/2021] Testing Wagtail v2.11.6 and Django v3.1 upgrades

[rfultz]

Summary

Wagtail v2.11.6 and Django v3.1 will be deployed to the feature environment for testing. Testing ticket to put the new versions of Wagtail and Django through their paces.

Notes

The related ticket and PR

Details

We're upgrading Wagtail by several versions and Django by a major + minor version and there were some breaking changes.

To Test

Wagtail login and Cookie testing

Do not clear cookies before starting this test.

• Login to feature space prior to upgrade.
• Login to feature after upgrade is deployed, make sure login is still successful. Load any page (if there's a cookie error, it will happen immediately. For localhost it's an ugly warning page about Incorrect padding but it should be silent for you or ask you to log in again.)

How to check cookies (not needed, but if you want to)

One of the breaking changes has to do with how the system encodes and decodes session IDs so we want to make sure we start with cookies from older log-ins. (If you hadn't already had a cookie from the older version, there's no way to fake it without deploying the older (current) version again.) FTR, to check your cookie:

• go to any page on feature
• right-click anywhere and choose Inspect
• go to the Application tab
• on the left column, choose https://fec-feature-cms.app.cloud.gov under Storage and Cookies
• in the main area, we're looking for a name of sessionid

Check all templates working (Jonella, coordinating template reviews)

• About landing page (Pat) - Looks good
• Alert for emergency use only (Dorothy) - works great
• Collection page (Pat) - Only issue with this page is any of the custom RTE tools (glossary, san serif, and anchors are not working). Same as the issue noted here.
• Commissioner page (Kathy) - see comment below. Problem with the glossary option and other options
• Contact page (Pat) - Looks good
• Custom page (Dorothy) - This page template has numerous issues logged in this comment. Many were in the rich text editor paragraph block functions - @kathycarothers @djgarr please be sure to test those thoroughly on the pages you test. For example, bullets aren't working.
• Digest page (Kathy) - problems listed below
• Document feed page (Pat) - Looks good, was able to add additional items to the feed when a document page item was created
• Document page (Pat) - Looks good, was able to add a new document item that showed up in the feeds and also edit other document pages and have them reflect correctly in the feed.
• Example page (David) - did not work properly. see comments below
• Full width page (David) - did not work properly. see comments below
• Home page (Pat) - Looks good, was able to edit, save, and publish the top features HTML block section
• Home page banner announcement (Dorothy) - works great
• Legal resources landing page (Pat) - Looks good
• Meeting page (Paul S) - Works fine
• OIG landing page (Kathy) - works great (I was able to recreate the page in feature and with no problems.)
• Press landing page (Pat)
• Press release page (Dorothy) - works well
• Record page (Paul S) - Works fine, including a webinar article using tables
• Reports landing page (Pat) - Looks good, I could make edits to the feed landing page and publish the changes
• Resource page (Jonella)
• Services landing page (Pat) - Looks good, was able to edit, save, and publish the page to make change to the top heading block
• Tips for treasurers page (Paul S) - Works fine

Check visual appearance of a few templates (homepage + a few others)

This is because of the change from classname to form_classname

• lists on the homepage (Jonella + Pat)
  • Homepage looks good, list items appearing in grid as expected (checked by Pat)
• Custom pages (Jonella + Custom reviewer)
  • headings
  • body headings
  • sidebar headings
    • Bulleted lists not appearing (checked by Jonella)
• heading for OIG Landing Page (Jonella + OIG reviewer)
  • Cannot view OIG landing page (checked by Jonella)
• Press Landing Page (Jonella + Press reviewer)
  • hero
  • release intro
  • digest intro
  • contact info
    • All looks good to me (checked by Jonella)
• hero for About landing page (Jonella + Pat)
  • Hero on About landing page looks good (checked by Pat)
• body heading for Collection Pages (Jonella + Collection reviewer)
  • All looks good to me (checked by Jonella)
• hero for Services landing page (Jonella + Pat)
  • H4CC landing looks good, hero section text can be edited and published in Wagtail as expected. (checked by Pat)

Check pages outside of Wagtail (Jonella)

• Data pages
• Legal pages
• Calendar page

Check functionality of Wagtail in general (everyone, while checking other templates)

• Create page
• Edit page
• Preview page
  • No issues with any of these tasks (checked by Jonella)

Check responsive object (John)

• Wagtail changed a class for responsive-object but I'm not sure where that might be used. Does that sound familiar?

Have fun breaking things! (always better to break in feature than have problems with Prod)

Any cool new Wagtail functionality from upgrade?

• Rich text editor upgrades?
• Does anything in these upgrades help with Wagtail wishlist: Control column widths on table blocks #4258 (column widths)?

[patphongs]

Cool new stuff I just found. I haven't had a chance to play around with it yet though.

• Wagtail reports
• Wagtail page moderation
• Wagtail page lock

[rfultz]

Yep!

Here are the various release notes if you're interested:
Release notes for Wagtail 2.8
Release notes for Wagtail 2.9
Release notes for Wagtail 2.10
Release notes for Wagtail 2.11

Release notes for Django 3.0
Release notes for Django 3.1

[patphongs]

We've decided to push the upgrade to the 14.4 release which will be on 4/27/2021. This will give us more time to test and deploy after the April quarterly filings are due.

[dorothyyeager]

Checks of the home page banner and emergency alert banner went well. Banners appeared when they were supposed to, appeared correctly, and disappeared when they were supposed to. Here's screencaps of each.

[djgarr]

Ran into some shenanigans when testing the full width page template

The table i created showed up correctly below the above image

Update: ran into the same issues as others when trying to use the glossary function

[djgarr]

The example page didn't work. not sure if there's an issue uploading an image, but I tried and got this result

[patphongs]

Wagtail icon that appears on the page when you're logged in and want to edit the page seems to have disappeared from the circle. The icon is definitely there, but the classes look missing: wagtail-icon wagtail-icon-wagtail.

[patphongs]

Any page revisions, now called "history", made prior to the upgrade are now missing. I tried the "History" button to look at the About landing page history and I don't see any history prior to the upgrade at all. I should see at least a dozen revisions for the About page.

I tried to save a draft on the page just now and all I see is my most recent revisions after the upgrade.

[dorothyyeager]

Custom page template issues - test page is at https://fec-feature-cms.app.cloud.gov/help-candidates-and-committees/test-of-custom-page-4-2021/ (https://fec-feature-cms.app.cloud.gov/admin/pages/11622/edit/)

1. Lists

Numbering lists in the rich text editor do not work. Numbers don't render and the numbering when indented didn't change from 1, 2, 3.

Addition from Pat for unordered lists
The bullets do not appear for unordered lists on the custom page and text font size is smaller. Example link.

2. Links:

• Anchor link: Creating an anchor link in the rich text editor paragraph block caused the page to crash and lose unsaved work.
  

• Glossary link: Trying to add one caused the content to crash and lose unsaved work.
  

3: Images

• Thumbnail images inserted into a page's paragraph block work.

• The image block - used for larger or medium sized images on a page (like webinar ads) did not render as a separate block.

• We'd also want to ensure our current padding is still intact on image blocks. For example, an html block added right as an image block should've had some padding between the html and the image, but instead it didn't put the padding there, it looks like it padded in the middle of the html:

4. Snippets: There's no padding around the snippet when inserted. (This is needed)

5. Superscript: Trying to apply superscript to text caused the content to crash.

6. Sidebar We only need paragraph and heading.

7. Related Topics - Box size doesn't look correct and words should be centered. Box should be below the Citations box.

[patphongs]

Not a bug but just noting that there is a difference in the page status display in the newer Wagtail version.

A page is in draft and not published live: It will display the time saved of the latest draft and not have a live button displayed in the page.

A page is published and live: It will display the time the page was published live and the "Live" button on the right hand side of the page.

A page is published and has a saved draft that is not published: It will display the time of the last saved draft but also indicate that the page is live with the button on the right.

[djgarr]

On the Example page, the numbering and bullet points do not work

[kathycarothers]

When testing the Commissioner page template I went into the paragraph box to add text. For one of the words I tried to link it to a glossary term and the page crashed. This also happened when I tried to add an anchor and Sans Serif font options too. See the picture below:

And the numbering, bullets points, and the horizontal line did not work either:

[kathycarothers]

Digest pages problems:

• The horizontal line is not showing up (should show up above www.fec.gov) see picture below
• Crashed - Glossary terms, san serif font, and anchors
• Tables and buttons all worked
• System worked very slowly when it came to entering the "Authors" for this page
  Crash picture:

Missing horizontal line:

[patphongs]

No issues with Wagtail login in feature space after logging in on the old version and then logging in on the new version.

[dorothyyeager]

Press Release page template: https://fec-feature-cms.app.cloud.gov/updates/test-press-release-page-4-2021/

No notable issues. I did not fully test the rich text paragraph editor since issues with that were noted in the custom page template comment. I did notice the bullets worked in this template.

[rfultz]

I've created an initial MoSCoW tracker here. Trying to keep things organized and sortable but still conversational shouldn't be such a challenge
https://docs.google.com/spreadsheets/d/17z1ks8BHjFVUls-nVf5a8JaE-HFCvOXBZVE2aJ0eikU/edit?usp=sharing

[JonellaCulmer]

Resource page:

• Unable to add an image in the rich text editor, no matter how it's formatted: Full, left or right
• Numbered and bulleted lists are working in wagtail editor, but not displaying properly on the page.
• Can't open a PDF linked on the page - get 404.
• Can't open PDFs in document list.
• Images don't show up on feature - but I think that's to be expected, yes?

[JonellaCulmer]

Custom page addition:

• Checked previously published page and unordered bulleted list is impacted.

Appearance on .gov:

Appearance on feature:

[rfultz]

The example page didn't work. not sure if there's an issue uploading an image, but I tried and got this result

David, how's this?

[rfultz]

Ran into some shenanigans when testing the full width page template

The table i created showed up correctly below the above image

Update: ran into the same issues as others when trying to use the glossary function

@djgarr is this still an issue if we add a </table>?

[rfultz]

Custom page template issues - test page is at https://fec-feature-cms.app.cloud.gov/help-candidates-and-committees/test-of-custom-page-4-2021/ (https://fec-feature-cms.app.cloud.gov/admin/pages/11622/edit/)

1. Lists

Numbering lists in the rich text editor do not work. Numbers don't render and the numbering when indented didn't change from 1, 2, 3.

Addition from Pat for unordered lists
The bullets do not appear for unordered lists on the custom page and text font size is smaller. Example link.

2. Links:

• Anchor link: Creating an anchor link in the rich text editor paragraph block caused the page to crash and lose unsaved work.
  
• Glossary link: Trying to add one caused the content to crash and lose unsaved work.
  

3: Images

• Thumbnail images inserted into a page's paragraph block work.
• The image block - used for larger or medium sized images on a page (like webinar ads) did not render as a separate block.
• We'd also want to ensure our current padding is still intact on image blocks. For example, an html block added right as an image block should've had some padding between the html and the image, but instead it didn't put the padding there, it looks like it padded in the middle of the html:

4. Snippets: There's no padding around the snippet when inserted. (This is needed)

5. Superscript: Trying to apply superscript to text caused the content to crash.

6. Sidebar We only need paragraph and heading.

7. Related Topics - Box size doesn't look correct and words should be centered. Box should be below the Citations box.

@dorothyyeager do these look right now?

[rfultz]

@kathycarothers can you point me to where there's an <hr> that works? I'm not seeing it on the live site, either.

[rfultz]

• Numbered and bulleted lists are working in wagtail editor

@JonellaCulmer I think these have been fixed now. ?

[djgarr]

Ran into some shenanigans when testing the full width page template

The table i created showed up correctly below the above image
Update: ran into the same issues as others when trying to use the glossary function

@djgarr is this still an issue if we add a </table>?

That seems to do the trick. No shenanigans then, just user error. Thanks!

Update: While that did remove the image, the drop down menu on the chart isn't working. I'm not sure if that's because it's a partial list of states and territories, but if you were to choose from one of the states listed on the menu, the chart stays the same

[patphongs]

Testing is complete, all issues have been resolved. Merged to develop and will do additional testing.