@plone/volto 18.0.0-alpha.46 → 18.0.0-alpha.48

package/src/components/manage/Controlpanels/Aliases.jsx

@@ -1,34 +1,38 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useHistory, useLocation } from 'react-router-dom';
+import { getBaseUrl, getParentUrl, Helmet } from '@plone/volto/helpers';
 import {
-  getBaseUrl,
-  getParentUrl,
-  Helmet,
-  usePrevious,
-} from '@plone/volto/helpers';
-import { removeAliases, addAliases, getAliases } from '@plone/volto/actions';
+  removeAliases,
+  addAliases,
+  getAliases,
+  uploadAliases,
+} from '@plone/volto/actions/aliases/aliases';
 import { createPortal } from 'react-dom';
 import {
-  Container,
   Button,
-  Segment,
-  Form,
   Checkbox,
+  Container,
+  Form,
   Header,
   Input,
+  Loader,
+  Menu,
+  Pagination,
   Radio,
-  Message,
+  Segment,
   Table,
-  Pagination,
-  Menu,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 import { Icon, Toolbar } from '@plone/volto/components';
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import { useClient } from '@plone/volto/hooks';
 
 import backSVG from '@plone/volto/icons/back.svg';
+import editingSVG from '@plone/volto/icons/editing.svg';
 import { map } from 'lodash';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
@@ -42,6 +46,14 @@ const messages = defineMessages({
     id: 'URL Management',
     defaultMessage: 'URL Management',
   },
+  AddUrl: {
+    id: 'Add Alternative URL',
+    defaultMessage: 'Add Alternative URL',
+  },
+  EditUrl: {
+    id: 'Edit Alternative URL',
+    defaultMessage: 'Edit Alternative URL',
+  },
   success: {
     id: 'Success',
     defaultMessage: 'Success',
@@ -50,6 +62,66 @@ const messages = defineMessages({
     id: 'Alias has been added',
     defaultMessage: 'Alias has been added',
   },
+  successUpload: {
+    id: 'Aliases have been uploaded.',
+    defaultMessage: 'Aliases have been uploaded.',
+  },
+  successRemove: {
+    id: 'Aliases have been removed.',
+    defaultMessage: 'Aliases have been removed.',
+  },
+  filterByPrefix: {
+    id: 'Filter by prefix',
+    defaultMessage: 'Filter by path',
+  },
+  manualOrAuto: {
+    id: 'Manually or automatically added?',
+    defaultMessage: 'Manually or automatically added?',
+  },
+  createdAfter: {
+    id: 'Created after',
+    defaultMessage: 'Created after',
+  },
+  createdBefore: {
+    id: 'Created before',
+    defaultMessage: 'Created before',
+  },
+  altUrlPathTitle: {
+    id: 'Alternative url path (Required)',
+    defaultMessage: 'Alternative URL path (Required)',
+  },
+  altUrlError: {
+    id: 'Alternative url path must start with a slash.',
+    defaultMessage: 'Alternative URL path must start with a slash.',
+  },
+  targetUrlPathTitle: {
+    id: 'Target Path (Required)',
+    defaultMessage: 'Target Path (Required)',
+  },
+  BulkUploadAltUrls: {
+    id: 'BulkUploadAltUrls',
+    defaultMessage: 'Bulk upload CSV',
+  },
+  CSVFile: {
+    id: 'CSVFile',
+    defaultMessage: 'CSV file',
+  },
+  Both: {
+    id: 'Both',
+    defaultMessage: 'Both',
+  },
+  Automatically: {
+    id: 'Automatically',
+    defaultMessage: 'Automatically',
+  },
+  Manually: {
+    id: 'Manually',
+    defaultMessage: 'Manually',
+  },
+  examplePath: {
+    id: 'examplePath',
+    defaultMessage: '/example',
+  },
 });
 
 const filterChoices = [
@@ -67,215 +139,153 @@ const Aliases = (props) => {
   const { pathname } = useLocation();
   const history = useHistory();
 
+  const hasAdvancedFiltering = useSelector(
+    (state) => state.site.data?.features?.filter_aliases_by_date,
+  );
+  const hasBulkUpload = hasAdvancedFiltering !== undefined;
   const aliases = useSelector((state) => state.aliases);
   const [filterType, setFilterType] = useState(filterChoices[0]);
   const [createdBefore, setCreatedBefore] = useState(null);
-  const [altUrlPath, setAltUrlPath] = useState('');
-  const [isAltUrlCorrect, setIsAltUrlCorrect] = useState(false);
-  const [targetUrlPath, setTargetUrlPath] = useState('');
+  const [createdAfter, setCreatedAfter] = useState(null);
   const [aliasesToRemove, setAliasesToRemove] = useState([]);
-  const [errorMessageAdd, setErrorMessageAdd] = useState('');
   const [filterQuery, setFilterQuery] = useState('');
   const [activePage, setActivePage] = useState(1);
-  const [pages, setPages] = useState('');
   const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const [addError, setAddError] = useState(null);
+  const [editingData, setEditingData] = useState(null);
+  const [uploadModalOpen, setUploadModalOpen] = useState(false);
+  const [uploadError, setUploadError] = useState(null);
   const isClient = useClient();
 
-  const prevaliasesitemstotal = usePrevious(aliases.items_total);
-  const previtemsPerPage = usePrevious(itemsPerPage);
-  const prevactivePage = usePrevious(activePage);
-  const prevalturlpath = usePrevious(altUrlPath);
-  const prevtargetUrlPath = usePrevious(targetUrlPath);
-  const prevaliasesaddloading = usePrevious(aliases.add.loading);
-  const prevaliasesremoveloading = usePrevious(aliases.remove.loading);
-
-  useEffect(() => {
-    if (
-      prevaliasesitemstotal !== aliases.items_total ||
-      previtemsPerPage !== itemsPerPage
-    ) {
-      const pages = Math.ceil(aliases.items_total / itemsPerPage);
-
-      if (pages === 0 || isNaN(pages)) {
-        setPages('');
-      } else {
-        setPages(pages);
-      }
-    }
-    if (prevactivePage !== activePage || previtemsPerPage !== itemsPerPage) {
-      dispatch(
-        getAliases(getBaseUrl(pathname), {
-          query: filterQuery,
-          manual: filterType.value,
-          datetime: createdBefore,
-          batchSize: itemsPerPage === 'All' ? 999999999999 : itemsPerPage,
-          batchStart: (activePage - 1) * itemsPerPage,
-        }),
-      );
-    }
-    if (prevalturlpath !== altUrlPath) {
-      if (altUrlPath.charAt(0) === '/') {
-        setIsAltUrlCorrect(true);
-      } else {
-        setIsAltUrlCorrect(false);
-      }
+  const updateResults = useCallback(() => {
+    const options = {
+      query: filterQuery,
+      manual: filterType.value,
+      batchStart: (activePage - 1) * itemsPerPage,
+      batchSize: itemsPerPage === 'All' ? 999999999999 : itemsPerPage,
+    };
+    if (hasAdvancedFiltering) {
+      options.start = createdAfter || '';
+      options.end = createdBefore || '';
+    } else {
+      options.datetime = createdBefore || '';
     }
+    dispatch(getAliases(getBaseUrl(pathname), options));
   }, [
-    itemsPerPage,
-    pathname,
-    prevaliasesitemstotal,
-    aliases.items_total,
-    previtemsPerPage,
-    prevactivePage,
     activePage,
-    prevalturlpath,
-    altUrlPath,
-    prevtargetUrlPath,
-    targetUrlPath,
-    dispatch,
-    filterQuery,
-    filterType.value,
+    createdAfter,
     createdBefore,
-  ]);
-
-  useEffect(() => {
-    if (prevaliasesaddloading && !aliases.add.loaded) {
-      if (aliases.add.error) {
-        setErrorMessageAdd(aliases.add.error.response.body.message);
-      }
-    }
-    if (prevaliasesaddloading && aliases.add.loaded) {
-      dispatch(
-        getAliases(getBaseUrl(pathname), {
-          query: filterQuery,
-          manual: filterType.value,
-          datetime: createdBefore,
-          batchSize: itemsPerPage,
-        }),
-      );
-      toast.success(
-        <Toast
-          success
-          title={intl.formatMessage(messages.success)}
-          content={intl.formatMessage(messages.successAdd)}
-        />,
-      );
-      if (!aliases.add.error) {
-        setErrorMessageAdd('');
-      }
-    }
-    if (prevaliasesremoveloading && aliases.remove.loaded) {
-      dispatch(
-        getAliases(getBaseUrl(pathname), {
-          query: filterQuery,
-          manual: filterType.value,
-          datetime: createdBefore,
-          batchSize: itemsPerPage,
-        }),
-      );
-    }
-  }, [
-    prevaliasesaddloading,
-    aliases.add.loaded,
-    aliases.add.error,
-    aliases.remove.loaded,
-    prevaliasesremoveloading,
     dispatch,
-    pathname,
     filterQuery,
     filterType.value,
-    createdBefore,
+    hasAdvancedFiltering,
     itemsPerPage,
-    intl,
+    pathname,
   ]);
 
-  const onCancel = () => {
-    history.push(getParentUrl(pathname));
-  };
-
-  const handleSelectFilterType = (type) => {
-    setFilterType(type);
-  };
+  // Update results after changing the page.
+  // (We intentionally leave updateResults out of the deps.)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => updateResults(), [activePage, itemsPerPage]);
 
-  const handleFilterQueryChange = (query) => {
-    setFilterQuery(query);
-  };
-
-  const handleCreateDate = (date) => {
-    setCreatedBefore(date);
-  };
-
-  const handleSubmitFilter = () => {
-    dispatch(
-      getAliases(getBaseUrl(pathname), {
-        query: filterQuery,
-        manual: filterType.value,
-        datetime: createdBefore,
-        batchSize: itemsPerPage,
-      }),
-    );
-  };
-
-  const handleAltUrlChange = (url) => {
-    setAltUrlPath(url);
-  };
-
-  const handleTargetUrlChange = (url) => {
-    setTargetUrlPath(url);
-  };
+  // Calculate page count from results
+  const pages = useMemo(() => {
+    let pages = Math.ceil(aliases.items_total / itemsPerPage);
+    if (pages === 0 || isNaN(pages)) {
+      pages = '';
+    }
+    return pages;
+  }, [aliases.items_total, itemsPerPage]);
 
-  const handleSubmitAlias = useCallback(() => {
-    if (isAltUrlCorrect) {
+  // Add new alias
+  const handleAdd = (formData) => {
+    const { altUrlPath, targetUrlPath } = formData;
+    // Validate altUrlPath starts with a slash
+    if (!altUrlPath || altUrlPath.charAt(0) !== '/') {
+      setAddError(intl.formatMessage(messages.altUrlError));
+      return;
+    }
+    // Remove existing alias first if we're editing it.
+    const precondition = editingData
+      ? dispatch(
+          removeAliases('', { items: [{ path: editingData.altUrlPath }] }),
+        )
+      : Promise.resolve();
+    precondition.then(() => {
       dispatch(
         addAliases('', {
-          items: [
-            {
-              path: altUrlPath,
-              'redirect-to': targetUrlPath,
-            },
-          ],
+          items: [{ path: altUrlPath, 'redirect-to': targetUrlPath }],
         }),
-      );
-      setAltUrlPath('');
-      setTargetUrlPath('');
-    }
-  }, [isAltUrlCorrect, altUrlPath, targetUrlPath, dispatch]);
+      )
+        .then(() => {
+          updateResults();
+          setAddModalOpen(false);
+          setEditingData(null);
+          toast.success(
+            <Toast
+              success
+              title={intl.formatMessage(messages.success)}
+              content={intl.formatMessage(messages.successAdd)}
+            />,
+          );
+        })
+        .catch((error) => {
+          setAddError(error.response?.body?.message);
+        });
+    });
+  };
 
+  // Check/uncheck an alias
   const handleCheckAlias = (alias) => {
-    const aliasess = [...aliasesToRemove];
-    if (aliasess.includes(alias)) {
-      const index = aliasess.indexOf(alias);
-      if (index > -1) {
-        let newAliasesArr = aliasess;
-        newAliasesArr.splice(index, 1);
-        setAliasesToRemove(newAliasesArr);
-      }
+    if (aliasesToRemove.includes(alias)) {
+      setAliasesToRemove(aliasesToRemove.filter((x) => x !== alias));
     } else {
       setAliasesToRemove([...aliasesToRemove, alias]);
     }
   };
-  const handleRemoveAliases = () => {
-    const items = aliasesToRemove.map((a) => {
-      return {
-        path: a,
-      };
-    });
 
+  // Remove selected aliases
+  const handleRemoveAliases = () => {
     dispatch(
       removeAliases('', {
-        items,
+        items: aliasesToRemove.map((a) => ({ path: a })),
       }),
-    );
+    ).then(() => {
+      updateResults();
+      toast.success(
+        <Toast
+          success
+          title={intl.formatMessage(messages.success)}
+          content={intl.formatMessage(messages.successRemove)}
+        />,
+      );
+    });
     setAliasesToRemove([]);
   };
 
-  const handlePageChange = (e, { activePage }) => {
-    setActivePage(activePage);
-  };
-
-  const handleItemsPerPage = (e, { value }) => {
-    setItemsPerPage(value);
-    setActivePage(1);
+  // Upload CSV
+  const handleBulkUpload = (formData) => {
+    fetch(`data:${formData.file['content-type']};base64,${formData.file.data}`)
+      .then((res) => res.blob())
+      .then((blob) => {
+        dispatch(uploadAliases(blob))
+          .then(() => {
+            updateResults();
+            setUploadError(null);
+            setUploadModalOpen(false);
+            toast.success(
+              <Toast
+                success
+                title={intl.formatMessage(messages.success)}
+                content={intl.formatMessage(messages.successUpload)}
+              />,
+            );
+          })
+          .catch((error) => {
+            setUploadError(error.response?.body?.message);
+          });
+      });
   };
 
   return (
@@ -291,246 +301,319 @@ const Aliases = (props) => {
                 values={{ title: <q>{title}</q> }}
               />
             </Segment>
-            <Form>
-              <Segment>
-                <Header size="medium">
-                  <FormattedMessage
-                    id="Alternative url path (Required)"
-                    defaultMessage="Alternative url path (Required)"
-                  />
-                </Header>
-                <p className="help">
-                  <FormattedMessage
-                    id="Enter the absolute path where the alternative url should exist. The path must start with '/'. Only urls that result in a 404 not found page will result in a redirect occurring."
-                    defaultMessage="Enter the absolute path where the alternative url should exist. The path must start with '/'. Only urls that result in a 404 not found page will result in a redirect occurring."
-                  />
-                </p>
-                <Form.Field>
-                  <Input
-                    id="alternative-url-input"
-                    name="alternative-url-path"
-                    placeholder="/example"
-                    value={altUrlPath}
-                    onChange={(e) => handleAltUrlChange(e.target.value)}
-                  />
-                  {!isAltUrlCorrect && altUrlPath !== '' && (
-                    <p style={{ color: 'red' }}>
-                      <FormattedMessage
-                        id="Alternative url path must start with a slash."
-                        defaultMessage="Alternative url path must start with a slash."
-                      />
-                    </p>
-                  )}
-                </Form.Field>
-                <Header size="medium">
-                  <FormattedMessage
-                    id="Target Path (Required)"
-                    defaultMessage="Target Path (Required)"
-                  />
-                </Header>
-                <p className="help">
-                  <FormattedMessage
-                    id="Enter the absolute path of the target. Target must exist or be an existing alternative url path to the target."
-                    defaultMessage="Enter the absolute path of the target. Target must exist or be an existing alternative url path to the target."
-                  />
-                </p>
-                <Form.Field>
-                  <Input
-                    id="target-url-input"
-                    name="target-url-path"
-                    placeholder="/example"
-                    value={targetUrlPath}
-                    onChange={(e) => handleTargetUrlChange(e.target.value)}
-                  />
-                </Form.Field>
-                <Button
-                  id="submit-alias"
-                  primary
-                  onClick={() => handleSubmitAlias()}
-                  disabled={
-                    !isAltUrlCorrect ||
-                    altUrlPath === '' ||
-                    targetUrlPath === ''
+            <Segment>
+              <Button
+                primary
+                id="add-alt-url"
+                onClick={() => setAddModalOpen(true)}
+              >
+                {intl.formatMessage(messages.AddUrl)}&hellip;
+              </Button>
+              {addModalOpen && (
+                <ModalForm
+                  open={true}
+                  onSubmit={handleAdd}
+                  onCancel={() => setAddModalOpen(false)}
+                  title={
+                    editingData
+                      ? intl.formatMessage(messages.EditUrl)
+                      : intl.formatMessage(messages.AddUrl)
                   }
-                >
-                  <FormattedMessage id="Add" defaultMessage="Add" />
-                </Button>
-                {errorMessageAdd && (
-                  <Message color="red">
-                    <Message.Header>
-                      <FormattedMessage
-                        id="ErrorHeader"
-                        defaultMessage="Error"
-                      />
-                    </Message.Header>
-                    <p>{errorMessageAdd}</p>
-                  </Message>
-                )}
-              </Segment>
-            </Form>
-            <Form>
-              <Segment className="primary">
+                  submitError={addError}
+                  schema={{
+                    fieldsets: [
+                      {
+                        id: 'default',
+                        fields: ['altUrlPath', 'targetUrlPath'],
+                      },
+                    ],
+                    properties: {
+                      altUrlPath: {
+                        title: intl.formatMessage(messages.altUrlPathTitle),
+                        description: (
+                          <FormattedMessage
+                            id="Enter the absolute path where the alternative url should exist. The path must start with '/'. Only URLs that result in a 404 not found page will result in a redirect occurring."
+                            defaultMessage="Enter the absolute path where the alternative URL should exist. The path must start with '/'. Only URLs that result in a 404 not found page will result in a redirect occurring."
+                          />
+                        ),
+                        placeholder: intl.formatMessage(messages.examplePath),
+                      },
+                      targetUrlPath: {
+                        title: intl.formatMessage(messages.targetUrlPathTitle),
+                        description: (
+                          <FormattedMessage
+                            id="Enter the absolute path of the target. Target must exist or be an existing alternative url path to the target."
+                            defaultMessage="Enter the absolute path of the target. Target must exist or be an existing alternative URL path to the target."
+                          />
+                        ),
+                        placeholder: intl.formatMessage(messages.examplePath),
+                      },
+                    },
+                    required: ['altUrlPath', 'targetUrlPath'],
+                  }}
+                  formData={editingData || {}}
+                />
+              )}
+              {hasBulkUpload && (
+                <>
+                  <Button onClick={() => setUploadModalOpen(true)}>
+                    {intl.formatMessage(messages.BulkUploadAltUrls)}&hellip;
+                  </Button>
+                  {uploadModalOpen && (
+                    <ModalForm
+                      open={true}
+                      onSubmit={handleBulkUpload}
+                      onCancel={() => setUploadModalOpen(false)}
+                      title={intl.formatMessage(messages.BulkUploadAltUrls)}
+                      submitError={uploadError}
+                      description={
+                        <>
+                          <p>
+                            <FormattedMessage
+                              id="bulkUploadUrlsHelp"
+                              defaultMessage="Add many alternative URLs at once by uploading a CSV file. The first column should be the path to redirect from; the second, the path to redirect to. Both paths must be Plone-site-relative, starting with a slash (/). An optional third column can contain a date and time. An optional fourth column can contain a boolean to mark as a manual redirect (default true)."
+                            />
+                          </p>
+                          <p>
+                            <FormattedMessage
+                              id="Example"
+                              defaultMessage="Example"
+                            />
+                            :
+                            <br />
+                            <code>
+                              /old-home-page.asp,/front-page,2019/01/27 10:42:59
+                              GMT+1,true
+                              <br />
+                              /people/JoeT,/Users/joe-thurston,2018-12-31,false
+                            </code>
+                          </p>
+                        </>
+                      }
+                      schema={{
+                        fieldsets: [
+                          {
+                            id: 'default',
+                            fields: ['file'],
+                          },
+                        ],
+                        properties: {
+                          file: {
+                            title: intl.formatMessage(messages.CSVFile),
+                            type: 'object',
+                            factory: 'File Upload',
+                          },
+                        },
+                        required: ['file'],
+                      }}
+                    />
+                  )}
+                </>
+              )}
+            </Segment>
+            <Segment>
+              <Form>
                 <Header size="medium">
                   <FormattedMessage
                     id="All existing alternative urls for this site"
-                    defaultMessage="All existing alternative urls for this site"
+                    defaultMessage="Existing alternative URLs for this site"
                   />
                 </Header>
-                <Header size="small">
-                  <FormattedMessage
-                    id="Filter by prefix"
-                    defaultMessage="Filter by prefix"
-                  />
-                </Header>
-                <Form.Field>
-                  <Input
-                    name="filter"
-                    placeholder="/example"
-                    value={filterQuery}
-                    onChange={(e) => handleFilterQueryChange(e.target.value)}
-                  />
-                </Form.Field>
-                <Header size="small">
-                  <FormattedMessage
-                    id="Manually or automatically added?"
-                    defaultMessage="Manually or automatically added?"
-                  />
-                </Header>
-                {filterChoices.map((o, i) => (
-                  <Form.Field key={i}>
-                    <Radio
-                      label={o.label}
-                      name="radioGroup"
-                      value={o.value}
-                      checked={filterType === o}
-                      onChange={() => handleSelectFilterType(o)}
+                <Segment>
+                  <Form.Field>
+                    <FormFieldWrapper
+                      id="filterQuery"
+                      title={intl.formatMessage(messages.filterByPrefix)}
+                    >
+                      <Input
+                        name="filter"
+                        placeholder={intl.formatMessage(messages.examplePath)}
+                        value={filterQuery}
+                        onChange={(e) => setFilterQuery(e.target.value)}
+                      />
+                    </FormFieldWrapper>
+                  </Form.Field>
+                  <Form.Field>
+                    <FormFieldWrapper
+                      id="filterType"
+                      title={intl.formatMessage(messages.manualOrAuto)}
+                    >
+                      <Form.Group inline>
+                        {filterChoices.map((o, i) => (
+                          <Form.Field key={i}>
+                            <Radio
+                              label={intl.formatMessage({ id: o.label })}
+                              name="radioGroup"
+                              value={o.value}
+                              checked={filterType === o}
+                              onChange={() => setFilterType(o)}
+                            />
+                          </Form.Field>
+                        ))}
+                      </Form.Group>
+                    </FormFieldWrapper>
+                  </Form.Field>
+                  <Form.Field>
+                    <DatetimeWidget
+                      id="created-before-date"
+                      title={intl.formatMessage(messages.createdBefore)}
+                      dateOnly={true}
+                      value={createdBefore}
+                      onChange={(id, value) => {
+                        setCreatedBefore(value);
+                      }}
                     />
                   </Form.Field>
-                ))}
-                <Form.Field>
-                  <DatetimeWidget
-                    id="created-before-date"
-                    title={'Created before'}
-                    dateOnly={true}
-                    value={createdBefore}
-                    onChange={(id, value) => {
-                      handleCreateDate(value);
-                    }}
-                  />
-                </Form.Field>
-                <Button onClick={() => handleSubmitFilter()} primary>
-                  Filter
-                </Button>
-                <Header size="small">
-                  <FormattedMessage
-                    id="Alternative url path → target url path (date and time of creation, manually created yes/no)"
-                    defaultMessage="Alternative url path → target url path (date and time of creation, manually created yes/no)"
-                  />
-                </Header>
+                  {hasAdvancedFiltering && (
+                    <Form.Field>
+                      <DatetimeWidget
+                        id="created-after-date"
+                        title={intl.formatMessage(messages.createdAfter)}
+                        dateOnly={true}
+                        value={createdAfter}
+                        onChange={(id, value) => {
+                          setCreatedAfter(value);
+                        }}
+                      />
+                    </Form.Field>
+                  )}
+                  <Button onClick={() => updateResults()} primary>
+                    <FormattedMessage id="Filter" defaultMessage="Filter" />
+                  </Button>
+                </Segment>
+              </Form>
+            </Segment>
+            <Segment>
+              <Header size="small">
+                <FormattedMessage
+                  id="Alternative url path → target url path (date and time of creation, manually created yes/no)"
+                  defaultMessage="Alternative URL path → target URL path (date and time of creation, manually created yes/no)"
+                />
+              </Header>
 
-                <Table>
-                  <Table.Body>
+              <Table celled compact>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell width="1">
+                      <FormattedMessage id="Select" defaultMessage="Select" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell width="10">
+                      <FormattedMessage id="Alias" defaultMessage="Alias" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell width="1">
+                      <FormattedMessage id="Date" defaultMessage="Date" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell width="1">
+                      <FormattedMessage id="Manual" defaultMessage="Manual" />
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {aliases.get.loading && (
                     <Table.Row>
-                      <Table.HeaderCell>
-                        <FormattedMessage id="Select" defaultMessage="Select" />
-                      </Table.HeaderCell>
-                      <Table.HeaderCell>
-                        <FormattedMessage id="Alias" defaultMessage="Alias" />
-                      </Table.HeaderCell>
-                      <Table.HeaderCell>
-                        <FormattedMessage id="Target" defaultMessage="Target" />
-                      </Table.HeaderCell>
-                      <Table.HeaderCell>
-                        <FormattedMessage id="Date" defaultMessage="Date" />
-                      </Table.HeaderCell>
-                      <Table.HeaderCell>
-                        <FormattedMessage id="Manual" defaultMessage="Manual" />
-                      </Table.HeaderCell>
+                      <Table.Cell colSpan="4">
+                        <Loader active inline="centered" />
+                      </Table.Cell>
                     </Table.Row>
-                    {aliases.items.length > 0 &&
-                      aliases.items.map((alias, i) => (
-                        <Table.Row key={i}>
-                          <Table.Cell>
-                            <Checkbox
-                              onChange={(e, { value }) =>
-                                handleCheckAlias(value)
-                              }
-                              checked={aliasesToRemove.includes(alias.path)}
-                              value={alias.path}
-                            />
-                          </Table.Cell>
-                          <Table.Cell>
-                            <p>{alias.path}</p>
-                          </Table.Cell>
-                          <Table.Cell>
-                            <p>{alias['redirect-to']}</p>
-                          </Table.Cell>
-                          <Table.Cell>
-                            <p>{alias.datetime}</p>
-                          </Table.Cell>
-                          <Table.Cell>
-                            <p>{`${alias.manual}`}</p>
-                          </Table.Cell>
-                        </Table.Row>
-                      ))}
-                  </Table.Body>
-                </Table>
-                <div
-                  style={{
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    alignItems: 'center',
-                    marginBottom: '20px',
-                  }}
-                >
-                  {pages && (
-                    <Pagination
-                      boundaryRange={0}
-                      activePage={activePage}
-                      ellipsisItem={null}
-                      firstItem={null}
-                      lastItem={null}
-                      siblingRange={1}
-                      totalPages={pages}
-                      onPageChange={(e, o) => handlePageChange(e, o)}
-                    />
                   )}
-                  <Menu.Menu
-                    position="right"
-                    style={{ display: 'flex', marginLeft: 'auto' }}
-                  >
-                    <Menu.Item style={{ color: 'grey' }}>
-                      <FormattedMessage id="Show" defaultMessage="Show" />:
-                    </Menu.Item>
-                    {map(itemsPerPageChoices, (size) => (
-                      <Menu.Item
-                        style={{
-                          padding: '0 0.4em',
-                          margin: '0em 0.357em',
-                          cursor: 'pointer',
-                        }}
-                        key={size}
-                        value={size}
-                        active={size === itemsPerPage}
-                        onClick={(e, o) => handleItemsPerPage(e, o)}
-                      >
-                        {size}
-                      </Menu.Item>
+                  {aliases.items.length > 0 &&
+                    aliases.items.map((alias, i) => (
+                      <Table.Row key={i} verticalAlign="top">
+                        <Table.Cell>
+                          <Checkbox
+                            onChange={(e, { value }) => handleCheckAlias(value)}
+                            checked={aliasesToRemove.includes(alias.path)}
+                            value={alias.path}
+                          />
+                        </Table.Cell>
+                        <Table.Cell>
+                          {alias.path}
+                          <br />
+                          &nbsp;&nbsp;&rarr; {alias['redirect-to']}{' '}
+                          <Button
+                            basic
+                            style={{ verticalAlign: 'middle' }}
+                            aria-label={intl.formatMessage(messages.EditUrl)}
+                            onClick={() => {
+                              setEditingData({
+                                altUrlPath: alias.path,
+                                targetUrlPath: alias['redirect-to'],
+                              });
+                              setAddModalOpen(true);
+                            }}
+                          >
+                            <Icon name={editingSVG} size="18px" />
+                          </Button>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <FormattedDate date={alias.datetime} />
+                        </Table.Cell>
+                        <Table.Cell>{`${alias.manual}`}</Table.Cell>
+                      </Table.Row>
                     ))}
-                  </Menu.Menu>
-                </div>
-                <Button
-                  disabled={aliasesToRemove.length === 0}
-                  onClick={handleRemoveAliases}
-                  primary
-                >
-                  <FormattedMessage
-                    id="Remove selected"
-                    defaultMessage="Remove selected"
+                </Table.Body>
+              </Table>
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  marginBottom: '20px',
+                }}
+              >
+                {pages && (
+                  <Pagination
+                    boundaryRange={0}
+                    activePage={activePage}
+                    ellipsisItem={null}
+                    firstItem={null}
+                    lastItem={null}
+                    siblingRange={1}
+                    totalPages={pages}
+                    onPageChange={(e, { activePage }) =>
+                      setActivePage(activePage)
+                    }
                   />
-                </Button>
-              </Segment>
-            </Form>
+                )}
+                <Menu.Menu
+                  position="right"
+                  style={{ display: 'flex', marginLeft: 'auto' }}
+                >
+                  <Menu.Item style={{ color: 'grey' }}>
+                    <FormattedMessage id="Show" defaultMessage="Show" />:
+                  </Menu.Item>
+                  {map(itemsPerPageChoices, (size) => (
+                    <Menu.Item
+                      style={{
+                        padding: '0 0.4em',
+                        margin: '0em 0.357em',
+                        cursor: 'pointer',
+                      }}
+                      key={size}
+                      value={size}
+                      active={size === itemsPerPage}
+                      onClick={(e, { value }) => {
+                        setItemsPerPage(value);
+                        setActivePage(1);
+                      }}
+                    >
+                      {size}
+                    </Menu.Item>
+                  ))}
+                </Menu.Menu>
+              </div>
+              <Button
+                id="remove-alt-urls"
+                disabled={aliasesToRemove.length === 0}
+                onClick={handleRemoveAliases}
+                primary
+              >
+                <FormattedMessage
+                  id="Remove selected"
+                  defaultMessage="Remove selected"
+                />
+              </Button>
+            </Segment>
           </Segment.Group>
         </article>
       </Container>
@@ -540,7 +623,11 @@ const Aliases = (props) => {
             pathname={pathname}
             hideDefaultViewButtons
             inner={
-              <Link className="item" to="#" onClick={() => onCancel()}>
+              <Link
+                className="item"
+                to="#"
+                onClick={() => history.push(getParentUrl(pathname))}
+              >
                 <Icon
                   name={backSVG}
                   className="contents circled"