Theme refresh

docker/compose/slycat-compose/slycat-client/DockerFile

@@ -1,6 +1,5 @@
-FROM node:18
+FROM node:22
 # :lts-alpine
-# see https://github.com/sass/node-sass/issues/3077 locking down to node 15 until this is resolved
 WORKDIR /usr/src/slycat
 RUN git config --global http.sslVerify false
 RUN git clone --depth 1 https://github.com/sandialabs/slycat.git

docker/compose/slycat-compose/slycat-test-client/DockerFile

@@ -1,6 +1,5 @@
-FROM node:18
+FROM node:22
 # :lts-alpine
-# see https://github.com/sass/node-sass/issues/3077 locking down to node 15 until this is resolved
 WORKDIR /usr/src/slycat
 RUN git config --global http.sslVerify false
 RUN git clone --depth 1 https://github.com/sandialabs/slycat.git

package.json

@@ -20,9 +20,12 @@
   "license": "MIT",
   "dependencies": {
     "@asielick/knockout-projections": "^1",
-    "@fortawesome/fontawesome-svg-core": "^6",
-    "@fortawesome/free-solid-svg-icons": "^6",
-    "@fortawesome/react-fontawesome": "^0",
+    "@fortawesome/fontawesome-free": "^7",
+    "@fortawesome/fontawesome-svg-core": "^7.0.1",
+    "@fortawesome/free-brands-svg-icons": "^7.0.1",
+    "@fortawesome/free-regular-svg-icons": "^7.0.1",
+    "@fortawesome/free-solid-svg-icons": "^7.0.1",
+    "@fortawesome/react-fontawesome": "^3.0.2",
     "@reduxjs/toolkit": "^2",
     "bootstrap": "^5",
     "buffer": "6.0.3",
@@ -32,7 +35,6 @@
     "d3fc": "^15.2.6",
     "d3v7": "npm:d3@^7.8.5",
     "deep-equal": "^2",
-    "font-awesome": "4.7.0",
     "he": "1.2.0",
     "jquery": "^3",
     "jquery-knob": "1.2.11",
@@ -44,8 +46,8 @@
     "lodash": "4.17.21",
     "papaparse": "^5",
     "parse-css-color": "^0.2.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19",
+    "react-dom": "^19",
     "react-redux": "^9",
     "redux": "^5",
     "redux-logger": "3.0.6",
@@ -59,7 +61,7 @@
     "three-trackballcontrols": "0.9.0",
     "urijs": "1.19.11",
     "uuid": "^11",
-    "vtk.js": "^33",
+    "vtk.js": "^34",
     "wslink": "^2",
     "zipinfo.js": "1.0.0"
   },
@@ -82,25 +84,25 @@
     "@types/d3": "^3",
     "@types/d3v7": "npm:@types/d3@^7.4.0",
     "@types/he": "^1.2.3",
-    "@types/jest": "^29",
+    "@types/jest": "^30",
     "@types/jquery": "^3.5.5",
     "@types/jsdom": "^21",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^22",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/react-test-renderer": "^18",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/react-test-renderer": "^19",
     "@types/redux-watch": "^1.1.2",
     "@types/sinon": "^17",
     "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^10",
     "autoprefixer": "^10.1.0",
-    "babel-jest": "^29",
-    "babel-loader": "^9",
+    "babel-jest": "^30",
+    "babel-loader": "^10",
     "babel-plugin-module-resolver": "^5",
     "babelify": "^10.0.0",
     "clean-webpack-plugin": "^4",
-    "copy-webpack-plugin": "^12",
+    "copy-webpack-plugin": "^13",
     "css-loader": "^7",
     "eslint": "^9",
     "eslint-plugin-react": "^7.22.0",
@@ -109,17 +111,17 @@
     "html-loader": "^5",
     "html-webpack-plugin": "^5.0.0-beta.4",
     "imports-loader": "^5",
-    "jest": "^29",
+    "jest": "^30",
     "jest-fetch-mock": "^3.0.1",
     "less": "^4.0.0",
     "less-loader": "^12",
     "node-fetch-polyfill": "^2.0.6",
     "prettier": "^3",
-    "react-test-renderer": "^18",
+    "react-test-renderer": "^19",
     "sass": "^1",
     "sass-loader": "^16",
     "shader-loader": "^1.3.1",
-    "sinon": "^19",
+    "sinon": "^21",
     "style-loader": "^4",
     "typed-css-modules": "^0.9.1",
     "typescript": "^5",
@@ -128,7 +130,7 @@
     "url-loader": "^4.1.1",
     "webpack": "^5.11.1",
     "webpack-bundle-analyzer": "^4.3.0",
-    "webpack-cli": "^5",
+    "webpack-cli": "^6",
     "webpack-dev-server": "^5",
     "webpack-merge": "^6",
     "webpack-node-modules-list": "^0.4.1",

web-server/__tests__/__snapshots__/remote-file-browser.test.tsx.snap

@@ -63,7 +63,7 @@ exports[`when we load the RemoteFileBrowser we expect the component to render 1`
         >
           <i
             aria-hidden="true"
-            className="fa fa-level-up"
+            className="fas fa-turn-up"
           />
         </button>
       </div>

web-server/__tests__/spinner.test.tsx

@@ -1,23 +1,15 @@
 
 import React from 'react';
-import Spinner, 
-{SpinnerProps, SpinnerState} 
-from "components/Spinner";
+import Spinner from "components/Spinner";
 import { mount } from "enzyme";
 
 
 describe('when loading a bad marking the UnrecognizedMarkingWarning',() =>{ 
   const render = mount(
     <Spinner/>
   );
-  test('we have no props on initial load', () => {
-    const props = render.props() as SpinnerProps;
-    expect(props).toMatchSnapshot();
-  });
-
-  test('we no state', () => {
-    const state = render.state() as SpinnerState;
-    expect(state).toMatchSnapshot();
+  test('renders without props and state', () => {
+    expect(render).toMatchSnapshot();
   });
 
   test('we should have a full initialization', () => {

web-server/components/ControlsButton.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Icon, { type IconName } from "components/Icons/Icon";
+
+declare const $: any;
+
+export type ControlsButtonProps = {
+  hidden?: boolean;
+  button_type?: string;
+  button_style?: string;
+  id?: string;
+  title?: string;
+  disabled?: boolean;
+  click?: React.MouseEventHandler<HTMLButtonElement>;
+  data_toggle?: string;
+  data_target?: string;
+  icon?: IconName;
+  label?: React.ReactNode;
+  tooltip?: React.ReactNode | null;
+};
+
+const ControlsButton: React.FC<ControlsButtonProps> = (props) => {
+  // wait until all the jquery stuff is loaded
+  $(document).ready(function ($: any) {
+    // enable the tooltip
+    $('[data-bs-toggle="tooltip"]').tooltip();
+  });
+  const renderIcon = () => (props.icon ? <Icon type={props.icon} /> : null);
+
+  return props.hidden ? null : (
+    <button
+      className={`btn ${props.button_type || "btn-sm"} ${props.button_style}`}
+      id={props.id}
+      type="button"
+      title={props.title}
+      disabled={props.disabled}
+      onClick={props.click}
+      data-bs-toggle={props.data_toggle}
+      data-bs-target={props.data_target}
+    >
+      {renderIcon()}
+      {props.label}
+      {props.tooltip !== null && props.tooltip}
+    </button>
+  );
+};
+
+export default ControlsButton;