Add support for computed columns

cypress/e2e/Settings/settings.spec.js

@@ -12,7 +12,7 @@ import {
   updateDarkMode,
   updateRelativeDates,
   manageIncidentTableColumns,
-  manageCustomAlertColumnDefinitions,
+  manageCustomColumnDefinitions,
   checkIncidentCellContentAllRows,
   checkActionAlertsModalContent,
 } from '../../support/util/common';
@@ -141,27 +141,85 @@ describe('Manage Settings', { failFast: { enabled: true } }, () => {
   });
 
   it('Add valid custom alert column to incident table', () => {
-    const customAlertColumnDefinitions = ['Quote:details.quote'];
-    manageCustomAlertColumnDefinitions(customAlertColumnDefinitions);
-    customAlertColumnDefinitions.forEach((columnName) => {
-      const header = columnName.split(':')[0];
-      cy.get(`[data-column-name="${header}"]`).scrollIntoView().should('be.visible');
-      cy.get(`[data-incident-header="${header}"][data-incident-row-cell-idx="0"]`).then(($el) => {
+    const customColumnDefinitions = [
+      { header: 'Quote', accessorPath: 'details.quote', expression: '' },
+    ];
+    manageCustomColumnDefinitions(customColumnDefinitions);
+    customColumnDefinitions.forEach((column) => {
+      cy.get(`[data-column-name="${column.header}"]`).scrollIntoView().should('be.visible');
+      cy.get(`[data-incident-header="${column.header}"][data-incident-row-cell-idx="0"]`).then(($el) => {
         // eslint-disable-next-line no-unused-expressions
         expect($el.text()).to.exist;
+        // Quote exists in the alert body, so it should not be empty
+        expect($el.text()).to.not.equal('--');
+        expect($el.text().length).to.be.greaterThan(20);
       });
     });
   });
 
   it('Add valid custom alert column with JSON path containing spaces to incident table', () => {
-    const customAlertColumnDefinitions = ["Fav Flavour:details.['favorite ice cream flavor']"];
-    manageCustomAlertColumnDefinitions(customAlertColumnDefinitions);
-    customAlertColumnDefinitions.forEach((columnName) => {
-      const header = columnName.split(':')[0];
-      cy.get(`[data-column-name="${header}"]`).scrollIntoView().should('be.visible');
-      cy.get(`[data-incident-header="${header}"][data-incident-row-cell-idx="0"]`).then(($el) => {
+    const customColumnDefinitions = [
+      { header: 'Fav Flavour', accessorPath: "details.['favorite ice cream flavor']", expression: '' },
+    ];
+    manageCustomColumnDefinitions(customColumnDefinitions);
+    customColumnDefinitions.forEach((column) => {
+      cy.get(`[data-column-name="${column.header}"]`).scrollIntoView().should('be.visible');
+      cy.get(`[data-incident-header="${column.header}"][data-incident-row-cell-idx="0"]`).then(($el) => {
+        // eslint-disable-next-line no-unused-expressions
+        expect($el.text()).to.exist;
+        // Fav Flavour doesn't exist in the alert body, so it should be empty
+        expect($el.text()).to.equal('--');
+      });
+    });
+  });
+
+  it('Add valid custom computed column to incident table', () => {
+    const customColumnDefinitions = [
+      { header: 'CI', accessorPath: 'first_trigger_log_entry.channel.details', expression: '(.*.example.com)' },
+    ];
+    manageCustomColumnDefinitions(customColumnDefinitions, 'computed');
+    customColumnDefinitions.forEach((column) => {
+      cy.get(`[data-column-name="${column.header}"]`).scrollIntoView().should('be.visible');
+      cy.get(`[data-incident-header="${column.header}"][data-incident-row-cell-idx="0"]`).then(($el) => {
+        // eslint-disable-next-line no-unused-expressions
+        expect($el.text()).to.exist;
+        // CI doesn't exist in the alert body, so it should be empty
+        expect($el.text()).to.equal('--');
+      });
+    });
+  });
+
+  it('Add two valid custom computed column to incident table with different expressions', () => {
+    const customColumnDefinitions = [
+      { header: 'CI', accessorPath: 'first_trigger_log_entry.channel.details', expression: '(.*.example.com)' },
+      { header: 'Category', accessorPath: 'first_trigger_log_entry.channel.details', expression: 'Category(.*)' },
+    ];
+    manageCustomColumnDefinitions(customColumnDefinitions, 'computed');
+    customColumnDefinitions.forEach((column) => {
+      cy.get(`[data-column-name="${column.header}"]`).scrollIntoView().should('be.visible');
+      cy.get(`[data-incident-header="${column.header}"][data-incident-row-cell-idx="0"]`).then(($el) => {
+        // eslint-disable-next-line no-unused-expressions
+        expect($el.text()).to.exist;
+        // CI or Category don't exist in the alert body, so it should be empty
+        expect($el.text()).to.equal('--');
+      });
+    });
+  });
+
+  it('Add valid quote custom computed column to incident table', () => {
+    const customColumnDefinitions = [
+      { header: 'QuoteRegex', accessorPath: 'first_trigger_log_entry.channel.details', expression: '{"quote":"(.*)"}' },
+    ];
+    manageCustomColumnDefinitions(customColumnDefinitions, 'computed');
+    customColumnDefinitions.forEach((column) => {
+      cy.get(`[data-column-name="${column.header}"]`).scrollIntoView().should('be.visible');
+      cy.get(`[data-incident-header="${column.header}"][data-incident-row-cell-idx="0"]`).then(($el) => {
         // eslint-disable-next-line no-unused-expressions
         expect($el.text()).to.exist;
+        // Quote does exist in the alert body, so it should not be empty and also shouldn't contain the custom details JSON with quote key, just the quote value
+        expect($el.text()).to.not.equal('--');
+        expect($el.text()).to.not.contain('"quote"');
+        expect($el.text().length).to.be.greaterThan(20);
       });
     });
   });

cypress/support/util/common.js

@@ -255,22 +255,31 @@ export const manageIncidentTableColumns = (desiredState = 'add', columns = []) =
   checkActionAlertsModalContent('Incident table columns saved');
 };
 
-export const manageCustomAlertColumnDefinitions = (customAlertColumnDefinitions) => {
+export const manageCustomColumnDefinitions = (customColumnDefinitions, type = 'alert') => {
   cy.get('.settings-panel-dropdown').click();
   cy.get('.dropdown-item').contains('Columns').click();
 
   cy.get('#custom-columns-card-body .chakra-icon').each(($el) => {
     cy.wrap($el).click();
   });
 
-  customAlertColumnDefinitions.forEach((customAlertColumnDefinition) => {
-    const [header, accessorPath] = customAlertColumnDefinition.split(':');
-    cy.get('input[placeholder="Header"]').type(header);
-    cy.get('input[placeholder="JSON Path"]').type(accessorPath);
+  customColumnDefinitions.forEach((customColumnDefinition) => {
+    const {
+      header, accessorPath, expression,
+    } = customColumnDefinition;
+    cy.get('#column-type-select').select(type);
+    cy.get('input[placeholder="Header"]').clear().type(header);
+    cy.get('input[placeholder="JSON Path"]').clear().type(accessorPath);
+    if (type === 'computed') {
+      cy.get('input[placeholder="Regex"]').clear().type(expression, { parseSpecialCharSequences: false });
+    }
     cy.get('button[aria-label="Add custom column"]').click();
     // Need to escape special characters in accessorPath
     // https://docs.cypress.io/faq/questions/using-cypress-faq#How-do-I-use-special-characters-with-cyget
-    cy.get(`#column-${Cypress.$.escapeSelector(accessorPath)}-add-icon`).click();
+    const columnId = Cypress.$.escapeSelector(
+      [header, accessorPath, expression.replace(/:/g, '\\:')].filter((value) => value !== '').join(':'),
+    );
+    cy.get(`#column-${columnId}-add-icon`).click();
   });
   cy.get('#save-columns-button').click();
   checkActionAlertsModalContent('Incident table columns saved');