mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added link to edit existing servers

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/common/AsideMenu.js
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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react'; import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
@ -7,8 +12,13 @@ import classNames from 'classnames';
import { serverType } from '../servers/prop-types'; import { serverType } from '../servers/prop-types';
import './AsideMenu.scss'; import './AsideMenu.scss';
const AsideMenuItem = ({ children, to, ...rest }) => ( const AsideMenuItem = ({ children, to, className, ...rest }) => (
<NavLink className="aside-menu__item" activeClassName="aside-menu__item--selected" to={to} {...rest}> <NavLink
className={classNames('aside-menu__item', className)}
activeClassName="aside-menu__item--selected"
to={to}
{...rest}
>
{children} {children}
</NavLink> </NavLink>
); );
@ -16,6 +26,7 @@ const AsideMenuItem = ({ children, to, ...rest }) => (
AsideMenuItem.propTypes = { AsideMenuItem.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
to: PropTypes.string.isRequired, to: PropTypes.string.isRequired,
className: PropTypes.string,
}; };
const propTypes = { const propTypes = {
@ -48,7 +59,10 @@ const AsideMenu = (DeleteServerButton) => {
<FontAwesomeIcon icon={tagsIcon} /> <FontAwesomeIcon icon={tagsIcon} />
<span className="aside-menu__item-text">Manage tags</span> <span className="aside-menu__item-text">Manage tags</span>
</AsideMenuItem> </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 <DeleteServerButton
className="aside-menu__item aside-menu__item--danger" className="aside-menu__item aside-menu__item--danger"
textClassName="aside-menu__item-text" textClassName="aside-menu__item-text"

3
src/common/AsideMenu.scss
View file

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

2
test/common/AsideMenu.test.js
View file

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