diff --git a/.github/workflows/build-dockerfile.yml b/.github/workflows/build-dockerfile.yml index 658d47c..4715aa1 100644 --- a/.github/workflows/build-dockerfile.yml +++ b/.github/workflows/build-dockerfile.yml @@ -22,7 +22,7 @@ jobs: username: ${{ github.actor }} password: ${{ secrets.GITHUB_TOKEN }} - name: Build and push - uses: docker/build-push-action@v5 + uses: docker/build-push-action@v6 with: context: . push: true diff --git a/.github/workflows/copilot-setup.yml b/.github/workflows/copilot-setup.yml index 007f557..3314a89 100644 --- a/.github/workflows/copilot-setup.yml +++ b/.github/workflows/copilot-setup.yml @@ -14,7 +14,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: '20' + node-version: '24' - name: Get yarn cache directory path id: yarn-cache-dir-path diff --git a/.github/workflows/platform-builds.yml b/.github/workflows/platform-builds.yml index 88c0280..c657727 100644 --- a/.github/workflows/platform-builds.yml +++ b/.github/workflows/platform-builds.yml @@ -28,14 +28,14 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 24 - run: npm install -g yarn - run: yarn - id: create_token # get ReleaseBot access token - uses: tibdex/github-app-token@v2 + uses: actions/create-github-app-token@v1 with: - app_id: ${{ secrets.RELEASE_BOT_APP_ID }} - private_key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }} + app-id: ${{ secrets.RELEASE_BOT_APP_ID }} + private-key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }} - name: Semantic Release uses: cycjimmy/semantic-release-action@v4 id: semantic # Need an `id` for output variables diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index a7a7f7d..67f97e7 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -101,7 +101,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: '20' + node-version: '24' - name: Install Dependencies run: yarn install --frozen-lockfile - name: Build Browser Mode diff --git a/.github/workflows/update-website.yml b/.github/workflows/update-website.yml index d3cf620..017ab11 100644 --- a/.github/workflows/update-website.yml +++ b/.github/workflows/update-website.yml @@ -11,7 +11,7 @@ jobs: ref: gh-pages - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: '24' - run: npm install - run: npm run readme - uses: stefanzweifel/git-auto-commit-action@v5 diff --git a/app/package.json b/app/package.json index 590fad1..83cde45 100644 --- a/app/package.json +++ b/app/package.json @@ -6,8 +6,8 @@ "scripts": { "build": "webpack --mode production", "dev": "node_modules/.bin/webpack-dev-server --mode development --progress", - "test": "cross-env TS_NODE_PROJECT=test/tsconfig.json yarn mochatest", - "mochatest": "mocha --require ts-node/register --require source-map-support/register --recursive src/*/**/*.spec.ts" + "test": "mocha --require tsx --require source-map-support/register --recursive src/*/**/*.spec.ts", + "mochatest": "mocha --require tsx --require source-map-support/register --recursive src/*/**/*.spec.ts" }, "engines": { "node": ">=20" @@ -15,24 +15,26 @@ "author": "", "license": "CC-BY-ND-4.0", "dependencies": { - "@material-ui/core": "4.12", - "@material-ui/icons": "^4", - "@material-ui/lab": "^4.0.0-alpha", - "@material-ui/styles": "4.11", - "@types/react-transition-group": "^4", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^5.18.0", + "@mui/lab": "^5.0.0-alpha.177", + "@mui/material": "^5.18.0", + "@mui/styles": "^6.4.8", + "@types/react-transition-group": "^4.4.11", "ace-builds": "^1.4.11", - "axios": "^0.28.0", - "compare-versions": "^3.5.0", - "copy-text-to-clipboard": "^2.1.0", - "d3": "^5.9.7", - "d3-shape": "^1.3.5", - "diff": "^4.0.1", - "dot-prop": "^5.0.0", + "axios": "^1.13.2", + "compare-versions": "^6.1.1", + "copy-text-to-clipboard": "^3.2.0", + "d3": "^7.9.0", + "d3-shape": "^3.2.0", + "diff": "^7.0.0", + "dot-prop": "^5.3.0", "events": "^3.3.0", "get-value": "^3.0.1", - "immutable": "^4.0.0-rc.12", + "immutable": "^4.3.7", "in-viewport": "^3.6.0", - "js-base64": "^2.5.1", + "js-base64": "^3.7.8", "json-to-ast": "^2.1.0", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", @@ -41,55 +43,56 @@ "os-browserify": "^0.3.0", "parse-duration": "^0.1.1", "path-browserify": "^1.0.1", - "prismjs": "^1.15.0", - "react": "^16.11", - "react-ace": "^8", - "react-dom": "^16.7.0", - "react-redux": "^7.0.3", - "react-resize-detector": "^4.1.4", - "react-split-pane": "^0.1.85", - "react-transition-group": "^4", - "react-vis": "^1.11.6", - "redux": "^4.0.1", - "redux-batched-actions": "0.5", - "redux-thunk": "^2.3.0", + "prismjs": "^1.29.0", + "react": "^18.3.1", + "react-ace": "^12.0.0", + "react-dom": "^18.3.1", + "react-redux": "^9.2.0", + "react-resize-detector": "^11.0.1", + "react-split-pane": "^0.1.92", + "react-transition-group": "^4.4.5", + "react-vis": "^1.12.1", + "redux": "^5.0.1", + "redux-batched-actions": "^0.5.0", + "redux-thunk": "^3.1.0", "sha1": "^1.1.1", "socket.io-client": "^4.8.1", "url": "^0.11.4", - "uuid": "7" + "uuid": "^11.0.0" }, "devDependencies": { - "@babel/runtime": "^7.17.2", - "@types/d3": "^5.7.2", - "@types/diff": "^4.0.1", - "@types/get-value": "^3.0.1", - "@types/node": "^12.7.8", - "@types/prismjs": "^1.9.1", - "@types/react": "^16.9.4", - "@types/react-dom": "^16.0.11", - "@types/react-redux": "^7.0.9", - "@types/react-resize-detector": "^4.0.1", + "@babel/runtime": "^7.28.4", + "@types/d3": "^7.4.3", + "@types/diff": "^7.0.0", + "@types/get-value": "^3.0.5", + "@types/lodash.debounce": "^4.0.9", + "@types/node": "^25.0.3", + "@types/prismjs": "^1.26.5", + "@types/react": "^18.3.18", + "@types/react-dom": "^18.3.5", + "@types/react-redux": "^7.1.34", + "@types/react-resize-detector": "^4.0.3", "@types/sha1": "^1.1.1", "@types/socket.io-client": "^3.0.0", - "@types/uuid": "^7.0.2", - "@types/vis": "^4.21.9", - "chai": "^4.2.0", - "cross-env": "^7.0.2", - "css-loader": "^3.0.0", + "@types/uuid": "^11.0.0", + "@types/vis": "^4.21.24", + "chai": "^4.5.0", + "cross-env": "^7.0.3", + "css-loader": "^7.1.2", "file-loader": "^6.2.0", - "html-webpack-plugin": "^5.5.0", + "html-webpack-plugin": "^5.6.3", "lodash": "^4.17.21", - "mocha": "^10.4.0", - "moment": "^2.29.1", - "node-loader": "^0.6.0", - "source-map-loader": "^0.2.4", - "style-loader": "^1", + "mocha": "^10.8.2", + "moment": "^2.30.1", + "node-loader": "^2.0.0", + "source-map-loader": "^5.0.0", + "style-loader": "^4.0.0", "ts-loader": "^9.5.1", - "typescript": "^4.5.5", - "webpack": "^5.91.0", - "webpack-bundle-analyzer": "^4.5.0", - "webpack-cli": "^5.1.4", - "webpack-dev-server": "^5.0.4" + "typescript": "^5.9.3", + "webpack": "^5.98.0", + "webpack-bundle-analyzer": "^4.10.2", + "webpack-cli": "^6.0.1", + "webpack-dev-server": "^5.2.0" }, "peerDependencies": { "electron": "^39" diff --git a/app/src/actions/Publish.ts b/app/src/actions/Publish.ts index 42971f4..3a28c9a 100644 --- a/app/src/actions/Publish.ts +++ b/app/src/actions/Publish.ts @@ -15,7 +15,7 @@ export const setTopic = (topic?: string): Action => { } export const openFile = - (encoding: 'utf8' = 'utf8') => + (encoding: BufferEncoding = 'utf8') => async (dispatch: Dispatch, getState: () => AppState) => { try { const file = await getFileContent(encoding) @@ -31,7 +31,7 @@ type FileParameters = { name: string data: string } -async function getFileContent(encoding: string): Promise { +async function getFileContent(encoding: BufferEncoding): Promise { const rejectReasons = { noFileSelected: 'No file selected', errorReadingFile: 'Error reading file', diff --git a/app/src/actions/Tree.ts b/app/src/actions/Tree.ts index 25ddcc0..5966bdd 100644 --- a/app/src/actions/Tree.ts +++ b/app/src/actions/Tree.ts @@ -7,7 +7,7 @@ import { batchActions } from 'redux-batched-actions' import { globalActions } from './' import { setTopic } from './Publish' import { TopicViewModel } from '../model/TopicViewModel' -const debounce = require('lodash.debounce') +import debounce from 'lodash.debounce' export { clearTopic } from './clearTopic' export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal' diff --git a/app/src/components/App.tsx b/app/src/components/App.tsx index bb69c56..e385df4 100644 --- a/app/src/components/App.tsx +++ b/app/src/components/App.tsx @@ -1,6 +1,6 @@ import ConfirmationDialog from './ConfirmationDialog' import ConnectionSetup from './ConnectionSetup/ConnectionSetup' -import CssBaseline from '@material-ui/core/CssBaseline' +import CssBaseline from '@mui/material/CssBaseline' import ErrorBoundary from './ErrorBoundary' import Notification from './Layout/Notification' import React from 'react' @@ -11,7 +11,8 @@ import { bindActionCreators } from 'redux' import { ConfirmationRequest } from '../reducers/Global' import { connect } from 'react-redux' import { globalActions, settingsActions } from '../actions' -import { Theme, withStyles } from '@material-ui/core/styles' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' ;(window as any).global = window const Settings = React.lazy(() => import('./SettingsDrawer/Settings')) diff --git a/app/src/components/Chart/Chart.tsx b/app/src/components/Chart/Chart.tsx index a438680..6079151 100644 --- a/app/src/components/Chart/Chart.tsx +++ b/app/src/components/Chart/Chart.tsx @@ -1,14 +1,13 @@ import DateFormatter from '../helper/DateFormatter' import NoData from './NoData' import NumberFormatter from '../helper/NumberFormatter' -import React, { memo, useCallback } from 'react' +import React, { memo, useCallback, useRef, useEffect } from 'react' import TooltipComponent from './TooltipComponent' -import { default as ReactResizeDetector } from 'react-resize-detector' -import { emphasize } from '@material-ui/core/styles' +import { useResizeDetector } from 'react-resize-detector' +import { emphasize, useTheme } from '@mui/material/styles' import { mapCurveType } from './mapCurveType' import { PlotCurveTypes } from '../../reducers/Charts' import { Point, Tooltip } from './Model' -import { Theme, withTheme } from '@material-ui/core' import { useCustomXDomain } from './effects/useCustomXDomain' import { useCustomYDomain } from './effects/useCustomYDomain' import 'react-vis/dist/style.css' @@ -17,89 +16,85 @@ const abbreviate = require('number-abbreviate') export interface Props { data: Array<{ x: number; y: number }> - theme: Theme interpolation?: PlotCurveTypes range?: [number?, number?] timeRangeStart?: number color?: string } -export default withTheme( - memo((props: Props) => { - const [width, setWidth] = React.useState(300) - const [tooltip, setTooltip] = React.useState() - const detectResize = React.useCallback(newWidth => setWidth(newWidth), []) +export default memo((props: Props) => { + const theme = useTheme() + const [tooltip, setTooltip] = React.useState() + const { width = 300, ref } = useResizeDetector() - const hintFormatter = React.useCallback( - (point: any) => [ - { title: Time, value: }, - { title: Value, value: }, - { title: Raw, value: {point.y} }, - ], - [] - ) + const hintFormatter = React.useCallback( + (point: any) => [ + { title: Time, value: }, + { title: Value, value: }, + { title: Raw, value: {point.y} }, + ], + [] + ) - const onMouseLeave = React.useCallback(() => { - setTooltip(undefined) - }, []) + const onMouseLeave = React.useCallback(() => { + setTooltip(undefined) + }, []) - const showTooltip = React.useCallback((point: Point, something: { event: MouseEvent }) => { - if (!something) { - return - } - setTooltip({ point, value: hintFormatter(point), element: something.event.target as any }) - }, []) + const showTooltip = React.useCallback((point: Point, something: { event: MouseEvent }) => { + if (!something) { + return + } + setTooltip({ point, value: hintFormatter(point), element: something.event.target as any }) + }, []) - const paletteColor = - props.theme.palette.type === 'light' ? props.theme.palette.secondary.dark : props.theme.palette.primary.light - const color = props.color ? props.color : paletteColor + const paletteColor = + theme.palette.mode === 'light' ? theme.palette.secondary.dark : theme.palette.primary.light + const color = props.color ? props.color : paletteColor - const highlightSelectedPoint = useCallback( - (point: Point) => { - const highlight = tooltip && tooltip.point.x === point.x && tooltip.point.y === point.y - return highlight ? emphasize(color, 0.8) : color - }, - [tooltip, color] - ) + const highlightSelectedPoint = useCallback( + (point: Point) => { + const highlight = tooltip && tooltip.point.x === point.x && tooltip.point.y === point.y + return highlight ? emphasize(color, 0.8) : color + }, + [tooltip, color] + ) - const formatYAxis = useCallback((num: number) => abbreviate(num), []) + const formatYAxis = useCallback((num: number) => abbreviate(num), []) - const xDomain = useCustomXDomain(props) - const yDomain = useCustomYDomain(props) + const xDomain = useCustomXDomain(props) + const yDomain = useCustomYDomain(props) - const data = props.data - const hasData = data.length > 0 - const dummyDomain = [-1, 1] - const dummyData = [{ x: -2, y: -2 }] - return ( -
-
- {data.length === 0 ? : null} - - - - - - - - - -
+ const data = props.data + const hasData = data.length > 0 + const dummyDomain = [-1, 1] + const dummyData = [{ x: -2, y: -2 }] + return ( +
+
+ {data.length === 0 ? : null} + + + + + + + +
- ) - }) -) +
+ ) +}) diff --git a/app/src/components/Chart/NoData.tsx b/app/src/components/Chart/NoData.tsx index 7ce1ff9..f8c40d0 100644 --- a/app/src/components/Chart/NoData.tsx +++ b/app/src/components/Chart/NoData.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Typography } from '@material-ui/core' +import { Typography } from '@mui/material' function NoData() { return ( diff --git a/app/src/components/Chart/TooltipComponent.tsx b/app/src/components/Chart/TooltipComponent.tsx index ae30dc0..1420bb0 100644 --- a/app/src/components/Chart/TooltipComponent.tsx +++ b/app/src/components/Chart/TooltipComponent.tsx @@ -1,9 +1,10 @@ import React, { memo } from 'react' -import { fade } from '@material-ui/core/styles' -import { Fade, Grow, Paper, Popper, Theme, Typography, withTheme } from '@material-ui/core' +import { alpha as fade } from '@mui/material/styles' +import { Fade, Grow, Paper, Popper, Typography, useTheme } from '@mui/material' import { Tooltip } from './Model' -function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) { +function TooltipComponent(props: { tooltip?: Tooltip }) { + const theme = useTheme() const { tooltip } = props return ( void }) { const moveUp = React.useCallback(() => { diff --git a/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx b/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx index c6ae7db..d1b2a45 100644 --- a/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx +++ b/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState, ChangeEvent, MouseEvent, useRef, useEffect, useMemo } from 'react' import { ChartParameters } from '../../../reducers/Charts' -import { Menu, TextField, Typography } from '@material-ui/core' +import { Menu, TextField, Typography } from '@mui/material' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' import { chartActions } from '../../../actions' diff --git a/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx b/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx index 052eb29..0e761c6 100644 --- a/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx +++ b/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import ChartSettings from '.' import CustomIconButton from '../../helper/CustomIconButton' -import MoreVertIcon from '@material-ui/icons/Settings' +import MoreVertIcon from '@mui/icons-material/Settings' import { ChartParameters } from '../../../reducers/Charts' export function SettingsButton(props: { diff --git a/app/src/components/ChartPanel/ChartSettings/Size.tsx b/app/src/components/ChartPanel/ChartSettings/Size.tsx index f736630..7494b52 100644 --- a/app/src/components/ChartPanel/ChartSettings/Size.tsx +++ b/app/src/components/ChartPanel/ChartSettings/Size.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react' import { ChartParameters } from '../../../reducers/Charts' -import { Menu, MenuItem, TextField, Typography } from '@material-ui/core' +import { Menu, MenuItem, TextField, Typography } from '@mui/material' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' import { chartActions } from '../../../actions' diff --git a/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx b/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx index d3e0292..cecd117 100644 --- a/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx +++ b/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx @@ -1,6 +1,6 @@ import React, { ChangeEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { bindActionCreators } from 'redux' -import { Button, Menu, TextField, Typography } from '@material-ui/core' +import { Button, Menu, TextField, Typography } from '@mui/material' import { chartActions } from '../../../actions' import { ChartParameters } from '../../../reducers/Charts' import { connect } from 'react-redux' diff --git a/app/src/components/ChartPanel/ChartSettings/colors.ts b/app/src/components/ChartPanel/ChartSettings/colors.ts index 4611837..9701ec3 100644 --- a/app/src/components/ChartPanel/ChartSettings/colors.ts +++ b/app/src/components/ChartPanel/ChartSettings/colors.ts @@ -12,7 +12,7 @@ import { yellow, brown, blueGrey, -} from '@material-ui/core/colors' +} from '@mui/material/colors' export function colors() { function colorToInt(color: string): [number, number, number] { diff --git a/app/src/components/ChartPanel/ChartSettings/index.tsx b/app/src/components/ChartPanel/ChartSettings/index.tsx index 85998be..ab02964 100644 --- a/app/src/components/ChartPanel/ChartSettings/index.tsx +++ b/app/src/components/ChartPanel/ChartSettings/index.tsx @@ -1,17 +1,17 @@ -import BarChart from '@material-ui/icons/BarChart' -import Clear from '@material-ui/icons/Refresh' -import ColorLens from '@material-ui/icons/ColorLens' +import BarChart from '@mui/icons-material/BarChart' +import Clear from '@mui/icons-material/Refresh' +import ColorLens from '@mui/icons-material/ColorLens' import ColorSettings from './ColorSettings' import InterpolationSettings from './InterpolationSettings' import MoveUp from './MoveUp' -import MultilineChart from '@material-ui/icons/MultilineChart' +import MultilineChart from '@mui/icons-material/MultilineChart' import RangeSettings from './RangeSettings' import React, { memo } from 'react' import Size from './Size' -import Sort from '@material-ui/icons/Sort' +import Sort from '@mui/icons-material/Sort' import TimeRangeSettings from './TimeRangeSettings' import { ChartParameters } from '../../../reducers/Charts' -import { Menu, MenuItem, ListItemIcon, Typography } from '@material-ui/core' +import { Menu, MenuItem, ListItemIcon, Typography } from '@mui/material' function ChartSettings(props: { open: boolean diff --git a/app/src/components/ChartPanel/ChartTitle.tsx b/app/src/components/ChartPanel/ChartTitle.tsx index ca42cf3..c9b0ca1 100644 --- a/app/src/components/ChartPanel/ChartTitle.tsx +++ b/app/src/components/ChartPanel/ChartTitle.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import { ChartParameters } from '../../reducers/Charts' -import { Typography, Theme, withStyles } from '@material-ui/core' +import { Typography } from '@mui/material' +import { withStyles } from '@mui/styles' +import { Theme } from '@mui/material/styles' function ChartTitle(props: { parameters: ChartParameters; classes: any }) { const { classes, parameters } = props diff --git a/app/src/components/ChartPanel/TopicChart.tsx b/app/src/components/ChartPanel/TopicChart.tsx index 33a943a..fd0cc11 100644 --- a/app/src/components/ChartPanel/TopicChart.tsx +++ b/app/src/components/ChartPanel/TopicChart.tsx @@ -7,7 +7,7 @@ import { ChartActions } from './ChartActions' import { chartActions } from '../../actions' import { ChartParameters } from '../../reducers/Charts' import { connect } from 'react-redux' -import { Paper } from '@material-ui/core' +import { Paper } from '@mui/material' const throttle = require('lodash.throttle') class ClearableMessageBuffer extends q.RingBuffer { diff --git a/app/src/components/ChartPanel/index.tsx b/app/src/components/ChartPanel/index.tsx index c0c8622..7ea6925 100644 --- a/app/src/components/ChartPanel/index.tsx +++ b/app/src/components/ChartPanel/index.tsx @@ -1,13 +1,15 @@ import * as q from '../../../../backend/src/Model' import * as React from 'react' -import ShowChart from '@material-ui/icons/ShowChart' +import ShowChart from '@mui/icons-material/ShowChart' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { chartActions } from '../../actions' import { ChartParameters } from '../../reducers/Charts' import { ChartWithTreeNode } from './ChartWithTreeNode' import { connect } from 'react-redux' -import { Grid, Theme, Typography, withStyles } from '@material-ui/core' +import { Grid, Typography } from '@mui/material' +import { withStyles } from '@mui/styles' +import { Theme } from '@mui/material/styles' import { List } from 'immutable' const { TransitionGroup, CSSTransition } = require('react-transition-group/esm') @@ -126,4 +128,4 @@ const styles = (theme: Theme) => ({ }, }) -export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel)) +export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel) as any) diff --git a/app/src/components/ConfirmationDialog.tsx b/app/src/components/ConfirmationDialog.tsx index 005bff6..bc47db9 100644 --- a/app/src/components/ConfirmationDialog.tsx +++ b/app/src/components/ConfirmationDialog.tsx @@ -1,6 +1,6 @@ import React, { useRef, useCallback, memo } from 'react' import { ConfirmationRequest } from '../reducers/Global' -import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core' +import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material' import { KeyCodes } from '../utils/KeyCodes' function ConfirmationDialog(props: { confirmationRequests: Array }) { diff --git a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx index 4e35342..8a026be 100644 --- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx +++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx @@ -1,17 +1,19 @@ import * as React from 'react' import { useState, useCallback, memo } from 'react' -import Add from '@material-ui/icons/Add' -import Lock from '@material-ui/icons/Lock' -import Undo from '@material-ui/icons/Undo' +import Add from '@mui/icons-material/Add' +import Lock from '@mui/icons-material/Lock' +import Undo from '@mui/icons-material/Undo' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { connectionManagerActions } from '../../actions' import { ConnectionOptions } from '../../model/ConnectionOptions' -import { Theme, withStyles } from '@material-ui/core/styles' -import { Button, Grid, TextField, Tooltip } from '@material-ui/core' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' +import { Button, Grid, TextField, Tooltip } from '@mui/material' import { QosSelect } from '../QosSelect' import { QoS } from '../../../../backend/src/DataSource/MqttSource' import Subscriptions from './Subscriptions' +const SubscriptionsAny = Subscriptions as any interface Props { connection: ConnectionOptions @@ -68,7 +70,7 @@ const ConnectionSettings = memo(function ConnectionSettings(props: Props) { - + ({ }, }) -export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings)) +export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any) diff --git a/app/src/components/ConnectionSetup/BrowserCertificateFileSelection.tsx b/app/src/components/ConnectionSetup/BrowserCertificateFileSelection.tsx index d1b30ad..89a2556 100644 --- a/app/src/components/ConnectionSetup/BrowserCertificateFileSelection.tsx +++ b/app/src/components/ConnectionSetup/BrowserCertificateFileSelection.tsx @@ -1,13 +1,13 @@ import * as React from 'react' import ClearAdornment from '../helper/ClearAdornment' -import Lock from '@material-ui/icons/Lock' +import Lock from '@mui/icons-material/Lock' import { bindActionCreators } from 'redux' -import { Button, Theme, Tooltip, Typography } from '@material-ui/core' +import { Button, Theme, Tooltip, Typography } from '@mui/material' import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions' import { CertificateTypes } from '../../actions/ConnectionManager' import { connect } from 'react-redux' import { connectionManagerActions } from '../../actions' -import { withStyles } from '@material-ui/styles' +import { withStyles } from '@mui/styles' import { rendererRpc } from '../../../../events' import { RpcEvents } from '../../../../events/EventsV2' @@ -129,7 +129,7 @@ const styles = (theme: Theme) => ({ overflow: 'hidden' as 'hidden', whiteSpace: 'nowrap' as 'nowrap', textOverflow: 'ellipsis' as 'ellipsis', - color: theme.palette.text.hint, + color: theme.palette.text.secondary, }, button: { marginTop: theme.spacing(3), @@ -137,4 +137,4 @@ const styles = (theme: Theme) => ({ }, }) -export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection)) +export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection) as any) diff --git a/app/src/components/ConnectionSetup/CertificateFileSelection.tsx b/app/src/components/ConnectionSetup/CertificateFileSelection.tsx index 788e799..cc18464 100644 --- a/app/src/components/ConnectionSetup/CertificateFileSelection.tsx +++ b/app/src/components/ConnectionSetup/CertificateFileSelection.tsx @@ -1,13 +1,13 @@ import * as React from 'react' import ClearAdornment from '../helper/ClearAdornment' -import Lock from '@material-ui/icons/Lock' +import Lock from '@mui/icons-material/Lock' import { bindActionCreators } from 'redux' -import { Button, Theme, Tooltip, Typography } from '@material-ui/core' +import { Button, Theme, Tooltip, Typography } from '@mui/material' import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions' import { CertificateTypes } from '../../actions/ConnectionManager' import { connect } from 'react-redux' import { connectionManagerActions } from '../../actions' -import { withStyles } from '@material-ui/styles' +import { withStyles } from '@mui/styles' function CertificateFileSelection(props: { certificateType: CertificateTypes @@ -71,7 +71,7 @@ const styles = (theme: Theme) => ({ overflow: 'hidden' as 'hidden', whiteSpace: 'nowrap' as 'nowrap', textOverflow: 'ellipsis' as 'ellipsis', - color: theme.palette.text.hint, + color: theme.palette.text.secondary, }, button: { marginTop: theme.spacing(3), @@ -79,4 +79,4 @@ const styles = (theme: Theme) => ({ }, }) -export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection)) +export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection) as any) diff --git a/app/src/components/ConnectionSetup/Certificates.tsx b/app/src/components/ConnectionSetup/Certificates.tsx index 9960e06..05676fc 100644 --- a/app/src/components/ConnectionSetup/Certificates.tsx +++ b/app/src/components/ConnectionSetup/Certificates.tsx @@ -1,18 +1,19 @@ import * as React from 'react' import CertificateFileSelection from './CertificateFileSelection' import BrowserCertificateFileSelection from './BrowserCertificateFileSelection' -import Undo from '@material-ui/icons/Undo' +import Undo from '@mui/icons-material/Undo' import { bindActionCreators } from 'redux' -import { Button, Grid } from '@material-ui/core' +import { Button, Grid } from '@mui/material' import { connect } from 'react-redux' import { connectionManagerActions } from '../../actions' import { ConnectionOptions } from '../../model/ConnectionOptions' -import { Theme, withStyles } from '@material-ui/core/styles' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' // Check if we're in browser mode const isBrowserMode = typeof window !== 'undefined' && (typeof process === 'undefined' || process.env?.BROWSER_MODE === 'true') -const CertSelector = isBrowserMode ? BrowserCertificateFileSelection : CertificateFileSelection +const CertSelector: any = isBrowserMode ? BrowserCertificateFileSelection : CertificateFileSelection interface Props { connection: ConnectionOptions @@ -110,4 +111,4 @@ const styles = (theme: Theme) => ({ }, }) -export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates)) +export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates) as any) diff --git a/app/src/components/ConnectionSetup/ConnectButton.tsx b/app/src/components/ConnectionSetup/ConnectButton.tsx index ea66bfb..80f4366 100644 --- a/app/src/components/ConnectionSetup/ConnectButton.tsx +++ b/app/src/components/ConnectionSetup/ConnectButton.tsx @@ -1,7 +1,7 @@ import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator' -import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew' +import PowerSettingsNew from '@mui/icons-material/PowerSettingsNew' import React from 'react' -import { Button } from '@material-ui/core' +import { Button } from '@mui/material' function ConnectButton(props: { connecting: boolean; classes: any; toggle: () => void }) { const { classes, toggle, connecting } = props diff --git a/app/src/components/ConnectionSetup/ConnectionSettings.tsx b/app/src/components/ConnectionSetup/ConnectionSettings.tsx index c4e67c8..f99f2f5 100644 --- a/app/src/components/ConnectionSetup/ConnectionSettings.tsx +++ b/app/src/components/ConnectionSetup/ConnectionSettings.tsx @@ -1,17 +1,18 @@ import ConnectButton from './ConnectButton' import React, { useCallback, useState } from 'react' -import Save from '@material-ui/icons/Save' -import Delete from '@material-ui/icons/Delete' -import Settings from '@material-ui/icons/Settings' -import Visibility from '@material-ui/icons/Visibility' -import VisibilityOff from '@material-ui/icons/VisibilityOff' +import Save from '@mui/icons-material/Save' +import Delete from '@mui/icons-material/Delete' +import Settings from '@mui/icons-material/Settings' +import Visibility from '@mui/icons-material/Visibility' +import VisibilityOff from '@mui/icons-material/VisibilityOff' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { connectionActions, connectionManagerActions } from '../../actions' import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions' import { KeyCodes } from '../../utils/KeyCodes' -import { Theme, withStyles } from '@material-ui/core/styles' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' import { ToggleSwitch } from './ToggleSwitch' import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler' import { @@ -24,7 +25,7 @@ import { InputLabel, MenuItem, TextField, -} from '@material-ui/core' +} from '@mui/material' interface Props { connection: ConnectionOptions @@ -285,4 +286,4 @@ const styles = (theme: Theme) => ({ }, }) -export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings)) +export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any) diff --git a/app/src/components/ConnectionSetup/ConnectionSetup.tsx b/app/src/components/ConnectionSetup/ConnectionSetup.tsx index dd499de..0708efc 100644 --- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx +++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx @@ -1,15 +1,19 @@ import * as React from 'react' import ConnectionSettings from './ConnectionSettings' +const ConnectionSettingsAny = ConnectionSettings as any import ProfileList from './ProfileList' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { connectionManagerActions } from '../../actions' import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions' -import { Theme, withStyles } from '@material-ui/core/styles' -import { Modal, Paper, Toolbar, Typography, Collapse } from '@material-ui/core' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' +import { Modal, Paper, Toolbar, Typography, Collapse } from '@mui/material' import AdvancedConnectionSettings from './AdvancedConnectionSettings' +const AdvancedConnectionSettingsAny = AdvancedConnectionSettings as any import Certificates from './Certificates' +const CertificatesAny = Certificates as any interface Props { actions: any @@ -34,13 +38,13 @@ class ConnectionSetup extends React.PureComponent { return (
- + - + - +
) @@ -111,7 +115,7 @@ const styles = (theme: Theme) => ({ textOverflow: 'ellipsis' as 'ellipsis', whiteSpace: 'nowrap' as 'nowrap', overflow: 'hidden' as 'hidden', - color: theme.palette.text.hint, + color: theme.palette.text.secondary, fontSize: '0.9em', marginLeft: theme.spacing(4), }, @@ -134,4 +138,4 @@ const mapDispatchToProps = (dispatch: any) => { } } -export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup)) +export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup) as any) diff --git a/app/src/components/ConnectionSetup/ProfileList/AddButton.tsx b/app/src/components/ConnectionSetup/ProfileList/AddButton.tsx index ef6b831..4d3acd4 100644 --- a/app/src/components/ConnectionSetup/ProfileList/AddButton.tsx +++ b/app/src/components/ConnectionSetup/ProfileList/AddButton.tsx @@ -1,7 +1,8 @@ import * as React from 'react' -import Add from '@material-ui/icons/Add' -import { Fab } from '@material-ui/core' -import { Theme, withStyles } from '@material-ui/core/styles' +import Add from '@mui/icons-material/Add' +import { Fab } from '@mui/material' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' const styles = (theme: Theme) => ({ addButton: { diff --git a/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx b/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx index 3a0044f..fdae781 100644 --- a/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx +++ b/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx @@ -1,8 +1,9 @@ import React, { useCallback } from 'react' import { connect } from 'react-redux' -import { ListItem, Typography } from '@material-ui/core' +import { ListItem, Typography } from '@mui/material' import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions' -import { withStyles, Theme } from '@material-ui/core/styles' +import { withStyles } from '@mui/styles' +import { Theme } from '@mui/material/styles' import { bindActionCreators } from 'redux' import { connectionActions, connectionManagerActions } from '../../../actions' @@ -62,9 +63,9 @@ export const connectionItemStyle = (theme: Theme) => ({ textOverflow: 'ellipsis' as 'ellipsis', whiteSpace: 'nowrap' as 'nowrap', overflow: 'hidden' as 'hidden', - color: theme.palette.text.hint, + color: theme.palette.text.secondary, fontSize: '0.7em', }, }) -export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem)) +export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem) as any) diff --git a/app/src/components/ConnectionSetup/ProfileList/index.tsx b/app/src/components/ConnectionSetup/ProfileList/index.tsx index 8efa461..f059c3e 100644 --- a/app/src/components/ConnectionSetup/ProfileList/index.tsx +++ b/app/src/components/ConnectionSetup/ProfileList/index.tsx @@ -1,4 +1,5 @@ import ConnectionItem from './ConnectionItem' +const ConnectionItemAny = ConnectionItem as any import React from 'react' import { AddButton } from './AddButton' import { AppState } from '../../../reducers' @@ -7,8 +8,9 @@ import { connect } from 'react-redux' import { connectionManagerActions } from '../../../actions' import { ConnectionOptions } from '../../../model/ConnectionOptions' import { KeyCodes } from '../../../utils/KeyCodes' -import { List } from '@material-ui/core' -import { Theme, withStyles } from '@material-ui/core/styles' +import { List } from '@mui/material' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler' interface Props { @@ -49,7 +51,7 @@ function ProfileList(props: Props) {
{Object.values(connections).map(connection => ( - + ))}
@@ -77,4 +79,4 @@ const mapStateToProps = (state: AppState) => { } } -export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList)) +export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList) as any) diff --git a/app/src/components/ConnectionSetup/Subscriptions.tsx b/app/src/components/ConnectionSetup/Subscriptions.tsx index e210e28..a3b4026 100644 --- a/app/src/components/ConnectionSetup/Subscriptions.tsx +++ b/app/src/components/ConnectionSetup/Subscriptions.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useState } from 'react' -import Delete from '@material-ui/icons/Delete' +import Delete from '@mui/icons-material/Delete' import { connectionManagerActions } from '../../actions' import { ConnectionOptions } from '../../model/ConnectionOptions' import { @@ -12,9 +12,9 @@ import { TableBody, Paper, Theme, -} from '@material-ui/core' +} from '@mui/material' import { bindActionCreators } from 'redux' -import { withStyles } from '@material-ui/styles' +import { withStyles } from '@mui/styles' import { connect } from 'react-redux' function Subscriptions(props: { @@ -87,4 +87,4 @@ const styles = (theme: Theme) => ({ }, }) -export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions)) +export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions) as any) diff --git a/app/src/components/ConnectionSetup/ToggleSwitch.tsx b/app/src/components/ConnectionSetup/ToggleSwitch.tsx index b24d764..06a3429 100644 --- a/app/src/components/ConnectionSetup/ToggleSwitch.tsx +++ b/app/src/components/ConnectionSetup/ToggleSwitch.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { FormControlLabel, Switch } from '@material-ui/core' +import { FormControlLabel, Switch } from '@mui/material' export function ToggleSwitch(props: { value: boolean; classes: any; toggle: () => void; label: string }) { const { classes, value, toggle, label } = props diff --git a/app/src/components/Demo/Key.tsx b/app/src/components/Demo/Key.tsx index 8fbd2c8..e2ba6b2 100644 --- a/app/src/components/Demo/Key.tsx +++ b/app/src/components/Demo/Key.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { Theme, withStyles } from '@material-ui/core' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' interface Props { keyboardKey: string diff --git a/app/src/components/Demo/Mouse.tsx b/app/src/components/Demo/Mouse.tsx index 6cbc2ec..07e5766 100644 --- a/app/src/components/Demo/Mouse.tsx +++ b/app/src/components/Demo/Mouse.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { Theme, withStyles } from '@material-ui/core' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' const cursor = require('./cursor.png') interface State { @@ -74,7 +75,7 @@ const style = (theme: Theme) => ({ height: '32px', position: 'fixed' as 'fixed', zIndex: 1000000, - filter: theme.palette.type === 'light' ? undefined : 'invert(100%)', + filter: theme.palette.mode === 'light' ? undefined : 'invert(100%)', pointerEvents: 'none' as 'none', }, }) diff --git a/app/src/components/Demo/ShowText.tsx b/app/src/components/Demo/ShowText.tsx index c6d212e..97f465f 100644 --- a/app/src/components/Demo/ShowText.tsx +++ b/app/src/components/Demo/ShowText.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { Theme, withStyles } from '@material-ui/core' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' import Key from './Key' interface State { diff --git a/app/src/components/ErrorBoundary.tsx b/app/src/components/ErrorBoundary.tsx index 8ba4bb5..ee6cbdc 100644 --- a/app/src/components/ErrorBoundary.tsx +++ b/app/src/components/ErrorBoundary.tsx @@ -1,9 +1,10 @@ import * as React from 'react' import PersistentStorage from '../utils/PersistentStorage' -import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied' -import Warning from '@material-ui/icons/Warning' -import { Theme, withStyles } from '@material-ui/core/styles' -import { Button, Modal, Paper, Toolbar, Typography } from '@material-ui/core' +import SentimentDissatisfied from '@mui/icons-material/SentimentDissatisfied' +import Warning from '@mui/icons-material/Warning' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' +import { Button, Modal, Paper, Toolbar, Typography } from '@mui/material' interface State { error?: Error @@ -11,6 +12,7 @@ interface State { interface Props { classes: any + children?: React.ReactNode } class ErrorBoundary extends React.PureComponent { @@ -23,12 +25,12 @@ class ErrorBoundary extends React.PureComponent { } private restart = () => { - window.location = window.location + window.location.reload() } private clearStorage = () => { PersistentStorage.clear() - window.location = window.location + window.location.reload() } public componentDidCatch(error: Error, errorInfo: any) { diff --git a/app/src/components/Layout/ContentView.tsx b/app/src/components/Layout/ContentView.tsx index bec1f83..7455e79 100644 --- a/app/src/components/Layout/ContentView.tsx +++ b/app/src/components/Layout/ContentView.tsx @@ -7,7 +7,7 @@ import { ChartParameters } from '../../reducers/Charts' import { connect } from 'react-redux' import { List } from 'immutable' import { Sidebar } from '../Sidebar' -import ReactResizeDetector from 'react-resize-detector' +import { useResizeDetector } from 'react-resize-detector' interface Props { heightProperty: any @@ -21,11 +21,23 @@ function ContentView(props: Props) { const [sidebarWidth, setSidebarWidth] = React.useState('40%') const [detectedHeight, setDetectedHeight] = React.useState(0) const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0) - const detectSize = React.useCallback((width, newHeight) => { + + const { height: resizeHeight, ref: heightRef } = useResizeDetector() + const { width: resizeWidth, ref: widthRef } = useResizeDetector() + + React.useEffect(() => { + if (resizeHeight) setDetectedHeight(resizeHeight) + }, [resizeHeight]) + + React.useEffect(() => { + if (resizeWidth) setDetectedSidebarWidth(resizeWidth) + }, [resizeWidth]) + + const detectSize = React.useCallback((width: any, newHeight: any) => { setDetectedHeight(newHeight) }, []) - const detectSidebarSize = React.useCallback(width => { + const detectSidebarSize = React.useCallback((width: any) => { setDetectedSidebarWidth(width) }, []) @@ -85,15 +97,13 @@ function ContentView(props: Props) { > {/** Passing height constraints via flex options down */} -
+
{/** Resize detector must not be in the scroll zone, it needs to detect actual available size */} -
-
- +
({ icon: { @@ -102,4 +103,4 @@ const mapDispatchToProps = (dispatch: any) => { } } -export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton)) +export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton) as any) diff --git a/app/src/components/Layout/SearchBar.tsx b/app/src/components/Layout/SearchBar.tsx index ba3dffe..1e3a205 100644 --- a/app/src/components/Layout/SearchBar.tsx +++ b/app/src/components/Layout/SearchBar.tsx @@ -1,12 +1,13 @@ import React, { useCallback, useState, useRef } from 'react' import ClearAdornment from '../helper/ClearAdornment' -import Search from '@material-ui/icons/Search' +import Search from '@mui/icons-material/Search' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { InputBase } from '@material-ui/core' +import { InputBase } from '@mui/material' import { settingsActions } from '../../actions' -import { fade, Theme, withStyles } from '@material-ui/core/styles' +import { alpha as fade, Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler' import { KeyCodes } from '../../utils/KeyCodes' @@ -142,4 +143,4 @@ const styles = (theme: Theme) => ({ }, }) -export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar)) +export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar) as any) diff --git a/app/src/components/Layout/TitleBar.tsx b/app/src/components/Layout/TitleBar.tsx index ed031b6..ab4c973 100644 --- a/app/src/components/Layout/TitleBar.tsx +++ b/app/src/components/Layout/TitleBar.tsx @@ -1,15 +1,17 @@ import * as React from 'react' -import CloudOff from '@material-ui/icons/CloudOff' +import CloudOff from '@mui/icons-material/CloudOff' import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator' -import Menu from '@material-ui/icons/Menu' +const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any +import Menu from '@mui/icons-material/Menu' import PauseButton from './PauseButton' import SearchBar from './SearchBar' -import { AppBar, Button, IconButton, Toolbar, Typography } from '@material-ui/core' +import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { connectionActions, globalActions, settingsActions } from '../../actions' -import { Theme, withStyles } from '@material-ui/core/styles' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' const styles = (theme: Theme) => ({ title: { @@ -75,12 +77,12 @@ class TitleBar extends React.PureComponent { - + ) diff --git a/app/src/components/LoginDialog.tsx b/app/src/components/LoginDialog.tsx index f0c9bfe..7490323 100644 --- a/app/src/components/LoginDialog.tsx +++ b/app/src/components/LoginDialog.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@material-ui/core' +import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@mui/material' interface LoginDialogProps { open: boolean @@ -17,7 +17,7 @@ export function LoginDialog(props: LoginDialogProps) { } return ( - + { if (reason !== 'backdropClick') { /* Allow closing only via escape if needed */ } }}>
Login to MQTT Explorer diff --git a/app/src/components/QosSelect.tsx b/app/src/components/QosSelect.tsx index 9653e7a..f21bdf0 100644 --- a/app/src/components/QosSelect.tsx +++ b/app/src/components/QosSelect.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { TextField, MenuItem, Tooltip } from '@material-ui/core' +import { TextField, MenuItem, Tooltip } from '@mui/material' import { QoS } from '../../../backend/src/DataSource/MqttSource' export function QosSelect(props: { selected: QoS; onChange: (value: QoS) => void; label?: string }) { diff --git a/app/src/components/SettingsDrawer/BooleanSwitch.tsx b/app/src/components/SettingsDrawer/BooleanSwitch.tsx index 9e872d1..48a8b19 100644 --- a/app/src/components/SettingsDrawer/BooleanSwitch.tsx +++ b/app/src/components/SettingsDrawer/BooleanSwitch.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { InputLabel, Switch, Theme, Tooltip } from '@material-ui/core' -import { withStyles } from '@material-ui/styles' +import { InputLabel, Switch, Theme, Tooltip } from '@mui/material' +import { withStyles } from '@mui/styles' const sha1 = require('sha1') function BooleanSwitch(props: { title: string; value: boolean; tooltip: string; action: () => void; classes: any }) { diff --git a/app/src/components/SettingsDrawer/BrokerStatistics.tsx b/app/src/components/SettingsDrawer/BrokerStatistics.tsx index 4006c90..0b34f11 100644 --- a/app/src/components/SettingsDrawer/BrokerStatistics.tsx +++ b/app/src/components/SettingsDrawer/BrokerStatistics.tsx @@ -3,9 +3,10 @@ import React, { useMemo } from 'react' import { AppState } from '../../reducers' import { Base64Message } from '../../../../backend/src/Model/Base64Message' import { connect } from 'react-redux' -import { Theme, withStyles } from '@material-ui/core/styles' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' import { TopicViewModel } from '../../model/TopicViewModel' -import { Typography } from '@material-ui/core' +import { Typography } from '@mui/material' import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode' import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates' const abbreviate = require('number-abbreviate') @@ -19,7 +20,7 @@ const styles = (theme: Theme) => ({ container: { width: '100%', height: '224px', - backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb', + backgroundColor: theme.palette.mode === 'dark' ? 'rebeccapurple' : '#ebebeb', marginBottom: 0, padding: '8px', }, diff --git a/app/src/components/SettingsDrawer/Settings.tsx b/app/src/components/SettingsDrawer/Settings.tsx index 8e82538..f3879a4 100644 --- a/app/src/components/SettingsDrawer/Settings.tsx +++ b/app/src/components/SettingsDrawer/Settings.tsx @@ -1,14 +1,15 @@ import * as React from 'react' import BooleanSwitch from './BooleanSwitch' import BrokerStatistics from './BrokerStatistics' -import ChevronRight from '@material-ui/icons/ChevronRight' +import ChevronRight from '@mui/icons-material/ChevronRight' import TimeLocale from './TimeLocale' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { globalActions, settingsActions } from '../../actions' import { shell } from 'electron' -import { Theme, withStyles } from '@material-ui/core/styles' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' import { TopicOrder } from '../../reducers/Settings' import { @@ -21,7 +22,7 @@ import { Select, Typography, Tooltip, -} from '@material-ui/core' +} from '@mui/material' export const autoExpandLimitSet = [ { @@ -70,7 +71,7 @@ const styles = (theme: Theme) => ({ }, author: { margin: 'auto 8px 8px auto', - color: theme.palette.text.hint, + color: theme.palette.text.secondary, cursor: 'pointer' as 'pointer', }, }) diff --git a/app/src/components/SettingsDrawer/TimeLocale.tsx b/app/src/components/SettingsDrawer/TimeLocale.tsx index 67845e4..37abe93 100644 --- a/app/src/components/SettingsDrawer/TimeLocale.tsx +++ b/app/src/components/SettingsDrawer/TimeLocale.tsx @@ -3,9 +3,9 @@ import DateFormatter from '../helper/DateFormatter' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { Input, InputLabel, MenuItem, Select, Theme } from '@material-ui/core' +import { Input, InputLabel, MenuItem, Select, Theme } from '@mui/material' import { settingsActions } from '../../actions' -import { withStyles } from '@material-ui/styles' +import { withStyles } from '@mui/styles' function importAll(r: any) { r.keys().forEach(r) @@ -38,7 +38,7 @@ function TimeLocaleSettings(props: Props) { )) - function updateLocale(e: React.ChangeEvent<{ value: unknown }>) { + function updateLocale(e: any) { const locale = e.target.value ? String(e.target.value) : '' actions.settings.setTimeLocale(locale) } diff --git a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx index 2b78ed1..0095ce8 100644 --- a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx +++ b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx @@ -1,11 +1,11 @@ import * as q from '../../../../../backend/src/Model' import * as React from 'react' -import ShowChart from '@material-ui/icons/ShowChart' +import ShowChart from '@mui/icons-material/ShowChart' import TopicPlot from '../../TopicPlot' import { bindActionCreators } from 'redux' import { chartActions } from '../../../actions' import { connect } from 'react-redux' -import { Fade, Paper, Popper, Tooltip } from '@material-ui/core' +import { Fade, Paper, Popper, Tooltip } from '@mui/material' import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser' interface Props { diff --git a/app/src/components/Sidebar/CodeDiff/DiffCount.tsx b/app/src/components/Sidebar/CodeDiff/DiffCount.tsx index f891f7e..dd78bcb 100644 --- a/app/src/components/Sidebar/CodeDiff/DiffCount.tsx +++ b/app/src/components/Sidebar/CodeDiff/DiffCount.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { Theme } from '@material-ui/core' -import { withStyles } from '@material-ui/styles' +import { Theme } from '@mui/material' +import { withStyles } from '@mui/styles' interface Props { changes: Array diff --git a/app/src/components/Sidebar/CodeDiff/Gutters.tsx b/app/src/components/Sidebar/CodeDiff/Gutters.tsx index 3b93247..c29dcb0 100644 --- a/app/src/components/Sidebar/CodeDiff/Gutters.tsx +++ b/app/src/components/Sidebar/CodeDiff/Gutters.tsx @@ -1,13 +1,13 @@ import * as diff from 'diff' import * as q from '../../../../../backend/src/Model' import * as React from 'react' -import Add from '@material-ui/icons/Add' +import Add from '@mui/icons-material/Add' import ChartPreview from './ChartPreview' -import Remove from '@material-ui/icons/Remove' +import Remove from '@mui/icons-material/Remove' import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser' import { lineChangeStyle, trimNewlineRight } from './util' -import { Theme } from '@material-ui/core' -import { withStyles } from '@material-ui/styles' +import { Theme } from '@mui/material' +import { withStyles } from '@mui/styles' interface Props { changes: Array diff --git a/app/src/components/Sidebar/CodeDiff/index.tsx b/app/src/components/Sidebar/CodeDiff/index.tsx index 379ead6..2becc09 100644 --- a/app/src/components/Sidebar/CodeDiff/index.tsx +++ b/app/src/components/Sidebar/CodeDiff/index.tsx @@ -8,7 +8,8 @@ import { isPlottable, lineChangeStyle, trimNewlineRight } from './util' import { JsonPropertyLocation, literalsMappedByLines } from '../../../../../backend/src/JsonAstParser' import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA' import { style } from './style' -import { withStyles, Typography } from '@material-ui/core' +import { Typography } from '@mui/material' +import { withStyles } from '@mui/styles' import 'prismjs/components/prism-json' interface Props { diff --git a/app/src/components/Sidebar/CodeDiff/style.tsx b/app/src/components/Sidebar/CodeDiff/style.tsx index 84d6c8c..fa76019 100644 --- a/app/src/components/Sidebar/CodeDiff/style.tsx +++ b/app/src/components/Sidebar/CodeDiff/style.tsx @@ -1,8 +1,8 @@ import { CodeBlockColors, CodeBlockColorsBraceMonokai } from '../CodeBlockColors' -import { Theme } from '@material-ui/core' +import { Theme } from '@mui/material' export const style = (theme: Theme) => { - const codeBlockColors = theme.palette.type === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai + const codeBlockColors = theme.palette.mode === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai const codeBaseStyle = { font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace", display: 'inline-grid' as 'inline-grid', diff --git a/app/src/components/Sidebar/HistoryDrawer.tsx b/app/src/components/Sidebar/HistoryDrawer.tsx index e9090ea..cf59737 100644 --- a/app/src/components/Sidebar/HistoryDrawer.tsx +++ b/app/src/components/Sidebar/HistoryDrawer.tsx @@ -1,7 +1,8 @@ import React, { useCallback, useState, useEffect, memo } from 'react' -import { Badge, Typography } from '@material-ui/core' +import { Badge, Typography } from '@mui/material' import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA' -import { Theme, withStyles, emphasize } from '@material-ui/core/styles' +import { Theme, emphasize } from '@mui/material/styles' +import { withStyles } from '@mui/styles' interface HistoryItem { key: string diff --git a/app/src/components/Sidebar/MessageId.tsx b/app/src/components/Sidebar/MessageId.tsx index 4c600f3..95a02f1 100644 --- a/app/src/components/Sidebar/MessageId.tsx +++ b/app/src/components/Sidebar/MessageId.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react' import { Message } from '../../../../backend/src/Model' -import { Tooltip } from '@material-ui/core' +import { Tooltip } from '@mui/material' export const MessageId = memo(function MessageId(props: { message: Message; addComma?: boolean }) { const { message, addComma } = props diff --git a/app/src/components/Sidebar/NodeStats.tsx b/app/src/components/Sidebar/NodeStats.tsx index 90bfd40..6804249 100644 --- a/app/src/components/Sidebar/NodeStats.tsx +++ b/app/src/components/Sidebar/NodeStats.tsx @@ -1,7 +1,7 @@ import * as q from '../../../../backend/src/Model' import * as React from 'react' import { TopicViewModel } from '../../model/TopicViewModel' -import { Typography } from '@material-ui/core' +import { Typography } from '@mui/material' interface Props { node?: q.TreeNode diff --git a/app/src/components/Sidebar/Panel.tsx b/app/src/components/Sidebar/Panel.tsx index 6e59226..a0b7d43 100644 --- a/app/src/components/Sidebar/Panel.tsx +++ b/app/src/components/Sidebar/Panel.tsx @@ -1,7 +1,7 @@ import React from 'react' -import ExpandMore from '@material-ui/icons/ExpandMore' -import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography, Theme } from '@material-ui/core' -import { withStyles } from '@material-ui/styles' +import ExpandMore from '@mui/icons-material/ExpandMore' +import { Accordion, AccordionDetails, AccordionSummary, Typography, Theme } from '@mui/material' +import { withStyles } from '@mui/styles' const styles = (theme: Theme) => ({ summary: { minHeight: '0' }, @@ -19,14 +19,14 @@ const Panel = (props: { detailsHidden?: boolean }) => { return ( - - } className={props.classes.summary}> + + } className={props.classes.summary}> {props.children[0]} - + {props.detailsHidden ? null : ( - {props.children[1]} + {props.children[1]} )} - + ) } diff --git a/app/src/components/Sidebar/Publish/Editor.tsx b/app/src/components/Sidebar/Publish/Editor.tsx index 2bef531..76b1da7 100644 --- a/app/src/components/Sidebar/Publish/Editor.tsx +++ b/app/src/components/Sidebar/Publish/Editor.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { default as AceEditor } from 'react-ace' -import { Theme, withTheme } from '@material-ui/core' +import { useTheme } from '@mui/material/styles' import 'ace-builds' import 'ace-builds/webpack-resolver' import 'ace-builds/src-noconflict/mode-json' @@ -13,11 +13,11 @@ import 'react-ace' function Editor(props: { editorMode: string - theme: Theme value: string | undefined onChange: (value: string) => void editorRef: React.Ref }) { + const theme = useTheme() const editorOptions = { showLineNumbers: false, tabSize: 2, @@ -28,7 +28,7 @@ function Editor(props: { ref={props.editorRef} style={{}} mode={props.editorMode} - theme={props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'} + theme={theme.palette.mode === 'dark' ? 'monokai' : 'dawn'} name="UNIQUE_ID_OF_DIV" width="100%" height="200px" @@ -45,4 +45,4 @@ function Editor(props: { ) } -export default withTheme(Editor) +export default Editor diff --git a/app/src/components/Sidebar/Publish/EditorModeSelect.tsx b/app/src/components/Sidebar/Publish/EditorModeSelect.tsx index 9ef448c..13f2bfa 100644 --- a/app/src/components/Sidebar/Publish/EditorModeSelect.tsx +++ b/app/src/components/Sidebar/Publish/EditorModeSelect.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core' +import { FormControlLabel, Radio, RadioGroup } from '@mui/material' interface Props { value: string diff --git a/app/src/components/Sidebar/Publish/Publish.tsx b/app/src/components/Sidebar/Publish/Publish.tsx index e9f96e4..e3ebcf7 100644 --- a/app/src/components/Sidebar/Publish/Publish.tsx +++ b/app/src/components/Sidebar/Publish/Publish.tsx @@ -1,14 +1,14 @@ import Editor from './Editor' -import { AttachFileOutlined, FormatAlignLeft } from '@material-ui/icons' +import { AttachFileOutlined, FormatAlignLeft } from '@mui/icons-material' import Message from './Model/Message' -import Navigation from '@material-ui/icons/Navigation' +import Navigation from '@mui/icons-material/Navigation' import PublishHistory from './PublishHistory' import React, { useCallback, useMemo, useState, useRef, memo } from 'react' import RetainSwitch from './RetainSwitch' import TopicInput from './TopicInput' import { AppState } from '../../../reducers' import { bindActionCreators } from 'redux' -import { Button, Fab, Theme, Tooltip, withTheme } from '@material-ui/core' +import { Button, Fab, Tooltip, useTheme } from '@mui/material' import { connect } from 'react-redux' import { EditorModeSelect } from './EditorModeSelect' import { globalActions, publishActions } from '../../../actions' @@ -23,7 +23,6 @@ interface Props { globalActions: typeof globalActions retain: boolean editorMode: string - theme: Theme } function useHistory(): [Array, (topic: string, payload?: string) => void] { @@ -42,6 +41,7 @@ function useHistory(): [Array, (topic: string, payload?: string) => voi } function Publish(props: Props) { + const theme = useTheme() const editorRef = useRef() const [history, amendToHistory] = useHistory() @@ -221,4 +221,4 @@ const mapStateToProps = (state: AppState) => { } } -export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish)) +export default connect(mapStateToProps, mapDispatchToProps)(Publish) diff --git a/app/src/components/Sidebar/Publish/RetainSwitch.tsx b/app/src/components/Sidebar/Publish/RetainSwitch.tsx index fd975f5..14e446a 100644 --- a/app/src/components/Sidebar/Publish/RetainSwitch.tsx +++ b/app/src/components/Sidebar/Publish/RetainSwitch.tsx @@ -1,6 +1,6 @@ import QosSelect from './QosPublishOption' import React from 'react' -import { Checkbox, FormControlLabel, Tooltip } from '@material-ui/core' +import { Checkbox, FormControlLabel, Tooltip } from '@mui/material' import { publishActions } from '../../../actions' import { bindActionCreators } from 'redux' import { AppState } from '../../../reducers' diff --git a/app/src/components/Sidebar/Publish/TopicInput.tsx b/app/src/components/Sidebar/Publish/TopicInput.tsx index e263bf6..bb623b2 100644 --- a/app/src/components/Sidebar/Publish/TopicInput.tsx +++ b/app/src/components/Sidebar/Publish/TopicInput.tsx @@ -1,6 +1,6 @@ import ClearAdornment from '../../helper/ClearAdornment' import React, { useCallback, useMemo, useRef } from 'react' -import { FormControl, Input, InputLabel } from '@material-ui/core' +import { FormControl, Input, InputLabel } from '@mui/material' import { publishActions } from '../../../actions' import { bindActionCreators } from 'redux' import { AppState } from '../../../reducers' diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index a24a981..963ade1 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/app/src/components/Sidebar/Sidebar.tsx @@ -2,12 +2,14 @@ import * as q from '../../../../backend/src/Model' import React, { useState, useEffect, useCallback } from 'react' import NodeStats from './NodeStats' import ValuePanel from './ValueRenderer/ValuePanel' +const ValuePanelAny = ValuePanel as any import { AppState } from '../../reducers' -import { ExpansionPanelDetails } from '@material-ui/core' +import { AccordionDetails } from '@mui/material' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { settingsActions, sidebarActions } from '../../actions' -import { Theme, withStyles } from '@material-ui/core/styles' +import { Theme } from '@mui/material/styles' +import { withStyles } from '@mui/styles' import { TopicViewModel } from '../../model/TopicViewModel' import TopicPanel from './TopicPanel/TopicPanel' import Panel from './Panel' @@ -56,16 +58,16 @@ function Sidebar(props: Props) { diff --git a/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx b/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx index 66a3f63..8f94151 100644 --- a/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx +++ b/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx @@ -1,8 +1,8 @@ import * as q from '../../../../../backend/src/Model' import CustomIconButton from '../../helper/CustomIconButton' -import Delete from '@material-ui/icons/Delete' +import Delete from '@mui/icons-material/Delete' import React, { useCallback } from 'react' -import { Badge } from '@material-ui/core' +import { Badge } from '@mui/material' export const RecursiveTopicDeleteButton = (props: { node?: q.TreeNode diff --git a/app/src/components/Sidebar/TopicPanel/Topic.tsx b/app/src/components/Sidebar/TopicPanel/Topic.tsx index 7ad2b77..d5e30bd 100644 --- a/app/src/components/Sidebar/TopicPanel/Topic.tsx +++ b/app/src/components/Sidebar/TopicPanel/Topic.tsx @@ -1,7 +1,8 @@ import React from 'react' import * as q from '../../../../../backend/src/Model' -import Button from '@material-ui/core/Button' -import { withStyles, Theme } from '@material-ui/core/styles' +import Button from '@mui/material/Button' +import { withStyles } from '@mui/styles' +import { Theme } from '@mui/material/styles' import { treeActions } from '../../../actions' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' @@ -39,8 +40,8 @@ class Topic extends React.PureComponent {