Load/Save Modal: Add warning when unknown file extension or .mpy files are loaded

editor.html

@@ -347,8 +347,8 @@ <h2 id="flashing-text">Flashing micro:bit</h2>
         </div>
         <div id="modal-msg-overlay-container" class="modal-overlay-container modal-msg-overlay-container">
           <div id="modal-msg-overlay" class="modal-overlay">
-            <a class="vex-close" id="modal-msg-close" onclick="$('#modal-msg-overlay-container').hide()"></a>
-            <div>
+            <a class="vex-close modal-close" onclick="$('#modal-msg-overlay-container').hide()"></a>
+            <div id="modal-msg-text">
               <h2 id="modal-msg-title"></h2>
               <div id="modal-msg-content"></div>
               <div id="modal-msg-links" class="modal-msg-links"></div>

lang/en.js

@@ -122,8 +122,10 @@ var language = {
     'files-title' : 'Project Files',
     'help-button' : 'Files Help',
     'file-help-text' : 'The Project Files area shows you the files included in your program and lets you add or remove external python modules and other files. Find out more in the ',
-    'help-link' : 'Python Editor help documentation'
-
+    'help-link' : 'Python Editor help documentation',
+    'invalid-file-title' : 'Invalid File Type',
+    'mpy-warning' : 'This version of the Python Editor doesn\'t currently support adding .mpy files.',
+    'extension-warning' : 'The Python Editor can only load files with the .hex or .py extensions.'
   },
   'static-strings': {
     'buttons': {

lang/es.js

@@ -123,7 +123,10 @@ var language = {
     'files-title' : 'Project Files',
     'help-button' : 'Files Help',
     'file-help-text' : 'The Project Files area shows you the files included in your program and lets you add or remove external python modules and other files. Find out more in the ',
-    'help-link' : 'Python Editor help documentation'
+    'help-link' : 'Python Editor help documentation',
+    'invalid-file-title' : 'Invalid File Type',
+    'mpy-warning' : 'This version of the Python Editor doesn\'t currently support adding .mpy files.',
+    'extension-warning' : 'The Python Editor can only load files with the .hex or .py extensions.'
   },
   'static-strings': {
     'buttons': {

lang/pl.js

@@ -122,7 +122,10 @@ var language = {
       'files-title' : 'Project Files',
       'help-button' : 'Files Help',
       'file-help-text' : 'The Project Files area shows you the files included in your program and lets you add or remove external python modules and other files. Find out more in the ',
-      'help-link' : 'Python Editor help documentation'
+      'help-link' : 'Python Editor help documentation',
+      'invalid-file-title' : 'Invalid File Type',
+      'mpy-warning' : 'This version of the Python Editor doesn\'t currently support adding .mpy files.',
+      'extension-warning' : 'The Python Editor can only load files with the .hex or .py extensions.'
    },
    'static-strings': {
       'buttons': {

python-main.js

@@ -915,6 +915,14 @@ function web_editor(config) {
         }
     }
 
+    function invalidFileWarning(fileType){
+        if(fileType=="mpy"){
+            modalMsg(config['translate']['load']['invalid-file-title'],config['translate']['load']['mpy-warning'],"");
+        }else{
+            modalMsg(config['translate']['load']['invalid-file-title'], config['translate']['load']['extension-warning'],"");
+        }
+    }
+
     // Describes what to do when the save/load button is clicked.
     function doFiles() {
         var template = $('#files-template').html();
@@ -1001,6 +1009,8 @@ function web_editor(config) {
                                 loadHex(f.name, e.target.result);
                             };
                             reader.readAsText(f);
+                        } else{
+                            invalidFileWarning(ext);
                         }
                     }
                     inputFile.value = '';
@@ -1170,6 +1180,8 @@ function web_editor(config) {
                 loadHex(file.name, e.target.result);
             };
             reader.readAsText(file);
+        }else{
+            invalidFileWarning(ext);
         }
         $('#editor').focus();
     }
@@ -1511,17 +1523,17 @@ function web_editor(config) {
         $(overlayContainer).css("display","block");
         $("#modal-msg-title").text(title);
         $("#modal-msg-content").html(content); 
+        var modalLinks = [];
         if (links) {
-            var modalLinks = [];
             Object.keys(links).forEach(function(key) {
                 if (links[key] === "close") {
                     modalLinks.push('<a href="#" onclick = "$(\'' + overlayContainer + '\').hide()">Close</a>');
                 } else {
                     modalLinks.push('<a href="' + links[key] + '" target="_blank">' + key + '</a>');
                 }
             });
-            $("#modal-msg-links").html((modalLinks).join(' | '));
         }
+        $("#modal-msg-links").html((modalLinks).join(' | '));
     }
 
     function formatMenuContainer(parentButtonId, containerId) {

static/css/style.css

@@ -678,13 +678,21 @@ input:checked + .menu-switch-slider:before {
 }
 
 .modal-msg-overlay-container {
-  text-align: left;
+  text-align: center;
 }
 
 #modal-msg-overlay{
+  text-align: left;
+  display: inline-block;
   position: relative;
   top: 19%;
-  width: 70%;
+  margin: 0 auto;
+  padding: 24px;
+
+}
+
+#modal-msg-text{
+  padding: 20px 20px 10px 20px;
 }
 
 .modal-overlay {
@@ -701,11 +709,9 @@ input:checked + .menu-switch-slider:before {
   font-weight: bold;
 
 }
-.modal-overlay-container #modal-msg-close{
+.modal-close{
   color:#336699;
   content: "\00D7";
-  height: 80px;
-  width: 80px;
   text-align: right;
   font-size: 40px;
   float:right;
@@ -714,7 +720,7 @@ input:checked + .menu-switch-slider:before {
   top: -10px;
 }
 
-#modal-msg-close:hover{
+.modal-close:hover{
   color:#febf2e;
 }
 

tests/spec/puppeteer-fs-spec.js

@@ -231,5 +231,5 @@ describe("Puppeteer filesystem tests for the Python Editor.", function() {
         await page.waitFor(500);
         const fileName = await page.evaluate("document.getElementById('script-name').value");
         expect(fileName).toContain("samplefile");
-    })
+    });
 });

tests/spec/puppeteer-spec.js

@@ -174,4 +174,28 @@ describe("Puppeteer basic tests for the Python Editor.", function() {
 
         expect(fileExists).toBeTruthy();
     });
+
+    it("Correctly handles an mpy file", async function(){
+        const page = await browser.newPage();
+        await page.goto("http://localhost:5000/editor.html");
+        await page.click("#command-files");
+        let fileInput = await page.$("#file-upload-input");
+        await fileInput.uploadFile("./spec/test-files/samplempyfile.mpy");
+        const modalContent = await page.evaluate("$('#modal-msg-content').text()");
+        const modalDisplay = await page.evaluate("$('#modal-msg-overlay-container').css('display')");
+        expect(modalContent).toContain("This version of the Python Editor doesn\'t currently support adding .mpy files.");
+        expect(modalDisplay).toContain("block");
+    });
+
+    it("Correctly handles a file with an invalid extension", async function(){
+        const page = await browser.newPage();
+        await page.goto("http://localhost:5000/editor.html");
+        await page.click("#command-files");
+        let fileInput = await page.$("#file-upload-input");
+        await fileInput.uploadFile("./spec/test-files/sampletxtfile.txt");
+        const modalContent = await page.evaluate("$('#modal-msg-content').text()");
+        const modalDisplay = await page.evaluate("$('#modal-msg-overlay-container').css('display')");
+        expect(modalContent).toContain("The Python Editor can only load files with the .hex or .py extensions.");
+        expect(modalDisplay).toContain("block");
+    });
 });

tests/spec/test-files/samplempyfile.mpy

@@ -0,0 +1,13 @@
+# push the USR button on the pyboard to flash the LEDs!
+# try using the reset button on the pyboard to quit this script!
+# switch callback not yet supported.
+
+import time
+import pyb
+
+while True:
+    if pyb.Switch().value():
+        pyb.LED(1).on()
+    else:
+        pyb.LED(1).off()
+    time.sleep_ms(50)

tests/spec/test-files/sampletxtfile.txt

@@ -0,0 +1 @@
+This is a sample text file