Skip to content

tb.mui upgrade 7.0.2 #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nst-t merged 3 commits into from
May 4, 2025
Merged

tb.mui upgrade 7.0.2 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2315b41
mui 6.4
nst-t May 4, 2025
ad013fb
fixes sidebar react props issue
nst-t May 4, 2025
64c348c
mui to 7.0.2
nst-t May 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,102 changes: 201 additions & 901 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 4 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "panels",
"private": true,
"version": "1.0.11",
"version": "1.0.12",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "tsc && NODE_OPTIONS=\"--max_old_space_size=8192\" vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier -w .",
"preview": "vite preview --port=5173",
"preview": "vite preview --host --port=5173",
"postinstall": "patch-package",
"publish": "npm run build && nst module publish && nst module host panels"
},
Expand All @@ -33,8 +33,8 @@
"@foxglove/wasm-lz4": "1.0.2",
"@foxglove/wasm-zstd": "1.0.1",
"@mcap/core": "1.2.1",
"@mui/icons-material": "5.11.16",
"@mui/material": "5.12.0",
"@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2",
"@popperjs/core": "2.11.6",
"@protobufjs/base64": "1.1.2",
"@swc/core": "^1.5.7",
Expand Down Expand Up @@ -101,7 +101,6 @@
"leaflet": "1.9.3",
"lodash": "4.17.21",
"lz4-wasm": "^0.9.2",
"material-jsoneditor": "2.0.0",
"mathjs": "11.8.0",
"memoize-weak": "1.0.2",
"meshoptimizer": "0.18.1",
Expand Down
199 changes: 3 additions & 196 deletions src/components/AppSettingsDialog/AppSettingsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/

import CloseIcon from '@mui/icons-material/Close';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import {
Alert,
Button,
Checkbox,
Dialog,
DialogActions,
DialogProps,
FormControlLabel,
IconButton,
Link,
Tab,
Tabs,
Typography,
Expand All @@ -24,27 +18,10 @@ import {
import { MouseEvent, SyntheticEvent, useState } from 'react';
import { makeStyles } from 'tss-react/mui';

import { AppSetting } from '@base/AppSetting';
import CopyButton from '@base/components/CopyButton';
import { ExperimentalFeatureSettings } from '@base/components/ExperimentalFeatureSettings';
import ExtensionsSettings from '@base/components/ExtensionsSettings';
import FoxgloveLogoText from '@base/components/FoxgloveLogoText';
import Stack from '@base/components/Stack';
import { WorkspaceContextStore, useWorkspaceStore } from '@base/context/WorkspaceContext';
import { useAppConfigurationValue } from '@base/hooks';
import isDesktopApp from '@base/util/isDesktopApp';

import packageJson from '../../../package.json';

const version = packageJson.version;

import {
ColorSchemeSettings,
LaunchDefault,
MessageFramerate,
TimeFormat,
TimezoneSettings,
} from './settings';
import { ColorSchemeSettings, MessageFramerate, TimeFormat, TimezoneSettings } from './settings';

const useStyles = makeStyles()((theme) => ({
layoutGrid: {
Expand Down Expand Up @@ -119,64 +96,7 @@ const useStyles = makeStyles()((theme) => ({
},
}));

type SectionKey = 'resources' | 'products' | 'contact' | 'legal';

export const aboutItems: Map<
SectionKey,
{
subheader: string;
links: { title: string; url?: string }[];
}
> = new Map([
[
'resources',
{
subheader: 'External resources',
links: [
...(isDesktopApp() ? [] : [{ title: 'Desktop app', url: 'https://foxglove.dev/download' }]),
{ title: 'Browse docs', url: 'https://foxglove.dev/docs' },
{ title: 'Join our community', url: 'https://foxglove.dev/community' },
],
},
],
[
'products',
{
subheader: 'Products',
links: [
{ title: 'Foxglove Studio', url: 'https://foxglove.dev/studio' },
{ title: 'Foxglove Data Platform', url: 'https://foxglove.dev/data-platform' },
],
},
],
[
'contact',
{
subheader: 'Contact',
links: [
{ title: 'Give feedback', url: 'https://foxglove.dev/contact' },
{ title: 'Schedule a demo', url: 'https://foxglove.dev/demo' },
],
},
],
[
'legal',
{
subheader: 'Legal',
links: [
{ title: 'License terms', url: 'https://foxglove.dev/legal/studio-license' },
{ title: 'Privacy policy', url: 'https://foxglove.dev/legal/privacy' },
],
},
],
]);

export type AppSettingsTab =
| 'general'
| 'privacy'
| 'extensions'
| 'experimental-features'
| 'about';
export type AppSettingsTab = 'general';

const selectWorkspaceInitialActiveTab = (store: WorkspaceContextStore) =>
store.prefsDialogState.initialTab;
Expand All @@ -189,12 +109,7 @@ export function AppSettingsDialog(
const [activeTab, setActiveTab] = useState<AppSettingsTab>(
_activeTab ?? initialActiveTab ?? 'general'
);
const [crashReportingEnabled, setCrashReportingEnabled] = useAppConfigurationValue<boolean>(
AppSetting.CRASH_REPORTING_ENABLED
);
const [telemetryEnabled, setTelemetryEnabled] = useAppConfigurationValue<boolean>(
AppSetting.TELEMETRY_ENABLED
);

const { classes, cx } = useStyles();
const theme = useTheme();
const smUp = useMediaQuery(theme.breakpoints.up('sm'));
Expand Down Expand Up @@ -233,14 +148,6 @@ export function AppSettingsDialog(
onChange={handleTabChange}
>
<Tab className={classes.tab} label={'general'} value="general" />
<Tab className={classes.tab} label={'privacy'} value="privacy" />
<Tab className={classes.tab} label={'extensions'} value="extensions" />
<Tab
className={classes.tab}
label={'experimentalFeatures'}
value="experimental-features"
/>
<Tab className={classes.tab} label={'about'} value="about" />
</Tabs>
<Stack direction="row" fullHeight overflowY="auto">
<section
Expand All @@ -253,106 +160,6 @@ export function AppSettingsDialog(
<TimezoneSettings />
<TimeFormat orientation={smUp ? 'horizontal' : 'vertical'} />
<MessageFramerate />
<LaunchDefault />
</Stack>
</section>

<section
className={cx(classes.tabPanel, {
[classes.tabPanelActive]: activeTab === 'privacy',
})}
>
<Stack gap={2}>
<Alert color="info" icon={<InfoOutlinedIcon />}>
{'privacyDescription'}
</Alert>
<Stack gap={0.5} paddingLeft={2}>
<FormControlLabel
className={classes.formControlLabel}
control={
<Checkbox
className={classes.checkbox}
checked={telemetryEnabled ?? true}
onChange={(_event, checked) => void setTelemetryEnabled(checked)}
/>
}
label={'sendAnonymizedUsageData'}
/>
<FormControlLabel
className={classes.formControlLabel}
control={
<Checkbox
className={classes.checkbox}
checked={crashReportingEnabled ?? true}
onChange={(_event, checked) => void setCrashReportingEnabled(checked)}
/>
}
label={'sendAnonymizedCrashReports'}
/>
</Stack>
</Stack>
</section>

<section
className={cx(classes.tabPanel, {
[classes.tabPanelActive]: activeTab === 'extensions',
})}
>
<Stack gap={2}>
<ExtensionsSettings />
</Stack>
</section>

<section
className={cx(classes.tabPanel, {
[classes.tabPanelActive]: activeTab === 'experimental-features',
})}
>
<Stack gap={2}>
<Alert color="warning" icon={<WarningAmberIcon />}>
{'experimentalFeaturesDescription'}
</Alert>
<Stack paddingLeft={2}>
<ExperimentalFeatureSettings />
</Stack>
</Stack>
</section>

<section
className={cx(classes.tabPanel, { [classes.tabPanelActive]: activeTab === 'about' })}
>
<Stack gap={2} alignItems="flex-start">
<header>
<FoxgloveLogoText color="primary" className={classes.logo} />
</header>
<Stack direction="row" alignItems="center" gap={1}>
<Typography variant="body2">version</Typography>
<CopyButton size="small" getText={() => version ?? ''} />
</Stack>
{[
aboutItems.get('resources'),
aboutItems.get('products'),
aboutItems.get('contact'),
aboutItems.get('legal'),
].map((item) => {
return (
<Stack key={item?.subheader} gap={1}>
{item?.subheader && <Typography>{item.subheader}</Typography>}
{item?.links.map((link) => (
<Link
variant="body2"
underline="hover"
key={link.title}
data-testid={link.title}
href={link.url}
target="_blank"
>
{link.title}
</Link>
))}
</Stack>
);
})}
</Stack>
</section>
</Stack>
Expand Down
44 changes: 0 additions & 44 deletions src/components/AppSettingsDialog/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import React from 'react';
import Brightness5Icon from '@mui/icons-material/Brightness5';
import ComputerIcon from '@mui/icons-material/Computer';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined';
import WebIcon from '@mui/icons-material/Web';
import {
Autocomplete,
Checkbox,
Expand All @@ -32,7 +30,6 @@ import Stack from '@base/components/Stack';
import { filterMap } from '@base/den/collection';
import { useAppTimeFormat } from '@base/hooks';
import { useAppConfigurationValue } from '@base/hooks/useAppConfigurationValue';
import { LaunchPreferenceValue } from '@base/types/LaunchPreferenceValue';
import { TimeDisplayMethod } from '@base/types/panels';
import { formatTime } from '@base/util/formatTime';
import { formatTimeRaw } from '@base/util/time';
Expand Down Expand Up @@ -224,47 +221,6 @@ export function TimeFormat({
);
}

export function LaunchDefault(): React.ReactElement {
const { classes } = useStyles();
const [preference, setPreference] = useAppConfigurationValue<string | undefined>(
AppSetting.LAUNCH_PREFERENCE
);
let sanitizedPreference: LaunchPreferenceValue;
switch (preference) {
case LaunchPreferenceValue.WEB:
case LaunchPreferenceValue.DESKTOP:
case LaunchPreferenceValue.ASK:
sanitizedPreference = preference;
break;
default:
sanitizedPreference = LaunchPreferenceValue.WEB;
}

return (
<Stack>
<FormLabel>{'openLinksIn'}:</FormLabel>
<ToggleButtonGroup
color="primary"
size="small"
fullWidth
exclusive
value={sanitizedPreference}
onChange={(_, value?: string) => value != undefined && void setPreference(value)}
>
<ToggleButton value={LaunchPreferenceValue.WEB} className={classes.toggleButton}>
<WebIcon /> {'webApp'}
</ToggleButton>
<ToggleButton value={LaunchPreferenceValue.DESKTOP} className={classes.toggleButton}>
<ComputerIcon /> {'desktopApp'}
</ToggleButton>
<ToggleButton value={LaunchPreferenceValue.ASK} className={classes.toggleButton}>
<QuestionAnswerOutlinedIcon /> {'askEachTime'}
</ToggleButton>
</ToggleButtonGroup>
</Stack>
);
}

export function MessageFramerate(): React.ReactElement {
const [messageRate, setMessageRate] = useAppConfigurationValue<number>(AppSetting.MESSAGE_RATE);
const options = useMemo(
Expand Down
1 change: 0 additions & 1 deletion src/components/CssBaseline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const useStyles = makeStyles()(({ palette, typography }) => ({
color: palette.text.primary,
font: 'inherit',
fontSize: typography.body2.fontSize,
fontFeatureSettings: typography.fontFeatureSettings,
fontFamily: typography.body2.fontFamily,
fontWeight: typography.body2.fontWeight,
zIndex: 0,
Expand Down
Loading
Loading