Bump bootstrap from 4.6.2 to 5.0.0 and swap some components to chakra-ui to fix styling breaking changes

package.json

@@ -21,7 +21,7 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.17",
     "axios": "^1.7.4",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.0.0",
     "bottleneck": "^2.19.5",
     "chakra-react-select": "^4.7.0",
     "date-fns": "^2.29.3",

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>
   );

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>
   );

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>
   );
 };

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>
       );

yarn.lock

@@ -5704,10 +5704,10 @@ boolify@^1.0.1:
   resolved "https://registry.yarnpkg.com/boolify/-/boolify-1.0.1.tgz#b5c09e17cacd113d11b7bb3ed384cc012994d86b"
   integrity sha512-ma2q0Tc760dW54CdOyJjhrg/a54317o1zYADQJFgperNGKIKgAUGIcKnuMiff8z57+yGlrGNEt4lPgZfCgTJgA==
 
-bootstrap@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
-  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+bootstrap@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0.tgz#97635ac0e0d6cb466700ebf0fd266bfabf352ed2"
+  integrity sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==
 
 bottleneck@^2.19.5:
   version "2.19.5"