Merge pull request #315 from PagerDuty/release/0.10.1-beta.0

.github/workflows/cd-workflow.yml

@@ -39,7 +39,7 @@ jobs:
       VITE_DD_DEFAULT_PRIVACY_LEVEL: ${{ secrets.DD_DEFAULT_PRIVACY_LEVEL }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: .tool-versions
@@ -59,7 +59,7 @@ jobs:
       - name: Build application bundle
         run: yarn build
       - name: Deploy
-        uses: crazy-max/ghaction-github-pages@v3
+        uses: crazy-max/ghaction-github-pages@v4
         with:
           target_branch: gh-pages
           build_dir: build
@@ -69,7 +69,7 @@ jobs:
   sync-branch:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Merge main -> develop
         uses: devmasx/merge-branch@master
         with:

.github/workflows/codeql.yml

@@ -42,7 +42,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v3

.github/workflows/lint-workflow.yml

@@ -8,7 +8,7 @@ jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install Yarn
         run: npm install -g yarn
       # https://github.com/actions/cache/blob/main/examples.md#node---yarn

.github/workflows/snyk-security.yml

@@ -34,7 +34,7 @@ jobs:
       security-events: write # for github/codeql-action/upload-sarif to upload SARIF results
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Snyk CLI to check for security issues
         # Snyk can be used to break the build when it detects security issues.
         # In this case we want to upload the SAST issues to GitHub Code Scanning

.github/workflows/test-workflow.yml

@@ -13,7 +13,7 @@ jobs:
   install:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: .tool-versions
@@ -37,7 +37,7 @@ jobs:
     needs: install
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: .tool-versions
@@ -89,7 +89,7 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: .tool-versions

cypress/e2e/Incidents/incidents.spec.js

@@ -1,4 +1,6 @@
 /* eslint-disable no-underscore-dangle */
+/* eslint-disable cypress/unsafe-to-chain-command */
+
 import {
   acceptDisclaimer,
   waitForIncidentTable,
@@ -22,6 +24,7 @@ import {
   checkIncidentCellContentHasLink,
   manageIncidentTableColumns,
   priorityNames,
+  selectAlert,
 } from '../../support/util/common';
 
 describe('Manage Open Incidents', { failFast: { enabled: false } }, () => {
@@ -295,4 +298,131 @@ describe('Manage Open Incidents', { failFast: { enabled: false } }, () => {
     runResponsePlay(responsePlayName);
     checkActionAlertsModalContent(`Ran "${responsePlayName}" response play for incident(s)`);
   });
+
+  it('Hovering over Num Alerts count should popup alert table', () => {
+    // Remove the other columns to make it easier to see the alert count without scrolling
+    const removeColumns = [
+      ['Responders', 'responders'],
+      ['Latest Log Entry Type', 'latest_log_entry_type'],
+    ];
+    manageIncidentTableColumns(
+      'remove',
+      removeColumns.map((column) => column[1]),
+    );
+
+    const addColumns = [
+      ['Num Alerts', 'num_alerts'],
+    ];
+    manageIncidentTableColumns(
+      'add',
+      addColumns.map((column) => column[1]),
+    );
+
+    const incidentIdx = 0;
+
+    cy.get(`[data-incident-header="Num Alerts"][data-incident-row-cell-idx="${incidentIdx}"]`)
+      .should('be.visible')
+      .should('contain', '1');
+
+    cy.get(`[data-incident-header="Num Alerts"][data-incident-row-cell-idx="${incidentIdx}"]`).within(() => {
+      cy.get('[aria-haspopup="dialog"]').realHover();
+    });
+
+    cy.get('[data-popper-placement="bottom"]').should('be.visible');
+    cy.get('[data-popper-placement="bottom"]').should('contain', 'Created At');
+    cy.get('[data-popper-placement="bottom"]').should('contain', 'Status');
+    cy.get('[data-popper-placement="bottom"]').should('contain', 'Summary');
+
+    // Reset hover state
+    cy.get('body').realHover({ position: 'topLeft' });
+  });
+
+  it('Split/move alert from one incident to a new incident', () => {
+    const incidentIdx = 0;
+
+    cy.get(`[data-incident-header="Num Alerts"][data-incident-row-cell-idx="${incidentIdx}"]`).within(() => {
+      cy.get('[aria-haspopup="dialog"]').click();
+    });
+
+    selectAlert(0);
+
+    cy.get('#alerts-modal-move-btn').click();
+    cy.get('#alerts-modal-move-select').type('Move all selected alerts to one new incident{enter}');
+    cy.get('#alerts-modal-move-summary-input').clear().type('New incident created from split alert');
+    cy.get('#alerts-modal-complete-move-btn').click();
+
+    checkActionAlertsModalContent('Alerts moved');
+    waitForIncidentTable();
+
+    cy.get(`[data-incident-header="Title"][data-incident-row-cell-idx="${incidentIdx}"]`)
+      .should('be.visible')
+      .should('have.text', 'New incident created from split alert');
+  });
+
+  it('Merge incidents then split alerts to their own incidents', () => {
+    const targetIncidentIdx = 0;
+    selectIncident(targetIncidentIdx);
+    selectIncident(targetIncidentIdx + 1);
+    merge(targetIncidentIdx);
+    checkActionAlertsModalContent('and their alerts have been merged onto');
+    waitForIncidentTable();
+    const incidentIdx = 0;
+
+    cy.get(`[data-incident-header="Num Alerts"][data-incident-row-cell-idx="${incidentIdx}"]`).within(() => {
+      cy.get('[aria-haspopup="dialog"]').should('be.visible').should('have.text', '2').click();
+    });
+
+    selectAlert(0);
+    selectAlert(1);
+
+    cy.get('#alerts-modal-move-btn').click();
+    cy.get('#alerts-modal-move-select').type('Move each selected alert to its own new incident{enter}');
+    cy.get('#alerts-modal-complete-move-btn').click();
+
+    checkActionAlertsModalContent('Alerts moved');
+    waitForIncidentTable();
+  });
+
+  it('Move alerts to a specific incident', () => {
+    const targetIncidentIdx = 0;
+    const sourceIncidentIdx = 1;
+    selectIncident(targetIncidentIdx);
+
+    cy.get(`@selectedIncidentId_${targetIncidentIdx}`).then((incidentId) => {
+      cy.get(`[data-incident-header="Num Alerts"][data-incident-cell-id="${incidentId}"]`).within(() => {
+        cy.get('[aria-haspopup="dialog"]').should('be.visible').should('have.text', '1');
+      });
+
+      cy.get(`[data-incident-header="Title"][data-incident-cell-id="${incidentId}"]`).within(() => {
+        cy.get('a').invoke('text').as('targetIncidentTitle');
+      });
+    });
+
+    cy.get(`[data-incident-header="Num Alerts"][data-incident-row-cell-idx="${sourceIncidentIdx}"]`).within(() => {
+      cy.get('[aria-haspopup="dialog"]').should('be.visible').should('have.text', '1').click();
+    });
+
+    selectAlert(0);
+
+    cy.get('#alerts-modal-move-btn').click();
+    cy.get('@targetIncidentTitle').then((targetIncidentTitle) => {
+      cy.log(`targetIncidentTitle: ${targetIncidentTitle}`);
+      cy.get('#alerts-modal-move-select').type(`${targetIncidentTitle}{enter}`);
+    });
+    cy.get('#alerts-modal-complete-move-btn').click();
+
+    checkActionAlertsModalContent('Alerts moved');
+    waitForIncidentTable();
+
+    cy.get(`@selectedIncidentId_${targetIncidentIdx}`).then((incidentId) => {
+      cy.get(`[data-incident-header="Num Alerts"][data-incident-cell-id="${incidentId}"]`).within(() => {
+        cy.get('[aria-haspopup="dialog"]').should('be.visible').should('have.text', '2');
+      });
+    });
+
+    // Tidy up by resolving the incident with two alerts
+    selectIncident(0);
+    cy.get('#incident-action-resolve-button').click();
+    checkActionAlertsModalContent('have been resolved');
+  });
 });

cypress/support/util/common.js

@@ -34,6 +34,12 @@ export const selectIncident = (incidentIdx = 0, shiftKey = false) => {
   cy.get(selector).click({ shiftKey });
 };
 
+export const selectAlert = (alertIdx = 0) => {
+  const selector = `[data-alert-row-idx="${alertIdx}"]`;
+  cy.get(selector).invoke('attr', 'data-alert-id').as(`selectedAlertId_${alertIdx}`);
+  cy.get(selector).click();
+};
+
 export const selectAllIncidents = () => {
   cy.get('#select-all', { timeout: 20000 }).click({ force: true });
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pd-live-react",
   "homepage": "https://pagerduty.github.io/pd-live-react",
-  "version": "0.10.0-beta.0",
+  "version": "0.10.1-beta.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/icons": "^2.1.0",
@@ -11,21 +11,21 @@
     "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@pagerduty/pdjs": "^2.2.3",
     "@types/jest": "^29.5.3",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
-    "axios": "^1.2.4",
+    "axios": "^1.5.0",
     "bootstrap": "^4.6.2",
     "bottleneck": "^2.19.5",
     "chakra-react-select": "^4.7.0",
     "date-fns": "^2.29.3",
     "font-awesome": "^4.7.0",
-    "framer-motion": "^10.16.1",
+    "framer-motion": "^10.16.2",
     "fuse.js": "^6.6.2",
     "i18next": "^23.4.6",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -100,7 +100,7 @@
     "@babel/eslint-parser": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
-    "@cypress/react": "^7.0.1",
+    "@cypress/react": "^8.0.0",
     "@faker-js/faker": "^8.0.2",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^6.0.1",
@@ -112,7 +112,7 @@
     "babel-jest": "^27.4.2",
     "cypress": "^12.17.1",
     "cypress-fail-fast": "^7.0.0",
-    "cypress-real-events": "^1.8.1",
+    "cypress-real-events": "^1.10.3",
     "dotenv": "^16.3.1",
     "eslint": "^8.43.0",
     "eslint-config-airbnb": "^18.2.1",

src/App.jsx

@@ -33,6 +33,7 @@ import AddNoteModalComponent from 'src/components/AddNoteModal/AddNoteModalCompo
 import ReassignModalComponent from 'src/components/ReassignModal/ReassignModalComponent';
 import AddResponderModalComponent from 'src/components/AddResponderModal/AddResponderModalComponent';
 import MergeModalComponent from 'src/components/MergeModal/MergeModalComponent';
+import IncidentAlertsModal from 'src/components/IncidentTable/subcomponents/IncidentAlertsModal';
 
 import {
   getIncidentsAsync as getIncidentsAsyncConnected,
@@ -174,7 +175,7 @@ const App = () => {
         if (userAuthorized && abilities.includes(PD_REQUIRED_ABILITY)) {
           if (fetchingLogEntriesRef.current) {
             // eslint-disable-next-line no-console
-            console.error('skipping log entries fetch because already fetching log entries');
+            console.warn('skipping log entries fetch because already fetching log entries');
             return;
           }
 
@@ -193,7 +194,7 @@ const App = () => {
             getLogEntriesAsync(since);
           } else if (fetchingIncidentsRef.current) {
             // eslint-disable-next-line no-console
-            console.error('skipping log entries fetch because already fetching incidents');
+            console.warn('skipping log entries fetch because already fetching incidents');
           }
         }
       }, LOG_ENTRIES_POLLING_INTERVAL_SECONDS * 1000);
@@ -272,6 +273,7 @@ const App = () => {
           <ReassignModalComponent />
           <AddResponderModalComponent />
           <MergeModalComponent />
+          <IncidentAlertsModal />
         </Box>
         <Flex as="footer" position="fixed" bottom={0} w="100%" zIndex="1" pt={1} ref={footerRef}>
           <IncidentActionsComponent />