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

Merge pull request #1136 from acelaya-forks/feature/fix-versions-alignment

Browse source 
Fix Shlink versions alignment in server error pages
This commit is contained in:
Alejandro Celaya 2024-04-11 09:21:47 +02:00 committed by GitHub
commit 5a7e8a0079
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 27 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
## [Unreleased] ## [4.1.1] - 2024-04-11
### Added ### Added
* [shlink-web-component#293](https://github.com/shlinkio/shlink-web-component/issues/293) Allow ordering redirect rules via drag'n'drop. * [shlink-web-component#293](https://github.com/shlinkio/shlink-web-component/issues/293) Allow ordering redirect rules via drag'n'drop.
@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Fixed ### Fixed
* [shlink-web-component#294](https://github.com/shlinkio/shlink-web-component/issues/294) Make sure "validate URL" control is not displayed in short URL creation/edition, when consuming Shlink >=4.0.0. * [shlink-web-component#294](https://github.com/shlinkio/shlink-web-component/issues/294) Make sure "validate URL" control is not displayed in short URL creation/edition, when consuming Shlink >=4.0.0.
* [#1130](https://github.com/shlinkio/shlink-web-client/issues/1130) Fix importing servers in Firefox for Android when the CSV file contains spaces. * [#1130](https://github.com/shlinkio/shlink-web-client/issues/1130) Fix importing servers in Firefox for Android when the CSV file contains spaces.
* [#1133](https://github.com/shlinkio/shlink-web-client/issues/1133) Fix Shlink versions alignment in server error pages.
## [4.1.0] - 2024-03-17 ## [4.1.0] - 2024-03-17

22
src/common/ShlinkVersionsContainer.tsx
View file

@ -1,7 +1,6 @@
import { clsx } from 'clsx'; import { clsx } from 'clsx';
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import type { SelectedServer } from '../servers/data'; import type { SelectedServer } from '../servers/data';
import { isReachableServer } from '../servers/data';
import { ShlinkVersions } from './ShlinkVersions'; import { ShlinkVersions } from './ShlinkVersions';
import './ShlinkVersionsContainer.scss'; import './ShlinkVersionsContainer.scss';
@ -9,19 +8,12 @@ export type ShlinkVersionsContainerProps = {
selectedServer: SelectedServer; selectedServer: SelectedServer;
}; };
const SHLINK_CONTAINER_PATH_PATTERN = /^\/server\/[a-zA-Z0-9-]*\/(?!edit)/; export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
<div
export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => { className={clsx('text-center', {
const { pathname } = useLocation(); 'shlink-versions-container--with-sidebar': isReachableServer(selectedServer),
const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]); })}
>
const classes = clsx('text-center', {
'shlink-versions-container--with-sidebar': withPadding,
});
return (
<div className={classes}>
<ShlinkVersions selectedServer={selectedServer} /> <ShlinkVersions selectedServer={selectedServer} />
</div> </div>
); );
};

32
test/common/ShlinkVersionsContainer.test.tsx
View file

@ -1,30 +1,26 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn'; import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer'; import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
import type { ReachableServer, SelectedServer } from '../../src/servers/data';
import { checkAccessibility } from '../__helpers__/accessibility'; import { checkAccessibility } from '../__helpers__/accessibility';
describe('<ShlinkVersionsContainer />', () => { describe('<ShlinkVersionsContainer />', () => {
const setUp = (activeRoute: string = '') => { const setUp = (selectedServer: SelectedServer = null) => render(
const history = createMemoryHistory(); <ShlinkVersionsContainer selectedServer={selectedServer} />,
history.push(activeRoute);
return render(
<Router location={history.location} navigator={history}>
<ShlinkVersionsContainer selectedServer={fromPartial({})} />
</Router>,
); );
};
it('passes a11y checks', () => checkAccessibility(setUp()));
it.each([ it.each([
['/something', 'text-center'], [null],
['/server/foo/edit', 'text-center'], [fromPartial<SelectedServer>({})],
['/server/foo/bar', 'text-center shlink-versions-container--with-sidebar'], [fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: 'v1.0.0' })],
])('renders proper col classes based on sidebar status', (sidebar, expectedClasses) => { ])('passes a11y checks', (selectedServer) => checkAccessibility(setUp(selectedServer)));
const { container } = setUp(sidebar);
it.each([
[null, 'text-center'],
[fromPartial<SelectedServer>({}), 'text-center'],
[fromPartial<ReachableServer>({ version: '1.0.0' }), 'text-center shlink-versions-container--with-sidebar'],
])('renders proper col classes based on sidebar status', (selectedServer, expectedClasses) => {
const { container } = setUp(selectedServer);
expect(container.firstChild).toHaveAttribute('class', `${expectedClasses}`); expect(container.firstChild).toHaveAttribute('class', `${expectedClasses}`);
}); });
}); });