From 734ff22499a96c16d9d5a4f4b9d0b78c664560a3 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 11 Apr 2024 09:19:32 +0200
Subject: [PATCH] Fix Shlink versions alignment in server error pages

---
 CHANGELOG.md                                 |  3 +-
 src/common/ShlinkVersionsContainer.tsx       | 28 ++++++----------
 test/common/ShlinkVersionsContainer.test.tsx | 34 +++++++++-----------
 3 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32a7428e..9ec565f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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
diff --git a/src/common/ShlinkVersionsContainer.tsx b/src/common/ShlinkVersionsContainer.tsx
index c62a9007..b1756057 100644
--- a/src/common/ShlinkVersionsContainer.tsx
+++ b/src/common/ShlinkVersionsContainer.tsx
@@ -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>
+);
diff --git a/test/common/ShlinkVersionsContainer.test.tsx b/test/common/ShlinkVersionsContainer.test.tsx
index da46852b..e1afee57 100644
--- a/test/common/ShlinkVersionsContainer.test.tsx
+++ b/test/common/ShlinkVersionsContainer.test.tsx
@@ -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}`);
   });
 });