Merge pull request #503 from PagerDuty/release/0.14.1-beta.0

PagerDuty · Sep 23, 2024 · 7e7ac79 · 7e7ac79
2 parents cd6d4e0 + 21d9bdc
commit 7e7ac79
Show file tree

Hide file tree

Showing 7 changed files with 1,628 additions and 1,449 deletions.
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "pd-live-react",
   "homepage": "https://pagerduty.github.io/pd-live-react",
-  "version": "0.14.0-beta.0",
+  "version": "0.14.1-beta.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.0",
-    "@datadog/browser-rum": "^5.14.0",
-    "@datadog/datadog-ci": "^2.40.1",
+    "@datadog/browser-rum": "^5.27.0",
+    "@datadog/datadog-ci": "^2.43.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -20,11 +20,11 @@
     "@types/node": "^20.10.8",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.17",
-    "axios": "^1.6.7",
-    "bootstrap": "^4.6.2",
+    "axios": "^1.7.4",
+    "bootstrap": "^5.0.0",
     "bottleneck": "^2.19.5",
     "chakra-react-select": "^4.7.0",
-    "date-fns": "^2.29.3",
+    "date-fns": "^4.1.0",
     "font-awesome": "^4.7.0",
     "framer-motion": "^10.16.2",
     "fuse.js": "^7.0.0",
@@ -54,7 +54,7 @@
     "react-window": "^1.8.10",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.2.1",
+    "redux-saga": "^1.3.0",
     "styled-components": "^6.0.4",
     "use-debounce": "^9.0.3",
     "validator": "^13.12.0",
@@ -99,8 +99,8 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.5",
     "@babel/core": "^7.22.17",
-    "@babel/eslint-parser": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.22.5",
     "@cypress/react": "^8.0.2",
     "@faker-js/faker": "^8.0.2",
@@ -128,7 +128,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-styled-components-a11y": "^2.1.35",
     "genversion": "^3.1.1",
     "gh-pages": "^6.1.1",
@@ -147,7 +147,7 @@
     "redux-saga-test-plan": "^4.0.6",
     "sass": "^1.77.5",
     "string.prototype.replaceall": "^1.0.10",
-    "vite": "^4.5.3",
+    "vite": "^4.5.5",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svgr": "^4.2.0",

diff --git a/src/components/AddNoteModal/AddNoteModalComponent.jsx b/src/components/AddNoteModal/AddNoteModalComponent.jsx
@@ -6,8 +6,17 @@ import {
 } from 'react-redux';
 
 import {
-  Modal, Form, Button,
-} from 'react-bootstrap';
+  Button,
+  FormControl,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Textarea,
+} from '@chakra-ui/react';
 
 import {
   useTranslation,
@@ -41,36 +50,37 @@ const AddNoteModalComponent = ({
 
   return (
     <div className="add-note-modal-ctr">
-      <Modal show={displayAddNoteModal} onHide={toggleDisplayAddNoteModal}>
-        <Modal.Header closeButton>
-          <Modal.Title>{t('Add Note')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Form>
-            <Form.Control
-              id="add-note-textarea"
-              as="textarea"
-              placeholder={t('Add Note to incident(s) here')}
-              minLength={1}
-              onChange={(e) => {
-                setNote(e.target.value);
-              }}
-            />
-          </Form>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button
-            id="add-note-button"
-            variant="primary"
-            onClick={() => addNote(selectedRows, note)}
-            disabled={note === ''}
-          >
-            {t('Add Note')}
-          </Button>
-          <Button variant="light" onClick={toggleDisplayAddNoteModal}>
-            {t('Cancel')}
-          </Button>
-        </Modal.Footer>
+      <Modal isOpen={displayAddNoteModal} onClose={() => { toggleDisplayAddNoteModal(); }}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{t('Add Note')}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <FormControl>
+              <Textarea
+                id="add-note-textarea"
+                placeholder={t('Add Note to incident(s) here')}
+                minLength={1}
+                onChange={(e) => {
+                  setNote(e.target.value);
+                }}
+              />
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              id="add-note-button"
+              colorScheme="blue"
+              onClick={() => addNote(selectedRows, note)}
+              disabled={note === ''}
+            >
+              {t('Add Note')}
+            </Button>
+            <Button variant="light" onClick={toggleDisplayAddNoteModal}>
+              {t('Cancel')}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
       </Modal>
     </div>
   );

diff --git a/src/components/IncidentTable/subcomponents/EmptyIncidentsComponent.jsx b/src/components/IncidentTable/subcomponents/EmptyIncidentsComponent.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   Badge,
-} from 'react-bootstrap';
+} from '@chakra-ui/react';
 
 import {
   useTranslation,
@@ -20,7 +20,7 @@ const EmptyIncidentsComponent = ({
     <div className="empty-incidents">
       <EmptyIncidents />
       <h1 className="empty-incidents-badge">
-        <Badge bg="none">{badgeMessage}</Badge>
+        <Badge>{badgeMessage}</Badge>
       </h1>
     </div>
   );

diff --git a/src/components/IncidentTable/subcomponents/QueryActiveComponent.jsx b/src/components/IncidentTable/subcomponents/QueryActiveComponent.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
-  Container, Row, Spinner,
-} from 'react-bootstrap';
+  Container, Spinner,
+} from '@chakra-ui/react';
 import {
   useTranslation,
 } from 'react-i18next';
@@ -11,14 +11,12 @@ const QueryActiveComponent = () => {
     t,
   } = useTranslation();
   return (
-    <Container className="query-active-ctr" fluid>
+    <Container className="query-active-ctr" centerContent>
       <br />
-      <Row className="justify-content-md-center">
-        <Spinner className="" animation="border" role="status" variant="success" />
-        <h5 className="querying-incidents">
-          <b>{t('Querying PagerDuty API')}</b>
-        </h5>
-      </Row>
+      <Spinner />
+      <h5 className="querying-incidents">
+        <b>{t('Querying PagerDuty API')}</b>
+      </h5>
     </Container>
   );
 };

diff --git a/src/config/column-generator.jsx b/src/config/column-generator.jsx
@@ -19,10 +19,7 @@ import {
 } from 'pretty-print-error';
 
 import {
-  Badge,
-} from 'react-bootstrap';
-import {
-  Box, Link, Skeleton, Tooltip,
+  Box, Link, Skeleton, Tooltip, Badge,
 } from '@chakra-ui/react';
 import {
   ChevronDownIcon, ChevronUpIcon, NotAllowedIcon,
@@ -467,15 +464,15 @@ export const defaultIncidentColumns = () => [
       let elem;
       if (urgency === HIGH) {
         elem = (
-          <Badge className="urgency-badge" bg="primary" text="light">
+          <Badge className="urgency-badge" colorScheme="blue">
             <ChevronUpIcon />
             {' '}
             {i18next.t('High')}
           </Badge>
         );
       } else if (urgency === LOW) {
         elem = (
-          <Badge className="urgency-badge" bg="secondary" text="dark">
+          <Badge className="urgency-badge" colorScheme="gray">
             <ChevronDownIcon />
             {' '}
             {i18next.t('Low')}
@@ -684,33 +681,28 @@ export const defaultAlertsColumns = () => [
         return renderPlainTextAlertCell({ value, cell });
       }
       const i18nValue = i18next.t(value);
-      let variant;
-      let text = 'dark';
+      let colorScheme;
       switch (value) {
         case 'critical':
-          variant = 'dark';
-          text = 'light';
+          colorScheme = 'red';
           break;
         case 'error':
-          variant = 'danger';
-          text = 'light';
+          colorScheme = 'orange';
           break;
         case 'warning':
-          variant = 'warning';
+          colorScheme = 'yellow';
           break;
         case 'info':
-          variant = 'info';
+          colorScheme = 'green';
           break;
         case '--':
-          variant = null;
-          text = null;
+          colorScheme = null;
           break;
         default:
-          variant = 'secondary';
-          text = 'dark';
+          colorScheme = 'gray';
       }
       return (
-        <Badge className="severity-badge" bg={variant} text={text}>
+        <Badge className="severity-badge" colorScheme={colorScheme}>
           {i18nValue}
         </Badge>
       );

diff --git a/src/config/version.js b/src/config/version.js