test: add pop-up notification test

packages/e2e-tests/fixtures/apps/mattermost/add-mattermost-connection-modal.js

@@ -0,0 +1,25 @@
+const { BasePage } = require('../../base-page');
+
+export class AddMattermostConnectionModal extends BasePage {
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.clientIdInput = page.getByTestId('clientId-text');
+    this.clientIdSecretInput = page.getByTestId('clientSecret-text');
+    this.instanceUrlInput = page.getByTestId("instanceUrl-text");
+    this.submitButton = page.getByTestId('create-connection-button');
+  }
+
+  async fillConnectionForm() {
+    await this.instanceUrlInput.fill('https://mattermost.com');
+    await this.clientIdInput.fill('aaa');
+    await this.clientIdSecretInput.fill('bbb');
+  }
+
+  async submitConnectionForm() {
+    await this.submitButton.click();
+  }
+}

packages/e2e-tests/fixtures/flow-editor-page.js

@@ -18,6 +18,7 @@ export class FlowEditorPage extends AuthenticatedPage {
     this.connectionAutocomplete = this.page.getByTestId(
       'choose-connection-autocomplete'
     );
+    this.addNewConnectionItem = this.page.getByText('Add new connection');
     this.testOutput = this.page.getByTestId('flow-test-substep-output');
     this.hasNoOutput = this.page.getByTestId('flow-test-substep-no-output');
     this.unpublishFlowButton = this.page.getByTestId('unpublish-flow-button');

packages/e2e-tests/tests/connections/enabled-pop-up-reminder.spec.js

@@ -0,0 +1,63 @@
+const { test, expect } = require('../../fixtures/index');
+const {AddMattermostConnectionModal} = require('../../fixtures/apps/mattermost/add-mattermost-connection-modal');
+
+test.describe('Pop-up message on connections', () => {
+  test.beforeEach(async ({ flowEditorPage, page }) => {
+    await page.getByTestId('create-flow-button').click();
+    await page.waitForURL(
+      /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
+    );
+    await expect(page.getByTestId('flow-step')).toHaveCount(2);
+
+    await flowEditorPage.flowName.click();
+    await flowEditorPage.flowNameInput.fill('PopupFlow');
+    await flowEditorPage.createWebhookTrigger(true);
+
+    await flowEditorPage.chooseAppAndEvent('Mattermost', 'Send a message to channel');
+    await expect(flowEditorPage.continueButton).toHaveCount(1);
+    await expect(flowEditorPage.continueButton).not.toBeEnabled();
+
+    await flowEditorPage.connectionAutocomplete.click();
+    await flowEditorPage.addNewConnectionItem.click();  });
+
+  test('should show error to remind to enable pop-up on connection create', async ({
+    page,
+  }) => {
+    const addMattermostConnectionModal = new AddMattermostConnectionModal(page);
+
+    // Inject script to override window.open
+    await page.evaluate(() => {
+      // eslint-disable-next-line no-undef
+      window.open = function() {
+        console.log('Popup blocked!');
+        return null;
+      };
+    });
+
+    await addMattermostConnectionModal.fillConnectionForm();
+    await addMattermostConnectionModal.submitConnectionForm();
+
+    await expect(page.getByTestId("add-connection-error")).toHaveCount(1);
+    await expect(page.getByTestId("add-connection-error")).toHaveText('Make sure pop-ups are enabled in your browser.');
+  });
+
+  test('should not show pop-up error if pop-ups are enabled on connection create', async ({
+    page,
+  }) => {
+    const addMattermostConnectionModal = new AddMattermostConnectionModal(page);
+
+    await addMattermostConnectionModal.fillConnectionForm();
+    const popupPromise = page.waitForEvent('popup');
+    await addMattermostConnectionModal.submitConnectionForm();
+
+    const popup = await popupPromise;
+    await expect(popup.url()).toContain("mattermost");
+    await expect(page.getByTestId("add-connection-error")).toHaveCount(0);
+
+    await test.step('Should show error on failed credentials verification', async () => {
+      await popup.close();
+      await expect(page.getByTestId("add-connection-error")).toHaveCount(1);
+      await expect(page.getByTestId("add-connection-error")).toHaveText('Error occured while verifying credentials!');
+    });
+  });
+});

packages/web/src/components/AddAppConnection/index.jsx

@@ -136,6 +136,7 @@ function AddAppConnection(props) {
 
       {error && (
         <Alert
+          data-test="add-connection-error"
           severity="error"
           sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
         >