mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-22 17:10:26 +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).
## [Unreleased]
## [4.1.1] - 2024-04-11
### Added
* [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
* [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.
* [#1133](https://github.com/shlinkio/shlink-web-client/issues/1133) Fix Shlink versions alignment in server error pages.
## [4.1.0] - 2024-03-17

28
src/common/ShlinkVersionsContainer.tsx
View file

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

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

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