From 1557f95942ce7aae80cdba5524fd01bddae05594 Mon Sep 17 00:00:00 2001
From: Martin Stone <martindstone@me.com>
Date: Fri, 17 Nov 2023 13:47:05 -0500
Subject: [PATCH] add button= URL param to have extra buttons in the UI

---
 src/components/Auth/AuthComponent.jsx         | 14 +++-
 .../IncidentActionsComponent.jsx              | 18 +++++
 .../subcomponents/ExtraButton.jsx             | 72 +++++++++++++++++++
 src/config/constants.js                       | 13 ++++
 4 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/components/IncidentActions/subcomponents/ExtraButton.jsx

diff --git a/src/components/Auth/AuthComponent.jsx b/src/components/Auth/AuthComponent.jsx
index b2f730de..038c78be 100644
--- a/src/components/Auth/AuthComponent.jsx
+++ b/src/components/Auth/AuthComponent.jsx
@@ -30,6 +30,7 @@ const AuthComponent = (props) => {
   const code = urlParams.get('code');
   const subdomain = urlParams.get('subdomain');
   const region = urlParams.get('service_region') || 'us';
+  const buttons = urlParams.getAll('button');
 
   let codeVerifier = sessionStorage.getItem('code_verifier');
   let {
@@ -50,12 +51,23 @@ const AuthComponent = (props) => {
         (token) => {
           sessionStorage.removeItem('code_verifier');
           sessionStorage.setItem('pd_access_token', token);
-          window.location.assign(redirectURL);
+          // if there were button params on the first load, load the button params and put them back on the URL
+          const savedButtonsStr = sessionStorage.getItem('pd_buttons');
+          const savedButtons = savedButtonsStr ? JSON.parse(savedButtonsStr) : [];
+          const buttonParams = savedButtons ? `?button=${savedButtons.join('&button=')}` : '';
+          window.location.assign(redirectURL + buttonParams);
         },
       );
     } else if (!accessToken) {
       codeVerifier = createCodeVerifier();
       sessionStorage.setItem('code_verifier', codeVerifier);
+      // if the user wants to use a button, save the button params in session storage
+      // (because we can't pass them through the OAuth flow)
+      if (buttons.length > 0) {
+        sessionStorage.setItem('pd_buttons', JSON.stringify(buttons));
+      } else {
+        sessionStorage.removeItem('pd_buttons');
+      }
       getAuthURL(clientId, clientSecret, redirectURL, codeVerifier).then((url) => {
         const subdomainParams = subdomain ? `&subdomain=${subdomain}&service_region=${region}` : '';
         setAuthURL(`${url}${subdomainParams}`);
diff --git a/src/components/IncidentActions/IncidentActionsComponent.jsx b/src/components/IncidentActions/IncidentActionsComponent.jsx
index cc89063a..2409f6ee 100644
--- a/src/components/IncidentActions/IncidentActionsComponent.jsx
+++ b/src/components/IncidentActions/IncidentActionsComponent.jsx
@@ -4,6 +4,10 @@ import {
   Box, Flex,
 } from '@chakra-ui/react';
 
+import {
+  EXTRA_BUTTONS,
+} from 'src/config/constants';
+
 import SelectedIncidentsComponent from './subcomponents/SelectedIncidentsComponent';
 
 import AcknowledgeButton from './subcomponents/AcknowledgeButton';
@@ -16,6 +20,7 @@ import EscalateMenu from './subcomponents/EscalateMenu';
 import SnoozeMenu from './subcomponents/SnoozeMenu';
 import PriorityMenu from './subcomponents/PriorityMenu';
 import RunActionMenu from './subcomponents/RunActionMenu';
+import ExtraButton from './subcomponents/ExtraButton';
 
 import './IncidentActionsComponent.scss';
 
@@ -46,6 +51,19 @@ const IncidentActionsComponent = () => (
       <PriorityMenu />
       <AddNoteButton />
       <RunActionMenu />
+      {EXTRA_BUTTONS.map(({
+        label, url, width, height,
+      }) => (
+        <>
+          <ExtraButton
+            key={url}
+            label={label}
+            url={url}
+            width={width}
+            height={height}
+          />
+        </>
+      ))}
     </Box>
   </Flex>
 );
diff --git a/src/components/IncidentActions/subcomponents/ExtraButton.jsx b/src/components/IncidentActions/subcomponents/ExtraButton.jsx
new file mode 100644
index 00000000..25a5d322
--- /dev/null
+++ b/src/components/IncidentActions/subcomponents/ExtraButton.jsx
@@ -0,0 +1,72 @@
+import React, {
+  useState,
+} from 'react';
+import {
+  Box,
+  Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverBody,
+  PopoverHeader,
+} from '@chakra-ui/react';
+
+const isInt = (value) => {
+  const x = parseInt(value, 10);
+  return !Number.isNaN(x) && x.toString() === value;
+};
+
+const ExtraButton = ({
+  label, url, width, height,
+}) => {
+  // State to control the open state of the popover
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Function to open the popover
+  const openPopover = () => setIsOpen(true);
+
+  // Function to close the popover
+  const closePopover = () => setIsOpen(false);
+
+  return (
+    <Popover isOpen={isOpen} onClose={closePopover} closeOnBlur={false}>
+      <PopoverTrigger>
+        <Button
+          onClick={openPopover}
+          id={`incident-action-extra-button-${url}`}
+          size="sm"
+          mr={2}
+          mb={2}
+        >
+          {label}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        zIndex="999"
+        w={isInt(width) ? `${width}vw` : '80vw'}
+        h={isInt(height) ? `${height}vh` : '80vh'}
+      >
+        <PopoverHeader><b>{label}</b></PopoverHeader>
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverBody height="calc(100% - 60px)">
+          <Box flex="1" overflow="hidden" height="100%">
+            <iframe
+              src={url}
+              title={label}
+              style={{
+                width: '100%',
+                height: '100%',
+                border: 'none',
+              }}
+            />
+          </Box>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default ExtraButton;
diff --git a/src/config/constants.js b/src/config/constants.js
index 306ceee1..ebc7e742 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -36,3 +36,16 @@ export const DATE_FORMAT = 'LL \\at h:mm:ss A';
 export const DEBUG_DISABLE_POLLING = debugParams.get('disable-polling') || false;
 export const DEBUG_SINCE_DATE = debugParams.get('since') || null;
 export const DEBUG_UNTIL_DATE = debugParams.get('until') || null;
+
+export const EXTRA_BUTTONS = debugParams.getAll('button').map((button) => {
+  const [label, url, width, height] = button.split(',');
+  if (!label || !url) {
+    return null;
+  }
+  return {
+    label,
+    url,
+    width,
+    height,
+  };
+}).filter((button) => !!button);