Merged in migration (pull request #4)

Migration

* README.md was updated and the webpack was modified in package web2d
* README.md was updated and the webpack was modified in package mindplot
* Merge branch 'develop' of https://bitbucket.org/lilabyus/wisemapping-frontend into develop
* Mindplot module script correction
* Pull branch develop remote
* Webcomponent module webpack correction
* Pull branch develop
* Material-ui library correction and cypress test correction
* Script correction
* Cypress test correction

packages/mindplot/package.json

@@ -21,7 +21,7 @@
     },
     "scripts": {
         "build": "webpack --config webpack.prod.js",
-        "test": "webpack serve --config webpack.test.js",
+        "tests": "webpack serve --config webpack.test.js",
         "start": "webpack serve --config webpack.dev.js"
     },
     "dependencies": {

packages/web2d/package.json

@@ -22,7 +22,7 @@
     "scripts": {
         "start": "nodemon --watch lib",
         "build": "webpack --config webpack.prod.js",
-        "test": "webpack serve --config webpack.test.js"
+        "tests": "webpack serve --config webpack.test.js"
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",

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

@@ -66,7 +66,7 @@ const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
                 error={error}
                 title={intl.formatMessage({
                     id: 'create.title',
-                    defaultMessage: 'Create a new mindmap.',
+                    defaultMessage: 'Create a new mindmap',
                 })}
                 description={intl.formatMessage({
                     id: 'create.description',

packages/webapp/src/components/maps-page/index.tsx

@@ -67,7 +67,10 @@ const MapsPage = (): ReactElement => {
     const intl = useIntl();
 
     useEffect(() => {
-        document.title = intl.formatMessage({ id: 'maps.page-title', defaultMessage: 'My Maps | WiseMapping' });
+        document.title = intl.formatMessage({
+            id: 'maps.page-title',
+            defaultMessage: 'My Maps | WiseMapping',
+        });
     }, []);
 
     const mutation = useMutation((id: number) => client.deleteLabel(id), {
@@ -219,8 +222,9 @@ const MapsPage = (): ReactElement => {
                     </div>
 
                     <List component="nav">
-                        {filterButtons.map(buttonInfo => {
+                        {filterButtons.map((buttonInfo) => {
-                            return (<StyleListItem
+                            return (
+                                <StyleListItem
                                     icon={buttonInfo.icon}
                                     label={buttonInfo.label}
                                     filter={buttonInfo.filter}
@@ -228,9 +232,9 @@ const MapsPage = (): ReactElement => {
                                     onClick={handleMenuClick}
                                     onDelete={handleLabelDelete}
                                     key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
-                            />)
+                                />
-                        }
+                            );
-                        )}
+                        })}
                     </List>
 
                     <div

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

@@ -95,15 +95,8 @@ interface EnhancedTableProps {
 function EnhancedTableHead(props: EnhancedTableProps) {
     const intl = useIntl();
 
-    const {
+    const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
-        classes,
+        props;
-        onSelectAllClick,
-        order,
-        orderBy,
-        numSelected,
-        rowCount,
-        onRequestSort,
-    } = props;
 
     const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
         onRequestSort(event, property);
@@ -117,7 +110,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
         },
         {
             id: 'labels',
-            numeric: false
+            numeric: false,
         },
         {
             id: 'createdBy',
@@ -222,7 +215,8 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
                 break;
             case 'label':
                 result =
-                    !mapInfo.labels || mapInfo.labels.some((label) => label.id === (filter as LabelFilter).label.id)
+                    !mapInfo.labels ||
+                    mapInfo.labels.some((label) => label.id === (filter as LabelFilter).label.id);
                 break;
             case 'public':
                 result = mapInfo.isPublic;
@@ -336,19 +330,18 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
             event.stopPropagation();
         };
     };
-    9
+    9;
     const starredMultation = useMutation<void, ErrorInfo, number>(
         (id: number) => {
             const map = mapsInfo.find((m) => m.id == id);
-            const starred = !(map?.starred);
+            const starred = !map?.starred;
 
             // Follow a optimistic update approach ...
-            queryClient.setQueryData<MapInfo[]>('maps', mapsInfo => {
+            queryClient.setQueryData<MapInfo[]>('maps', (mapsInfo) => {
                 if (map) {
                     map.starred = starred;
                 }
                 return mapsInfo || [];
-
             });
             return client.updateStarred(id, starred);
         },
@@ -404,7 +397,13 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                 <Toolbar className={classes.toolbar} variant="dense">
                     <div className={classes.toolbarActions}>
                         {selected.length > 0 && (
-                            <Tooltip arrow={true} title={intl.formatMessage({ id: 'map.delete-selected', defaultMessage: 'Delete selected' })}>
+                            <Tooltip
+                                arrow={true}
+                                title={intl.formatMessage({
+                                    id: 'map.delete-selected',
+                                    defaultMessage: 'Delete selected',
+                                })}
+                            >
                                 <Button
                                     color="primary"
                                     size="medium"
@@ -429,8 +428,8 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                             rowsPerPageOptions={[]}
                             rowsPerPage={rowsPerPage}
                             page={page}
-                            onChangePage={handleChangePage}
+                            onPageChange={handleChangePage}
-                            onChangeRowsPerPage={handleChangeRowsPerPage}
+                            onRowsPerPageChange={handleChangeRowsPerPage}
                             component="div"
                         />
 
@@ -439,7 +438,10 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                                 <SearchIcon />
                             </div>
                             <InputBase
-                                placeholder={intl.formatMessage({ id: 'maps.search-action', defaultMessage: 'Search ...' })}
+                                placeholder={intl.formatMessage({
+                                    id: 'maps.search-action',
+                                    defaultMessage: 'Search ...',
+                                })}
                                 classes={{
                                     root: classes.searchInputRoot,
                                     input: classes.searchInputInput,
@@ -512,7 +514,13 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                                                     padding="checkbox"
                                                     className={classes.bodyCell}
                                                 >
-                                                            <Tooltip arrow={true} title={intl.formatMessage({ id: 'maps.tooltip-starred', defaultMessage: 'Starred' })}>
+                                                    <Tooltip
+                                                        arrow={true}
+                                                        title={intl.formatMessage({
+                                                            id: 'maps.tooltip-starred',
+                                                            defaultMessage: 'Starred',
+                                                        })}
+                                                    >
                                                         <IconButton
                                                             size="small"
                                                             onClick={(e) =>
@@ -534,7 +542,10 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                                                 <TableCell className={classes.bodyCell}>
                                                     <Tooltip
                                                         arrow={true}
-                                                                title={intl.formatMessage({ id: 'maps.tooltip-open', defaultMessage: 'Open for edition' })}
+                                                        title={intl.formatMessage({
+                                                            id: 'maps.tooltip-open',
+                                                            defaultMessage: 'Open for edition',
+                                                        })}
                                                         placement="bottom-start"
                                                     >
                                                         <Link
@@ -559,7 +570,19 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                                                 <TableCell className={classes.bodyCell}>
                                                     <Tooltip
                                                         arrow={true}
-                                                                title={intl.formatMessage({ id: 'maps.modified-by-desc', defaultMessage: 'Modified by {by} on {on}' }, { by: row.lastModificationBy, on: dayjs(row.lastModificationTime).format('lll') })}
+                                                        title={intl.formatMessage(
+                                                            {
+                                                                id: 'maps.modified-by-desc',
+                                                                defaultMessage:
+                                                                    'Modified by {by} on {on}',
+                                                            },
+                                                            {
+                                                                by: row.lastModificationBy,
+                                                                on: dayjs(
+                                                                    row.lastModificationTime
+                                                                ).format('lll'),
+                                                            }
+                                                        )}
                                                         placement="bottom-start"
                                                     >
                                                         <span>

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

@@ -1,5 +1,5 @@
 import { fade } from '@material-ui/core/styles';
-import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import { Theme } from '@material-ui/core/styles/createTheme';
 import createStyles from '@material-ui/core/styles/createStyles';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 

packages/webapp/src/components/maps-page/style.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import { Theme } from '@material-ui/core/styles/createTheme';
 import createStyles from '@material-ui/core/styles/createStyles';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 
@@ -27,11 +27,11 @@ export const useStyles = makeStyles((theme: Theme) =>
         },
         newMapButton: {
             marginRight: 10,
-            minWidth: '130px'
+            minWidth: '130px',
         },
         importButton: {
             marginRight: 10,
-            minWidth: '130px'
+            minWidth: '130px',
         },
         rightButtonGroup: {
             marginRight: 10,

packages/webapp/src/theme/index.ts

@@ -1,4 +1,4 @@
-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import createMuiTheme from '@material-ui/core/styles/createTheme';
 
 const theme = createMuiTheme({
     overrides: {
@@ -7,7 +7,7 @@ const theme = createMuiTheme({
                 body: {
                     backgroundColor: 'white',
                     // Important: This size is the min to diplay all pages except maps list.
-                    minWidth: '450px'
+                    minWidth: '450px',
                 },
             },
         },
@@ -29,8 +29,8 @@ const theme = createMuiTheme({
                 color: '#f9a826',
             },
             outlined: {
-                zIndex: 'inherit'
+                zIndex: 'inherit',
-            }
+            },
         },
         MuiButton: {
             root: {
@@ -47,7 +47,7 @@ const theme = createMuiTheme({
                 '&:hover': {
                     backgroundColor: 'rgba(249, 168, 38, 0.91)',
                 },
-            }
+            },
         },
     },
     typography: {

packages/webcomponent/.gitignore

@@ -0,0 +1,3 @@
+lib/
+node_module/
+