54 connector widget special chars

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## 0.2.5
 
 * Automatically activate server extension
+* Fixed error that broke `Delete` and `Connect` buttons on the Connector Widget
+when special characters were included in the connection alias
 
 ## 0.2.4
 

src/utils/helper-functions.ts

@@ -0,0 +1,22 @@
+/**
+ * Convert special characters to their ASCII number values.
+ * 
+ * @param str Input string to be processed.
+ * @returns Input string with special characters replaced with 
+ *          their ASCII values.
+ */
+export const specialToASCII = (str: string): string => {
+    let res = '';
+    for(let i = 0; i < str.length; i++) {
+        if(+str[i] || str[i].toLowerCase() !== str[i].toUpperCase()){
+            res += str[i];
+            continue;
+        }
+        else if (str[i] === ' ') {
+            res += '_';
+            continue;
+        }
+        res += str[i].charCodeAt(0);
+    };
+    return res;
+ };

src/widgets/connector.ts

@@ -6,6 +6,7 @@ import {
 
 import { MODULE_NAME, MODULE_VERSION } from '../version';
 
+import { specialToASCII } from '../utils/helper-functions';
 
 // Import the CSS
 import '../../style/connector.css';
@@ -155,7 +156,7 @@ export class ConnectorView extends DOMWidgetView {
         // Draw connection buttons
         connections.forEach((connection: Connection) => {
             const { name } = connection;
-            const name_without_spaces = name.replace(/ /g, "_");
+            const name_without_spaces = specialToASCII(name)
 
             const buttonContainer = document.createElement("DIV");
             buttonContainer.className = "connection-button-container";
@@ -339,7 +340,7 @@ export class ConnectorView extends DOMWidgetView {
         deleteConnectionMessage.querySelector(".actions").appendChild(deleteButton);
 
         // hide controllers
-        const deleteConnBtn = this.el.querySelector(`#deleteConnBtn_${connection["name"].replace(/ /g, "_")}`);
+        const deleteConnBtn = this.el.querySelector(`#deleteConnBtn_${specialToASCII(connection["name"])}`);
         const actionsContainer = <HTMLElement>deleteConnBtn.parentNode;
         actionsContainer.style.display = "none"
 
@@ -635,7 +636,7 @@ export class ConnectorView extends DOMWidgetView {
                 buttonEl.classList.add("secondary");
             });
 
-        const selectedButtonEl = (<HTMLButtonElement>this.el.querySelector(`#connBtn_${connectionName.replace(/ /g, "_")}`));
+        const selectedButtonEl = (<HTMLButtonElement>this.el.querySelector(`#connBtn_${specialToASCII(connectionName)}`));
         selectedButtonEl.innerText = "Connected";
         selectedButtonEl.classList.add("primary");
     }

ui-tests/tests/widget.test.ts

@@ -644,4 +644,51 @@ test('test error if edit connection with existing name', async ({ page }) => {
 
 
     await expect(page.locator('.user-error-message')).toContainText("A connection named 'default' already exists in your connections file");
-});
+});
+
+const specialAliases = [
+  {alias: 'db', id: 'db'},
+  {alias: 'db with space', id: 'db_with_space'},
+  {alias: 'db?', id: 'db63'},
+  {alias: 'db://', id: 'db584747'},
+  {alias: 'db! !', id: 'db33_33'},
+  {alias: ';db', id: '59db'},
+  {alias: ' db', id: '_db'},
+]
+
+for (const {alias, id} of specialAliases) {
+  test(`test delete button for aliases with special chars: ${alias}`, async ({ page }) => {
+    await displayWidget(page);
+
+    // create a new connection
+    await page.locator('#createNewConnection').click();
+    await page.locator('#connectionName').fill(alias);
+    await page.locator('#createConnectionFormButton').click();
+
+    // delete connection with special characters in alias
+    await page.locator(`#deleteConnBtn_${id}`).click();
+    await page.locator('#deleteConnectionButton').click();
+
+    expect(page.locator('#connectionsButtonsContainer')).toBeEmpty();
+
+  })
+}
+
+for (const {alias, id} of specialAliases) {
+  test(`test connect button for aliases with special chars: ${alias}`, async ({ page }) => {
+    // create default connection
+    await createDefaultConnection(page);
+
+    // create a new connection
+    await page.locator('#createNewConnection').click();
+    await page.locator('#connectionName').fill(alias);
+    await page.locator('#createConnectionFormButton').click();
+
+    // connect to default, then connect back to new connection
+    await page.locator('#connBtn_default').click();
+    await page.locator(`#connBtn_${id}`).click(); 
+
+    await page.locator(`#connBtn_${id}`).waitFor();
+    await expect(page.locator(`#connBtn_${id}`)).toContainText('Connected');
+  })
+}