chore: update dependencies

.nvmrc

@@ -1 +1 @@
-v14.16.0
+v20.19.0

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+}

package.json

@@ -1,24 +1,37 @@
 {
   "name": "root",
   "private": true,
+  "dependencies": {
+    "signalfx": "^8.0.1"
+  },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^1.9.0",
-    "@typescript-eslint/parser": "^1.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "^7.1.0",
-    "eslint-config-react-app": "^4.0.1",
+    "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "^3.9.1",
     "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^1.6.0",
-    "eslint": "5.12.0",
-    "eslint-plugin-flowtype": "^2.50.3",
-    "babel-eslint": "^9.0.0",
     "jest-junit": "^12.0.0",
-    "lerna": "^3.14.1",
+    "lerna": "^8.2.2",
     "prettier": "^1.17.1",
-    "typescript": "3.9.7"
+    "typescript": "4.9.5"
+  },
+  "resolutions": {
+    "property-expr": "^2.0.3",
+    "nth-check": "^2.0.1",
+    "prismjs": "^1.30.0",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.1",
+    "brace-expansion": "^1.1.11",
+    "postcss": "^8.4.31",
+    "sass-loader": "16.0.5",
+    "resolve-url-loader": "5.0.0"
   },
   "scripts": {
     "bootstrap": "lerna bootstrap",
@@ -38,8 +51,5 @@
   },
   "workspaces": [
     "packages/*"
-  ],
-  "dependencies": {
-    "signalfx": "^7.0.1"
-  }
+  ]
 }

packages/client/package.json

@@ -8,12 +8,12 @@
   "license": "UNLICENSED",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.13",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "autobind-decorator": "^2.4.0",
-    "axios": "^0.21.1",
-    "bootstrap": "^4.5.3",
+    "axios": "^0.30.0",
+    "bootstrap": "^5.0.0",
     "capitalize": "^2.0.0",
     "chart.js": "^2.9.4",
     "classnames": "^2.2.6",
@@ -23,55 +23,56 @@
     "github-markdown-css": "^4.0.0",
     "highlight.js": "^10.5.0",
     "human-format": "^0.11.0",
+    "jquery": "^3.5.1",
     "js-yaml": "^4.0.0",
     "loglevel": "^1.7.1",
-    "marked": "^1.2.7",
+    "marked": "^4.3.0",
     "mobx": "^5.9.4",
     "mobx-persist": "^0.4.1",
     "mobx-react": "^6.3.1",
     "moment": "^2.29.1",
     "optional-js": "^2.1.1",
     "path-browserify": "^1.0.0",
-    "react": "^17.0.1",
+    "popper.js": "^1.16.1",
+    "react": "^18.3.1",
     "react-accessible-accordion": "^3.0.0",
-    "react-bootstrap": "1.4.3",
+    "react-bootstrap": "1.5.2",
     "react-chartjs-2": "^2.11.1",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^17.0.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^18.3.1",
     "react-flatpickr": "^3.9.0",
     "react-number-format": "^4.0.8",
-    "react-router-dom": "^5.0.0",
-    "react-scripts": "2.1.8",
+    "react-router-dom": "^5.3.4",
+    "react-scripts": "5.0.1",
     "react-select": "^2.4.2",
     "react-spinners": "^0.10.4",
-    "react-syntax-highlighter": "^15.4.3",
+    "react-syntax-highlighter": "^15.6.1",
     "typeface-assistant": "^1.1.13",
-    "uuid": "^8.3.2",
-    "yup": "^0.27.0",
-    "jquery": "^3.5.1",
-    "popper.js": "^1.16.1"
+    "uuid": "^3.3.2",
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "@types/capitalize": "^2.0.0",
     "@types/classnames": "^2.2.11",
     "@types/file-saver": "^2.0.0",
     "@types/highlight.js": "^10.1.0",
-    "@types/jest": "26.0.20",
+    "@types/jest": "^29.5.14",
     "@types/js-yaml": "^3.12.0",
     "@types/loglevel": "^1.5.4",
     "@types/marked": "^0.6.5",
-    "@types/react": "17.0.0",
+    "@types/react": "18.3.1",
     "@types/react-chartjs-2": "^2.5.7",
-    "@types/react-dom": "17.0.0",
+    "@types/react-dom": "18.3.1",
     "@types/react-flatpickr": "^3.8.0",
     "@types/react-fontawesome": "^1.6.4",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/react-select": "^3.0.28",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-select": "^5.0.1",
     "@types/react-syntax-highlighter": "^13.5.0",
     "@types/uuid": "^8.3.0",
-    "@types/yup": "^0.26.12",
+    "@types/yup": "^0.32.0",
     "axios-mock-adapter": "^1.19.0",
-    "node-sass": "^4.12.0"
+    "sass": "^1.89.2",
+    "ts-jest": "^29.3.2"
   },
   "repository": {
     "type": "git",

packages/client/src/components/App.scss

@@ -1,4 +1,4 @@
-@import "../styles/shared";
+@use "../styles/shared" as *;
 
 #kayenta-config-manager {
   display: flex;

packages/client/src/components/App.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import App from './App';
+import { createRoot } from 'react-dom/client';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div);
+  root.render(<App />);
+  root.unmount();
 });

packages/client/src/components/Footer.scss

@@ -1,4 +1,4 @@
-@import '../styles/shared.scss';
+@use '../styles/shared' as *;
 
 #footer {
   @extend .heading-font;

packages/client/src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
-import { version } from '../../package.json';
+import packageInfo from '../../package.json';
 
 import './Footer.scss';
 
@@ -13,7 +13,7 @@ export default class Footer extends React.Component {
             <div className="footer-label" id="about">
               About
             </div>
-            <div>Version: {version}</div>
+            <div>Version: {packageInfo.version}</div>
           </Col>
           <Col>
             <div className="footer-label" id="about">

packages/client/src/components/Header.scss

@@ -1,4 +1,4 @@
-@import '../styles/shared';
+@use '../styles/shared' as *;
 
 #header-wrapper {
   z-index: 10000;

packages/client/src/components/Landing.scss

@@ -1,4 +1,4 @@
-@import '../styles/shared';
+@use '../styles/shared' as *;
 
 .landing-content {
   padding: 10px;
@@ -14,5 +14,10 @@
     p {
       margin-bottom: 0;
     }
+
+    .nav-link {
+      display: inline;
+      text-decoration: underline;
+    }
   }
 }

packages/client/src/components/canary-executor/CanaryExecutor.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 .canary-executor {
   padding: 10px;

packages/client/src/components/canary-executor/CanaryExecutorButtonSection.scss

@@ -1,4 +1,4 @@
-@import "../../styles/shared";
+@use "../../styles/shared" as *;
 
 .canary-executor-button-section {
   border-top: 1px solid lightgray;

packages/client/src/components/canary-executor/CanaryExecutorResultsRunAgainButton.scss

@@ -1,4 +1,4 @@
-@import "../../styles/shared";
+@use "../../styles/shared" as *;
 
 .canary-executor-results-button-section {
   border-top: 1px solid lightgray;

packages/client/src/components/canary-executor/GroupTabsSection.scss

@@ -0,0 +1,23 @@
+@use '../../styles/shared' as *;
+
+#canary-configuration-form-view {
+  .input-group {
+    .input-group-append {
+      .btn {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+}

packages/client/src/components/canary-executor/MetadataSection.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 #canary-executor-form-view {
   .metadata {

packages/client/src/components/canary-executor/ScopeItem.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 .titled-section-contents {
 

packages/client/src/components/canary-executor/TestingTypeSection.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 .titled-section-contents {
 

packages/client/src/components/canary-executor/ThresholdsSection.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 .titled-section-contents {
 

packages/client/src/components/config/AbstractMetricModal.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 .modal-lg {
   @media (min-width: 1275px) {

packages/client/src/components/config/ConfigEditor.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 .config-editor {
   padding: 10px;

packages/client/src/components/config/ConfigFormButtonSection.scss

@@ -1,4 +1,4 @@
-@import "../../styles/shared";
+@use "../../styles/shared" as *;
 
 .config-form-button-section {
   border-top: 1px solid lightgray;

packages/client/src/components/config/ConfigFormView.scss

@@ -1,4 +1,4 @@
-@import '../../styles/shared';
+@use '../../styles/shared' as *;
 
 #canary-configuration-form-view {
   padding: 10px;

packages/client/src/components/config/GroupTabsSection.scss

@@ -0,0 +1,23 @@
+@use '../../styles/shared' as *;
+
+#canary-configuration-form-view {
+  .input-group {
+    .input-group-append {
+      .btn {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+}

packages/client/src/components/config/GroupTabsSection.tsx

@@ -5,6 +5,7 @@ import { Button, FormControl } from 'react-bootstrap';
 import handleKeys from '../../util/keyPressInputHelper';
 import { RefObject } from 'react';
 import { Popover } from '../../layout/Popover';
+import './GroupTabsSection.scss';
 
 export const GroupTabsSection = ({
   groups,

packages/client/src/components/config/List.scss

@@ -0,0 +1,13 @@
+@use '../../styles/shared' as *;
+
+#canary-configuration-edit {
+  .titled-section-contents {
+    .btn {
+      margin-left: 5px;
+    }
+
+    table {
+      margin-top: 1rem;
+    }
+  }
+}