Merge pull request #34 from PagerDuty/release/0.7.0-beta.0

[Release] v0.7.0 beta.0

.github/workflows/cd-workflow.yml

@@ -1,10 +1,26 @@
 name: PagerDuty Live Continuous Deployment Pipeline (Main)
 
 on:
+  # Runs on pushes targeting the default branch
   push:
     branches:
       - main
 
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 jobs:
   build-deploy:
     runs-on: ubuntu-latest
@@ -48,8 +64,6 @@ jobs:
         with:
           target_branch: gh-pages
           build_dir: build
-        env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
 
   sync-branch:
     runs-on: ubuntu-latest
@@ -61,4 +75,4 @@ jobs:
           type: now
           from_branch: main
           target_branch: develop
-          github_token: ${{ secrets.GH_TOKEN }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}

cypress/e2e/Settings/settings.spec.js

@@ -14,6 +14,7 @@ import {
   updateMaxRateLimit,
   updateAutoAcceptIncidentQuery,
   updateAutoRefreshInterval,
+  updateDarkMode,
   manageIncidentTableColumns,
   manageCustomAlertColumnDefinitions,
   activateButton,
@@ -193,4 +194,16 @@ describe('Manage Settings', { failFast: { enabled: false } }, () => {
     cy.get('.btn').contains('Clear Local Cache').click();
     cy.get('.modal-title').contains('Disclaimer & License').should('be.visible');
   });
+
+  it('Update dark mode', () => {
+    [true, false].forEach((darkMode) => {
+      updateDarkMode(darkMode);
+      cy.window()
+        .its('store')
+        .invoke('getState')
+        .then((state) => expect(
+          state.settings.darkMode,
+        ).to.equal(darkMode));
+    });
+  });
 });

cypress/support/util/common.js

@@ -305,6 +305,22 @@ export const updateAutoAcceptIncidentQuery = (autoAcceptIncidentsQuery = false)
   cy.get('.close').click();
 };
 
+export const updateDarkMode = (darkMode = false) => {
+  cy.get('.settings-panel-dropdown').click();
+  cy.get('.dropdown-item').contains('Settings').click();
+  cy.get('.nav-item').contains('User Profile').click();
+
+  if (darkMode) {
+    cy.get('#user-profile-dark-mode-checkbox').check({ force: true });
+  } else {
+    cy.get('#user-profile-dark-mode-checkbox').uncheck({ force: true });
+  }
+
+  cy.get('.btn').contains('Update User Profile').click();
+  checkActionAlertsModalContent('Updated user profile settings');
+  cy.get('.close').click();
+};
+
 export const priorityNames = ['--', 'P5', 'P4', 'P3', 'P2', 'P1'];
 
 /*

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pd-live-react",
   "homepage": "https://giranm.github.io/pd-live-react",
-  "version": "0.6.0-beta.0",
+  "version": "0.7.0-beta.0",
   "private": true,
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.2",
@@ -18,7 +18,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "autoprefixer": "10.4.13",
-    "axios": "^1.2.2",
+    "axios": "^1.2.4",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^4.6.2",
     "bottleneck": "^2.19.5",
@@ -36,6 +36,7 @@
     "node-sass": "^7.0.3",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.6",
+    "react-contextmenu": "^2.14.0",
     "react-datepicker": "^4.10.0",
     "react-dom": "^17.0.2",
     "react-dual-listbox": "^4.0.0",
@@ -49,7 +50,7 @@
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.2.1",
-    "styled-components": "^5.3.6",
+    "styled-components": "^5.3.7",
     "use-debounce": "^9.0.3",
     "validator": "^13.7.0",
     "web-vitals": "^3.1.0"

src/App.js

@@ -97,6 +97,14 @@ const App = ({
 }) => {
   // Verify if session token is present
   const token = sessionStorage.getItem('pd_access_token');
+  const {
+    autoRefreshInterval, darkMode,
+  } = state.settings;
+
+  if (darkMode) {
+    document.body.classList.add('dark-mode');
+  }
+
   if (!token) {
     return (
       <div className="App">
@@ -109,9 +117,6 @@ const App = ({
   const {
     userAuthorized, userAcceptedDisclaimer, currentUserLocale,
   } = state.users;
-  const {
-    autoRefreshInterval,
-  } = state.settings;
   const {
     fetchingIncidents,
     fetchingIncidentNotes,

src/App.scss

@@ -5,12 +5,22 @@ body {
   background-color: $pd-brand-background !important;
 }
 
+body.dark-mode {
+  background-color: $pd-brand-gray-dark !important;
+}
+
 .btn-outline-secondary {
   color: $pd-brand-black;
   background-color: $pd-brand-white;
   border-color: $pd-brand-secondary-light;
 }
 
+body.dark-mode .btn-outline-secondary {
+  color: $pd-white;
+  background-color: $pd-brand-gray-dark;
+  border-color: $pd-brand-secondary-light;
+}
+
 .btn-outline-secondary:disabled {
   color: $pd-brand-secondary-light !important;
 }
@@ -26,6 +36,10 @@ body {
   background-color: unset !important;
 }
 
+body.dark-mode .btn-outline-secondary:not(:disabled):not(.disabled).active {
+  background-color: $pd-brand-gray-light !important;
+}
+
 .btn-outline-dark {
   color: $pd-brand-gray-dark;
   background-color: $pd-white;
@@ -59,3 +73,54 @@ body {
 .modal-footer {
   display: unset !important;
 }
+
+body.dark-mode a {
+  color: $pd-brand-white;
+}
+
+body.dark-mode .modal-content {
+  background-color: $pd-brand-black !important;
+  color: $pd-white !important;
+}
+
+body.dark-mode .modal-title {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .modal-header .close {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .form-label, body.dark-mode .form-text {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .form-control {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-white;
+}
+
+body.dark-mode div.react-select__control, body.dark-mode div.react-select__menu {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__multi-value {
+  background-color: $pd-brand-gray-light !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__single-value {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__option:hover {
+  background-color: $pd-brand-secondary-light !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__option--is-focused {
+  background-color: $pd-brand-secondary-light !important;
+  color: $pd-brand-white !important;
+}
+

src/components/AddResponderModal/AddResponderModalComponent.js

@@ -86,6 +86,7 @@ const AddResponderModalComponent = ({
               <Form.Label>{t('Responders')}</Form.Label>
               <Select
                 id="add-responders-select"
+                classNamePrefix="react-select"
                 onChange={(selectedTargets) => {
                   setResponderRequestTargets(selectedTargets);
                 }}

src/components/Auth/AuthComponent.scss

@@ -13,6 +13,13 @@
   background-color: $pd-white;
 }
 
+body.dark-mode #pd-login-form {
+  border: 1px solid $pd-dark;
+  box-shadow: 0px 0px 10px 1px $pd-dark;
+  background-color: $pd-gray;
+  color: $pd-white;
+}
+
 #pd-login-logo {
   display: block;
   text-indent: -9999px;

src/components/GlobalSearch/GlobalSearchComponent.scss

@@ -1,5 +1,11 @@
+@import 'assets/styles/pagerduty.scss';
+
 .global-search-ctr {
   position: relative;
   padding-right: 10px;
   top: 6px;
 }
+
+body.dark-mode .global-search-ctr .input-group-text {
+  background-color: $pd-brand-secondary-light !important;
+}