write CSF course name onto blank certificate #46829

davidsbailey · 2022-06-10T22:40:56Z

Background

Finishes PLAT-1735. Here is the current state of the world:

Most importantly, when completing a course:

completing a HOC course will always take you to the studio congrats page
completing a CSF course will take you to the studio congrats page only if you have the experiment enabled

For more diagrams and next steps, see congrats page work plan.

Description

The goal of this PR is that when you complete a CSF course with the experiment enabled, you should see the course name printed onto a blank certificate (see 1st screenshot). In order to accomplish that, this PR does the following things:

add default_random_donor param to create_course_certificate_image, and use it to limit random donor selection so that this method never provides a random donor when called from dashboard (e2b1624)
relax requirements on /certificate_images/ routes so that student name and donor name can be omitted (7ce1869)
use custom certificate with course name written onto it (rather than default HOC certificate) for "blank" CSF certificates (fb4d4de)
remove client logic for displaying blank HOC certificate, and use existing server logic instead (e6091ca, 26c633f)

Steps 1-3 are necessary to get blank csf certificates to appear properly on /certificates/ and /print_certificates/ pages (see 1st screenshot/video for a refresher). step 4 is also necessary to get blank csf certificates to appear properly on /congrats/.

Also worth noting that step 4 is a "visible" change even for users without the experiment, in the sense that it changes the url used to display the certificate image for HOC tutorials. However, the image itself should be identical (see last screenshot).

Screenshots

new behavior for finishing CSF congrats page, with experiment:

Screen.Recording.2022-06-13.at.9.37.24.AM.mov

after going to code.org/congrats/course1?enableExperiments=studioCertificate (before / after):

after completing the oceans tutorial, with or without experiment (before / after):

no image rendered with a bogus course name (just trying to keep us out of trouble here):

Testing story

updated and extended unit test coverage on rails controllers and react components
updated existing UI tests and added new UI / eyes tests

Follow-up work

Unfortunately, this PR takes away a usage of images within apps (good) and makes it go back to using the same images in pegasus (bad). I've added an item to the work plan to move the certificate images out of pegasus and into the dashboard asset pipeline (also good).
This PR has merge conflicts with Petition on congrats page #46722. Once both are in, I'll reimplement these commits: make initialCertificateImageUrl prop required and extract defaultProps for Congrats

This reverts commit 5ada958.

This reverts commit f13af0b.

…ustomize-csf-blank

megcrenshaw · 2022-06-16T23:05:36Z

Your screencasts are so helpful. I'm having trouble verifying this works locally though:

Using experiment on Course 1 redirects to studio, but doesn't have Course 1 on it. I also tried inputting my name and tried clicking on the image:
https://watch.screencastify.com/v/VpihFl3sUqOjOAIyGlBO
Here I tried clicking "print" and got an Hour of Code certificate: https://watch.screencastify.com/v/pRCctl30bhipCTyafcTx

I pulled your branch, ran yarn build and ran dashboard-server ... is there something else I need to do before trying it?

jamescodeorg

Changes look good to me (but I didn't try to pull the branch and run it like Meg's doing). Thanks for continuing to push on this!

davidsbailey · 2022-06-17T21:36:04Z

Apologies, Meg. For some reason, you have to be running the dashboard server on Linux for writing onto certificates to work. I tried to set up an adhoc, but it kept failing due to known issues which infra is working on, so I took the screenshots against a server running on a developer EC2 instance.

I think that explains the first 2 anomalies, but I'll have to look into the 3rd next week.

davidsbailey · 2022-06-18T03:09:00Z

Here I tried clicking "print" and got an Hour of Code certificate: https://watch.screencastify.com/v/pRCctl30bhipCTyafcTx

@megcrenshaw I think this looks like you may not have had the experiment enabled on dashboard. unfortunately, you have to enable it on both dashboard AND pegasus. you can see this happening in the UI tests:

code-dot-org/dashboard/test/ui/features/hour_of_code/hour_of_code_finish.feature

Lines 61 to 65 in 6b5f4fc

    
           Scenario: Course A 2017 uncustomized dashboard certificate pages 
        
             Given I am on "http://studio.code.org/congrats?enableExperiments=studioCertificate" 
        
             And I wait until element "#uitest-certificate" is visible 
        
             When I am on "http://code.org/congrats/coursea-2017?enableExperiments=studioCertificate"

megcrenshaw · 2022-06-21T15:38:55Z

@megcrenshaw I think this looks like you may not have had the experiment enabled on dashboard. unfortunately, you have to enable it on both dashboard AND pegasus. you can see this happening in the UI tests:

Ah, thanks! That was the problem. Name doesn't come through locally, but it's not the Hour of Code certificate:

megcrenshaw · 2022-06-21T15:40:00Z

apps/src/templates/certificates/Certificate.jsx

-  mee: require('@cdo/static/MC_Hour_Of_Code_Certificate_mee.png'),
-  mee_empathy: require('@cdo/static/MC_Hour_Of_Code_Certificate_mee_empathy.png'),
-  mee_timecraft: require('@cdo/static/MC_Hour_Of_Code_Certificate_mee_timecraft.png')
-};


Hurray deleted files!

megcrenshaw · 2022-06-21T15:44:46Z

dashboard/test/controllers/certificate_images_controller_test.rb

@@ -33,13 +31,20 @@ class CertificateImagesControllerTest < ActionController::TestCase
    assert_includes response.body, 'invalid donor name'
  end

-  test 'can show certificate image given bogus course name' do


I like that you added a test to document undesired behavior and then revised the test once the functionality was as desired

megcrenshaw

Code looks great! I verified what I could locally. Nice work, and thanks for the thorough documentation

davidsbailey · 2022-06-21T16:15:48Z

Thank you both for the thorough review! I tried one last time to start an adhoc, but no luck 🤷

davidsbailey added 13 commits June 10, 2022 15:34

rename sponsor to donor_name in create_course_certificate_image

14c8db1

only use random donor name when generating certificate on pegasus

e2b1624

allow blank donor name on dashboard congrats pages

7ce1869

assert image urls in certificates controller tests

785b787

add tests for unpersonalized csf certs

f9f1120

write csf course name onto unpersonalized blank certificate

fb4d4de

pass certificate_image_url from server to Certificate

e6091ca

use initialCertificateImageUrl to render unpersonalized cert

26c633f

allow certificate image without student name

f0acba7

check for nil s param

b328e90

catch bad base64 in s param

7a7bb0f

use initialCertificateImageUrl to fix CertificateTest

a2907cf

update image urls in hour_of_code_finish.feature

993a101

davidsbailey changed the title ~~Customize csf blank~~ write CSF course name onto blank certificate Jun 13, 2022

davidsbailey added 14 commits June 13, 2022 11:14

remove unused apps certificate images

0a5fe05

make initialCertificateImageUrl prop required

f13af0b

extract defaultProps for Congrats

5ada958

only allow writing csf and hoc course names

3f9b75c

rename to has_csf_congrats_page?

6ba2e60

Revert "extract defaultProps for Congrats"

1f9b8da

This reverts commit 5ada958.

Revert "make initialCertificateImageUrl prop required"

72d2196

This reverts commit f13af0b.

Merge branch 'staging' of github.com:code-dot-org/code-dot-org into c…

5a47013

…ustomize-csf-blank

add ui tests for csf certificate

07d60e4

fix coursea congrats url

b1fd458

specify experiment for pegasus congrats page also

eec3192

use isHocTutorial to personalize csf certificate

7f7530c

ensure csf certificate redirect in eyes tests

6b5f4fc

set isHocTutorial in CertificateTest

54903d0

davidsbailey requested review from a team June 15, 2022 03:16

davidsbailey marked this pull request as ready for review June 15, 2022 03:16

davidsbailey mentioned this pull request Jun 16, 2022

show custom certificate for 20-hour course #46878

Merged

Merge branch 'staging' of github.com:code-dot-org/code-dot-org into c…

82b7eaf

…ustomize-csf-blank

jamescodeorg approved these changes Jun 17, 2022

View reviewed changes

megcrenshaw reviewed Jun 21, 2022

View reviewed changes

megcrenshaw approved these changes Jun 21, 2022

View reviewed changes

davidsbailey merged commit 57c6c4f into staging Jun 21, 2022

davidsbailey deleted the customize-csf-blank branch June 21, 2022 16:21

davidsbailey mentioned this pull request Jun 23, 2022

cleanup: extract defaultProps and make initialCertificateImageUrl required #46973

Merged

davidsbailey added the move-congrats-to-dashboard label Oct 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

write CSF course name onto blank certificate #46829

write CSF course name onto blank certificate #46829

davidsbailey commented Jun 10, 2022 •

edited

megcrenshaw commented Jun 16, 2022 •

edited

jamescodeorg left a comment

davidsbailey commented Jun 17, 2022 •

edited

davidsbailey commented Jun 18, 2022

megcrenshaw commented Jun 21, 2022

megcrenshaw Jun 21, 2022

megcrenshaw Jun 21, 2022

megcrenshaw left a comment

davidsbailey commented Jun 21, 2022

write CSF course name onto blank certificate #46829

write CSF course name onto blank certificate #46829

Conversation

davidsbailey commented Jun 10, 2022 • edited

Background

Description

Screenshots

Testing story

Follow-up work

megcrenshaw commented Jun 16, 2022 • edited

jamescodeorg left a comment

Choose a reason for hiding this comment

davidsbailey commented Jun 17, 2022 • edited

davidsbailey commented Jun 18, 2022

megcrenshaw commented Jun 21, 2022

megcrenshaw Jun 21, 2022

Choose a reason for hiding this comment

megcrenshaw Jun 21, 2022

Choose a reason for hiding this comment

megcrenshaw left a comment

Choose a reason for hiding this comment

davidsbailey commented Jun 21, 2022

davidsbailey commented Jun 10, 2022 •

edited

megcrenshaw commented Jun 16, 2022 •

edited

davidsbailey commented Jun 17, 2022 •

edited