Merge pull request #185 from PagerDuty/release/0.9.0-beta.0

.github/dependabot.yml

@@ -11,3 +11,13 @@ updates:
     labels:
       - 'npm'
       - 'dependencies'
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+     # Raise pull requests for version updates on github-actions against the `develop` branch
+    target-branch: 'develop'
+    # Labels on pull requests for version updates only
+    labels:
+      - 'github-actions'
+      - 'dependencies'

.github/workflows/cd-workflow.yml

@@ -39,11 +39,10 @@ jobs:
       REACT_APP_DD_DEFAULT_PRIVACY_LEVEL: ${{ secrets.DD_DEFAULT_PRIVACY_LEVEL }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Set-up Node
-        uses: actions/setup-node@v1
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16.19.0'
+          node-version-file: .tool-versions
       - name: Install Yarn
         run: npm install -g yarn
       # https://github.com/actions/cache/blob/main/examples.md#node---yarn
@@ -71,7 +70,7 @@ jobs:
   sync-branch:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@v3
       - name: Merge main -> develop
         uses: devmasx/merge-branch@master
         with:

.github/workflows/snyk-security.yml

@@ -45,9 +45,9 @@ jobs:
 
         # For Snyk Open Source you must first set up the development environment for your application's dependencies
         # For example for Node
-      - uses: actions/setup-node@master
+      - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version-file: .tool-versions
 
         # Runs Snyk Code (SAST) analysis and uploads result into GitHub.
       - name: Run Snyk to check for vulnerabilities

.github/workflows/test-workflow.yml

@@ -53,7 +53,7 @@ jobs:
     needs: install
     runs-on: ubuntu-latest
     container:
-      image: cypress/browsers:node16.16.0-chrome107-ff107
+      image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1
       options: --user 1001
     strategy:
       fail-fast: false
@@ -81,6 +81,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: .tool-versions
+      - name: Node Version
+        run: node -v
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT

.tool-versions

@@ -1,2 +1,3 @@
 # MUST match .node-version
-nodejs 16.19.0
+nodejs 18.16.1
+yarn 1.22.19

README.md

@@ -29,7 +29,7 @@ If you wish to maintain + deploy your own version of PagerDuty Live, we recommen
 
 #### Local Development
 
-1. Install [NodeJS v16.19](https://nodejs.org/tr/blog/release/v16.19.0/) via [`asdf install`](https://github.com/asdf-vm/asdf) / [`nvm`](https://github.com/nvm-sh/nvm)
+1. Install [NodeJS v18.16.1](https://nodejs.org/en/blog/release/v18.16.1) via [`asdf install`](https://github.com/asdf-vm/asdf) / [`nvm`](https://github.com/nvm-sh/nvm)
 
 2. `$ git clone` repo to desired destination and `$ cd pd-live-react` into directory
 

cypress/e2e/Incidents/incidents.spec.js

@@ -16,10 +16,11 @@ import {
   runExternalSystemSync,
   runResponsePlay,
   checkActionAlertsModalContent,
+  checkPopoverContent,
   checkIncidentCellContent,
   checkNoIncidentsSelected,
-  // activateButton,
-  // deactivateButton,
+  checkIncidentCellContentHasLink,
+  manageIncidentTableColumns,
   priorityNames,
 } from '../../support/util/common';
 
@@ -89,6 +90,32 @@ describe('Manage Open Incidents', { failFast: { enabled: false } }, () => {
     });
   });
 
+  it('Add note with URL to singular incident', () => {
+    const note = 'This note has a URL example.com included';
+    const incidentIdx = 2;
+    selectIncident(incidentIdx);
+
+    cy.get(`@selectedIncidentId_${incidentIdx}`).then((incidentId) => {
+      addNote(note);
+      checkActionAlertsModalContent('have been updated with a note');
+      checkIncidentCellContent(incidentId, 'Latest Note', note);
+      checkIncidentCellContentHasLink(incidentId, 'Latest Note', 'example.com', 'http://example.com');
+    });
+  });
+
+  it('Add note with email to singular incident', () => {
+    const note = 'This note has an email [email protected] included';
+    const incidentIdx = 3;
+    selectIncident(incidentIdx);
+
+    cy.get(`@selectedIncidentId_${incidentIdx}`).then((incidentId) => {
+      addNote(note);
+      checkActionAlertsModalContent('have been updated with a note');
+      checkIncidentCellContent(incidentId, 'Latest Note', note);
+      checkIncidentCellContentHasLink(incidentId, 'Latest Note', '[email protected]', 'mailto:[email protected]');
+    });
+  });
+
   // Assumed environment has 3 levels on escalation policy
   for (let escalationLevel = 1; escalationLevel < 4; escalationLevel++) {
     it(`Escalate singular incident to level: ${escalationLevel}`, () => {
@@ -119,11 +146,20 @@ describe('Manage Open Incidents', { failFast: { enabled: false } }, () => {
   });
 
   it('Add responder (User A1) to singular incident', () => {
+    const columns = [
+      ['Responders', 'responders'],
+    ];
+    manageIncidentTableColumns('add', columns.map((column) => column[1]));
     const responders = ['User A1'];
     const message = 'Need help with this incident';
-    selectIncident(0);
+    const incidentIdx = 0;
+    selectIncident(incidentIdx);
     addResponders(responders, message);
     checkActionAlertsModalContent('Requested additional response for incident(s)');
+    cy.get(`@selectedIncidentId_${incidentIdx}`).then((incidentId) => {
+      checkIncidentCellContent(incidentId, 'Responders', 'UA');
+      checkPopoverContent(incidentId, 'Responders', '[email protected]');
+    });
   });
 
   it('Add responder (Team A) to singular incident', () => {

cypress/e2e/Query/query.spec.js

@@ -9,9 +9,6 @@ import {
 import {
   acceptDisclaimer,
   waitForIncidentTable,
-  updateAutoAcceptIncidentQuery,
-  activateButton,
-  deactivateButton,
   checkIncidentCellContentAllRows,
   checkIncidentCellIconAllRows,
   manageIncidentTableColumns,

cypress/e2e/Settings/settings.spec.js

@@ -10,10 +10,10 @@ import {
   updateDefaultSinceDateLookback,
   updateMaxRateLimit,
   updateDarkMode,
+  updateRelativeDates,
   manageIncidentTableColumns,
   manageCustomAlertColumnDefinitions,
-  // activateButton,
-  // priorityNames,
+  checkIncidentCellContentAllRows,
 } from '../../support/util/common';
 
 describe('Manage Settings', { failFast: { enabled: false } }, () => {
@@ -205,4 +205,31 @@ describe('Manage Settings', { failFast: { enabled: false } }, () => {
         state.settings.darkMode,
       ).to.equal(!currentDarkMode));
   });
+
+  it('Update relative dates', () => {
+    [true, false].forEach((relativeDates) => {
+      updateRelativeDates(relativeDates);
+      cy.window()
+        .its('store')
+        .invoke('getState')
+        .then((state) => expect(
+          state.settings.relativeDates,
+        ).to.equal(relativeDates));
+
+      if (relativeDates) {
+        checkIncidentCellContentAllRows('Created At', /second[s]? ago|minute[s]? ago|hour[s]? ago/);
+      }
+    });
+  });
+
+  it('Add age column to incident table', () => {
+    const columns = [
+      ['Age', 'age'],
+    ];
+    manageIncidentTableColumns('add', columns.map((column) => column[1]));
+    columns.map((column) => column[0]).forEach((columnName) => {
+      cy.get(`[data-column-name="${columnName}"]`).scrollIntoView().should('be.visible');
+    });
+    checkIncidentCellContentAllRows('Age', /second[s]?|minute[s]?|hour[s]?/);
+  });
 });

cypress/support/util/common.js

@@ -49,14 +49,21 @@ export const checkNoIncidentsSelected = () => {
 export const checkActionAlertsModalContent = (content) => {
   cy.wait(2000);
   cy.get('.chakra-alert__title').contains(content, { timeout: 10000 });
-  // cy.get('.action-alerts-modal').type('{esc}');
+};
+
+export const checkPopoverContent = (incidentId, incidentHeader, content) => {
+  cy.wait(2000);
+  cy.get(`[data-incident-header="${incidentHeader}"][data-incident-cell-id="${incidentId}"]`).within(() => {
+    cy.get('.chakra-avatar__group').realHover();
+    cy.get('.chakra-popover__popper').should('be.visible').contains(content, { timeout: 10000 });
+  });
 };
 
 export const checkIncidentCellContent = (incidentId, incidentHeader, content) => {
   cy.wait(2000);
   cy.get(`[data-incident-header="${incidentHeader}"][data-incident-cell-id="${incidentId}"]`)
     .should('be.visible')
-    .should('have.text', content);
+    .contains(content);
 };
 
 export const checkIncidentCellContentAllRows = (incidentHeader, content) => {
@@ -69,7 +76,7 @@ export const checkIncidentCellContentAllRows = (incidentHeader, content) => {
       )
         .scrollIntoView()
         .should('be.visible')
-        .should('have.text', content);
+        .contains(content);
     }
   });
 };
@@ -94,6 +101,14 @@ export const checkIncidentCellIconAllRows = (incidentHeader, icon) => {
   });
 };
 
+export const checkIncidentCellContentHasLink = (incidentId, incidentHeader, text, link) => {
+  cy.wait(2000);
+  cy.get(`[data-incident-header="${incidentHeader}"][data-incident-cell-id="${incidentId}"]`)
+    .should('be.visible')
+    .contains('a', text)
+    .should('have.attr', 'href', link);
+};
+
 export const deactivateButton = (domId) => {
   cy.get(`#${domId}`).then(($el) => {
     const cls = $el.attr('class');
@@ -290,20 +305,18 @@ export const updateMaxRateLimit = (limit = 200) => {
   checkActionAlertsModalContent('Updated user profile settings');
 };
 
-export const updateAutoAcceptIncidentQuery = (autoAcceptIncidentsQuery = false) => {
+export const updateRelativeDates = (relativeDates = false) => {
   cy.get('.settings-panel-dropdown').click();
   cy.get('.dropdown-item').contains('Settings').click();
-  cy.get('.nav-item').contains('User Profile').click();
 
-  if (autoAcceptIncidentsQuery) {
-    cy.get('#user-profile-auto-accept-incident-query-checkbox').check({ force: true });
+  if (relativeDates) {
+    cy.get('#relative-dates-switch').check({ force: true });
   } else {
-    cy.get('#user-profile-auto-accept-incident-query-checkbox').uncheck({ force: true });
+    cy.get('#relative-dates-switch').uncheck({ force: true });
   }
 
-  cy.get('.btn').contains('Update User Profile').click();
+  cy.get('#save-settings-button').click();
   checkActionAlertsModalContent('Updated user profile settings');
-  cy.get('.close').click();
 };
 
 export const updateDarkMode = () => {

i18next-parser.config.js

@@ -19,7 +19,7 @@ module.exports = {
   keepRemoved: false,
   // Keep keys from the catalog that are no longer in code
 
-  keySeparator: '.',
+  keySeparator: false,
   // Key separator used in your translation keys
   // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
 
@@ -46,7 +46,7 @@ module.exports = {
   locales: ['en', 'fr', 'es', 'de', 'ja', 'id', 'pt', 'pt-br'],
   // An array of the locales in your applications
 
-  namespaceSeparator: ':',
+  namespaceSeparator: false,
   // Namespace separator used in your translation keys
   // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.