add button= URL param to have extra buttons in the UI

PagerDuty · Jan 5, 2024 · 1557f95 · 1557f95
1 parent 8efb8dc
commit 1557f95
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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);