Fix broken build and failing tests

.babelrc

@@ -13,7 +13,7 @@
       "@babel/plugin-syntax-jsx",
       "@babel/plugin-transform-modules-commonjs",
       ["@babel/plugin-transform-runtime", { "regenerator": true }],
-      "@babel/plugin-proposal-class-properties",
-      "@babel/plugin-proposal-object-rest-spread"
+      "@babel/plugin-transform-class-properties",
+      "@babel/plugin-transform-object-rest-spread"
     ]
   }

.github/workflows/cypress-workflow.yml

@@ -111,7 +111,7 @@ jobs:
       - name: Run OpenSearch Dashboards server
         run: |
           cd OpenSearch-Dashboards
-          yarn start --no-base-path --no-watch &
+          yarn start --no-base-path --no-watch --server.host="0.0.0.0" &
         shell: bash
 
       - name: Sleep until OSD server starts - windows
@@ -155,8 +155,9 @@ jobs:
         uses: cypress-io/github-action@v5
         with:
           working-directory: OpenSearch-Dashboards/plugins/dashboards-maps
-          command: yarn run cypress run --browser chrome
+          command: yarn run cypress run --browser electron
           wait-on: 'http://localhost:5601'
+          wait-on-timeout: 300
         env:
           CYPRESS_CACHE_FOLDER: ${{ matrix.cypress_cache_folder }}
 

CHANGELOG.md

@@ -20,4 +20,5 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Infrastructure
 ### Documentation
 ### Maintenance
+* Fix broken build and failing tests [#572](https://github.com/opensearch-project/dashboards-maps/pull/572)
 ### Refactoring

babel.config.js

@@ -10,8 +10,8 @@ module.exports = {
     require('@babel/preset-typescript'),
   ],
   plugins: [
-    require('@babel/plugin-proposal-class-properties'),
-    require('@babel/plugin-proposal-object-rest-spread'),
+    require('@babel/plugin-transform-class-properties'),
+    require('@babel/plugin-transform-object-rest-spread'),
     ['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }],
     [require('@babel/plugin-transform-runtime'), { regenerator: true }],
   ],

cypress.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
+  video: true,
   defaultCommandTimeout: 120000,
   env: {
     opensearch_url: 'localhost:9200',

cypress/e2e/documentsLayer.cy.js

@@ -36,9 +36,9 @@ describe('Documents layer', () => {
     cy.get(`button[testSubj="styleTab"]`).click();
     cy.contains('Fill color').click();
     cy.get(`button[aria-label="Select #E7664C as the color"]`).click();
-    cy.contains('Border color').click();
+    cy.wait(1000).contains('Border color').click();
     cy.get(`button[aria-label="Select #DA8B45 as the color"]`).click();
-    cy.get(`button[testSubj="settingsTab"]`).click();
+    cy.wait(1000).get(`button[testSubj="settingsTab"]`).click();
     cy.get('[name="layerName"]').clear().type('Documents layer 1');
     cy.get(`button[data-test-subj="updateButton"]`).click();
     cy.get('[data-test-subj="layerControlPanel"]').should('contain', 'Documents layer 1');

cypress/plugins/index.js

@@ -24,6 +24,13 @@
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
+  on('before:browser:launch', (browser = {}, launchOptions) => {
+    if (browser.family === 'chromium') {
+      launchOptions.args.push('--disable-dev-shm-usage');
+    }
+
+    return launchOptions;
+  });
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 };

public/components/__snapshots__/vector_upload_options.test.tsx.snap

@@ -75,7 +75,11 @@ Object {
                           viewBox="0 0 16 16"
                           width="16"
                           xmlns="http://www.w3.org/2000/svg"
-                        />
+                        >
+                          <path
+                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                          />
+                        </svg>
                         <div
                           class="euiFilePicker__promptText"
                         >
@@ -166,7 +170,7 @@ Object {
                   Map name guidleines:
                   <ul>
                     <li>
-                       Map name prefix must contain 1-250 characters. 
+                       Map name prefix must contain 1-250 characters.
                     </li>
                     <li>
                        Map name prefix must start with a-z.
@@ -294,7 +298,11 @@ Object {
                         viewBox="0 0 16 16"
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
-                      />
+                      >
+                        <path
+                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                        />
+                      </svg>
                       <div
                         class="euiFilePicker__promptText"
                       >
@@ -385,7 +393,7 @@ Object {
                 Map name guidleines:
                 <ul>
                   <li>
-                     Map name prefix must contain 1-250 characters. 
+                     Map name prefix must contain 1-250 characters.
                   </li>
                   <li>
                      Map name prefix must start with a-z.

public/components/toolbar/spatial_filter/__snapshots__/filter-by_shape.test.tsx.snap

@@ -73,7 +73,11 @@ exports[`render polygon renders filter by polygon option 1`] = `
           viewBox="0 0 16 16"
           width={16}
           xmlns="http://www.w3.org/2000/svg"
-        />
+        >
+          <path
+            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+          />
+        </svg>
       </button>
     </div>
   </div>

public/components/vector_upload_options.tsx

@@ -373,7 +373,7 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
         <EuiText size="xs" color="subdued" aria-label="map-name-guidelines-text">
           Map name guidleines:
           <ul>
-            <li> Map name prefix must contain 1-250 characters. </li>
+            <li> Map name prefix must contain 1-250 characters.</li>
             <li> Map name prefix must start with a-z.</li>
             <li> Valid characters are a-z, 0-9, - and _ .</li>
             <li>