clean move component

src/javascript/components/Errors.jsx

@@ -43,17 +43,9 @@ class AddMappingsError extends Error {
     }
 }
 
-class MoveSiteError extends Error {
-    constructor(...params) {
-        super(...params);
-        this.name = 'MoveSiteError';
-    }
-}
-
 export {
     InvalidMappingError,
     SitesMappingError,
-    MoveSiteError,
     DuplicateMappingError,
     AddMappingsError,
     InvalidCharError

src/javascript/components/Move.jsx → src/javascript/components/Move/Move.jsx

@@ -1,104 +1,66 @@
 import React, {useState, useRef} from 'react';
-import * as _ from 'lodash';
 import {
     Dialog,
     DialogActions,
     DialogContent,
     DialogContentText,
     DialogTitle,
     FormControl,
-    FormControlLabel,
     FormHelperText,
     Paper,
-    TextField,
-    withStyles
+    TextField
 } from '@material-ui/core';
 import {useTranslation} from 'react-i18next';
 import {Picker} from '@jahia/data-helper';
 import {PickerViewMaterial, useNotifications} from '@jahia/react-material';
-import {withVanityMutationContext} from './VanityMutationsProvider';
-import {GetNodeQuery} from './gqlQueries';
-import {useQuery} from '@apollo/client';
+import {DashboardTableQuery, GetNodeQuery} from '../gqlQueries';
+import {useApolloClient, useQuery} from '@apollo/client';
 import gql from 'graphql-tag';
-import {Button, Checkbox} from '@jahia/moonstone';
+import {Button, Checkbox, Typography} from '@jahia/moonstone';
+import {buildTableQueryVariablesAllVanity} from '~/components/Utils/Utils';
+import {MoveMutation} from '~/components/gqlMutations';
+import classes from './Move.scss';
+import * as PropTypes from 'prop-types';
 
-let styles = () => ({
-    pickerRoot: {
-        minHeight: '330px',
-        maxHeight: '350px',
-        overflowY: 'scroll',
-        boxShadow: '1px 1px 2px 0px rgba(0, 0, 0, 0.09)',
-        borderRadius: '0px',
-        border: '1px solid #d5d5d5'
-    },
-    dialogNote: {
-        fontSize: '0.875rem',
-        marginTop: '10px'
-    },
-    dialogActionsButtonContainer: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        position: 'absolute',
-        right: '20px',
-        paddingTop: '7px'
-    },
-    filterPath: {
-        marginTop: '20px',
-        '& > div': {
-            borderRadius: '0px',
-            border: '1px solid #d5d5d5',
-            borderBottom: 'none',
-            boxShadow: 'none',
-            background: 'whitesmoke'
-        }
-    },
-    helperContainer: {
-        padding: '0',
-        height: 'auto',
-        top: '35px',
-        background: 'transparent'
-    },
-    helperErrorMessage: {
-        top: '10px!important'
-    },
-    dialogRoot: {
-        zIndex: 2010
-    },
-    checkbox: {
-        margin: '8px'
-    }
-});
-
-const MoveCmp = props => {
-    const {classes, lang, path, urlPairs, vanityMutationsContext, open, onClose} = props;
-    const {notificationContext} = useNotifications();
+export const Move = ({lang, path, urlPairs, isOpen, onClose, ...props}) => {
+    const notificationContext = useNotifications();
     const {t} = useTranslation('site-settings-seo');
     const [targetPath, setTargetPath] = useState('');
     const [saveDisabled, setSaveDisabled] = useState(true);
     const picker = useRef();
     const selectableTypes = ['jmix:mainResource', 'jnt:page'];
 
+    const client = useApolloClient();
+
     const handleMove = () => {
-        try {
-            vanityMutationsContext.move(_.map(urlPairs, 'uuid'), targetPath, props)
-                .then(() => {
-                    handleClose();
-                    notificationContext.notify(t('label.notifications.moveConfirmed'), ['closeAfter5s']);
-                })
-                .catch(errors => {
-                    if (errors.graphQLErrors) {
-                        _.each(errors.graphQLErrors, error => {
-                            notificationContext.notify(error.message, ['closeButton', 'noAutomaticClose']);
-                        });
-                    } else {
-                        notificationContext.notify(t('label.errors.Error'), ['closeButton', 'noAutomaticClose']);
-                    }
+        if (!targetPath.startsWith(path)) {
+            notificationContext.notify(t('label.errors.moveSiteError'), ['closeAfter5s']);
+            return;
+        }
 
-                    console.log(errors);
+        client.mutate({
+            mutation: MoveMutation,
+            variables: {
+                pathsOrIds: urlPairs.map(urlPair => urlPair.uuid),
+                target: targetPath
+            }, refetchQueries: [{
+                query: DashboardTableQuery,
+                variables: buildTableQueryVariablesAllVanity(props)
+            }]
+        }).then(() => {
+            handleClose();
+            notificationContext.notify(t('label.notifications.moveConfirmed'), ['closeAfter5s']);
+        }).catch(errors => {
+            if (errors.graphQLErrors) {
+                errors.graphQLErrors.forEach(error => {
+                    notificationContext.notify(error.message, ['closeButton', 'noAutomaticClose']);
                 });
-        } catch (e) {
-            notificationContext.notify(t('label.errors.' + (e.name ? e.name : 'Error')), ['closeButton', 'noAutomaticClose']);
-        }
+            } else {
+                notificationContext.notify(t('label.errors.Error'), ['closeButton', 'noAutomaticClose']);
+            }
+
+            console.log(errors);
+        });
     };
 
     const handleSaveDisabled = () => {
@@ -123,14 +85,15 @@ const MoveCmp = props => {
 
     if (!loading && !error && data && data.jcr && data.jcr.nodeByPath.inPicker) {
         setTimeout(() => {
-            picker?.current?.openPaths(data.jcr.nodeByPath.path.substr(0, data.jcr.nodeByPath.path.lastIndexOf('/')));
+            // eslint-disable-next-line no-unused-expressions
+            picker?.current?.openPaths(data.jcr.nodeByPath.path.substring(0, data.jcr.nodeByPath.path.lastIndexOf('/') + 1));
         });
     }
 
     return (
         <div>
             <Dialog
-                open={open}
+                open={isOpen}
                 classes={{root: classes.dialogRoot}}
                 aria-labelledby="form-dialog-title"
                 data-vud-role="dialog"
@@ -182,15 +145,13 @@ const MoveCmp = props => {
                     </Paper>
                 </DialogContent>
                 <DialogActions>
-                    <FormControlLabel
-                        control={
-                            <Checkbox className={classes.checkbox}
-                                      checked={!saveDisabled}
-                                      data-vud-role="checkbox-hint"
-                                      onChange={handleSaveDisabled}/>
-                        }
-                        label={t('label.dialogs.move.confirm')}
-                    />
+                    <Checkbox className={classes.checkbox}
+                              checked={!saveDisabled}
+                              data-vud-role="checkbox-hint"
+                              onChange={handleSaveDisabled}/>
+                    <Typography>
+                        {t('label.dialogs.move.confirm')}
+                    </Typography>
                     <div className="flexFluid"/>
                     <Button color="default"
                             size="big"
@@ -210,9 +171,10 @@ const MoveCmp = props => {
     );
 };
 
-const Move = _.flowRight(
-    withStyles(styles),
-    withVanityMutationContext()
-)(MoveCmp);
-
-export default Move;
+Move.propTypes = {
+    lang: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    urlPairs: PropTypes.array.isRequired,
+    onClose: PropTypes.func.isRequired
+};

src/javascript/components/Move/Move.scss

@@ -0,0 +1,35 @@
+.pickerRoot {
+  min-height: 330px;
+  max-height: 350px;
+  overflow-y: scroll;
+  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.09);
+  border-radius: 0;
+  border: 1px solid #d5d5d5;
+}
+
+.filterPath {
+  margin-top: 20px;
+
+  & > div {
+    border-radius: 0;
+    border: 1px solid #d5d5d5;
+    border-bottom: none;
+    box-shadow: none;
+    background: whitesmoke
+  }
+}
+
+.helperContainer {
+  padding: 0;
+  height: auto;
+  top: 35px;
+  background: transparent;
+}
+
+.helperErrorMessage {
+  top: 10px !important;
+}
+
+.checkbox {
+  margin: var(--spacing-small);
+}

src/javascript/components/Publication/Publication.jsx

@@ -15,7 +15,7 @@ import {useApolloClient} from '@apollo/client';
 import {PublishMutation} from '~/components/gqlMutations';
 
 export const Publication = ({isOpen, urlPairs, onClose}) => {
-    const {notificationContext} = useNotifications();
+    const notificationContext = useNotifications();
     const {t} = useTranslation('site-settings-seo');
 
     const client = useApolloClient();

src/javascript/components/SiteSettingsSeoApp.jsx

@@ -4,9 +4,8 @@ import {legacyTheme, Pagination} from '@jahia/react-material';
 import SearchBar from './SearchBar';
 import LanguageSelector from './LanguageSelector';
 import {withTranslation} from 'react-i18next';
-import {SwapHoriz, Dropdown, Header} from '@jahia/moonstone';
+import {Dropdown, Header} from '@jahia/moonstone';
 import * as _ from 'lodash';
-import Move from './Move';
 import {withVanityMutationContext} from './VanityMutationsProvider';
 import {VanityUrlTableData} from './VanityUrlTableData';
 import SiteSettingsSeoConstants from './SiteSettingsSeoApp.constants';
@@ -69,10 +68,6 @@ class SiteSettingsSeoApp extends React.Component {
                 labels: {labelRowsPerPage: props.t('label.pagination.rowsPerPage'), of: props.t('label.pagination.of')}
             },
             selection: [],
-            move: {
-                open: false,
-                urlPairs: []
-            },
             workspace: {
                 key: SiteSettingsSeoConstants.VANITY_URL_WORKSPACE_DROPDOWN_DATA[0].key,
                 value: SiteSettingsSeoConstants.VANITY_URL_WORKSPACE_DROPDOWN_DATA[0].value
@@ -87,18 +82,7 @@ class SiteSettingsSeoApp extends React.Component {
         this.onSearchBlur = this.onSearchBlur.bind(this);
         this.onSelectedLanguagesChanged = this.onSelectedLanguagesChanged.bind(this);
 
-        this.openMove = this.openMove.bind(this);
-        this.closeMove = this.closeMove.bind(this);
-
         this.actions = {
-            moveAction: {
-                priority: 2,
-                buttonLabel: t('label.actions.move'),
-                buttonIcon: <SwapHoriz/>,
-                className: 'move',
-                key: 'moveAction',
-                call: this.openMove
-            },
             updateVanity: {
                 call: (data, onSuccess, onError) => {
                     try {
@@ -146,25 +130,6 @@ class SiteSettingsSeoApp extends React.Component {
         onError(err, mess);
     }
 
-    openMove = urlPairs => {
-        this.setState({
-            move: {
-                open: true,
-                urlPairs: urlPairs
-            }
-        });
-    };
-
-    closeMove() {
-        this.setState({
-            move: {
-                open: false,
-                urlPairs: []
-            },
-            selection: []
-        });
-    }
-
     onChangeSelection(add, urlPairs) {
         if (!urlPairs) {
             // Clear selection
@@ -259,7 +224,6 @@ class SiteSettingsSeoApp extends React.Component {
 
     render() {
         let {siteInfo, t, classes, lang} = this.props;
-        let polling = !(this.state.move.open);
         let variables = buildTableQueryVariablesAllVanity({selectedLanguageCodes: this.state.loadParams.selectedLanguageCodes, path: siteInfo.path, lang: lang, ...this.state.loadParams});
 
         return (
@@ -268,7 +232,7 @@ class SiteSettingsSeoApp extends React.Component {
                     {...this.state.loadParams}
                     tableQuery={DashboardTableQuery}
                     variables={variables}
-                    poll={polling ? SiteSettingsSeoConstants.TABLE_POLLING_INTERVAL : 0}
+                    poll={SiteSettingsSeoConstants.TABLE_POLLING_INTERVAL}
                 >
                     {(rows, totalCount) => (
                         <>
@@ -320,13 +284,6 @@ class SiteSettingsSeoApp extends React.Component {
                                             totalCount={totalCount || 0}
                                             onChangePage={this.onChangePage}
                                             onChangeRowsPerPage={this.onChangeRowsPerPage}/>
-                                {this.state.move.open && <Move
-                                    {...this.state.move}
-                                    {...this.state.loadParams}
-                                    path={siteInfo.path}
-                                    lang={lang}
-                                    onClose={this.closeMove}
-                                />}
                             </div>
                         </>
                     )}