Merge branch 'main' into input-icon-support

addons/rose/metadata.json

@@ -0,0 +1,5 @@
+{
+  "versions": {
+    "main": "https://boundary-ui-storybook.vercel.app"
+  }
+}

addons/rose/package.json

@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "build:development": "ember build",
-    "build": "ember build --environment=production",
+    "build": "ember build --environment=production && cp metadata.json dist/metadata.json",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",

ui/desktop/tests/end2end/authentication.spec.js

@@ -1,14 +1,14 @@
 /* eslint-disable no-undef */
 const { test, expect } = require('@playwright/test');
 const { _electron: electron } = require('playwright');
-const {
-  generateScreenshotPath,
-  returnExecutablePath,
-} = require('./test-helpers');
+const helpers = require('./test-helpers');
 
 let electronApp = null;
 const screenshotsDirectory = 'authentication/';
-const executablePath = returnExecutablePath(process.platform, process.arch);
+const executablePath = helpers.returnExecutablePath(
+  process.platform,
+  process.arch
+);
 
 test.beforeEach(async () => {
   electronApp = await electron.launch({
@@ -29,6 +29,7 @@ test.describe('Authentication end to end test suite', async () => {
   test.describe('user/password authentication test suite', async () => {
     test('Authenticates using user and password method and deauthenticates ', async () => {
       const boundaryWindow = await electronApp.firstWindow(); // The window that contains the app.
+
       // Override local storage origin
       await boundaryWindow.evaluate(() =>
         window.localStorage.setItem('desktop:origin', null)
@@ -42,31 +43,32 @@ test.describe('Authentication end to end test suite', async () => {
       await boundaryWindow.fill('[name=host]', originValue);
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath(screenshotsDirectory, 'fillOrigin'),
+        path: helpers.generateScreenshotPath(
+          screenshotsDirectory,
+          'fillOrigin'
+        ),
         fullPage: true,
       });
 
       // Click the submit button
-      // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
-      // More info about it here: https://github.com/microsoft/playwright/issues/1808
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await helpers.click(boundaryWindow, 'button[type="submit"]');
+
       // Fill user & password
       await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
       await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath(screenshotsDirectory, 'fillUserPassword'),
+        path: helpers.generateScreenshotPath(
+          screenshotsDirectory,
+          'fillUserPassword'
+        ),
         fullPage: true,
       });
 
       // Click submit
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await helpers.click(boundaryWindow, 'button[type="submit"]');
 
       // Check we are in Targets
       await boundaryWindow.waitForURL('**/#/scopes/global/projects/targets');
@@ -75,39 +77,45 @@ test.describe('Authentication end to end test suite', async () => {
 
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath(screenshotsDirectory, 'afterLogin'),
+        path: helpers.generateScreenshotPath(
+          screenshotsDirectory,
+          'afterLogin'
+        ),
         fullPage: true,
       });
 
       // Opens user dropdown
       await boundaryWindow.waitForSelector('.rose-header-utilities');
-      await boundaryWindow.$eval('.rose-header-utilities summary', (element) =>
-        element.click()
-      );
+      await helpers.click(boundaryWindow, '.rose-header-utilities summary');
 
       // User dropdown is visible
       await boundaryWindow.waitForSelector('details[open]');
       expect(await boundaryWindow.isVisible('details'));
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath(screenshotsDirectory, 'userDropdown'),
+        path: helpers.generateScreenshotPath(
+          screenshotsDirectory,
+          'userDropdown'
+        ),
         fullPage: true,
       });
 
       // Clicks Deauthenticate
       await boundaryWindow.waitForSelector('text="Deauthenticate"');
-      await boundaryWindow.$eval('text="Deauthenticate"', (element) =>
-        element.click()
-      );
+      await helpers.click(boundaryWindow, 'text="Deauthenticate"');
 
       // Makes sure we are log out
       await boundaryWindow.waitForSelector('main >> div.branded-card');
       expect(await boundaryWindow.isVisible('h2 >> text=Authenticate'));
-      // ToDo: create an assertion checking localstorage ember_simple_auth-session key
+      // TODO: create an assertion checking localstorage ember_simple_auth-session key
+      // TODO: try to check we are log out by url
 
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath(screenshotsDirectory, 'afterLogout'),
+        path: helpers.generateScreenshotPath(
+          screenshotsDirectory,
+          'afterLogout'
+        ),
         fullPage: true,
       });
     });
@@ -126,26 +134,24 @@ test.describe('Authentication end to end test suite', async () => {
       await boundaryWindow.fill('[name=host]', originValue);
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath(screenshotsDirectory, 'fillOrigin'),
+        path: helpers.generateScreenshotPath(
+          screenshotsDirectory,
+          'fillOrigin'
+        ),
         fullPage: true,
       });
 
       // Click the submit button
-      // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
-      // More info about it here: https://github.com/microsoft/playwright/issues/1808
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await helpers.click(boundaryWindow, 'button[type="submit"]');
+
       // Fill user & password
       await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
       await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
 
       // Click submit
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await helpers.click(boundaryWindow, 'button[type="submit"]');
 
       // Wait for the notification
       await boundaryWindow.waitForSelector('.rose-notification-body');
@@ -156,7 +162,7 @@ test.describe('Authentication end to end test suite', async () => {
 
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath(
+        path: helpers.generateScreenshotPath(
           screenshotsDirectory,
           'notificationFailed'
         ),
@@ -192,15 +198,11 @@ test.describe('Authentication end to end test suite', async () => {
       // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
       // More info about it here: https://github.com/microsoft/playwright/issues/1808
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await helpers.click(boundaryWindow, 'button[type="submit"]');
 
       // Click tab OIDC
       await boundaryWindow.waitForSelector('main >> div.branded-card >> nav');
-      await boundaryWindow.$eval('a:text("OIDC")', (element) => {
-        element.click();
-      });
+      await helpers.click(boundaryWindow, 'a:text("OIDC")');
 
       await boundaryWindow.pause();
     });

ui/desktop/tests/end2end/targets.spec.js

@@ -1,14 +1,14 @@
 /* eslint-disable no-undef */
 const { test, expect } = require('@playwright/test');
 const { _electron: electron } = require('playwright');
-const {
-  generateScreenshotPath,
-  returnExecutablePath,
-} = require('./test-helpers');
+const helpers = require('./test-helpers');
 
 let electronApp = null;
 const screenshotsDirectory = 'targets/';
-const executablePath = returnExecutablePath(process.platform, process.arch);
+const executablePath = helpers.returnExecutablePath(
+  process.platform,
+  process.arch
+);
 
 test.beforeEach(async () => {
   electronApp = await electron.launch({
@@ -42,21 +42,16 @@ test.describe('Targets end to end test suite', async () => {
     await boundaryWindow.fill('[name=host]', originValue);
 
     // Click the submit button
-    // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
-    // More info about it here: https://github.com/microsoft/playwright/issues/1808
     await boundaryWindow.waitForSelector('button[type="submit"]');
-    await boundaryWindow.$eval('button[type="submit"]', (element) =>
-      element.click()
-    );
+    await helpers.click(boundaryWindow, 'button[type="submit"]');
+
     // Fill user & password
     await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
     await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
 
     // Click submit
     await boundaryWindow.waitForSelector('button[type="submit"]');
-    await boundaryWindow.$eval('button[type="submit"]', (element) =>
-      element.click()
-    );
+    await helpers.click(boundaryWindow, 'button[type="submit"]');
 
     // Check we are in Targets
     await boundaryWindow.waitForURL('**/#/scopes/global/projects/targets');
@@ -65,16 +60,16 @@ test.describe('Targets end to end test suite', async () => {
 
     // Click connect to a target
     await boundaryWindow.waitForSelector('table.rose-table');
-    await boundaryWindow.$eval(
-      'table.rose-table >> tbody >> tr >> nth=0 >> button >> text=Connect',
-      (element) => element.click()
+    await helpers.click(
+      boundaryWindow,
+      'table.rose-table >> tbody >> tr >> nth=0 >> button >> text=Connect'
     );
 
     // The target popup opens
     await boundaryWindow.waitForSelector('section.dialog-detail');
     // Take screenshot
     await boundaryWindow.screenshot({
-      path: generateScreenshotPath(
+      path: helpers.generateScreenshotPath(
         screenshotsDirectory,
         'targetConnectionDetails'
       ),
@@ -82,9 +77,9 @@ test.describe('Targets end to end test suite', async () => {
     });
     // Click copyable in popup
     // TODO: read clipboard value. Running into issues reading clipboard, so will take a shortcut for now
-    await boundaryWindow.$eval(
-      'section.dialog-detail >> div.rose-dialog-body >> button',
-      (element) => element.click()
+    await helpers.click(
+      boundaryWindow,
+      'section.dialog-detail >> div.rose-dialog-body >> button'
     );
     // Temporary: persist proxy from target
     const persistedProxy = await boundaryWindow.innerText(
@@ -92,21 +87,21 @@ test.describe('Targets end to end test suite', async () => {
     );
 
     // Click close popup
-    await boundaryWindow.$eval(
-      'section.dialog-detail >> footer >> button',
-      (element) => element.click()
+    await helpers.click(
+      boundaryWindow,
+      'section.dialog-detail >> footer >> button'
     );
 
     // On left nav menu, click Sessions
     await boundaryWindow.waitForSelector('section.rose-layout-global >> aside');
-    await boundaryWindow.$eval(
-      'section.rose-layout-global >> aside >> nav >> a >> text=Sessions',
-      (element) => element.click()
+    await helpers.click(
+      boundaryWindow,
+      'section.rose-layout-global >> aside >> nav >> a >> text=Sessions'
     );
 
     // Take screenshot
     await boundaryWindow.screenshot({
-      path: generateScreenshotPath(screenshotsDirectory, 'sessions'),
+      path: helpers.generateScreenshotPath(screenshotsDirectory, 'sessions'),
       fullPage: true,
     });
 

ui/desktop/tests/end2end/test-helpers.js

@@ -42,3 +42,13 @@ exports.returnExecutablePath = (platform, arch) => {
     console.error(error);
   }
 };
+
+/**
+ * Performs a click with a workarouind due to an error with plain playwright click.
+ * More info about the issue here: https://github.com/microsoft/playwright/issues/1808
+ * @param {*} appWindow The current electron window.
+ * @param {*} selector The DOM element selector.
+ */
+exports.click = async (appWindow, selector) => {
+  await appWindow.$eval(selector, (element) => element.click());
+};