[NRRPLT-8175] integrate bootstrap react for user nav and bootstrap import popup

8a8b78e9 · Antoine Detailleur · 60b4fee6 · 8a8b78e9 · 8a8b78e9 · 8a8b78e9
Commit 8a8b78e9 authored 4 years ago by Antoine Detailleur
--- a/package-lock.json
+++ b/package-lock.json
@@ -1895,6 +1895,25 @@
        }
      }
    },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
+      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
+      "requires": {
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20"
+      }
+    },
    "@rollup/plugin-node-resolve": {
      "version": "7.1.3",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -2314,6 +2333,14 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "@types/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+      "requires": {
+        "classnames": "*"
+      }
+    },
    "@types/cookie": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.0.tgz",
@@ -2356,6 +2383,11 @@
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
      "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
    },
+    "@types/invariant": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
+      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    },
    "@types/istanbul-lib-coverage": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -2422,11 +2454,34 @@
      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.5.tgz",
      "integrity": "sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ=="
    },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
    "@types/q": {
      "version": "1.5.4",
      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
    },
+    "@types/react": {
+      "version": "16.14.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
+      "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/resolve": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -2435,6 +2490,11 @@
        "@types/node": "*"
      }
    },
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
+    },
    "@types/source-list-map": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -2474,6 +2534,11 @@
        }
      }
    },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
    "@types/webpack": {
      "version": "4.41.25",
      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.25.tgz",
@@ -3793,9 +3858,9 @@
      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
    },
    "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
    },
    "brace-expansion": {
      "version": "1.1.11",
@@ -4201,6 +4266,11 @@
        }
      }
    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
    "clean-css": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4993,6 +5063,11 @@
        }
      }
    },
+    "csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
    "cyclist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5326,6 +5401,15 @@
        "utila": "~0.4"
      }
    },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "dom-serializer": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -8084,6 +8168,14 @@
        }
      }
    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "ip": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -10120,11 +10212,6 @@
        }
      }
    },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
-    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10417,6 +10504,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
    "lodash._reinterpolate": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -13001,6 +13093,15 @@
        "react-is": "^16.8.1"
      }
    },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
    "proxy-addr": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -13179,6 +13280,31 @@
        "whatwg-fetch": "^3.4.1"
      }
    },
+    "react-bootstrap": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.0.tgz",
+      "integrity": "sha512-0BMzgeUAxH126v7VYDzIXbHxQVHSnniPVKpz9fblumdQpWaiElMnnzk+u8h8DoELX0nCXwPlcUzgXqmpncdc2Q==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.21",
+        "@types/classnames": "^2.2.10",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": "^16.9.35",
+        "@types/react-transition-group": "^4.4.0",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^5.1.2",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^4.1.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
    "react-dev-utils": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz",
@@ -13289,6 +13415,26 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
+      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@popperjs/core": "^2.5.3",
+        "@restart/hooks": "^0.3.25",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
    "react-refresh": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -13414,6 +13560,17 @@
        "prop-types": "^15.5.0"
      }
    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
    "read-pkg": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -15916,6 +16073,17 @@
      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
      "dev": true
    },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
    "unicode-canonical-property-names-ecmascript": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -16263,6 +16431,14 @@
        "makeerror": "1.0.x"
      }
    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "watchpack": {
      "version": "1.7.5",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

--- a/package.json
+++ b/package.json
@@ -12,11 +12,10 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "bootstrap": "4.6.0",
+    "bootstrap": "4.5",
    "jszip": "3.2.0",
-    "jquery": "3.6.0",
    "react": "^17.0.1",
-    "react-bootstrap": "1.5.2",
+    "react-bootstrap": "1.4.0",
    "react-dom": "^17.0.1",
    "react-icons": "4.1.0",
    "react-router-dom": "5.2.0",

--- a/src/components/experiment-list/import-experiment-buttons.js
+++ b/src/components/experiment-list/import-experiment-buttons.js
@@ -93,14 +93,14 @@ export default class ImportExperimentButtons extends React.Component {
        {/* Import folder pop-up */}
        {this.state.importFolderResponse
          ? <div className="import-popup">
-            <div variant="success">
+            <div class="alert alert-success" role="alert">
              <p>The experiment folder
                <b>{' ' + this.state.importFolderResponse.zipBaseFolderName}</b> has been succesfully imported as
                <b>{' ' + this.state.importFolderResponse.destFolderName}</b>.
              </p>
            </div>
            <div className="text-right">
-              <button variant="success" onClick={() => this.importFolderPopupClick()}>Got it!</button>
+              <button className="btn btn-success" onClick={() => this.importFolderPopupClick()}>Got it!</button>
            </div>
          </div>
          : null
@@ -109,7 +109,7 @@ export default class ImportExperimentButtons extends React.Component {
        {/* Import zip pop-up */}
        {this.state.importZipResponses
          ? <div className="import-popup">
-            <div>
+            <div class="alert alert-success" role="alert">
              <p>{this.state.importZipResponses.numberOfZips} successfully imported zip files.</p>
            </div>
            <p>The following experiments folders</p>
@@ -117,7 +117,7 @@ export default class ImportExperimentButtons extends React.Component {
            <p>have been successfully imported as:</p>
            <p><b>{this.state.importZipResponses.destFolderName.join(', ')}.</b></p>
            <div className="text-right">
-              <button variant="success" onClick={() => this.importZipPopupClick()}>Got it!</button>
+              <button className="btn btn-success" onClick={() => this.importZipPopupClick()}>Got it!</button>
            </div>
          </div>
          : null
@@ -126,7 +126,7 @@ export default class ImportExperimentButtons extends React.Component {
        {/* Scan pop-up */}
        {this.state.scanStorageResponse
          ? <div className="import-popup">
-            <div>
+            <div class="alert alert-success" role="alert">
              <p>{this.state.scanStorageResponse.addedFoldersNumber} added folders,
                {' ' + this.state.scanStorageResponse.deletedFoldersNumber} deleted folders.</p>
            </div>
@@ -140,7 +140,7 @@ export default class ImportExperimentButtons extends React.Component {
              ? this.state.scanStorageResponse.deletedFolders
              : 'none' }</b></p>
            <div className="text-right">
-              <button variant="success" onClick={() => this.scanStoragePopupClick()}>Got it!</button>
+              <button className="btn btn-success" onClick={() => this.scanStoragePopupClick()}>Got it!</button>
            </div>
          </div>
          : null

--- a/src/components/user-menu/user-menu.js
+++ b/src/components/user-menu/user-menu.js
 import React from 'react';
+import Dropdown from 'react-bootstrap/Dropdown';
 import { FaUserCircle, FaSignOutAlt } from 'react-icons/fa';

 import NrpUserService from '../../services/proxy/nrp-user-service.js';
@@ -37,22 +38,29 @@ export default class UserMenu extends React.Component {
  render() {
    return (
      <div className='user-menu-wrapper'>
-        <div className='dropdown'>
-          <button className='dropdown-toggle' id='dropdownMenuButton'
-            data-toggle="dropdown" aria-haspopup='true' aria-expanded='false'>
-            <FaUserCircle className='user-icon'/>
+        <Dropdown>
+          <Dropdown.Toggle
+            className='dropdown-toggle'
+            variant='success'
+            id='dropdown-basic'
+          >
+            <FaUserCircle className='user-icon' />
            <div className='user-name'>
              {this.state.user ? this.state.user.displayName : 'pending ...'}
            </div>
-          </button>
+          </Dropdown.Toggle>

-          <div className='dropdown-menu' aria-labelledby='dropdownMenuButton'>
-            <div className='dropdown-item' href='#' onClick={this.onClickLogout}>
+          <Dropdown.Menu className='dropdown-menu'>
+            <Dropdown.Item
+              className='dropdown-item'
+              onClick={this.onClickLogout}
+            >
              <FaSignOutAlt className='user-icon' />
-              Logout
-            </div>
-          </div>
-        </div>
+               Logout
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+
      </div>
    );
  }