Manage Students - convert explanatory text to react #22466
Conversation
caleybrock
force-pushed
the
manage-stds-cleanup
branch
from
090a56e
to
c75df4c
Compare
| <p> | ||
| {i18n.joinSectionAsk()} | ||
| <a target="_blank" href={`${window.location.origin}/join/${sectionCode}`}> | ||
| {`http://localhost-studio.code.org:3000/join/${sectionCode}`} |
There was a problem hiding this comment.
I'm struggling to figure out how to make these URLs dynamic based on environment, since there are both studio and code.org urls and this is from apps in pegasus. Any ideas are welcome.
There was a problem hiding this comment.
Generally speaking, you'll want to find the right method in deployment.rb (possibly dashboard_hostname), pass it into your js entry point in the data tag on the script element, and then pass it through props into your react component. I'll try to dig up an example.
There was a problem hiding this comment.
looks like studioUrlPrefix is already available here:
apps/i18n/common/en_us.json
Outdated
| @@ -573,6 +573,8 @@ | |||
| "instructions": "Instructions", | |||
| "joinASection": "Join a section", | |||
| "joinSection": "Join section", | |||
| "joinSectionExplination": "Ask your students to join your section by going to this link and entering the section code (above): ", | |||
There was a problem hiding this comment.
Not sure what a better way to localize these strings would be - I've just made it so the links are at the end and generated in JS.
There was a problem hiding this comment.
We've run into similar problems with links in the context of strings, and this is consistent with solutions I've seen in the past.
| // Because 'temporary' students are included in $scope.section.students | ||
| // before we reach this save() action, if _all_ students are new | ||
| // students then we had zero saved students to begin with. | ||
| // TODO: Once everything is React this should become unnecessary. |
There was a problem hiding this comment.
Removing these TODOs was the main goal of this re-write PR.
|
Note to self: change base back to staging once parent PR is merged. |
caleybrock
changed the title
| {(loginType === SectionLoginType.word || loginType === SectionLoginType.picture) && | ||
| <div> | ||
| <p> | ||
| {i18n.sectionCode() + ': ' + sectionCode} |
There was a problem hiding this comment.
Is there a reason i18n string sometimes include the : and sometimes you add them in line?
There was a problem hiding this comment.
Mainly because I wanted to use this string that already existed.
|
I'm going to create a way to make relative URLs in pegasus in a separate PR and then come back and update this page. For now, I've hardcoded the production urls into the UI. |
apps/i18n/common/en_us.json
Outdated
| @@ -573,6 +573,8 @@ | |||
| "instructions": "Instructions", | |||
| "joinASection": "Join a section", | |||
| "joinSection": "Join section", | |||
| "joinSectionExplination": "Ask your students to join your section by going to this link and entering the section code (above): ", | |||
There was a problem hiding this comment.
spelling: "Explanation", here and in a few other places
|
+1 to finding a good way to get relative links in pegasus. I had the same problem earlier: |
|
I got URLs working via Dave's suggestion. Still not a general solution, but it works for this item. Thanks for the help! |
Summary
As I was refactoring, I noticed we had 3 react dom mounting points for the manage students table, which seemed unnecessary. One for oauth, one for the table itself, and one for the login type button.
This PR adds the login type button to the main table rendering, and also builds out the rest of the explanatory text below the table in react (and deletes the angular/haml version). The text felt disorganized and hard to read, so I made section headings to be more descriptive of the information. Screenshots show the before and after differences.
Getting a little tripped up with links and strings, and would appreciate advice.
These are UI changes, so I'll also need approval from @poorvasingal
Screenshots
Email sections
Before
After
Picture and word sections
Before
After