Use i18n functionality for button text

Author: greenberga

locales/en/translation.json

@@ -61,7 +61,10 @@
         "css": "CSS",
         "javascript": "JS"
       },
-      "output": "Output"
+      "output": "Output",
+      "instructions": {
+        "cancel": "Cancel"
+      }
     }
   },
   "utility": {

src/components/InstructionsEditor.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {t} from 'i18next';
 
 export default function InstructionsEditor({instructions, onCancelEditing}) {
   return (
     <div className="instructions-editor">
       <div className="instructions-editor-menu">
-        <button onClick={onCancelEditing}>Cancel</button>
+        <button onClick={onCancelEditing}>
+          {t('workspace.components.instructions.cancel')}
+        </button>
       </div>
       <pre contentEditable>
         {instructions}