[SIEM] Fixes test flakiness (#65510)

* adds 'Configures a new connector' test

* refactor code

* updates configure_cases screen selectors

* removes 'configure connector' test flakiness

x-pack/plugins/siem/cypress/integration/cases_connectors.spec.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { serviceNowConnector } from '../objects/case';
+
+import { TOASTER } from '../screens/configure_cases';
+
+import { goToEditExternalConnection } from '../tasks/all_cases';
+import {
+  addServiceNowConnector,
+  openAddNewConnectorOption,
+  saveChanges,
+  selectLastConnectorCreated,
+} from '../tasks/configure_cases';
+import { loginAndWaitForPageWithoutDateRange } from '../tasks/login';
+
+import { CASES } from '../urls/navigation';
+
+describe('Cases connectors', () => {
+  before(() => {
+    cy.server();
+    cy.route('POST', '**/api/action').as('createConnector');
+    cy.route('POST', '**/api/cases/configure').as('saveConnector');
+  });
+
+  it('Configures a new connector', () => {
+    loginAndWaitForPageWithoutDateRange(CASES);
+    goToEditExternalConnection();
+    openAddNewConnectorOption();
+    addServiceNowConnector(serviceNowConnector);
+
+    cy.wait('@createConnector')
+      .its('status')
+      .should('eql', 200);
+    cy.get(TOASTER).should('have.text', "Created 'New connector'");
+
+    selectLastConnectorCreated();
+    saveChanges();
+
+    cy.wait('@saveConnector', { timeout: 10000 })
+      .its('status')
+      .should('eql', 200);
+    cy.get(TOASTER).should('have.text', 'Saved external connection settings');
+  });
+});

x-pack/plugins/siem/cypress/objects/case.ts

@@ -14,6 +14,13 @@ export interface TestCase {
   reporter: string;
 }
 
+export interface Connector {
+  connectorName: string;
+  URL: string;
+  username: string;
+  password: string;
+}
+
 const caseTimeline: Timeline = {
   title: 'SIEM test',
   description: 'description',
@@ -27,3 +34,10 @@ export const case1: TestCase = {
   timeline: caseTimeline,
   reporter: 'elastic',
 };
+
+export const serviceNowConnector: Connector = {
+  connectorName: 'New connector',
+  URL: 'https://www.test.service-now.com',
+  username: 'Username Name',
+  password: 'password',
+};

x-pack/plugins/siem/cypress/screens/all_cases.ts

@@ -39,3 +39,5 @@ export const ALL_CASES_TAGS = (index: number) => {
 };
 
 export const ALL_CASES_TAGS_COUNT = '[data-test-subj="options-filter-popover-button-Tags"]';
+
+export const EDIT_EXTERNAL_CONNECTION = '[data-test-subj="configure-case-button"]';

x-pack/plugins/siem/cypress/screens/configure_cases.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const ADD_NEW_CONNECTOR_OPTION_LINK =
+  '[data-test-subj="case-configure-add-connector-button"]';
+
+export const CONNECTOR = (id: string) => {
+  return `[data-test-subj='dropdown-connector-${id}']`;
+};
+
+export const CONNECTOR_NAME = '[data-test-subj="nameInput"]';
+
+export const CONNECTORS_DROPDOWN = '[data-test-subj="dropdown-connectors"]';
+
+export const PASSWORD = '[data-test-subj="connector-servicenow-password-form-input"]';
+
+export const SAVE_BTN = '[data-test-subj="saveNewActionButton"]';
+
+export const SAVE_CHANGES_BTN = '[data-test-subj="case-configure-action-bottom-bar-save-button"]';
+
+export const SERVICE_NOW_CONNECTOR_CARD = '[data-test-subj=".servicenow-card"]';
+
+export const TOASTER = '[data-test-subj="euiToastHeader"]';
+
+export const URL = '[data-test-subj="apiUrlFromInput"]';
+
+export const USERNAME = '[data-test-subj="connector-servicenow-username-form-input"]';

x-pack/plugins/siem/cypress/tasks/all_cases.ts

@@ -4,7 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ALL_CASES_NAME, ALL_CASES_CREATE_NEW_CASE_BTN } from '../screens/all_cases';
+import {
+  ALL_CASES_NAME,
+  ALL_CASES_CREATE_NEW_CASE_BTN,
+  EDIT_EXTERNAL_CONNECTION,
+} from '../screens/all_cases';
 
 export const goToCreateNewCase = () => {
   cy.get(ALL_CASES_CREATE_NEW_CASE_BTN).click({ force: true });
@@ -13,3 +17,7 @@ export const goToCreateNewCase = () => {
 export const goToCaseDetails = () => {
   cy.get(ALL_CASES_NAME).click({ force: true });
 };
+
+export const goToEditExternalConnection = () => {
+  cy.get(EDIT_EXTERNAL_CONNECTION).click({ force: true });
+};

x-pack/plugins/siem/cypress/tasks/configure_cases.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ADD_NEW_CONNECTOR_OPTION_LINK,
+  CONNECTOR,
+  CONNECTOR_NAME,
+  CONNECTORS_DROPDOWN,
+  PASSWORD,
+  SAVE_BTN,
+  SAVE_CHANGES_BTN,
+  SERVICE_NOW_CONNECTOR_CARD,
+  URL,
+  USERNAME,
+} from '../screens/configure_cases';
+import { MAIN_PAGE } from '../screens/siem_main';
+
+import { Connector } from '../objects/case';
+
+export const addServiceNowConnector = (connector: Connector) => {
+  cy.get(SERVICE_NOW_CONNECTOR_CARD).click();
+  cy.get(CONNECTOR_NAME).type(connector.connectorName);
+  cy.get(URL).type(connector.URL);
+  cy.get(USERNAME).type(connector.username);
+  cy.get(PASSWORD).type(connector.password);
+  cy.get(SAVE_BTN).click({ force: true });
+};
+
+export const openAddNewConnectorOption = () => {
+  cy.get(MAIN_PAGE).then($page => {
+    if ($page.find(SERVICE_NOW_CONNECTOR_CARD).length !== 1) {
+      cy.wait(1000);
+      cy.get(ADD_NEW_CONNECTOR_OPTION_LINK).click({ force: true });
+    }
+  });
+};
+
+export const saveChanges = () => {
+  cy.get(SAVE_CHANGES_BTN).click();
+};
+
+export const selectLastConnectorCreated = () => {
+  cy.get(CONNECTORS_DROPDOWN).click({ force: true });
+  cy.get('@createConnector')
+    .its('response')
+    .then(response => {
+      cy.get(CONNECTOR(response.body.id)).click();
+    });
+};

x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx

@@ -65,9 +65,7 @@ const ConnectorsDropdownComponent: React.FC<Props> = ({
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <span data-test-subj={`dropdown-connector-${connector.id}`}>
-                    {connector.name}
-                  </span>
+                  <span>{connector.name}</span>
                 </EuiFlexItem>
               </EuiFlexGroup>
             ),