Merge pull request #1741 from shlinkio/develop

Release 4.6.1

CHANGELOG.md

@@ -4,40 +4,6 @@ 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).
 
-## [4.7.0] - 2026-02-04
-### Added
-* [shlink-web-component] Add support for Shlink 5.0.0, by supporting date-based redirect conditions.
-
-### Changed
-* *Nothing*
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* *Nothing*
-
-
-## [4.6.2] - 2025-11-15
-### Added
-* *Nothing*
-
-### Changed
-* *Nothing*
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* [shlink-web-component#878](https://github.com/shlinkio/shlink-web-component/issues/878) Fix real-time updates interval setting being ignored.
-
-
 ## [4.6.1] - 2025-11-15
 ### Added
 * *Nothing*

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:25.6-alpine AS node
+FROM node:25.2-alpine AS node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION=${VERSION}

dev.Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.58.2-noble
+FROM mcr.microsoft.com/playwright:v1.56.1-noble
 
 ENV NODE_VERSION 22.14
 ENV TINI_VERSION v0.19.0

package.json

@@ -20,54 +20,53 @@
     "test:verbose": "node --run test -- --verbose"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^7.2.0",
+    "@fortawesome/fontawesome-free": "^7.1.0",
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
-    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
     "@json2csv/plainjs": "^7.0.6",
-    "@reduxjs/toolkit": "^2.11.2",
+    "@reduxjs/toolkit": "^2.10.1",
     "@shlinkio/data-manipulation": "^1.0.4",
-    "@shlinkio/shlink-frontend-kit": "^1.4.0",
+    "@shlinkio/shlink-frontend-kit": "^1.3.1",
-    "@shlinkio/shlink-js-sdk": "^3.1.0",
+    "@shlinkio/shlink-js-sdk": "^3.0.1",
-    "@shlinkio/shlink-web-component": "^0.18.0",
+    "@shlinkio/shlink-web-component": "^0.17.0",
-    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.9",
     "bottlejs": "^2.0.1",
     "clsx": "^2.1.1",
     "compare-versions": "^6.1.1",
     "csvtojson": "^2.0.14",
     "date-fns": "^4.1.0",
-    "react": "^19.2.4",
+    "react": "^19.2.0",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.0",
     "react-external-link": "^2.6.1",
     "react-redux": "^9.2.0",
-    "react-router": "^7.13.0",
+    "react-router": "^7.9.6",
     "redux-localstorage-simple": "^2.5.1",
-    "workbox-core": "^7.4.0",
+    "workbox-core": "^7.3.0",
-    "workbox-expiration": "^7.4.0",
+    "workbox-expiration": "^7.3.0",
-    "workbox-precaching": "^7.4.0",
+    "workbox-precaching": "^7.3.0",
-    "workbox-routing": "^7.4.0",
+    "workbox-routing": "^7.3.0",
-    "workbox-strategies": "^7.4.0"
+    "workbox-strategies": "^7.3.0"
   },
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.7.0",
-    "@stylistic/eslint-plugin": "^5.7.1",
+    "@stylistic/eslint-plugin": "^5.5.0",
-    "@tailwindcss/vite": "^4.2.0",
+    "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.5",
-    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser": "^4.0.3",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.9",
     "adm-zip": "^0.5.16",
-    "axe-core": "^4.11.1",
+    "axe-core": "^4.11.0",
     "chalk": "^5.6.2",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
@@ -75,12 +74,12 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
-    "playwright": "^1.58.2",
+    "playwright": "^1.56.1",
     "tailwindcss": "^4.1.3",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.46.4",
-    "vite": "^7.3.1",
+    "vite": "^7.2.2",
-    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-pwa": "^1.1.0",
     "vitest": "^4.0.3"
   },
   "browserslist": [

src/container/context.tsx

@@ -30,11 +30,8 @@ export const useDependencies = <T extends unknown[]>(...names: string[]): T => {
   }) as T;
 };
 
-type Optionalize<P, K extends keyof P> = Omit<P, K> & Partial<Pick<P, K>>;
-
 /**
  * Higher Order Component used to inject services into components as props.
- * All dependencies become optional props so that they can still be explicitly set in tests if desired.
  */
 export function withDependencies<
   Props extends Record<string, unknown>,
@@ -42,16 +39,16 @@ export function withDependencies<
 >(
   Component: ComponentType<Props>,
   dependencyNames: DependencyName[],
-): ComponentType<Optionalize<Props, DependencyName>> {
+): ComponentType<Omit<Props, DependencyName>> {
   function Wrapper(props: Omit<Props, DependencyName>) {
-    const container = useContext(ContainerContext);
+    const container = useContainer('withDependencies');
 
     // Inject services, unless they have been overridden by props passed from
     // the parent component.
     const dependencies: Partial<Record<DependencyName, unknown>> = {};
     for (const dependency of dependencyNames) {
       if (!(dependency in props)) {
-        dependencies[dependency] = container?.[dependency];
+        dependencies[dependency] = container[dependency];
       }
     }
 

test/__helpers__/setUpTest.tsx

@@ -1,11 +1,8 @@
-import type { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
 import type { RenderOptions } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { fromPartial } from '@total-typescript/shoehorn';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { Provider } from 'react-redux';
-import { ContainerProvider } from '../../src/container/context';
 import type { RootState } from '../../src/store';
 import { setUpStore } from '../../src/store';
 
@@ -15,33 +12,15 @@ export const renderWithEvents = (element: ReactElement, options?: RenderOptions)
 });
 
 export type RenderOptionsWithState = Omit<RenderOptions, 'wrapper'> & {
-  /** Initial state for the redux store */
   initialState?: Partial<RootState>;
-
-  /**
-   * If provided, it will set this as the `buildShlinkApiClient` dependency in the `ContainerProvider`.
-   * If more dependencies are needed, then explicitly define your own `ContainerProvider` and make sure it includes a
-   * `buildShlinkApiClient` service.
-   *
-   * Defaults to vi.fn()
-   */
-  buildShlinkApiClient?: () => ShlinkApiClient;
 };
 
-/**
- * Render provided ReactElement wrapped in a redux `Provider` and a `ContainerProvider` with a single
- * `buildShlinkApiClient` dependency.
- */
 export const renderWithStore = (
   element: ReactElement,
-  { initialState = {}, buildShlinkApiClient = vi.fn(), ...options }: RenderOptionsWithState = {},
+  { initialState = {}, ...options }: RenderOptionsWithState = {},
 ) => {
   const store = setUpStore(initialState);
-  const Wrapper = ({ children }: PropsWithChildren) => (
+  const Wrapper = ({ children }: PropsWithChildren) => <Provider store={store}>{children}</Provider>;
-    <ContainerProvider value={fromPartial({ buildShlinkApiClient })}>
-      <Provider store={store}>{children}</Provider>
-    </ContainerProvider>
-  );
 
   return {
     store,

test/common/Home.test.tsx

@@ -2,6 +2,7 @@ import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import { Home } from '../../src/common/Home';
+import { ContainerProvider } from '../../src/container/context';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
@@ -9,7 +10,9 @@ import { renderWithStore } from '../__helpers__/setUpTest';
 describe('<Home />', () => {
   const setUp = (servers: ServersMap = {}) => renderWithStore(
     <MemoryRouter>
-      <Home />
+      <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
+        <Home />
+      </ContainerProvider>
     </MemoryRouter>,
     {
       initialState: { servers },

test/common/MainHeader.test.tsx

@@ -1,7 +1,9 @@
 import { screen } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
 import { MainHeader } from '../../src/common/MainHeader';
+import { ContainerProvider } from '../../src/container/context';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
 
@@ -11,8 +13,10 @@ describe('<MainHeader />', () => {
     history.push(pathname);
 
     return renderWithStore(
-      <Router location={history.location} navigator={history} unstable_useTransitions={false}>
+      <Router location={history.location} navigator={history}>
-        <MainHeader />
+        <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
+          <MainHeader />
+        </ContainerProvider>
       </Router>,
     );
   };

test/common/ShlinkVersionsContainer.test.tsx

@@ -1,13 +1,19 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
+import { ContainerProvider } from '../../src/container/context';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<ShlinkVersionsContainer />', () => {
-  const setUp = (selectedServer: SelectedServer = null) => renderWithStore(<ShlinkVersionsContainer />, {
+  const setUp = (selectedServer: SelectedServer = null) => renderWithStore(
-    initialState: { selectedServer },
+    <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-  });
+      <ShlinkVersionsContainer />
+    </ContainerProvider>,
+    {
+      initialState: { selectedServer },
+    },
+  );
 
   it.each([
     [null],

test/common/ShlinkWebComponentContainer.test.tsx

@@ -2,6 +2,7 @@ import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import { ShlinkWebComponentContainer } from '../../src/common/ShlinkWebComponentContainer';
+import { ContainerProvider } from '../../src/container/context';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
@@ -15,7 +16,12 @@ vi.mock('@shlinkio/shlink-web-component', () => ({
 describe('<ShlinkWebComponentContainer />', () => {
   const setUp = (selectedServer: SelectedServer) => renderWithStore(
     <MemoryRouter>
-      <ShlinkWebComponentContainer TagColorsStorage={fromPartial({})} />
+      <ContainerProvider value={fromPartial({
+        buildShlinkApiClient: vi.fn(),
+        TagColorsStorage: fromPartial({}),
+      })}>
+        <ShlinkWebComponentContainer />
+      </ContainerProvider>
     </MemoryRouter>,
     {
       initialState: { selectedServer, servers: {}, settings: {} },

test/servers/CreateServer.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
+import { ContainerProvider } from '../../src/container/context';
 import { CreateServer } from '../../src/servers/CreateServer';
 import type { ServersMap } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -29,8 +30,14 @@ describe('<CreateServer />', () => {
     return {
       history,
       ...renderWithStore(
-        <Router location={history.location} navigator={history} unstable_useTransitions={false}>
+        <Router location={history.location} navigator={history}>
-          <CreateServer useTimeoutToggle={useTimeoutToggle} />
+          <ContainerProvider value={fromPartial({
+            ImportServersBtn: () => <>ImportServersBtn</>,
+            useTimeoutToggle,
+            buildShlinkApiClient: vi.fn(),
+          })}>
+            <CreateServer />
+          </ContainerProvider>
         </Router>,
         {
           initialState: { servers },

test/servers/DeleteServerButton.test.tsx

@@ -11,7 +11,7 @@ describe('<DeleteServerButton />', () => {
   const setUp = (children: ReactNode = 'Remove this server') => {
     const history = createMemoryHistory({ initialEntries: ['/foo'] });
     const result = renderWithStore(
-      <Router location={history.location} navigator={history} unstable_useTransitions={false}>
+      <Router location={history.location} navigator={history}>
         <DeleteServerButton server={fromPartial({})}>{children}</DeleteServerButton>
       </Router>,
     );

test/servers/EditServer.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
+import { ContainerProvider } from '../../src/container/context';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { isServerWithId } from '../../src/servers/data';
 import { EditServer } from '../../src/servers/EditServer';
@@ -20,8 +21,10 @@ describe('<EditServer />', () => {
     return {
       history,
       ...renderWithStore(
-        <Router location={history.location} navigator={history} unstable_useTransitions={false}>
+        <Router location={history.location} navigator={history}>
-          <EditServer />
+          <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
+            <EditServer />
+          </ContainerProvider>
         </Router>,
         {
           initialState: {

test/servers/ManageServers.test.tsx

@@ -1,6 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
+import { ContainerProvider } from '../../src/container/context';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { ManageServers } from '../../src/servers/ManageServers';
 import type { ServersExporter } from '../../src/servers/services/ServersExporter';
@@ -16,7 +17,14 @@ describe('<ManageServers />', () => {
   );
   const setUp = (servers: ServersMap = {}) => renderWithStore(
     <MemoryRouter>
-      <ManageServers useTimeoutToggle={useTimeoutToggle} ServersExporter={serversExporter} />
+      <ContainerProvider value={fromPartial({
+        ServersExporter: serversExporter,
+        ImportServersBtn: () => <span>ImportServersBtn</span>,
+        useTimeoutToggle,
+        buildShlinkApiClient: vi.fn(),
+      })}>
+        <ManageServers />
+      </ContainerProvider>
     </MemoryRouter>,
     {
       initialState: { servers },

test/servers/ServersDropdown.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
+import { ContainerProvider } from '../../src/container/context';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -14,9 +15,11 @@ describe('<ServersDropdown />', () => {
   };
   const setUp = (servers: ServersMap = fallbackServers) => renderWithStore(
     <MemoryRouter>
-      <ul role="menu">
+      <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-        <ServersDropdown />
+        <ul role="menu">
-      </ul>
+          <ServersDropdown />
+        </ul>
+      </ContainerProvider>
     </MemoryRouter>,
     {
       initialState: { selectedServer: null, servers },

test/servers/helpers/ImportServersBtn.test.tsx

@@ -1,5 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { ContainerProvider } from '../../../src/container/context';
 import type { ServerData, ServersMap, ServerWithId } from '../../../src/servers/data';
 import type { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
 import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
@@ -13,7 +14,9 @@ describe('<ImportServersBtn />', () => {
   const importServersFromFile = vi.fn().mockResolvedValue([]);
   const serversImporterMock = fromPartial<ServersImporter>({ importServersFromFile });
   const setUp = (props: Partial<ImportServersBtnProps> = {}, servers: ServersMap = {}) => renderWithStore(
-    <ImportServersBtn {...props} onImport={onImportMock} ServersImporter={serversImporterMock} />,
+    <ContainerProvider value={fromPartial({ ServersImporter: serversImporterMock })}>
+      <ImportServersBtn {...props} onImport={onImportMock} />
+    </ContainerProvider>,
     {
       initialState: { servers },
     },

test/servers/helpers/ServerError.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
+import { ContainerProvider } from '../../../src/container/context';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
 import { ServerError } from '../../../src/servers/helpers/ServerError';
 import { checkAccessibility } from '../../__helpers__/accessibility';
@@ -9,7 +10,9 @@ import { renderWithStore } from '../../__helpers__/setUpTest';
 describe('<ServerError />', () => {
   const setUp = (selectedServer: SelectedServer) => renderWithStore(
     <MemoryRouter>
-      <ServerError />
+      <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
+        <ServerError />
+      </ContainerProvider>
     </MemoryRouter>,
     {
       initialState: { selectedServer, servers: {} },