vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-14 03:07:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to materials 5.0

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-05 16:42:43 -08:00
parent 2ef6beb643
commit 270091ab08
47 changed files with 287 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/webapp/package.json
View File

@ -56,15 +56,18 @@
"webpack-merge": "^5.7.3"
},
"dependencies": {
"@material-ui/core": "^4.11.1",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.3.0",
"@mui/lab": "^5.0.0-alpha.67",
"@mui/material": "^5.3.0",
"@mui/styles": "^5.3.0",
"@reduxjs/toolkit": "^1.5.0",
"@wisemapping/editor": "^0.4.0",
"@wisemapping/mindplot": "^5.0.2",
"axios": "^0.21.0",
"dayjs": "^1.10.4",
"react": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.0",
"react-ga": "^3.3.0",
"react-google-recaptcha": "^2.1.0",

95
packages/webapp/src/app.tsx
View File

@ -12,11 +12,18 @@ import { QueryClient, QueryClientProvider } from 'react-query';
import { theme } from './theme';
import AppI18n, { Locales } from './classes/app-i18n';
import MapsPage from './components/maps-page';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
import GoogleAnalytics from 'react-ga';
import EditorPage from './components/editor-page';
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
// Google Analytics Initialization.
GoogleAnalytics.initialize('UA-0000000-0');
@ -46,47 +53,49 @@ const App = (): ReactElement => {
defaultLocale={Locales.EN.code}
messages={locale.message as Record<string, string>}
>
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/c/login" />
</Route>
<Route path="/c/login"
component={LoginPage}
/>
<Route
path="/c/registration"
component={RegistationPage}
/>
<Route
path="/c/registration-success"
component={RegistrationSuccessPage}
/>
<Route
path="/c/forgot-password"
component={ForgotPasswordPage}
/>
<Route
path="/c/forgot-password-success"
component={ForgotPasswordSuccessPage}
/>
<Route
exact path="/c/maps/"
component={MapsPage}
/>
<Route exact path="/c/maps/:id/edit">
<EditorPage memoryPersistence={memoryPersistence}
readOnlyMode={readOnlyMode} mapId={mapId} />
</Route>
<Route exact path="/c/maps/:id/try">
<EditorPage memoryPersistence={memoryPersistence}
readOnlyMode={readOnlyMode} mapId={mapId} />
</Route>
</Switch>
</Router>
</ThemeProvider>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/c/login" />
</Route>
<Route path="/c/login"
component={LoginPage}
/>
<Route
path="/c/registration"
component={RegistationPage}
/>
<Route
path="/c/registration-success"
component={RegistrationSuccessPage}
/>
<Route
path="/c/forgot-password"
component={ForgotPasswordPage}
/>
<Route
path="/c/forgot-password-success"
component={ForgotPasswordSuccessPage}
/>
<Route
exact path="/c/maps/"
component={MapsPage}
/>
<Route exact path="/c/maps/:id/edit">
<EditorPage memoryPersistence={memoryPersistence}
readOnlyMode={readOnlyMode} mapId={mapId} />
</Route>
<Route exact path="/c/maps/:id/try">
<EditorPage memoryPersistence={memoryPersistence}
readOnlyMode={readOnlyMode} mapId={mapId} />
</Route>
</Switch>
</Router>
</ThemeProvider>
</StyledEngineProvider>
</IntlProvider>
</QueryClientProvider>
</Provider>

14
packages/webapp/src/classes/client/client-health-sentinel/index.tsx
View File

@ -2,13 +2,13 @@ import { useSelector } from 'react-redux';
import React from 'react';
import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice';
import { FormattedMessage } from 'react-intl';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import Alert from '@material-ui/lab/Alert';
import DialogActions from '@material-ui/core/DialogActions';
import Button from '@material-ui/core/Button';
import AlertTitle from '@material-ui/lab/AlertTitle';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import Alert from '@mui/material/Alert';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import AlertTitle from '@mui/material/AlertTitle';
const ClientHealthSentinel = (): React.ReactElement => {
const status: ClientStatus = useSelector(activeInstanceStatus);

2
packages/webapp/src/components/forgot-password-page/index.tsx
View File

@ -13,7 +13,7 @@ import Input from '../form/input';
import GlobalError from '../form/global-error';
import SubmitButton from '../form/submit-button';
import Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
const ForgotPassword = () => {
const [email, setEmail] = useState<string>('');

4
packages/webapp/src/components/forgot-password-success-page/index.tsx
View File

@ -4,8 +4,8 @@ import FormContainer from '../layout/form-container';
import Header from '../layout/header';
import Footer from '../layout/footer';
import { Link as RouterLink } from 'react-router-dom';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
const ForgotPasswordSuccessPage = (): React.ReactElement => {
const intl = useIntl();

4
packages/webapp/src/components/form/global-error/styled.ts
View File

@ -1,5 +1,5 @@
import withStyles from '@material-ui/core/styles/withStyles';
import Alert from '@material-ui/lab/Alert';
import withStyles from '@mui/styles/withStyles';
import Alert from '@mui/material/Alert';
export const StyledAlert = withStyles({
root: {

2
packages/webapp/src/components/form/input/index.tsx
View File

@ -1,4 +1,4 @@
import TextField from '@material-ui/core/TextField';
import TextField from '@mui/material/TextField';
import React, { ChangeEvent } from 'react';
import { ErrorInfo } from '../../../classes/client';

2
packages/webapp/src/components/form/submit-button/index.tsx
View File

@ -1,4 +1,4 @@
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
import React, { useState } from 'react';
import { useIntl } from 'react-intl';

4
packages/webapp/src/components/layout/form-container/index.tsx
View File

@ -1,5 +1,5 @@
import Container from '@material-ui/core/Container';
import withStyles from '@material-ui/core/styles/withStyles';
import Container from '@mui/material/Container';
import withStyles from '@mui/styles/withStyles';
const FormContainer = withStyles({
root: {

2
packages/webapp/src/components/layout/header/index.tsx
View File

@ -3,7 +3,7 @@ import { StyledNav, StyledDiv, Logo } from './styled';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
import logo from './logo-small.svg';

6
packages/webapp/src/components/login-page/index.tsx
View File

@ -7,9 +7,9 @@ import SubmitButton from '../form/submit-button';
import Input from '../form/input';
import GlobalError from '../form/global-error';
import FormContainer from '../layout/form-container';
import Typography from '@material-ui/core/Typography';
import FormControl from '@material-ui/core/FormControl';
import Link from '@material-ui/core/Link';
import Typography from '@mui/material/Typography';
import FormControl from '@mui/material/FormControl';
import Link from '@mui/material/Link';
type ConfigStatusProps = {
enabled?: boolean;

10
packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
View File

@ -7,11 +7,11 @@ import BaseDialog from '../../action-dispatcher/base-dialog';
import { useSelector } from 'react-redux';
import { activeInstance, fetchAccount } from '../../../../redux/clientSlice';
import Alert from '@material-ui/lab/Alert';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import Switch from '@material-ui/core/Switch';
import Alert from '@mui/material/Alert';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import Switch from '@mui/material/Switch';
type AccountInfoDialogProps = {
onClose: () => void;

2
packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx
View File

@ -1,4 +1,4 @@
import FormControl from '@material-ui/core/FormControl';
import FormControl from '@mui/material/FormControl';
import React from 'react';
import { useIntl } from 'react-intl';
import { useMutation } from 'react-query';

23
packages/webapp/src/components/maps-page/account-menu/index.tsx
View File

@ -1,18 +1,18 @@
import IconButton from '@material-ui/core/IconButton';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Tooltip from '@material-ui/core/Tooltip';
import SettingsApplicationsOutlined from '@material-ui/icons/SettingsApplicationsOutlined';
import AccountCircle from '@material-ui/icons/AccountCircle';
import IconButton from '@mui/material/IconButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Tooltip from '@mui/material/Tooltip';
import SettingsApplicationsOutlined from '@mui/icons-material/SettingsApplicationsOutlined';
import AccountCircle from '@mui/icons-material/AccountCircle';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { fetchAccount } from '../../../redux/clientSlice';
import AccountInfoDialog from './account-info-dialog';
import ChangePasswordDialog from './change-password-dialog';
import LockOpenOutlined from '@material-ui/icons/LockOpenOutlined';
import Link from '@material-ui/core/Link';
import ExitToAppOutlined from '@material-ui/icons/ExitToAppOutlined';
import LockOpenOutlined from '@mui/icons-material/LockOpenOutlined';
import Link from '@mui/material/Link';
import ExitToAppOutlined from '@mui/icons-material/ExitToAppOutlined';
type ActionType = 'change-password' | 'account-info' | undefined;
const AccountMenu = (): React.ReactElement => {
@ -35,7 +35,7 @@ const AccountMenu = (): React.ReactElement => {
arrow={true}
title={`${account?.firstname} ${account?.lastname} <${account?.email}>`}
>
<IconButton onClick={handleMenu}>
<IconButton onClick={handleMenu} size="large">
<AccountCircle fontSize="large" style={{ color: 'black' }} />
</IconButton>
</Tooltip>
@ -44,7 +44,6 @@ const AccountMenu = (): React.ReactElement => {
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',

28
packages/webapp/src/components/maps-page/action-chooser/index.tsx
View File

@ -1,21 +1,21 @@
import React from 'react';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined';
import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined';
import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
import LabelOutlined from '@material-ui/icons/LabelOutlined';
import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined';
import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
import LabelOutlined from '@mui/icons-material/LabelOutlined';
import { FormattedMessage } from 'react-intl';
import { fetchMapById } from '../../../redux/clientSlice';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Divider from '@material-ui/core/Divider';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import Divider from '@mui/material/Divider';
export type ActionType =
| 'open'
| 'share'

4
packages/webapp/src/components/maps-page/action-chooser/styled.ts
View File

@ -1,5 +1,5 @@
import MenuItem from '@material-ui/core/MenuItem';
import withStyles from '@material-ui/core/styles/withStyles';
import MenuItem from '@mui/material/MenuItem';
import withStyles from '@mui/styles/withStyles';
export const StyledMenuItem = withStyles({
root: {

6
packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx
View File

@ -3,9 +3,9 @@ import { FormattedMessage } from 'react-intl';
import { ErrorInfo } from '../../../../classes/client';
import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from './style';
import GlobalError from '../../../form/global-error';
import DialogContentText from '@material-ui/core/DialogContentText';
import Button from '@material-ui/core/Button';
import { PaperProps } from '@material-ui/core/Paper';
import DialogContentText from '@mui/material/DialogContentText';
import Button from '@mui/material/Button';
import { PaperProps } from '@mui/material/Paper';
export type DialogProps = {
onClose: () => void;

10
packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/style.ts
View File

@ -1,8 +1,8 @@
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import withStyles from '@material-ui/core/styles/withStyles';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import withStyles from '@mui/styles/withStyles';
export const StyledDialogContent = withStyles({
root: {

2
packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { useIntl } from 'react-intl';
import { useMutation } from 'react-query';
import { useSelector } from 'react-redux';
import FormControl from '@material-ui/core/FormControl';
import FormControl from '@mui/material/FormControl';
import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice';

4
packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx
View File

@ -6,8 +6,8 @@ import Client, { ErrorInfo } from '../../../../classes/client';
import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
import { SimpleDialogProps, handleOnMutationSuccess } from '..';
import BaseDialog from '../base-dialog';
import Alert from '@material-ui/lab/Alert';
import AlertTitle from '@material-ui/lab/AlertTitle';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const intl = useIntl();

4
packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx
View File

@ -6,8 +6,8 @@ import Client from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice';
import { handleOnMutationSuccess } from '..';
import BaseDialog from '../base-dialog';
import Alert from '@material-ui/lab/Alert';
import AlertTitle from '@material-ui/lab/AlertTitle';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
export type DeleteMultiselectDialogProps = {
mapsId: number[];

2
packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import { useMutation } from 'react-query';
import FormControl from '@material-ui/core/FormControl';
import FormControl from '@mui/material/FormControl';
import { useSelector } from 'react-redux';
import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';

14
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
View File

@ -2,14 +2,14 @@ import React, { useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import BaseDialog from '../base-dialog';
import { useStyles } from './style';
import Alert from '@material-ui/lab/Alert';
import Alert from '@mui/material/Alert';
import { fetchMapById } from '../../../../redux/clientSlice';
import FormControl from '@material-ui/core/FormControl';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@material-ui/core/Radio';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@mui/material/FormControl';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { Designer, TextExporterFactory, ImageExporterFactory, Exporter, Mindmap } from '@wisemapping/mindplot';
import Client from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice';

4
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() =>
createStyles({

18
packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx
View File

@ -8,15 +8,15 @@ import { SimpleDialogProps } from '..';
import BaseDialog from '../base-dialog';
import dayjs from 'dayjs';
import TableContainer from '@material-ui/core/TableContainer';
import Table from '@material-ui/core/Table';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import Tooltip from '@material-ui/core/Tooltip';
import Link from '@material-ui/core/Link';
import Paper from '@material-ui/core/Paper';
import TableContainer from '@mui/material/TableContainer';
import Table from '@mui/material/Table';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import Tooltip from '@mui/material/Tooltip';
import Link from '@mui/material/Link';
import Paper from '@mui/material/Paper';
const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const intl = useIntl();

4
packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
View File

@ -1,5 +1,5 @@
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import Button from '@mui/material/Button';
import FormControl from '@mui/material/FormControl';
import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';

10
packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx
View File

@ -7,11 +7,11 @@ import { SimpleDialogProps } from '..';
import { useStyles } from './style';
import dayjs from 'dayjs';
import { fetchMapById } from '../../../../redux/clientSlice';
import Paper from '@material-ui/core/Paper';
import Card from '@material-ui/core/Card';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import Paper from '@mui/material/Paper';
import Card from '@mui/material/Card';
import ListItem from '@mui/material/ListItem';
import Typography from '@mui/material/Typography';
import List from '@mui/material/List';
const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const { map } = fetchMapById(mapId);

4
packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() =>
createStyles({

24
packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
View File

@ -8,16 +8,16 @@ import BaseDialog from '../base-dialog';
import { handleOnMutationSuccess, SimpleDialogProps } from '..';
import { useStyles } from './style';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import TabContext from '@material-ui/lab/TabContext';
import AppBar from '@material-ui/core/AppBar';
import TabList from '@material-ui/lab/TabList';
import Tab from '@material-ui/core/Tab';
import TabPanel from '@material-ui/lab/TabPanel';
import Typography from '@material-ui/core/Typography';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import TabContext from '@mui/lab/TabContext';
import AppBar from '@mui/material/AppBar';
import TabList from '@mui/lab/TabList';
import Tab from '@mui/material/Tab';
import TabPanel from '@mui/lab/TabPanel';
import Typography from '@mui/material/Typography';
import TextareaAutosize from '@mui/material/TextareaAutosize';
const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const { map } = fetchMapById(mapId);
@ -129,7 +129,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
className={classes.textarea}
readOnly={true}
spellCheck={false}
rowsMax={6}
maxRows={6}
defaultValue={`<iframe style="width:600px;height:400px;border:1px solid black" src="https://app.wisemapping.com/c/maps/${mapId}/embed?zoom=1.0"></iframe>`}
/>
</TabPanel>
@ -144,7 +144,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
className={classes.textarea}
readOnly={true}
spellCheck={false}
rowsMax={1}
maxRows={1}
defaultValue={`https://app.wisemapping.com/c/maps/${mapId}/public`}
/>
</TabPanel>

4
packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() =>
createStyles({

2
packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx
View File

@ -7,7 +7,7 @@ import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
import { SimpleDialogProps, handleOnMutationSuccess } from '..';
import Input from '../../../form/input';
import BaseDialog from '../base-dialog';
import FormControl from '@material-ui/core/FormControl';
import FormControl from '@mui/material/FormControl';
export type RenameModel = {
id: number;

34
packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx
View File

@ -6,24 +6,24 @@ import Client, { ErrorInfo, Permission } from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice';
import { SimpleDialogProps } from '..';
import BaseDialog from '../base-dialog';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import IconButton from '@mui/material/IconButton';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import DeleteIcon from '@material-ui/icons/Delete';
import Paper from '@material-ui/core/Paper';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Typography from '@material-ui/core/Typography';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import DeleteIcon from '@mui/icons-material/Delete';
import Paper from '@mui/material/Paper';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Typography from '@mui/material/Typography';
import { useStyles } from './style';
import RoleIcon from '../../role-icon';
import Tooltip from '@material-ui/core/Tooltip';
import Tooltip from '@mui/material/Tooltip';
type ShareModel = {
emails: string;
@ -189,7 +189,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
<TextField
multiline
rows={3}
rowsMax={3}
maxRows={3}
className={classes.textArea}
variant="filled"
name="message"
@ -236,7 +236,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
onClick={(e) =>
handleOnDeleteClick(e, permission.email)
}
>
size="large">
<DeleteIcon />
</IconButton>
</Tooltip>

4
packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/style.ts
View File

@ -1,5 +1,5 @@
import createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles(() =>
createStyles({

25
packages/webapp/src/components/maps-page/help-menu/index.tsx
View File

@ -1,17 +1,17 @@
import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Help from '@material-ui/icons/Help';
import PolicyOutlined from '@material-ui/icons/PolicyOutlined';
import FeedbackOutlined from '@material-ui/icons/FeedbackOutlined';
import EmojiPeopleOutlined from '@material-ui/icons/EmailOutlined';
import EmailOutlined from '@material-ui/icons/EmailOutlined';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Link from '@material-ui/core/Link';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Tooltip from '@material-ui/core/Tooltip';
import Help from '@mui/icons-material/Help';
import PolicyOutlined from '@mui/icons-material/PolicyOutlined';
import FeedbackOutlined from '@mui/icons-material/FeedbackOutlined';
import EmojiPeopleOutlined from '@mui/icons-material/EmailOutlined';
import EmailOutlined from '@mui/icons-material/EmailOutlined';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Link from '@mui/material/Link';
import ListItemIcon from '@mui/material/ListItemIcon';
import Tooltip from '@mui/material/Tooltip';
const HelpMenu = (): React.ReactElement => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@ -32,7 +32,7 @@ const HelpMenu = (): React.ReactElement => {
arrow={true}
title={intl.formatMessage({ id: 'help.support', defaultMessage: 'Support' })}
>
<IconButton aria-haspopup="true" onClick={handleMenu}>
<IconButton aria-haspopup="true" onClick={handleMenu} size="large">
<Help />
</IconButton>
</Tooltip>
@ -41,7 +41,6 @@ const HelpMenu = (): React.ReactElement => {
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',

44
packages/webapp/src/components/maps-page/index.tsx
View File

@ -1,10 +1,10 @@
import React, { ErrorInfo, ReactElement, useEffect } from 'react';
import clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import IconButton from '@material-ui/core/IconButton';
import Drawer from '@mui/material/Drawer';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import IconButton from '@mui/material/IconButton';
import { useStyles } from './style';
import { MapsList } from './maps-list';
import { createIntl, createIntlCache, FormattedMessage, IntlProvider, IntlShape, useIntl } from 'react-intl';
@ -20,23 +20,23 @@ import HelpMenu from './help-menu';
import LanguageMenu from './language-menu';
import AppI18n, { Locales } from '../../classes/app-i18n';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItem from '@mui/material/ListItem';
import AddCircleTwoTone from '@material-ui/icons/AddCircleTwoTone';
import CloudUploadTwoTone from '@material-ui/icons/CloudUploadTwoTone';
import DeleteOutlineTwoTone from '@material-ui/icons/DeleteOutlineTwoTone';
import LabelTwoTone from '@material-ui/icons/LabelTwoTone';
import PersonOutlineTwoTone from '@material-ui/icons/PersonOutlineTwoTone';
import PublicTwoTone from '@material-ui/icons/PublicTwoTone';
import ScatterPlotTwoTone from '@material-ui/icons/ScatterPlotTwoTone';
import ShareTwoTone from '@material-ui/icons/ShareTwoTone';
import StarTwoTone from '@material-ui/icons/StarTwoTone';
import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import AddCircleTwoTone from '@mui/icons-material/AddCircleTwoTone';
import CloudUploadTwoTone from '@mui/icons-material/CloudUploadTwoTone';
import DeleteOutlineTwoTone from '@mui/icons-material/DeleteOutlineTwoTone';
import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
import PersonOutlineTwoTone from '@mui/icons-material/PersonOutlineTwoTone';
import PublicTwoTone from '@mui/icons-material/PublicTwoTone';
import ScatterPlotTwoTone from '@mui/icons-material/ScatterPlotTwoTone';
import ShareTwoTone from '@mui/icons-material/ShareTwoTone';
import StarTwoTone from '@mui/icons-material/StarTwoTone';
import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';
import Link from '@mui/material/Link';
import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import logoIcon from './logo-small.svg';
import poweredByIcon from './pwrdby-white.svg';
@ -311,7 +311,7 @@ const StyleListItem = (props: ListItemProps) => {
edge="end"
aria-label="delete"
onClick={(e) => handleOnDelete(e, filter)}
>
size="large">
<DeleteOutlineTwoTone color="secondary" />
</IconButton>
</ListItemSecondaryAction>

23
packages/webapp/src/components/maps-page/language-menu/index.tsx
View File

@ -1,4 +1,4 @@
import TranslateTwoTone from '@material-ui/icons/TranslateTwoTone';
import TranslateTwoTone from '@mui/icons-material/TranslateTwoTone';
import React from 'react';
import { useMutation, useQueryClient } from 'react-query';
import Client from '../../../classes/client';
@ -6,16 +6,16 @@ import { useSelector } from 'react-redux';
import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
import { FormattedMessage, useIntl } from 'react-intl';
import { LocaleCode, Locales } from '../../../classes/app-i18n';
import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogActions from '@material-ui/core/DialogActions';
import Divider from '@material-ui/core/Divider';
import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import Divider from '@mui/material/Divider';
const LanguageMenu = (): React.ReactElement => {
const queryClient = useQueryClient();
@ -76,7 +76,6 @@ const LanguageMenu = (): React.ReactElement => {
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',

8
packages/webapp/src/components/maps-page/maps-list/add-label-button/index.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import Popover from '@material-ui/core/Popover';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import LabelTwoTone from '@material-ui/icons/LabelTwoTone';
import Popover from '@mui/material/Popover';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
import { FormattedMessage, useIntl } from 'react-intl';
import { Label } from '../../../../classes/client';
import { LabelSelector } from '../label-selector';

40
packages/webapp/src/components/maps-page/maps-list/index.tsx
View File

@ -11,27 +11,27 @@ import dayjs from 'dayjs';
import { Filter, LabelFilter } from '..';
import { FormattedMessage, useIntl } from 'react-intl';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Toolbar from '@material-ui/core/Toolbar';
import Paper from '@material-ui/core/Paper';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import InputBase from '@material-ui/core/InputBase';
import Link from '@material-ui/core/Link';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import Toolbar from '@mui/material/Toolbar';
import Paper from '@mui/material/Paper';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';
import InputBase from '@mui/material/InputBase';
import Link from '@mui/material/Link';
import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
import SearchIcon from '@material-ui/icons/Search';
import DeleteOutlined from '@mui/icons-material/DeleteOutlined';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import StarRateRoundedIcon from '@mui/icons-material/StarRateRounded';
import SearchIcon from '@mui/icons-material/Search';
import { AddLabelButton } from './add-label-button';
import relativeTime from 'dayjs/plugin/relativeTime';

12
packages/webapp/src/components/maps-page/maps-list/label-selector/index.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Divider from '@material-ui/core/Divider';
import AddIcon from '@material-ui/icons/Add';
import Checkbox from '@material-ui/core/Checkbox';
import Container from '@material-ui/core/Container';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Divider from '@mui/material/Divider';
import AddIcon from '@mui/icons-material/Add';
import Checkbox from '@mui/material/Checkbox';
import Container from '@mui/material/Container';
import { Label as LabelComponent } from '../label';
import Client, { Label, ErrorInfo } from '../../../../classes/client';
import { useQuery } from 'react-query';

2
packages/webapp/src/components/maps-page/maps-list/label-selector/styled.ts
View File

@ -1,5 +1,5 @@
import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
export const StyledButton = styled(Button)`
margin: 4px;

4
packages/webapp/src/components/maps-page/maps-list/labels-cell/index.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import Chip from '@material-ui/core/Chip';
import Chip from '@mui/material/Chip';
import { Label } from '../../../../classes/client';
import LabelTwoTone from '@material-ui/icons/LabelTwoTone';
import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
type Props = {
labels: Label[],
};

14
packages/webapp/src/components/maps-page/maps-list/styled.ts
View File

@ -1,7 +1,7 @@
import { fade } from '@material-ui/core/styles';
import { Theme } from '@material-ui/core/styles/createTheme';
import createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { alpha, Theme } from '@mui/material/styles';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
@ -59,9 +59,9 @@ export const useStyles = makeStyles((theme: Theme) =>
},
search: {
borderRadius: 9,
backgroundColor: fade(theme.palette.common.white, 0.15),
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
margin: '10px 0px',
width: '100%',
@ -90,7 +90,7 @@ export const useStyles = makeStyles((theme: Theme) =>
// vertical padding + font size from searchIcon
border: '1px solid #ffa800',
borderRadius: 4,
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {

8
packages/webapp/src/components/maps-page/role-icon/index.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import PersonSharpIcon from '@material-ui/icons/PersonSharp';
import EditSharpIcon from '@material-ui/icons/EditSharp';
import VisibilitySharpIcon from '@material-ui/icons/VisibilitySharp';
import Tooltip from '@mui/material/Tooltip';
import PersonSharpIcon from '@mui/icons-material/PersonSharp';
import EditSharpIcon from '@mui/icons-material/EditSharp';
import VisibilitySharpIcon from '@mui/icons-material/VisibilitySharp';
import { FormattedMessage } from 'react-intl';
import { Role } from '../../../classes/client';

7
packages/webapp/src/components/maps-page/style.ts
View File

@ -1,6 +1,7 @@
import { Theme } from '@material-ui/core/styles/createTheme';
import createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { Theme } from '@mui/material/styles';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
const drawerWidth = 300;

4
packages/webapp/src/components/registration-page/index.tsx
View File

@ -14,8 +14,8 @@ import { activeInstance } from '../../redux/clientSlice';
import Input from '../form/input';
import GlobalError from '../form/global-error';
import SubmitButton from '../form/submit-button';
import Typography from '@material-ui/core/Typography';
import FormControl from '@material-ui/core/FormControl';
import Typography from '@mui/material/Typography';
import FormControl from '@mui/material/FormControl';
import AppConfig from '../../classes/app-config';
export type Model = {

4
packages/webapp/src/components/registration-success-page/index.tsx
View File

@ -4,8 +4,8 @@ import FormContainer from '../layout/form-container';
import Header from '../layout/header';
import Footer from '../layout/footer';
import { Link as RouterLink } from 'react-router-dom';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
const RegistrationSuccessPage = (): React.ReactElement => {
const intl = useIntl();

6
packages/webapp/src/theme/index.ts
View File

@ -1,6 +1,6 @@
import createMuiTheme from '@material-ui/core/styles/createTheme';
import { adaptV4Theme, createTheme } from '@mui/material/styles';
const theme = createMuiTheme({
const theme = createTheme(adaptV4Theme({
overrides: {
MuiCssBaseline: {
'@global': {
@ -74,6 +74,6 @@ const theme = createMuiTheme({
contrastText: '#FFFFFF',
},
},
});
}));
export { theme };