Added link to edit existing servers

This commit is contained in:
Alejandro Celaya 2020-03-15 14:03:41 +01:00
parent 24f2deda46
commit 35a62f1fb1
3 changed files with 22 additions and 5 deletions

View file

@ -1,4 +1,9 @@
import { faList as listIcon, faLink as createIcon, faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
import {
faList as listIcon,
faLink as createIcon,
faTags as tagsIcon,
faPen as editIcon,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { NavLink } from 'react-router-dom';
@ -7,8 +12,13 @@ import classNames from 'classnames';
import { serverType } from '../servers/prop-types';
import './AsideMenu.scss';
const AsideMenuItem = ({ children, to, ...rest }) => (
<NavLink className="aside-menu__item" activeClassName="aside-menu__item--selected" to={to} {...rest}>
const AsideMenuItem = ({ children, to, className, ...rest }) => (
<NavLink
className={classNames('aside-menu__item', className)}
activeClassName="aside-menu__item--selected"
to={to}
{...rest}
>
{children}
</NavLink>
);
@ -16,6 +26,7 @@ const AsideMenuItem = ({ children, to, ...rest }) => (
AsideMenuItem.propTypes = {
children: PropTypes.node.isRequired,
to: PropTypes.string.isRequired,
className: PropTypes.string,
};
const propTypes = {
@ -48,7 +59,10 @@ const AsideMenu = (DeleteServerButton) => {
<FontAwesomeIcon icon={tagsIcon} />
<span className="aside-menu__item-text">Manage tags</span>
</AsideMenuItem>
<AsideMenuItem to={buildPath('/edit')} className="aside-menu__item--push">
<FontAwesomeIcon icon={editIcon} />
<span className="aside-menu__item-text">Edit this server</span>
</AsideMenuItem>
<DeleteServerButton
className="aside-menu__item aside-menu__item--danger"
textClassName="aside-menu__item-text"

View file

@ -67,6 +67,9 @@ $asideMenuMobileWidth: 280px;
.aside-menu__item--danger {
color: $dangerColor;
}
.aside-menu__item--push {
margin-top: auto;
}

View file

@ -16,7 +16,7 @@ describe('<AsideMenu />', () => {
it('contains links to different sections', () => {
const links = wrapped.find('[to]');
expect(links).toHaveLength(3);
expect(links).toHaveLength(4);
links.forEach((link) => expect(link.prop('to')).toContain('abc123'));
});