Merge pull request #494 from PagerDuty/release/0.14.0-beta.0

Author: gsreynolds

.github/workflows/cd-workflow.yml

@@ -29,7 +29,6 @@ jobs:
       VITE_PD_ENV: ${{ secrets.PD_ENV }}
       VITE_PD_SUBDOMAIN_ALLOW_LIST: '*'
       VITE_PD_OAUTH_CLIENT_ID: ${{ secrets.PD_OAUTH_CLIENT_ID }}
-      VITE_PD_OAUTH_CLIENT_SECRET: ${{ secrets.PD_OAUTH_CLIENT_SECRET }}
       VITE_PD_REQUIRED_ABILITY: 'teams'
       VITE_DD_APPLICATION_ID: ${{ secrets.DD_APPLICATION_ID }}
       VITE_DD_CLIENT_TOKEN: ${{ secrets.DD_CLIENT_TOKEN }}

README.md

@@ -4,6 +4,10 @@ This repository hosts the source code for PagerDuty Live, an open-source, single
 
 **Live URL: https://pagerduty.github.io/pd-live-react/**
 
+## :heavy_exclamation_mark: Deprecation
+
+**This project has been replaced by [Operations Console](https://support.pagerduty.com/main/docs/operations-console), which is supported product from PagerDuty. Please plan to migrate to Operations Console instead.**
+
 ## :warning: Disclaimer
 
 **This project is not officially supported by PagerDuty and therefore no issues can be reported to or resolved by PagerDuty Support.
@@ -45,7 +49,6 @@ The following _optional_ parameters can be used in a `.env` file to override Pag
 | ----------- | ----------- |
 | `VITE_PD_ENV` | PagerDuty Live Environment Tag; defaults to `localhost-dev` if not set |
 | `VITE_PD_OAUTH_CLIENT_ID` | PagerDuty OAuth App client ID (created upon registering app) |
-| `VITE_PD_OAUTH_CLIENT_SECRET` | PagerDuty OAuth App client secret (created upon registering app) |
 | `VITE_PD_USER_TOKEN` | PagerDuty [Personal API Token](https://support.pagerduty.com/docs/generating-api-keys#generating-a-personal-rest-api-key); this will override OAuth login workflow if set and should be used for integration tests|
 | `VITE_PD_SUBDOMAIN_ALLOW_LIST` | Comma separated list of allowed subdomains (e.g. `acme-prod,acme-dev`) |
 | `VITE_PD_REQUIRED_ABILITY` | PagerDuty account-level [ability](https://developer.pagerduty.com/api-reference/b3A6Mjc0ODEwMg-list-abilities) required to use application |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pd-live-react",
   "homepage": "https://pagerduty.github.io/pd-live-react",
-  "version": "0.13.2-beta.0",
+  "version": "0.14.0-beta.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",

src/App.jsx

@@ -24,6 +24,7 @@ import {
 
 import moment from 'moment/min/moment-with-locales';
 
+import DeprecationAlertComponent from 'src/components/DeprecationAlert/DeprecationAlert';
 import CatastropheModal from 'src/components/CatastropheModal/CatastropheModal';
 import AuthComponent from 'src/components/Auth/AuthComponent';
 import UnauthorizedModalComponent from 'src/components/UnauthorizedModal/UnauthorizedModalComponent';
@@ -77,7 +78,7 @@ import {
 } from 'src/redux/monitoring/actions';
 
 import {
-  PD_USER_TOKEN, PD_OAUTH_CLIENT_ID, PD_OAUTH_CLIENT_SECRET,
+  PD_USER_TOKEN, PD_OAUTH_CLIENT_ID,
 } from 'src/config/constants';
 
 import 'src/App.scss';
@@ -168,7 +169,7 @@ const App = () => {
   if (!PD_USER_TOKEN && (typeof token !== 'string' || !token.startsWith('pd'))) {
     return (
       <div className="App">
-        <AuthComponent clientId={PD_OAUTH_CLIENT_ID} clientSecret={PD_OAUTH_CLIENT_SECRET} />
+        <AuthComponent clientId={PD_OAUTH_CLIENT_ID} />
       </div>
     );
   }
@@ -202,6 +203,7 @@ const App = () => {
       >
         <Box position="fixed" w="100%" h="100%" overflow="hidden">
           <Box as="header" top={0} w="100%" pb={1}>
+            <DeprecationAlertComponent />
             <NavigationBarComponent />
           </Box>
           <Box as="main" id="main">

src/App.scss

@@ -124,3 +124,7 @@ body.dark-mode div.react-select__option--is-focused {
   color: $pd-brand-white !important;
 }
 
+a.external-link {
+  text-decoration: underline;
+}
+

src/components/Auth/AuthComponent.jsx

@@ -37,7 +37,7 @@ const AuthComponent = (props) => {
     redirectURL,
   } = props;
   const {
-    clientId, clientSecret,
+    clientId,
   } = props;
 
   if (!redirectURL) {
@@ -52,7 +52,7 @@ const AuthComponent = (props) => {
       const savedButtons = savedButtonsStr ? JSON.parse(savedButtonsStr) : [];
       const buttonParams = savedButtons ? `?button=${savedButtons.join('&button=')}` : '';
 
-      exchangeCodeForToken(clientId, clientSecret, redirectURL, codeVerifier, code).then((data) => {
+      exchangeCodeForToken(clientId, redirectURL, codeVerifier, code).then((data) => {
         const {
           access_token: newAccessToken,
           refresh_token: newRefreshToken,
@@ -77,7 +77,7 @@ const AuthComponent = (props) => {
       } else {
         sessionStorage.removeItem('pd_buttons');
       }
-      getAuthURL(clientId, clientSecret, redirectURL, codeVerifier).then((url) => {
+      getAuthURL(clientId, redirectURL, codeVerifier).then((url) => {
         const subdomainParams = subdomain ? `&subdomain=${subdomain}&service_region=${region}` : '';
         setAuthURL(`${url}${subdomainParams}`);
       });

src/components/DeprecationAlert/DeprecationAlert.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import {
+  useDisclosure,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+  Box,
+  CloseButton,
+} from '@chakra-ui/react';
+
+import {
+  useTranslation, Trans,
+} from 'react-i18next';
+
+const DeprecationAlertComponent = () => {
+  const {
+    isOpen: isVisible, onClose,
+  } = useDisclosure({ defaultIsOpen: true });
+  const {
+    t,
+  } = useTranslation();
+
+  return isVisible ? (
+    <Alert status="info">
+      <AlertIcon />
+      <Box w="100%">
+        <AlertTitle>{t('PD Live is deprecated')}</AlertTitle>
+        <AlertDescription>
+          <Trans i18nKey="Deprecation">
+            Deprecation Notice
+            <a
+              href="https://support.pagerduty.com/main/docs/operations-console"
+              rel="external nofollow noopener noreferrer"
+              className="external-link"
+              target="_blank"
+            >
+              Operations Console
+            </a>
+          </Trans>
+        </AlertDescription>
+      </Box>
+      <CloseButton
+        alignSelf="flex-start"
+        position="relative"
+        right={-1}
+        top={-1}
+        onClick={onClose}
+      />
+    </Alert>
+  ) : (
+    ''
+  );
+};
+
+export default DeprecationAlertComponent;

src/components/NavigationBar/NavigationBarComponent.jsx

@@ -32,7 +32,7 @@ import {
 } from '@chakra-ui/icons';
 
 import {
-  PD_OAUTH_CLIENT_ID, PD_OAUTH_CLIENT_SECRET,
+  PD_OAUTH_CLIENT_ID,
 } from 'src/config/constants';
 
 import {
@@ -203,7 +203,7 @@ const NavigationBarComponent = () => {
                 onClick={() => {
                   const token = sessionStorage.getItem('pd_access_token');
                   if (token) {
-                    revokeToken(token, PD_OAUTH_CLIENT_ID, PD_OAUTH_CLIENT_SECRET);
+                    revokeToken(token, PD_OAUTH_CLIENT_ID);
                   }
                   userAcceptDisclaimer();
                   userUnauthorize();

src/config/constants.js

@@ -7,7 +7,6 @@ export const PD_ENV = import.meta.env.VITE_PD_ENV || 'localhost-dev';
 
 // Authentication
 export const PD_OAUTH_CLIENT_ID = import.meta.env.VITE_PD_OAUTH_CLIENT_ID || null;
-export const PD_OAUTH_CLIENT_SECRET = import.meta.env.VITE_PD_OAUTH_CLIENT_SECRET || null;
 export const PD_SUBDOMAIN_ALLOW_LIST = import.meta.env.VITE_PD_SUBDOMAIN_ALLOW_LIST || '*';
 export const PD_USER_TOKEN = import.meta.env.VITE_PD_USER_TOKEN || null;
 export const PD_REQUIRED_ABILITY = import.meta.env.VITE_PD_REQUIRED_ABILITY || null;