Translate display names and descriptions for lesson extras

[hacodeorg]

FND-1467
This change does 2 things

1. Adds level's description to the i18n pipeline
2. Renders translated level's display names and descriptions correctly in the lesson extras view (or stage_extras view).

Before (https://studio.code.org/s/coursef-2020/stage/3/extras/lang/es-mx)

After (on localhost)

Testing story

• Ran sync-in.rb to produce i18n/locales/source/course_content/2020/coursef-2020.json below. Verified it could extract the level's display_name and bubble_choice_description.

  {
    "https://studio.code.org/s/coursef-2020/stage/3/extras?level_name=spritelab_extras_repeat": {
      "display_name": "Lots of sprites!",
      "bubble_choice_description": "Create many matching sprites quickly using loops!",
    }
  }

• Created a fake sync-down result at i18n/locales/es-MX/course_content/2020/coursef-2020.json with translations

  {
    "https://studio.code.org/s/coursef-2020/stage/3/extras?level_name=spritelab_extras_repeat": {
      "display_name": "es-MX translated display name",
      "bubble_choice_description": "es-MX translated bubble choice description",
    }
  }

• Ran sync-out.rb and verified that the display name and description are distributed correctly to dashboard/config/locales/display_name.es-MX.json

  {
    "es-MX": {
      "data": {
        "display_name": {
          "spritelab_extras_repeat": "es-MX translated display name"
        }
      }
    }
  }

  and dashboard/config/locales/bubble_choice_description.es-MX.json.

  {
    "es-MX": {
      "data": {
        "bubble_choice_description": {
          "spritelab_extras_repeat": "es-MX translated bubble choice description"
        }
      }
    }
  }

• Verified that lesson extra were displayed correctly in different languages

  • en-US view should be in English: http://localhost-studio.code.org:3000/s/coursef-2020/stage/3/extras/lang/en-us
  • es-MX view should be in Spanish: http://localhost-studio.code.org:3000/s/coursef-2020/stage/3/extras/lang/es-mx
  • el-GR view should be in English because we didn't have translations for Greece: http://localhost-studio.code.org:3000/s/coursef-2020/stage/3/extras/lang/el-gr

• Verified that the rendering code is safe against user-generated content.
  Rendering display_name:
  

  code-dot-org/apps/src/code-studio/components/SublevelCard.jsx

  Lines 193 to 199 in 97de9db

  	<a
  	href={this.getSublevelUrl()}
  	style={styles.title}
  	className="sublevel-card-title-uitest"
  	>
  	{sublevel.display_name}
  	</a>

  
  Rendering description:
  

  code-dot-org/apps/src/code-studio/components/SublevelCard.jsx

  Lines 202 to 207 in 97de9db

  	<div
  	style={styles.description}
  	className="sublevel-card-description-uitest"
  	>
  	{sublevel.description}
  	</div>

  
  Both are safe because we just treat them as plain strings.

PR Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[daynew]

Wow thank you for the thorough PR explanation!!!!

[dmcavoy]

Thanks for doing this Ha!