added cypress e2e test, updated translation strings

Author: prusswan

cypress/e2e/local-file.cy.ts

@@ -0,0 +1,44 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("local file", () => {
+  const { when, get } = new MaputnikDriver();
+
+  beforeEach(() => {
+    when.setStyle("");
+  });
+
+  describe("PMTiles", () => {
+    it("valid file loads without error", () => {
+      const fileName = "polygon-z0.pmtiles"; // a small polygon located at Null Island
+
+      const stub = cy.stub();
+      cy.on('window:alert', stub);
+
+      get
+        .bySelector("file", "type")
+        .selectFile(`cypress/fixtures/${fileName}`, { force: true });
+      when.wait(200);
+      cy.then(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        expect(stub).to.not.have.been.called;
+      });
+    });
+
+    it("invalid file results in error", () => {
+      const fileName = "example-style.json";
+
+      const stub = cy.stub();
+      cy.on('window:alert', stub);
+
+      get
+        .bySelector("file", "type")
+        .selectFile(`cypress/fixtures/${fileName}`, { force: true });
+      when.wait(200);
+      cy.then(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        expect(stub).to.be.called;
+        expect(stub.getCall(0).args[0]).to.contain('File type is not supported');
+      });
+    })
+  });
+});

cypress/fixtures/polygon-z0.pmtiles

@@ -147,7 +147,9 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
       return e.errors.map(f => f.message).join("\n")
     }).join("\n");
     console.error("Dropzone file rejected:", errorMessageLine);
-    alert(errorMessageLine);
+
+    const alertMessage = this.props.t("File type is not supported");
+    alert(alertMessage);
   }
 
   render() {

src/components/AppToolbar.tsx

@@ -78,6 +78,13 @@ type MapMaplibreGlState = {
   pmtilesProtocol: Protocol | null;
 };
 
+interface Metadata {
+  name?: string;
+  type?: string;
+  tilestats?: unknown;
+  vector_layers: LayerSpecification[];
+}
+
 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
   static defaultProps = {
     onMapLoaded: () => {},
@@ -143,13 +150,13 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       this.state.pmtilesProtocol!.add(file); // this is necessary for non-HTTP sources
 
       if (map) {
-        file.getMetadata().then((metadata: any) => {
+        (file.getMetadata() as Promise<Metadata>).then(metadata => {
           const layerNames = metadata.vector_layers.map((e: LayerSpecification) => e.id);
 
           // used by maplibre-gl-inspect to pick up inspectable layers
           map.style.sourceCaches["source"]._source.vectorLayerIds = layerNames;
         }).catch( e => {
-          console.error(`Error in reading local PMTiles file: ${e}`);
+          console.error(`${this.props.t('Error in reading local PMTiles file')}: ${e}`);
         });
       }
     }

src/components/MapMaplibreGl.tsx

@@ -18,6 +18,7 @@
   "Convert property to data function": "Eigenschaft in eine Datenfunktion umwandeln",
   "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "Ebene <1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
   "switch to layer": "zur Ebene wechseln",
+  "File type is not supported": "__STRING_NOT_TRANSLATED__",
   "Map": "Karte",
   "Inspect": "Untersuchen",
   "Deuteranopia filter": "Deuteranopie-Filter",
@@ -73,6 +74,7 @@
   "Collapse": "Einklappen",
   "Expand": "Ausklappen",
   "Add Layer": "Ebene hinzufügen",
+  "Error in reading local PMTiles file": "__STRING_NOT_TRANSLATED__",
   "Search": "Suche",
   "Zoom:": "Zoom:",
   "Close popup": "Popup schließen",

src/locales/de/translation.json

@@ -18,6 +18,7 @@
   "Convert property to data function": "Convertir la propriété en fonction de données",
   "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "Calque <1>{formatLayerId(layerId)}</1> : {parsed.data.message}",
   "switch to layer": "changer de calque",
+  "File type is not supported": "__STRING_NOT_TRANSLATED__",
   "Map": "Carte",
   "Inspect": "Inspecter",
   "Deuteranopia filter": "Filtre Deutéranopie",
@@ -73,6 +74,7 @@
   "Collapse": "Réduire",
   "Expand": "Développer",
   "Add Layer": "Ajouter un calque",
+  "Error in reading local PMTiles file": "__STRING_NOT_TRANSLATED__",
   "Search": "Recherche",
   "Zoom:": "Zoom :",
   "Close popup": "Fermer la fenêtre",

src/locales/fr/translation.json

@@ -18,6 +18,7 @@
   "Convert property to data function": "המרה לפונקציית מידע",
   "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "שכבה <1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
   "switch to layer": "שינוי לשכבה",
+  "File type is not supported": "__STRING_NOT_TRANSLATED__",
   "Map": "מפה",
   "Inspect": "בדיקה",
   "Deuteranopia filter": "Deuteranopia filter",
@@ -73,6 +74,7 @@
   "Collapse": "הקטנה",
   "Expand": "הגדלה",
   "Add Layer": "הוספת שכבה",
+  "Error in reading local PMTiles file": "__STRING_NOT_TRANSLATED__",
   "Search": "חיפוש",
   "Zoom:": "זום:",
   "Close popup": "סגירת החלון",

src/locales/he/translation.json

@@ -18,6 +18,7 @@
   "Convert property to data function": "プロパティをデータ関数に変換する",
   "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "レイヤ<1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
   "switch to layer": "レイヤへ切替",
+  "File type is not supported": "__STRING_NOT_TRANSLATED__",
   "Map": "地図",
   "Inspect": "検査",
   "Deuteranopia filter": "緑色盲フィルタ",
@@ -73,6 +74,7 @@
   "Collapse": "畳む",
   "Expand": "展開",
   "Add Layer": "レイヤー追加",
+  "Error in reading local PMTiles file": "__STRING_NOT_TRANSLATED__",
   "Search": "検索",
   "Zoom:": "ズーム:",
   "Close popup": "ポップアップを閉じる",

src/locales/ja/translation.json

@@ -18,6 +18,7 @@
   "Convert property to data function": "将属性转换为数据函数",
   "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "图层<1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
   "switch to layer": "切换到图层",
+  "File type is not supported": "__STRING_NOT_TRANSLATED__",
   "Map": "地图",
   "Inspect": "检查",
   "Deuteranopia filter": "绿色盲滤镜",
@@ -73,6 +74,7 @@
   "Collapse": "折叠",
   "Expand": "展开",
   "Add Layer": "添加图层",
+  "Error in reading local PMTiles file": "__STRING_NOT_TRANSLATED__",
   "Search": "搜索",
   "Zoom:": "缩放:",
   "Close popup": "关闭弹出窗口",