Merge pull request #3770 from NCI-Agency/GH-3698-Replace-Bootstrap-3-…

…with-something-else Update bootstrap 3 to bootstrap 5
NCI-Agency · Oct 19, 2021 · 40515f7 · 40515f7
2 parents 14e76ff + 62bd670
commit 40515f7
Show file tree

Hide file tree

Showing 176 changed files with 3,242 additions and 2,526 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ logs/*
 *.swp
 # ignore personal ide settings folders
 .vscode/
+client/jsconfig.json
 
 # Mobile Tools for Java (J2ME)
 .mtj.tmp/

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:
@@ -148,6 +148,18 @@ fields:
         RED:
           label: Red
           color: '#ff8279'
+    customFieldEnum2:
+      label: Project future
+      enum:
+        BLUE:
+          label: Blue
+          color: '#0000ff'
+        WHITE:
+          label: White
+          color: '#ffffff'
+        BLACK:
+          label: Black
+          color: '#000000'
     taskedOrganizations:
       label: Tasked organizations
       placeholder: Search for an organization...
@@ -199,7 +211,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
 
@@ -270,13 +282,13 @@ fields:
         helpText: Basic / Intermediate / Advanced
         visibleWhen: $[?(@ && @.multipleButtons && @.multipleButtons.indexOf('train') != -1)]
         levels:
-          - color: lightGray
+          - color: yellow
             endValue: 3
             label: beginner beginner beginner beginner beginner beginner beginner beginner beginner beginner
-          - color: lightGray
+          - color: orange
             endValue: 7
             label: intermediate
-          - color: lightGray
+          - color: blue
             endValue: 10
             label: advanced advanced advanced advanced
       trainingDate:
@@ -469,7 +481,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')]
@@ -572,7 +584,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')]
@@ -653,7 +665,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')]
@@ -735,7 +747,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')]
@@ -1158,7 +1170,7 @@ fields:
                   color: '#c2ffb3'
                 "2":
                   label: two
-                  color: '#ff8279'
+                  color: '#ffe396'
                 "3":
                   label: three
                   color: '#ff8279'

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
@@ -3,11 +3,9 @@ const CircularDependencyPlugin = require("circular-dependency-plugin")
 const ContextReplacementPlugin = require("webpack/lib/ContextReplacementPlugin")
 const CopyWebpackPlugin = require("copy-webpack-plugin")
 const ESLintPlugin = require("eslint-webpack-plugin")
-const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const webpack = require("webpack")
 const paths = require("./paths")
 
-const devMode = process.env.NODE_ENV !== "production"
 const commonConfig = {
   module: {
     rules: [
@@ -71,7 +69,7 @@ const commonConfig = {
       {
         test: /\.css$/,
         use: [
-          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
+          "style-loader",
           { loader: "css-loader", options: { importLoaders: 1 } },
           "postcss-loader"
         ]
@@ -135,7 +133,7 @@ module.exports = {
       // new webpack.optimize.CommonsChunkPlugin({
       //     name: 'manifest'
       //   })
-    ].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
+    ],
     cache: {
       type: "filesystem",
       buildDependencies: {

diff --git a/client/package.json b/client/package.json
@@ -87,9 +87,10 @@
     "jest": "27.2.5",
     "js-yaml": "4.1.0",
     "json-loader": "0.5.7",
-    "mini-css-extract-plugin": "2.4.2",
     "moment-timezone": "0.5.33",
     "postcss": "8.3.9",
+    "postcss-calc": "8.0.0",
+    "postcss-custom-properties": "12.0.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.1.1",
     "prettier-eslint-cli": "5.0.1",
@@ -122,7 +123,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.3",
     "change-case": "4.1.2",
     "classnames": "2.3.1",
     "closest": "0.0.1",
@@ -155,8 +156,7 @@
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-avatar-edit": "1.1.0",
-    "react-bootstrap": "0.33.1",
-    "react-confirm-bootstrap": "5.3.1",
+    "react-bootstrap": "2.0.0-rc.1",
     "react-container-dimensions": "1.4.1",
     "react-dom": "16.14.0",
     "react-moment-proptypes": "1.8.1",
@@ -214,6 +214,7 @@
       "json"
     ],
     "moduleNameMapper": {
+      "^d3$": "<rootDir>/node_modules/d3/dist/d3.min.js",
       "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
       "^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
     },

diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -1,3 +1,13 @@
 module.exports = {
-  plugins: [require("autoprefixer"), require("postcss-flexbugs-fixes")]
+  plugins: [
+    require("postcss-custom-properties")({
+      preserve: false, // completely reduce all css vars
+      importFrom: [
+        "src/fullcalendar-vars.css" // look here for the new values
+      ]
+    }),
+    require("postcss-calc"),
+    require("autoprefixer"),
+    require("postcss-flexbugs-fixes")
+  ]
 }
diff --git a/client/src/bootstrapOverrides.css b/client/src/bootstrapOverrides.css
@@ -0,0 +1,91 @@
+:root {
+  --anet-blue: rgb(0, 113, 188);
+  --anet-blue-dark: rgb(0, 92, 153);
+}
+
+.btn {
+  font-size: 0.9rem;
+}
+
+.btn-primary {
+  background-color: var(--anet-blue);
+  border-color: var(--anet-blue);
+}
+.btn-primary:hover {
+  background-color: var(--anet-blue-dark);
+  border-color: var(--anet-blue-dark);
+}
+.btn-check:checked + .btn-primary,
+.btn-check:active + .btn-primary,
+.btn-primary:active,
+.btn-primary.active,
+.show > .btn-primary.dropdown-toggle {
+  background-color: var(--anet-blue-dark);
+  border-color: var(--anet-blue-dark);
+}
+.btn-check:focus + .btn-primary,
+.btn-primary:focus {
+  background-color: var(--anet-blue-dark);
+  border-color: var(--anet-blue-dark);
+}
+.btn-primary:disabled,
+.btn-primary.disabled {
+  background-color: var(--anet-blue);
+  border-color: var(--anet-blue);
+}
+
+.btn-outline-primary {
+  color: var(--anet-blue);
+  border-color: var(--anet-blue);
+}
+.btn-outline-primary:hover {
+  color: white;
+  background-color: var(--anet-blue);
+  border-color: var(--anet-blue);
+}
+
+.btn-link {
+  color: var(--anet-blue);
+  font-size: 15px;
+}
+.btn-link:hover {
+  color: var(--anet-blue-dark);
+}
+
+.nav-link {
+  color: var(--anet-blue);
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  background-color: var(--anet-blue);
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  background-color: var(--anet-blue);
+}
+
+.page-link {
+  color: var(--anet-blue);
+}
+.page-item.active .page-link {
+  background-color: var(--anet-blue);
+  border-color: var(--anet-blue);
+}
+
+.form-check-input:checked {
+  background-color: var(--anet-blue);
+  border-color: var(--anet-blue);
+}
+
+.bg-primary {
+  background-color: var(--anet-blue) !important;
+}
+
+/* Use bootstrap 3 styling for blockquotes */
+blockquote {
+  padding: 10px 20px;
+  margin: 0 0 20px;
+  font-size: 17.5px;
+  border-left: 5px solid #eeeeee;
+}