#3698: Fix syntax & prevent white screens

Update bootstrap 3 to 5 & react bootstrap 0.33.1 to 2.0.0-beta
NCI-Agency · Aug 11, 2021 · 722d6b1 · 722d6b1
1 parent 623428c
commit 722d6b1
Show file tree

Hide file tree

Showing 89 changed files with 695 additions and 592 deletions.
diff --git a/anet-dictionary.yml b/anet-dictionary.yml
@@ -47,7 +47,7 @@ fields:
     longName:
       label: Objective / Effort description
       placeholder: Enter an objective / effort description, example ....
-      componentClass: textarea
+      as: textarea
       style:
         height: 400px
     topLevel:
@@ -59,7 +59,7 @@ fields:
       longName:
         label: Description of this Objective
         placeholder: Enter a description for this Objective, example ....
-        componentClass: textarea
+        as: textarea
         style:
           height: 400px
       assessments:
@@ -85,7 +85,7 @@ fields:
       longName:
         label: Effort description
         placeholder: Enter an effort description, example ....
-        componentClass: textarea
+        as: textarea
         style:
           height: 400px
       assessments:
@@ -199,7 +199,7 @@ fields:
             label: Questions
             helpText: JSON that defines the assessment (you need to know what you are doing)
             placeholder: Fill in valid JSON
-            componentClass: textarea
+            as: textarea
             style:
               height: 200px
 
@@ -467,7 +467,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        componentClass: textarea
+        as: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]
@@ -569,7 +569,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        componentClass: textarea
+        as: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]
@@ -650,7 +650,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        componentClass: textarea
+        as: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]
@@ -732,7 +732,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        componentClass: textarea
+        as: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]

diff --git a/client/config/wdio.config.js b/client/config/wdio.config.js
@@ -110,7 +110,7 @@ const config = {
   waitforTimeout: 10000,
   //
   // Default timeout in milliseconds for request
-  // if Selenium Grid doesn't send response
+  // if Selenium Container doesn't send response
   connectionRetryTimeout: 90000,
   //
   // Default request retries count

diff --git a/client/package.json b/client/package.json
@@ -118,7 +118,7 @@
     "@projectstorm/react-diagrams-core": "6.6.1",
     "@projectstorm/react-diagrams-defaults": "6.6.1",
     "@projectstorm/react-diagrams-routing": "6.6.1",
-    "bootstrap": "3.4.1",
+    "bootstrap": "5.1.0",
     "change-case": "4.1.2",
     "classnames": "2.3.1",
     "closest": "0.0.1",
@@ -155,7 +155,7 @@
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-avatar-edit": "1.0.0",
-    "react-bootstrap": "0.33.1",
+    "react-bootstrap": "2.0.0-beta.4",
     "react-confirm-bootstrap": "5.3.1",
     "react-container-dimensions": "1.4.1",
     "react-dom": "16.14.0",

diff --git a/client/src/components/AdvancedSearch.js b/client/src/components/AdvancedSearch.js
@@ -1,4 +1,4 @@
-import { Classes, Menu, MenuItem } from "@blueprintjs/core"
+import { Classes } from "@blueprintjs/core"
 import { Popover2, Popover2InteractionKind } from "@blueprintjs/popover2"
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"
 import styled from "@emotion/styled"
@@ -18,9 +18,10 @@ import React, { useState } from "react"
 import {
   Button,
   Col,
-  ControlLabel,
+  Dropdown,
   FormControl,
-  FormGroup
+  FormGroup,
+  Row
 } from "react-bootstrap"
 import { connect } from "react-redux"
 import { useHistory } from "react-router-dom"
@@ -74,20 +75,21 @@ const AdvancedSearch = ({
     existingKeys.length < Object.keys(filterDefs).length
 
   const advancedSearchMenuContent = (
-    <Menu
+    <Dropdown
       className={Classes.POPOVER_DISMISS}
       style={{ maxHeight: "400px", overflowY: "auto" }}
     >
       {Object.keys(filterDefs).map(filterKey => (
-        <MenuItem
+        <Dropdown.Item
           disabled={existingKeys.includes(filterKey)}
           key={filterKey}
           onClick={() => addFilter(filterKey)}
-          text={filterKey}
-          shouldDismissPopover={false}
-        />
+          // shouldDismissPopover={false}
+        >
+          {filterKey}
+        </Dropdown.Item>
       ))}
-    </Menu>
+    </Dropdown>
   )
 
   const possibleFilterTypes = Object.keys(ALL_FILTERS).filter(type =>
@@ -196,7 +198,7 @@ const AdvancedSearch = ({
                       }
                     }}
                   >
-                    <Button bsStyle="link" id="addFilterDropdown">
+                    <Button variant="link" id="addFilterDropdown">
                       + Add {filters.length > 0 && "another"} filter
                     </Button>
                   </Popover2>
@@ -218,7 +220,7 @@ const AdvancedSearch = ({
                   Cancel
                 </Button>
                 <Button
-                  bsStyle="primary"
+                  variant="primary"
                   className={Classes.POPOVER_DISMISS}
                   type="submit"
                   intent="success"
@@ -335,27 +337,29 @@ const SearchFilter = ({
 
   return (
     <FormGroup controlId={queryKey}>
-      <Col xs={12} sm={3} lg={2} componentClass={ControlLabel}>
-        {label}
-      </Col>
-      <Col xs={10} sm={8} lg={9}>
-        <div>
-          <ChildComponent
-            value={filter.value || ""}
-            onChange={onChange}
-            orgFilterQueryParams={orgFilterQueryParams}
-            {...element.props}
+      <Row>
+        <Col xs={12} sm={3} lg={2}>
+          {label}
+        </Col>
+        <Col xs={10} sm={8} lg={9}>
+          <div>
+            <ChildComponent
+              value={filter.value || ""}
+              onChange={onChange}
+              orgFilterQueryParams={orgFilterQueryParams}
+              {...element.props}
+            />
+          </div>
+        </Col>
+        <Col xs={1} sm={1} lg={1}>
+          <RemoveButton
+            title="Remove this filter"
+            altText="Remove this filter"
+            onClick={() => onRemove(filter)}
+            buttonStyle="link"
           />
-        </div>
-      </Col>
-      <Col xs={1} sm={1} lg={1}>
-        <RemoveButton
-          title="Remove this filter"
-          altText="Remove this filter"
-          onClick={() => onRemove(filter)}
-          buttonStyle="link"
-        />
-      </Col>
+        </Col>
+      </Row>
     </FormGroup>
   )
 

diff --git a/client/src/components/AdvisorReports/AdvisorReportsTable.js b/client/src/components/AdvisorReports/AdvisorReportsTable.js
@@ -3,8 +3,8 @@ import API from "api"
 import AdvisorReportsRow from "components/AdvisorReports/AdvisorReportsRow"
 import AdvisorReportsTableHead from "components/AdvisorReports/AdvisorReportsTableHead"
 import {
-  PageDispatchersPropType,
   mapPageDispatchersToProps,
+  PageDispatchersPropType,
   useBoilerplate
 } from "components/Page"
 import PropTypes from "prop-types"
@@ -55,7 +55,7 @@ const AdvisorReportsTable = ({ pageDispatchers, columnGroups, orgUuid }) => {
   ))
 
   return (
-    <Table striped bordered condensed hover responsive>
+    <Table striped bordered hover responsive>
       <caption>
         Shows reports submitted and engagements attended per week for each{" "}
         {Settings.fields.advisor.person.name} in the organization

diff --git a/client/src/components/AdvisorReports/OrganizationAdvisorsTable.js b/client/src/components/AdvisorReports/OrganizationAdvisorsTable.js
@@ -63,7 +63,7 @@ const OrganizationAdvisorsTable = ({
 
   return (
     <div className="organization-advisors-table">
-      <Table striped bordered condensed hover responsive>
+      <Table striped bordered hover responsive>
         <caption>
           Shows reports submitted and engagements attended per week by an
           organization's {pluralize(Settings.fields.advisor.person.name)}

diff --git a/client/src/components/AssignPersonModal.js b/client/src/components/AssignPersonModal.js
@@ -13,8 +13,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react"
 import {
   Button,
   Col,
+  Container,
   FormGroup,
-  Grid,
   Modal,
   Row,
   Table
@@ -153,7 +153,7 @@ const AssignPersonModal = ({ position, showModal, onCancel, onSuccess }) => {
   }
 
   return (
-    <Modal show={showModal} onHide={closeModal}>
+    <Modal centered show={showModal} onHide={closeModal}>
       <Modal.Header closeButton>
         <Modal.Title>
           Assign Person to the{" "}
@@ -167,7 +167,7 @@ const AssignPersonModal = ({ position, showModal, onCancel, onSuccess }) => {
             {!removeUser && (
               <>
                 <Button
-                  bsStyle="danger"
+                  variant="danger"
                   onClick={() => {
                     if (
                       Position.isAdvisor(latestPositionProp.current) ||
@@ -204,7 +204,7 @@ const AssignPersonModal = ({ position, showModal, onCancel, onSuccess }) => {
           </div>
         )}
         {!removeUser && (
-          <Grid fluid>
+          <Container fluid>
             <Row>
               <Col md={12}>
                 <FormGroup controlId="person" required>
@@ -227,7 +227,7 @@ const AssignPersonModal = ({ position, showModal, onCancel, onSuccess }) => {
               </Col>
             </Row>
             {person && person.uuid && (
-              <Table striped condensed hover responsive>
+              <Table striped hover responsive>
                 <thead>
                   <tr>
                     <th>Rank</th>
@@ -253,7 +253,7 @@ const AssignPersonModal = ({ position, showModal, onCancel, onSuccess }) => {
               </Table>
             )}
             {<Messages error={error} />}
-          </Grid>
+          </Container>
         )}
       </Modal.Body>
       <Modal.Footer>
@@ -277,7 +277,7 @@ const AssignPersonModal = ({ position, showModal, onCancel, onSuccess }) => {
             }
             setRemoveUser(false)
           }}
-          bsStyle="primary"
+          variant="primary"
           className="save-button"
           type="submit"
         >

diff --git a/client/src/components/AssignPositionModal.js b/client/src/components/AssignPositionModal.js
@@ -20,8 +20,8 @@ import React, {
 import {
   Button,
   Col,
+  Container,
   FormGroup,
-  Grid,
   Modal,
   Row,
   Table
@@ -207,7 +207,7 @@ const AssignPositionModal = ({ person, showModal, onCancel, onSuccess }) => {
   }
 
   return (
-    <Modal show={showModal} onHide={closeModal}>
+    <Modal centered show={showModal} onHide={closeModal}>
       <Modal.Header closeButton>
         <Modal.Title>
           Set Position for{" "}
@@ -220,7 +220,7 @@ const AssignPositionModal = ({ person, showModal, onCancel, onSuccess }) => {
             {!removeUser && (
               <>
                 <Button
-                  bsStyle="danger"
+                  variant="danger"
                   onClick={() => {
                     if (
                       Position.isAdvisor(latestPersonProp.current.position) ||
@@ -251,7 +251,7 @@ const AssignPositionModal = ({ person, showModal, onCancel, onSuccess }) => {
           </div>
         )}
         {!removeUser && (
-          <Grid fluid>
+          <Container fluid>
             <Row>
               <Col md={12}>
                 <FormGroup controlId="position">
@@ -278,7 +278,7 @@ const AssignPositionModal = ({ person, showModal, onCancel, onSuccess }) => {
               </Col>
             </Row>
             {newPosition.uuid && (
-              <Table striped condensed hover responsive>
+              <Table striped hover responsive>
                 <thead>
                   <tr>
                     <th>Organization</th>
@@ -304,7 +304,7 @@ const AssignPositionModal = ({ person, showModal, onCancel, onSuccess }) => {
               </Table>
             )}
             {<Messages error={error} />}
-          </Grid>
+          </Container>
         )}
       </Modal.Body>
       <Modal.Footer>
@@ -332,7 +332,7 @@ const AssignPositionModal = ({ person, showModal, onCancel, onSuccess }) => {
             }
             setRemoveUser(false)
           }}
-          bsStyle="primary"
+          variant="primary"
         >
           Save
         </Button>

diff --git a/client/src/components/AvatarEditModal.js b/client/src/components/AvatarEditModal.js
@@ -11,7 +11,7 @@ const AvatarEditModal = ({ title, onAvatarUpdate }) => {
     <div>
       <button onClick={open}>{title}</button>
 
-      <Modal show={showModal} onHide={close}>
+      <Modal centered show={showModal} onHide={close}>
         <Modal.Header closeButton>
           <Modal.Title>{title}</Modal.Title>
         </Modal.Header>