I18n maker setup list

apps/i18n/applab/en_us.json

@@ -343,27 +343,47 @@
   "dropletBlock_write_description": "Appends the specified text to the bottom of the document. The text can also be formatted as HTML.",
   "dropletBlock_write_param0_description": "The text or HTML you want appended to the bottom of your application",
   "finalLevel": "Congratulations! You have solved the final puzzle.",
+  "foundDevices": "Did not find a usable device on a serial port.\n\nFound devices: {deviceList}",
+  "legacy": "(Legacy)",
   "makeMyOwnApp": "Make my own app",
+  "makerSetupAcceptPrompt": "If a prompt asking for permission for Code Studio to connect to the Chrome App pops up, click Accept.",
+  "makerSetupAdafruitWindowsDrivers": "If your board is plugged in, you may be missing the **Adafruit Windows Drivers**. Follow the instructions [on this page](https://learn.adafruit.com/adafruit-feather-32u4-basic-proto/using-with-arduino-ide#install-drivers-windows-only) to install the drivers and try again.",
+  "makerSetupAppInstalled": "Chrome App installed",
+  "makerSetupBoardBadResponse": "We found a board but it didn't respond properly when we tried to connect to it.",
+  "makerSetupBrowserTitle": "Code.org Browser",
+  "makerSetupBrowserSupported": "Using a supported browser",
+  "makerSetupCheck": "Setup Check",
   "makerSetupCheckInternetConnection": "Please make sure you are connected to the internet, and [https://downloads.code.org](https://downloads.code.org/index.html) is reachable from your network.",
   "makerSetupChromebookPage": "Open this page ([{makerSetupPage}]({makerSetupPage})) on your Chromebook.",
   "makerSetupDownloadAndInstall": "Download and install the Code.org Maker App using the download button above.",
   "makerSetupDownloadProblem": "There was a problem getting your download link.",
   "makerSetupFetchingVersion": "Getting the latest version...",
   "makerSetupFollowInstructions": "Follow the instructions given by the interactive setup checklist.",
+  "makerSetupInstallSerialConnector": "Please install the [Code.org Serial Connector Chrome App]({webstoreURL}).",
+  "makerSetupInstallFirmata": "You should make sure it has the right firmware sketch installed. You can [install the Circuit Playground Firmata sketch with these instructions]({firmataURL}).",
+  "makerSetupLinuxAddDialout": "If you don't belong to 'dialout', you'll want to add yourself to that group:",
   "makerSetupLinuxAlternative": "Alternative Installers",
   "makerSetupLinuxAlternativeInstall": "[Install from source](https://github.com/code-dot-org/browser)",
+  "makerSetupLinuxGroupsCheck": "From your terminal, check which groups you belong to:",
+  "makerSetupLinuxRestart": "You may need to restart your computer for changes to take effect.",
+  "makerSetupLinuxSerialport": "We didn't have permission to open the serialport. Please make sure you are a member of the 'dialout' group.",
   "makerSetupMakerAppForChromebook": "Maker Toolkit for Chromebook",
   "makerSetupMakerAppForLinux": "Code.org Maker App for Linux",
   "makerSetupMakerAppForMac": "Code.org Maker App for Mac",
   "makerSetupMakerAppForWindows": "Code.org Maker App for Windows",
   "makerSetupPlugInBoard": "Plug in your board to start using it with App Lab!",
+  "makerSetupPlugInBoardCheck": "We couldn't detect a Circuit Playground board. Make sure your board is plugged in, and click: ",
+  "makerSetupRedetect": "Once it is installed, come back to this page and click the \"re-detect\" button, above.",
   "makerSetupSerialConnector": "Maker Toolkit on Chromebook does not use the Code.org Maker App. Instead, it depends on the [Code.org Serial Connector]({webstoreURL}) Chrome App.",
   "makerSetupSignIn": "Open up the Code.org Maker App and sign in to Code.org.",
+  "makerSetupUnsupportedBrowser": "Your current browser is not supported at this time. Please install the latest version of [Google Chrome](https://www.google.com/chrome/browser).",
+  "makerSetupVerifyComponents": "Oh no! Something unexpected went wrong while verifying the board components.",
   "makerSetupWindows7Drivers": "(Windows 7) Install the [Adafruit Windows drivers](https://learn.adafruit.com/adafruit-feather-32u4-basic-proto/using-with-arduino-ide#install-drivers-windows-only).",
   "manageAssets": "Click to view or update your images and sounds.",
   "nextLevel": "Congratulations! You have completed this puzzle.",
   "no": "No",
   "numBlocksNeeded": "This puzzle can be solved with %1 blocks.",
+  "redetect": "re-detect",
   "reinfFeedbackMsg": "Are you finished? With App Lab, you're in control - it's up to you to check your work and decide when you're done.",
   "repeatForever": "repeat forever",
   "repeatDo": "do",

apps/i18n/common/en_us.json

@@ -874,6 +874,7 @@
   "inProgress": "In progress",
   "inspireStudents": "Inspire students",
   "instructions": "Instructions",
+  "instructionsWithColon": "Instructions:",
   "intlAnnouncementSpecial2020Body": "Students can continue to learn at home while schools are closed. Take a Code Break with us, or see resources for students, parents, and teachers - including videos, fun tutorials, and projects! Most options only available in English.",
   "intlAnnouncementSpecial2020Heading": "More resources for learning at home",
   "invalidDataEntryTypeError": "Value must be boolean, number, string, `undefined`, or `null`. Make sure to include quotes for strings like \"this\". ",

apps/src/lib/kits/maker/portScanning.js

@@ -2,6 +2,7 @@
 /* global SerialPort */ // Maybe provided by the Code.org Browser
 import ChromeSerialPort from 'chrome-serialport';
 import {ConnectionFailedError} from './MakerError';
+import applabI18n from '@cdo/applab/locale';
 
 /**
  * @typedef {Object} SerialPortInfo
@@ -39,9 +40,7 @@ export function findPortWithViableDevice() {
       } else {
         return Promise.reject(
           new ConnectionFailedError(
-            'Did not find a usable device on a serial port. ' +
-              '\n\nFound devices: ' +
-              JSON.stringify(list)
+            applabI18n.foundDevices({deviceList: JSON.stringify(list)})
           )
         );
       }

apps/src/lib/kits/maker/ui/SetupChecklist.jsx

@@ -7,6 +7,7 @@ import trackEvent from '../../../../util/trackEvent';
 import SetupChecker from '../util/SetupChecker';
 import SafeMarkdown from '@cdo/apps/templates/SafeMarkdown';
 import i18n from '@cdo/locale';
+import applabI18n from '@cdo/applab/locale';
 import {
   isWindows,
   isChrome,
@@ -20,6 +21,7 @@ import experiments from '@cdo/apps/util/experiments';
 import _ from 'lodash';
 import yaml from 'js-yaml';
 import Button from '@cdo/apps/templates/Button';
+import {CHROME_APP_WEBSTORE_URL} from '../util/makerConstants';
 
 const STATUS_SUPPORTED_BROWSER = 'statusSupportedBrowser';
 const STATUS_APP_INSTALLED = 'statusAppInstalled';
@@ -198,44 +200,40 @@ export default class SetupChecklist extends Component {
       // Maker Toolkit Standalone App
       return (
         <ValidationStep
-          stepName="Code.org Browser"
+          stepName={applabI18n.makerSetupBrowserTitle()}
           stepStatus={this.state[STATUS_SUPPORTED_BROWSER]}
         />
       );
     } else if (isChromeOS() || isChrome()) {
       // Chromebooks - Chrome App
       return (
         <ValidationStep
-          stepName={'Chrome App installed' + (isChromeOS() ? '' : ' (Legacy)')}
+          stepName={
+            applabI18n.makerSetupAppInstalled() +
+            (isChromeOS() ? '' : applabI18n.legacy())
+          }
           stepStatus={this.state[STATUS_APP_INSTALLED]}
         >
-          Please install the{' '}
-          <a
-            href="https://chrome.google.com/webstore/detail/codeorg-serial-connector/ncmmhcpckfejllekofcacodljhdhibkg"
-            target="_blank"
-          >
-            Code.org Serial Connector Chrome App
-          </a>
-          .
+          <SafeMarkdown
+            markdown={applabI18n.makerSetupInstallSerialConnector({
+              webstoreURL: CHROME_APP_WEBSTORE_URL
+            })}
+          />
           <br />
-          Once it is installed, come back to this page and click the "re-detect"
-          button, above.
+          {applabI18n.makerSetupRedetect()}
           <br />
-          If a prompt asking for permission for Code Studio to connect to the
-          Chrome App pops up, click Accept.
+          {applabI18n.makerSetupAcceptPrompt()}
           {this.contactSupport()}
         </ValidationStep>
       );
     } else {
       // Unsupported Browser
       return (
         <ValidationStep
-          stepName="Using a supported browser"
+          stepName={applabI18n.makerSetupBrowserSupported()}
           stepStatus={Status.FAILED}
         >
-          Your current browser is not supported at this time. Please install the
-          latest version of{' '}
-          <a href="https://www.google.com/chrome/browser/">Google Chrome</a>.
+          <SafeMarkdown markdown={applabI18n.makerSetupUnsupportedBrowser()} />
         </ValidationStep>
       );
     }
@@ -245,6 +243,21 @@ export default class SetupChecklist extends Component {
     return <SafeMarkdown markdown={i18n.contactGeneralSupport()} />;
   }
 
+  installFirmwareSketch() {
+    return (
+      <div>
+        <SafeMarkdown
+          markdown={applabI18n.makerSetupInstallFirmata({
+            firmataURL:
+              this.state.boardTypeDetected === BOARD_TYPE.CLASSIC
+                ? 'https://learn.adafruit.com/circuit-playground-firmata/overview'
+                : 'https://learn.adafruit.com/adafruit-circuit-playground-express/code-org-csd'
+          })}
+        />
+      </div>
+    );
+  }
+
   render() {
     const linuxPermissionError =
       isLinux() &&
@@ -254,12 +267,12 @@ export default class SetupChecklist extends Component {
     return (
       <div>
         <h2>
-          Setup Check
+          {applabI18n.makerSetupCheck()}
           <input
             style={{marginLeft: 9, marginTop: -4}}
             className="btn"
             type="button"
-            value="re-detect"
+            value={applabI18n.redetect()}
             onClick={this.redetect.bind(this)}
             disabled={this.state.isDetecting}
           />
@@ -273,89 +286,44 @@ export default class SetupChecklist extends Component {
             {this.state.caughtError && this.state.caughtError.reason && (
               <pre>{this.state.caughtError.reason}</pre>
             )}
-            We couldn't detect a Circuit Playground board. Make sure your board
-            is plugged in, and click{' '}
+            {applabI18n.makerSetupPlugInBoardCheck()}
             <a href="#" onClick={this.redetect.bind(this)}>
-              re-detect
+              {applabI18n.redetect()}
             </a>
             .
             {isWindows() && (
-              <p>
-                If your board is plugged in, you may be missing the{' '}
-                <strong>Adafruit Windows Drivers</strong>. Follow the
-                instructions{' '}
-                <a href="https://learn.adafruit.com/adafruit-feather-32u4-basic-proto/using-with-arduino-ide#install-drivers-windows-only">
-                  on this page
-                </a>{' '}
-                to install the drivers and try again.
-              </p>
+              <SafeMarkdown
+                markdown={applabI18n.makerSetupAdafruitWindowsDrivers()}
+              />
             )}
             {this.contactSupport()}
           </ValidationStep>
           <ValidationStep
             stepStatus={this.state[STATUS_BOARD_CONNECT]}
             stepName={i18n.validationStepBoardConnectable()}
           >
-            We found a board but it didn't respond properly when we tried to
-            connect to it.
+            {applabI18n.makerSetupBoardBadResponse()}
             {linuxPermissionError && (
               <div>
-                <p>
-                  We didn't have permission to open the serialport. Please make
-                  sure you are a member of the 'dialout' group.
-                </p>
-                <p>From your terminal, check which groups you belong to:</p>
+                <p>{applabI18n.makerSetupLinuxSerialport()}</p>
+                <p>{applabI18n.makerSetupLinuxGroupsCheck()}</p>
                 <pre>groups $&#123;USER&#125;</pre>
-                <p>
-                  If you don't belong to 'dialout', you'll want to add yourself
-                  to that group:
-                </p>
+                <p>{applabI18n.makerSetupLinuxAddDialout()}</p>
                 <pre>sudo gpasswd --add $&#123;USER&#125; dialout</pre>
-                <p>
-                  You may need to restart your computer for changes to take
-                  effect.
-                </p>
-              </div>
-            )}
-            {!linuxPermissionError && (
-              <div>
-                You should make sure it has the right firmware sketch installed.
-                You can{' '}
-                <a
-                  href={
-                    this.state.boardTypeDetected === BOARD_TYPE.CLASSIC
-                      ? 'https://learn.adafruit.com/circuit-playground-firmata/overview'
-                      : 'https://learn.adafruit.com/adafruit-circuit-playground-express/code-org-csd'
-                  }
-                >
-                  install the Circuit Playground Firmata sketch with these
-                  instructions
-                </a>
-                .
+                <p> {applabI18n.makerSetupLinuxRestart()} </p>
               </div>
             )}
+            {!linuxPermissionError && this.installFirmwareSketch()}
             {this.contactSupport()}
           </ValidationStep>
           <ValidationStep
             stepStatus={this.state[STATUS_BOARD_COMPONENTS]}
             stepName={i18n.validationStepBoardComponentsUsable()}
           >
-            Oh no! Something unexpected went wrong while verifying the board
-            components.
+            {applabI18n.makerSetupVerifyComponents()}
             <br />
-            You should make sure your board has the right firmware sketch
-            installed. You can{' '}
-            <a
-              href={
-                this.state.boardTypeDetected === BOARD_TYPE.CLASSIC
-                  ? 'https://learn.adafruit.com/circuit-playground-firmata/overview'
-                  : 'https://learn.adafruit.com/adafruit-circuit-playground-express/code-org-csd'
-              }
-            >
-              install the Circuit Playground Firmata sketch with these
-              instructions
-            </a>
-            .{this.contactSupport()}
+            {this.installFirmwareSketch()}
+            {this.contactSupport()}
           </ValidationStep>
           {experiments.isEnabled('flash-classic') &&
             this.state.boardTypeDetected !== BOARD_TYPE.OTHER && (

apps/src/lib/kits/maker/ui/SetupGuide.jsx

@@ -16,6 +16,7 @@ import {
 import Button from '../../../../templates/Button';
 import ToggleGroup from '../../../../templates/ToggleGroup';
 import FontAwesome from '../../../../templates/FontAwesome';
+import {CHROME_APP_WEBSTORE_URL} from '../util/makerConstants';
 
 const DOWNLOAD_PREFIX = 'https://downloads.code.org/maker/';
 const WINDOWS = 'windows';
@@ -146,7 +147,7 @@ class WindowsDownloads extends React.Component {
         )}
         {error && <FetchingLatestVersionError />}
         <div>
-          <h4>{i18n.instructions()}:</h4>
+          <h4>{i18n.instructionsWithColon()}</h4>
           <ol>
             <li>{applabI18n.makerSetupDownloadAndInstall()}</li>
             <li>
@@ -283,7 +284,7 @@ const FetchingLatestVersionError = () => (
 
 const SetupInstructions = () => (
   <div>
-    <h4>{i18n.instructions()}:</h4>
+    <h4>{i18n.instructionsWithColon()}</h4>
     <ol>
       <li>{applabI18n.makerSetupDownloadAndInstall()}</li>
       <li>{applabI18n.makerSetupSignIn()}</li>
@@ -292,8 +293,6 @@ const SetupInstructions = () => (
   </div>
 );
 
-const CHROME_APP_WEBSTORE_URL =
-  'https://chrome.google.com/webstore/detail/codeorg-serial-connector/ncmmhcpckfejllekofcacodljhdhibkg';
 const MAKER_SETUP_PAGE_URL = document.location.origin + '/maker/setup';
 
 class ChromebookInstructions extends React.Component {

apps/src/lib/kits/maker/util/makerConstants.js

@@ -0,0 +1,2 @@
+export const CHROME_APP_WEBSTORE_URL =
+  'https://chrome.google.com/webstore/detail/codeorg-serial-connector/ncmmhcpckfejllekofcacodljhdhibkg';