mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Merge pull request #356 from acelaya-forks/feature/welcome-ui
Feature/welcome UI
This commit is contained in:
Alejandro Celaya
GitHub
commit
214b952e84
23 changed files with 264 additions and 73 deletions
|
|
@ -19,6 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
* Date filtering can be now selected through relative times (last 7 days, last 30 days, etc) or absolute dates using date pickers.
|
||||
* Only the visits for last 30 days are loaded by default. You can change that at any moment if required.
|
||||
|
||||
* [#355](https://github.com/shlinkio/shlink-web-client/issues/355) Improved home page, fixing also its scrolling behavior for mobile devices.
|
||||
|
||||
### Changed
|
||||
* [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX.
|
||||
* [#352](https://github.com/shlinkio/shlink-web-client/issues/352) Moved from Scrutinizer to Codecov as the code coverage backend.
|
||||
|
|
|
|||
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -23075,9 +23075,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"react-external-link": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.1.1.tgz",
|
||||
"integrity": "sha512-e2WnTWkg81cuqxmDfjOalliAE20+Y/uD+lserN4uuwkwu+ciGLB3BMz4m7GnXh2+TowIi4sLtCL7zr7aDnIaqA=="
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.2.0.tgz",
|
||||
"integrity": "sha512-6Lm0pD6rxrvZGVrWIWda809cAtrIlM3fDsKh9y5bKEVpOI0FTO2nTnxaqEood8+rw3svHJgpJGN6lZHO69ZTAQ=="
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.7.0",
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
"react-copy-to-clipboard": "^5.0.2",
|
||||
"react-datepicker": "^3.3.0",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-external-link": "^1.1.1",
|
||||
"react-external-link": "^1.2.0",
|
||||
"react-leaflet": "^3.0.2",
|
||||
"react-moment": "^1.0.0",
|
||||
"react-redux": "^7.2.2",
|
||||
|
|
|
|||
|
|
@ -1,18 +1,41 @@
|
|||
@import '../utils/base';
|
||||
@import '../utils/mixins/vertical-align';
|
||||
|
||||
.home {
|
||||
text-align: center;
|
||||
height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
|
||||
@media (min-width: $mdMin) {
|
||||
padding-top: 0;
|
||||
height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
|
||||
}
|
||||
}
|
||||
|
||||
.home__logo {
|
||||
@include vertical-align();
|
||||
}
|
||||
|
||||
.home__main-card {
|
||||
margin: 0 auto;
|
||||
max-width: 720px;
|
||||
|
||||
@media (min-width: $mdMin) {
|
||||
@include vertical-align();
|
||||
}
|
||||
}
|
||||
|
||||
.home__title {
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: $mdMin) {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home__servers-container {
|
||||
@media (min-width: $mdMin) {
|
||||
border-left: 1px solid rgba(0, 0, 0, .125);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { isEmpty, values } from 'ramda';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Card, Row } from 'reactstrap';
|
||||
import { ExternalLink } from 'react-external-link';
|
||||
import ServersListGroup from '../servers/ServersListGroup';
|
||||
import './Home.scss';
|
||||
import { ServersMap } from '../servers/data';
|
||||
import { ShlinkLogo } from './img/ShlinkLogo';
|
||||
|
||||
export interface HomeProps {
|
||||
servers: ServersMap;
|
||||
|
|
@ -14,11 +17,32 @@ const Home = ({ servers }: HomeProps) => {
|
|||
|
||||
return (
|
||||
<div className="home">
|
||||
<h1 className="home__title">Welcome to Shlink</h1>
|
||||
<ServersListGroup servers={serversList}>
|
||||
{hasServers && <span>Please, select a server.</span>}
|
||||
{!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
|
||||
</ServersListGroup>
|
||||
<Card className="home__main-card">
|
||||
<Row noGutters>
|
||||
<div className="col-md-5 d-none d-md-block">
|
||||
<div className="p-4">
|
||||
<ShlinkLogo />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-7 home__servers-container">
|
||||
<div className="p-4">
|
||||
<h1 className="home__title">Welcome!</h1>
|
||||
</div>
|
||||
<ServersListGroup embedded servers={serversList}>
|
||||
{!hasServers && (
|
||||
<div className="p-4">
|
||||
<p>This application will help you to manage your Shlink servers.</p>
|
||||
<p>To start, please, <Link to="/server/create">add your first server</Link>.</p>
|
||||
<p className="m-0">
|
||||
You still don‘t have a Shlink server?
|
||||
Learn how to <ExternalLink href="https://shlink.io/documentation">get started</ExternalLink>.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</ServersListGroup>
|
||||
</div>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
|
|||
import classNames from 'classnames';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { useToggle } from '../utils/helpers/hooks';
|
||||
import shlinkLogo from './shlink-logo-white.png';
|
||||
import { ShlinkLogo } from './img/ShlinkLogo';
|
||||
import './MainHeader.scss';
|
||||
|
||||
const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) => {
|
||||
|
|
@ -21,7 +21,7 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
|
|||
return (
|
||||
<Navbar color="primary" dark fixed="top" className="main-header" expand="md">
|
||||
<NavbarBrand tag={Link} to="/">
|
||||
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
|
||||
<ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
|
||||
</NavbarBrand>
|
||||
|
||||
<NavbarToggler onClick={toggleOpen}>
|
||||
|
|
|
|||
25
src/common/img/ShlinkLogo.tsx
Normal file
25
src/common/img/ShlinkLogo.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { MAIN_COLOR } from '../../utils/theme';
|
||||
|
||||
export interface ShlinkLogoProps {
|
||||
color?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ShlinkLogo = ({ color = MAIN_COLOR, className }: ShlinkLogoProps) => (
|
||||
<svg className={className} viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill={color}>
|
||||
<path
|
||||
d=" M 23.71 85.08 C 17.22 49.81 49.44 14.86 85.08 18.12 C 118.83 19.21 145.72 53.33 139.45 86.37 C 155.64 102.30 171.32 118.83 187.87 134.36 C 198.32 111.73 208.84 89.12 219.57 66.62 C 226.05 53.84 243.47 48.74 255.73 56.27 C 263.76 62.10 270.34 69.69 277.25 76.75 C 286.28 86.61 285.72 102.89 276.31 112.31 C 223.38 165.37 170.38 218.37 117.35 271.34 C 107.72 280.99 91.01 281.25 81.11 271.86 C 74.39 264.94 66.82 258.69 61.24 250.77 C 53.72 238.52 58.85 221.07 71.64 214.62 C 94.11 203.87 116.72 193.38 139.33 182.91 C 123.81 166.36 107.30 150.68 91.37 134.49 C 60.20 140.28 27.37 116.78 23.71 85.08 Z"
|
||||
/>
|
||||
<path
|
||||
d=" M 205.21 201.23 C 225.32 181.36 260.88 181.11 281.14 200.86 C 299.25 218.75 317.37 236.65 335.10 254.93 C 356.73 278.01 352.01 318.70 326.03 336.56 C 320.07 330.47 313.73 324.65 308.12 318.28 C 323.86 309.39 328.76 286.18 316.63 272.39 C 301.73 256.95 286.30 242.03 271.24 226.75 C 264.49 219.65 256.80 212.00 246.37 211.52 C 224.65 208.64 205.52 233.36 214.49 253.58 C 221.09 266.81 234.22 275.12 243.62 286.24 C 240.43 295.96 238.09 306.13 238.29 316.46 C 225.55 304.29 213.16 291.73 200.89 279.09 C 180.97 257.57 183.10 220.45 205.21 201.23 Z"
|
||||
/>
|
||||
<path
|
||||
d=" M 273.90 352.07 C 252.28 328.99 256.98 288.31 282.96 270.46 C 288.93 276.54 295.26 282.36 300.88 288.72 C 285.14 297.62 280.23 320.82 292.38 334.61 C 307.27 350.05 322.70 364.96 337.75 380.25 C 344.51 387.35 352.20 395.00 362.64 395.48 C 384.35 398.37 403.49 373.64 394.51 353.42 C 387.92 340.18 374.78 331.88 365.38 320.76 C 368.56 311.04 370.91 300.86 370.71 290.54 C 383.45 302.70 395.84 315.27 408.11 327.91 C 428.03 349.43 425.90 386.55 403.78 405.77 C 383.68 425.64 348.13 425.89 327.86 406.14 C 309.75 388.25 291.60 370.37 273.90 352.07 Z"
|
||||
/>
|
||||
<path
|
||||
d=" M 422.11 403.83 C 431.96 394.07 441.60 384.06 451.66 374.51 C 460.90 383.74 471.89 392.70 474.89 406.11 C 480.16 429.97 484.08 454.13 488.76 478.12 C 490.00 483.41 484.47 488.29 479.35 486.63 C 454.66 481.52 429.55 478.12 405.14 471.84 C 393.17 467.97 385.20 457.75 376.55 449.27 C 386.39 439.49 396.13 429.60 406.06 419.91 C 416.37 433.45 435.74 414.00 422.11 403.83 Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
import { FC, useEffect } from 'react';
|
||||
import { Card, CardBody, CardHeader, CardText, CardTitle } from 'reactstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
|
||||
import { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
|
||||
import { prettify } from '../utils/helpers/numbers';
|
||||
|
|
@ -40,6 +40,7 @@ export const Overview = (
|
|||
const { loading: loadingTags } = tagsList;
|
||||
const { loading: loadingVisits, visitsCount } = visitsOverview;
|
||||
const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
|
||||
|
|
@ -95,7 +96,12 @@ export const Overview = (
|
|||
<Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all »</Link>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={selectedServer} className="mb-0" />
|
||||
<ShortUrlsTable
|
||||
shortUrlsList={shortUrlsList}
|
||||
selectedServer={selectedServer}
|
||||
className="mb-0"
|
||||
onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tag=${tag}`)}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
@import '../utils/base';
|
||||
@import '../utils/mixins/vertical-align';
|
||||
@import '../utils/mixins/thin-scroll';
|
||||
|
||||
.servers-list__list-group {
|
||||
.servers-list__list-group.servers-list__list-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.servers-list__list-group:not(.servers-list__list-group--embedded) {
|
||||
max-width: 400px;
|
||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
|
||||
}
|
||||
|
|
@ -12,8 +17,29 @@
|
|||
padding: .75rem 2.5rem .75rem 1rem;
|
||||
}
|
||||
|
||||
.servers-list__server-item:hover {
|
||||
background-color: $lightColor;
|
||||
}
|
||||
|
||||
.servers-list__server-item-icon {
|
||||
@include vertical-align();
|
||||
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.servers-list__list-group--embedded.servers-list__list-group--embedded {
|
||||
border-radius: 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, .125);
|
||||
|
||||
@media (min-width: $mdMin) {
|
||||
max-height: 220px;
|
||||
overflow-x: auto;
|
||||
|
||||
@include thin-scroll();
|
||||
}
|
||||
|
||||
.servers-list__server-item {
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .125);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { FC } from 'react';
|
||||
import { ListGroup, ListGroupItem } from 'reactstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import classNames from 'classnames';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
import { ServerWithId } from './data';
|
||||
|
|
@ -8,6 +9,7 @@ import './ServersListGroup.scss';
|
|||
|
||||
interface ServersListGroup {
|
||||
servers: ServerWithId[];
|
||||
embedded?: boolean;
|
||||
}
|
||||
|
||||
const ServerListItem = ({ id, name }: { id: string; name: string }) => (
|
||||
|
|
@ -17,13 +19,13 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
|
|||
</ListGroupItem>
|
||||
);
|
||||
|
||||
const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
|
||||
const ServersListGroup: FC<ServersListGroup> = ({ servers, children, embedded = false }) => (
|
||||
<>
|
||||
<div className="container">
|
||||
<h5>{children}</h5>
|
||||
</div>
|
||||
{children && <h5 className="mb-md-3">{children}</h5>}
|
||||
{servers.length > 0 && (
|
||||
<ListGroup className="servers-list__list-group mt-md-3">
|
||||
<ListGroup
|
||||
className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
|
||||
>
|
||||
{servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
|
||||
</ListGroup>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -87,9 +87,8 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
|
|||
orderByColumn={orderByColumn}
|
||||
renderOrderIcon={renderOrderIcon}
|
||||
selectedServer={selectedServer}
|
||||
refreshList={refreshList}
|
||||
shortUrlsListParams={shortUrlsListParams}
|
||||
shortUrlsList={shortUrlsList}
|
||||
onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import classNames from 'classnames';
|
|||
import { SelectedServer } from '../servers/data';
|
||||
import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
|
||||
import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
|
||||
import { OrderableFields, ShortUrlsListParams } from './reducers/shortUrlsListParams';
|
||||
import { OrderableFields } from './reducers/shortUrlsListParams';
|
||||
import './ShortUrlsTable.scss';
|
||||
|
||||
export interface ShortUrlsTableProps {
|
||||
|
|
@ -12,8 +12,7 @@ export interface ShortUrlsTableProps {
|
|||
renderOrderIcon?: (column: OrderableFields) => ReactNode;
|
||||
shortUrlsList: ShortUrlsListState;
|
||||
selectedServer: SelectedServer;
|
||||
refreshList?: Function;
|
||||
shortUrlsListParams?: ShortUrlsListParams;
|
||||
onTagClick?: (tag: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
|
|
@ -21,8 +20,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
|
|||
orderByColumn,
|
||||
renderOrderIcon,
|
||||
shortUrlsList,
|
||||
refreshList,
|
||||
shortUrlsListParams,
|
||||
onTagClick,
|
||||
selectedServer,
|
||||
className,
|
||||
}: ShortUrlsTableProps) => {
|
||||
|
|
@ -54,8 +52,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
|
|||
key={shortUrl.shortUrl}
|
||||
shortUrl={shortUrl}
|
||||
selectedServer={selectedServer}
|
||||
refreshList={refreshList}
|
||||
shortUrlsListParams={shortUrlsListParams}
|
||||
onTagClick={onTagClick}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { ExternalLink } from 'react-external-link';
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { ShortUrlsListParams } from '../reducers/shortUrlsListParams';
|
||||
import ColorGenerator from '../../utils/services/ColorGenerator';
|
||||
import { StateFlagTimeout } from '../../utils/helpers/hooks';
|
||||
import Tag from '../../tags/helpers/Tag';
|
||||
|
|
@ -16,8 +15,7 @@ import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
|
|||
import './ShortUrlsRow.scss';
|
||||
|
||||
export interface ShortUrlsRowProps {
|
||||
refreshList?: Function;
|
||||
shortUrlsListParams?: ShortUrlsListParams;
|
||||
onTagClick?: (tag: string) => void;
|
||||
selectedServer: SelectedServer;
|
||||
shortUrl: ShortUrl;
|
||||
}
|
||||
|
|
@ -26,7 +24,7 @@ const ShortUrlsRow = (
|
|||
ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
|
||||
colorGenerator: ColorGenerator,
|
||||
useStateFlagTimeout: StateFlagTimeout,
|
||||
) => ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }: ShortUrlsRowProps) => {
|
||||
) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
|
||||
const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout();
|
||||
const [ active, setActive ] = useStateFlagTimeout(false, 500);
|
||||
const isFirstRun = useRef(true);
|
||||
|
|
@ -36,14 +34,12 @@ const ShortUrlsRow = (
|
|||
return <i className="indivisible"><small>No tags</small></i>;
|
||||
}
|
||||
|
||||
const selectedTags = shortUrlsListParams?.tags ?? [];
|
||||
|
||||
return tags.map((tag) => (
|
||||
<Tag
|
||||
colorGenerator={colorGenerator}
|
||||
key={tag}
|
||||
text={tag}
|
||||
onClick={() => refreshList?.({ tags: [ ...selectedTags, tag ] })}
|
||||
onClick={() => onTagClick?.(tag)}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
|
|
|||
16
src/utils/mixins/thin-scroll.scss
Normal file
16
src/utils/mixins/thin-scroll.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@mixin thin-scroll() {
|
||||
/* Forefox scrollbar */
|
||||
scrollbar-color: rgba(0, 0, 0, .2) #f5f5f5;
|
||||
scrollbar-width: thin;
|
||||
|
||||
/* Chrome webkit scrollbar */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
7
src/utils/theme/index.ts
Normal file
7
src/utils/theme/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export const MAIN_COLOR = '#4696e5';
|
||||
|
||||
export const MAIN_COLOR_ALPHA = 'rgba(70, 150, 229, 0.4)';
|
||||
|
||||
export const HIGHLIGHTED_COLOR = '#F77F28';
|
||||
|
||||
export const HIGHLIGHTED_COLOR_ALPHA = 'rgba(247, 127, 40, 0.4)';
|
||||
|
|
@ -7,6 +7,7 @@ import { fillTheGaps } from '../../utils/helpers/visits';
|
|||
import { Stats } from '../types';
|
||||
import { prettify } from '../../utils/helpers/numbers';
|
||||
import { pointerOnHover, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
|
||||
import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../utils/theme';
|
||||
import './DefaultChart.scss';
|
||||
|
||||
export interface DefaultChartProps {
|
||||
|
|
@ -33,7 +34,7 @@ const generateGraphData = (
|
|||
title,
|
||||
label: highlightedData ? 'Non-selected' : 'Visits',
|
||||
data,
|
||||
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
|
||||
backgroundColor: isBarChart ? MAIN_COLOR_ALPHA : [
|
||||
'#97BBCD',
|
||||
'#F7464A',
|
||||
'#46BFBD',
|
||||
|
|
@ -46,15 +47,15 @@ const generateGraphData = (
|
|||
'#DCDCDC',
|
||||
'#463730',
|
||||
],
|
||||
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
|
||||
borderColor: isBarChart ? MAIN_COLOR : 'white',
|
||||
borderWidth: 2,
|
||||
},
|
||||
highlightedData && {
|
||||
title,
|
||||
label: highlightedLabel ?? 'Selected',
|
||||
data: highlightedData,
|
||||
backgroundColor: 'rgba(247, 127, 40, 0.4)',
|
||||
borderColor: '#F77F28',
|
||||
backgroundColor: HIGHLIGHTED_COLOR_ALPHA,
|
||||
borderColor: HIGHLIGHTED_COLOR,
|
||||
borderWidth: 2,
|
||||
},
|
||||
].filter(Boolean) as ChartDataSets[],
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { rangeOf } from '../../utils/utils';
|
|||
import ToggleSwitch from '../../utils/ToggleSwitch';
|
||||
import { prettify } from '../../utils/helpers/numbers';
|
||||
import { pointerOnHover, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
|
||||
import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
|
||||
import './LineChartCard.scss';
|
||||
|
||||
interface LineChartCardProps {
|
||||
|
|
@ -173,8 +174,8 @@ const LineChartCard = (
|
|||
const data: ChartData = {
|
||||
labels,
|
||||
datasets: [
|
||||
generateDataset(groupedVisits, 'Visits', '#4696e5'),
|
||||
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, '#F77F28'),
|
||||
generateDataset(groupedVisits, 'Visits', MAIN_COLOR),
|
||||
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, HIGHLIGHTED_COLOR),
|
||||
].filter(Boolean) as ChartDataSets[],
|
||||
};
|
||||
const options: ChartOptions = {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
|
|||
import { Mock } from 'ts-mockery';
|
||||
import Home, { HomeProps } from '../../src/common/Home';
|
||||
import { ServerWithId } from '../../src/servers/data';
|
||||
import { ShlinkLogo } from '../../src/common/img/ShlinkLogo';
|
||||
|
||||
describe('<Home />', () => {
|
||||
let wrapped: ShallowWrapper;
|
||||
|
|
@ -19,21 +20,26 @@ describe('<Home />', () => {
|
|||
|
||||
afterEach(() => wrapped?.unmount());
|
||||
|
||||
it('shows link to create server when no servers exist', () => {
|
||||
it('renders logo and title', () => {
|
||||
const wrapped = createComponent();
|
||||
|
||||
expect(wrapped.find('Link')).toHaveLength(1);
|
||||
expect(wrapped.find(ShlinkLogo)).toHaveLength(1);
|
||||
expect(wrapped.find('.home__title')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('asks to select a server when servers exist', () => {
|
||||
const servers = {
|
||||
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
|
||||
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
|
||||
};
|
||||
it.each([
|
||||
[
|
||||
{
|
||||
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
|
||||
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
|
||||
},
|
||||
0,
|
||||
],
|
||||
[{}, 3 ],
|
||||
])('shows link to create or set-up server only when no servers exist', (servers, expectedParagraphs) => {
|
||||
const wrapped = createComponent({ servers });
|
||||
const span = wrapped.find('span');
|
||||
const p = wrapped.find('p');
|
||||
|
||||
expect(span).toHaveLength(1);
|
||||
expect(span.text()).toContain('Please, select a server.');
|
||||
expect(p).toHaveLength(expectedParagraphs);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
34
test/common/img/ShlinkLogo.test.tsx
Normal file
34
test/common/img/ShlinkLogo.test.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { ShlinkLogo, ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
|
||||
import { MAIN_COLOR } from '../../../src/utils/theme';
|
||||
|
||||
describe('<ShlinkLogo />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const createWrapper = (props: ShlinkLogoProps) => {
|
||||
wrapper = shallow(<ShlinkLogo {...props} />);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it.each([
|
||||
[ undefined, MAIN_COLOR ],
|
||||
[ 'red', 'red' ],
|
||||
[ 'white', 'white' ],
|
||||
])('renders expected color', (color, expectedColor) => {
|
||||
const wrapper = createWrapper({ color });
|
||||
|
||||
expect(wrapper.find('g').prop('fill')).toEqual(expectedColor);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[ undefined, undefined ],
|
||||
[ 'foo', 'foo' ],
|
||||
[ 'bar', 'bar' ],
|
||||
])('renders expected class', (className, expectedClassName) => {
|
||||
const wrapper = createWrapper({ className });
|
||||
|
||||
expect(wrapper.prop('className')).toEqual(expectedClassName);
|
||||
});
|
||||
});
|
||||
|
|
@ -5,31 +5,58 @@ import ServersListGroup from '../../src/servers/ServersListGroup';
|
|||
import { ServerWithId } from '../../src/servers/data';
|
||||
|
||||
describe('<ServersListGroup />', () => {
|
||||
const servers = [
|
||||
Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
|
||||
Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
|
||||
];
|
||||
let wrapped: ShallowWrapper;
|
||||
const createComponent = (servers: ServerWithId[]) => {
|
||||
wrapped = shallow(<ServersListGroup servers={servers}>The list of servers</ServersListGroup>);
|
||||
const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
|
||||
const { servers = [], withChildren = true, embedded } = params;
|
||||
|
||||
wrapped = shallow(
|
||||
<ServersListGroup servers={servers} embedded={embedded}>
|
||||
{withChildren ? 'The list of servers' : undefined}
|
||||
</ServersListGroup>,
|
||||
);
|
||||
|
||||
return wrapped;
|
||||
};
|
||||
|
||||
afterEach(() => wrapped?.unmount());
|
||||
|
||||
it('Renders title', () => {
|
||||
const wrapped = createComponent([]);
|
||||
it('renders title', () => {
|
||||
const wrapped = createComponent({});
|
||||
const title = wrapped.find('h5');
|
||||
|
||||
expect(title).toHaveLength(1);
|
||||
expect(title.text()).toEqual('The list of servers');
|
||||
});
|
||||
|
||||
it('shows servers list', () => {
|
||||
const servers = [
|
||||
Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
|
||||
Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
|
||||
];
|
||||
const wrapped = createComponent(servers);
|
||||
it('does not render title when children is not provided', () => {
|
||||
const wrapped = createComponent({ withChildren: false });
|
||||
const title = wrapped.find('h5');
|
||||
|
||||
expect(wrapped.find(ListGroup)).toHaveLength(1);
|
||||
expect(title).toHaveLength(0);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[ servers ],
|
||||
[[]],
|
||||
])('shows servers list', (servers) => {
|
||||
const wrapped = createComponent({ servers });
|
||||
|
||||
expect(wrapped.find(ListGroup)).toHaveLength(servers.length ? 1 : 0);
|
||||
expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[ true, 'servers-list__list-group servers-list__list-group--embedded' ],
|
||||
[ false, 'servers-list__list-group' ],
|
||||
[ undefined, 'servers-list__list-group' ],
|
||||
])('renders proper classes for embedded', (embedded, expectedClasses) => {
|
||||
const wrapped = createComponent({ servers, embedded });
|
||||
const listGroup = wrapped.find(ListGroup);
|
||||
|
||||
expect(listGroup.prop('className')).toEqual(expectedClasses);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -43,9 +43,7 @@ describe('<ShortUrlsRow />', () => {
|
|||
beforeEach(() => {
|
||||
const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout);
|
||||
|
||||
wrapper = shallow(
|
||||
<ShortUrlsRow shortUrlsListParams={{}} refreshList={mockFunction} selectedServer={server} shortUrl={shortUrl} />,
|
||||
);
|
||||
wrapper = shallow(<ShortUrlsRow selectedServer={server} shortUrl={shortUrl} onTagClick={mockFunction} />);
|
||||
});
|
||||
afterEach(() => wrapper.unmount());
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
|||
import { keys, values } from 'ramda';
|
||||
import DefaultChart from '../../../src/visits/helpers/DefaultChart';
|
||||
import { prettify } from '../../../src/utils/helpers/numbers';
|
||||
import { MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../src/utils/theme';
|
||||
|
||||
describe('<DefaultChart />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
|
|
@ -62,8 +63,8 @@ describe('<DefaultChart />', () => {
|
|||
const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data') as any;
|
||||
const { legend, legendCallback, scales } = horizontal.prop('options') ?? {};
|
||||
|
||||
expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
|
||||
expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
|
||||
expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
|
||||
expect(borderColor).toEqual(MAIN_COLOR);
|
||||
expect(legend).toEqual({ display: false });
|
||||
expect(legendCallback).toEqual(false);
|
||||
expect(scales).toEqual({
|
||||
|
|
|
|||
Loading…
Reference in a new issue