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
This commit is contained in:
Ezequiel Vega 2021-10-02 16:16:20 +00:00 committed by Paulo Veiga
parent 5599ea2659
commit 6c5bff906a
10 changed files with 189 additions and 159 deletions

View File

@ -21,7 +21,7 @@
}, },
"scripts": { "scripts": {
"build": "webpack --config webpack.prod.js", "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" "start": "webpack serve --config webpack.dev.js"
}, },
"dependencies": { "dependencies": {

View File

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

View File

@ -72,8 +72,8 @@ const App = (): ReactElement => {
</QueryClientProvider> </QueryClientProvider>
</Provider> </Provider>
) : ( ) : (
<div>Loading ... </div> <div>Loading ... </div>
); );
}; };
export default App; export default App;

View File

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

View File

@ -67,7 +67,10 @@ const MapsPage = (): ReactElement => {
const intl = useIntl(); const intl = useIntl();
useEffect(() => { 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), { const mutation = useMutation((id: number) => client.deleteLabel(id), {
@ -94,27 +97,27 @@ const MapsPage = (): ReactElement => {
const filterButtons: ToolbarButtonInfo[] = [ const filterButtons: ToolbarButtonInfo[] = [
{ {
filter: { type: 'all' }, filter: { type: 'all' },
label: intl.formatMessage({ id: 'maps.nav-all', defaultMessage:'All' }), label: intl.formatMessage({ id: 'maps.nav-all', defaultMessage: 'All' }),
icon: <ScatterPlotTwoTone color="secondary" />, icon: <ScatterPlotTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'owned' }, filter: { type: 'owned' },
label: intl.formatMessage({ id: 'maps.nav-onwned', defaultMessage:'Owned' }), label: intl.formatMessage({ id: 'maps.nav-onwned', defaultMessage: 'Owned' }),
icon: <PersonOutlineTwoTone color="secondary" />, icon: <PersonOutlineTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'starred' }, filter: { type: 'starred' },
label: intl.formatMessage({ id: 'maps.nav-starred', defaultMessage:'Starred' }), label: intl.formatMessage({ id: 'maps.nav-starred', defaultMessage: 'Starred' }),
icon: <StarTwoTone color="secondary" />, icon: <StarTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'shared' }, filter: { type: 'shared' },
label: intl.formatMessage({ id: 'maps.nav-shared', defaultMessage:'Shared with me' }), label: intl.formatMessage({ id: 'maps.nav-shared', defaultMessage: 'Shared with me' }),
icon: <ShareTwoTone color="secondary" />, icon: <ShareTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'public' }, filter: { type: 'public' },
label: intl.formatMessage({ id: 'maps.nav-public', defaultMessage:'Public' }), label: intl.formatMessage({ id: 'maps.nav-public', defaultMessage: 'Public' }),
icon: <PublicTwoTone color="secondary" />, icon: <PublicTwoTone color="secondary" />,
}, },
]; ];
@ -219,18 +222,19 @@ const MapsPage = (): ReactElement => {
</div> </div>
<List component="nav"> <List component="nav">
{filterButtons.map(buttonInfo => { {filterButtons.map((buttonInfo) => {
return (<StyleListItem return (
icon={buttonInfo.icon} <StyleListItem
label={buttonInfo.label} icon={buttonInfo.icon}
filter={buttonInfo.filter} label={buttonInfo.label}
active={filter} filter={buttonInfo.filter}
onClick={handleMenuClick} active={filter}
onDelete={handleLabelDelete} onClick={handleMenuClick}
key={`${buttonInfo.filter.type}:${buttonInfo.label}`} onDelete={handleLabelDelete}
/>) key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
} />
)} );
})}
</List> </List>
<div <div

View File

@ -57,9 +57,9 @@ function getComparator<Key extends keyof any>(
order: Order, order: Order,
orderBy: Key orderBy: Key
): ( ): (
a: { [key in Key]: number | string | boolean | Label[] | undefined }, a: { [key in Key]: number | string | boolean | Label[] | undefined },
b: { [key in Key]: number | string | Label[] | boolean } b: { [key in Key]: number | string | Label[] | boolean }
) => number { ) => number {
return order === 'desc' return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy) ? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy); : (a, b) => -descendingComparator(a, b, orderBy);
@ -95,15 +95,8 @@ interface EnhancedTableProps {
function EnhancedTableHead(props: EnhancedTableProps) { function EnhancedTableHead(props: EnhancedTableProps) {
const intl = useIntl(); 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>) => { const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property); onRequestSort(event, property);
@ -117,7 +110,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
}, },
{ {
id: 'labels', id: 'labels',
numeric: false numeric: false,
}, },
{ {
id: 'createdBy', id: 'createdBy',
@ -222,7 +215,8 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
break; break;
case 'label': case 'label':
result = 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; break;
case 'public': case 'public':
result = mapInfo.isPublic; result = mapInfo.isPublic;
@ -336,19 +330,18 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
event.stopPropagation(); event.stopPropagation();
}; };
}; };
9 9;
const starredMultation = useMutation<void, ErrorInfo, number>( const starredMultation = useMutation<void, ErrorInfo, number>(
(id: number) => { (id: number) => {
const map = mapsInfo.find((m) => m.id == id); const map = mapsInfo.find((m) => m.id == id);
const starred = !(map?.starred); const starred = !map?.starred;
// Follow a optimistic update approach ... // Follow a optimistic update approach ...
queryClient.setQueryData<MapInfo[]>('maps', mapsInfo => { queryClient.setQueryData<MapInfo[]>('maps', (mapsInfo) => {
if (map) { if (map) {
map.starred = starred; map.starred = starred;
} }
return mapsInfo || []; return mapsInfo || [];
}); });
return client.updateStarred(id, starred); return client.updateStarred(id, starred);
}, },
@ -404,7 +397,13 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
<Toolbar className={classes.toolbar} variant="dense"> <Toolbar className={classes.toolbar} variant="dense">
<div className={classes.toolbarActions}> <div className={classes.toolbarActions}>
{selected.length > 0 && ( {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 <Button
color="primary" color="primary"
size="medium" size="medium"
@ -429,8 +428,8 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
rowsPerPageOptions={[]} rowsPerPageOptions={[]}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
page={page} page={page}
onChangePage={handleChangePage} onPageChange={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage} onRowsPerPageChange={handleChangeRowsPerPage}
component="div" component="div"
/> />
@ -439,7 +438,10 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
<SearchIcon /> <SearchIcon />
</div> </div>
<InputBase <InputBase
placeholder={intl.formatMessage({ id: 'maps.search-action', defaultMessage: 'Search ...' })} placeholder={intl.formatMessage({
id: 'maps.search-action',
defaultMessage: 'Search ...',
})}
classes={{ classes={{
root: classes.searchInputRoot, root: classes.searchInputRoot,
input: classes.searchInputInput, input: classes.searchInputInput,
@ -478,119 +480,140 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
</TableCell> </TableCell>
</TableRow> </TableRow>
) : ( ) : (
stableSort(mapsInfo, getComparator(order, orderBy)) stableSort(mapsInfo, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row: MapInfo) => { .map((row: MapInfo) => {
const isItemSelected = isSelected(row.id); const isItemSelected = isSelected(row.id);
const labelId = row.id; const labelId = row.id;
return ( return (
<TableRow <TableRow
hover hover
onClick={(event) => handleRowClick(event, row.id)} onClick={(event) => handleRowClick(event, row.id)}
role="checkbox" role="checkbox"
aria-checked={isItemSelected} aria-checked={isItemSelected}
tabIndex={-1} tabIndex={-1}
key={row.id} key={row.id}
selected={isItemSelected} selected={isItemSelected}
style={{ border: '0' }} style={{ border: '0' }}
>
<TableCell
padding="checkbox"
className={classes.bodyCell}
>
<Checkbox
checked={isItemSelected}
inputProps={{
'aria-labelledby': String(labelId),
}}
size="small"
/>
</TableCell>
<TableCell
padding="checkbox"
className={classes.bodyCell}
>
<Tooltip
arrow={true}
title={intl.formatMessage({
id: 'maps.tooltip-starred',
defaultMessage: 'Starred',
})}
> >
<TableCell <IconButton
padding="checkbox" size="small"
className={classes.bodyCell} onClick={(e) =>
handleStarred(e, row.id)
}
> >
<Checkbox <StarRateRoundedIcon
checked={isItemSelected} color="action"
inputProps={{ style={{
'aria-labelledby': String(labelId), color: row.starred
? 'yellow'
: 'gray',
}} }}
size="small"
/> />
</TableCell> </IconButton>
</Tooltip>
</TableCell>
<TableCell <TableCell className={classes.bodyCell}>
padding="checkbox" <Tooltip
className={classes.bodyCell} arrow={true}
title={intl.formatMessage({
id: 'maps.tooltip-open',
defaultMessage: 'Open for edition',
})}
placement="bottom-start"
>
<Link
href={`/c/maps/${row.id}/edit`}
color="textPrimary"
underline="always"
onClick={(e) => e.stopPropagation()}
> >
<Tooltip arrow={true} title={intl.formatMessage({ id: 'maps.tooltip-starred', defaultMessage: 'Starred' })}> {row.title}
<IconButton </Link>
size="small" </Tooltip>
onClick={(e) => </TableCell>
handleStarred(e, row.id)
}
>
<StarRateRoundedIcon
color="action"
style={{
color: row.starred
? 'yellow'
: 'gray',
}}
/>
</IconButton>
</Tooltip>
</TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
<Tooltip <LabelsCell labels={row.labels} />
arrow={true} </TableCell>
title={intl.formatMessage({ id: 'maps.tooltip-open', defaultMessage: 'Open for edition' })}
placement="bottom-start"
>
<Link
href={`/c/maps/${row.id}/edit`}
color="textPrimary"
underline="always"
onClick={(e) => e.stopPropagation()}
>
{row.title}
</Link>
</Tooltip>
</TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
<LabelsCell labels={row.labels} /> {row.createdBy}
</TableCell> </TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
{row.createdBy} <Tooltip
</TableCell> 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'),
}
)}
placement="bottom-start"
>
<span>
{dayjs(
row.lastModificationTime
).fromNow()}
</span>
</Tooltip>
</TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
<Tooltip <Tooltip
arrow={true} 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({
placement="bottom-start" id: 'map.more-actions',
> defaultMessage: 'More Actions',
<span> })}
{dayjs( >
row.lastModificationTime <IconButton
).fromNow()} aria-label="Others"
</span> size="small"
</Tooltip> onClick={handleActionClick(row.id)}
</TableCell> >
<MoreHorizIcon color="action" />
<TableCell className={classes.bodyCell}> </IconButton>
<Tooltip </Tooltip>
arrow={true} </TableCell>
title={intl.formatMessage({ </TableRow>
id: 'map.more-actions', );
defaultMessage: 'More Actions', })
})} )}
>
<IconButton
aria-label="Others"
size="small"
onClick={handleActionClick(row.id)}
>
<MoreHorizIcon color="action" />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
})
)}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
@ -601,6 +624,6 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
onClose={() => setActiveDialog(undefined)} onClose={() => setActiveDialog(undefined)}
mapsId={activeDialog ? activeDialog.mapsId : []} mapsId={activeDialog ? activeDialog.mapsId : []}
/> />
</div > </div>
); );
}; };

View File

@ -1,5 +1,5 @@
import { fade } from '@material-ui/core/styles'; 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 createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@material-ui/core/styles/makeStyles';

View File

@ -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 createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@material-ui/core/styles/makeStyles';
@ -27,11 +27,11 @@ export const useStyles = makeStyles((theme: Theme) =>
}, },
newMapButton: { newMapButton: {
marginRight: 10, marginRight: 10,
minWidth: '130px' minWidth: '130px',
}, },
importButton: { importButton: {
marginRight: 10, marginRight: 10,
minWidth: '130px' minWidth: '130px',
}, },
rightButtonGroup: { rightButtonGroup: {
marginRight: 10, marginRight: 10,

View File

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

View File

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